※こちらは2019年11月3日に、僕の旧ブログ「LittleSpring」に掲載した記事をnoteに移設したものになります

CSS Niteは株式会社スイッチの鷹野さんが主催する、Web制作に関する様々なテーマを扱った今年で約15年を迎える老舗イベントです。おそらく1度でも参加した経験がある人が多いのではないでしょうか。

久しぶりにこのCSS Niteに参加してきました。「Coder’s High」というコーディング及びフロントエンドメインの回で、今回はそのイベントレポートをしたいと思います。

こちらに参加してきました。

イベント参加で得た知見はこんな感じです。

・他社のプロジェクト進行における効率化施策やワークフロー
・最近のWebサイトビルダーはかなりイケている
・モダンなアーキテクチャ「JAMstack」とそのデモ
・その他のキーワード：GTD , Headless CMS , CDN , netlify , graphCMS , RestAPI , SSR

それでは、セッションごとにレポートをしていきます！

ウェブデザイン・サイト制作におけるプロジェクト・タスク管理ワークフロー（株式会社necco 阿部 文人 , 今 聖菜）

秋田のデザイン制作会社neccoの代表・阿部さんとデザイナー・今さんのセッションで、SlackやFIgma、Asanaといったクラウドツールを駆使しプロジェクトやタスク管理を自動化した自社ワークフローと、個人タスクの管理手法「GTD」の発表をされていました。

僕が特に印象に残ったポイントは以下です。

・メンバーが繰り返し同じことを困ってしまうタスクは、自動化も含めてワークフロー化して改善
・クラウドツールを契約し業務を効率化した後、「工数換算」でどの程度節約できたのかを検証し、そこから更に改善と工夫を続ける

どちらも重要な視点ですね。

またneccoさんのワークフローで僕がもう一つ驚いたのが、タスクの粒度を1日単位で分割しているところです。

例えばトップページのデザインなら
「トップページ：10/21（月）〜10/25（金）」
の様に、ページ単位でタスクを立てるやり方が多いと思いますが、トップページデザインを更に「メインビジュアル作成：本日中」と、細分化してタスク化しているとのことでした。複数人で同時デザインが可能なFigmaが大活躍している印象を受けますね。

ウェブ開発のいまと、コーディングしない制作手法（モチヤ株式会社 - 阿部 正幸）

阿部さんのセッションは、モチヤさんが実際に行っているWeb制作の標準化と「コーディングしない制作手法」の紹介でした。

概要としては、CMS上で予めマークアップされたフォーマットを用意（HTML構造を変える場合もCMS上の操作で完結）し、Webサイトを構築するというものでした。

個人的には、なかなか癖がある手法かなと感じましたが、以下のメリットが発揮されているそうです。

・工数が明確化される
・複数人で作業・サポートを行える
・標準化することでクオリティが担保される
・工数が大幅に削減できる（バグが少なくテスト工数も削減できる、結果開発工数も削減できる）
・運用におけるメンテナンス性が向上できる

また、世界では「コードをいかに書かずに制作をするか？」が主流の流れになっているとのことでした。

ジンドゥークリエイター カスタマイズ自由自在（株式会社KDDIウェブコミュニケーションズ - 神森 勉）

KDDIウェブコミュニケーションズの神森さんが、自社サービスのジンドゥーをご紹介してくれました。（海外発のサービスですが、KDDIウェブコミュニケーションズさんが代理店で、日本語対応もされています）

ジンドゥーは「Webジェネレーター」と呼ばれるツールの1つで、HTML,CSS,Java Scriptやサーバ周りの知識が無い人でも、管理画面からWebサイトを構築していけるサービスです。競合サービスだとStudioやWixが有名ですね。

日本にやってきた10年前はまだまだ出来ないことが多かったのですが、アップデートを重ねたことにより、基本的なWebサイト構築において必要な機能はほぼカバーしている状態になっています。

僕が神森さんと同じ意見だったのが、低予算の小規模案件におけるWebサイトビルダーの立ち位置です。

上記は以前Studioについてツイートしたものです。一昔前だとカフェのオーナーがなんとか予算を捻出して制作を発注したり、頑張ってHTML+CSSやWordPressを覚えて自作したりという手段しかなかったと思いますが、この規模のサイト制作であれば、ジンドゥーの様なWebジェネレーターで事足りるのかなと考えています。

デザイナーとコーダーをつなぐ、Adobe XDを用いたモダンなウェブ制作（ツキアカリ - 松下 絵梨、株式会社ICS　鹿野 壮）

ツキアカリ 松下さんと ICS 鹿野さんのコンビセッションです。ありがちなデザイナーとコーダーが意思疎通に失敗し、仲間割れが発生してしまう状況を、Adobe XDを使用し解決する寸劇形式（笑）で解説されていました。

よく使用するXDの機能（主にプロトタイプ）や、最近注目を集めているダークモードの実装方法も解説されていましたよ。

