トップページで使える導入部分のレイアウトデザイン10個+α

トップページで使える導入部分のレイアウトデザイン10個+α

Webサイトのトップページにはさまざまな役割がありますが、その中でも大切なポイントは中ページへの誘導動線の確保です。

そのためトップページでは提供できる情報を効果的に伝えるために、以下の要素を組み合わせた導入エリアを設けることが多いです。
・見出し
・リード文
・イメージ(写真やイラスト)
・詳しく見るボタン

この記事では同じパーツを使いながら、導入部分のレイアウトデザインのアイデアを10個紹介したいと思います。 (見出しとリード文にドグラ・マグラを使っていますが特に理由はありません 笑)

なるべく以下の点について気をつけながらつくってみました。
・どんな写真でもレイアウトに影響がない
・CSSでコーディングしやすい
・レスポンシブしやすい

イメージとテキストを横並びにする

イメージとテキストを横並びにする

一番オーソドックスな形のレイアウト。画像とテキストが明確に分かれているので情報の区分けがわかりやすく理解しやすいレイアウトだと思います。
コーディングのワンポイントとして、テキスト部分を画像の高さの上下中央に配置すると美しく見えます。

イメージにテキストエリアを重ねる その1

イメージにテキストエリアを重ねる その1

写真にテキストエリアを組み込ませることにより、同じエリアであることを強調できます。 縦に長い1カラムのデザインと相性がいいです。

気をつけたいポイントは、テキストが中央揃えになっているため、スマートフォンになったときに改行位置によって読みづらくなる点です。
スマートフォンの時は「左揃えにする」、「改行は削除する」などの調整が必要です。

イメージにテキストエリアを重ねる その2

イメージにテキストエリアを重ねる その2

写真にテキストエリアをのせるレイアウトです。写真の上にテキストをのせると視認性が悪くなるため背景に色ベタを配置しています。
ただ色ベタの面積が大きすぎると写真の見える範囲が少なくなるため、最小限にしています。

イメージにテキストエリアを重ねる その3

イメージにテキストエリアを重ねる その3

上のレイアウトと似ていますが、このレイアウトでは色ベタの不透明度を落とすことで写真の全体像を見えるようにしています。
あまり不透明度を落とすと文字が見えにくくなり、不透明度を上げると写真が見えなくなるので、うまいバランスに調整する必要があります。

イメージを暗くする

イメージを暗くする

背景色に黒を塗り、イメージの不透明度を落とすパターンです。
写真の上にのっていながらテキストも見えやすいため、多く採用されているデザインパターンだと思います。

イメージを明るくする

イメージを明るくする

上記とは逆に、背景色に白を塗り、イメージの不透明度を落とすパターンです。

背景にぼかした写真を使う

背景にぼかした写真を使う

イメージをぼかして背景にひくパターンです。色数が制限されたシンプルなデザインのサイトに、色ベタの代わりに背景などで使うと効果的です。

イメージにテキストを重ねる

イメージにテキストを重ねる

見出しを写真に重ねる、雑誌などのグラフィックデザインのようなレイアウトです。
下に置く写真によっては文字が見えなくなるので注意が必要です。

イメージと背景をずらして配置

イメージと背景をずらして配置

あえてイメージとテキストエリアをずらして配置するレイアウトです。
グリッドにとらわれない、動きのあるレイアウトにしたい場合におすすめです。
参考画像はわかりやすいように濃いグレーにしていますが、実際はもっと薄い色でもいいかもしれません。

縦書きを使う

縦書きを使う

コンテンツの種類により合う合わないがあると思いますが、見出しを縦書きにするのもレイアウトの一工夫として効果的です。
「コンセプト」や「メッセージ」など人の声を伝えるようなコンテンツの導入に相性がいいと思います。

その他にもこんな工夫を!

実際にデザインを作る際には、上記のレイアウトにプラスしていろいろと工夫が必要です。

例えば、、
・見出しとリード文のジャンプ率をデザイントーンに合わせる
・見出しの書体を変えてみる
・見出しに英文を添えてみる
・アイコンやナンバリングなどワンポイントのあしらいを入れる
などなど

そもそもの話で、原稿量をライターさんに調整してもらったり、良いイメージ(写真やイラスト図)を手配することも大切です。

Webサイトのトップページはコンテンツの入り口として重要だと思うので、いろいろと工夫していきたいですね。 参考になれば幸いです!