前にも『独学でWebデザイナーになるのにまずやること』というエントリーをかいたが、簡易的な内容だった。

今回も大筋の考え方はかわらない。Webデザイナーになるには、たくさん作品を作って人にみてもらうことである。

今回はもっと踏み込んで、全くの未経験の人がどうすればWebデザイナーになれるのかの具体的なステップ（行動プラン）をまとめてみたい。すでに学校やスクールでWebを学んでいる人や会社でデザイン部門をあらたに設立したい人にも役に立つだろう。

ステップ１ 制作環境をつくる

まず最初にやることは制作環境を揃えることである。以前だと、FAXとスキャナーは必須だったが、いまは必須ではない。以前は、写真は大きめのポジフィルムでうけとることが多かったし、修正の依頼もFAXが主流だった。

• 机と椅子
• パソコン本体
• モニター

パソコンの選び方

パソコン本体はWindowsでもMacでもOKであるが、Macのほうが書体環境が最初から充実しているので、Macをおすすめする。パソコン本体はノートにしておくと便利である。Web制作の場合、あまり高いスペックのものはいらない。私はPowerBookProの一番安いモデルを使用しているが、映像編集や３Dをやらないのなら十分なスペックである。

モニターはパソコン本体と違い、長く使える。かならず、良いメーカーのを選んでほしい。ナナオ社かApple社がよいだろう。予算は10万程度はみてほしい。パソコン本体は長くても３年ほどで、切り替えるので、iMacのような本体とモニターの一体型はおすすめしない。

椅子は制作者にとって致命的に重要

椅子はここだけは無理をしても贅沢してほしい。少なくとも予算は５万円以上で検討しておきたい。おすすめは、Herman Miller社のアーロンチェアだが、予算が14万くらいかかってしまう。椅子は制作するうえでもっとも重要なツールである。デザインの作業は地味だし、長時間作業である。長く作業しても腰、背中、首が痛くならない良い椅子を選ぶことである。

---

ステップ２ 屋号（ユニット名）のドメインを先にとっておく

制作環境を揃えたら、つぎにやっておきたいのが屋号を決めである。独立を考えていない人でも、なにかユニット名を考える。迷ったら、ファッションブランドの"Paul Smith"のように自分の名前をフルネームで屋号にしてもよい。Webエンジニアの五十嵐学さんの会社名は株式会社マナブ・イガラシである。下手に"なんとかデザイン"という屋号より全然よい。

ドメインの予算は、年ごとに維持費がかかる。種類にもよるが年間1,000円くらいからである。またドメインは取得してから期間がたつほど検索で上位にいきやすい。名前が決まったら、早めにとっておくこと。

---

ステップ３ HTML、CSSコーディング

最初にやる勉強は、HTMLとCSSのコーディングである。HTMLとCSSという言語ができれば、最低限のWebサイトは構築できる。HTMLはページの構成を担当する。見出しやリストなどの"タグ"と呼ばれる記号をデータに埋め込んでゆく。CSSは見栄えやレイアウトを担当する。必要なツールは、以下の通りである。すべてフリーで揃う。

• テキストエディタ
• Firefox（Firebugというプラグインを別途インストールしておく）

テキストエディタは当面、フリーのもので十分である。Windowsなら、サクラエディタ、Macだと、mi、CotEditorあたりが定番である。本は手順形式、つまりチュートリアル形式の本（『HTML/XHTML&スタイルシートレッスンブック』が丁寧な構成でわかりやすい）を買って、コーディングしてゆく。Dreamweaverを使いたい人は、"コードビュー"にして手入力する。

コーディングのデバックはFirebugをつかう

HTMLとCSSを勉強してゆくと、必ず遭遇するのがCSSが適用されない、レイアウトが崩れるというバグである。このバグを直すデバック作業はFirefoxのプラグインであるFirebugを使う。FirefoxもFirebugもフリーである。

具体的には、不具合のHTMLファイルをFirefoxで開き、Firebugを起動する。"HTML"タブをおすと、左側にDOMツリーが表示される。これはWebブラウザーがHTMLをメモリ上に読み込んだものである。このツリー構造を確認して、HTMLの構造がまちがっていないかを確認しよう。

つぎに、DOMツリーのタグ部分をクリックする。そうすると、そのタグに適用されているCSSが右側に表示される。これを検証することで、どこまでCSSが読み込まれているかが、確認できる。Firebugの詳しい使い方は本でまとまっているのはあまりみないので、ネットで検索するとよい（http://h2ham.seesaa.net/article/154387441.htmlなどを参考）。

FirebugはWeb制作の必須ツールで、HTML、CSSのデバックだけでなく、JavaScriptのデバック作業でも欠かせない重要ツールである。

---

