【初心者必見】Webデザインで押さえておきたい基礎知識！
WEBデザインを学ぼう、WEBデザイナーとして活躍していきたい、そう考えている人は押さえておいて欲しい知識をご紹介します。
パーツ・エリアの名前
まずはWebサイトのパーツの名前を知ることから始めましょう。名前を知らないとデザインの参考を探すことができません。
- 01 ヘッダー
- 02 ナビゲーション（グローバルナビゲーション）
- 03 ハンバーガーメニュー
- 04 MV（メインビジュアル）・KV（キービジュアル）・ヒーローエリア
- 05 FV（ファーストビュー）
- 06 パンくずリスト
- 07 サイドメニュー
- 08 コンテンツ
- 09 フッター
01 ヘッダー
ウェブデザインにおけるヘッダーは、ホームページの最上部に設置される領域を指します。ロゴ、サイトタイトル、グローバルナビゲーションメニューなどを配置し、サイト全体のアイデンティティや基本的な情報を表示する重要な役割を担っています。
02 ナビゲーション（グローバルナビゲーション）
Webサイトの全ページに共通して表示されるメニューのことです。ヘッダーやフッターなどに設置され、サイトの主要なコンテンツへのリンクがまとめられています。ユーザーにとって使いやすいグローバルナビゲーションを設計することで、サイト全体の利便性を向上させることができます。
03 ハンバーガーメニュー
主にスマートフォンなどの小型画面向けに用いられるナビゲーションメニューの一種です。3本線のアイコン（≡）などをタップすることで、隠れていたメニュー項目が展開される仕組みが特徴です。
04 MV（メインビジュアル）・KV（キービジュアル）・ヒーローエリア
いずれもWebサイトの上部に配置され、ファーストビューと呼ばれる領域に含まれます。
MV（メインビジュアル）Webサイト全体のイメージを象徴するような、最も重要なビジュアルを指します。 企業ロゴやキャッチフレーズなどを一緒に配置することも多く、サイトのアイデンティティを表現します。 広告バナーのような役割も持ち、特定のキャンペーンや商品・サービスを訴求する場合もあります。
KV（キービジュアル） 特定のキャンペーンや商品・サービスに焦点を当てたビジュアルを指します。 MVよりも具体的な内容を表現し、ユーザーの行動を促すことを目的とします。 ランディングページや商品ページなどに配置されることが多いです。
ヒーローエリア MVやKVを含む、ファーストビュー全体を指すこともあります。より広い意味で、Webサイトの冒頭部分を指す場合もあり、ヒーローエリアには、ビジュアル以外にも見出しや説明文、CTAボタンなどを配置し、ユーザーをサイト内へ誘導する役割があります。
05 FV（ファーストビュー）
ユーザーがWebページにアクセスした際に最初に目に入る範囲のことです。 スクロールせずに画面に表示される部分で、ユーザーがそのWebページに興味を持ってもらえるかに大きな影響を及ぼす重要な要素です。
06 パンくずリスト
Webサイトを訪れたユーザーが、現在閲覧しているページがサイト内のどこに位置するのかを視覚的にわかりやすく把握できるよう、ページの階層構造をリスト形式で表示するナビゲーション要素です。
パンくずリストは、童話『ヘンゼルとグレーテル』で、兄妹が森の中で迷子にならないようにパンくずを道標代わりに置いていったことに由来します。Webサイトにおいても、パンくずリストはユーザーがサイト内を迷わずに目的のページを見つけられるように導く役割を果たします。
07 サイドメニュー
Webデザインにおけるサイドメニューとは、Webサイトのコンテンツエリアの左右に設置される縦長のメニューバーのことです。
08 コンテンツ
Webサイトを形成するテキストや画像などの情報・要素をさします。
一般的にはヘッダー下からフッター上までのエリアに入るもの全てに当てはまるので、第三者に説明する際はコンテンツの中の情報を提示したほうが伝わりやすいと思います。
09 フッター
ページ下部に配置される領域のことです。主に、会社ロゴ、住所、電話番号、メニュー、お問い合わせ、コピーライトなどの情報を掲載するために利用されます。
配色の知識
Webデザインにおいて、配色はとても重要な要素です。適切な配色を選ぶことで、サイト全体の印象を大きく左右することができます。
Webデザインで配色を考える前に、色の基礎知識を理解しておくことが重要です。
- 色相: 赤、青、緑など、色の種類を表します。
- 彩度: 色の鮮やかさを表します。彩度が高いほど鮮やかで、低いほどくすんだ色になります。
- 明度: 色の明るさを表します。明度が高いほど明るい色で、低いほど暗い色になります。
配色方法
Webデザインには様々な配色方法がありますが、いくつか基本的な方法をご紹介します。
- 類似色相配色: 隣接する色相同士を組み合わせる配色方法です。統一感があり、落ち着いた印象を与えます。
- 補色配色: 互いに反対側の色相を組み合わせる配色方法です。目立ちやすく、インパクトのある印象を与えます。
- 三色配色: 3つの色相を組み合わせる配色方法です。バランスが良く、洗練された印象を与えます。
- 無彩色配色: 白、黒、グレーなどの無彩色のみで配色する方法です。シンプルで高級感のある印象を与えます。
配色を考える際のポイント
配色を考える際には、以下の点に注意しましょう。
- ターゲット層: ターゲット層に合わせて、適切な色を選ぶことが重要です。
- 伝えたいイメージ: サイトで伝えたいイメージに合わせて、色を選ぶことが重要です。
- 視認性: 文字が読みやすい配色であることが重要です。
- ブランドイメージ: ブランドイメージに合った配色であることが重要です。
Webデザインにおけるフォントの知識
Webデザインにおいて、フォントはサイトの印象を大きく左右する重要な要素です。適切なフォントを選ぶことで、ユーザーに読みやすく、魅力的なデザインを伝えることができます。
フォントの種類
Webデザインで使用されるフォントは、大きく2種類に分類されます。
- 和文フォント: 漢字、ひらがな、カタカナなどの日本語の文字を表示するために使用されます。
- 欧文フォント: アルファベットなどの欧文を表示するために使用されます。
それぞれの種類の中でも、様々な書体や太さ、スタイルのフォントが存在します。
フォントの選び方
フォントを選ぶ際には、以下の点を考慮する必要があります。
- サイトの目的やターゲット層: サイトの目的やターゲット層に合わせて、適切な書体やスタイルを選びます。例えば、フォーマルなサイトであれば、読みやすい明朝体を選ぶ一方、カジュアルなサイトであれば、ポップなゴシック体を選ぶなどが考えられます。
- 視認性: 文字が読みやすいフォントを選ぶことが重要です。特に、メインコンテンツに使用するフォントは、十分な大きさで、かつ、コントラストの高い色を使用する必要があります。
- デザイン全体のバランス: 使用するフォントは、サイト全体のデザインと調和する必要があります。例えば、 serif 体と sans-serif 体を組み合わせる場合、それぞれの比率や配置を carefully 検討する必要があります。
- ライセンス: 商用利用可能なフォントかどうかを確認する必要があります。フリーフォントであれば問題ありませんが、有料フォントの場合は、ライセンスに基づいて使用する必要があります。
Webフォントとデバイスフォント
Webフォントは、Webサイトに直接フォントデータを埋め込む方法です。これにより、デザイナーが意図した通りのフォントでサイトを表示することができます。一方、デバイスフォントは、ユーザーの端末にインストールされているフォントを使用する方法です。Webフォントと比較すると、表示速度が速いというメリットがありますが、デザイナーが意図したフォントで表示されない可能性があります。
近年では、Webフォントサービスが普及しており、多くのフォントを無料で利用することができます。これらのサービスを利用することで、様々なフォントを簡単に試すことができます。
まとめ
WEBデザインで学んでおきたい基礎知識について解説してきました。
もっと基本スキルをマスターしたい・デザインを改善するヒントがほしいというかたは、書籍を参考にするのもよいでしょう。
