webと企画 #15 見やすいサイト

こんにちは、クリエイティブディレクターの
高宮と申します！

第14回目の記事では
「コーポレートサイト」
という部分についてお話いたししました。
前回の記事はこちら
https://note.com/chiharunoippo/n/n3a54f4a5021c?magazine_key=m21a2eaeb0055

第15回目の記事では
「見やすいサイト」
についてお話ししようと思います。

見やすいサイトと見にくいサイト

WEBサイト制作において、
「見やすさ」というのは離脱率を
下げる上でも非常に重要に
なってきます。

今回は見やすいサイトと
見にくいサイトの違いは、
どこにあるのかを考察していきたいと
思います。

まず考えられるサイトを
見にくくする要素は

・レイアウト
・色、コントラスト
・テキストのフォントや大きさ
・アニメーション/スクロール
・情報量

などが考えられます。
レイアウトや色などのデザインの部分と
アニメーションや情報量といった
UXの部分が主なネックとなっています。
視線の流れを作る、その要素を
どのように扱うべきなのか
１つずつ、何を意識すべきかを
見ていきましょう。

レイアウト

レイアウトには作るサイトによって
様々な種類がありますが、自分の作りたい
サイトによってその特性を生かす
レイアウトを選ぶ必要があります。

レイアウト選びで注意する点は
・メインのコンテンツ
・コンテンツの量
・更新頻度や運用方法

メインのコンテンツはなんなのか
一番何をみせたい、伝えたい
サイトなのかを明確にしてから
レイアウトを制作するようにしましょう。

メインとなるコンテンツはサイトの
種類によって様々ですが、
写真を見せたい場合と文章などの情報
を伝えたい場合だけでも取り入れるべき
レイアウトは大きく変わってきます。

コンテンツの量については
多すぎても少なく減らしすぎても
伝えたい事が伝わりにくくなって
しまったりする場合があります。

ユーザーの知りたい情報と
伝えたい情報を考慮し
情報の優先度を意識して
取捨選択していく必要があります。

また、更新頻度や完成後の
運用方法によっても「どうした方が良い」
という方向性が見えてくるため、
レイアウトを考える上で
最初に確認しておくべき項目です。

色とコントラスト

色は与えたいイメージや
作りたいサイトにあった色を選択する
という部分はもちろんですが、

全体の色を見た時、文字など含めて
似通った色が多すぎていませんか？

コンテンツの関連性や重要度に合わせて
配色のコントラスト(濃淡)が
あるとユーザーに伝えたい事が
伝わりやすい、見やすいサイトになります。

具体的には、
情報の関連性が高いものは
デザインの中でも関連性を持たせる、
逆に別々のものとして
個別化したい場合は、違う色や配置で
情報をまとめると良いでしょう。

テキストのフォントや大きさ

サイト全体のサイズやコンテンツ内容に
よって、適切に選ばなければいけないのが
文字のフォントとサイズ。

一概には言えませんが、例えば、
コンテンツや文字量が多いのに
全ての文字が大きめの文字で
表示されていると、
とても読みにくいですよね。

制作する上で指定のフォントが
ある場合はそれを使った
文字の行間や間隔の調節。
指定がない場合はフォントの選定からに
なります。

私は、実務の行間や間接設定については
小さい文字になるほど間隔をあけた方が
読みやすく、文字のサイズやフォントに
合わせてサイズの何倍にするかを
初めに決めます。(1.5~2倍くらい)

アニメーション/スクロール

基本的にスクロールで見る
サイトが殆どだと思いますが、
その中で起こるアニメーションや
スクロールに合わせたサイトの動きが
時に見づらくする原因と
なってしまう事もあります。

具体的には、ユーザーが閲覧中
ゆっくり読みたいキャプションを
動き続けるものにしてしまったり、
一定スクロールすると一部が消えるもの
にしてしまうと、読みづらさを
感じさせる事があります。

動き続けるものや
一部が消えるというアクションに
関しても、使い方によっては
ユーザーを楽しませ続ける事ができたり、
消えた方が見やすくなるというものも
あるので、アニメーションなどの
エフェクトを使用する場合は

・目的(どういう効果をもたらすか)
という部分をしっかり考えてから
取り入れる必要があります。

情報量

先ほど、
コンテンツ量といった部分でも
お話ししましたが、

情報が沢山ありすぎても
情報が飽和状態になり、
ユーザーが混乱してしまう事もあります。

かといって少なすぎても
伝えたい事が伝わらないサイトに
なってしまう可能性があるため、
ユーザーに伝えたい情報を整理し
優先度をつけて考える必要があります。

特に、私は実務で
デザインを意識しすぎて
削りすぎてしまう事もあるため、
適切な要素を加えるという事も沢山あります。

まとめ

以上のことを作りたいサイトに合わせて
選択をしていくことで、
見やすいサイトを作る一歩となると
考えています。

サイト制作では様々なことに
意識をしなければならないからこそ、
根本的に固めたい基礎の部分を
しっかりと決めることで
自然と見やすいサイトを
制作できるようになっていけるでしょう。

私がコーポレートサイトの制作について
参考にしたのはこちらの記事です。
https://uxmilk.jp/59843
https://web-kanji.com/posts/easily-visible-homepage

今回は
「見やすいサイト」
についてお話しました。

ここまで読んでくださった皆様、
ありがとうございました。
次回も、よろしくお願いいたします！