DESIGNMAP

19のステップで、まったくのゼロから、独学でWebデザイナーになる方法

記事公開日:2012年07月16日最終更新日:2015年11月14日

Webデザイナーになる準備 独学でWeb制作を身につける

この記事は2012年に書いた記事です。2015年に書いた増補改訂版があります。
Illustrator、デザイン - まったくのゼロから、独学でWebデザイナーになるためのロードマップ【Vol. 1】」(2015年3月)

2011年の夏に『まったくのゼロから、独学でWebデザイナーになる方法』を書いた。約1年がたち、最新動向をふまえてリライトしたい。順番に変更はあるが、大筋は大きくはかわっていない。投資予算をおさえる方針で記事をかいた。

ステップの内容や順番はあくまでひとつの意見にすぎない。昨年のエントリーのように、HTML/CSSを先にもってくる方法も有効な方法である。このエントリーをヒントに、自分なりにアレンジしてほしい。


ステップ1 制作環境をつくろう

Macにするか、Windowsにするか

まず、パソコン購入でMacにするか、Windowsにするかという問題がある。結論から言うと、どちらでもかまわない。どちらもコスト面でも勉強面でもあまり差はない。好みの問題だろう。ただ、Macが特殊なのは、Macの場合、OSもハードもApple社がつくっている点である。Windowsの場合は、ハードはメーカーを自由に選ぶことができる。

私は、1999年にWeb制作の勉強を開始した。Mac環境(当時、Mac OS8.6)からスタートして、その後、プログラミングの独学のために、Windows機を買い、現在はMacに戻っている。本当は、他のUbuntuなどのOSでもよいのだが、フォントやAdobe製品が対応してないので、MacかWindowsのどちらかを選ぶことになる。

デスクトップかノートかの選択がある。断然ノートをおすすめしたい。家で作業するときは、外付けのモニター、キーボード、マウスにつなげておけば、デスクトップパソコンとして使えるからだ。勉強会、セミナー、打ち合わせのときは、ノートとして威力を発揮する。

メモリは8ギガはつんでおく。CPUやグラフィックボードはそれほどこだわる必要はない。Web制作はハイエンドのパソコンでなくてもかまわない。Adobeのソフトがストレスなく動くもので十分だ。

Adobe Creative Cloudの検討

独学でネックだったのが、Adobe製品の購入だった。数十万円のまとまった初期費用が必要だったから、なかなか購入に踏み切れない人がおおかった。2012年からはじまったAdobe Creative CloudはAdobeのほぼ全ソフトが使える月額払いの購読型サービスである。1年契約だけでなく、月単位で解約できる契約も可能だ。

入会して、Illustrator、Photoshop、Dreamweaver、Flash、Fireworksをダウンロードしておこう。執筆時点では、年間契約の場合で月5,000円の価格設定になっている。仕事先でWindowsにインストールして、家でMacにインストールすることも可能。同時に起動しなければOSをまたいで2台までインストールできる点はとても大きいメリットだ。仕事先と自宅の両方で仕事をしている人にはありがたい。

