3 デザイン・レイアウトの選び方

ここでは、ホームページのデザイン・レイアウトについて、ご案内いたします。

色が与えるイメージ

ホームページの色使い

サイドエリア(サイドメニュー)の位置


色が与えるイメージ

99d26eb09c1c4e73e85b7740b1f182e8_s色が与えるイメージですが、色彩デザイン的には一般的に以下のように言われています。

・寒色系(水色、青、濃紺 等)
…理知的、さわやか、涼しい、清潔、格好いい

・暖色系(オレンジ、赤、ピンク 等)
…やわらかい、優しい、あたたかい、かわいい

信頼感、実力の高さ、知的なイメージを与えたいのであれば「寒色系」の色使い、親しみや親切そうなイメージを与えたいのなら「暖色系」の色使いがお勧めです。

ホームページの色使い

e6773cd0fee5bafc1a6ce28a05353fb0_sホームページ上に様々な色を使いすぎてしまうと、全体的にガチャガチャとうるさい印象になりがちです。

色使いについては、以下のような点に気をつけましょう。

色数は少なめに、できれば3色以内におさめるとスマートでおしゃれな印象に仕上がります。

ベースカラーとポイントカラー

「ベースの色」と「目立たせたい箇所で使うポイントの色」を決めて、ホームページの色使いのルールを用意しておくこともお勧めです

ベースカラーとポイントカラーの組み合わせ例

(左側がベースカラー、右側がポイントカラー)

・グリーン ― オレンジ

・グリーン ― ピンク

・オレンジ ― グリーン

・オレンジ ― ブラウン

・オレンジ ― 水色

・ピンク ― グリーン

・ピンク ― 水色

・水色 ― オレンジ

・水色 ― ピンク

・グレー ― 赤

・クリーム ― ピンク

・クリーム ― オレンジ

・クリーム ― ブラウン

サイドエリア(サイドメニュー)の位置

5739537022e6ddd78dd10e677a5ebf8c_sサイドエリア(サイドメニュー)は、基本的には左側に置きましょう。

人の目線は、左上から右下に向かって動くため、左側に置いた方がクリック率が高まります。

そのため、サイドメニューや誘導リンクを色々とクリックさせて、個別ページを読ませたいなら、左側に置くのがよいでしょう。
一方、以下のような場合には、右側にサイドエリアを置いてもかまいません。

・コンテンツ(ページ数)が少なく、読ませたいコンテンツがあまりない場合
(左側に置くとコンテンツの貧弱さが目立ってしまう)

・コンテンツ数は多いが、魅力的なコンテンツがあまりない場合
(下手に個別ページを見られることで離脱されてしまう恐れがある)

・セールスレタータイプのページである場合
(ページの上から下までしっかりと読ませる必要があるので、途中で別ページに遷移させたくない。だからクリックされやすい左側には置かない)

・トップページメインエリアから、主要コンテンツ(反応を取るために必要なコンテンツ)への誘導がしっかりできている場合
(アクセス者に読ませたいコンテンツへの誘導をメインエリアで行っているため、サイドメニューから魅力のないコンテンツへ遷移されることを防ぎたい。だからクリックされやすい左側には置かない)