スマートフォンサイトを表示する

  1. TOP
  2. 自分でできる!セルフJimdoリメイク塾 : 第5回 共通エリアを活用してより使いやすいWebサイトに

エキスパートコラム

自分でできる!セルフJimdoリメイク塾(全12回)

第5回:共通エリアを活用してより使いやすいWebサイトに

執筆:服部 雄樹(服部制作室)

2017年8月21日更新

  • このエントリーをはてなブックマークに追加

閲覧数612views

このコラムをPDF形式でダウンロードする

Jimdoで作られたWebサイトのリメイクを累計100件以上担当した筆者が、リメイクをする際にどこを見ているのか、どう手直しすれば見やすいWebサイトになるのか、具体的な事例とテクニックを交えながら紹介する本コラム。

第5回目となる今回は、共通エリア(サイドバー・フッター)の活用方法について解説します。

すべてのページで表示される「共通エリア」について

Jimdoには、通常のコンテンツエリアとは別に、すべてのページに共通で表示されるエリアがあります。便宜上、ここではこのエリアのことを「共通エリア」と呼びます。共通エリアは、サイドバーのないシングルカラムレイアウトではメインコンテンツの下部(フッター)に、サイドバーのある2カラムレイアウトではサイドバーに配置されています。

通常のコンテンツエリアと同じように、文章や写真など各種コンテンツを掲載することができ、ここに掲載した内容はサイト内のすべてのページで表示されるため、ユーザーの目に触れる機会が多く、うまく活用することでWebサイトの使い勝手は大きく向上します。

共通エリアには「すぐに知りたい」情報を載せる

では、この共通エリアにはどんな情報を掲載すれば良いのでしょうか。これまで多くのJimdoサイトを拝見してきましたが、残念ながらこのエリアをうまく活用できているサイトは稀で、何も掲載されていないか、SNSのボタンなどを置いているだけ、というケースがほとんどです。理由を聞いてみると「何を掲載すればいいか分からない」という声が多いようです。

そこでお勧めするのが、閲覧者が「すぐに知りたい」情報を載せる方法です。「すぐに知りたい」情報とは、業種によって異なるので一概には言えませんが、例えば店舗のWebサイトの場合、閲覧者の目的を考えることで答えが見えてきます。ここでは仮に、以下のような6つの目的があるとします。

  1. お店で扱っている商品を知りたい
  2. お店のコンセプトを知りたい
  3. オーナーの経歴や人物像を知りたい
  4. お店の場所を知りたい
  5. 営業時間を知りたい
  6. 電話番号を知りたい

このうち、1~3については、時間があるときにじっくり調べるという方が多いでしょう。しかし4~6については、別のシチュエーションが予測できます。例えば以下のような場合です。

  • お店に向かっている途中で道に迷ってしまったので、お店の場所を知りたい
  • 仕事帰りに寄りたいが、間に合うか分からないので、営業時間を知りたい
  • 新商品が入荷したか聞きたいので、電話番号を知りたい

このような場合、ユーザーは1秒でも早く欲しい情報にたどり着きたいはずです。道に迷ってしまって場所を知りたいだけの人に、お店のコンセプトは必要な情報ではありません。営業時間や電話番号も同じで、どのページに掲載されているか探している間に、面倒になって来店をやめてしまうかもしれません。そういった事態を防ぐためには、ユーザーの行動やシチュエーションを予測し、すぐに知りたいであろう情報をあらかじめ目立つところに配置しておく、という配慮が必要です。ここで役に立つのが「共通エリア」なのです。

共通エリアに住所と電話番号、営業時間を掲載しよう

それでは実際にサンプルサイトに各種情報を掲載していきます。サンプルサイトはシングルカラムのレイアウト「Zurich」を使用しているので、共通エリアはフッターにあります。シングルカラムの場合、共通エリアの幅が広いので、まずはカラムを使用してエリアを2分割しましょう。

カラム機能を使用して共通エリアを分割する

2つのエリアに分割された

分割できたら、左側のエリアにロゴと住所、電話番号、営業時間等を掲載します。ここでは「画像付き文章」を使用して掲載します。

画像付き文章を使用して、ロゴと各種情報を掲載

ロゴの大きさのバランスにも気をつける

この中でも特に電話番号は重要な情報なので、文字サイズを大きくして太字にしてみましょう。

電話番号は太字にして文字サイズを大きくすると、さらに見つけやすくなる

共通エリアにGoogleマップを掲載する

右側のエリアにはGoogleマップを掲載します。店舗の場合、お店に向かっている途中でスマートフォンで場所を調べる、というシチュエーションが考えられるので、そういった場合に備えてGoogleマップを埋め込んでおきましょう。こうすることで、ユーザーは自分の現在地を確認しながらお店にたどり着くことができます。

Googleマップを使用して地図を埋め込む

「所在地」に住所を入力して検索する

該当の場所にピンが立って表示される(サンプルは渋谷駅)

地図が表示されましたが、少しサイズが大きいので高さを調整します。

ドラッグ&ドロップで地図のサイズを変更する

地図の大きさが変更された

ひと通り必要な情報が掲載できた

これで完成でもかまいませんが、せっかく目に触れる機会が多いエリアなので、問い合わせボタンやSNSのシェアボタンなどを掲載するのも良いでしょう。お好みに合わせて適宜変更してください。

問い合わせボタンやSNSのシェアボタンなどを掲載するのもオススメ

大切なのはユーザー目線に立って考えること

このように、共通エリアをうまく活用すれば、ユーザーにとってとても使いやすいWebサイトにすることができます。使いやすいということは、お問い合わせの増加に繋がったり、取りこぼしを防ぐことができるなど、多くのメリットがあります。

今回紹介した内容は、あくまでひとつの例にすぎませんが、大切なことはWebサイトを訪れてくれるユーザーが何を求めているのか、どんなシチュエーションでWebサイトを見ているのかを、しっかり想像することです。徹底的にユーザー目線に立って考えることができれば、自ずと必要な情報が分かり、有益な情報を掲載できるようになります。ぜひ皆さんのJimdoサイトでも共通エリアを活用してみてください。

次回は、Webサイトの「色」の設定について解説します。お楽しみに!

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

服部 雄樹(はっとり・ゆうき)

服部 雄樹(はっとり・ゆうき)

服部制作室 代表/JimdoExpert
http://www.hattori-studio.jp/
http://www.template-labo.com/

愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。

著書に『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方』など。

HTML&CSSとWebデザインが 1冊できちんと身につく本

  • はじめてWEB 読も読もキャンペーン「テーマ別セレクト本」プレゼント!
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/9/17~2017/9/23]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!