これだけは押さえておきたい Vue.jsの基本知識（株式会社HAMWORKS - 長谷川 広武）

このあたりのセッションから、本格的にフロントエンドになってきます。

HAMWORKS長谷川さんのセッションでは、Vue.jsの基本をデモを交えて紹介していただきました。また、Vue.jsと比較されるケースが多いjQueryについても、多くの時間を割いて解説されていました。

上記はセッションで中にあった、Vue.jsとjQueryの違いを家に例えたものです。

よくVue.jsはjQueryを置き換えるものと解釈されることが多いですが、それに対して

・場面によってはjQueryの方が大きなメリットがあり、Webサイト制作の現場では普通に今でも現役
・しかし制作物によっては、jQueryでは苦手・不向きなものも多くなってきた

ということをお話しされていました。結論は、今現在ではどちらも主流で必要な技術であり、適材適所かなというところです。

台風19号の影響で残念ながら中止になってしまったVueFesJapanですが、参加予定だったの方の人数が桁違いです。いかにVue.jsが注目されているかが分かりますね。

高速なウェブのためのモダンアーキテクチャJAMstack（株式会社ピクセルグリッド - 中村 享介）

個人的に最も学びがあった中村さんのセッション。ピクセルグリッドさんは、昔からフロントエンド開発で有名な会社ですね。そのピクセルグリッドさんが、創業10周年を迎え、新たに自社の強みとして打ち出したのが、このモダンアーキテクチャ「JAMstack（ジャムスタック）」です。

僕は今回のセッションで初めてこの概念を知りましたが、JAMstackを簡単に解説すると、

になります。ちなみに上記は中村さんも紹介していた、jamstack.orgのメインコピーの意訳になります。（JavaScript、API、Markupの頭文字を取ってJAMです）

従来のサーバサイドでのプログラミング及びSPAの良いとこ取りといったアーキテクチャです。JAMstackの詳しい解説はそれだけで1記事書けるレベルなので、また折を見てご紹介したいと思います。

Nuxt.JSがもたらすWordPressの新たな可能性（株式会社キテレツ (KITERETZ inc.) - カイト）

株式会社キテレツのカイトさんは、実際にJAMstackのデモを見せてくれました。JavaScriptとマークアップ部分にはNuxt.js、APIにはWordPressを使用していました。前の中村さんのセッションを補完する形で、非常に良い流れでした。

従来のWordPress構築と何が違うのか？と気になる方も多いと思いますが、WordPressは管理画面とデータベースのみを使用、管理画面で投稿した記事をAPIとしてフロントエンド側に送り、Nuxt.jsでページ生成するイメージです。

実際にできたページは、標準のWordPressサイトと比較し、高速に表示されていました。

Vue.jsより型が決まったNuxt.jsは集合住宅です。

プロジェクトをうまく進めるために、コーダーが進化するためのテクニック（株式会社mgn - 大串 肇）

ここからは、HTMLコーダー/マークアップエンジニアは、今後どう進化して行くべきか？といった内容のセッションになりました。直近でしたらフロントエンドエンジニアになるという選択肢がもちろんありますが、それ以外の道というのがポイントですね。

大串さんは、プロジェクト内で起こるHTMLコーダーあるある問題やmgnさんのワークフローを、熱いトークで話してくれました。

個人的に一番大きいポイントだなと感じたのが、制作の最終工程の煽りを受けやすいコーダーがプロジェクトの初期段階からディレクターと一緒に動くというお話です。サイト設計や動きやUIの調整を、ディレクターと共に直接クライアントと話ができる様になるのも、一つのキャリアの方向性かと思います。

確認のキャッチボールや手戻りを極力無くす、生産性が高い進め方をしているなと感じました。

余談になりますが、mgnの大串さんが執筆に関わられた『Gitが、おもしろいほどわかる基本の使い方33』というGitの書籍があり、僕も愛用しています。非常に丁寧に解説されていておすすめです。以前チームメンバーに共有したりもしていました。

コーダーとしての価値を高めるウェブ解析活用術（株式会社S-FACTORY - 井水 大輔）

最後は、HTMLコーダーからWebマーケター/アナリストに転向された経歴を持つ、S-FACTORY井水さんのセッションです。

同じくコーダーの価値をいかに上げるか？という趣旨の内容で、ウェブと解析と絡めて価値をあげようという内容で、ディレクター視点だと解析タグが適切に設置されていないというのが往々にしてあります。

定期的にアップデートもされるGoogleのタグの仕様も理解し、またサイト内のどのポイントで解析を行いそれに合わせて実装をするかなど、逆にディレクターやクライアントに提案できるレベルになると強いのでは無いでしょうか。

この様に、ワークフローから最新のアーキテクチャ、コーダーの価値を高めるキャリアパスなど、非常に盛り沢山のイベントでした。
やはりこういったイベントに参加をすると刺激を受けますね。

また何かに参加した際はレポートをしたいと思います。