【Web制作を仕事にするまでの記録　#09】 イラストレーターのデザインカンプ

今回は、イラストレーターのデザインカンプから１枚のページ（LP）を作る課題の話です。

その頃、私は百貨店で販売のお仕事をしていました。
何年もやっている仕事です。
ちょうどその時期、売り上げが思うように取れないという現象が始まっていました。

お給料を頂いている以上、精一杯会社に貢献しないと申し訳ない。
仕事と勉強のバランス。そういったことに悩んだ時期です。

会社の仲間は、みんな良い人達ばかりだったし、毎日本当に楽しかった。
だからこそ、余計に悩みました。
何のために勉強を頑張っているのだろう。 何度も自問自答しました。

そして、早朝の勉強の時間を減らし、仕事の時には全集中して臨むことで、少しずつバランスを整えていきました。

そんな日々の中で、次の課題が届きました。
3つある中級のうちの2つ目でした。　
デザインカンプは、イラストレーターで作られたものでした。

デザインカンプとは、ウェブデザイナーさんが作った完成イメージのこと。 それを見ながら、寸分違わずにコードで再現していきます。

まず最初の壁は、イラストレーター自体でした。

操作方法が私にとって本当に難しかったです。
フォントサイズはいくつ？
余白は何px？
この色のカラーコードは何番？

一つひとつ確認するだけで、操作に時間がかかりました。

フォトショップもイラストレーターも、使えた方がいいのはわかっていました。 でも月額料金も正直、痛い。それでもやっぱり、仕事道具への投資だと割り切っています。

ウェブコーダーとして副業をしていた時、実際のお仕事でイラストレーターを使ったデザインカンプの依頼が来たときは、この時の勉強がとても活きました。

お仕事での取りこぼしのないように、慣れておくことが重要と言っていた、先生の言葉は、間違ってなかったんだ。

その時は面倒だなと思っていた作業でも、今になると勉強しておいて良かったと思う場面がいくつもあります。

そして、この課題でついに待ちわびていたことが始まりました。

WordPressへの組み込みです。

今まで作ってきたのは、html・css・JavaScriptだけのサイト。 それをWordPressに組み込んで、動かす。

開発環境はlocalというツールを使いました。 自分のパソコンの中に、WordPressが動く環境を作れるものです。

でも最初は、仕組みがまったくわかりませんでした。

localを立ち上げると、なぜブラウザでサイトが見られるのか。 これは仮想空間ということなの？ ファイルはどこに入ってるの？ 本番の時にはどうやって移行するの？

頭の中が「？」でいっぱいでした。

WordPressの組み込みで、また新しい壁が出てきました。

functionsというファイルの設定です。

CSSやJavaScriptを読み込むには、htmlにタグを書けばいい。 今まではそれだけでした。

でも、WordPressでは様子が違いました。

functions.phpというファイルに、PHPで読み込みの設定を書かなければなりません。

「なぜこんな書き方をするの？」 「これはどこに書けばいいの？」

ただのファイルの読み込みなのに、訳が分かりませんでした。

でもやっていくうちに、WordPressに組み込むってこういう仕組みなんだ
と少しだけ理解できた気がしました。

html・css・jQueryで作っていた頃とは、明らかに違う世界に入ってきた感覚がありました。

scss・JavaScript・WordPress・local・PHP。
覚えることは増える一方です。

でも当時の私は、できることが増えてワクワクしていました。理解する楽しさを知れて良かったと心から思っています。

次回は、いよいよ複数ページのホームページ制作へ。メニュー、パンくずリスト、お問い合わせフォーム… WordPressの本格的な設定が、一気に押し寄せてきて私を悩ませます。