伝わるウェブサイトにするための外せないデザインのポイント

デザインは見た人がどう判断するかで決める

見やすくすれば世界が変わるかも

調べ物や買い物など、目的があってウェブサイトを渡り歩く機会。
近頃あなたも、どんどん増えているのではないでしょうか?

せっかくたどり着いたページ。
色使い、文字の大きさやレイアウトなどのデザイン面で見づらい。
細かな画像や広告バナーがやたらと多く、欲しい情報を見つけられない。
そんな経験をしたことはありませんか?

ウェブサイトで情報を提供する側は、多くの人に見てもらいたい、利用してもらいたいという思いがあって、デザインにこだわったのでしょう。
ところが、よいものにしたいという一心で、あれもこれもと取り入れていると収拾がつかない状態に必ず陥ります。

その結果は……。

もうお分かりですね。
せっかく来たのに、見るまでもなくよそへ行ってしまう人を増やすだけ。
もしかしたら探している情報や、欲しかった物、あるいはそれ以上の何かがあったかもしれないのに……。

ページ上のちょっとしたことで提供する側もされる側も出会いの機会を失っている。
なんてことが世の中にはあふれているのかもしれません。
せっかく頑張って作成したウェブサイトなのに、のぞく人はすぐさま出ていってしまう…… なんて悲しすぎませんか?

でも、ご安心ください。
いくつかの基本を押さえれば、今よりも格段に見やすくなって、お客さん素通りの状態から抜け出せるかもしれません。

視線の動きの法則を利用しよう

人の視線は基本的には上から下へ動くもの。
その移動傾向が『Zの法則』『Fの法則』と呼ばれていることをご存じですか?

活版印刷技術を発明した、あのグーテンベルクが導き出したグーテンベルク・ダイヤグラムが基礎となっている法則なんです。

人が印刷物を見る際の視線移動を調べると、多くがアルファベットのZやFを書くような流れになっていることからこのように呼ばれています。
どちらも左上から見始め、右上→左下→右下へと視線を移していくことになりますよね?

紙媒体だけではなく、webページもこのような視線移動を踏まえたうえでレイアウトを考えれば、分かりやすく情報を伝えられると思いませんか?

見てほしいページ上で確認してみてください。大切な内容を見つけようとしたとき、視線の流れはどうなるでしょうか?
途中に記事内容補強ではない画像や広告がある、あるいはテキストの流れ自体が法則どおりにならないとすれば、レイアウトを検討したほうがよいかもしれませんね。

色の選び方次第でグッと見やすく美しく

様々な色をうまく組み合わせるために

パッと見た目には賑やか、あるいはカラフルでおしゃれに感じる。
でも、じっと眺めていると、いまひとつスッキリ感が足りない、なんだか落ち着きがない。
もしそう思えるページなら、理由は配色にあるのかもしれません。

必要以上に色の数を使っていると、意図があいまいになり上品さがなくなるうえ、見やすさ自体に影響を与えてしまいます。まとまりが悪いと思ったら、まず色数をチェックして減らしてみるのが手っ取り早い方法です。

減らす際には基本の色を2、3決め、それらの色の濃淡や疑似色でまとめるだけで、ぐっと落ち着いて見やすくなるはずです。
専門的になりますが、さらに彩度(鮮やかさの度合い)・明度(色の明暗の度合い)・色相(赤、青、緑といった色味の違い)を意識して配色を考えると、より分かりやすく、洗練された感じになっていくでしょう。。
Photoshopなどのコンテンツ制作ツールの大手Adobe社がカラー設定用ツールを公開していますので、利用するのもよいかもしれません。

基本の色に合わせて配色が決められるツール

また、配色の際にちょっとした配慮をすることでユニバーサルデザイン化に繋がるかもしれません。
実は人種によって色に対する感覚が違います。同じ日本人でも色覚に個人差があり、いわゆる色覚障害の方は「赤と緑」「紫と青」「オレンジと黄緑」などの区別がつきにくいのです。
色の組み合わせに配慮するだけで、より多くの人が見やすいと感じる。それだけでもなんだか嬉しい気持ちになりませんか?

文字が読みやすい状態で作成されていますか?

webimage17極小の文字。
改行もなくぎっしり詰まっている文章。
どこへつながっているか分からないレイアウト。

パッと見た瞬間に文字自体が読みづらいと、多くの人がそこで読む気が失せて脱落します。

ウェブサイトは情報を読んでもらってこそ価値があるもの。

文字のサイズは画面サイズが変わっても小さくないか。
背景色と文字色の色相や明度が近く、ぼやけていないか。
書体は読みやすいものが使われるようになっているか。
適切な余白で、内容が整理できているか。
印刷物では非常に気にするポイントである行間と字間の調節も、もちろん重要です。

ターゲット層の年齢もあるかもしれませんが、高齢者に優しい文字は誰が見ても読みやすいと割り切ってもよいのではないでしょうか?

デザイン構築に行き詰まったときはどうする?

できるかぎり改善してみたけれど、なんだか望むような見栄えにならない。
どうも評判がよくない。…そんなときはとりあえず、あなたのお客様や第三者の複数の意見を大切にしてください。

それらを元にしても、うまく組み立て直せない、あるいは改善できない場合、専門知識を持って診断できる人にアドバイスをもらうのも、悩みを解決するための1つの方法です。

ウェブサイトを作るのも見るのも人。
自分や身内だけの仮定に基づいてあれこれと試行錯誤するのではなく、多くの人から意見を聞き出すことが近道ではないでしょうか。

ホームページ作りを始める前に知っておいてほしいこと

2015年12月20日
将来にわたって頼れる業務パートナーがいいですね

「これからはホームページぐらい持ってないと」と思ったものの、あれこれと情報が多くて混乱中。そんな迷えるあなたに! 作る前に、とりあえずこれだけ知っていると結果が変わる簡単なこと。

伝わるウェブサイトにするための外せないデザインのポイント

2015年10月14日
デザインは見た人がどう判断するかで決める

言いたいことがきっちりと伝わるホームページやウェブサイトにしたつもりだけど反応が鈍い。デザインの基本を押さえれば抜け出せるかもしれませんよ。

店舗やビジネスでブログを始めるときに、うまくいく考え方

2015年11月2日
ビジネスでブログを始めるなら

店舗や小規模事業の宣伝目的なら、ブログを始めると低コストで効果が出ると言われます。実際は的確な方法で情報発信を行っているかに左右されるものなのです。

多言語化が必須となる今後に対応できるwebサイト制作

2015年4月8日
世界を見ればたくさんの顧客が

企業にホームページは不可欠。これから制作するなら多言語対応を意識したサイト構造やシステムにしておくことで、グローバル展開が可能に。YouTube動画での字幕機能も効果的です。