)2016年5月2日更新ツイート閲覧数6,766viewsこのコラムをPDF形式でダウンロードする皆さんはWebサイトを作成していて「かっこよく作れない」「手作り感がでてしまう」などの難しさを感じられたことはありませんか?このコラムでは、JimdoExpertとしてこれまで100件以上のJimdoサイトに携わってきた筆者が、Jimdoを使用して日本語のWebサイトをデザインするポイントについて、全12回にわたって解説していきます。第2回目の今回は、Webサイトの顔であるトップページを作るときのポイントについて解説していきます。情報を得たい人の視点に立って考えようWebサイトを作るとき、トップページにはどんな情報を載せるでしょうか。「たくさんの情報を伝えたい」「熱い気持ちを載せたい!」など、色々な思いがあるでしょう。Webサイトの目的は様々ですが、基本的には「情報を得たい人」が「正しい情報を得る」ためにどうするかを考えるのが正解です。ここで重要なのは「情報を伝えたい人」、つまり今このコラムを読んでくださっているあなたの視点ではない、ということです。何を載せるかは「情報を得たい人」=顧客や見込み客の視点に立って考えるべきなのです。トップページは雑誌でいえば表紙と目次ではその視点に立ったとき、トップページはどうあるべきでしょうか。雑誌に置き換えて考えてみます。雑誌のトップページといえる「表紙」には通常大きな写真が載っており、キャッチコピーや特集のタイトルが並びます。ページをめくると「目次」があり、そこには各コンテンツが何ページにあるのか、重要なコンテンツはどれか、などが一覧できるようになっています。この「表紙」と「目次」の役割を、Webサイトではトップページに持たせるのです。すると、自ずと掲載する情報が絞られてきます。詳細な情報や長文は避けます。トップページは力を入れて作られているのに詳細ページはスカスカ、というケースがよく見られますが、これは情報の設計として、逆です。トップページはあくまで各コンテンツヘ誘導するための導線として機能するべきで、階層が深くなるほど詳細な情報が載っている、というのが正しい設計です。新着情報として過去のお知らせをズラーっと何十件も並べてあるWebサイトをたまに見かけますが、これもやめたほうが良いでしょう。新着情報は「新着」だからこそ意味があり、1年も前の情報は必要ありません。雑誌の表紙にバックナンバーを載せる人がいないのと同じです。ポイントは「広く浅く」ではどんな情報を載せるべきか。具体的なテクニックのお話に移ります。第一に、何のWebサイトであるのか直感的にわかるように、大きな画像(メインビジュアル)を載せます。これは花屋さんであれば花の写真、レストランなら料理の写真など、事業に関連した画像であるべきです。次に、各ページヘの導線を作ります。全ページへ誘導する必要はありませんが、主要ページはある程度一覧できるほうが良いでしょう。Webの強みは「情報を更新できる」ことなので、更新性のある情報があれば載せます。先述のように新しい情報だけに絞るように気をつけてください。最後に、ユーザーが「すぐに知りたい」情報も掲載しておきましょう。これはどういうことかというと、例えば電話番号や営業時間などです。電話番号を調べたい、何時まで営業しているか知りたい、など「すぐに知りたい」情報へはできるだけ早くたどり着けるようにしておくと親切です。このように、トップページには数多くの情報を少しずつ「広く浅く」載せるのがポイントです。おすすめのレイアウトは「フォーボックス」これらの情報をうまく掲載するにはいくつかのレイアウト手法がありますが、おすすめは「フォーボックス」です。これは4つの箱という意味で、まず一番上に大きな箱=「メインビジュアル」を置き、その下に小さな箱=「導線」を3つ並べる、というレイアウトです。サイトの規模によっては、この箱が6つになっても良いでしょう。私の場合はこれをアレンジして、その下に2つの中ぐらいの箱=「新着情報」と「すぐに知りたい情報」を置きます。このレイアウトであれば、前項で挙げた情報すべてをバランスよく配置することができます。Jimdoでは「カラム」という機能でこのレイアウトを簡単に実現できます。Jimdoの詳しい操作説明はここでは省きますが、このように「箱」という概念で考えると情報を整理しやすくなりますので、「表紙と目次」「広く浅く」という視点を意識し、ぜひ皆さんのトップページにも応用してみてください。トップページができたら次は詳細ページです。次回は、詳細ページをレイアウトするコツやポイントをご紹介します。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。人気講師が教える本格Webサイトの書き方』など。(著)「4つのレイアウトパターン」と「レスポンシブデザイン」を実際に手を動かして作りながらサイト制作のきほんが学べます!ライブ感のあるチュートリアル学習により、まるでWebデザイン会社でOJT(オン・ザ・ジョブ・トレーニング)を受けているような体験型の独習書です。ための経理サポートサイト文具、通信、オフィスのことなら何でもお任せ問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール事務所開設するなら固定電話番号で信頼アップ本コンテンツは、掲載時点の内容となります。「みんなのビジネスオンライン」は「はじめてWEB」にお読み替えいただきますようお願いいたします。Reserved.「はじめてWEB」はKDDIが提供しています。