Step 3-4 デザインコンセプトに基づいた下層ページデザインとは？

Web担ビギナーの目次を知りたい方はこちら

3-4では、デザインコンセプトに基づいた下層ページデザインとは、どのようなものなのかを具体例をあげて解説します。

デザインコンセプト例を振り返ってみよう

ではここで、Step 2-6で紹介したデザインコンセプト例を振り返ってみましょう。

このデザインコンセプトに基づいて作るWebサイトは、結婚式場を提供している会社のサービス紹介を行うもので、「問い合わせ数」を増やすことを目指しています。そのため、信頼感や親近感、解放感とともに、「式」というクラシカルなイメージを出すためにアールヌーヴォ調のパーツを使うデザインとなっています。そして、メインカラーのハンドメイドは、「お客様と結婚式を創り上げる」ことを表すために入れています。

なお、下層ページとして想定されるものには、ウェディングフェアページやウェディングプランページなどがあります。

デザインテンプレートの作成が重要！

コンセプトに基づいた下層ページデザインを作成するうえで重要なのは、「デザインテンプレートを作成すること」です。1ページずつ個別に作成していく方法では、効率があがらないこともありますが、なによりも、個別に最適なデザインが追求されることで、デザインコンセプトが適用できていない箇所も発生しやすくなるからです。

デザインテンプレートを作成する際には、次の2点を整理しておきましょう。

1. ページの枠組みデザイン
2. パーツデザイン

1.ページの枠組みデザイン

まずは、次図にあげるような、全ページで共通して必要になる枠組みのデザインを行います。

なお、個人向けコンテンツと法人向けコンテンツとで、異なる下層ページを用意している場合は、２つの枠組みを用意しておきます。

2.パーツデザイン

次に、見出しや本文、写真など複数のページで汎用的に使うパーツと、特定のページのみで使う固有パーツを整理していきます。特に汎用パーツでは、どのページで使われても問題ないように、注意深くデザインコンセプトの内容を反映します。

上記のようにテンプレート化することで、デザインコンセプトに基づいたページが作成しやすくなります。1の枠に、2のパーツを入れ込みながらページ個別のデザインを行い、問題があれば枠やパーツのデザインを見直していけばよいわけです。

下層ページデザイン例＿ウェディングフェア、ウェディングプラン

では、具体的な例をあげて説明しましょう。取り上げるのは、結婚式場サイトの中でも特に重要なウェディングフェアページとウェディングプランページの例です。これらのページは、トップページと同様もしくはそれ以上にアクセス数が多く、検索エンジンから直接着地することも多いページです。

デザインコンセプトで定義した内容がしっかりと表現されていることはもちろん、わかりやすさや比較のしやすさなど、「問い合わせ」につなげるためのデザイン表現も非常に重要になります。

そのため、部分的に明朝フォントを使用しつつも、デザインテンプレートで定義したゴシック調のトーンは、背景や見出しにほどこした装飾によって表現しています。また、親しみやすさ・ハンドメイドのイメージは、カラーだけでなく、手書き風のアイコン等で表しています。

それだけでなく、一覧で見た時に比較対象として訴求すべき箇所（フェアページでいえばフェア種別をカラーでわかりやすくしている箇所、プランページでいえばランキング部分や価格、割引金額など）を考慮し、デザインコンセプトで定義した内容とバランスを見ながら下層ページを作成していきます。

3-4では、デザインコンセプトに基づいた下層ページデザインについて解説しました。3-5では、実際にHTMLやCSSという言語を使ってページを作るコーディングについて概説します。

ポイント

3-4 「デザインコンセプトに基づいた下層ページデザインとは？」のポイント

• Web戦略を実施するために、デザインコンセプトは作成される
• デザインコンセプトに基づいた下層ページデザインを作成するうえで重要なのは、デザインテンプレートを作成することである
• 下層ページデザインは、成果につなげるためのデザイン表現も非常に重要である

やってみよう

• 自分が運用しているWebサイトのデザインコンセプトをみて、下層ページにどのように反映されているかをチェックしよう

もっと学び、成長するために

本記事に掲載している画像をダウンロードできます。ダウンロードはこちら

各式場_ウェディングフェア（一覧）例の画像をダウンロードできます。ダウンロードはこちら

各式場_ウェディングプラン（一覧）例の画像をダウンロードできます。ダウンロードはこちら

本記事の監修者

濱 大洋（はま たいよう）

株式会社キノトロープ 執行役員　コンサル部 副部長
プロジェクトマネージャー／コンサルタント

2007年キノトロープ入社。
コンサルティングを中心に、プロジェクトマネージャーとして小規模から大規模まで多数のサイトリニューアルを担当。セミナーや大学での講師も務める。
著書に『HEARTCORE導入・構築ガイド』（インプレス）がある。