これからWebデザインの勉強を始めたい方のためのまとめ

これからWebデザインやコーディングの勉強を始めたい方、またはWebデザイナーになったばかりの方向けのまとめ記事です。

「無料で始められる…」とか「本を買わなくても…」などのテーマにしようか迷ったのですが、無料ではじめられる記事としては、既にネタ帳さんの以下のようなエントリ↓がありますので、ここでは純粋に私がおすすめしたい記事、本、サイト、ソフトなどを有料無料に関係なく紹介したいと思います。

Web制作の為の無料Webサービス・ツール40*ホームページを作る人のネタ帳

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

あと、渋谷でWebデザインスクールを開講しています。
詳しくはこちらの記事 をご覧下さい。

デザイン基礎

年末年始にWebデザインを学び直すための3つのステップ

いきなり手前味噌で申し訳ないですが、これからWebデザインをはじめられる方には、まずソフトの使い方よりデザインそのものについて勉強されたほうが良いと思います。

この記事を書いてから1年以上経っていますが、「Webデザインの勉強のためには、美しいサイトをスケッチしたほうが良い」という考え方は今も変わっていません。

記事で紹介している 7日間でマスターするレイアウト基礎講座は既に100冊以上（この記事経由だけで）売れていて、買われた方はかなり高く評価されているようです。
Webデザインのトレンドはコロコロ変わりますが、レイアウトの基本的な部分はあまり変わらないのではないかと思います。

デザインの参考になるサイト

「美しいサイトをスケッチ…」と言われてもどんなサイトを参考にして良いか分からない方は、とりあえず以下のようなギャラリーサイトを参考にしてみてはいかがでしょうか。

Webデザインギャラリー | I/O 3000

WEBデザインリンク集 : ikesai.com — いけてるサイトドットコム

WEBデザインがキレイなサイトのリンク集　｜Good Design Web

縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU_CHANG Web DESIGN Showcase

よく使われているソフト

Webデザインに使用されるソフトとしては、Photoshop や Fireworks が有名です。
一部 Illustrator を使ってデザインされている方もいますが、どれも Adobe という会社のソフトです。

Adobe 以外のソフトを使ってバリバリデザインしている方いないかな…と思って Twitter や Facebook で聞いてみたのですが、業務で Adobe 以外のソフトを使っている方はほとんどいないようです。

というわけで、Webデザインでよく使われる Adobe のソフトのご紹介。

Adobe Photoshop

本来写真の色調補正や切り抜きなどに使われるソフトなのですが、Webデザイン制作に最も使われているソフトです。
私がこれまでに制作したデザインは、ほぼ Photoshop で制作しています。

色補正はもちろん、グラデーション、文字のアンチエイリアスなどどれをとっても美しいと思います。
Adobe のソフトの中では、比較的動作が安定している（突然勝手に終了することが少ない）のもポイント高いです。

Adobe Fireworks

Adobe Fireworks CS5 Windows版
本来こちらがWebデザイン用のソフトなのですが、おそらく「グラデーションが汚い（バンディングが発生する）」とか「周りのデザイナーが Photoshop を使っているのでファイル形式を合わせるため」等の理由であまり使われてきませんでした。

しかし、Fireworks CS 5.1 でバンディング問題が解決した（参考: FireworksとPhotoshop＆Illustratorの使い分けとグラデーション品質の話｜VIVID COLORS DESIGN -ビビッドカラーズデザイン-）ためか、最近は徐々に Fireworks のシェアが拡大してきている気がします。

Webデザインに特化したソフトのため、普通にWebデザインをするなら Photoshop よりも効率が良い（時間が節約できる）と思います。

※現在は、事実上開発が終了しています。

Adobe Illustrator

Illustrator は、Adobe のサイトには「あらゆるプロジェクトで、表現力が際立つベクトルアートワークをすばやく作成」できるソフトと書かれています。

要するに本来高機能なお絵かきソフトなのですが、印刷物、特にチラシやポスターなど1ページしかない、あるいはページ数の少ないものの制作にも使われています。

Illustrator が Web制作とどう関わるかというと、主に企業等のロゴやちょっとしたイラスト、アイコン等を描くのに使われることが多いです。
一応 Webデザイン制作できる機能も付いていますが、さすがに Illustrator で Webデザイン制作する人はいない…と思ってたら最近意外とそういう方もいることに気づきました。

Adobe Dreamweaver

HTML や CSS 等を書くためのソフトです。
Webページ制作をされたことのない方のために書いておくと、Webページは Photoshop や Fireworks でイメージ（画像）を作ってはい終わりではなく、画像をパーツごとに切り出して（スライスして）HTML と CSS でページを組み立てなければなりません。

