cho-menは、世路庵メンバーがお届けする情報発信メディアです。
フロントエンドエンジニア
阿部 萌夏
投稿日： 2025.08.29
2025年8月22日（金）にDIST.51 「モダンWebデザインワークフロー」を開催しました。
この記事では、当日のLTやセッションの内容をご紹介します。一部スライドも掲載しているので、ぜひチェックしてみてください。
まずはLTからご紹介します。はじめに登壇されたのはkinew CTO Katashinさんです。
Katashinさんは「エンジニアとして、デザインにブレーキをかけない動き方」をテーマに、実践していることを共有してくださいました。大切にしているポイントは次の3点です。
続いて諸田 裕紀さんです。インフラエンジニアの視点から「こんな設計だと運用が楽になる！」という10個のTipsをご紹介いただきました。
デバッグ地獄から解放され、そのぶんUIを作る時間を生み出すことが「ありがたいフロントエンド設計」へと繋がる。運用時の改善にどう取り組むべきか、その視点を大切にされていました。
ここからはセッションパートです。最初に登壇されたのは、AppleWorld Inc. 執行役員、D-THREE Inc. 代表取締役 Designer、Front-end Engineer、Back-end Engineer 菅原 陸さんです。
菅原さんは「大炎上したプロジェクトを、どうやって3ヶ月で“リリース品質”へと立て直したのか」について、実際の事例をもとに、プロダクトを最速で前進させる秘訣を解説してくださいました。
ポイントは「意思決定の速度をとにかく上げること」。そのための基本方針は次の3点でした。
さらに重要なのは、プロジェクトが確実に進んでいることが、ビジネスサイドに見えること。これによって相互の安心感が高まるのだそうです。
どんなプロジェクトでもスタートダッシュを大切にされているということで、まずは形にすることが最重要とおっしゃっていました。
続いては、Studio, Inc. Designer / Front-end Engineer 小原 暢さんです。
モックを軸としたデザインで、チーム全体の認識共有と創造力を促す、実装の実例的ワークフローをご紹介いただきました。
アニメーションの動きを伝える際に、「シュッと！」といった抽象的な表現が良いのか、それとも具体的な指示が良いのか？という問いを出発点に、両者のメリットが挙げられました。
ただ、コミュニケーションの手段として言語化に頼りすぎると、どうしても言語化しやすいアウトプットに偏ってしまいます。そこで視覚と動きで伝えるモックドリブン開発が役に立ちます。メリットは次の通りです。
さらに小原さんは、モックを作るうえでのルールとして「なるべく単機能・プリミティブにする」ことを挙げました。デザインもロジックも作り込むことで、日々の鍛錬にも繋がると語られていました。
以上、DIST.51 「モダンWebデザインワークフロー」の参加レポートでした。
過去の勉強会の動画はDISTの公式YouTubeチャンネルからいつでもご覧になれます。動画では資料だけでは伝わらない、スピーカーからの解説や実演シーンも見られます。オフラインの勉強会に抵抗を感じている方も、まずは動画から雰囲気を掴んでみてください。
DIST公式サイト：
DIST公式YouTubeチャンネル：
ウェブ制作会社には、「言ったことしかやってくれない」「提案がない」といった不満を抱かれるケースがあります。目を引くようなビジュアルは作れるがビジネス理解が不足している、運用はしてもらえるがデザインやコーディングは外注に丸投げしている、といった体制では、しばしばプロジェクトが袋小路に迷い込んでしまいます。
世路庵は、ビジネスとクリエイティブを両立するウェブ制作会社です。ウェブサイトやウェブアプリケーションに課題を感じている方は、創業16年以上の経験と、業種・業態を選ばない800件以上の実績を持つ世路庵をぜひご検討ください。
合同会社世路庵
阿部 萌夏
フロントエンドエンジニア
北海道出身、2001年生まれ。専門学校を卒業後、フロントエンドエンジニアとして世路庵に入社。 普段業務で行っているSNS運用の経験も活かして、読んだときに絵が浮かぶような記事になるよう心がけていきたい。