plamo

ちょっと遅ればせながらフロントの話

Tweet

ここ半年くらいはフロントの学習の時期だった。

具体的には、長年使っていた DreamWeaver & FireWorks を一旦手放してテキストエディター（Sublime Text）&ビルド環境（Gulp）& Webデベロッパーツールでチェックみたいなオーサ環境に移行した。

理由はここ数年でのマルチデバイス化（様々な画面サイズのスマホ・デバイスの登場による）の加速と、今年4月のGoogleによる、モバイルに最適化していないWebサイトは評価を落とす、という宣言を受け、マルチデバイスに対応したレスポンシブデザインを実現するためには柔軟且つスピーディーにSASSという技術を使ってCSSを記述していく必要があったからだ。
→Google モバイルフレンドリーテスト

実際今まで制作してきたWebサイトのアクセス解析を見てみても、モバイルからのアクセス数がどのサイトも50%前後になってきており、Googleの発表があってから、スマホ対応して欲しいという問い合わせも増えてきた。
サービスによっては、モバイルファーストも通り越してモバイルオンリーというサイトも出てきて、もはやスマホ対応というかマルチデバイス対応は必須となってきている。
時代ですな〜。

思い返してみるとフロント（HTML/CSS/JS）に限って言えば、5〜10年スパンで技術的な変革があったように思う。

・HTMLソースをtableタグでガチガチに組んでデザインレイアウト。の時代
　↓
・XHTML+ CSS2、Flashでリッチコンテンツイエイ！の時代
　↓
・HTML5 + CSS3（SASS） + JS レスポンシブデザインの現在

特にCSS2〜レスポンシブの間は長いスパンだったので、plamoとしてはその間、技術的にはFlashやCMS構築の学習をしつつ、平行して企画やサイト構成、クライアントとの対話などディレクションスキルを上げることに従事した。
巷の制作会社なども会社が成長するに従い、ブランディングやマーケに力を入れていくような流れが目立っていたように思われるが、やはり技術的な部分が安定期に入っていたこともあったのではなかろうか。

その後、Flashの消滅（泣）→プライベートでは結婚→子ども生まれる→茅ヶ崎へ移住→子育て→そしてまさかの住居の管理組合役員&自治会役員に就任。とテンパリ度Maxの日々を送っている間に、フロントの変革はジワジワと起こっていた。
早い技術者だと3年くらい前からこの変化に向き合っていたと思われるが、やらないかんな〜と思いつつなかなか学習する時間は取れず。。
しかし自治会役員から解放されつつあった今年3月くらいからようやく少しずつ環境を整えだすことができた。

しかしこの変化はかなり大きいことだと今は感じている。なにせ以前"コーダー"と呼ばれていた肩書きが、"フロントエンドエンジニア"という少々イケてる肩書きに変化し、より高度な知識とスキルが必要とされているからだ。
実はコーディングに関しては、5年くらい前までは、中国・インドなど安価な所に依頼が流れていくのかなーと勝手ながら思っていたので今の現状は全く予想していなかった。

そしてこのフロントの変化はチーム間の連携や、予算の組み方などがより複雑で難しくなったようにも思える。
今回フロントをちゃんとやらねば！と思った理由として、適切なディレクションができるようになるため、というのも大きい。無理矢理デザインをフロントエンジニアに組んでもらったり、当初の予算から大幅に制作費がオーバーしてしまってはやばい、と思ったからだ。

予算組に関しては単純にやることが増えたので制作費がかさんでしまう。
オリジナルでCSSを組むのはもちろん手間が掛かるし、今流行というかCSSルールの標準になりつつある BootStrap を利用するにしても、学習コストは馬鹿にならないし、そのルール自体を頭に入れ込みつつ、いくつかサイトを作るという経験を積まないと作業スピードは上がらないだろう。

また、自分の周りでもよく話題になっていることだが、デザイナーとの連携は課題だ。
マルチデバイスを考慮したデザインを何案も作ることはコスト面でも現実的ではないし、さらにRetina仕様を踏まえて画像とテキスト、ベクターなどの素材の使い分けが必要となってくるからだ。（必然的にフラットデザインにもなる）
安直にフォトショガチガチのデザイン素材を渡したり、PCのデザインしかなかったりするとそのしわ寄せはフロントエンジニアに回ってくることは必至である。そして今までと同じ制作費しか確保できないとすれば、作業の増えたフロントエンジニアは食べていけなくなってしまう。

今後どのような流れなっていくかは予測できないが、今現在はチームの連携という部分でまだ試行錯誤段階といった感じがするので、スーパーフロントエンジニアが中間のデザインを吸収してなんとか形にしてくれているという感じではなかろうか。
もっといえば制作費を抑えつつもクオリティを担保するためにはスーパーフロントエンジニアデザイナーが必要なのかもしれない。
しかしながら例えば Atom + Gulp/Compass + SASS + Git + Chrome（Web Developertool） 的な環境で、ビルド環境によって瞬時にマルチデバイスの実機チェック、Gitをコマンドラインで操作し、ハイセンスなデザインも自ら作り、画面サイズによって事細かくデザインを調整していく、なんてもはや曲芸だ。
（でもそういう人希にいるw）

というわけで、私も少しでも良いフロントエンジニアデザイナーに近づけるように日々スキルアップしつつも、その経験を元に、良質なディレクションと予算組を出せるよう模索していきたいと思う。（ちゃんと遊び心は忘れずに ^ ^）
そして引き続きクライアントと一体となったサイト作りを目指して日々精進する所存でございます。
（あー、自サイトリニューアルしないとな〜）

最後に鎌倉の仕事場に入居しているWebデベロッパー、本郷さん（Egao.inc / 5Log）にはたくさんのアドバイスいただいたり質問させていただきました。
素晴らしいエンジニアです。
この場を借りてお礼申しあげます。

ということで、ちょっと今更ですがフロントが熱い！というお話しでした。

Tweet

15.11.18.PM02:21