サイトの見やすさ、見にくさは何で決まる？美しいサイトの作り方

インターネット上には様々なWEBサイトがありますが、残念ながらその全てが見やすいサイトとは限りません。
皆さんも、「このサイト、なんだか見にくいな」と感じた経験があるのではないでしょうか。
本記事では、見やすいサイトと見にくいサイトの違いについて見ていきます。

なぜ見やすいサイトを作る必要があるのか

何事も「見やすい」ことに越したことはありません。
サイトが読みにくいと、有益な情報を掲載していても最後まで読んでくれる読者は少ないと思います。
またサイトを伸ばす上で必要なSEO対策の観点からも、「サイトが読みにくい」というのは致命的なことです。
 
SEO対策とは、Googleなどの検索エンジンで、自サイトが検索結果の上位に表示されるように行う対策です。
SEO対策は多岐に渡りますが、その中には有益な情報を発信し続けることはもちろん、読みやすいサイトを作る努力だって入っています。
 
それだけ、読みにくいサイトには、Googleからの評価も得られなくなる可能性があるのです。

それでは本題へ参りましょう。見やすいサイトを作るコツは、「大きいところから徐々に小さいところへと行くこと」です。

全体設計を考える

まずは大きいところ、つまり全体設計を考えましょう。
このサイトは何のために、誰に伝えるためにあるのか、どんな価値があるのか。
これらを実現させるには何をすべきなのかを自問自答していきましょう。
 
また、サイトの階層化も全体設計をする段階でやっておくのがおすすめです。
階層化を通じて、適切なところにページを配置しておけば、読者がわかりやすいのはもちろんGoogleからの評価獲得にも繋がります。

デザインの4大原則について

皆さんはデザインの4大原則についてご存知ですか？
この4つの原則は「近接」「整列」「強弱」「反復」。
これらを意識することで、見やすく整ったサイトを作り出しやすくなります。

1:近接

関係性がある要素同士を近づけることで、これらには関連性があると読者に対して主張できます。
Webサイトでは、写真と文章の関係性を明らかにする上で利用できる原則だと思います。
 
写真のすぐ下に、その写真を説明する文章を入れるといった方法で、読者に「関係性があるよ」ということを認識させることができます。

2:整列

関連性のある文章や写真を、それぞれ整列させることで、すっきりとした印象を与えることができます。
 
　⚪︎▶︎株式会社
社長　山田太郎
　　所在地　東京都渋谷区
 
このような文章を
 
⚪︎▶︎株式会社
社長　山田太郎
所在地　東京都渋谷区
 
とある線に沿って整列させれば、すっきりとした美しい文章が完成します。

3:強弱

広告でもよく見られるであろうデザインが、この「強弱」の原則です。
一番伝えたいことを、ページ内で最も目立つ色と大きさで表現する手法です。
 
広告でも、広告主が一番伝えたい内容が大きく描かれているでしょう。
強弱を使うことで、読者に衝撃と印象を与えることができます。

4:反復

Webサイト内で、同じデザインを統一して使用し続けることで、そのサイトの一貫性を表すことができます。
例えば、フォントや写真の大きさ、アンダーラインの色、表に利用する四角形の角の大きさ、背景の色など、ページ上の要素一つ一つを出来るだけ統一して使用すれば、ごちゃごちゃしてない一貫性あるサイトが出来上がります。
 
実際、Appleやスタバの公式サイトを見ても、商品の色を除けば限られた要素と色だけでサイトをデザインしていることがお分かりいただけると思います。

配色比率

デザインの４大原則に通じる内容ですが、見やすいサイト、美しいサイトは配色を考えてデザインされています。
黄金の配色比率と言われるのが、70:25:5の比率です。
70％はベースカラー、25％はメインカラー、5％はアクセントカラーといった具合です。
 
また配色比から考えられると思いますが、Webサイトの使用する色はできるだけ少なくしましょう。3,4色まで絞るのが良いですね。
 
