【ルーツ】初めて触れたWebの世界は、新作のゲームみたいに楽しくて刺激的だった

こんにピヨ(・Θ・)とりさんです。

今回は、ぼくが人生で初めてWeb制作に触れた、現在の仕事にも繋がるきっかけとなったエピソードをお話します。

Webなんて難しそう…とか、やってみたいけど一歩を踏み出すことができないという人の気持ちが後押しするきっかけになったら嬉しいです。

正直なところぼくは勉強がすごく嫌い（特に理数系がダメ）で、義務教育での数学や物理なんてほぼ寝ていた記憶しかありません。（クズ）
それでも自分ひとりの力でWebサイトを制作して公開することができて、あの時のクソバカによくできたよな…と思います。

興味と明確な目的があると、ちょっとしたレベルの苦難なんて全然超えられるもの。
それほど人間の欲求って、本当に力強いなと思います。

では、いってみましょう(・Θ・)

初めは自分にできると思っていなかった

見た目からして難しそう

いや普通に、Webサイトを作るって難しそうじゃないですか。
今だって、触れたことない人からするとブラックボックス状態だと思います。

当時のぼくはもちろん、ぱっと見ただけでどうなっているのか分からないし、Web制作の本を書店で立ち読みしても英数字の文字列だらけでなにが書いてあるのなんて全くわからない。

僕は一度見てアレルギーを起こしそうなくらい苦手意識を持ったので、これは研究者タイプの賢い人じゃないとWeb制作なんてできないだろうな、と思ってました。

自分はバカだから無理という先入観

ぼくは興味のないことを全くやらない性格だったので、勉強はぼぼしませんでした。
（病気かな？と思うくらい思春期はずっと寝てた）
夜更かしせず規則正しい生活をしていても日中は何故か眠くて、学生の間はほぼ寝て過ごしていたような気がします。

中学の進路相談の時期にも仕事図鑑で「Webデザイナー」という職種を見たような気がするけど、あの時すでに自分とは縁がない仕事だと思っていました。

（この時の進路はその後の高校も専門学校でも、全くカスっていません…笑 ）

きっかけはものづくりの趣味から

なんだかんだと夢見ていた割に、適当に地元の工業高校へ進んで、その後も地元にあるデザイン系の専門学校に。
当時専攻していた学科はジュエリーデザイン科でした。

自分の世界を表現したい気持ちが後押し

専門学校で課題に追われる中、学校での制作物や自主的に活動していたアクセサリーブランドのアイテムを世の中に見せたい気持ちに駆られました。（それはもう唐突に）

そして当時流行っていたmixi（現在で言うFacebookがもう少しクローズドなコミュニティになった感じ）で作品を露出させていくうちに、海外に住んでいる日本の人からコメントを貰ったりするようになり、勘違してイキっていたぼくはもっとたくさんの人に自分の世界観を見せびらかしたい気持ちでいっぱいになっていきます。

興味や欲が強い原動力になった

専門も2年目になり、もうすぐ20歳になるぼくは相変わらずバカでした。

Web制作は難しそうという印象は相変わらずだったはずなのに、その時さらにバカが加速したのか、突然「Webサイトを作ってみたい！」という気持ちになって、その勢いで書店へWeb制作の本を買いに。

できるかできないかではなくて、「作りたい」と思ったら考えるより体が勝手に動き出して、気づいたらサーバーの契約を検討して、リファレンスサイトを眺めていました。
（注：この時まだITリテラシーの低い機械オンチです。いや、今も。）

全くの無知がどうやって作ったのか

制作環境・ツール

制作環境

• PC / Windows XP、i Book G5
• エディタ / ワードパッド
• 画像編集 / Photoshop Elements
• サーバ / ロリポップ！
• FTP / ロリポップ！FTP

コーディングには実家にあった Windows XPに付属しているワードパッド、画像編集は学校で使っていた i Book G5（昔のMacbookみたいな）と Photoshop Elements で何とか作れそうだと分かり、サーバーは安く借りられる ロリポップ！ で、難しそうなFTPは同社が提供しているブラウザ版のFTPを使うことで、一通りの環境を準備しました。

めちゃくちゃ余談

