いまさらですが、読みやすいレイアウトにするためのポイントって何ですか？

こんにちは。
グリーゼ ディレクターの俵です。

先日、お客さまがふと漏らした「いまさらだけど、読みやすいレイアウトって何だろう？」という一言をきっかけに、Webサイトの基礎についてお話をすることがありました。

たしかに、最近はWebの知識があるご担当者さまが増えてきているので、Webサイトの提案をする際には改善案等に注力し、基礎的な情報を省くことが多くなってきています。

なかなか、お客さまと基礎の基礎についてお話をする機会がなかったので、こんなお話をしてみました。

─────────────────
Q：いまさらですが、読みやすいレイアウトにするためのポイントって何ですか？
─────────────────

Webサイトを制作する際、コンテンツの内容には注力するけれど、レイアウト等については制作者に任せていることが多いと思います。

しかしながら、読みやすいページを作るにはレイアウトはとても重要です。 改めて基礎を振り返ってみると、Webサイトのチェックをした時に、ちょっとした修正点に気づくかもしれません。

─────────────────
A：「揃える」「グルーピングする」「余白を入れる」の3つです。
─────────────────

レイアウトとは仕上がりを考えて、文字・図・写真などを所定の範囲内に効果的に配置することです。

レイアウトを決める際に、重要になるのが人間の視線の動きです。人間の視線の動き方には決まった法則があり、視線の動きの法則を理解したうえで適切な位置に画像やテキストを配置します。

※視線の動きの法則についてはこちらをご覧ください。https://gliese.co.jp/success/mailmagazine/official/200611.html

しかし、レイアウトは適切な位置に画像やテキストを配置したら終わりではありません。
さらに読みやすいページにするためには、配置したテキストや画像を整理整頓していく必要があります。とても単純な内容ではありますが重要ポイントです。

それでは、整理整頓のポイントを説明していきましょう。

【１】揃える
図形やテキストが揃っているだけでとても見やすくなります。
画像やテキストをジグザグに配置するのではなく、サイズ等も揃えて配置しましょう。

テキストに関しても同様です。
効果的に表現したい部分以外は基本的にセンタリングではなく左揃えにしましょう。
人間の視線の動きを考えても文頭は揃っていた方が読みやすくなります。

【２】グルーピングする
情報のかたまりごとに分類することで関係性をはっきりさせることができます。
例えば、関連する情報ごとに線で囲む、線で区切る、など、関連する情報（画像とテキスト）ごとにまとめておきましょう。

また、グルーピングには画像とテキストを近づける以外にも、色により関連づける方法もあります。どちらか効果的な方法で使い分けてください。

【３】余白を入れる
余白があると情報を認識しやすくなります。
ぎっちりと隙間なく情報があると注目すべきポイントがわかりづらく、必要な情報を見つけることができません。適切に余白があるページでは必要な情報を見つけやすくなるので、余白を作ることを意識してください。

また、テキスト量が多い場合は、文字の余白（文字間や行間）にも注意し可読性をあげましょう。

いかがでしょうか。
とても単純なポイントですが、あまり気にしてないご担当者さまが多いのではないかと思います。いろいろなWebサイトを閲覧していると文字の行間が狭かったり、枠線に文字が掛かっていたりと、読みづらいページも多いです。

【１】~【３】のようなページ内の整理整頓をするだけで、さらに読みやすいページになるので、一旦Webサイトの見直しをしてみるのもいいかもしれません。

▽▽▽ 　俵のイチオシ ▽▽▽

SEO対策をするうえで、検索エンジンに対して情報を正しく伝えることが重要です。Googleがサポートしている「特別なタグ」について解説しているので参考にしてください。

▼Googleがサポートしている特別なタグとは？
https://gliese.co.jp/success/article/google_8.html

△△△△△△

──────
編集後記
──────

最近、目覚めたこと、それは料理です！

今までは、あまり得意ではないと思い込んでいたため、必要最低限のことしかしなかったのですが、どうしても料理しなければならない状況になり、イヤイヤ始めてみたら...

あれ、意外に楽しい？ 時間がない中で作ることも、手間をかけることも、あまりイヤではない？と思っている自分を発見したのです。

そうです！私は料理が苦手ではなかったのです。

私は料理が苦手なことに、ちょっとだけコンプレックスがあったので、料理が苦手ではないことに気づいた瞬間、ぱっと目の前が明るくなりました！

何事も食わず嫌いはダメですね。
どんなことも、まずはチャレンジです！

ちなみに、今チャレンジしていることは「鳥のつくね」をフワフワに仕上げることです。

次回は、福田がお届けいたします。
お楽しみに♪

＊この記事は2020年9月10日現在の情報を元にしています
＊外部サイトへのリンクが切れている場合があります。ご了承ください

株式会社グリーゼのサービス紹介資料

株式会社グリーゼのサービス紹介資料です。企業のWebマーケティング全般を支援するグリーゼの、サービス概要、選ばれる理由、実績、設計資料などを掲載しています。「グリーゼってどんな会社」と思ったからは、ぜひ資料をダウンロードしてください。

ク資料ダウンロード（無料）はこちら