WEBデザインとは

公開日:  最終更新日:2009/02/07

デザインとは「実用面を考慮して装飾をほどこす」ことです。
これをWEBデザイナーにあてはめると、WEBサイトを訪れる人にとっての使いやすさや必要性を考え、わかりやすく、見やすく、美しく、人に優しく作りあげるということになります。

WEBデザインの例を見るには

WEBデザインの例はインターネット上にあふれています。
その中でもデザインの優れたWEBサイトを見て、ストックしておくことが大切です。

web creators』や『Web Designing』などの雑誌に掲載されているサイトをチェックしたり、それらをまとめた『Web制作会社年鑑』などの本を参考にすると良いでしょう。
Amazonで『WEB制作会社年鑑』を探す

本を見るときには紙面上でチェックするだけでなく、URLにアクセスしてウェブ上で確認しましょう。
いいと思うサイトをPhotoshopなどでトレースすると訓練になりますし、実際に使われている色やフォント、メニューの幅、操作性を身を持って体験することができます。

WEBデザインはグラフィックデザインからも学べる

WEBデザインとグラフィックデザインは、デザインのジャンルを大きく分けた時に「二次元」という意味で同じになります。
グラフィックデザインとは雑誌やポスターなど、平面=紙媒体のデザインです。
WEBデザインもディスプレイという平面で表現しますよね。

WEBと紙だと、文字が可変する・ブラウザやモニターによって見え方が変わるなど、デザインをする上で気をつけなくてはならない違いはあります。
しかし、デザイン理論としては学ぶべき部分がたくさんあります。

何よりも、グラフィックデザインの方がデザインの歴史が長いため、参考になる書籍がたくさんあります。
デザイン力を強化したい方は、グラフィックデザインの本を意識的に見ると良いでしょう。

WEBデザインの流れ

WEBデザインの流れは、

  • レイアウトをする。
  • サイトの目的・内容に合わせて色使いやデザインテーマを決める。
  • 画像を綺麗に加工する。
  • フォントを見やすく整える。
  • 雰囲気を盛りあげるための画像やイラスト・装飾を加える。

といったところです。

具体的には、Photoshop、Illustrator、Fireworksなどを使用して1枚絵として制作します。
画像やバナー等、個々のパーツのみを制作する場合もありますが、これだと全体のデザインが見渡しにくいので、1枚絵で制作するのが一般的です。

トップページ キャプチャ

このサイトでは、Photoshopで上の画像のように制作しています。ガイドでグリッドを決め、ヘッダーやメニューごとにレイヤーをフォルダ分けしておくとわかりやすいです。

前の記事:
+α になる技術
次の記事:
コーディングとは
PAGE TOP ↑