Draft-181013_ITひよこ会 #2

石井孝明

10/13に札幌で開催されるミートアップイベント「ITひよこ会 #2 」で発表する内容の下書きを公開してみます。最終的なスライドは後日どこかにあげるかもしれません。

Webデザイン15年史
〜経験に学ぶ制作者の生存戦略〜


1.会社紹介、自己紹介

・SUI Productsは住宅不動産ポータルサイト LIFULL HOME’S運営会社「LIFULL」のグループ会社で、主に不動産住宅領域を中心としたプロモーションサイト制作を行っている、受託制作の会社になります。

・30名ちょっとのディレクター、デザイナーが在籍しております。
京都や福井県の鯖江にサテライトオフィスを開いており、札幌にも制作拠点を持ってます。

・石井は、2000年くらいからプライベートでホームページ制作をはじめ、事業会社にアルバイトで入ってから制作会社、エージェンシーを経て仕事としては約15年くらい。

・無駄に長いWebデザイナー歴で体験した技術の陳腐化の歴史について話しつつ。

・昔話だけしてもしょうがないので、いままでの経験の中から見えてきた私なりに考える制作者の生存戦略についてお話します。

2.前提

・受託制作中心できたため、あくまでも私個人の観測範囲内でのお話です。
例えばゲーム業界とかサービスのスタートアップとか、事業会社系の実態にはあまり明るくありません。

・デザイン〜マークアップ〜CSS設計、実装〜jQueryでDOM操作して〜昔はFlashのオーサリングもやって〜、と割と一人で完結しちゃってた古いタイプのWebデザイナーです。

・主にデザイナー目線によるWebデザイン〜フロントエンドのお話になります。

3.Webデザイン、技術トレンドの栄枯盛衰

・【2000年当時】
ブラウザはIE5（Mac IEというのも存在）とNetscape（後のMozilla Firefox）の二強／コーディングはtableレイアウト一択（1997年産のspacer.gif……）／DreamweaverやFlashはまだMacromediaという会社の製品でした／Macromedia Fireworksという徒花も……（Adobe買収後CS6で開発終了……）／モニタ解像度は1024x768がメイン（800x600までターゲットに含めていた）

・CSS2の勧告は1996年だが、実用が始まったのは2002〜2003年くらいの印象。

・2001年、IE6リリース（IE5.5も残存、Mac IEは5）。IEはCSSバグの宝庫。CSS hackを駆使した数多のバッドノウハウの嵐嵐……

・この時点でtableレイアウトは過去のものになり……

・クロスブラウザ検証、バグフィックス、後方互換にめっちゃ工数かかる。これ徹夜の温床。

・いまは役に立たない知識 #1
【doctypeスイッチ】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN">
→ 標準準拠モード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
→ 後方互換モード

・この頃のJavascriptはボタンのロールオーバーとかポップアップウィンドウを開くくらいしか使われていませんでした。
ダイナミックHTML（DHTML）とかいう概念も存在しました（します）が、ブラウザを乗っ取るような悪質なサイト（ブラクラ）もあったり、クロスブラウザじゃなかったり、むしろ嫌われていた印象。

・インタラクティブな（特にプロモーション）サイトはFlashサイトが全盛。
中村勇吾さんに代表されるクリエイターの時代。
▼ECOTONOHA（THA / 2003年）
http://tha.jp/62
▼FONTPARK 2.0 | MORISAWA（THA / 2008年）
https://www.youtube.com/watch?v=gp3kc_V6Zug
http://tha.jp/works
▼THE ECO ZOO（roxik城戸雅行さん / 2008年）
http://roxik.com/v/6/
http://roxik.com/
▼原美術館（2004年？ / 広告以外でもフルFlashサイトは普通だった）
https://www.youtube.com/watch?v=z5PEo2uPY9I
参考サイト：https://ics.media/entry/16171

・2000年代のWebデザイナーはデザイン〜マークアップ〜CSS設計・実装〜JS実装〜Flashオーサリングまで頑張ればだいたい一人で出来てしまうのが逆に面白かった。

・2007年にFlash CS3にてAS3.0が実装。よりOOP志向になりコミュニティ（Flash Developというオープンソース開発環境、3Dとか物理演算ライブラリの開発、セミナーも盛ん）も勢いづくものの……（反面このあたりからついて行けなくなるデザイナーも多数……）

・2007年初代iPhone発売。

・2010年、あの有名なスティーブ・ジョブズさんの「Flash殺す」宣言。
こんな時代がいつまでも続くと思っていた……Web幼年期の終わり……
多くのFlasherが暗闇に突き落とされる……

・代理店なども含めて、しばらく「派手な動きとかいらないよね」という論調が大勢を占めていた。（個人の見解です）

・（私はあまり制作経験がありませんが）ガラケーサイトというのも存在。
パケ節約のためｶﾀｶﾅは半角、画像テキスト含め100KB以内、キャリア依存の絵文字、主要キャリア向けにhtmlを分けたり……（ケータイ小説全盛期）

・スマートフォンの爆発的普及とモバイルトラフィックの増大。

・2013年頃からレスポンシブウェブデザインが急激に一般化。
CSS3の時代到来！CSSアニメーションとか！
のはずが2015年くらいまではIE8対応とか普通に言われる。
（個人の見解です）
css3-mediaqueries.js、html5.js、ie9.js、IE独自実装の条件付きコメント、etc. またもやバッドノウハウの嵐……

・いまは役に立たない知識 #2
【IE独自実装の条件付きコメント】
<!--[if IE]> IEですよ <![endif]-->
<!--[if gt IE 8]> IE8 以上ですよ <![endif]-->
IE10から廃止……

