プロ級のサイトを作るために必要な4つのコツ

shunichi shiga
ウェブサイト4つのコツ

デザイナーになったばかりの方や、今後デザイナーとして仕事をしようと考えている方が、自分の感覚だけで制作したウェブサイトを客観的に見たときに「どこか洗練されていない」と感じたことはないでしょうか。プロが作るスタイリッシュなウェブサイトを参考にしたつもりが、ポイントをおさえてないためにただの見づらいウェブサイトになっていることがあります。
そんなサイトでも、ちょっとしたコツをつかむことでプロ級のウェブサイトに生まれ変わらせることができます。今回はそのために必要な4つのコツを紹介します。

デザイン性よりも読みやすさを意識する

ウェブサイトを作る際、「デザインにこだわりすぎて、読みにくいサイトになってしまった」という失敗を経験した方は少なくないのではないでしょうか。これまでにない斬新なデザインのウェブサイトを作ろうと意気込みすぎて、そもそもの目的を見失っていることが原因です。
ブログのような記事や、ショップの営業情報、商品の詳細説明など文字情報が「訪問者に伝えたいこと」である場合、訪問者に文章や文字を読んでもらうことが必要になります。「文字を読んでもらう」という目的のために「デザイン」という手段があります。ウェブサイトの主役が文字情報なのに、デザインばかりが主張して文字を読みづらくしてしまっては、何のためのデザインかわかりません。 この場合であれば、文字情報を読みやすく、また訪問者を文字情報までスムーズに誘導するデザインを作ることがデザイナーには求められます。
インパクトのあるウェブデザインも重要です。しかし、インパクトばかりに気を取られて「伝えたいこと」が伝わらないウェブサイトにならないように注意しましょう。

読みやすさを意識する

視覚的な階層を取り入れてみる

目から一度に複数の情報が入ったときに、人間の脳は一定の法則に従って情報の順位付けを行います。これを視覚的な階層と呼び、ウェブサイトのデザインにも取り入れることでメリハリのあるページを作ることが出来ます。例えば、小さなものよりも大きなもの、薄い色よりも濃い色を重要だと判断するほか、ウェブサイトでは左側にあるもの、上側にあるものを「より大切な情報」として、脳内の優先順位を決めているそうです。
ウェブサイトをデザインするときに、最も伝えたい情報を大きくレイアウトするなどして、視覚的な階層の一番に置くことを考えます。視覚的な階層の法則を用いながら、伝えたいことの順位に合わせて表現を抑えていくことで、一番伝えたい情報を強調することが出来ます。
視覚的な階層を作るためのテクニックはいくつもあり、デザインするウェブサイトの種類によって有効なテクニックは変わってきます。様々なテクニックを試し、視覚的な階層を使いこなせるデザイナーを目指しましょう。

視覚的な階層

スマートフォン対応のデザインを取り入れる

スマートフォン対応していないウェブサイトをスマートフォンで見たときに、文字が小さくなりすぎて読めなかったり、クリックするボタンが小さすぎて押せなかったりした経験はありませんか?そのようなウェブサイトは、スマートフォンからの訪問者にとって「使いにくいウェブサイト」のひとつになります。 「使いにくいウェブサイト」は訪問者のリピート率も下がる傾向にあるため、スマートフォン対応のデザインをウェブサイトに取り入れる必要性が高まっています。
ところが「スマートフォン対応をした結果、不便になった」というウェブサイトを見かけることもあります。例えば、表示はスマートフォンに対応しているが、スマートフォンに適した操作性を備えていないウェブサイト。こういったウェブサイトも「使いにくい」と判断され、リピート率が下がってしまうことでしょう。スマートフォン対応のデザインは、スマートフォンに適した表示をすることがゴールではなく、スマートフォン特有の操作方法も考慮し「使いやすいウェブサイト」にすることが大切なのです。

スマートフォン対応

余白を効果的に取り入れるのがトレンド

「使えるのに使わないのはもったいない」という思いから余白をできるだけ無くそうとする人がいます。デザインを学んだ方の作る余白は意図的に作ったものであり、決して余ってしまったわけではありません。
デザインに意図的に余白を取り入れることで、明確なブロック分けを行うことが出来ます。 余白がないデザインはごちゃごちゃして「どこに何が書いてあるか」がわかりにくくなる傾向があります。適切な余白を入れることで、情報を視覚的に分類することができます。
また大胆に余白を使うことで、余白以外の場所を強調できます。例えばウェブサイトのロゴや、購入のためなどにクリックするボタンの周りに十分な余白を取り入れることで、訪問者の目に留まりやすくなります。 余白を意識して使えるようになることで、洗練されたウェブサイトへと一歩近づきます。

効果的な余白

ウェブサイトを作ること自体は簡単ですが、感覚だけでプロのようなウェブサイトを作ろうとすると、いきなり難易度が上がってしまいます。感覚だけに頼らず、ここで紹介した4つのコツを取り入れ、サイトを制作する際の参考にしてみてください。

最新のデザインコンペ

デザイナーとしてステップアップできるお仕事をご用意しています。
0%