皆さんはWebサイトを作成していて「かっこよく作れない」「手作り感がでてしまう」などの難しさを感じられたことはありませんか？

このコラムでは、JimdoExpertとしてこれまで100件以上のJimdoサイトに携わってきた筆者が、Jimdoを使用して日本語のWebサイトをデザインするポイントについて、全12回にわたって解説していきます。

第2回目の今回は、Webサイトの顔であるトップページを作るときのポイントについて解説していきます。

Webサイトを作るとき、トップページにはどんな情報を載せるでしょうか。「たくさんの情報を伝えたい」「熱い気持ちを載せたい！」など、色々な思いがあるでしょう。

Webサイトの目的は様々ですが、基本的には「情報を得たい人」が「正しい情報を得る」ためにどうするかを考えるのが正解です。ここで重要なのは「情報を伝えたい人」、つまり今このコラムを読んでくださっているあなたの視点ではない、ということです。何を載せるかは「情報を得たい人」＝顧客や見込み客の視点に立って考えるべきなのです。

ではその視点に立ったとき、トップページはどうあるべきでしょうか。

例えば、雑誌に置き換えて考えてみます。雑誌のトップページといえる「表紙」には通常大きな写真が載っており、キャッチコピーや特集のタイトルが並びます。ページをめくると「目次」があり、そこには各コンテンツが何ページにあるのか、重要なコンテンツはどれか、などが一覧できるようになっています。

この「表紙」と「目次」の役割を、Webサイトではトップページに持たせるのです。すると、自ずと掲載する情報が絞られてきます。

まず、詳細な情報や長文は避けます。トップページは力を入れて作られているのに詳細ページはスカスカ、というケースがよく見られますが、これは情報の設計として、逆です。

トップページはあくまで各コンテンツヘ誘導するための導線として機能するべきで、階層が深くなるほど詳細な情報が載っている、というのが正しい設計です。

また、新着情報として過去のお知らせをズラーっと何十件も並べてあるWebサイトをたまに見かけますが、これもやめたほうが良いでしょう。新着情報は「新着」だからこそ意味があり、1年も前の情報は必要ありません。雑誌の表紙にバックナンバーを載せる人がいないのと同じです。

ではどんな情報を載せるべきか。具体的なテクニックのお話に移ります。

まず第一に、何のWebサイトであるのか直感的にわかるように、大きな画像（メインビジュアル）を載せます。これは花屋さんであれば花の写真、レストランなら料理の写真など、事業に関連した画像であるべきです。

次に、各ページヘの導線を作ります。全ページへ誘導する必要はありませんが、主要ページはある程度一覧できるほうが良いでしょう。

続いて新着情報です。Webの強みは「情報を更新できる」ことなので、更新性のある情報があれば載せます。ただし先述のように新しい情報だけに絞るように気をつけてください。

最後に、ユーザーが「すぐに知りたい」情報も掲載しておきましょう。これはどういうことかというと、例えば電話番号や営業時間などです。電話番号を調べたい、何時まで営業しているか知りたい、など「すぐに知りたい」情報へはできるだけ早くたどり着けるようにしておくと親切です。

このように、トップページには数多くの情報を少しずつ「広く浅く」載せるのがポイントです。

これらの情報をうまく掲載するにはいくつかのレイアウト手法がありますが、おすすめは「フォーボックス」です。これは4つの箱という意味で、まず一番上に大きな箱＝「メインビジュアル」を置き、その下に小さな箱＝「導線」を3つ並べる、というレイアウトです。サイトの規模によっては、この箱が6つになっても良いでしょう。

さらに、私の場合はこれをアレンジして、その下に2つの中ぐらいの箱＝「新着情報」と「すぐに知りたい情報」を置きます。このレイアウトであれば、前項で挙げた情報すべてをバランスよく配置することができます。

Jimdoでは「カラム」という機能でこのレイアウトを簡単に実現できます。

Jimdoの詳しい操作説明はここでは省きますが、このように「箱」という概念で考えると情報を整理しやすくなりますので、「表紙と目次」「広く浅く」という視点を意識し、ぜひ皆さんのトップページにも応用してみてください。

トップページができたら次は詳細ページです。
次回は、詳細ページをレイアウトするコツやポイントをご紹介します。