ステップ４ 簡単なサイトをつくって、サーバーにアップロードをしよう

HTMLとCSSを覚えたら、なにか簡単なサイトをつくってみよう。自分のユニットの自己紹介サイトでも良い。数ページの簡単な構成でよい。デザインはまだ出来ないので、グラフィックパーツは素材集をつかってもよい。

このサイトを実際に、サーバーに転送して公開してみよう。サーバーは共用サーバーをレンタルしてほしい。このあとのステップでWordPressをインストールするので、WordPressが動くサーバーを選んでほしい。また、サポートページは充実しているレンタルサーバー会社を選ぶことがポイントである。

サーバーへの転送はFTPソフトをつかう。WindowsだとFFFTP、MacだとFetchあたりがおすすめである。FFFTPは無料、Fetchは3,000円程度かかる。暗号処理されて転送されるFTPS接続に対応しているソフトを選んで欲しい（FFFTPは、1.98c以降のバージョンをダウンロードしてほしい。FTPSに対応になった。）。具体的なFTPソフトの使い方や設定方法は、サーバー会社のサポートページをみてほしい。

ステップ5 WordPressに挑戦

今回のステップの最初の難所がここだとおもう。難しければ、次のステップに進んでもよいが、失敗してもよいので、是非挑戦してほしい。『WordPress レッスンブック 3.x対応』というチュートリアル形式の良書があるので、実際にサーバーにインストールして、管理画面からHTMLとCSSのコーディングをしてほしい。WordPressはHTMLの中に、指定されたPHPのコードを断片的にいれてゆくが、PHPの知識は当面必要ない。もしPHPの勉強したい人は『WebデザイナーやノンプログラマーにおすすめしたいPHPの勉強法』というエントリーを参考にしてほしい。

WordPressに挑戦することで、いわゆる動的サイト（データベースからデータをひっぱってきて、動的にHTMLをつくるサイト）の構築のコーディングを経験することになる。一方、ステップ４でつくったサイトを静的サイトとよぶ。

ここまでコーディング経験を積むと、ある程度、HTML、CSSを手書きで書けるようになっているとおもう。

ステップ６ Illustrator、Photoshop、フォントを購入

ここで、ようやくデザイン編にはいる。まず、ソフトと書体の購入をしておく。

• Adobe Illustrator
• Adobe Photoshop
• フォント（書体）

Illustrator、Photoshopはすぐに揃える

Illustrator、Photoshopはどうしても避けられない。同じようなフリーソフトで代用する方法もあるが、仕事としてWebデザイナーになる方にはおすすめしない。どちらもそれぞれ単品で8万ほどかかる。両方で16万。予算があれば、DreamweaverとFlashとセットになっているものを選んでもよい。

フォント（書体）はけちらない

フォントはWindowsの場合だと、実質、初期状態では使える書体はない。

欧文書体と和文書体のそれぞれの主要書体、定番書体を揃える必要がある。メーカーは欧文はドイツのLinotype社の書体、和文は日本のモリサワ社が中心になる。

Linotype社の書体はパックで買うと30万から50万程度の予算（AdobeからでているFont Folioを買うとLinotype社の主要書体が入手できる）、モリサワは、MORISAWA PASSPORTというリースシステムを利用するとよいだろう。

欧文書体で予算がどうしてもかけられない場合は、アメリカのBitstream社の書体がある。Bitstream社版のHelvetica、Universe、Frutiger、Bodoni、Futuraなどの定番書体が入っている安いパックがインプレス社からでている（『TrueTypeフォントパーフェクトコレクション』）。これだと3,000円ほどの予算で済む。ちなみに、Bitstream社はLinotype社の元社員がつくったメーカーである。

Macの場合だと、OS標準で最初からLinotype社の書体が多くはっているので、Futura、Frutiger、Universeなどの定番書体でMacに入っていない書体を買い足すとよい（ちなみに昔のOS9の頃のMacはFutura、Frutiger、Universeは全部はいっていた）。Linotypeのサイトからダウンロード購入が可能である。先ほどの、Bitstream社の書体と併用してもよいだろう。

和文書体で安く揃える場合は、ポータル・アンド・クリエイティブ社の「FONT x FAN HYBRID」というパックをおすすめしたい。基本書体が充実しており、モリサワの「新ゴ」に近い「C4 ユニバーサルライン」という書体が収録されている。新ゴをさらにモダンにした書体で、この書体だけでも、買う価値がある。

---

ステップ７ Illustratorの習得 CS5以降は要注意！

Illustratorに関してはCS5以降は、Web制作では重要な位置になりそうである。Web制作ではカンプ（一枚の完成イメージのデザイン）やUIデザイン（ユーザーインターフェイス、すなわち画面デザイン）をPhotoshopでつくることが多い。

