STEP４-２：Webサイトデザインの基礎ルールやポイント

さて、「STEP４：Webサイトのデザインを制作する」でお話した通り、Webサイトをデザインするのには、ルールやポイントがあります。

このルールやポイントを知って勉強することで、未経験という殻からまた一歩脱することができるのです。

ここでは、Webデザインをするうえで大変参考になる記事をまとめましたので、
ご参考頂ければです。

基礎全般についてまとめられた記事

デザイナーからデザインの基礎や原則を学べるエントリーまとめ（webデザイナ向け）*ホームページを作る人のネタ帳

Webデザイナーをやっていたら、いや、Web業界にいたら知らない人はいないのでは？というくらい有名な「ホームページを作る人のネタ帳」のYamadaさん（@yamada_nt）が書かれた記事です。

とりあえずこの記事を読めばひと通りの基礎が学べる感じです。

レイアウトについて

レイアウトが考えやすくなるデザインのルール – YATのBLOG

twitterのWeb界隈でこれまた知らない人はいないのでは？という、精力的に活動されているYATさん（@yat8823jp）が書かれた記事です。

記事のタイトル通り、レイアウトが考えやすくなるデザインのルールを、凄くわかり易くまとめられています。何かを配置するのに、必ず理由があります。こういった基本を知っておくことが大事なんですよね。

デザインの基礎力をワンランクアップしたい私（Webデザイナー）の注意書き

一つ一つの記事が、本にできるくらい濃い内容のものを書かれている高橋のりさん（@WebDesignRecipe）が書かれた記事です。本にできるくらい…ということで、最近では多くの本を執筆出版されているようです。納得。

グリッドを使ったウェブレイアウトのデザイン方法＆具体的サンプルPhotoshopVIP | PhotoshopVIP

「グリッド」を使うことで、デザインの締りがグッと変わります。
実際にわたしも、このグリッドを知って、デザイン時に取り入れるようにしたらレイアウトの感じがガラッと変わりました。素人臭さから抜け出せた瞬間です。

色彩、配色について

webデザイナーの色彩スキルを磨くエントリーまとめ*ホームページを作る人のネタ帳

色彩や配色の知識も、素人臭さから抜け出すための大事な知識になってきます。
見やすいWebサイトは、色にも理由があるのです。

配色パターンからWebデザインを考える | Webクリエイターボックス

この方も有名なWebデザイナーさんのManaさん（@webcreatorbox）の記事です。
色は、イメージに繋がる要素です。例えば、レシピサイトを作るのに黒を貴重にしたサイトだと、料理が美味しそうに見えなさそうですよね。
高級感漂う配色とは？自然をイメージした配色とは？そういったことがわかり易くまとめられた記事になっています。

デザインのテクニック

「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント « Parkn' Park

この記事のわかりやすい所は、素人時代だった自分のデザインに対して、突っ込みを入れながらポイントを解説されているところです。大変参考になると思います。

少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass
(English Version)

ここで紹介されている、ちょっとしたテクニックが、素人っぽいWebデザインからガラッとプロっぽいWebデザインに変化させてくれます。１ピクセルのラインは私もよくデザインに取り入れています。

伝わるデザイン｜研究発表のユニバーサルデザイン

こちらのサイトはWebデザインというより、ポスターやスライドなど、デザインが必要なもの全般に当てはまるような内容になっています。
デザインを学ぶという部分では、非常に参考になりますので必読です。

まだまだ他にも、勉強になる記事は沢山あります。
これについては、隙を見つけながら随時記事を追加していきたいなと思っています！

最初は大変だけど、やるしかない！

未経験で、右も左もわからない状態だと、ここに紹介した記事を読んでも難しくてよくわからない！となるかもしれません。わたしもそうでした。

でも、難しいから、よくわからないから、手を付けないでいるといつまでたっても前に進むことができないのです。

難しくても、何度も何度も読み返したり、色んな記事に目を通すことで、そのうち点と点が線になって繋がるように、視界が開けてくる時が必ず来るはずです。

ここで付けた知識を活かしながら、実際にデザインを作ってみましょう。
そして、自分で作ったデザインと見比べながら、何がプロとは違うのか？またそこでじっくり考えてみましょう！

参考になる本

現場のワークフローで覚える Webサイト制作教室

上の記事でも紹介した、高橋のりさんが執筆された本です。
最近目を通した中では、おそらく一番わかりやすい本ではないでしょうか。

次の記事では、Webデザインを作るのに利用するソフトについて紹介していきたいと思います。

1. 独学でWebデザイナーになるための第一歩
2. Webサイト制作の流れ
3. STEP１：Webサイトを企画する
4. STEP２：Webサイトの仕様策定
5. STEP３：サイト構成書 / 構成図を作る
6. STEP４：Webサイトのデザインを制作する
7. STEP４-２：Webサイトデザインの基礎ルールやポイント

この記事を読んだ人は他にも次の記事を読んでいます

• STEP４：Webサイトのデザインを制作する
• Webサイト制作の流れ
• Webデザイナーとは？Webデザイナーの業務内容と仕事の流れ
• STEP３：サイト構成書 / 構成図 / ワイヤーフレーム（モックアップ）を作る
• Webデザイナーになるにあたって習得していった知識を順に紹介してほしいです！

記事公開日：2013年5月13日
最終更新日：2013年9月27日