トップページ > ブログ > ユーザーにとって使いやすいデザインとは?

BLOG

ブログ

UPDATE:2020.8.7

CATEGORY

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

さやさんです。

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

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

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

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



目次の設置

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

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

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



テキストの読みやすさ

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


・行間

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

・文字サイズ

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

・余白

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

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

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


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

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

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


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

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

Happiness in Design

シアワセをデザインする会社

営業ゼロで年間600件以上
お問い合わせをいただいている
ノウハウを惜しみなく。

アプリコットデザインには創業当初から営業マンはいません。
創業当初からWEBを活用することに重点を置いて、これまで試行錯誤してきました。その結果、年間600件以上の問い合わせををこのホームページから得ています。ホームページという集客ツールを提供している私たち自身が、自社のホームページで集客できないのでは、お客様に自信を持ってオススメすることはできません。自社の実験から「WEBを活用して集客するためのノウハウを蓄積」した上で、誰よりもホームページの素晴らしさを知り、自信をもってお客様にご提供していきたいと考えます。

VIEW MORE

CONTACT

お問い合わせ・ご相談は
お気軽にどうぞ。

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

プロジェクト

それぞれの
らしさ溢れる日常を。

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ/ドッグサロン/
ネイルサロン/スクール

tone village

We're open.

採用情報

recruit info

豊かで彩りのある社会をつくる!

私たちは仕事を通して、一人でも多くの人が未来に対する希望を描けるような、そんなワクワクする社会をつくっていきたいと思っています。

VIEW MORE