こんにちは、TANE-beのデザイナーです!
デザイナーとして経験が浅い時など、下層ページを中心に依頼されるデザイナーも多いと思います。
トップページと下層ページでは役割も異なり注意するポイントも異なってきますので、事例を付けて紹介していきます。

下層ページとは？

「下層ページ」とはトップページから派生するページのことです。
下層ページはトップページと比べて載せる情報の量が多いです。また、企業紹介ページ、サービスページ、ブログページなど各ページによってその特性が異なります。

トップページを制作したデザイナーが下層ページを担当することもありますが、下層ページの担当が変わったりページ数が多い場合は数人で手分けして制作したりすることもあります。後者の場合、情報整理の仕方やデザインのトンマナ(※)の違いが出てしまうもの。トップデザインのトンマナを守りながらユーザーが分かりやすく情報整理をすることが重要になってきます。

トップページと下層ページの役割の違いとは？

まずはトップページと下層ページの役割について、それぞれの目的の違いを見ていきましょう！

トップページの役割

1. サイトの目的に合う世界観を表現

お客様が抱えている問題を解決し、目的を達成するためにサイトのコンセプトをたてて、デザインスタイルを考え、世界観やユーザーに与えたい印象を表現します。
そして短時間で感覚的にサイトの目的と内容がわかることが重要です。

2. 次のアクションへの入り口

トップページは下層への誘導、お問い合わせの獲得など次のアクションへの入り口です。
ユーザーの興味を引く作り込みはもちろん、ユーザーが欲しい情報に短時間で辿り着けるようにユーザービリティを考慮して設計しないといけないです。

下層ページの役割

詳細情報をわかりやすく伝え、ゴールに繋げる

下層ページは、トップページでは書ききれない魅力をさらに掘り下げて沢山載せています。下層ページに進んだユーザーが内容に興味を持ってもらい、ゴール(※)に繋げる役割があります。
サイトを通して発信したい情報の魅力を効率的に伝えるためには、必要な情報が分かりやすい作りであることが必要になってきます。

では、下層ページの役割を果たすためにはどのようにデザインすればいいのでしょうか？

下層デザイン作成時のポイント

案件の概要把握

下層ページの制作はトップページのデザインが出来上がってから取り掛かります。なので、案件の概要を把握せずにトップデザインのコンセプト・スタイルだけを確認して下層デザインに入るデザイナーさんもいると思います。しかし、この方法では決して良いサイトを作ることができません！

上に述べたように、下層ページはサイトのゴールにつなげないと行けない重要な目的があります。
どのようなページを担当することになってもデザイン制作の基本は、案件の概要・目的・ターゲットなど、このサイトの存在意義を知る事です。
ここを理解している・していないでは、下層デザインを作るうえでも、認識の相違が少なく作る事ができます。

トップデザインの確認

案件の概要を理解したうえで、トップデザインを確認してください。

サイトの目的・ターゲット・今抱えている問題を解決するためになどサイトのゴールを達成するためにトップデザインでどのようなコンセプトを立てて、どのようなデザインスタイルを展開しているかを下層デザイン入る前に更なるインプットをしておきましょう。

特にサイト全体でデザインのトンマナを守るためには、トップデザインやデザインのスタイルガイドで決めているデザインスタイルを細かく確認しないと行けないです。

1. フォント・テキスト

デザインで使うフォントによってユーザーに与える印象が大きく変わってきます。
その為、フォントの種類・太さ・サイズ・文字間、行間は、トップページに合わせるようにしましょう。
また、言葉遣い（ですます調）などの表記揺れが起きているケースがあれば、こちらも統一する事でより統一感のあるサイトに仕上がっていきます。

2. カラー・配色

使われている色の確認も非常に大切です。
まずは、メインカラー・サブカラー・フォントカラー・ボーダー（線）カラーなどルールで指定されているカラーを抑えておきましょう。

いろんな色を多用するとページの統一感が出にくくなりますので、ルールにない色を安易に増やさないほうがいいです。
しかし、ルールにはない色だけど下層ページの制作時に追加しないと行けない場合があります。その時はちゃんとルール化して、他のデザイナーさんに確認・共有をしましょう。

3. レイアウト・余白

下層ページは同じようなレイアウトで展開するページも多く存在しています。同じレイアウトの下層はもちろんレイアウトを統一しないといけないです。
デザインの統一感はもちろん、コーディングの余計な工数がかからないようにすることがその理由です。

そして見出し・本文、コンテンツごとの余白の統一は非常に重要です。余白がバラバラだと、デザインのまとまりがなくなってしまうので注意が必要です。

下層ページはトップページよりコンテンツ量が多く、見出し・本文・コンテンツごとの余白などトップページでは決められていないルールを下層デザインの制作時に決めることが多いです。その時は自分が決めたルールを自分がしっかり守ることが大事になりますね。
他のデザイナーさんと共同作業をしている場合は決めたルールをちゃんと共有しながら作業しましょう。

4. アイコン・装飾・画像

アイコンやボタンなどの装飾そして画像の色調や比率などトップページでどのようなルールで制作をしているか確認しましょう。
特にアイコンは、塗りであったり、線の太さ、角丸だったりと、同じ内容でもたくさんの種類があるため、注意しましょう。

装飾のデザインスタイルをちゃんと把握しておくと、下層デザインでつまずいた時ヒントになってくれたりもします。

5. アニメーション

最後にトップデザインでおどのようなアニメーション要素を取り入れているか確認しておきましょう！
ボタンなどのホバーの動きやコンテンツが出現する動きなどを把握しておくと、下層ページでバナーや新しいボタンを制作した時アニメーションの動きを想定して制作することができますので、よりまとまりのあるサイトに仕上がっていきます。

実際にサイトの下層ページを見てみよう！

自社で作成した「税理士法人 Beso」様のサイトを事例として見ていきたいと思います！

サイト概要

こちらのサイトができるまでのストーリーやコンセプトが気になる方はこちら。

ワイヤーフレームと見比べる

トンマナと情報の整理をどのようにデザインに落とし込んでいるか、ワイヤーフレームと比較して見ていきましょう！

トンマナ

こちらの下層ページは「Besoについて」というBeso様のことを紹介する目的のアバウトページです。

情報整理

こちらの下層ページは「サービスについて」というBeso様が提供されているサービスを案内するページです。

まとめ

いかがでしたでしょうか？
デザインのコツや注意点は山ほどあるので一つの記事にまとめるのが大変でしたけど、下層ページデザインを制作するとき一番重要なことは「情報を整理して分かりやすく作る」「トンマナを守る」ことだと思います。
イレギュラーやつまずくことも多々ありますが、いいサイトを作るために頑張りましょう！