配色を決めるにあたって。4つ守るべきことがあります。
・背景色と文字色の明度に差をつける（白と黒など）
・真っ黒を使用しない
・色が与える印象を考慮する（黒＝暗い又は高級感、赤＝情熱的又は幼稚、青＝安全又は安っぽい）
・配色をサイト全体で統一する
 
マニュアルはありますが、配色はサイト編集者のセンスを問うということも否定できません。
しかしこの4つを守れば極端な失敗は避けられるので、変なサイトができる心配は無いと思います。

読みやすいフォント

ウェブサイトに使用できるフォントは色々ありますが、フォントは大きく「ウェブフォント」と「デバイスフォント」の2つに分類できます。
 
ウェブフォントは、種類が豊富でインターネット上で管理されているため、どのデバイスからアクセスしても同一のフォントが表示されます。しかし、ライセンス料がかかったり、表示速度が遅い可能性があります。
一方のデバイスフォントは、表示速度が速いですが、OS（AndroidやiOSなど）ごとに管理されているため、アクセスするデバイスによっては非対応のため表示されない可能性があります。
 
Webサイトで使用されているフォントには次のようなものがあります。
明朝体：漢字や仮名の表示に使用される標準的なフォント。
游明朝：文庫本や小説によく使用される。
ゴシック体：プレゼンやポスターでの利用が多い。視認性が高い。
ヒラギノ角ゴシック：iOSの標準的なフォントで、さまざまな用途で使用。
メイリオ：システム表示のために開発。ディスプレイ表示がきれい。

文字の大きさと行間

フォントの次は、文字の大きさについて見ていきましょう。
多少の差はあるとはいえ、16pxのテキストサイズで作成されている記事が多いです。
一番良いテキストサイズという数値はありませんが、記事の内容やユーザー層を考えながらサイズを決めていくのが良いでしょう。
 
そして、文章と文章の間である「行間」についても見ていきましょう。
行間が狭いと、圧迫感があり緊張した感情を読み手に与えやすいため、行間はゆとりを持って設定しましょう。
初期設定ですでに読みやすい行間に設定されているWebサイトもあると思いますが、1.5~2emの間で設定するのがおすすめです。

改行のタイミング

読みやすい文章は適度に改行がされています。
改行をするタイミングは色々ありますが、私が意識していることは「話が変わる時」「注意を引きたい時」「スマホ表示で文章が３列ほど続いた時」です。
 
無闇に改行したら注意を思うように引けないなどの難点もありますが、読み間違いや誤認識を防止する上では、改行は役立つ選択肢です。

 難しい言葉を使わない

難しい言葉や専門用語の使用には注意が必要です。
私は、専門用語を使用する際はカッコ付きで意味を加えたり、漢字は中学3年生までに習う範囲だけで使用するように意識しています。
 
とはいっても専門分野を解説する記事は、仕方なく専門用語が増えてしまいます。
そのような時は、記事の冒頭で「どんな読者層をターゲットにした記事なのか」を明確にして、この記事を読むにはどれくらいの知識を要するのかを読者に把握させるのも、一つの手段です。

他のWebサイトのデザインを参考にする

自分が見やすいと感じたWebサイトがあれば、そのサイトを参考にしてみてもいいのではないでしょうか。
読者の導線、配色、要素の統一化など、参考にできる部分は少なからずあると思います。

まとめ

本記事では、見やすいWebサイトの作り方を解説しました。
見やすいWebサイトを作ることで、読者にストレス無くサイトを読んでもらえて、しかもアクセス数の増加も期待できます。
また、作業する自分も編集がきっとしやすくなるでしょう。
 
ウェブサイトの改良や編集は大変だと思いますが、ポイントをおさえながら改善していきましょう。

エディター

Eri Pinar による – ウェブ開発、マーケティング、オンラインビジネスの専門家。