・CSSは2 → 3 とストレートに来ていますが、HTMLは1999年のHTML 4.01 → XHTML 1.0 → 1.1ときてXHTML 2.0になるはずが何故かHTML5に……
策定団体がW3CとWHATWGに分裂、その後はW3CもHTML5を開発……XHTMLよどこへ……（PHP6開発やめて7に）

・デザイントレンドはWeb2.0的プリプリテカテカしたアクアデザイン、現実にある物質の質感などを模倣したスキューモーフィックデザインから、一気にフラットデザインへ。デザインもシンプルに。

・その後Googleマテリアルデザインの登場。うっすらシャドウ、うっすらグラデ。現実界のメタファーを再度取り入れている形。

・JSは2000年代後半（記憶曖昧）からフレームワークが登場。最初prototype.js、2011年くらいから激しくjQueryに依存。無数のプラグインの数々。Ajaxという謎ワード。

・Node.jsが出始めた頃から徐々にフロントエンドエンジニアという職種が目につくようになり、脱jQuery → 新JSフレームワーク（React、Angular）の記事も多くなる。（個人的にはこのへんでエンジニアリングは脱落）
フルスタックエンジニア（デザイナー）みたいな謎職種……
かつてのFlasherはいまフロントエンドエンジニアとして生き延びている……のか……？

・CSS Gridの考え方がtableレイアウトに酷似している件。
インタラクティブなコンテンツはWebGL全盛のいま。
https://homunculus.jp/
Safariの怪しげな動向……
https://support.apple.com/kb/PH21426?viewlocale=ja_JP&locale=ja_JP
Apple曰く「OpenGLあんま使わないでね」
https://pc.watch.impress.co.jp/docs/news/1125772.html
安泰とも言い難いのでは？

・Web動画の形式
H.246とかwebmとか、とか
AWSに代表されるようなクラウドコンピューティング。クラウド化がキーワードになってきている。（Creative Cloudもそうですよね）

・物理サーバからの転換、必要とされる技術要件も変わってきている。

・いまは役に立たない知識 #3
【古くなったSEO対策】
meta keyword → 見られてません！
画像置換 → 別の意味で使うことも（CSS Spriteとか）

4.Web製作者の生存戦略とは？

・【2018年現在】
レスポンシブは当たり前／ブラウザ間の実装の差異は減ったものの、モバイル環境の発達によりユーザーの閲覧環境はかえって膨大に／プロトタイピングツールはどれ？XD？Prott？InVision？／UXデザインも必要だから調査分析フェーズから関わってー、提案に客先にも同行してー／デザインシステムって？／実装もできないと！Sassとgulpは必須で、webpackも入れたりして……／CSSアーキテクチャーは？BEM？OOCSS？SMACSS？FLOCSS？／テンプレートエンジンは？Haml？ejs？pug？／JSフレームワークは？Angular？React？Vue？／Githubでバージョン管理して、Jenkinsは必要？／ES6に移行しなきゃ……BabelかなTypeScriptかな／iOSのUIデザインやるならXCodeでストーリーボードさわってレイアウト調整くらいできないと……／開発手法は？アジャイル？Lean UXで？デザインスプリント？／アクセシビリティの知識、WAI-ARIAとか／パフォーマンスチューニング／Seleniumって……？なに？毒？

・やること考えること多すぎ……（現実的に無理）

・さらにはデザイン組織だ！とかデザイン思考の組織インストールだ！とか、CDO、CXOとか言って経営にまで口出せと言われる。
正直途方にくれます……

・ここで一旦、自分の歩んできた道を振り返ります。

・ActionScript 3.0でJavascriptの土台を学んだと思っている。
同じECMAScriptベースだから。

・JSのTweenエンジンなんかはASからの移植のものも多い。
でも今後は……フレームワークまでいくとちょっと手に負えない感……

・HTML / CSSは技術発展の流れを見ているとすぐには消えない（消えてしまったらスイマセン。。。）→ 手持ちの技術のアップデートである程度まではアジャストしていける。また電子書籍とかブラウザゲーム、Webアプリなどのプラットフォーム技術としても使われている。

・手を動かしつつも、デザイナーのチームビルディングからチーム運営、マネジメントの経験値を積む。

・WebサイトはJimdoとかWiXで十分っていうクライアントも当然出てきますけど、普遍的なデザイン力とかデザインによるビジネス上の課題解決っていうのはあると思うので、自然にデザインコンサル的な立ち回りができたらよいなぁ。

5.まとめ

・限られた時間の中でどこに学習コストをかけるか、仕事を通した実務経験の向け先をどこにするか、その見極めが超重要。
特に後者はある程度コントロールが効く立場になれるまで「マネージメントもやります！」と言ってみるものアリかも。（社内体制にもよりますが）

・自分の日常の仕事やインプットの中で普遍的なものは何か、その情報や技術の耐用年数はいかほどか、意識してみる。アウトプット至上主義、成果主義に陥りすぎないこと。

・と同時に、転職意志の有無とは別に転職市場に出た時の自分の市場価値も意識してみる → いま学ぶべきことの一端が見えてくる。

・ひとつの領域を深掘りすると関連する周辺領域のスキルも引きずられてくっついてくる。はじめは好き（得意、楽しい）と思える領域に特化してエキスパートを目指すのもあり。

・先輩やまわりの人のアドバイスを受けるのもよい。技術勉強会系のセミナーだけでなく、一見すぐに役立たなそうなもの（マーケ？とか経営？とかデザイン組織？とか）でもセミナーに参加してみるのもよい。

・いずれにせよ足元の仕事だけでなく、ときに視線をあげて360°（先だけでなく過去も）見渡してみることが必要、ということ。

読んでいただきありがとうございます。