POSTED | 2020.08.07

ユーザーにとって使いやすいデザインとは？

WWEBのこと

WRITER : Sasayama Sayaka

美術館と美味しいものが大好きなクリエイター

プロフィールを見る

さやさんです。

WEBコンテンツのデザインがとても重要なことは皆さんご存じだと思います。

しかしデザインと一言に言っても様々ありますね。
「かっこいいデザイン」「シンプルなデザイン」「かわいいデザイン」など……

今回の記事ではデザインの方向性ではなく、
『ユーザーにとって使いやすいデザイン』をテーマに、その重要性をお伝えします。

閲覧者の目的が達成できる良いデザインのホームページはユーザビリティの満足度が高く、ユーザーの離脱率を抑えることができます。
すると自然に多くのユーザーが集まり、検索エンジンはそのコンテンツを『良いコンテンツ』と評価します。
ユーザーに評価されるホームページは間接的にではありますが、結果として検索エンジンにも評価されるのです。

目次の設置

皆さんが何か調べ物をしようとしてGoogleで検索した時、上位にヒットする記事の多くに『目次』が設置されていることにお気づきになりましたか？

情報が多いコンテンツは記事の内容が長くなってしまいます。
検索でヒットした長文の記事の中で、自分が知りたい情報が下部にあるとしましょう。
知りたい情報までスクロールして探すのは一苦労ですよね。
そんなユーザーの手間をなくすために、情報量の多い記事の多くには各見出しにクリックで飛ぶことができる目次が設置されているのです。

目次の設置は『ユーザーにとって使いやすいデザイン』ですね。

テキストの読みやすさ

WEB上のコンテンツの多くは文章です。文章が読みにくいと、ユーザーはすぐにそのコンテンツから離れてしまいます。
そのため、テキストの可読性は『ユーザーにとって使いやすいデザイン』で重要な要素となります。

・行間

文章の行間は狭すぎても広すぎても読みにくくなります。
1.5倍～1.75倍が読みやすい行間の設定（文字サイズに対して0.5倍～0.75倍の隙間を空ける）と言えるでしょう。
行間の例

・文字サイズ

文字サイズも可読性の大きなポイントですね。
ブラウザで文字サイズが変更できるとはいえ、小さすぎる文字は読みにくくユーザーを疲れさせるので注意しましょう。
読みやすい適切な通常の文字サイズは16px～18px程度です。

・余白

文章の余白も読みやすい文章を作る上での重要な要素です。
余白は各段落や見出しと本文の区別などに使われ、ユーザーに文章構造を視覚的に理解しやすくさせます。
ただし無秩序に文書中に様々な広さの余白を使うと、逆にユーザーにとって読みにくい文章となる可能性があります。
余白の幅は文章構造毎にルールを定めると読みやすくなりますよ。
余白の例