ロリポップ！は、さくらサーバやエックスサーバに比べてマイページ内の情報がごちゃごちゃ小難しくないので、初めての人にも使いやすいし、安いし、初めてサーバ契約をする人におすすめですよ…！

参考にした情報・書籍

当時(10年ほど前)なんて、今みたいにWeb学習サービスもなければ技術ブログを書いているような個人も少ないので、Google検索があまり役に立ちませんでした。
（検索キーワードにマッチするサイトの母数が少なすぎて、検索結果の2ページ目に進むともう的はずれな情報しかないほどに。）

今みたいに検索すれば簡単に答えに辿り着いてコピペで完了！みたいな環境ではなかったので、辞書ほど分厚い書籍を片手に、リファレンスサイトを見ながら何度もプレビューで確認…という感じで作っていました。

参考にしたサイト

• TAG index – HTML & CSS Web制作リファレンス
• CSSリファレンス(CSS入門)

参考書籍

詳解 HTML & XHTML & CSS 辞典

posted with カエレバ

Amazonで購入

この本はすべてを網羅している代わりに使用頻度の少ないタグやプロパティも書いてあるので、素人のぼくは情報の多さに翻弄されてよく混乱していました…。
（しかしなかなか良書。まだ家のどこかで眠っています）

制作フロー

制作手順

（ １ ） サイトのデザインとレイアウト全ページ分を紙に書き起こす
　 ↓
（ ２ ） Photoshopで素材画像のレタッチや合成
　 ↓
（ ３ ） ワードパッドでhtmlの骨組みだけを作成、
　 ↓
（ ４ ） ブラウザでプレビューしながらcssでちまちまと調整
　 ↓
（ ５ ） ロリポップ！FTPで契約サーバーにアップロード

トップページは当時流行っていたFlashサイトのようにしたくて、一枚の大きな背景画像に＜map＞タグでリンクを仕込んで、なんちゃってFlashサイトの見た目に。笑
（完全に見た目や形から入るタイプです…）

下層は作品ごとに１ページづつ、htmlファイルを作るアナログな構造で妥協して、後半は結構サクサクと完成。

（残ってたとしても恥ずかしいから見せられないよ〜）

あの頃の妄想、イメージしていたもの

実際に作ってみると、なんとも言えない感動がありました。（ボキャ貧）

インターネットという世界とつながっている宇宙に、自分の星を送り出したような、なんだか凄いことをしでかした気分。

タグ一つで画像が配置できて、プロパティ一つで見た目を変えられて。
中身は単純なことだけど、知らない人からすると凄いことをしているように見えてる。

知らない国の言葉を覚えたような、魔法が使えるようになった勘違いで、ぼくはひと月くらいのあいだ調子に乗って見せびらかしていました。笑

ぼくがWeb制作に抱いた夢

当時流行っていた、演出に凝ったFlashサイトを見ることが好きでいつもワクワクしながら見ていたのを覚えています。

PCのスクリーンという領域の中に、心地よい体験をさせるような仕組みがたくさん詰め込まれていて、それはデジタルの絵本や空間演出、小さな遊園地のように感じました。

実際に一人で作ってみて、Webサイトは数人いれば十分で、紙の制作物と違って印刷代もいらず誤植もデータ更新で対応可能、制作環境も他のクリエイティブ職に比べると比較的安い？ことに、なんて都合のいいジャンルだ…！と感動したものです。

今から10年ほど前、小さな会社のコーポレートサイト案件でも3桁程度の見積もりが当たり前だった、業界右肩上がりの頃。

これからも盛り上がると確信して、この職種に人生突っ込み始めたのでした…。

さいごに

始めは無理だと思っていたことも、目的と熱意があれば「目的を達成するためにどうすれば良いか」を考えて、自然に「どうにか叶える・乗り越える方法」が実行できていました。

社会で擦れてきた今、この記事を書きながら目的や目標を持つことの重要さをひしひしと感じています。

通信環境やデバイスがガンガン進化して、最近では大量に情報通信ができるようになりました。
毎日胸焼けするほどの情報を無意識に食わされて、頭だけ肥大して懸念や先の不安ばかりしているぼくたち。

楽しいことに取り組む気持ちや、新しい遊びを探す無邪気さ、忘れたくないですね。

それではまた。(・Θ・)