追記(2013年4月23日):
Adobe Creative Cloudのポリシーが変更されました( http://blogs.adobe.com/sho/?p=94 )。
2台まで同時使用が可能になったそうです。 また、バージョンもCS6を最も古いバージョンとして、どのバージョンにも、さかのぼって利用できるように変更されました。以前は、新しいバージョンがでると、古いバージョンは1年しか使えないポリシーでした。今後も、このあたりのポリシーは変更される可能性があるので、申し込む前に確認をお願いいたします。

フォント環境を整える

フォント(書体)は理想を追いかけるときりがないし、予算もきりがない。欧文書体はドイツのLinotype社の書体、和文は日本のモリサワ社が定番メーカーだ。

ただ、当面は予算をおさえたいので、とりいそぎ妥協案として、欧文フォントは、『TrueTypeフォントパーフェクトコレクション』を、和文は『FONT x FAN STANDARD』をかっておこう。両方揃えて、1万円弱である。


『TrueTypeフォントパーフェクトコレクション』は本屋で買えるロングセラーの格安書体集である。アメリカのBitstream社の書体がはいっており、Bitstream版のUniverse、Helvetica、Futura、Bodoni、GillSans、Frutigerなどのデザイン制作の定番書体が入手できる。

『FONT x FAN STANDARD』は「C4 ユニバーサルビュー」のような、モリサワの新ゴを意識したオーソドックスな書体がしっかり収録しているところがポイントが高い。

書体見本帳(欧文はLinotype社の『Typeface Catalog A - Z』、和文は『基本日本語活字集成 OpenType版』がおすすめ)と写植級数表(透明なシートで印刷物の文字の大きさを調べることができるシート、東急ハンズなどで購入できる)を揃えておく。

書体に予算がとれる人は、欧文は、Adobeの『Font Folio』、和文はモリサワの『MORISAWA PASSPORT ONE』をかっておく。



ステップ2 ドメインを取得しよう

つぎに、自分の屋号やブランド名を決めよう。独立を考えなくても、ドメイン名を考えて実際に取得しよう。旗をたてるためである。年間、1,000円〜ほどの維持費がかかる。
しっくりくるドメイン名を名付けるのはなかなか難しい。紙にたくさんネーミング案をだして、ネーミングを絞り込んでほしい。

ステップ3 Webサービスのアカウントをつくろう

ドメインが決まったら、とりいそぎ、Gmail、Twitter、Facebook、ソーシャルブックマークサイト、RSSリーダー、オンライン文書管理サービス、オンラインストレージサービス、写真共有サービスのアカウントをつくっておく。

Gmail、Twitter、Facebook以外のWebサービスは、競合が存在するため、実際に試してみて自分にあうサービスをつかってほしい。私はdelicious(ソーシャルブックマークサイト)、Netvibes(RSSリーダー)、Evernote(オンラインメモ保存、文書管理サービス)、Dropbox(オンラインストレージサービス)、Flickr(写真共有サービス)を使っている。

Web制作は細かい知識の積み重ねである。すべてを暗記しておくことはできない。が、あとで必要なときにさっと取り出せるようにしておく必要がある。そのため良いサイトを見つけたら、deliciousのようなソーシャルブックマークサイトに保存しておく、ほとんどのソーシャルブックマークサイトでは、タグをつけることができるので、いくつかキーワードとコメントをふっておこう。あとで検索できるようにしておく。他の人のブックマークもみることができるので、気になる人のブックマークをみつけ購読してほしい。

RSSリーダーは、気に入ったブログをみつけたら、RSSファイルのURLを登録しておこう。これで、訪問しなくてもブログの更新状況が把握できる。私の場合、ブログ、Twitter、deliciousもRSSで取得して情報収集をしている。

勉強していて、気がついたことはEvernoteノートにメモしておこう。Twitterはツイートしなくても情報収集、コミュニケーションツールとして有効で、私はリスト機能を多用している。

ステップ4 Illustrator、Photoshop、Fireworksの特徴を知ろう

Webデザイナーが習得するべきグラフィックソフトは、Illustrator、Photoshop、Fireworksである。それぞれ得意、不得意の特徴があるので、必要に応じて使い分けできるようにする必要がある。

ドローとラスター

グラフィックソフトはドロー系(ベクターデータ)とラスター系(ビットマップデータ)にわけることができる。

ドローは線画のようなイメージ、ラスターは格子上のピクセルの集まりのイメージだ。同じ三角形でも、ドローでは、点が3つ、間に直線というプロパティで管理されている。点、ハンドル(曲線をつくるときに使う)で線をつくり、図形を描画(レンダリング)する。データのリサイズが得意で、数値入力による配置や変形、線の太さ、色の変更が容易である。オブジェクトごとにそれらのプロパティが管理されている。切り絵のように、オブジェクトを重ねてグラフィックをつくってゆく。

ラスターは、四角形のピクセルを集めて、グラフィックをつくる。色を変更するにも、選択範囲をつくってあげて塗りつぶす必要がある。変形をかけ過ぎると画像が劣化する。

実際のところ、ほとんどのグラフィックソフトがドローとラスターのデータを扱える。ラスターの代表であるPhotoshopはバージョンがあがることに、ドロー(ベクターデータ)の機能がじょじょに増えてきている。ただ、Photoshopのメインはいまもラスターで、図形を描きたい場合は、ドロー系のIllustratorを使う。ドロップシャドウ(影付け)は、Illustratorでも可能だが、設定しやすさ、設定項目(パラメーター)の数はPhotoshopに遠くおよばない。

Fireworksは異色のツールで最初のバージョンからドローとラスターのバランス型である。PhotoshopとIllustratorは印刷にも対応しているが、Fireworksは印刷には対応せず、Webなどの画面デザインに特化したツールだ。

その他、複数ページに対応してるか、スライス(一枚の画像をパーツに切る作業)のやりやすさも、3つのソフトの重要な使い分けの目安になる。

以下の表でまとめておこう。

  Illustrator Photoshop Fireworks
ドロー(ベクターデータ)
ラスター(ビットマップデータ)
レイアウトのしやすさ
複数ページ管理 × [※1] × [※2]
印刷物の対応 ×
スライス

※1 複数アートボードとシンボルをつかえば、複数ページ管理はできなくはない。
※2 レイヤーカンプで複数ページ管理はできなくはない。

追記(2013年10月19日):
Illustrator、Photoshop、Fireworksの詳細な比較は、庄崎 大祐さんの『プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド』が詳しいです。この本は、Web制作用のPhotoshopの使い方を教えてくれる貴重な本です。




style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-7951568120364502"
data-ad-slot="9653147902">




style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-7951568120364502"
data-ad-slot="9653147902">




ステップ5 Illustratorを習得しよう

3大グラフィックソフトのうち最初に学ぶとよいのが、Illustratorである。最大の特徴のベジェ曲線はPhotoshop、Flash、Fireworksでも共通のツール。すべてのグラフィックソフトの基礎になる。

Illustratorは、ベジェ曲線、パス周りのコマンド(合体、分割、平均、連結)、アピアランスをおさえておこう。

本当にわかりやすい本を探している方向けなのは『Illustrator トレーニングブック』だ。何度も改定されているロングセラーの入門書。これ以上わかりやすく書くのは難しいくらいわかりやすい本。

ベジェ曲線だと『[新装改訂版]Illustratorで学ぶ 「ベジェ曲線」習熟ドリル』が決定版。白黒の地味な本だがしっかりした力がつく。

アピアランスだと『Illustratorジャパンメソッド』がアピアランスの専門の本。図形をつくりながらアピアランスの基本や応用を学ぶことができる。アピアランスの専門の本は世界的にも珍しい。




ステップ6 デザインの基礎を学ぼう

最初に読んでほしい本が、『レイアウト、基本の「き」』である。本書は、ノンデザイナー向けにかかれたデザインの入門書である。レイアウトだけでなく、文字組み、配色、写真の扱いなども解説されている。ラフスケッチの書き方、書体とのつきあい方の記述も勉強になる。著者はアジールデザインの佐藤直樹さん、エディトリアルデザインの分野では知らない人はいないほどの有名人である。あの佐藤さんがこのようなTIPS本をだすのは奇跡である。


入門書でおさえておきたいのは、『デザインの教室 手を動かして学ぶデザイントレーニング』である。基本書は『デザイン解体新書』である。



重点的に勉強してほしいのが、文字組みである。文字組みの知識はロゴ制作にもいきてくる。文字組みは、従来は本がなくて独学が難しい分野だった。近年、良書が増えて、独学できる環境ができてきた。文字組みの入門書としては、『タイポグラフィの基本ルール』『タイポグラフィ』を入り口としておすすめしたい。

ロゴ制作は『ロゴデザイン・ラブ!』が実践的な内容。



ステップ7 ロゴと名刺をつくろう

ここでいったんアウトプットをしておきたい。作例は、ロゴと名刺。ドメインを取得し、Illustrator、文字組みを早い段階で学んだ理由は、ロゴと名刺を早めにつくってほしかったからだ。

ツールはIllustratorを使う。ロゴは必ず紙にラフスケッチを描いてから、Illustratorで清書する。ラフスケッチを描くことで、Illustratorの機能に引っ張られるのを防ぐことができる。

名刺は、ロゴとURL入りの名刺をつくってほしい。URLは取得したドメインをいれる。もちろん、この時点で自分のホームページはないのだが、先行してURLをいれてほしい。Illustratorで"完全版下データ"をつくり、実際に印刷屋さんに入稿する。

同じデザインでも紙の種類や厚さによって、仕上がりが全然違う。リッチブラックのような印刷物独特の色の設定も学んでおきたい。

ステップ8 Web制作で使われる言語を知ろう

Web制作で使われる言語はたくさんある。フロントエンド(Webブラウザ側)とバックエンド(Webサーバー、データベースサーバー側)で大きくふたつに分類できる。

フロントエンド:HTML、CSS、JavaScript、ActionScript
バックエンド:Perl、PHP、Ruby、Java、JavaScript、Python、SQL等

フロントエンドで動く言語の特徴は、ユーザーのWebブラウザにダウンロードされて、解釈、実行されるという点だ。実際に、サイトのソースコードを読むことができる。HTML、CSS、JavaScriptの有効な勉強法は、他のサイトのコードを読むことである。フロントエンドの言語は種類は少ない。が、Webブラウザの実装に、解釈のばらつきがある(正確にはInternet Explorerだけが、標準化の取り組みが遅れた。)。フロントエンド開発で一番大変なのは、複数のWebブラウザでの表示、動作確認作業である。特に、クライアント側がまったく同じ表示を求める場合、調整作業が大変である。

例えば、JavaScriptを解釈するプログラム(実装系とよばれる)は、Webブラウザごとによって、プログラムが違う。実装度合いや実行スピードが違う。そのため、jQueryのようなWebブラウザの実装の差異を吸収してくれるライブラリをベースにしてコーディングすることが多い。

言語の選択肢が豊富なバックエンド

バックエンドで動く言語はサーバー側で動作するので、ユーザーからは全くコードを見ることはできない。サーバー側の言語で動的にHTMLをつくって、ユーザーのWebブラウザに送っているので、ユーザー側からは、HTMLが送られるだけで、何のサーバーサイドの言語を使っているのかはわからないことが多い(以前は、URLをみるとサーバーサイドで使っている言語がわかったが、いまは、フレームワークのコントローラー役のコードにパラメーターを渡す実装が多いため、URLをみてもわからないことが多い)。

バックエンドは、フロントエンドと違い、サーバーを選べるので、言語の選択肢が豊富である。ショッピングカートをつくる場合、Perl、PHP、Java、Rubyでもよい。近年はサーバー側で動くJavaScriptも登場した(正確には、サーバーサイドJavaScriptは昔、Netscape社が発表している。『実践JS サーバサイド JavaScript 入門』を参照)。

Webデザイナーが担当するのはフロントエンド

Webデザイナーが習得するべき言語は、HTML、CSS、JavaScriptである。Webページは三層構造になっていて、ユーザーはHTML、CSS、JavaScriptがかさなった状態をみている。

HTMLはWebページの土台で、データを意味付けしたものだ。データを"タグ"と呼ばれる記号で印(マーク)をつけていく。画像はimgというタグで表す。トップページのロゴ画像はimgタグをh1(大見出しを意味する)タグではさむ。ナビゲーションメニューはul(箇条書きリスト)タグではさんでいく。このタグでデータをはさみ、構造化する作業をマークアップとよぶ。

CSSは、HTMLに対して、レイアウトをしたり、色をつけたり、背景に画像をいれたりする言語である。スタイルシートとよばれる。CSS3という仕様では、画像の角丸、ドロップシャドウ、グラデーション、アニメーションもCSSで可能になった。デザインをするときも、このCSSの実装を見越してデザインをおこなえるかが鍵だ。

JavaScriptは、ふるまいを担当する。Webブラウザに読み込まれたHTMLを、ユーザーのマウス動作に反応して、動的に変更することができる。例えば、複数のニュース記事をCSSで重ねておいて、JavaScriptで動的にHTMLの表示の順番を切り替えることができる。よくトップページでみかける写真がスライドしてアニメーションするのも、JavaScriptの代表例である。

ステップ9 HTML、CSSを学ぼう

入門書は『HTML/XHTML&スタイルシートレッスンブック』が定番である。まったくのゼロから、ステップバイステップで手書きしてゆくわかりやすい構成。一通り、HTMLとCSSを学ぶことができる。

HTMLは、フォーム、table、相対パスあたりが難しくかんじるかもしれない。フォームはすべてinputタグの仕様であれば、もう少しわかりやすかったが、selectタグやtextareaタグという例外が存在するのでややこしい、tableタグは、基本の構造をかけるようにしておこう。入れ子のタグは外側からかいていく習慣をつける。

<table>
</table>
↓
<table>
<tr></tr>
</table>
↓
<table>
<tr>
<td></td>
</tr>
</table>

ここまでかいたら、列を決めて(をコピー)、行を決めて( ... をコピー)、さいごにtdの一部を見出し用のセルであるthに直し、データをいれる順番でつくるとよい。さくさくと手書きできるようにしておく。

当ブログでもゼロからHTML、CSSを学べる『制作環境の準備 - ゼロからはじめるHTML、CSS講座【Vol. 1】』という記事がありますので、参考にしてください。

ステップ10 洋書を読んでみよう

ここで英語に挑戦してみよう。『HTML and CSS: Design and Build Websites』を辞書をみながらで、読んでみてほしい。図版が多く、文章がすくない美しい本だ。しかも初心者向けでわかりやすい。コンピューター本は、内容や分野にもよるが、単語になれれば難しい英語はでてこない。

英語は話せる必要はないが、文書がある程度読めるようにトレーニングをしておこう。例えば、2007年にjQueryの勉強を始めたが、当時、和書はほとんどない状態でPackt Publishingの『Learning jQuery』というチュートリアル本を読んだ。Packt Publishingの本は英語がやさしい。iPhoneアプリやActionScript3.0も和書が翻訳されるまでは、洋書で勉強してきた。

英語のWebサービスも積極的に利用していこう。英語は勉強というより、慣れること、これにつきる。


ステップ11 Photoshopを習得しよう

PhotoshopはWebデザイナーのメインツールである。
写真の加工や色調補正、UIパーツ、バナー制作などをおこなう。カンプ制作もPhotoshopでつくる人が多い。カンプとは、一枚絵の完成イメージ。ブラシをつかって、絵を描くかんじで、細かいつくりこみができるのが特徴だ。

Photoshopの習得ポイントは、色調補正(とくにレベル補正、トーンカーブ)、画像の切り抜きと合成(アルファチャンネルの理解)、UIパーツの作成だ。

追記(2013年10月30日):
Photoshopを使ったカンプ制作やスライスのノウハウは『プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド』をおすすめします。

ステップ12 Fireworksを習得しよう

Fireworksはスクリーン画面のデザインに特化したソフトで、ドロー系とラスター系のバランス型である。よくいわれるのが、IllustratorとPhotoshopを足して2で割ったソフトとよばれる。実際は、IllustratorとPhotoshopとは使い勝手も違うし、独自の機能が多い。Fireworksの習得ポイントはページ、シンボル、スライスだろう。スライスは一枚のカンプを、パーツごとにばらす作業である。スライスはいまでこそ、IllustratorとPhotoshopにも搭載されているが、もともとはFireworksが元祖である。

本は『Fireworks CS5/4/3』がダントツにおすすめである。Fireworksでワイヤーフレームを描いてから、カンプ作成をしてゆく流れが解説されている。著者の山口有由希さんはFireworksマニアという有名サイトで知られる人だ。FireworksCS6では、山口さんがつくった素材データがプリインストールされている。


追記(2013年10月30日):

2013年5月6日にAdobe社がFireworksはCS6以降のバージョンの開発がされないことが発表しました。そのため、このステップ12はとばしてよいかと思われます。


ステップ13 レンタルサーバーを借りよう

レンタルサーバーは、専用サーバー、共用サーバー、VPSサーバーのどれかを選ぶ。コストが安いのは、共用サーバーで月数百円くらいから借りられる。PHPとMySQLが動くプランを選ぼう。筆者は「さくらサーバー」のスタンダードプランを10年以上つかっている。

VPSサーバーは低価格で専用サーバーのような自由度の高い使い方ができる。自分でコマンドをたたいて、Webサーバー、PHP、MySQLのインストールが必要。

ステップ14 簡単なポートフォリオサイトをつくろう

1ページ完結でよいので、自分のプロフィール、作品、連絡先がみれるポートフォリオサイトをデザインしてみよう。
自分の好きなテイストでデザインしよう。作品は、Webページだけでなく、名刺やポストカードなど、なんども自分をアピールできるものはのせておく。手書きの作品はスキャンしてのせよう。

ステップ15 WordPressで、オリジナルデザインのブログ作りに挑戦しよう

『WordPress レッスンブック』というチュートリアル本にそって、オリジナルデザインのブログに挑戦してほしい。ポートフォリオサイト、Twitter、Facebookからリンクをはっておく。

WordPressはPHPとMySQLをつかうが、ブログ形式のオリジナルデザインのレベルだと、PHPとMySQLの知識はなくても大丈夫だ。CMSレベルの実装になると、PHPの基本が必要になってくる。例えば、『本格ビジネスサイトを作りながら学ぶ WordPressの教科書』は通常のコーポレートサイトをWordPressで実装してゆく内容の濃い一冊。この本は、PHPの基礎レベルの勉強が必要だ。


ステップ16 Dreamweaverを習得しよう

Dreamweaverは必須のツールではないが、使いこなせるとコーディングをする時間が短縮できる。CSS、リンク、画像の挿入、JavaScriptファイルの読み込み、tableなどは威力を発揮する。サイト内全体を検索/置換したり、リンクを張り替えてくれるサイト管理機能は強力だ。私はDreamweaverのタグセレクタ機能を多用している。7割くらいは、Dreamweaverで手書きしないで、コーディングしている。

『Dreamweaver+HTML5&CSS3レッスンブック』が丁寧な構成でわかりやすい。

ステップ17 JavaScript/jQueryを学ぼう

JavaScriptは、WebブラウザによみこまれたHTMLを動的に変更することができる言語である。たとえば、隠れたところから表示されるメニューやタブによるコンテンツの切り替え、スライドして表示される写真などである。実装では、ブラウザの差異を吸収するために、jQueryをつかう。jQueryはJavaScriptでつくられたライブラリである。
たんにサンプルをコピペするレベルではなく、jQueryのコードをカスタマイズできるようにしておきたい。

一冊目は『Webデザイナーのための jQuery入門』がわかりやすく、自分で書けるレベルを想定してかかれた応用のきく良書である。


JavaScript/jQueryの勉強法の詳細はWebデザイナーのためのJavaScript、jQueryの勉強法を参考にしてほしい。

ステップ18 ユーザービリティの古典を読んでみよう

『誰のためのデザイン?―認知科学者のデザイン原論』は必読書だ。原書は『The Psychology Of Everyday Things』である。

たんなる使いやすさの考察を内容をこえた、UXの原点ともいえるべき豊かな本である。分厚いが、見逃さないでほしい一冊だ。


ステップ19 小規模なホームページをつくろう

いよいよファイナルステップである。架空のカフェ、ワインバーなどを題材にして、小規模(最大で5ページくらい)のホームページをつくってみよう。
一人で、ディレクター、コピーライター、デザイナー、コーダーの役をマルチにこなすことになる。

ワイヤーフレーム、デザインの段階では、『ツー・ダブリュー・ジー』『Japan Web Design Gallery 日本のWebデザインギャラリー』というギャラリーサイトをおすすめしたい。海外サイトを中心に良質のWebサイトを紹介している。

サイト設計
サイトのゴール、対象ユーザーを決める。
文言(コピー)の作成
ページごとの文言(コピー)をかいてゆく。見出し、リード、本文。
ワイヤーフレームの作成
装飾なしの線画かグレーの長方形で画面の構成図をかいてゆく。ワイヤーフレームのサンプルはネットで検索するといろいろでてくるので、参考にしてほしい。手描きでもいい。
カンプの作成
ロゴ、アイコンはIllustrator、バナーやUIパーツはPhotoshopかFireworksが作りやすい。最終的に、Fireworks上でレイアウトをしていく。Fireworksはマスターページ機能があるので、ヘッダー、フッターなどのマスターページにいれておくと、ページごとにコピーする必要がない。
コーディング
カンプをスライスしよう。HTML、CSSをおこなう。スライスはFireworksを使う。Dreamweaverで7割、手書き3割くらいの比率でコーディングしてゆこう。
テストサーバーにアップロード
様々な環境で表示確認をおこなう。サーバーにアップして、はじめてミスに気がつくことも多い。

ピックアップ

↑このページの上に戻る