Figma を活用したデザイナーとエンジニア間の協業支援に関する一考察
〜架空の展覧会 Web サイト制作プロジェクトを通じて〜
Keywords：生成 AI, Figma, HTML, CSS
Figma
Web サイト
研究
研究背景
近年、Web制作現場におけるUI/UXの高度化とプロジェクトの短納期化に伴い、デザイナーとエンジニア間の円滑な連携がより重要視されている。従来、デザインと実装の間で齟齬が生まれることが多く、デザインの意図が正確にコードへ反映されないという課題が存在した。
その解決策として、クラウドベースのデザインツール「Figma」が注目されている。Figmaはリアルタイムの共同編集機能や開発者向けのコード情報の自動抽出機能などを備え、チーム間のコラボレーションを促進する。しかし、実際のプロジェクトにおけるFigmaの使い方には個人差があり、どのように活用すればコミュニケーションが最適化されるかの知見はまだ限定的である。
研究目的
本研究では、「架空の展覧会のウェブページ制作」を題材に、Figmaを活用したプロジェクトを通じて、デザイナーとエンジニア間の情報伝達と意図共有の質の向上を図る方法を検討する。特に、Figma上での設計データの構造化・命名規則・コメント機能の活用が、円滑な連携に与える影響を明らかにすることを目的とする。
研究方法
1. プロジェクト設定
- 架空の展覧会の特設ウェブページを制作するというシナリオを想定
- デザイナー1名、エンジニア1名による仮想チームを編成
2.制作プロセス
- Figmaを用いてUIデザインを作成。
- デザインコンポーネントは命名規則に基づき整理。
- コメント機能を用いて、インタラクション仕様や意図を明示。
- デザインスペック機能（CSS抽出、寸法情報）をエンジニアに共有。
3.分析視点
結果と考察
- デザインの構造化（レイヤー名、コンポーネント整理）により、エンジニア側での要素の特定が迅速に
- コメント機能の活用により、デザイナーの意図やインタラクションの指示が明確になり、実装ミスが減少
- Figmaの「開発者モード」により、CSS情報の確認が容易となり、フロントエンド実装が効率化
今後の展望
- Figmaガイドラインの策定（命名、コメント、ページ構成ルール）による運用標準化
- Figmaと連携可能なプロトタイピング／アニメーションツールの活用による、より高度な仕様共有
- より多人数・異職種が関与する大規模プロジェクトでの検証を通じて、チーム全体へのスケーラビリティを検討
結論
Figmaは、デザイナーとエンジニアの間における視覚的・構造的な共通理解の媒介として有効であり、適切な使い方を工夫することでコミュニケーションの質と作業効率の両立が可能となる。本研究を通じて得られた知見は、実務における協業体制の改善に寄与すると期待される。
The Echo of Green
About
植物が持つ「生命のリズム」や「記憶」をテーマにした現代アート展。
目には見えにくいけれど確かに存在する植物たちの時間の流れ、成長と衰退、自然と人間の関係を、インスタレーションや映像・写真・サウンドアートで表現。
Where
福岡・六本松文化ギャラリー「TERRA Room」
Date
2025年6月10日〜7月15日（一般：500円／学生：無料）
進捗記録
2025.04.28
- フッターを作成
- 展覧会開催日時をメインビジュアル内に記載
- Figma ファイルのテキストスタイルを作成
2025.04.23 - サイトマップを作成
2025.04.21 - Figma の操作方法を調査
レスポンシブ UI を作成する3つのポイント
- 文字スタイルを設定
- コンポーネントを作成
- オートレイアウトで時短
参考: Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント
2025.04.20 - ベンチマーク調査
- The Museum of Modern Art (ニューヨーク近代美術館)
- メインビジュアルは館内の様子の映像
- サイト内は展示品の画像が多め
- 画像を目立たせるために白基調
- 北九州市立美術館内にあるカフェ
- ホバーアニメーションが洗練されていて好み
講義メモ
2025.04.28
- フッターつける
- 日時は一番上に表示しておく
- メインビジュアルをポスター風にするのもありかも？
- アクセスの場所（最後）に基本情報を一覧で表示
- パソコンのレイアウトを考えながらプロトタイプを作成する
- パソコンのレイアウトはスマホを基準に
- 4つの基本原則（強弱・反復・整列・近接）
- <h2>のスタイルを強調する
2025.04.21
- 展示作品を目立たせる
- ニュートラルなデザイン
- 美術館のトップよりも展示ページの方が参考になるかも？
- 現代美術 = 見る側に判断を委ねる (作品を見た人がどう感じるか？) ため、
- 架空のウェブサイトであることを提示する
- ワイヤーフレームを作成するのもありかも？
- 展示作品を生成してみてイメージを掴む
- このページを参考に
2025.04.14
- 架空の展覧会のウェブページを制作
- 画像生成AIを用いて掲載する画像を作成
- 複数の画像生成AIで作成された画像の比較
- プロトタイプは Figma を使用
- UX の5段階モデル
- 表層: 視覚的デザイン
- 骨格: デザインに落とし込むための設計図
- 構造: 構造マップや情報の配置計画、コンテンツの流れなどの情報設計
- 要件: コンテンツや機能を具体的に検討する
- 戦略: アプリ制作の目的やコンセプト、ターゲットを設定する
