[{"data":1,"prerenderedAt":36},["ShallowReactive",2],{"post-dist51-event-report":3},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":6,"revisedAt":6,"title":7,"body":8,"categories":9,"author":13,"thumbnail":24,"ogpImage":28},"dist51-event-report","2025-08-22T07:50:29.471Z","2025-08-29T00:20:53.913Z","DIST.51 「モダンWebデザインワークフロー」参加レポート","\u003Cp>2025年8月22日（金）にDIST.51 「モダンWebデザインワークフロー」を開催しました。\u003C\u002Fp>\u003Cp>この記事では、当日のLTやセッションの内容をご紹介します。一部スライドも掲載しているので、ぜひチェックしてみてください。\u003C\u002Fp>\u003Cul>\u003Cli>「デザインにブレーキをかけないエンジニアの動き方」\u003Cbr>kinew CTO Katashin（Katashin）\u003C\u002Fli>\u003Cli>「インフラ視点で見る"ありがたい"フロントエンド 〜運用の笑顔を産む10のTips〜」\u003Cbr>諸田 裕紀（MOROTA Yuki）\u003C\u002Fli>\u003C\u002Ful>\u003Cul>\u003Cli>「大炎上プロジェクトを0から3ヶ月でリリース品質に変えたデザインエンジニアの極意」\u003Cbr>AppleWorld Inc. 執行役員、D-THREE Inc. 代表取締役 Designer、Front-end Engineer、Back-end Engineer 菅原 陸\u003C\u002Fli>\u003Cli>「モックドリブンのすゝめ：動きで伝えるデザイナーとエンジニアの連携術」\u003Cbr>Studio, Inc. Designer \u002F Front-end Engineer 小原 暢\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 style=\"text-align: start\" id=\"hb70e9b9468\">デザインにブレーキをかけないエンジニアの動き方\u003C\u002Fh2>\u003Cp style=\"text-align: start\">まずはLTからご紹介します。はじめに登壇されたのはkinew CTO Katashinさんです。\u003C\u002Fp>\u003Cp style=\"text-align: start\">Katashinさんは「エンジニアとして、デザインにブレーキをかけない動き方」をテーマに、実践していることを共有してくださいました。大切にしているポイントは次の3点です。\u003C\u002Fp>\u003Cul>\u003Cli>まずはベストなデザインを\u003Cul>\u003Cli>デザイナーが実装を考慮してくれたとしても、それは本当に正しいか考える\u003C\u002Fli>\u003Cli>実装可能性を判断するのはエンジニアの役割\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>技術的な懸念は後で\u003Cul>\u003Cli>実装上の懸念をはじめに言うと、デザイナーの発想にブレーキをかけてしまう\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>ノーと言わない\u003Cul>\u003Cli>実装がめんどくさいだけ？　時間がかかるだけ？\u003C\u002Fli>\u003Cli>本当にできない場合は、その理由を丁寧に説明する\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fkatashin.info\u002Fslides\u002Fcollaboration-with-designers\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fkatashin.info%2Fslides%2Fcollaboration-with-designers%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch2 id=\"hdaa7c64264\">インフラ視点で見る"ありがたい"フロントエンド 〜運用の笑顔を産む10のTips〜\u003C\u002Fh2>\u003Cp>続いて諸田 裕紀さんです。インフラエンジニアの視点から「こんな設計だと運用が楽になる！」という10個のTipsをご紹介いただきました。\u003C\u002Fp>\u003Cul>\u003Cli>調査系3選\u003Cul>\u003Cli>構造化ログ\u003C\u002Fli>\u003Cli>ユーザーコンテキスト\u003C\u002Fli>\u003Cli>セッションリプレイ\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>監視系3選\u003Cul>\u003Cli>エラー監視\u003C\u002Fli>\u003Cli>パフォーマンス計測\u003C\u002Fli>\u003Cli>Health Check\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>デプロイ系4選\u003Cul>\u003Cli>Feature Flag\u003C\u002Fli>\u003Cli>環境変数管理\u003C\u002Fli>\u003Cli>ビルド情報埋め込み\u003C\u002Fli>\u003Cli>段階的でグレード設計\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>デバッグ地獄から解放され、そのぶんUIを作る時間を生み出す\u003C\u002Fstrong>ことが「ありがたいフロントエンド設計」へと繋がる。運用時の改善にどう取り組むべきか、その視点を大切にされていました。\u003C\u002Fp>\u003Ch2 style=\"text-align: start\" id=\"h2c4ceef414\">大炎上プロジェクトを0から3ヶ月でリリース品質に変えたデザインエンジニアの極意\u003C\u002Fh2>\u003Cp style=\"text-align: start\">ここからはセッションパートです。最初に登壇されたのは、AppleWorld Inc. 執行役員、D-THREE Inc. 代表取締役 Designer、Front-end Engineer、Back-end Engineer 菅原 陸さんです。\u003C\u002Fp>\u003Cp style=\"text-align: start\">菅原さんは「大炎上したプロジェクトを、どうやって3ヶ月で“リリース品質”へと立て直したのか」について、実際の事例をもとに、\u003Cstrong>プロダクトを最速で前進させる秘訣\u003C\u002Fstrong>を解説してくださいました。\u003C\u002Fp>\u003Cp>ポイントは「意思決定の速度をとにかく上げること」。そのための基本方針は次の3点でした。\u003C\u002Fp>\u003Cul>\u003Cli>プロトタイプを最速で作る\u003C\u002Fli>\u003Cli>最短でMVPを完成させる\u003C\u002Fli>\u003Cli>デザインとフロントエンド、サーバーサイドレンダリングを強くリンクさせる\u003C\u002Fli>\u003C\u002Ful>\u003Cp style=\"text-align: start\">さらに重要なのは、\u003Cstrong>プロジェクトが確実に進んでいることが、ビジネスサイドに見えること\u003C\u002Fstrong>。これによって相互の安心感が高まるのだそうです。\u003C\u002Fp>\u003Cp style=\"text-align: start\">どんなプロジェクトでもスタートダッシュを大切にされているということで、まずは形にすることが最重要とおっしゃっていました。\u003C\u002Fp>\u003Ch2 style=\"text-align: start\" id=\"h73d5b97e6c\">モックドリブンのすゝめ：動きで伝えるデザイナーとエンジニアの連携術\u003C\u002Fh2>\u003Cp style=\"text-align: start\">続いては、Studio, Inc. Designer \u002F Front-end Engineer 小原 暢さんです。\u003C\u002Fp>\u003Cp style=\"text-align: start\">モックを軸としたデザインで、チーム全体の認識共有と創造力を促す、実装の実例的ワークフローをご紹介いただきました。\u003C\u002Fp>\u003Cp style=\"text-align: start\">アニメーションの動きを伝える際に、「シュッと！」といった抽象的な表現が良いのか、それとも具体的な指示が良いのか？という問いを出発点に、両者のメリットが挙げられました。\u003C\u002Fp>\u003Cul>\u003Cli>抽象的な指示のメリット\u003Cul>\u003Cli>相手の能力を引き出せる\u003C\u002Fli>\u003Cli>指示する側の引き出しにないものが生まれるかも\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>具体的な指示のメリット\u003Cul>\u003Cli>時間を節約できる\u003C\u002Fli>\u003Cli>指示される側もする側も楽\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp style=\"text-align: start\">ただ、コミュニケーションの手段として言語化に頼りすぎると、どうしても言語化しやすいアウトプットに偏ってしまいます。そこで視覚と動きで伝える\u003Cstrong>モックドリブン開発\u003C\u002Fstrong>が役に立ちます。メリットは次の通りです。\u003C\u002Fp>\u003Cul>\u003Cli>企画とデザインのヒントになる\u003C\u002Fli>\u003Cli>クライアントが喜ぶ\u003C\u002Fli>\u003Cli>打ち合わせの段階で見せると、案件の主導権を握れる\u003C\u002Fli>\u003Cli>モックを作っておくと、別案件の再利用にもなる\u003C\u002Fli>\u003Cli>技術的な検証も事前にできる\u003C\u002Fli>\u003C\u002Ful>\u003Cp style=\"text-align: start\">さらに小原さんは、モックを作るうえでのルールとして「なるべく単機能・プリミティブにする」ことを挙げました。デザインもロジックも作り込むことで、日々の鍛錬にも繋がると語られていました。\u003C\u002Fp>\u003Chr>\u003Cp>以上、DIST.51 「モダンWebデザインワークフロー」の参加レポートでした。\u003C\u002Fp>\u003Cp style=\"text-align: start\">過去の勉強会の動画はDISTの公式YouTubeチャンネルからいつでもご覧になれます。動画では資料だけでは伝わらない、スピーカーからの解説や実演シーンも見られます。オフラインの勉強会に抵抗を感じている方も、まずは動画から雰囲気を掴んでみてください。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Ff430a740e9364160a6d879d92b4832e6\u002FIMG_2238.jpg?w=1280&h=853\" alt=\"\" width=\"1280\" height=\"853\">\u003C\u002Ffigure>\u003Cp style=\"text-align: start\">DIST公式サイト：\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fdist.tokyo\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fdist.tokyo%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>DIST公式YouTubeチャンネル：\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCNsgmodjXtYKAi1HxLK94kQ\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Fwww.youtube.com%2F%40DISTJP&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>",[10,11,12],"デザイン","フロントエンド","イベントレポート",[14],{"id":15,"createdAt":16,"updatedAt":17,"publishedAt":16,"revisedAt":17,"name":18,"job":19,"avatar":20,"profile":23},"ba-f_cmju","2024-02-21T00:20:24.175Z","2026-04-13T09:36:16.713Z","阿部 萌夏","フロントエンドエンジニア",{"url":21,"height":22,"width":22},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fe076105dcbbe460eaabb5bbc3f693621\u002Fabe.moeka.jpg",512,"北海道出身、2001年生まれ。専門学校を卒業後、フロントエンドエンジニアとして2023年世路庵に入社。2025年退職。",{"url":25,"height":26,"width":27},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fe301eb7efa60447a9c85a3d7498424c2\u002Fdist-51.png",720,1280,{"fieldId":29,"type":30,"image":32},"ogpImage",[31],"タイプ2（タイトル＋画像）",{"url":33,"height":34,"width":35},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F49f595bc5073476b9594748662db9895\u002Fdist-51-ogp.png",630,1200,1776401660706]