第2回：Webサイトの顔！トップページの骨組みを作ろう 情報を得たい人

Jimdoで魅せる日本語Webデザイン（全12回）
第2回：Webサイトの顔！トップページの骨組みを作ろう
執筆：服部 雄樹（服部制作室）
皆さんはWebサイトを作成していて「かっこよく作れない」「手作り感がでてしまう」などの難しさを感じられたことはあり
ませんか？
このコラムでは、JimdoExpertとしてこれまで100件以上のJimdoサイトに携わってきた筆者が、Jimdoを使用して日本
語のWebサイトをデザインするポイントについて、全12回にわたって解説していきます。
第2回目の今回は、Webサイトの顔であるトップページを作るときのポイントについて解説していきます。
情報を得たい人の視点に立って考えよう
Webサイトを作るとき、トップページにはどんな情報を載せるでしょうか。「たくさんの情報を伝えたい」「熱い気持ちを載
せたい！」など、色々な思いがあるでしょう。
Webサイトの目的は様々ですが、基本的には「情報を得たい人」が「正しい情報を得る」ためにどうするかを考えるのが
正解です。ここで重要なのは「情報を伝えたい人」、つまり今このコラムを読んでくださっているあなたの視点ではない、
ということです。何を載せるかは「情報を得たい人」＝顧客や見込み客の視点に立って考えるべきなのです。
トップページは雑誌でいえば表紙と目次
ではその視点に立ったとき、トップページはどうあるべきでしょうか。
例えば、雑誌に置き換えて考えてみます。雑誌のトップページといえる「表紙」には通常大きな写真が載っており、キャッ
チコピーや特集のタイトルが並びます。ページをめくると「目次」があり、そこには各コンテンツが何ページにあるのか、重
要なコンテンツはどれか、などが一覧できるようになっています。
この「表紙」と「目次」の役割を、Webサイトではトップページに持たせるのです。すると、自ずと掲載する情報が絞られて
きます。
まず、詳細な情報や長文は避けます。トップページは力を入れて作られているのに詳細ページはスカスカ、というケース
がよく見られますが、これは情報の設計として、逆です。
トップページはあくまで各コンテンツヘ誘導するための導線として機能するべきで、階層が深くなるほど詳細な情報が載っ
ている、というのが正しい設計です。
また、新着情報として過去のお知らせをズラーっと何十件も並べてあるWebサイトをたまに見かけますが、これもやめた
ほうが良いでしょう。新着情報は「新着」だからこそ意味があり、1年も前の情報は必要ありません。雑誌の表紙にバック
ナンバーを載せる人がいないのと同じです。
ポイントは「広く浅く」
ではどんな情報を載せるべきか。具体的なテクニックのお話に移ります。
まず第一に、何のWebサイトであるのか直感的にわかるように、大きな画像（メインビジュアル）を載せます。これは花屋
さんであれば花の写真、レストランなら料理の写真など、事業に関連した画像であるべきです。
次に、各ページヘの導線を作ります。全ページへ誘導する必要はありませんが、主要ページはある程度一覧できるほう
が良いでしょう。
続いて新着情報です。Webの強みは「情報を更新できる」ことなので、更新性のある情報があれば載せます。ただし先
述のように新しい情報だけに絞るように気をつけてください。
最後に、ユーザーが「すぐに知りたい」情報も掲載しておきましょう。これはどういうことかというと、例えば電話番号や営
業時間などです。電話番号を調べたい、何時まで営業しているか知りたい、など「すぐに知りたい」情報へはできるだけ
早くたどり着けるようにしておくと親切です。
このように、トップページには数多くの情報を少しずつ「広く浅く」載せるのがポイントです。
おすすめのレイアウトは「フォーボックス」
これらの情報をうまく掲載するにはいくつかのレイアウト手法がありますが、おすすめは「フォーボックス」です。これは4つ
の箱という意味で、まず一番上に大きな箱＝「メインビジュアル」を置き、その下に小さな箱＝「導線」を3つ並べる、とい
うレイアウトです。サイトの規模によっては、この箱が6つになっても良いでしょう。
さらに、私の場合はこれをアレンジして、その下に2つの中ぐらいの箱＝「新着情報」と「すぐに知りたい情報」を置きます。
このレイアウトであれば、前項で挙げた情報すべてをバランスよく配置することができます。
Jimdoでは「カラム」という機能でこのレイアウトを簡単に実現できます。
Jimdoの詳しい操作説明はここでは省きますが、このように「箱」という概念で考えると情報を整理しやすくなりますので、
「表紙と目次」「広く浅く」という視点を意識し、ぜひ皆さんのトップページにも応用してみてください。
トップページができたら次は詳細ページです。
次回は、詳細ページをレイアウトするコツやポイントをご紹介します。
次回のコラムを見る »
服部 雄樹（はっとり・ゆうき）
服部制作室 代表／JimdoExpert
http://www.hattori-studio.jp/
http://www.template-labo.com/
愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外
案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種Webサービスのテンプレートデ
ザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外
のWebデザインを日本向けにローカライズした新しいデザインを提案している。
著書に『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方』など。
Copyright 2017 はじめてＷＥＢ All Rights Reserved.
http://hajimeteweb.jp/