こんにちは！こんばんわ！
札幌でフリーデザイナー・コーダー・コピーライターとして活動しています、わたるデザイン企画の五十嵐です！

今週は珍しく（？）ずっと仕事をしていたのでブログのネタがあんまりないなぁということで、たまには自分の仕事のお話を。

僕の3つの職業肩書き「デザイナー」「コーダー」「コピーライター」の中でも一番一般的ではないのが「コーダー」だと思います。
コーダーとはコーディングをする人のことで、コーディングとは通常、HTML/CSSというマークアップ言語を使ってWEBサイトを構築することを言います。

何やら専門用語が多く出てきますが、WEBサイトを作る時に、設計図を作るのがデザイナーの仕事、設計図を元に実際に組み立てるのがコーダー、という風に思ってもらえるといいと思います。

WEBのデザインもコーディングもどちらもできる人は「WEBクリエイター」と名乗る人が多いかなと思いますが、僕はあえてデザイナーとコーダーを別々に名乗っています。
というのも、他のデザイナーさんや制作会社さんからデザインをもらってコーディングだけをやるという案件を結構メインでやっているので、それをアピールする意味を込めてコーダーを単体で名乗っています。

一般の人にはなんのこっちゃわからないコーダーを名乗っているのはそんな理由でございます。

と、ここからはごりっと専門的なお話をするので、WEB業界の方、WEB業界に興味のある方、WEBクリエイターを目指している方などなど向けになります。
興味のある方はぜひ続きも読んでみてください。

コーディングする時の3つの工程

さて、今週はそんなコーディングのお仕事がいくつか入っていたのですが、自分のスケジューリングのミスで「約3日で40ページ以上のコーディングをしなければならない」という状況になってしまいました。
本来なら１週間〜10日くらいでやるつもりのもので、それでもちょっとタイトかな〜と思っていたものなのですが、色々と重なってこんな状況になったわけなのです。

そんなわけで、とにかく「超効率」でコーディングをする必要がでてきたのですが、人間とは不思議なもので、「追い詰められると今までにない力が発揮される」ということを実感することになるのです。

僕はコーディングをやる時は大まかに３つの工程でやっているのですが、その工程のうちの一つが今回強化されました。
せっかくなのでその3つの工程を今回少しご説明しようと思います。

工程①　設計

1つ目の工程は設計をすることです。
デザインデータやサイトマップを見ながら、大枠のHTML構造を決めます。inner幅は何通りあるか、キービジュアルなどは全て共通か、横並びのレイアウトは何パターンあるか、などなど、のちのちイレギュラーとなるものがないようにデータをチェックしてHTMLを組む「アタリ」をつけます。基本的にこの工程ではまだHTMLを書き始めません。紙とペンで情報を整理します。

どう実装すればいいかわからない難しそうなものがあった場合、この段階でテストすることもあります。特にjsの動きの指示などがある場合、HTML構築が終わったあとになって「あれ、このHTML構造じゃできないじゃん、、、」となってやり直しになるのを防ぐためです。（それでもやっぱり後になって変えなきゃいけないこともありますけどね！どんまい！）

3つの工程のうちこの工程をしっかりやることでコーディングのクオリティが上がると思っているので、僕はこの工程を一番大事にしています。

今回の場合、この工程までは事前にやっていたからこそ3日で40ページを作ることができた、と言っても過言ではありません。もし僕がこの工程を怠っていたら、１週間かけてもできていないと思います。

工程②　ベースコーディング

2つ目の工程はベースコーディングです。

ベースコーディングという言葉があるのか知りませんが、いきなり細かく1ページずつ作るのではなく、ヘッダーやフッター、ボタンなど共通の部品やレイアウトを作っていくことを僕はベースコーディングと呼んでいます。

この工程をやるメリットとして、まずコーディングが非常に楽になります。
ヘッダーやフッターなどの共通の部分はもちろんですが、セクションとセクションタイトルの型であったりとか、リンクボタンなどの細かいパーツを先に作っておくことで、本コーディングをする時にできているものをコピペっとするだけでできてしまうので、作業効率が格段に上がります。

もう一つ大きなメリットとして、マージンなどのズレが少なくなることです。
セクションごとの余白などはデザイン的に特別な意図がなければ共通なことが多いです。それを先にパーツとして組んでおくことで、個別に毎回「何pxだっけ？」と調べる必要もなくなります。変更する時やレスポンシブにする時も指定が少なくて済むので楽です。

そして今回、40ページ以上の大ボリュームのサイトを構築する上で一番効率を上げてくれたのがこの工程です。
僕は3日間のうち最初の2日をこのパーツ作りに費やしました。今回のサイトの特徴が共通のレイアウト・パーツが多いということもあって、この工程がかなり重要でした。

しかもいつもはトップページや下層ページ1、2ページを作りながらパーツ作りもして、あとはそこからコピペして〜という進め方をするのですが、今回はパーツやダグ、クラス名などを書き出した専用のファイルを作成して、そこから必要なものをぺっとすぐに持ってこようにしました。

既にできてる他のページからコピペしてもいいのですが、ページが増えてきたりすると「あのパーツどこにあるっけ？」とわかりにくくなってしまうので、今回はコピペ用のファイルを作りました。

このコピペ専用ファイルが今回の功労者ですね。

工程③　本コーディング

そして3つ目の工程がようやく本コーディングです。
準備したものを使って各ページをゴリゴリと組んでいきます。

まずコピペファイルを駆使してHTML構造を作る、デザインデータから画像を切り出す、テキストと画像を入れる。これで大体出来上がりです。
あとはページごとに微調整が必要な部分を直して、PC・スマホそれぞれチェックして完了です。
時間がかかるのは画像の切り出しとテキストの貼り付けで、文章構造やCSSは大体パーツでできているのでそこまで時間はかかりません。

今回は部品づくりの後半とこの本コーディングを24時間ぶっ通しでやる、というチャレンジをしたわけですが、さすがに最後の方は疲れているし眠いしで、キーボードを打つ指の動きがかなり遅くなっていました。キーボードのキーの高さが高いと感じるくらい指をあげるのがしんどいというのはあまり経験したことのない感覚でした。

いつまでもスキルアップできる

ちょうど6年前の今頃、職業訓練でWEBデザインを学んでいる真っ最中に、バイトで初めて仕事としてWEBサイトを作らせてもらったことを思い出しました。

当時は日中は職業訓練、夕方から夜中、時には明るくなるまで制作作業、という感じで、10日間かけて10ページ（当時はPCとスマホで別のページを作って切り替えるのも主流だったので、5ページをPCとスマホそれぞれ作って合計10ページ）を作ったことがありました。

今だったらきっと１日でできるんだろうな〜と思いつつ、それでも当時は当時なりの全力でやったことを思い返しながら、6年経ってもまだコーディング力を上げられるのだということを実感しました。

今年からWEB制作を教える仕事も始めて、まだまだ学んでいかなければなぁと思う日々ですが、またこうして仕事を通しても成長できたらいいなと思います！

そして何より、そんな過密なスケジュールにならないようにきちんと管理するのが大事ですな！笑