Webサイトのデザインの完成度をアップする、小さなディテールだけど効果が確実にある改善方法

Post on:2015年8月18日

1. デザインされたテンプレートを使う時の注意点

私は、テンプレートを大きいビジネスで使うことは勧めませんが、スタートアップや小さい規模でその必要性を感じます。そして、テンプレートを使う時は、あなたのブランディングにあうようデザイナーにカスタマイズさせるのは良いアイデアです。それはおそらく良いプロジェクトとして終えることができるでしょう。

あらかじめデザインされたテンプレートでWebサイトを制作する時の問題点でよくあるのは、ロゴとそれ以外のビジュアルの繋がりです。テンプレートのロゴには、サイトのどこにも使われていないカラーやフォントが使われていることがよくあります。

あなたのWebサイトのブランディングを守るのであれば、少なくともテンプレートはそのまま使うものではないことを覚えておいてください。

2. Bootstrapのデフォルトのデザインを使ってませんか？

Bootstrap

1つ目と似ていますが、同じくらいぞっとするのがBootstrapのデフォルトのデザインをそのまま会社のWebサイトに使うことです。同じデザインを使ったWebサイトは区別が難しく、そしてそれはあなたのブランドを傷つけることになります。

Bootstrapで作られたWebサイトの一つの特徴は、Font Awesomeです。このアイコンは一貫したビジュアル言語を提供でき、その完璧なアイコンライブラリは大きな人気を得ています。複雑なインターフェイスの助けとにもなり、非常に便利です。

あなたのWebサイトは、オリジナリティがありますか？あなたのセールスポイントを説明するような魅力的なアイコンをデザイナーに作成してもらうことは考えませんか？

3. コンテンツを分かりやすくするフォントの使い方

フォントは、多くのノンデザイナーが理解しているよりずっと大きな役割を果たします。ただの文字ですが、デザイン全体を作ることも、そして壊すこともできます。

手作りのWebデザインでよく見かける問題は、見出しと本文でフォントののコントラストがないということです。ちょっと大きさを変えるだけでは効果がありません。見出し用には大胆なウェイトのフォントを使い、他のテキストより明らかに重要であるようにします。このことは階層にも役立ち、コンテンツをより読みやすくします。

4. 暗いカラーの背景はデザインが難しい

背景のカラーはあなたのWebサイトにおいて、最も大きな範囲を覆うので、慎重に選んでください。

経験則として、ブラックのWebサイトはプロフェッショナルにデザインされない限り、決してかっこよく見えません。ホワイトはまぁ無難です、多くのデザイナーは明るいグレーを好む傾向があります。背景のグレーが暗いと、ブラックの文字が読みにくくなってしまうからです。デザインを明るい状態に保つグレーは、ブラックの15%以下にするとよいでしょう。

5. 似たようなボタンを数多く配置するのは逆効果

あなたのWebサイトのそれぞれのページには、メインのアクションボタンを一つだけ配置するべきです。もしあなたが完了するためのアクションを一つも与えないなら、ユーザーは次に何をするか分からず困惑してしまい、場合によっては立ち去ってしまうかもしれません。

同様に、アクションボタンを多くするのも問題です。ユーザーが多くを考えないで、アクションを簡単にできるようにします。サインアップボタンやプラン選択であるかに関わらず、ユーザーがより簡単に望むアクションができるようグラフィカルなアクセントで目立つようにしておいてください。

6. 空白スペースを効果的に使うシンプルなルール

スペースは難しいです。要素の周りの空白スペースを度が過ぎない程度に十分にとることは、おそらくデザインを理解する上で最も難しい部分です。しかし、それはいくつかのルールで簡単に実行できます。最初にすべての要素が適切にグルーピングされていることを確認してください。第二にそれらのグループの周りに十分な空白スペースを設けるだけです。

7. テキストはデザインに反映させて最終確認をする

ライティングは非常に大切で、コンテンツのポイントを素早く理解させることが必要です。特に何かを販売しようとしているなら、コピーの内容を理解することが簡単であることを確認し、文字や表記に間違いがないことをチェックする必要があります。

デザインのプロトタイプの段階ではコピーにダミーを使うことがありますが、サイトが実際に公開される前にすべてのテキストをサイト上で全体を通して確認するのは良いアイデアです。

8. リーダビリティの問題

もしそれが読むことができないなら、どんなに素晴らしいコピーが書かれていてもビジネスの助けにはならないでしょう。多くの小さなディテールはテキストを読むのに有害で、コンテンツが理解されることに影響を与えます。

注意すべき問題は、狭い行間、小さなフォント、背景とテキストのコントラストです。これら一つひとつは大きな影響を与えないかもしれませんが、これらの問題があるWebサイトという事実がプロの仕事ではないように思われてしまいます。

9. 一貫性のないデザイン

あなたのブランディングは、首尾一貫にするべきです。ソーシャルメディアやFacebookの広告、あるいはオフラインでもあなたの顧客はすぐにあなたのブランドを認識することが可能であるべきです。

まずはあなたのWebサイトがそれ自身と矛盾していないことを確認しましょう。本文と同じフォントに見えるリストはスタイルを定義していますか？ロゴのカラーはどのページでも同じカラーですか？シェードはどこでも同じですか？これらはCSSのファイルをきちんと管理することで解決できる問題です。すべての必要のないコードを削除することで、首尾一貫のなさは解消されます。