お使いのブラウザで、このページの適当な場所（画像やリンクのない場所）で右クリックして「ソースを表示」をクリックすると、意味不明なアルファベットの羅列が表示されると思いますが、それが HTML です。

HTML をよく見ると、記事本文や見出しなどのテキストが書かれ、それらが <h1> や <p> などのタグで囲まれていることが分かると思います。

そして、CSS は Cascading Style Sheets の略で、単に「スタイルシート」と呼ばれることも多いです。
Webページのレイアウトや見た目（背景色、フォントサイズ等）は通常 CSS で調整します。
このブログの CSS は、ここをクリックすると見れます。

HTML や CSS はテキスト形式で書かれているので、やろうと思えば普通のテキストエディタ（Windows のメモ帳や Mac のテキストエディット）でも書くことができますが、やはり HTML や CSS を書くことに特化したソフトを使ったほうが時間が節約できたり、楽に書けたりします。

とりあえず、どのソフトをマスターすべきか

もちろん4つともマスターしておいたほうがどんな会社で働くことになっても安心ですが、個人的にはまず

Photoshop でデザイン → Dreamweaver またはテキストエディタでコーディング

をしっかりマスターしてから Illustrator でベジエ曲線やロゴ作成の勉強、余裕があれば Fireworks での Webデザインも勉強されるのが良いのではないかな…と思います（もちろん、人によって意見は異なると思います）。

理由としては、現時点では Photoshop で Webデザインしている制作会社が多いことと、先に Fireworks をマスターしてしまうと、Fireworks ではできるのに Photoshop ではできない操作が結構あってイラッとしてしまうのではないかと思うからです。

コーディングに関しては、個人的には Dreamweaver ではなくても、使いやすいテキストエディタであれば何でもいいと思っています。

勉強会などで他の方の制作環境を見せていただくと、エンジニア寄りの方は Vim（MacVim）をお使いの方が多くて、デザイナー寄りの方で Mac をお使いの方は Coda 使いの方もいらっしゃるかなという印象です。
Windows をお使いの方だと、さくらエディタ、秀丸、Emeditor 等をお使いの方もいらっしゃるようです。

ただ、昨年 Webスクールで講師をしていると、生徒さんは圧倒的に「Dreamweaver の使い方を知りたい！」という方が多かったです。
Dreamweaver でないとコーディングできないと思っている方が多いのか、Dreamweaver が使えないと就職できないと思っている方が多いのか、Dreamweaver には「デザインビュー」があるから楽にコーディングできると思っている方が多いのか、はっきりとした事はよくわかりませんでしたが…

Dreamweaver の「デザインビュー」機能は、Word のように実際の表示結果を見ながら作業できる…はずですが、私はあまりあてにならないと思っています（ブラウザの表示結果と違う場合がよくある）。
バグも多いし、不安定（勝手に強制終了することがよくある）なので個人的には全く使っていません。

ただ、Dreamweaver には複雑な表組みを簡単に作ったり、画像のサイズを自動的に取得したり、テンプレート機能など便利な機能もあるので「特定の作業のみ Dreamweaver でやってる」という方もいらっしゃるようです。

昨年 Webスクールで色々な方にコーディングを教えていて感じたことは、「Dreamweaver のデザインビュー機能にいつまでも頼っている」方や「HTML を正しくインデントできない」方はいつまでもコーディング能力が上達しないという事です。
私自身のことを思い出しても、Dreamweaver のデザインビュー機能に頼っていた時は CSS に慣れず、コーディング能力や速度が全然伸びませんでした。

民間の Webスクールでは、コーディングの授業の時に Dreamweaver の使用を一切禁止して、シンプルなテキストエディタだけでコーディングさせるところもあります。

というわけで、ここで言いたいことは Dreamweaver を使うなということではありませんが、これから HTML/CSS を勉強される方には、まずは Dreamweaver よりもシンプルなテキストエディタを使うか、Dreamweaver を使うとしても「デザインビュー」は極力使わず、まずは「コードビュー」でコーディングしてみてください。

一旦慣れたら、自分が最も効率が良いと思う方法でコーディングすれば良いのではないかと思います。
（「最も効率が良い方法」は人によって違うので、ここでは特定の方法はお勧めしません。）

Photoshop入門

はじめて Photoshop 操作する方のための入門記事はWebデザインレシピさんの記事がわかりやすかなと思います。

これからPhotoshopでWebデザインをしたい初心者さんのためのツールパネルとかいろいろ