Illustratorの役割は、Photoshopではつくれないようなロゴやパーツをつくって、Photoshopへペーストするような使い方が多かった。これはIllustratorで線を描くと、Web用の画像に書き出しをするときに、線がつぶれてしまい（アンチエイリアスが汚い）品質が落ちるという問題があったからだ。

ところが、CS5でこの線がつぶれる問題がようやく解消された。なので、IllustratorCS5以降であれば、Illustratorでカンプをつくりこんでいく方法も有効である。アイコンをつくるときも、Illustratorベースでつくっていく方法が可能になった。Illustratorはベクターデータ（点、線、塗りをプログラム的に定義して図形をを描画する形式）なので、拡大縮小が自由である。同一デザインでいろいろなサイズや色のバリエーションのアイコンも手早くつくることが可能だ。

『スマートフォンアプリのためのUI&グラフィックデザイン』という本を本屋でみたら、Illustratorベースでのアイコンの作り方の本なので、本当に驚いた。すごい本だわ。またWebのカンプ制作のワークフローがかわった。CS5以降から、Webデザインのカンプの作り方を大きく見直す必要があるだろう。個人的にはこのIllustratorベースでつくれる流れはうれしい。

Illustratorはなんといっても、ペンツール（ベジェ曲線）をしっかり使えるようにしておくのがポイントだ。ベジェ曲線だけにしぼった本がおすすめである（『Illustrator ベジェ曲線 [トレーニングブック] 』）。

ステップ８ Photoshopの習得 基礎スキルをしっかりおさえる

• 色調補正（特に、レベル補正、トーンカーブ）
• 複雑な画像の切り抜き、合成（アルファチャンネル、パス、クイックマスク、抽出などを組み合わせて切り抜きしにくい写真を切り抜く）
• UIデザイン、カンプ制作（PhotoshopでWebの画面デザインをつくってゆく）

なんといっても、色調補正の基本コマンド、画像の切り抜きはしっかりマスターしてほしい。UIデザイン、カンプ制作は海外のチュートリアルサイトで多くの記事を参照できる。本はみたことない。

関連記事：「Photoshopは、まずはこの３つのポイントをおさえなさい。Webデザイナー、WebクリエイターのためのPhotoshopのおススメ書籍」も参考に。

ステップ9 グラフィックデザインの基礎を学ぼう

デザインはセンスだと思っている人が多い。この誤解は根強い。しっかりと基礎技術がある。

必読書は『デザイン解体新書』である。ウェブデザインの本でなく、エディトリアルデザインの理論書であるが、文字組やレイアウトの基礎がぎっしり詰まっている。この本は、休刊になってしまった雑誌、DTPWORLDの連載を本にしたもの。この連載を読むために、私はこの雑誌を買っていた。

タイポグラフィ専門書では、『タイポグラフィの基本ルール』が入門書として、わかりやすくよくまとまっている。

デザインルールを「意識的」に活用することでデザイン力を高めることができる。『デザインのルール、レイアウトのセオリー。』はルールが明快で作例の品質が高い。この本で説明されているグリッドシステム、ホワイトスペース、始点・中間点・終点、導線の設計、見えるラインと見えないラインなど、どれも基礎ともいえる内容である。

ルールを学んだら、普段から、パッケージ、雑誌、Webデザインを観察して分析してみよう。そういった日常のデザインを写真にとったり、収集したりして何度も見返したり、自分なりに再現してみせるとよいだろう。

デザインの良書は「デザイン力をつけるデザインルールの良本。ベスト8。」にもまとめたので、参考にしてほしい。

ステップ10 Webの画面デザイン→スライス→コーディングをやってみよう

このあたりで総まとめ（アウトプット）をおこなう。

まず、IllustratorとPhotoshopでトップページのデザイン案をつくってみよう。CS5以降なら、Illustratorベースでつくっていき、途中でPhotoshopに書き出して仕上げる方法もありだし、最後までIllustratorで作りこんでゆく方法もいいだろう。CS4まではアンチアエイリアスの処理の問題で、最初からPhotoshopベースでデザインをしていく人が多い。

デザインをおこしたら、スライス、コーディングという流れをおっていく。このあたりのワークフローも最初にコーディングをして、あとからデザインパーツをいれていく、コンテンツ先行の作り方もある。

この段階まできてようやくWEbデザイナーへの入り口にたったという段階だ。巧くても下手でも、作品を公開できるレベルには達したわけである。あとは数多く、作品をつくって公開してみてもらう、を繰り返しゆく。足りないスキルは、毎年意識して増やして守備範囲を広げていく。

記事更新日：2012年1月26日（FTPの情報を修正）
記事作成日：2011年8月11日