未経験からWebデザイナーになるには?あっきー転職ノート

STEP4-2:Webサイトデザインの基礎ルールやポイント

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

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

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

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

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

http://e0166.blog89.fc2.com/blog-entry-921.html

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

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

レイアウトについて

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

http://wp.yat-net.com/?p=3633

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

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

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

http://webdesignrecipes.com/web-design-beginner-learning-dtp-design/

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

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

http://photoshopvip.net/archives/14323

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

色彩、配色について

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

http://e0166.blog89.fc2.com/blog-entry-807.html

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

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

http://www.webcreatorbox.com/tech/web-design-color-scheme/

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

デザインのテクニック

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

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

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

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

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

http://tsutawarudesign.web.fc2.com/

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

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

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

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

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

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

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

参考になる本

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

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

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

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

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

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

2 comments

  1. ちひろ より:

    はじめまして。現在、就職活動中の者です。

    私は大学では全く違うことを学んでおりましたが、
    昔から物作りが好きで、仕事においてもそういったことがしたいと思い、
    webデザイナーを目指しております。

    最近、いまさら目指しても…と思っていましたが
    偶然お見かけしたあっきーさんの記事に、勇気を頂きました。
    ありがとうございます!!

    「とりあえず行動する」が大事ですよね!

    • akki より:

      ちひろさん

      コメントありがとうございます!

      やりたいことに遅いとかないと思っています。
      まずはほんの少しでもいいから動くことで、また次の道が見えてきたり。
      がむばりませうです!

akki へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください