WEBデザインのYouTube入門講座まとめ

YouTubeで見つけたWEBデザインのエッセンスがギュッと詰まった講座（全20話）を見つけたので、各エピソードのポイントをまとめてみました。

Episode 1: このWEBデザイン講座で学べること
・グラフィックデザイン（文字フォント、配色、レイアウト等）
・WEBスキル（UI/UX、ワイヤーフレーミング等）
・ソフトウェアの種類・使い方
・WEBデザインの工程・WEBデザインでお金を稼ぐ方法

Episode 2: WEBデザインに使うソフトウェアについて
＜WEBデザインで使うソフト＞
・画像編集ソフト
・ベクター編集ソフト
・スクリーンデザインソフト
・アニメーションソフト

＜この講座で使うソフト＞
・Adobe Photoshop (Ps)
・Adobe Illustrator (Ai)
・Adobe Xd (Xd)

＜PhotoshopとIllustratorの違いは？＞
・Photoshopはピクセル型
・Illustratorはベクター型

Episode 3: WEBデザインの歴史をおさらい
・1894 Art Nouveau（自然な曲線が特徴）
・1959 Swiss Design / International（整頓したグリッドが特徴）
・1992 David Carson Grunge（混沌したデザインが特徴）
・Apple誕生前（Java Scriptを採用したデザインが特徴）
・Apple誕生後（Java Script廃止、動きのあるデザインが特徴）

Episode 4: タイポグラフィー（文字の見せ方）のポイント
・言葉選びはもちろん、文字をどう見せるかも大切
・文字の見せ方においては、読みやすさ・与える印象を意識する

①フォント
・SERIFとは、角に装飾のある文字
　→歴史・伝統・プレミア感を表現したいときに使われる
・SANS-SERIFとは、角がスッキリした文字
　→最新・モダン感を表現したいときに使われる

②文字の大きさ
・情報の重要度に応じて、強調したい文字を大きくする

③文字の間・行間
・読みやすくするため、文字の間・行間のスペースを調整する

④１行あたりの長さ
・１行あたりの長さ（目安）は、英単語10個分

＜フォント選びに迷ったときのおすすめツール＞
・Googleフォント（https://fonts.google.com/）
・Type Scale（https://type-scale.com/）

＜フォントを使いこなすためのおすすめ練習法＞
・いろんなフォントを使って「今日の名言」をSNSに投稿してみる
・好きな歌詞のイメージに合うフォントを選んでみる

Episode 5: イメージの選び方
・画像を使うか、イラストを使うか
　→画像は現実世界を如実に表したいときに向いている
　→イラストはストーリーを１つの絵で伝えたいときに向いている
・ネットにあるものを使うか、オリジナルのものを作るか
　→予算次第（予算がある場合はオリジナルで作るのがおすすめ）
・イメージを買う／作る前に、どのように使うかを考える
　→イメージに文字を追加する場合、余白があるか？色は合うか？

Episode 6: レイアウトのポイント
＜レイアウトで意識すること＞
・見やすいか
・面白いか
・情報をのみ込みやすいか

＜レイアウトで大切な概念＞
①サイズ
・情報の重要度（高・中・低）に応じて、大きさを変える
　→重要度が高い → 文字／イメージのサイズを大にする
　→重要度が中ぐらい → 文字／イメージのサイズを中にする
　→重要度が低い → 文字／イメージのサイズを小にする
※イケてるレイアウトでは、サイズ（大中小）が意識されている

②グリッド
・WEBページ上の情報を整理するための補助的存在
・ディスプレイの幅に影響を受けないようコンテイナーを使う
＜グリッドに関するおすすめの本＞
https://www.amazon.co.jp/Systems-Graphic-Systeme-Visuele-Gestaltung/dp/3721201450

Episode 7: 配色のポイント
・配色の基本＝３色
・各色の配分（目安）＝60：30：10
・色選びにおいては、色がもつ意味・印象を理解する
　→心理学の観点から各色について解説されたおすすめのサイト：https://www.empower-yourself-with-color-psychology.com/

＜色の決め方＞
①ブランドイメージを連想する
②ブランドイメージに合わせて、プライマリカラーを選ぶ
③プライマリカラーに合わせて、その他２色を選ぶ
　→コツ：色相環を使ってプライマリカラーの補色を選ぶこと
　→配色に役立つおすすめサイト：https://color.adobe.com/ja/

Episode 8: WEBデザインにおいては、「階級」が命
・情報の重要度に応じた「階級」を明確にする
　→階級が高いものを目立たせる
　→階級を意識すると、大切な情報を瞬時に見つけてもらえる

＜階級の表現方法＞
・下記のいずれか／コンビネーションで表現する

①サイズ
　→階級が高いものは大きく、低いものは小さくする

②色
　→階級が高いものは派手な色、低いものは地味／透明色にする

③配置
　→もっとも目立たせたいものを、他の項目より高く配置する

Episode 9: ワイヤーフレームの作り方
・ワイヤーフレームを使ってWEBページ上の構成を考える
　→どんな文字／イメージ／ボタンをどこに配置するか
・ワイヤーフレームはモノクロ（白黒）で作る
・ワイヤーフレームを使うメリット＝
　美しいデザインやUI/UXを作り込む前に、ワイヤーフレームを使って、
　コンテンツと構成を決めるための議論に集中できる
　→ワイヤーフレームでは、下記については考えない：
　　どのような色を使うか？
　　どのような画像を使うか？
　　どのようなフォントを使うか？

