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

Webサイトのデザインで大切なのは、小さなディテールの積み重ねです。一つひとつは些細なことかもしれませんが、それらをおろそかにしてしまうとWebサイト全体が台無しになってしまいます。

アマチュアのデザイナーが普通によくやってしまう間違いとその改善方法を紹介します。

サイトのキャプチャ

Top 10 Mistakes that Make your Website Look Unprofessional

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

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のファイルをきちんと管理することで解決できる問題です。すべての必要のないコードを削除することで、首尾一貫のなさは解消されます。

10. デザインの古いトレンドを使ってる

良い例と悪い例

グラデーションやシャドウをたっぷり使ったスキュモーフィズムのデザインは忘れてください。あちこちに3Dのエフェクトを使うより、フラットデザインのガイドラインを参考にする方がずっと良いです。

top of page

©2017 coliss