雑記

高学歴文系＆職歴なし＆30歳でWebクリエイターになる方法(自習編)

高橋文樹

2009 年 1 月 23 日
読了15分（11,494文字）
Tips 日常生活

この投稿は 15年半前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

さて、前回のエントリーで意図せずしてホッテントリ化してしまい、コメント欄で見苦しい論争なども交わしましたが、具体的に高学歴文系＆職歴なし＆30歳のあなたがWebクリエイターとして働くための方法をお教えします。

就職活動～就職後は次回に書くので、今回はとりあえず勉強法だけ教えます。これは就職に成功・失敗したの何如に関わらず続けてください。

原則

まず、Webクリエイターになるにあたってとっても困ることがあります。それは、何から手をつけていいのかよくわからないということです。

ある意味で、あなたは自由です。なにをやってもいいのです。が、自由が一番苦しいというのもまた真実ですよね。

なので、ここでは基本的な原則を提示しますので、家畜のようにそれに従ってください。

まずは準備。

パソコンを買う or パソコンを持ってる友達を見つける
なにはともあれ、パソコンがないと話になりません。低スペックでもかまいませんが、メモリを1Gぐらいは欲しいところです。OSはなんでもいいんですが、WinXPがオススメです。開発環境を整えるのが容易だからです。クリエイターだからMacと行きたいところですが、OSXはLINUXライクで難しいところもあるので、就職してから買いましょう。ノートパソコンがオススメです。
図書館を探す
これは高学歴であるあなたにとって今さら言うまでもないことですが、勉強には書籍代がかかります。図書館はタダで本を読めますが、Webの総論的な本ex.インターネット時代におけるうんたらかんたらではない専門技術書はなかったりします。特に小さな図書館だと、「恋空」だけ10冊あるという噴飯モノの蔵書体制だったりするので、大きな図書館を見つけておきましょう。高学歴だが極度のKYであるあなたには、ビジネス書を読む必要もあります。
インターネットプロバイダと契約する
当たり前のことですが、ネットにつながらなくては困ります。一番安いとこにしましょう。光でなくともかまいません。ADSLだとクソ安いところがあります。E-MOBILEなんかでもいいでしょう。電気屋で相談してください。最近は契約するとパソコンも安くなったりするので、計算してみてください。サンクコストは低い方がいいでしょう。
オークションサイトやSNS・コミュニティサイトなどを使えるようにする
オークションは図書館にない本を安く買うためです。僕はオライリー本を買うときにヤフオクをまず見ます。なぜか新品でたくさん出品している人がいるからです。また、SNS・コミュニティサイトなどは質問をするときに使います。プライドの高いあなたは本名で登録しない方がいいでしょう。たまにののしられることがあるからです。
レンタルサーバを借りる
レンタルサーバを借りると、あなたは自分のWebサイトを公開できます。実は借りなくても公開できるのですが、いきなりはじめからやるのは大変なので、とりあえず借りてください。Xreaなら無料で借りられますし、有料版でもわずか200円です。あと、フォーラムに奇妙な熱気がある点もプラスですし、定期的に起きる障害はあなたを成長させる糧となるでしょう。

さて、これで準備は完了です。これから書名や参考サイトを挙げていきますが、実際に書名として挙がっているものは絶対にやってください。大丈夫、どんなに難しくてもあなたにはできます。なぜなら、あなたは勉強が得意だからです。

また、わからないことがあったらググってください。ググっても見つからなかったら、上手なググり方を探してください。大丈夫、あなたにはできます。僕は大学生のとき、どうしても受容理論のことが知りたくてガーダマーの本を探し回り、三日後に見つけられました。今はWebというスーパー便利なものが普及しています。「調べれば大体のことはわかる」と村上春樹も言ってました。ググレカスということです。

STEP1：Webのホエーを食え

さて、STEP1であなたがやるべきことは、Webとは何かについて知ることです。そのためには、普段あなたがWebサイトを見るときに目にしているものを実際に作りましょう。