＜ワイヤーフレームの作り方＞
①紙とペンでスケッチする
②ツールを使ってワイヤーフレームを作る
　→クライアントに承認を得る必要がなければ②は省略してOK

＜ワイヤーフレーム作成におすすめのツール＞
・Sketch（https://www.sketch.com/）
※コツ：ツールを使う前に、紙とペンでスケッチすること！

Episode 10: WEBサイトの「ヒーロー」を作る
・ほとんどの人は、数秒でWEBサイトを離脱してしまう
　→15秒でWEBサイト訪問者のココロを掴むことが大切！
・訪問者をWEBサイトに留めるために意識するポイント：
　→何についてのWEBサイト？
　→WEBサイトの目的は？（販売、イベント集客、etc）
　→WEBサイトを閲覧するメリットは？
・上記を達成するためには、ヒーローを作ることが役立つ
・ヒーローの作り方については実際に動画をご覧ください！
　→https://www.youtube.com/watch?v=flAcHu-squc&list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI&index=10

Episode 11: WEBサイトのコンテンツ構成の作り方
・ワイヤーフレームを作る前に、載せるコンテンツを決める

＜コンテンツ構成の作り方＞
①WEBサイトの目標は何か？
　→リード獲得、イベント集客、採用、etc...
②目標を達成するために必要な情報（コンテンツ）を書き出す
　→主要目標がプロダクトを売ることの場合：
　　どんな製品？付属品は？強みは？etc...
　→何を載せる／載せないかについて話し合う
③コンテンツを整理する
　おすすめの整理法：
　→既存のテンプレを使う
　→ポストイットに書き出し、グルーピングする

＜構成を考える上でのポイント＞
・１ページにすべての情報を収めるのが流行っているが、必ず１ページに収める必要はない（自身のWEBサイトの目的に適した構成でOK）。

Episode 12: UI/UXのポイント

＜UI/UXにおいて意識すること＞
①わかりやすいナビゲーション
　→訪問者がWEBサイトで迷わないよう、今どこにいるのかを表示

②わかりやすい名前（ページ名／セクション名／ボタン名）
　→どのページ／セクションにどんな情報があるかを明示する
　→どのボタンをクリックしたらどんな情報が見れるかを明示する

③わかりやすいCTA（アクションボタン）
　→予約／購入／お問合せしたい場合どのボタンを押せばいい？
　→わかりやすい配置・色などを選ぶ
　→クリックできる箇所を目立たせる

Episode 13: Photoshopを使った写真編集のポイント
・実演式なので、動画をご覧ください！
　→https://www.youtube.com/watch?v=ZbQxX7v_dfo&list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI&index=13

Episode 14: Adobe Xdを使ったホームページ作成のポイント
・実演式なので、動画をご覧ください！
　→https://www.youtube.com/watch?v=l5orEmE7Pq8&list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI&index=14

Episode 15: WEBサイトの開発に向けて準備すること
・タイトル（h1、h2、h3...）を統一する
・WEBサイトの開発を依頼する場合は、デザイン出力が必要
・出力する前に、イメージを圧縮するためフォーマットを変更する
　→PNG > SVG
　→PNG > JPEG
　※透明色を使ったイラストはPNGのまま出力する

＜PNG圧縮のおすすめツール＞
・Tiny PNG（https://tinypng.com/）

Episode 16: WEBサイトの種類５選＆デザインのコツ
①Eコマース系サイト
　→どのように製品を見せるか（商品単体？使っている状態？）
　→お買い物フロー（※支払方法を入力する前に、Eメールアドレスを記入してもらうことで、購入に至らなかった人にメールでリマインドできる）

②マーケティング＋ビジネス系サイト
　→事業についての説明、他社と比較した際の強み
　→ストーリー
　→実績・導入事例
　→CTA

③ブログ・メディア
　→記事・コンテンツ
　→トップ画像（サムネイル）
　→カテゴリー

④オンラインコース・教育系サイト
　→エンゲージメント（離脱せずに続けてもらう工夫）
　→オリエンテーション（学べること、合計でかかる時間、etc）

⑤ポートフォリオ
　→アートの方向性
　→デザイナーのパーソナリティ
　→CTA

Episode 17: WEBデザイン制作のヒント
＜デザイン事例が掲載されたおすすめサイト＞
・https://www.awwwards.com/​
・https://www.lapa.ninja/​
・http://blog.gaetanpautler.com/

Episode 18: 心理学の３原則にもとづくWEBデザインの制作方法
①ミラーリング（WEBサイトの人物の行動をマネしたくなる）
②社会的評価（口コミ・レビューの評判が高いと購入したくなる）
③心理学（色、cognitive bias indexによって購入したくなる）

Episode 19: WEBサイト制作ツールの紹介
＜A. WEBサイト制作おすすめツール＞
自由度が高いが、操作性にあたっては一定の学習が必要：
・Webflow（https://webflow.com/）
・Elementor（https://elementor.com/）
自由度は低いが、初心者でも操作しやすい：
・Wordpress（https://wordpress.com/）
・Wix.com（https://www.wix.com/）

Episode 20: タイポグラフィー（文字の見せ方）の改善方法
①フォントの種類は適切？
　→複数のフォントを多用しない
　→フォントは１ or ２種類が最適

②文字・行間のスペースは適切？
　→行間を詰め過ぎない

③強調のしかたは適切？
　→目立たせたい文字に対して、いくつも装飾しない
　　※太文字、イタリック体、アンダーラインをすべて使う等

以上です！いかがでしたか？
実際の動画もテンポがよくてわかりやすいので、ぜひ観てみてください！