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

  1. TOP
  2. Jimdoで魅せる日本語Webデザイン : 第3回 詳細ページのレイアウトを作成しよう

エキスパートコラム

Jimdoで魅せる日本語Webデザイン(全12回)

第3回:詳細ページのレイアウトを作成しよう

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

2016年6月6日更新

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

閲覧数2,923views

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

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

前回のコラムではトップページのレイアウトについて解説しました。第3回目となる今回は、詳細ページ作成のポイントを見ていきましょう。

バランスの整ったWebサイトを作るコツとは

まず、一口に詳細ページと言っても、商品紹介のページもあれば、会社概要、お問い合わせフォームなど、掲載するコンテンツによって様々なページが存在します。それぞれ内容や情報量の異なるページをバランス良く作成するにはどうすればよいのでしょうか。

これまで数多くのJimdoサイトのリメイクに携わらせていただく中で、Jimdoユーザの皆さまが自由に作成されたWebサイトをいかにバランス良くリメイクできるか、たくさんの方法を考え実践してきました。その中で最も簡単で、かつ効果的だった方法が「体裁を揃える」ことです。私はリメイクを手掛ける際、必ず初めに全ページの体裁を揃えます。

ページごとに差異があるとユーザは混乱する

では、体裁を揃えるとは具体的にどういうことかを見ていきましょう。
例えば、あるWebサイトに「サービス紹介」というページがあるとします。ここでは冒頭に見出し(大)が配置され、その下にコンテンツが並んでいます。

一方「会社概要」のページでは冒頭に見出し(中)が使われている、「お問い合わせ」のページに行くと見出しがない…。こういったケースは意外と多く、このようなページごとの差異はWebサイトを訪れる人に違和感を抱かせます。

「サービス紹介」のページで冒頭の見出しを読んで「ああ、ここはサービス紹介のページなんだな」と認識したユーザは、別のページでも無意識的に同じ位置に見出しを探します。その時に色やサイズの異なる見出しが掲載されていたり、見出しが存在しなかったりするとどうでしょうか。ユーザはきっと混乱してしまうでしょう。

ルールを守ってコンテンツを配置する

ページごとの差異をできる限り少なくし、ルールを守ってコンテンツを配置する、上の例で言えば、冒頭に見出し(大)を設置するなら全ページで同じようにする、というのが「体裁を揃える」ということです。

Webサイト全体で共通のルールを作り、それを徹底して守る。細かいことのようですが、こういった基本的なことをしっかり守るだけでもWebサイトの見やすさは劇的に向上します。

レイアウト作成の強力な味方「定型ページ」機能

体裁を揃えることで、サイト全体に統一感を持たせることができました。それでも、多種多様なコンテンツをバランス良く配置するのは難しいかもしれません。そんな時に強力な助けとなってくれるのが、Jimdoに新しく追加された「定型ページ」機能です。

これは、新規ページを作成する際に自動的に雛形を生成してくれる機能で、サンプルの中から掲載したい内容に合ったものを選ぶだけで、機能的で美しい雛形を作成することができます。どの雛形も、画像のサイズ感や文字の配置、余白のバランスなど、とてもよく考えられています。

豊富な雛形のパターンからイメージに合ったものを選ぶだけ

これからJimdoでWebサイトを作成する方や、コンテンツの配置バランスを調整したい方は、この機能を利用して大枠を作り、それを元にご自身のイメージに合ったレイアウトに作り変えていく方法をお勧めします。

基本を守り、便利な機能を使いこなす

バランスが良いなと感じるWebサイトほど、細かいところがしっかり作られているものです。まずは「体裁を揃える」という基本的なことを意識してみてください。プロが作ったWebサイトは必ず全ページで体裁が揃っています。

そして、コンテンツを配置するバランスに悩んだら「定型ページ」機能を活用しましょう。これらをしっかりと実践することで、皆さまのWebサイトはきっと見違えるように見やすくなるはずです。

次回は、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」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

コラム週間アクセスランキング[期間:2017/8/6~2017/8/19]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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