お問い合わせ・無料相談
WEBのこと 2020.08.07

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

WRITER
Sasayama Sayaka ディレクター
Sasayama Sayaka

ディレクター。ウェブデザイン技能士(2級)/HTML5プロフェッショナル認定資格 レベル1・レベル2。

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

さやさんです。

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

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

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

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

目次の設置

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

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

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

テキストの読みやすさ

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

・行間

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

・文字サイズ

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

・余白

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

少しではありますが、『ユーザーにとって使いやすいデザイン』についてお伝えしました。
アプリコットデザインで制作するホームページも、テキストの読みやすさは上記を意識したつくりとなっています。

良いWEBデザインとは見た目で「かっこいい」「かわいい」「素敵!」と感じるだけではなく、
ユーザーにとって見やすい、初見でも迷うことなく操作できるデザインなのではないかな、と思います。

その他、ユーザーに優しいWEBデザインを考えるおすすめ記事です!

webで考えるデザイン基本原則-整列編-

/journal/web-alignment/

【やさしいウェブ】アンカーテキスト編

/journal/yasashii-web-01/

JOURNALが気に入ったら「いいね」してね!

Contact

ブランディング・WEB制作・運用まで、まずは一度お話を聞かせてください。 初回のご相談は無料で承っています。

お電話

0120-622835

10:00〜18:00 / 土日祝休

メールフォーム

お問い合わせはこちら