〜架空の展覧会 Web サイト制作プロジェクトを通じて〜
Keywords：生成 AI, Figma, HTML, CSS
近年の Web 制作においては、UI/UX の洗練が求められる一方で、制作スピードの迅速化やプロジェクトの効率的な進行も重要な課題となっている。こうした背景のもと、デザイナーとエンジニアの分業体制が一般化し、両者の連携のあり方が成果物の品質に直結するようになっている。とりわけ、デザインの意図や構造が正確にエンジニアに伝わらないことによって、実装段階での認識齟齬や手戻りが生じるケースは少なくない。
これまで多くの現場では、デザインファイルを静的な形式で共有するか、口頭またはテキストで仕様を補足する方法が取られてきた。しかし、こうした方法では、デザインの背後にあるインタラクションの意図や構造的な文脈を十分に伝えることが難しく、実装上の判断がエンジニアの解釈に委ねられてしまう場面も見られた。
このような課題を解消する手段として注目されているのが、クラウドベースのデザインツール「Figma」である。Figma は、複数の関係者がリアルタイムで同一ファイルを閲覧・編集できるだけでなく、コメント機能や開発者向けのスタイル情報抽出機能を備えており、デザインと実装の間に生じる情報の断絶を緩和する可能性を持っている。また、従来のローカル環境に依存するデザインツールとは異なり、Figma はブラウザベースで動作し、共有性と更新性の面でも優れている。
とはいえ、Figma の導入が即座に効果的な協業を生むわけではなく、その活用の仕方や運用ルールによって得られる成果には大きな差が生じる。特に、どのように設計データを構造化し、どのような粒度で意図を補足するかといった実践的な活用知は、まだ十分に整理されているとは言い難い。本研究では、こうした課題意識のもと、Figma を実際の制作プロセスにおいてどのように活用すれば、デザイナーとエンジニアの間での円滑な情報伝達が実現できるのかを検討する。
本研究の目的は、Figma を活用したウェブ制作プロセスにおいて、デザイナーとエンジニアの協業を円滑に進めるための実践的な方法論を明らかにすることである。単にツールとして Figma を導入するのではなく、その機能をどのように使いこなすことで、デザインの意図が的確に実装に反映され、両者の認識のズレを最小限に抑えることができるのかを探る。
具体的には、架空の展覧会ウェブページを制作するという仮想のプロジェクトを通じて、Figma 上でのデザインデータの整理方法や命名規則、さらにはコメント機能や開発者モードの活用のあり方について検証を行う。その過程で、デザインと実装のやり取りがどのように行われ、どのような点で認識の齟齬が生まれにくくなるのかを考察し、協業の質的な向上を図る。
また、最終的には、Figma を介したデザイン・開発間の橋渡しの具体的な手法を提示し、Web 制作におけるチーム間連携の質的向上に貢献することを研究の目的とする。
本研究では、Figmaを用いたデザイナーとエンジニア間の協業に関する課題と解決策を検討するにあたり、実際の制作現場を模した形での個人によるシミュレーションを行った。具体的には、「架空の展覧会のウェブページ制作」を題材とし、デザイナーおよびエンジニア双方の立場を一人で再現することで、Figmaにおける情報設計とコミュニケーション機能の有効性について検証した。
まず、デザイナーの立場として、Figma上に展覧会を紹介する1ページ構成のウェブデザインを制作した。デザインには、メインビジュアル、開催概要、展示情報、アクセスマップといった基本的な要素を含め、実際のWebサイトを想定したビジュアル表現およびレイアウト設計を行った。
次に、Figmaのレイヤー構造、カラーやタイポグラフィのスタイル、コンポーネントの活用状況などを整理し、エンジニアが開発フェーズにおいて参照しやすい状態を意識して情報設計を調整した。さらに、プロトタイプのインタラクション設計（ボタンの動作、リンク遷移など）や、視覚的強調の意図などについては、Figmaのコメント機能を用いて視覚的に補足説明を加えた。
最終的に、制作から実装の視点を通して、デザイナーとしての表現意図とエンジニアとしての実装可能性のあいだに発生する認識のギャップをどのようにFigmaで補えるかを考察し、コメント機能の活用や構造の可視化の工夫など、実務にも応用可能な知見を得ることを目指した。
Figmaは、デザイナーとエンジニアの間における視覚的・構造的な共通理解の媒介として有効であり、適切な使い方を工夫することでコミュニケーションの質と作業効率の両立が可能となる。本研究を通じて得られた知見は、実務における協業体制の改善に寄与すると期待される。
植物が持つ「生命のリズム」や「記憶」をテーマにした現代アート展。
目には見えにくいけれど確かに存在する植物たちの時間の流れ、成長と衰退、自然と人間の関係を、インスタレーションや映像・写真・サウンドアートで表現。
福岡・六本松文化ギャラリー「TERRA Room」
2025年6月10日〜7月15日（一般：500円／学生：無料）
参考: Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント