[{"data":1,"prerenderedAt":38},["ShallowReactive",2],{"post-dist50-event-report":3},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":7,"revisedAt":6,"title":8,"body":9,"categories":10,"author":14,"thumbnail":26,"ogpImage":30},"dist50-event-report","2025-06-27T09:32:18.274Z","2025-07-29T07:57:00.801Z","2025-07-01T08:50:37.594Z","DIST.50 「あなたのFigmaファイル見せてください！」参加レポート","\u003Cp>2025年6月27日（金）、中野セントラルパーク カンファレンスにて、DIST.50「あなたのFigmaファイル見せてください！」を開催しました。\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%2Fdetails%2Fdist-50&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>この記事では、当日の5つの発表内容をご紹介します。一部の発表はスライドも掲載しているので、ぜひチェックしてみてください。\u003C\u002Fp>\u003Cul>\u003Cli>「デザインシステム Spindleを利用した開発体験」\u003Cbr>サイバーエージェント AmebaLIFE事業本部 フロントエンドエンジニア 安田 慎\u003C\u002Fli>\u003Cli>「FigmaのFigmaファイルから学ぶTips & Tricks」\u003Cbr>Figma Japan株式会社 デザイナーアドボケイト 谷 拓樹\u003C\u002Fli>\u003Cli>「単なる絵ではないFigmaデータ作り」\u003Cbr>株式会社ピクセルグリッド UIデザイナー 小原 司\u003C\u002Fli>\u003Cli>「デザインシステム疲れからの再出発：持続可能な運用への実践的アプローチ」\u003Cbr>株式会社プレイド KARTE プロダクトデザイナー 石垣 純一\u003C\u002Fli>\u003Cli>「5000以上のポーズ・表情パターンをつくれる！　Figmaでつくるキャラクターデザインシステム」\u003Cbr>株式会社necco デザイナー 中川 小雪\u003C\u002Fli>\u003C\u002Ful>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F03cf92fa3809426a8690ddda7725252f\u002Fdist-50-img1.png\" alt=\"\" width=\"1280\" height=\"720\">\u003C\u002Ffigure>\u003Ch2 id=\"hd90b68a740\">デザインシステム Spindleを利用した開発体験\u003C\u002Fh2>\u003Cp>最初のLTでは、株式会社サイバーエージェントのフロントエンドエンジニア・安田慎さんによる発表でした。Amebaのデザインシステム「Spindle」が、開発現場でどのように活用されているのかを詳しくご紹介いただきました。\u003C\u002Fp>\u003Cp>Spindleは、カラーパレットをバリアブルで管理し、約30種類ほどのコンポーネントを提供することで、ブランドトーンに合ったUIを短期間で構築できるデザインシステムです。実際にAmebaの20周年の特設サイトで活用され、コンポーネントを流用することで短期間でブランドトーンに合ったページ制作が実現できたそうです。\u003C\u002Fp>\u003Cp>特に印象深かったのは、文章表記の一貫性を保つために自社開発したtextlintのプラグインについてです。API経由で文章表記をチェックし、ブランドの言葉遣いや表記ルールを統一する仕組みが整えられており、デザインだけでなくテキストの品質までシステムとして一貫している点がとても興味深いと感じました。\u003C\u002Fp>\u003Cp>SpindleのデザインシステムはサイトやFigmaコミュニティ上で公開されていますので、興味がある人はぜひ覗いてみてください。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fspindle.ameba.design\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fspindle.ameba.design%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=\"h9b763a128b\">FigmaのFigmaファイルから学ぶTips & Tricks\u003C\u002Fh2>\u003Cp>2つ目のLTでは、Figma Japan株式会社のデザイナーアドボケイト・谷拓樹さんが登壇し、Figmaで使われているUI3: Figma's UI Kitについてお話しいただきました。\u003C\u002Fp>\u003Cp>このデザインシステムではColor Role Guideというカラーの命名規則ガイドがあり、ボタンやテキストの状態などの役割が色ごとに定義されています。\u003C\u002Fp>\u003Cp>また、Figmaでコンポーネント名にアンダースコアやドットを含めるとコミュニティ公開されないことや、コンポーネントのバリアント表示枠や背景色を自由に変更できるといった小ネタもご紹介いただきました。特に背景色を設定することで、アセットメニューのプレビューに設定した背景色が反映されるので、使わないコンポーネントの背景色を赤色などにしてわかりやすくできる点は参考になりそうだと感じました。\u003C\u002Fp>\u003Cp>詳細は以下のスライドをぜひご確認ください。\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;\">\u003Ciframe src=\"https:\u002F\u002Fspeakerdeck.com\u002Fplayer\u002Ff53eb8db042b400696b53f190f63e8f5\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch2 id=\"hfe1198962c\">単なる絵ではないFigmaデータ作り\u003C\u002Fh2>\u003Cp>次のセッションでは、株式会社ピクセルグリッドのUIデザイナー・小原司さんが登壇しました。\u003C\u002Fp>\u003Cp>小原さんには、「デザイン管理がしやすいデザインデータを作る」ことを重要視しており、その具体的な方法をご紹介いただきました。パッと見で理解しやすいデータ作りを心がけているそうで、認知負荷が高いデザインデータは解読に時間かかり、運用時の修正もしづらくなるため、管理しやすいエンジニアライクな構成を意識しているとのことです。\u003C\u002Fp>\u003Cp>具体例として、CodeGridのサイトリニューアルで作成しているデザインデータを見せていただきました。Figma上で探しているデータが見つけやすいよう見出しをつけたり、バリアブルのデータを書き出してページ上に貼ったり、実装時のデザインルールをまとめたりなど、わかりやすく明確化している点がとても参考になりました。\u003C\u002Fp>\u003Cp>また、アイコンやイラストなどの素材をアセットページで管理しており、書き出しやすくしている点もエンジニアへの配慮も徹底されています。さらに、メモやカーソルもプラグインを使わず自作するなど、細部までこだわった設計には驚かされました。\u003C\u002Fp>\u003Cp>実際に制作中のデータを見て驚いたのが、サイトがすべてコンポーネントの組み合わせで作られている所。ヘッダー・中にコンテンツを入れる用のスロット・フッターで構成されたサイト全体のコンポーネントを作成し、スロットにメインビジュアルや各セクションのコンポーネントを差し込むことで、ページごとに規則が崩れることなく一貫性のあるデザインを実現しているそうです。購読有無などによるページ状態の切り替え、ライト／ダークモード、ブレイクポイントごとのデザインもすべて管理しやすいよう用意されており、エンジニアへの気配りが配慮されているところも参考になりました。\u003C\u002Fp>\u003Cp>\u003C\u002Fp>\u003Ch2 id=\"h46b6cb1687\">デザインシステム疲れからの再出発：持続可能な運用への実践的アプローチ\u003C\u002Fh2>\u003Cp>続いてのセッションでは、株式会社プレイド KARTE プロダクトデザイナー・石垣純一さんに、自社で運用しているKARTEのデザインシステム「Sour」を運用する中で生じたデザインシステム疲れと改善策をお話しいただきました。\u003C\u002Fp>\u003Cp>印象的だったのは、Figma上に説明を書いている企業が多い所、Sourではあえて書かない運用方針にしているといった話です。説明を記載しても読まれないことが多く、管理コストも高いため、Figma上には説明を記載せずドキュメントをGitBookにまとめる運用へシフトしたとのこと。また、コンポーネントの動作確認用のコピーがFigma上に残らないよう徹底しているところも無駄なものを置かないこだわりを感じました。\u003C\u002Fp>\u003Cp>デザインシステム疲れの話では、要因としてバージョンアップコストの高さや微妙に異なるデザインのコンポーネントが乱立し統一性が損なわれることなどが挙げられていました。これらの課題を解決するために、\u003C\u002Fp>\u003Cul>\u003Cli>デザイン・実装面でそれぞれ責任者（番長）を立てる\u003C\u002Fli>\u003Cli>「なぜ疲れるのか」を明確化するために社内ヒアリングの実施\u003C\u002Fli>\u003Cli>パターンごとのコンポーネント組み合わせの用意\u003C\u002Fli>\u003Cli>定例ミーティングの開催\u003C\u002Fli>\u003Cli>検索性・更新性の高いドキュメント作成\u003C\u002Fli>\u003C\u002Ful>\u003Cp>などの施策を実施したそうです。結果、開発進行中のデザイン共有をすることによってコンポーネントが利用しづらい状況の理解やフィードバックがしやすくなり、ドキュメントのPV数は前のStudio時代と比べて20倍になるなど大きく効果があったと話されていました。\u003C\u002Fp>\u003Cp>デザインシステムは作ることがゴールになりがちですが、完璧を求めるよりもチームが持続的に運用できる「疲れないデザインシステム」を目指す重要性を学びました。\u003C\u002Fp>\u003Ch2 id=\"hde160fa74b\">5000以上のポーズ・表情パターンをつくれる！　Figmaでつくるキャラクターデザインシステム\u003C\u002Fh2>\u003Cp>最後のセッションは、株式会社neccoのデザイナー・中川小雪さんによる登壇で、AI家計簿アプリ「ワンバンク」のキャラクターデザインおよびデザインシステムを作成した話をご紹介いただきました。\u003C\u002Fp>\u003Cp>Figmaのコンポーネントプロパティ機能を活用して、キャラクターの顔や表情、ポーズなど5000以上の組み合わせバリエーションを作成しているそうです。これにより、表情やポーズを自由に切り替えられるよう運用が実現されているとのことでした。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F052bf9a1378949d397ff40f63b2442d0\u002Fdist-50-img2.png\" alt=\"\" width=\"1280\" height=\"720\">\u003C\u002Ffigure>\u003Cp>こだわりを感じたところは、1つの感情を表現するために耳の動きや表情、エフェクトの有無など細かなバリエーションを豊富に用意している点です。クライアントへの真摯な向き合い方から熱量が伝わってきました。\u003C\u002Fp>\u003Cp>また、クライアントに向けてFigmaの使い方をわかりやすく資料に掲載している点も親切さが感じられました。さらに、イラストの動作確認も人力で行い、イラストの不具合がないか制作したイラストレーターの方に最終チェックをお願いするなど、丁寧に運用されているところが印象的でした。\u003C\u002Fp>\u003Cp>キャラクターデザインをデザインシステムとしてFigma上で管理するといった新たな視点と、クライアントへの配慮が詰まった学びの多いセッションでした。\u003C\u002Fp>\u003Cp>\u003C\u002Fp>\u003Ch2 id=\"h76da6f3f44\">次回のDIST\u003C\u002Fh2>\u003Cp>次回DIST.51の開催が2025年8月22日（金）に決定しました。テーマは「モダンWebデザインワークフロー（仮）」です。具体的な詳細は後日、\u003Ca href=\"https:\u002F\u002Fdist.tokyo\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">DIST公式サイト\u003C\u002Fa>や\u003Ca href=\"https:\u002F\u002Fx.com\u002Fdist_jp\" target=\"_blank\" rel=\"noopener noreferrer\">DIST公式X\u003C\u002Fa>にて告知する予定です。興味がある方はぜひ、お越しください🙌\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fb76740d3b5054c4d83a94120e1855080\u002Fdist-50-img3.png\" alt=\"\" width=\"1280\" height=\"720\">\u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Chr>\u003Cp>以上、DIST.50 「あなたのFigmaファイル見せてください！」の参加レポートでした。\u003C\u002Fp>\u003Cp>\u003C\u002Fp>\u003Cp style=\"text-align: start\">過去の勉強会の動画はDISTの公式YouTubeチャンネルからいつでもご覧になれます。動画では資料だけでは伝わらない、スピーカーからの解説や実演シーンも見られます。オフラインの勉強会に抵抗を感じている方も、まずは動画から雰囲気を掴んでみてください。\u003C\u002Fp>\u003Cp style=\"text-align: start\">DIST公式サイト：\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"padding-bottom: 52.5%; padding-top: 120px;\">\u003Ca href=\"https:\u002F\u002Fdist.tokyo\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?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%2Fyoutube.com%2F%40distjp%3Ffeature%3Dshared&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>",[11,12,13],"コミュニティ","デザイン","イベントレポート",[15],{"id":16,"createdAt":17,"updatedAt":18,"publishedAt":17,"revisedAt":18,"name":19,"job":20,"avatar":21,"profile":24,"xId":25,"githubId":16},"naramochi","2024-02-14T01:35:50.107Z","2024-02-21T09:39:03.560Z","奈良 葵","ウェブデザイナー",{"url":22,"height":23,"width":23},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fcb42ef4d6bcf42d19aa072be665661ab\u002Fnara.aoi.jpg",512,"栃木県出身、2000年生まれ。日本工学院八王子専門学校のWebクリエイター科を卒業後、新卒で合同会社世路庵にウェブデザイナーとして入社。ウェブデザインはもちろん、コーディングやグラフィックデザインなど幅広い領域に対応できるデザイナーを目指している。","_naramochi",{"url":27,"height":28,"width":29},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fc79557f2ba2448d189fbcaaac09022dd\u002Fdist-50.png",720,1280,{"fieldId":31,"type":32,"image":34},"ogpImage",[33],"タイプ2（タイトル＋画像）",{"url":35,"height":36,"width":37},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F3745d3dbfd5c4386a76610613396045b\u002Fdist-50-ogp.png",630,1200,1776401660706]