デザイナーになったあと、3年目からwebコーディングを始めた。コーダーに転身しようと思っていたわけではなく、解決したいデザインの課題がいくつかあり「手段として選んだのがwebコーディング」というだけだったので、誤解のないよう経緯をまとめておきたい。
モジュール式デザインの必要性
データが重いし分割し辛い
ツールは支給されていたIllustratorを使っていた。ほぼベクターデータなのでPSDに比べれば軽いものの、20ページ以上のデザインをアートボードで並べるとPCの処理は限界だった。ファイルを分けると共通パーツを更新する時に困るし見比べ辛くなるから悩ましかった。
余白がちょっと違う
大量にページを作っていると、最初に作ったページと量産したページで余白のサイズが合わないことがあった。作業が長引きすぎて忘れている。ディレクターから「余白が20pxと30pxで2種類あるので揃えて欲しい」と言われデータを修正しているときに、これは不毛な作業だなと思った。
レスポンシブwebデザインの必要性
デザインを1回で終わらせたい
2014年当時、アプリのLPなどでBootstrapを使ったレスポンシブwebデザインが増え「これからは1パターン作ればOKなの？」という淡い期待がデザイナー陣に湧いた。デスクトップ（幅1200px / 1x）とモバイル（幅320px / 2x）のデザインを別々に起こすのは面倒になってきていた。
iPhone 6 / 6 Plusがお約束を粉砕
制作スタイルに衝撃を与えたのは、何と言っても「iPhone 6 / 6 Plus」の登場だった。日本で圧倒的なシェアを誇るiPhoneが突如2サイズも増え、しかもPlusに関しては3xを縮小して表示だとか。開発からオーダーされるパーツやストア画像は膨大な数に登り、固定サイズでデザインする限界を感じた。
インタラクションデザインの必要性
Prottが禁止された
スマホアプリやモバイルサイトの動きを企画や開発に説明するときにProttは最高だった。単純なインタラクションは見せれば済むようになったし、何よりデザインのPNGを投げ込んで設定するだけでいい。ところが、勤務先でProttが禁止された。公開前情報を外部環境にアップロードするなとのお達し。
パワポ？After Effects？
仕方がないので、パワーポイントのアニメーション機能やAfter Effectsを使って動きの説明を行うようにしたけれど、パワポは細かい調整がし辛いし、After Effectsは要件に対して作業が大げさすぎる。結局、参考サイトのリンクを共有するだけになっていった。最適なツールをすでに知っていると戻れない。
webコーディング（初動）
すべてを満たせそうで手を出す
ここまでの流れで、僕がデザインに対して「パーツに分けてデータを軽くしたい」「レスポンシブに可変させたい」「動きを簡単に説明したい」という欲求を抱えていたのがわかる。様々なサービスやツールを探しまわった結果、一番要件を満たせそう（＋勤務先で文句を言われない）のがwebコーディングだった。
画像の切り貼りからスタート
とりあえず、セクションごとの画像をHTMLで切り貼りし、ZIPで固めて企画やディレクターに共有すればいいんじゃないかと思っていた。この読みはだいたい合ってて、200MBあったデザインデータは15MBくらいになったし、余白も margin-botom: 10px; などと書いておけば勝手に揃う。画像を押して別ページに飛ぶなども簡単。リリースする精度のwebは作れないものの、理想に近いことができた。
webコーディング（進化）
徐々に可変を実装
画像をHTMLに放り込んだだけだと、ブラウザを狭めたときに切れるか縮小されてしまう。メディアクエリで画像を切り替えればなんちゃってレスポンシブも作れたが、本来のレスポンシブ・リキッドデザインは枠だけ縮まり中のテキストはそのまま。そこで、再現するために画像部分を徐々にHTMLとCSSに変換していった。
デザインの工数内で行う
このあたりから本格的にコードを書くようになっていったけれど、あくまでデザイナーなのでコーディングの工数が割り振られていない。無論、コードを書くのは遅い。ただ、デザインを完成させるスピードと精度には自信があったので、余った時間をすべてコードの学習や実装に当てた。
webコーディング（本番）
コーダーチームリーダーに転身
デザインと同時にコーディングしはじめて3ヶ月目くらいで、突如デザイナーチームを抜けコーダーチームのリーダーになってしまった。理由は色々あるけれど、ともかくリリース本番のコードをチェックする立場に。CSSが崩れるとかJavaScriptが動かないとか、メンバー全員の相談に乗っていた。
やるからには最新の手法で
コーディングは小技の積み重ね。デザインをやっている身としては、見た目が仕上がるまでに時間がかかるのが気がかりだった。後になって良い方法を見つけても嫌なので、一番新しいフロントエンドの本を買って冬休み中に一足飛びで最新の手法を使えるようにした。
webコーディングも手段のひとつ
ほどなくして、ファーストビューやグラフィックをIllustratorで作る以外はインブラウザデザインを用いるようになり、悩んでいたデザインの課題を解決することができた。デザインツールにwebコーディングが加わった感覚。可変して動きもつけられるデザインを数MBで作れる点が良い。
そこから更なる面倒を解消させるために、約物半角専用webフォントの「Yaku Han JP」やCSSフレームワークの「MUSUBii」を作ることになるのだけど、その話はまた別の機会に。