なお、このSTEPは高速でこなしてください。概要だからです。普通にやったら2週間、長くても1ヶ月です。あなたは高学歴文系なので、センター試験の前の一ヶ月だけで理科系科目を勉強し、80点以上を取ったと思います。そのノリです。

ちなみに、ホエーとはヨーグルトの上澄み液のことで、大変栄養があります。

なにはさておきHTML＋CSS

さて、まずはこの二つを勉強してください。これは基本のキです。本はなんでもいいです。ツールは普通のテキストエディタでいいです。秀丸が有名ですが、あなたは100%お金を払いたくないと思っていることでしょう。Terapadはお金を請求しないため、オススメです。

[429] [429] Client error: `POST https://webservices.amazon.co.jp/paapi5/getitems` resulted in a `429 Too Many Requests` response: {"__type":"com.amazon.paapi5#TooManyRequestsException","Errors":[{"Code":"TooManyRequests","Message":"The request was de (truncated...)

この本の評価がいいかどうかは知りません。いくらなんでも、それなりにできるような構成にしてあるでしょう。JUST DO IT。書いてある通りにやればできます。コンテンツがないという場合は、青空文庫からダミーテキストを引っ張ってきて、プチ芥川龍之介全集でも作ってください。これは三日で終わらせてください。固定幅・２～３カラムのレイアウトとレガシーなテーブル・レイアウトができればとりあえずオッケーです。

さて、これであなたはわずか三日でHTMLとCSSを使えるようになりました。ひとまずマークアップ・エンジニアの入り口に立ったとしておきましょう。

グラフィックもやらなきゃね

さて、あなたはWeb上にファイルを表示することができました。が、物足りなく感じるはずです。それは、グラフィック要素がないからです。

ここであなたはグラフィックソフトの使い方を覚えなくてはいけません。しかし、二大グラフィックソフトであるPhotoshopとIllustratorはとても高いので、あなたは買えないはずです。なぜなら、職歴がないからです。Gimpという無料ツールもあるのですが、普通の職場ではフォトショかイラレを使うので、ここではそれを勉強しましょう。

まずは、Adobeのサイトで体験版をダウンロードしましょう。期間は一ヶ月ですが、フォトショ＋イラレで５日で覚えてください。

さて、あなたに絵心がある・ないに関わらず、このステップではこの二つのツールの使用法を覚えるだけでかまいません。クオリティに関してはすぐに上がらないので、じっくり構えましょう。文字にベベルをかけただけだったり、配色が全体的にくすんでいたり、そういう「グラフィック・デザイン」の部分に関しては今後にまかせましょう。

なぜかというと、おそらくあなたが「Web業界限定のグラフィック・デザイナー」としてピンでやっていくのは難しいからです。

僕の私見ですが、Webデザイナーはまだ職域が曖昧なままである一方、グラフィック・デザイナーは結構固まっています。優れたグラフィック・デザイナーの仕事は印刷・テレビ・Webなど、業界を問わず広がっていきますが、それは裏を返せば「高度に分業化・洗練されている」ということです。

Amazonで「Webデザイン」と検索すると、なぜかHTMLやCSSのことばかりが書いてある本がヒットするというように、Web業界におけるWebデザインとは工業デザインに似たところがあります。これがあなたにとって有利に働きます。

くれぐれも、ボタンのクオリティで勝負しないように。そんなことをしたら、二年間専門学校で学んだ20歳に負けてしまいます。あなたの作るボタンは凸凹しており、彼らの作るボタンはシャイニーでつるつるしてるんですから。

さて、閑話休題。あなたはこれでツールとしてのフォトショ＋イラレをマスターしました。ビットマップやベクターデータ、スライス、72ppiなどを理解したことでしょう。これでとりあえず、ヘッダーのアイキャッチ画像などが作れるようになりました。たとえ、自分がいまそのアイキャッチ画像にアイをキャッチされなかったとしても、気にする必要はありません。まだ1週間とちょっとしか経ってないんですから。

Javascriptでもやっとけ

あるコンテンツをWebに表示することができるようになったとして、今度はそれを動的に処理したくなります。あと、CSSのプロパティをいじりたくなるでしょう。

そこで登場するのがJavascriptです。とりあえず、OpenspaceのJavascript講座を全部やってください。二日で終わります。

さて、はじめの頃は「これがなんの役に立つんだ？」と思っていたあなたも、講座を終えた頃には色々な可能性を感じ始める頃でしょう。document.getElementById(‘hoge’).innerHTML = “なんちゃら”; で<div id=”hoge”>内のテキストを書き換えられることに、いやしくも高学歴であるなら、何かを感じなくてはいけません。これはすごいことだ、と。

とにかく、これであなたはプログラマーの入り口に立ちました。アルファ・ギークの小飼弾もJavascriptを初学者向けに押していたので、「私はプログラマーの卵です」と言ってもあながち嘘じゃありません。そのうち、コンソールの画面を見なくなるプログラマーも増えるでしょう。パンチャーがこの世からほぼ消滅したように。

Flashもむろんやる

次はFlashです。flashはそもそもアニメーションを作るツールであり、グラフィックの項で述べた論理にしたがえば、あなたには向いていないはずです。しかし、flashの秘めている可能性はそれだけではありません。

さあ、Adobeのサイトからflash IDEをダウンロードし、勉強しましょう。

あなたの作ったものはどうですか？　たぶんマウス・カーソルに何か変なものがついてきたり、「あれ？　この人ってflash教本にいっつもイラスト提供してない？」なキャラクターがギッコンバッタン動いているものでしょう。

ですが、いいのです。あなたがいま身につけたflashの技術で、あなたのWebサイトのヘッダーを作ってください。どうですか？　だいぶよくなったことでしょう。これがRIA(リッチ・インターネット・アプリケーション)です。ガチャガチャ動くことの何がいいのか僕はいまだにわかりませんが、みんな動くものが好きみたいです。

STEP2：差異と反復をリアルに実践する

さて、とりあえずあなたはWebサイトを作れるようになりました。いっぱしのデミウルゴス＝造物主になった気分でしょうか？　しかし、ちょっと待ってください。Firefoxというソフトをダウンロードしましょう。

インストールは済みましたか？　では、ソフトを立ち上げ、あなたの作ったWebサイトのURLを入力してください。どうですか？　ちゃんと見えてますか？　もしかして、ガッチャガッチャにレイアウトが崩れてませんか？　それも、あなたががんばった分に反比例してガッチャガッチャになっていませんか？

その破壊度は「仕事一筋で家庭を一切顧みなかった男が50歳の誕生日を迎えた日、妻が泣きながら相談してくるので『なんだ？　妻ウゼエ』と思ったら、娘がメチャクチャヤリマンになってて吹いた事件」に匹敵するものです。＝架空です

そういうものです。しかし、あなたはこれを乗り切れます。高学歴文系＆30歳であるあなたは今、次のような状況に置かれています。東浩紀の『存在論的、郵便的–ジャック・デリダについて』を読み、賢くなったフリして友人をクソミソに論破したら、大学院生にデリダを読んでいないことを見抜かれ、泣きながら『グラマトロジーについて』を読もうと決意している。

たとえが二つ続いたことで混乱したかもしれませんが、そう、あなたはあの郵便的苦しみも乗り越えたじゃありませんか。あの怨念パワーを思い出してください。今こそ、クロス・ブラウザへ向けて動き出す時です。

あと、Adobeソフトの期限が切れたらOSを再インストールしてください。そうすると、また使えます。法律的にはどうだか知りません。たぶんアウトです。

ブラウザをインストールなど

さて、ブラウザというのはWeb閲覧用ソフトのことです。僕もWeb業界に入るまでIEしか使いませんでしたが、それ以外のブラウザもいっぱいあるのです。

あなたはとりあえずFirefoxをインストールしたので、主要なブラウザも入れてください。

Chrome Google謹製のブラウザ
Safari Macを作っているAppleのブラウザ
Opera タブ・ブラウジングを一番はじめに実装したという評判のブラウザ
Lynx テキスト・ブラウザ。初見では「え？」と思うが、後々重要になってくる
IE TESTER IEをバージョン別に閲覧できるブラウザ。これを作った人たちが何者なのかがすごく気になる

どうですか？　それぞれちょっとずつ違いがあるでしょう。このすべてに対応するのがWebクリエイターとしての仕事の一つです。

そうそう、なにが原因でレイアウトが崩れてしまったのかわからないときもありますよね。そういうときはFirebugを使って構造をちゃんと把握しておきましょう。また、自分のWebサイトを閲覧している人々を知るためにも、Google Analyticsはかかせません。

さあ、すべてのブラウザでチェックしましょう。順番としては、Firefoxに併せて作成し、その後にIEに対応するのがセオリーです。でも、SafariやOperaにもそれぞれ個性があるので、ちゃんと対応しましょうね。

HTML・CSSの仕様を理解する

さて、クロス・ブラウザ対応について、一通り理解が深まったことと思います。が、高学歴であるあなたは、とりあえずググって得た知識によって問題を解決できたとしても、なぜそうなのかが気になってしょうがないと思います。そう、根源的な部分についての問題が気になるのです。

うまくいけば、あなたはすでに就職しているかもしれませんが、その場合、同僚には「別に問題解決できたんだからよくね？」という人がいるでしょう。しかし、高学歴ゆえにプライドの高いあなたはそんな刹那主義が許せないはずです。いいのです。とことん追求しましょう。

HTMLやCSSを作っている人のドキュメント読む。高学歴文系なら、英語ぐらいへっちゃらです。inline-blockとは？　floatしたときの描画の仕組みは？　好きなだけ問題を解決してください。
オライリー本読む。僕の私見ですが、オライリー本とよくあるTIPS本は、講談社文芸文庫とコバルト文庫ぐらいの差があります。あと、オライリー本はエピグラフに文学臭が漂っていて著者の教養をうかがわせますが、よくあるTIPS本は~~読者に媚すぎていて憐れみさえ覚えます~~親切過ぎるのであなたには物足りないでしょう。
Tips集を読む。優れたクリエイターは情報発信をせずにいられないので、Web上のどこかに情報を残してくれています。ネタ帳、Collis、Design Walkerは必須でしょう。他にもいいブログがたくさんあるので、iGoogleなどのフィードリーダーで購読しましょう。「海外のブログの横流しじゃねーか！」とか怒っちゃ駄目です。高学歴文系であるあなたは、翻訳が日本にどれだけ寄与したかを知っています。

さて、この項目で述べたことは、今後も続けてください。というのは、仕様はあくまで仕様にすぎず、変更するからです。高学歴文系であるあなたは、当然ヘラクレイトスも読んでいるので、このことを重々承知しています。

Webデザイン再考

さて、Webデザインが工業デザインであるという話はすでにしました。そう、もしも決まった大きさのキャンバスに決まった画材で絵を描かなければいけないとしたら、あなたは完全に手遅れなぐらい歳を取ってしまっているのです。

が、Webの技術は日進月歩です。自分の技術に固執する見苦しい35overのクリエイターにならないためにも、あなたは新しい技術をどんどん身につけていかねばなりません。そして、そこにこそあなたの優位性があるのです。決してボタンのクオリティではありません。

さて、あなたは色々と勉強していくうちに、Webにおけるデザインが実に多義的なものだと感じるようになったと思います。

グローバルナビをflashにしちゃいけなくなったのはいつからで、なぜだろう？
検索ボタンがそろいもそろって虫眼鏡なのはなぜだろう？
レイアウトが簡単な幅固定ではなく、エラスティックレイアウトにわざわざする人がいるのはなぜだろう？
まだコンテンツが確定していない段階からデザインができる人とできない人がいたとして、後者の人の方がグラフィックのスキルは高かったとする。なのに、後者の人が「使えない」とされているのはどうして？

そう、問題が明確ではないのです。クオリティの問題なのか？　コーディングの問題？　それとも、コンテンツ？　Webデザインって内容まで考えなくちゃいけないの？

ここでは問題を明確化するために、三つの段階を設けます。

情報設計
コンテンツが何であり、どのような情報がどのように分類、階層化されるべきかについて考えること。ただ整理するだけじゃ駄目。もしもクライアントからコンテンツが出てこないのならば、出てくるように手助けすべき。
インフォメーション・アーキテクトという職業もあるらしいが、そんなにメジャーじゃない。
ユーザインターフェース
ユーザが目にする画面について設計する。UIとか略される。iPhoneが話題を集めたのは他でもないこのUIであり、原価の6割ぐらいがあのタッチパネルらしい。とにかく、Webはパソコンで見なくなるのがこれからの時代。UI設計能力はどんどん需要が多くなる。ちなみに、他の業界でも汎用的に求められるスキルはこれ。ATMとか、駅の券売機とか。
グラフィックデザイン
上記によって設計された情報を目に見える形で作り出す能力。優れた例を芸術の領域でいえば、セザンヌの林檎の書き方。あるいは、大友克洋のパース。文章でたとえるなら、古井由吉の隠喩。

ここで、あなたがWebデザインという言葉を聞いたときに思い浮かべるのは、3のことでしょう。しかし、高学歴文系という強みが3で発揮されることはまずありません。そこで問われるのは、あなたの「美的・視覚的センス」です。

「高学歴文系」というあなたのスペックから、「美的センス」を判断することはできません。ヘーゲルを読んでようが、関係ありません。むしろ、あなたが「高学歴」というロゴセントリックな特徴を持っているので、たぶんないでしょう。絶対にないとはいえません。東大にも、「絵で芸大行こうか迷って東大きたお！」というマルチな人はいましたから。ここでは「ない」と仮定し、あなたには１，２の部分に特化しろとオススメしておきます。

なぜなら、1・2ではあるロゴス＝論理の占める割合が大きいからです。3にもロジカルな部分は多少あるでしょうが、もうちょっと別の能力が必要になります。マイケル・ジョーダンにサッカーやらせてもそこそこ上手いだろうけど、普通にJリーガーに負けるよねってことです。

フォントやレイアウト、ファーストビューなどについては色々情報があるので、ググってください。

Ajaxしてみる

さて、もう眠くなってきたので、抽象的な話が増えてきましたが、ここであなたはもう一度Javascripを勉強しなおしてください。

上の本を三日で終えたら、いろんなライブラリを使いこなしてみましょう。大丈夫、イベントにまつわるあれこれやECMAスクリプトの歴史について知ったあなたなら、なんてことないでしょう。リンクはるの面倒になったので、ググってください。

Prototype.js ＆ Script.aculo.us
jQuery
YUI
Dojo
MooTools
Spry

他にも幾つかありますが、まずはSpryをやってみましょう。動的なサイトをあっさり作れるにも関わらず、「控えめなjavascript」として実装するのがメンドイという象徴的な特徴を持っているからです。そうそう、いきなりXMLとか言われるので、たのしいXML：XHTML講座もやっておくといいですね。万葉集が題材なので、高学歴なあなたなら楽しめます。JsonPもやってみると、幅が広がります。

さて、あなたはツールチップを表示したり、郵便番号から住所を自動的に入力する機能をつけたり、タブパネルを作ったり色々できるようになったと思います。どうですか？　UIを向上させることができたでしょう？

が、これはほんの入り口です。他人の作ってくれたものをコピペしているだけでは、まだまだWebクリエイターとは呼べません。あなたはあなたのオリジナルを作るべきです。それに、Lynxというテキストブラウザで見ることにより、Javascriptの限界も知りました。あなたが折角動的にしたWebサイトも、見ようによってはこうなってしまいます。携帯電話で見ると、Javascirptは動かないんですよ。

が、現段階のJavascriptはこれぐらいでいいでしょう。先に進みましょう。

ActionScript3.0をやる

さて、高学歴であるあなたは、まず3.0から入るべきです。2.0から移行できずにモジモジしているflasherがたくさんいるうちに、がんばって追いつくのです。とりあえず、これをやりましょう。

大学受験で立方体の周りをぐるぐる回る球体の描く表面積を求めよという、解けても別にモテない問題を嬉々として解いたあなたにはなんてことありません。3Dポリゴンの章など、バーチャファイターを思い出して目から鱗でしょう。

いきなりFlex SDKのコマンドライン・コンパイルからはじまるので泣きそうになりますが、ドキュメントクラスなどは必須の知識なのでしのごの言わずにやりましょう。あと、コンパイルという概念を知っておくのは、あなたがさらに羽ばたくために必要です。

flash関連では高学歴flasherの野中文雄さんのサイトやSpark project、Flash-jpフォーラムなどのサイトが役立ちます。2.0と3.0の違いもどこかにまとめられていると思うので、それを勉強してください。「2.0はムービークリップに直接書いてたんですね！　そっちの方が合理的ですね！型指定なんて頭デッカチな奴らのすることですよね！」などと年配flasherのご機嫌を取ったりしましょう。なぜか喜びます。

ところで、スーパーflaserといえば新藤愛大さんが有名ですが、flashに自信がついたあなたは、彼のことを見ると綿矢りさと同じ月にデビューした僕の気持ちが少しだけわかるはずです。

PHPもやる

さて、心の準備ができていないかもしれませが、Actionscriptをバキバキ書いたあとなら、PHPもそんなに難しくないはずです。PHPというのはサーバサイドで動くアプリケーションですが、その特徴はPHP入門本に書いてあります。読んでください。

一応、たとえ話をします。あなたはキャバクラを経営していました。経営をよりよくするために可愛い女の子をどんどんスカウトしていました。がんばれば女の子を増やすことはできますが、限界があります。そこで、あなたは可愛い女の子をスカウトする仕組みをマニュアル化し、スカウトを増やしたのです。すると、どうでしょう！　あなたのお店には可愛い女の子が濫れ、店は大繁盛です！これがサーバサイド・アプリケーションの力です。

なんでこんなたとえを書いたのか、自分でもわかりませんが、眠いので勘弁してください。

ところで、PHPだけ入っててもしょうがいないので、apacheやMySQLも入れる必要があります。自力で全部インストールすると面倒ですが、とりあえずxamppとその拡張機能であるPerlアドオンを入れましょう。Perlは別に使わなくてもいいんですが、日本のWebプログラミングの一翼を担う言語ですので、一緒にインスコしといてください。これであなたもローカルサーバを立てたことになってしまいます。

適当に本を買って勉強してください。ブログ、カート、メールフォーム、ファイルアップローダーを作れば、これまでに学んだのとは違ったWebのスキルが身につくでしょう。Xamppはデフォルトだとメールアプリが動かなくて途方に暮れますが、コントロールパネルをオンにすれば変なテキストファイルを生成・保存してくれます。あとは実際にレンタル・サーバに上げて確認しましょう。

なお、PHP5から強化されたクラスという概念が出てくるかもしれませんが、これについては後々理解できてくると思います。今は呪文のように覚えてください。Actionscriptでも強制的にオブジェクト指向的記法を強要されていたと思うので、そんなに問題ないでしょう。オブジェクト指向についてはそのうち書きます。

PHPと一緒にMySQLを勉強することに不安があれば、適当に本を買って勉強してください。以下のことができれば当面は問題がありません。