【Webデザイン初心者必読！】ホームページデザインを知る！～初級編～

　平均読み取り時間：5分

こんにちは！EveryFineです！

ホームページのデザインに関して知識をつけたい！

何から学べばいいのかわからないとお考えの方は多くいらっしゃると思います。

そこで今回はホームページを管理されている方や、

ホームページ制作を検討されている方に向けて

3つのテーマを軸にサイトデザインの基礎を解説します。

• 1．レイアウトの種類
• 2．フォント
• 3．配色パターン

1．レイアウトの種類

まず最初にレイアウトの種類についてご紹介します。

ホームページにはレイアウトがいくつかあり、

ホームページの目的やタイプに適したものを選択する必要があります。

主なレイアウトの種類として、3つご紹介させていただきます。

• ①シングルカラム（1カラム）
• ②マルチカラム（2カラム、3カラム）
• ③グリッドレイアウト

①シングルカラム（1カラム）

縦1列に上から下へと並べるレイアウトを1カラムと呼びます。

1カラムにすると視線が中央に集まるので、閲覧者に見てもらいたいコンテンツが明確になります。

---

おすすめ使用箇所

ランディングページキャンペーンページなど

---

特に近年はスマートフォンの普及により、

余計な情報は表示しない1カラムが増加傾向にありますが、

縦に長くなるのでコンテンツが多くなると

スクロールが多くなってしまうというデメリットもあります。

---

②マルチカラム（2カラム、3カラム）

マルチカラムはコンテンツの脇にサイドバーを設置することで

2~3列に分かれるレイアウトです。

上の図は2カラムですがコンテンツの両脇にサイドバーがつく場合は3カラムといいます。

情報量が多く、複数のページを持つホームページや商品数が多いページにおすすめです。

---

おすすめ使用箇所

ECサイト（オンライン上で買い物ができるホームページ）

---

一度にたくさんのコンテンツを見せることで、

ユーザーにホームページを回遊させやすくする効果があります。

---

③グリッドレイアウト

画面やページを直線の格子状に分割させ、コンテンツを配置する方法です。

グリッドレイアウトは多くの要素を一覧で多く配置できるほか、

どこで区切られているのかが分かりやすいという特徴があります。

また、1カラムと同じようにレスポンシブデザインとの相性がよく、

画面の幅やデバイスによってカラム数を変化させるなどのデザインが実現できます。

---

おすすめ使用箇所

パソコンとスマートフォンどちらからもご覧頂きたいホームページ（レスポンシブ）

---

2．フォントの種類とは

フォントには非常に多くの種類があり、

ホームページに適したフォントを選ぶことはは難しく感じるかもしれません。

今回は、ホームページ制作の際によく使われているフォントの中でも、

代表的なものを3つご紹介します。

• ①メイリオ体
• ②游ゴシック体
• ③ヒラギノ角ゴシック

①メイリオ体

Windowsの標準テキストフォントとしても設定されている

最も常用率の高いフォントです。

全角幅で作られているため癖がなく、遠くから見ても読みやすいという特徴があります。

メイリオ は 角が目立たない少し丸みを帯びたフォントですので、

可愛らしく柔らかい印象 を与えるのに向いています。

②游ゴシック体

メイリオフォントに負けず劣らず常用率が高く、万人に受け入れやすいフォントです。

文字の太さにバリエーションがあるため使い勝手がよく、

メイリオよりもクラシックで大人っぽい印象を持っています。

③ヒラギノ角ゴシック

ヒラギノ角ゴシックは字体の形が美しくすっきりしているという点が大きな特徴です。

また、フォントの太さが10種類ほど用意されているため、

幅広いホームページのデザインに使用できます。

最近では、多くの大手企業ホームページでヒラギノ角ゴシックが採用されており、

人気が高いフォントと言えます。

3．配色パターンの種類とは

ホームページのデザインを決める上で配色パターンも大切な要素になります。

一般的には、1つのホームページに対して、

メインカラー、ベースカラー、アクセントカラー

の3つを決める必要があります。

ここでは、分かりやすいようにホームページを簡易的に表した

下の画像を用いてご説明させていただきます。

• ①ベースカラー
• ②メインカラー
• ③アクセントカラー

①ベースカラー

画像内のページの背景に使用している

「グレー」が「ベースカラー」となります。

最も大きな面積を占める色で、ホームページに使われる色のうち

70%程の割合が良いとされています。

ベースカラーはコンテンツ間の余白などにも使われるため、

白、黒、グレーなど他のメインカラー、アクセントカラーの

妨げになりにくい色が選ぶと全体が綺麗にまとまります。

②メインカラー

画像内のページタイトルや見出しに使用している

「青」が「メインカラー」です。

ホームページ全体の印象を決定づける主役の色で、もっとも重要なカラーとなります。

ホームページに使われる色のうち25%程の割合が良いとされています。

ホームページのイメージを大きく左右するメインカラーは、

ホームページに表示するロゴやターゲットイメージに合わせた色が適しているか思います。

③アクセントカラー

ボタンに使用している

「水色」が「アクセントカラー」です。

アクセントカラーは全体に占める面積の割合が一番小さい代わりに、

メインカラー、ベースカラーに対して、目立つ色となることが理想です。

ホームページに使われる色のうち5%程の割合が良いとされています。

問い合わせ専用ボタンなど、ユーザーに注目してほしい箇所に使うと効果絶大です。

4．まとめ

ここで紹介させて頂いた内容はホームページデザインのほんの一部分ですが、

Webデザイン初心者の方は、頭に入れておくことで

今後ホームページデザインに関する記事を読むときの手助けになるはずです。

また、ホームページ制作されている、もしくは制作を予定されているWeb担当者の方は

今後制作会社とコミュニケーションを取る際などににお役立て頂けると幸いです。

お問い合わせはこちら

03-5459-4073 　　　　　　　　 fines-help@e-tenki.co.jp

関連資料・記事