実例で納得、見やすいサイトに共通するデザインの法則

こんにちは。BiNDup運営DS Staffです。
コンバージョンに繋がるホームページの条件に、導線のわかりやすさは欠かせません。

見やすいと感じるサイトは、統一されたルールに則って作られ、主題がきちんと目に入るように計算され作られています。
Webデザイナーにとっては基本的なサイトで使用する色の数を絞る、見出しの色や大きさを揃えるなどのルールも、デザインを勉強していないと重要度や加減がわからず、この要素も見出しも項目も目立たせたい…となり、その結果ごちゃごちゃしたわかりにくいサイトになってしまうことも。

そこで今回は、統一されたデザインルールで運用しているスポーツ系の企業サイトを例に解説。見やすいと感じるWeb作りのコツをWebデザイナーが伝授します。

▼自転車・トライアスロンなどのエンデュランス（持久力）系スポーツのアスリートを支援する「ENDURELIFE（エンデュアライフ）」さん。

質の高い写真を豊富に使用したインパクトあるビルボードが印象的なサイトです。写真が多いですがしつこくないバランスで、黒背景+スライドショー+赤背景+スライドショーのデザインがいいですね。

制限された色とデザインが重要なコンテンツを際立たせる

見やすさを作るデザインルール

見出しのサイズやフォント、カラーなどの統制されたデザインがサイトの見やすさを作り出しています。こちらのサイトを見ると、見出しの位置や大きさが統一されていることが、各ページでどの見出しを見れば内容が把握できるかというサイトのわかりやすさに繋がることを実感してもらえると思います。スマホでの見せ方もしっかりデザインされていますね。

見出しの色や大きさ、装飾を統一で内容を把握しやすく

新・BiNDupのここで設定

こちらのサイトのように、全ページで見出しの色やフォントを統一するには、新・BiNDupのDressカラーが便利です。一度設定すれば、色や要素を一気に変えられるので作業の手間を減らせます。サイト内の要素が統一されていると導線がわかりやすく、コンテンツの目立たせたい箇所をしっかり見せられるので、ぜひ意識しながらサイトをデザインするようにしましょう。

SEO対策としても有効なマークアップを徹底

マークアップ+Dressで一元管理

見た目上は見出しや本文など、各要素の色やサイズに統一感がありますが、フォント・カラー・サイズをそれぞれ個別で指定しているようなので、マークアップ+Dressで一元管理することを徹底するのがおすすめです。すべての要素をひとつひとつ設定する手間がなくなり、サイトの色をもっとコントロールしやすくなります。

コンテンツエリア中の見出しにもh2やh3などの指定を

新・BiNDupのここで設定

ページのソースを拝見すると、h2の指定はあるものの、コンテンツエリアの見出しにh指定がされていないので、見出しがサイト内の重要な箇所であることを検索エンジンに認識してもらえる可能性が低くなっています。見出し全般に段落のスタイルをあてて各要素をマークアップし、Dressでフォントや色、サイズなどのデザインを指定する方法に切り替えましょう。

Dressでサイトのデザインを集中管理

いかがでしょうか？
今回紹介したサイトを参考に、Dressカラーを使ってぜひ美しくて見やすいサイトデザインを実践してみてくださいね。

BiNDupのDressについて詳しくみる

BiNDの制作事例を見る