Adobe TV という、Adobe 公式の動画で学べるページもあります。

Learn Photoshop CS5 | Adobe TV

基本操作に慣れたら、自分で撮影した写真を読み込んで、綺麗に色調補正してみたりしましょう。
写真補正に慣れてきたら、Webページ用のボタンを作成してみたりしましょう。
以下の記事には、ボタンをデザインするための基本的な考え方と、Photoshop で制作する方法を書いています。

[連載]Webデザイン入門（3:光とボタン） | Stocker.jp / diary

Webデザインレシピさんの記事も参考になると思います。

Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ

あとは、上で紹介したギャラリーサイトなどを参考に、色々なパーツやサイトを作ってみましょう。

パーツの参考になるサイトとしては、以下のようなサイトがあります。

Dribbble – What are you working on?

このサイトは見るばかりで自分でアップしたことはあまり無いので、どう説明すれば良いかいまいちよくわからないのですが、「制作途中のパーツ等をアップして、フィードバックをもらうサービス」と言えばよいのでしょうか。
英語圏のデザインが多く、全体的にとてもクオリティが高いです。

Webデザインや配色をサポートする新サービス | Croppy（クロッピィ）

パーツ別のデザインギャラリーです。日本語サイト中心で、Twitter や Facebook アカウントでログインすれば、誰でも今見ているWebページのパーツを切り抜いて（Crop して）追加できます。

日本語のWebサイトでパーツ別のデザインギャラリーはいくつかありますが、もっと色々見てみたいと思ったのと、Twitter 等のアカウントとひもづければどのデザイナーさんがどんなデザインが好きなのかが分かって面白いかなと思い、WordPress で制作しました。

例えば、私が Crop したものはこちらです。

パーツの作成に慣れてきたら、いよいよページ全体をデザインしてみましょう。
以下の記事も参考になるかもしれません。

[非Webデザイナー向け] カッコイイブログを最速でデザインするための簡単 5 ステップ (フェンリル | デベロッパーズブログ)

HTML/CSSコーディング入門

HTML/CSS の入門書はいくつかありますが、個人的には以下の本がはじめての方には分かりやすいのではないかと思います。

Webサイトだと、以下の記事など結構分かりやすいと思います。

0 から始めるHTMLとCSSの基本・基礎-webデザイン入門- | 秋田県webデザイナー【weblog】

慣れてきたら、自分で「中小企業っぽいサイト」や「飲食店っぽいサイト」を Photoshop でデザインし、画像をスライスしてHTML、CSSを書いてページを仕上げてみましょう。

はじめてコーディングする時に詰まるのは、おそらく CSS セレクタの使い方だと思います。
こちらの記事↓に CSS セレクタの使い方が分かりやすくまとまっていますので参考にしてみて下さい。
もちろん、全ての CSS セレクタを覚えたり使う必要があるのではなく、最初は 1〜4 と 13 くらいしか使わないのではと思います。

意外と知らない!?CSSセレクタ20個のおさらい｜Webpark

あと、margin、padding や em、px などの単位までうまくまとまった CSS のチートシートもあります。
コーディングに慣れるまでは、こちらのチートシート（PDF形式）を開きっぱなしにしておくとコーディングが捗るかもしれません。

[PDF] CSS Cheat Sheet 日本語版

写真素材（ストックフォト）

例えば、中小企業っぽいサイトを作ろうとすると、青空を背にしたビルとか、ヘッドセットを付けた電話オペレーターっぽい女性とか、いろいろな写真素材が欲しいと思うことがあるかと思います。
しかし、人物写真は特に自分で撮影するのは難しいので写真素材があると良いのですが、練習のためにわざわざ有料写真素材を買うのも大変なので、無料の写真素材サイトをいくつかご紹介します。

PAKUTASO/ぱくたそ-WEB制作デザイン向けの無料写真素材/商用可能

無料の写真素材サイトなのに、人物写真素材あり、ノイズ処理やトリミングも行われています…すごい。

・すべて無料（FREE）にてご利用いただけます。
・私的利用/商用利用/公用利用/アカデミック利用可能となっております。
・クレジット表記/利用報告なしでご利用いただけます。
（クレジット表記とは写真を利用したとの注釈を記載しなくてはならないこと）
・画像加工や二次使用（モデルリリースは制限があります）を認めております。（画像加工については下記注意項目を守って利用下さい）

とのことで、Webデザインの練習素材としてはうってつけだと思います。
ただ、禁止事項もあります。詳しくはこちらをご覧下さい。
ちなみに、この記事で使われているクローバーの写真もぱくたその写真素材だったりします。