DESIGNMAP

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

記事公開日:2012年07月23日

雑記

2012年7月16日にアップした『19のステップで、まったくのゼロから、独学でWebデザイナーになる方法』は、昨年の同趣旨の記事を大きく上回る、おおきな反響をいただいた。

記事ではあまり感情や思い入れをいれずに、19のステップをたんたんと簡潔に書いた。
でも、実際は、ステップそれぞれの項目に思い入れがある。いろいろな挫折を経て、あの記事が生まれている。

今回は、勉強の挫折の話もしながら、あとがきをかかせてほしい。

早めにドメインをとる理由

「ステップ2 ドメインを取得しよう」は、昨年の記事と同様、2番目にもってきた。これは意味がある。

はやめにドメインをとり、Webサービスでも同名のアカウントをおさえる。
つぎに、自分のロゴマークをつくり、URL入りの名刺をつくるというカリキュラムを導入している。

実際に、URLを明記した名刺をつくり、周りの人に配ってほしい。どこで出会いのチャンスがあるかわからないから、名刺は普段も持ち歩こう。名刺で、URLを宣言することで、自分のサイトをつくろというモチベーションがちがってくるのではないだろうか。
単に、自分のサイトをもとうと決意しても、締め切りのある仕事とは違い、自主作品はなかなか作れないものだ。
日常に流されて、時間だけが過ぎてしまう。

名刺を刷ってしまうことで、強引に前進させてしまおう。そんな意図がある。

悪戦苦闘したJavaScriptの勉強、3冊も買ったサイ本

「ステップ17 JavaScript/jQueryを学ぼう」は一番、思い入れがある。JavaScriptは習得に一番苦労した分野だ。

JavaScriptを本格的に勉強しようと思ったのは、2001年頃だった。
きっかけは、Web制作の専門誌、WebDesigningの足立裕司さん(9031.comというサイトで知られるWebデザイナー)の『Web SPICES』というJavaScriptの記事だった。この連載は2001年の創刊号からスタート。足立さんのコードは読みやすく、興奮した。毎月、WebDesigningが発売されると、まっさきにこの連載を読んだ。

いま、jQueryでやっているようなUIを、既に足立さんはとっくに、この連載と9031.comでやってしまっていた。また、特筆すべきは当時は、FlashのActionScriptが登場した時期である。足立さんの連載は時代への逆張りだった。

当時から、JavaScriptの本は表面的なサンプル本が多かった。言語として本格的に解説している本は一冊しかなかった。それがDavid Flanaganの『JavaScript 第3版』(通称、サイ本)である。
5,000円近くするこの本を買って、習得に意気込んだが、あまりの難しさに全く歯が立たなかった。ショックだった。

2005年、Ajaxの時代がきて、JavaScriptが再発見される。
Ajaxの関連本を読みあさった。サイ本の改訂版(第5版)がでた。Amazon.comで原書をとりよせ、再入門。英語も難しくやはり挫折。

2007年、ようやく第5版の翻訳版が登場する。前よりは、読めるようにはなったが、まだまだコードが読めない。

結局、私はこうしてサイ本を3冊も買ってしまった。

理解のブレイクスルーになったのは、2011年にでた『JavaScriptパターン』『パーフェクトJavaScript』という名著の登場だった。この2冊が救ってくれた。
プロトタイプ継承、カリー化、apply/callのコードがクリアーに読めるようになった。長い道のりだった。

Fireworksについて

Illustrator、Photoshop、Fireworksを使い分けよう、とさらりと書いた。
実際のところ、3つとも頭の使い方が違う。自然に使い分けできるのは簡単ではない。

どうしても、手慣れたツールで頑張ってしまい、それが使い分けをさまたげる。
カンプ制作はWeb制作の現場ではPhotoshopで頑張っている人が多い。
Photoshopで何ページもカンプをつくるのは、実際に、骨が折れる。Photoshopは一枚絵の作り込みには強いが、複数ページのデザインの修正には弱い。

ページ、ステート、スタイル、シンボルをもつFireworksを使うと、カンプ制作の効率がよくなる。
それでも慣れているPhotoshopでつい、つくってしまう。ワークフローが改善されない。

私自身、仕事でFireworksを使っていたのは、2000年、バージョン4の頃である。Illustrator、PhotoshopにWeb用保存が搭載されるようになった以降は、Illustrator、Photoshop中心のワークフローになっていた。

今年(2012年)、Fireworksマニアというサイトで知られる山口有由希さんのFireworks本を、手を動かしながら読んで、衝撃をうけた。細かい部分で、Fireworksは進化していた。

なにより、この本で山口さんのFireworksに対する愛情にも感動した。同時に、勉強不足を痛感した。

久しぶりに触って、細かいバグに遭遇する。
FireworksのMacromedia社(後に、Adobe社に買収されるソフトウェア会社、通称エムエムと呼ばれた)独特の荒削り感をおもいだした。いまだにAdobe社のツールのような感じがしない。Fireworksは、Macromediaの匂いがいまも色濃く残る。私にはなつかしい匂いだ。

山口さんの本をやってみて、パーツ作成やページ管理には納得したものの、ワイヤーフレームに関しては、ベースはIllustratorでつくってしまって、Fireworksに持ち込んだほうがよいのでは、という印象をうけた。どうしても、Illustrator、Photoshopという手慣れたツールに頼ってしまう。これが、私のFireworks上達の妨げになってしまっている。あるツールに慣れてしまった人ほど、ワークフローの改善は容易ではない。

自分でデザインプロジェクトをつくろう

19のステップで、アウトプットは3回でてくる。
ロゴ入り名刺、ポートフォリオサイト、 小規模なホームページ制作である。

できれば、もっともっとアウトプットの機会を増やしたい。

Illustratorを習得したら、是非やってほしいのが、観光マップ(もしくはタウンマップなど)制作である。
例えば、鎌倉の観光マップをA3一枚でつくるのをやってみよう。実際に、印刷して、カフェなどをまわって置かせてもらうとよいだろう。ここまでくると、立派なデザインプロジェクトである。お店を回るときは、ステップ7で作った自分の名刺を忘れずに。話がはずんで、お店のホームページ制作を頼まれるかもしれない。

独学で注意したいのは、アウトプットをつい先延ばしにしてしまうことだ。勉強した本の作例の真似やアレンジでもよいので、インプットしたら、手を動かしてアウトプットをしてほしい。インプットだけだと、時間を消費しているだけになってしまう。

小規模なサイトを最初から最後までつくる

Web制作の上達のコツは、小規模なサイトを最初から最後まで、つくってみることにつきる。
もしくは、個人サイトを何度も作り直すことだ。

ワイヤーフレーム→デザイン→コーディング→WordPress

自信作ができれば、作品をサイトのポートフォリオに追加して、公開する。そして、Twitterをつかって、声をかけ作品をみんなにみてもらう。

ある程度、作品がたまったところで、実際に就職活動をして、勝負しよう。気になる会社があれば、Twitterで制作会社の人事担当者に連絡をとってみてもよい。
制作会社のプロデューサー、ディレクター、人事の人などいまや、Twitterのアカウントをオープンに公表している人が多い。
理想は、ブログやTwitterを通して、自分の存在をしってもらうことだ。担当者から、声がかかれば就職活動はスムーズだろう。

独学のヒントとして使ってほしい

最後に書きたいのは、19のステップをあくまで独学のささやかなヒントにしてほしいという思いだ。反面教師としても使ってもらってもかまわない。

↑このページの上に戻る