クライアントも納得！「WEBサイトのデザイン改善する１０の方法！」

2019年4月6日

WEBサイトのデザインを作成中だけど、思ったようなデザインができない…。
どうやったら良いデザインになるか、改善方法を知りたい！

私はWEBサイトのデザインを長年続けており、WEBサイトのリニューアルには「１００以上の案件」に携わっているので、これまでの経験をふまえて、WEBサイトのデザインを改善するポイントを解説しよう！

WEBサイトのターゲットに配慮して改善する！

WEBサイトをデザインする時は、そのサイトのメインのターゲットが誰なのかを考える必要がある！

例えばターゲットが「20代の男子大学生」だった場合、色の選定もかわいいピンクや淡い色ではなく、コントラストの強い黒や青を好む可能性が高いかもしれないし、矩形のあしらいが、柔らかい印象の角丸ではなくシャープな四角がいいかもしれない。

20代という事で言えば、文字の大きさも比較的小さめにして、より多くの情報をスッキリ見せれた方がいいかもしれない。

このようにターゲットとなる人物に配慮したデザインにする事で、WEBサイトのコンバージョンにアップし「なぜそのデザインになったか」を明確にクライアントに説明する事ができるようになる！

見やすさ使いやすさを優先してデザインを改善！

デザインの表現に行き詰まった場合は「ユーザーファースト」の考えに立ち戻り、見やすさ・使いやすさを最優先に考えぬいデザインが結局一番よかったりする。

文字の大きさを考えたり、文字の行間を開けたり、背景色と文字の色の差を考慮して見やすくしたり、ボタンの大きさを押しやすいサイズに調整したり、ボタンやテキストリンクが「それがクリックするものだとわかるデザイン表現」にしたり、複数ページにおいて、見出しやリンクの表現を統一したりする事で、ユーザーの使いやすさはグッとあがる。

世の中のありとあらゆるデザインは「ユーザーの使いやすさを優先」する事で、おのずと美しいデザインに変わるものだ。

無駄な装飾を削ぎ落としてデザインを改善！

デザインが煮詰まってくると、良いデザインにしようという意識から、いろんな装飾をつけがちになる。

最終的にデザインを客観的に見たときに「本当にその装飾が必要なのか？」という考えを元に、余計な飾りや、雰囲気だけの装飾などを削ぎ落として、読み手が心地よく見れるデザインにすると、おのずとそれが正解に近いデザインになる事が多い！

WEBサイトの「キービジュアル」をシンプルな写真に変えてみる

WEBサイトのデザインにおいて、キービジュアルは最も印象に残るデザイン要素といっても過言ではない。

そのキービジュアルの写真が良いものに変わるだけで、デザインの印象はグっと良くなり、またデザイナーのイマジネーションも連鎖的にその写真にインスパイヤーされて、より良いデザインイメージが湧いてくる事が多い！

重要なのは、そのキービジュアルの選定基準だ。タイトルやキャッチコピーをそのビジュアルの上に乗せると仮定するなら「文字が読みやすくスッキリとシンプルな写真」が望ましい。

もちろん、そのページの内容にあったもので、解像度や被写体へのピントの合い具合など、写真としてのクオリティが高いものである事は言うまでもない。

かっこいいキービジュアルの作り方を知りたい方は、こちらの記事も参考にしてみてほしい！

WEBデザインで「カッコいいキービジュアル」の作り方

人物や商品の写真は、その輪郭で切り抜いてみる

一般的に人物や商品の写真を配置する場合、角版の写真（特定の形に切り抜かない四角い写真）を配置する事が多いが、デザインが行き詰まった時は、一度その「商品や人物の輪郭で切り抜いて」配置してみよう！

ひと手間かかる作業だが、やってみるとデザインに躍動感が生まれ、面白みのあるデザインに変わるのでオススメだ！

アイコンを入れて、デザインを改善！

箇条書きになっているものや、分類してカテゴライズしたい内容などの場合は、文字だけでなくアイコン化して見せるのは一つの良い手段だ。

アイコンを入れる事で、ユーザーの認知性が上がるだけでなく、デザインの見た目のクオリティも上がる！

ただし「アイコン自体のクオリティ」が高くないと逆効果になる上、アイコンを見ただけでそれが何を表すかを判断できるデザインにしないといけないので、アイコンの作成にはある程度の時間が必要だ。ただし、アイコンだけでその意味を理解させる事が難しい場合も多いので、アイコンのすぐ側に念のため日本語も併記するのが無難だろう。

タイトルをロゴっぽくしてするとデザインが見違える！

メインのキービジュアルに入るキャッチコピーなどは、シンプルにテキストのままでもよいのだが、少しロゴっぽくテキストをアレンジしてあげるとデザインの質がグッとあがる場合がある！

ロゴっぽい表現と言っても、何が書いてあるのかわからないものだと逆効果になる場合もあるので、そのサジ加減には注意してほしい。

サイトの目的や、内容の優先度を意識する

WEBサイトには、からなず目的がある。企業サイトであれば「お問い合わせ」であったり、ECサイトであれば「商品の購入」であったり、企業の採用サイトであれば「募集エントリー」であったりする。

そのゴールとなる目的に向かうために、さまざまな仕掛けや流れを作るのが、WEBサイトの一般的な作り方であり、ユーザーにその流れに乗ってもらうために、どこを強調して表現すべきか、どれくらいの余白をつければ、そのボタンやコピーが目立つかなど、サイトの目的を達成するためのデザイン表現を考える事はとても重要だ。