みなさんこんにちは
合同会社リードの金子です。
今回は初心者でも簡単に作れるホームページ制作講座としてホームページを制作する前にやっておいた方がいい「サイトの構成」という内容でお伝えしていきます。
そもそもなぜ？サイトの構成が必要か？
というと、まっさらな状態でホームーページ制作をしてしまうと、後から追加したぺージなどによって、トップページやサイト全体の見直しになる場合が出てきたりしちゃうんです。
例えば
自動車屋さんのホームページを作るとして最初から、販売したい車両情報を中心に造り込んでいったけど
後から、車検サービスも追加、クルマの買取サービスも追加、鈑金塗装も追加・・・
という感じになってくると、最初に作りこんでいたトップページに割り込ませないといけなくなり、メニューの修正・トップページの構成の修正・さらには全体的なバランスの修正
こういった、修正をしなくてはいけなくなり下手すると最初から作り直した方が
早い！！
という感じの大幅な修正が必要になってくる場合もあります。
こういった事を未然に防ぐために、まっさらな状態からWEBサイトを作りこんでいくのではなく最初からサイトの構成を考えておくことで大幅な修正などをしなくて済みます。
何となくホームページの構成が大切なのは、ちょっと分かってもらえたと思いますが、いざサイト構成を考えてみると・・・
という方のために
今回は初心者でも簡単に出来るサイトの構成手順を紹介していきます。
この記事を見て頂ければ、サイトの構成をどのようにしていけば良いのかを分かるようになるので、後々サイトに必要なコンテンツを入れ忘れることもないのでWEB制作をスムーズに進めることが出来るようになり
自分の希望どおりの素敵なホームページを完成させることが可能です。
ではさっそく構成の手順をみていきましょう。
目次
企業のホームページ構成を決めるなら４つの手順でサイト制作
WEBサイトの構成手順として
1,お客様が求めている情報を書き出す
2,リスト化した情報をグループ分けにする
3,メインとなるサービスを決める。
4,トップページを3段階での表示内容を決める
これらの４つをすることで、サイトの全体象を確認することが出来るので、まず最初にやっておいた方がいいでしょう。
では１から順番にご説明をしていきます。
①お客様が求めている情報を書き出す。
企業や何かのサービスなどを扱うホームページでは、個人の日記と違い自由気ままに自分の好きなことを発信しても自社のサービスや商品に興味をもってもらえません。
例えば
こんな事を一方的に発信しても、誰もすぐに信じたりしませんよね？
なので、一方的な発信ではなくお客様はどんな情報が欲しいのか？
どんな情報を得たいと思っているのか？
自社のサービスや商品で何を求めているのか？
こういったお客様が知りたいと思われるものをまずは、紙でも何でもいいのでどんどんリスト化します。
何かの商品であれば、その商品の
・値段
・品質
・どんな会社なのか
・使用した人の口コミ
・お届けまでの手順
・商品受け取りまでの日数
・お支払い方法
・購入後のアフターフォローや保証
・お問い合わせ先
などなどお客様が求めていると思う情報を思いつく限り全て書き出します。
思いつく限り全てです！
そして参考程度にライバルのホームーページなどを確認してみるのも効果的です。
競合ライバルのホームーページをみてみると「あっこんな情報もあった方がいいな！」という発見もできるので参考になると思います。
ただし、さらっと確認した方が良いです。
あまり、がちがちに確認し過ぎると似たようなホームページ構成になってしまうので、さらっと見て「必要だな～」と感じたような情報収取が良いです。
では次にいきます。
②リスト化した情報をグループ分けにする
先ほどの①でリスト化した情報をそのままメニューにすると場合によっては、どんでもなく多いメニューになてしまうのでグループ分けをします。
メインとなるメニューを６つ前後ぐらい決めてそのメニューから枝分かれするような決め方が良いですね。
「Xmind」という無料で使えるソフトがあるので、Xmindに書き込んでいくと全体的に確認するこが出来るのでとても見やすいです。
使い方も難しくなくクリックして移動も出来るので、とても簡単に使えるのでおすすめです。
こういったものを使って書き出したリストを全体的に見てグループ分けをしていきます。
では次です。
③メインとなるサービス内容を決める
先ほどのグループ分けでメインメニューが決まれば全体的なサイトの構成がある程度決まっていますのでトップページに表示させる内容も簡単で構わないので
ざっくりと考えた方が良いです。
さらに柱となるサービス内容は３つぐらいの表示が好ましいです。
例えば
自動車業界の会社ホームページであれば
・自動車販売
・車検整備
・鈑金塗装
・自動車買取
・各種保険対応
・オークション代行
これら全てをトップページのメインとしてでかでかと表示させて情報を詰め込み過ぎると、サイト全体が見にくくなったりそもそも、ホームページに訪問してきた人はこのような全ての情報は不要です。
中古車を探している人なら鈑金塗装や車検の情報は不要になるので邪魔な情報でしかありません。
むやみにサービス内容をトップページ詰め込むのは出来る限り控えてスライダー画像などで別ページに案内する方がベストです。
事業の柱となっているサービスを３つぐらいに絞り込んでみましょう。
では次です。
④トップページを3段階での表示内容を決める
サイト全体が見やすく、かつ分かりやすくするには3段階に分けてトップページの仮構成をしていくと良いです。
3段階の構成としては
１、ヘッダー
２、サービスや商品
３、クロージング
これらの3つの構成で決めていくことでサイトが見やすくなり成約率が高いお問い合わせに繋げることが可能です。
１、ヘッダー
では3段階表示の１番目のヘッダーですが、これはサイトの1番上にある画像などの部分がヘッダーと言われるメイン画像になります。
ここはお客様を惹きつけたり興味をもってもらったり、といったキャッチコピーや画像を用意した方が良いです。
例えば
お客様が商品やサービスを手にした後のベネフィット
お客様が自社の製品を利用したらこんな素敵な感じになります。
といった感じの内容を盛り込んだ方が効果的です。
WEBサイトの訪問者は80％がヘッダーの時点で離脱して残り20％が下へ読み進んでくれるという統計も出ています。
つまりヘッダー次第でこの先を読み進んでくれるかどうかが決まるといっても過言ではないくらい重要な部分です。
一番最初に目につくところだからこそ訪問者の目線で、どんな画像やキャッチコピーがより訪問者に想像してもらえるかを考えて自分だけではなく他のスタッフさんや知人でも良いので何度も確認をしてすり合わせていくぐらい時間をかけたいところです。
２、商品・サービス内容
では次の2番目として文章や画像などで自社のサービス内容や商品などを紹介していきます。
特に商品やサービス内容が多数ある場合には１つ１つを細かく紹介する必要はありませんので画像を並べたり商品タイトルを入たりして興味がある人は商品をクリックしてもらい別ページの商品詳細ページで説明していく。
という感じがベストです。
トップページで１つ１つの商品を細かく紹介しても興味がない人にとっては邪魔な情報ですし多数の商品を細かく説明してしまうと、かなりのボリュームになってしまい、情報が多すぎると訪問者が目的としたサービスや商品になかなかたどりつけない・・・という結果を招いてしまうので詳細は別ページで構えて解説していきましょう。
３、クロージング
最後の3番目としてはクロージングと呼ばれているもので「お問い合わせ」や「店舗の場所」などを表示させることです。
ここにはお問い合わせをするにはどうしたらいいのかを分かりやすく表示させるぐらいでOKです。
商品によっては購入の手順なども載せておいた方がいいかもしれません。
（例）「お問合せ」→「受付」→「注文」→「決済方法」→「発送」
その他としては、電話番号やお問い合わせフォームのボタンなどを設置してあげて訪問者に分かりやすいようにした方がいいです。
ここが見づらかったりしてしまうと「どこからお問い合わせしたらいいのか分からない！！」
となってしまい、せっかくのお問い合わせを逃してしまう事にもなるのでパット見た感じで分かるようにした方がいいです。
例えば
お問い合わせをフォームボタンは赤とか黄色などを目立つ色を使用したり
電話番号は
周りのフォントサイズよりも大きくして分かりやすく表示させたり
といった感じで訪問者にアピールして最終的なお問い合わせに繋げられるようにしていきます。
以上が４つのサイトの構成手順になります。
まとめ
では、もういちど手順を確認してみますと
１、お客様が求めている情報を書き出す
２、リスト化した情報をグループ分けにする
３．メインとなるサービス内容を決める。
４、トップページを3段階での表示
こちらの３つの手順ですすめていけばホームページの構成がスムーズに完成できます。
ポイントとしては最初の1、の時に出来る限り”リストを書き出す”ことです。
1人で考えても全て思いつかないと思いますのでスタッフや実際のお客さんに聞いても良いと思います。
そして注意点として沢山出てきたからといって全てをトップページに詰め込むのではなく柱となるサービス内容を３つぐらいで絞り込んで他のサービスはスライダー画像やバナー画像などで別ページで詳しく案内する方がいいでしょう。
また、サイトの構成が出来上がったら仮デザインでサクサクっとWEBサイトの全体のデザインを作成した方がいいです。
この仮デザインをすることで今回決めたサイトの構成を仮で組み上げることが可能ですのでサイトの見栄え的に問題がないか？
とか見やすいホームページになっているか？
といった状態を確認出来るので本番環境で失敗するリスクをグッと減らすことが可能です。
この仮デザインも簡単に出来る無料ソフトがあるので、その解説は次回の記事で紹介していきますのでお楽しみください。
