デザインをウェブサイトに適用する際にありがちな7つの間違い
Post on:2012年2月13日
sponsors
デザインをウェブサイトに適用する際、デベロッパーにありがちな7つの間違いを紹介します。
[ad#ad-2]
下記は各ポイントを意訳したものです。
- はじめに
- 1. 良いデザインがどのように見えるか
- 2. カラー選択の理由は好みだからはダメ
- 3. 真ん中配置の誘惑
- 4. フォント選びは慎重に
- 5. 情報の詰め込み過ぎ
- 6. 質問をもって
- 7. ディテールは時間の浪費？
はじめに
もしあなたがフリーランスのコーダーであるなら、あなたの資産の一つに、ウェブ開発の始めから終わりまで全てのプロセスを把握している、ということがあります。これはデザインも含みます。
プログラマーはコードと素晴らしく構築されたシステムをデザインし、自身がデザイナーであると言えるでしょう。また、個人のプロジェクトなどで、ウェブサイトを作成しなければならないかもしれません。
これはデザインでビジュアルの何かに違和感があっても、あなたがデザインのために良い目を持っているからといって、それを適用したい気がすることを意味しません。
ここに、デザインをウェブサイトに適用する際、しばしばデベロッパーがしてしまう7つのミスがあります。
1. 良いデザインがどのように見えるか
デザインはデザインができることと見ることを切り離すことは難しいものです。それはファッションを見て、あなたが何が良いか言うことはできますが、彼らと同じような洋服を着ることができないのと非常に類似しています。
偉大なデザイナーは良いデザインが何であるか知っています。彼らはPhotoshopを開いたり鉛筆を持つ前に、何が機能し機能しないかを知っています。
下記のサイトの何がデザイン上、機能しているか見てみましょう。
-
- 写真画像の使い方
- デザインにスパイスをきかせることにおいて、画像は常に役立ちます。このサイトで使われている画像は、メッセージを理解させるのに効果があります。
-
- ソリッドなグリッド
- グリッドレイアウトの大きな役割は、ユーザーの目線を誘導することです。
-
- シンプルなタイポグラフィ
- ウェブには、使われるべきフォント、使いどころを選ぶフォント（Comic Sansなど）があります。Helvetica, Georgiaはデザインに忠実に機能するため、何も問題はありません。
あなたが好きなデザインを見つけた時、個別のエレメントをじっくり観察するだけでなく、それがどのように全体に影響を与えているかを考えてください。
デザインの一つが素晴らしいエレメントだけでは、デザイン全体を素晴らしくはしません。
2. カラー選択の理由は好みだからはダメ
カラーの選択は苦痛かもしれません。カラーは数多くあり、私はカラーを選ばなければならないことが嫌いです。多くのウェブ制作者は、ブルーやホワイトのパレットに固執する傾向があります。それはおそらく、ブラウザのデフォルトで使用されているカラーであり、また素晴らしいデザインの中で広範囲のカラーを使うことができるからでしょう。
しかし、私たちには素晴らしいカラーの組み合わせをつくるのに役立つツールがたくさんあります。
COLOURloversはユーザーがカラーパレットを作成し、それを共有するコミュニティです。
あなたはCOLOURloversでブラウジングし、セーブし、そしてお気に入りのパレットやカラーに投票することができます。
私はカラー選択の苦境を切り抜けるために、COLOURloversを頼っています。
カラーパレットを選ぶポイントは、必ずあなたのサイトのムードとコンテンツに適したものにしてください。
決して、ただ好きだから、という理由でパレットを選ばないでください。
3. 真ん中配置の誘惑
見出しを真ん中に配置することは非常に誘惑的です。雑誌などにある真ん中配置を見ると、素晴らしく見えるでしょう。
しかし、ウェブでは真ん中配置はよく機能しません。左詰めのテキストがプロっぽく見え、目の流れも自然です。
真ん中に配置されたテキストで最も良いのは、見出しと少ない行のテキストです。行数が少ないため、ユーザーは容易に読むことができ、目を繰り返して動く必要がありません。
また、真ん中に配置されたテキストは対称のフォーマットで、レイアウトに審美的な見栄えを与えることができます。これは特に真ん中に配置された画像に付随するテキストに効果的です。
もし画像が左寄せ、あるいは右寄せで配置している場合は、そのレイアウトと矛盾しないようにテキストも同じ寄せで配置するべきです。
雑誌などで真ん中配置の見出しが機能する理由は、テキストがカラムの中に配置されており、見出しが常に上にあるからです。
もしテキストの一つのカラムを扱うだけであれば、左詰めの見出しに固執するべきです。
[ad#ad-2]
4. フォント選びは慎重に
あなたがもしタイポグラフィの世界に浸っていなければ、ArialとHelveticaは同じように見え、GeorgiaはTimes New Romanの区別がつかないかもしれません。
あなたはこの世にたくさんのフォントがあることを知っていて、フリーで入手可能なものも数多くあることを知っており、フォントに対価を払うことの重要性を見いだせていないかもしれません。
カラーの選択と同様に、フォントの選択にも便利なツールがあります。
Typekitでは基本的なフォントを使ったものから、フォントの正しい組み合わせを見いだす研究を見ることができます。
フォントもカラーと同様に厳選して利用することが、もっとも良く機能します。フォントで多くの素晴らしいデザインができることを覚えておいてください。
5. 情報の詰め込み過ぎ
ページにより多くの情報を掲載できれば、それは良いことでしょう。しかし、これはデザインで機能しません。窮屈なスペースに多くの情報を詰め込むべきではありません。
人の目は、一度にそれほど多くの情報を取り入れることはできません。もしデザインの目的がタスクの完了であるなら、多くの情報でタスクを隠さないようにします。
ユーザーに見せたい情報は、それを強調するためにホワイトスペース（空白）を使ってください。
ホワイトスペースはあなたの親友であるべきです。
6. 質問をもって
私たちはリアルの世界で何かを作り、それを見るという素晴らしい感情を知っています。そして、その後にはそれより良いと思わせるトレンドが生まれます。あなたのデザインが効果的かどうか他の人の意見をもらう必要があり、もしそれが無いなら改善する方法を見つけだすことができます。
同様にあなたは人々がデザインについて意見を求めるとき、批評を求めていないことに気がつくでしょう、そして賛同も。彼らはそのデザインが決定したことに対しての正当な理由を欲します。しかし、これは正しいアプローチではありません。
質問をすることは、あなたが気がついていなかったかもしれないユーザビリティの問題を見いだすのを助けます。
あなたにとってすべてが意味をなすデザインができたとしても、それを初めて見た人にとってはルービックキューブより複雑なものかもしれません。
7. ディテールは時間の浪費？
素晴らしいデザインを作りだしている小さなディテールに気がつくことは難しいことです。それは非常に繊細なものかもしれません。
例えば、ドロップシャドウがエレメントに与える全体的な効果を理解していないと、制作者にとって小さなディテールは時間の浪費になってしまうかもしれません。
個々の小さなディテールはデザインの特定のエレメントに影響を与えるだけですが、それらが全て集まると、全体が素晴らしいデザインとなります。
小さいディテールがどれぐらい素晴らしく機能するか、Dribbbleを見てみてください。
もし本業がデザイナーでないなら、あまり多くのディテールにフォーカスを合わせることは開発のスピードを遅くしてしまうでしょう。
しかし、それはあなたがディテールがどのようにデザインに影響を与えることできるかを知っているべきではないことを意味するものではありません。
sponsors
