#author("2025-05-31T22:18:43+09:00;2025-05-26T13:04:30+09:00","default:art-gs","art-gs") #author("2025-06-01T11:47:47+09:00","default:art-gs","art-gs") // - Header - #setheadercolor(white,"linear-gradient(to top, #f83600 0%, #fe8c00 100%)",0.9) // --- *Figma を活用したデザイナーとエンジニア間の協業支援に関する一考察 〜架空の展覧会 Web サイト制作プロジェクトを通じて〜 ~ //SubTitle ・・・・・・・・・・・・・・・・ Keywords：'''生成 AI, Figma, HTML, CSS''' ~ [[Figma>https://www.figma.com/design/BwZ8FnsBHslU9snXJBehqV/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3---1Q---%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97?node-id=0-1&t=8zAfvYUcGvILLmFG-1]] [[Web>https://25gac27.github.io/the-echo-of-green/]] ~ ~ ---- CENTER:''Theme'' ---- ~ ~ **研究背景 近年の Web 制作においては、UI/UX の洗練が求められる一方で、制作スピードの迅速化やプロジェクトの効率的な進行も重要な課題となっている。こうした背景のもと、デザイナーとエンジニアの分業体制が一般化し、両者の連携のあり方が成果物の品質に直結するようになっている。とりわけ、デザインの意図や構造が正確にエンジニアに伝わらないことによって、実装段階での認識齟齬や手戻りが生じるケースは少なくない。 これまで多くの現場では、デザインファイルを静的な形式で共有するか、口頭またはテキストで仕様を補足する方法が取られてきた。しかし、こうした方法では、デザインの背後にあるインタラクションの意図や構造的な文脈を十分に伝えることが難しく、実装上の判断がエンジニアの解釈に委ねられてしまう場面も見られた。 このような課題を解消する手段として注目されているのが、クラウドベースのデザインツール「Figma」である。Figma は、複数の関係者がリアルタイムで同一ファイルを閲覧・編集できるだけでなく、コメント機能や開発者向けのスタイル情報抽出機能を備えており、デザインと実装の間に生じる情報の断絶を緩和する可能性を持っている。また、従来のローカル環境に依存するデザインツールとは異なり、Figma はブラウザベースで動作し、共有性と更新性の面でも優れている。 とはいえ、Figma の導入が即座に効果的な協業を生むわけではなく、その活用の仕方や運用ルールによって得られる成果には大きな差が生じる。特に、どのように設計データを構造化し、どのような粒度で意図を補足するかといった実践的な活用知は、まだ十分に整理されているとは言い難い。本研究では、こうした課題意識のもと、Figma を実際の制作プロセスにおいてどのように活用すれば、デザイナーとエンジニアの間での円滑な情報伝達が実現できるのかを検討する。 ~ ~ **研究目的 本研究の目的は、Figma を活用したウェブ制作プロセスにおいて、デザイナーとエンジニアの協業を円滑に進めるための実践的な方法論を明らかにすることである。単にツールとして Figma を導入するのではなく、その機能をどのように使いこなすことで、デザインの意図が的確に実装に反映され、両者の認識のズレを最小限に抑えることができるのかを探る。 具体的には、架空の展覧会ウェブページを制作するという仮想のプロジェクトを通じて、Figma 上でのデザインデータの整理方法や命名規則、さらにはコメント機能や開発者モードの活用のあり方について検証を行う。その過程で、デザインと実装のやり取りがどのように行われ、どのような点で認識の齟齬が生まれにくくなるのかを考察し、協業の質的な向上を図る。 また、最終的には、Figma を介したデザイン・開発間の橋渡しの具体的な手法を提示し、Web 制作におけるチーム間連携の質的向上に貢献することを研究の目的とする。 ~ ~ **研究方法 本研究では、Figma を用いたデザイナーとエンジニア間の協業に関する課題と解決策を検討するにあたり、実際の制作現場を模した形での個人によるシミュレーションを行った。具体的には、「架空の展覧会のウェブページ制作」を題材とし、デザイナーおよびエンジニア双方の立場を一人で再現することで、Figma における情報設計とコミュニケーション機能の有効性について検証した。 まず、デザイナーの立場として、Figma 上に展覧会を紹介する1ページ構成のウェブデザインを制作した。デザインには、メインビジュアル、開催概要、展示情報、アクセスマップといった基本的な要素を含め、実際の Web サイトを想定したビジュアル表現およびレイアウト設計を行った。 次に、Figma のレイヤー構造、タイポグラフィのスタイル、コンポーネントの活用状況などを整理し、エンジニアが開発フェーズにおいて参照しやすい状態を意識して情報設計を調整した。さらに、プロトタイプのインタラクション設計（ボタンの動作、リンク遷移など）や、視覚的強調の意図などについては、Figmaのコメント機能を用いて視覚的に補足説明を加えた。 最終的に、制作から実装の視点を通して、デザイナーとしての表現意図とエンジニアとしての実装可能性のあいだに発生する認識のギャップをどのように Figma で補えるかを考察し、コメント機能の活用や構造の可視化の工夫など、実務にも応用可能な知見を得ることを目指した。 ~ ~ **結果と考察 本研究において、Figmaを用いたウェブページの制作と情報設計を行った結果、デザインデータの構造化とコメント機能の活用が、エンジニア側の作業効率および実装精度の向上に寄与することが確認された。 まず、デザインの構造化に関しては、レイヤー名を論理的かつ一貫性のある形式で命名し、階層構造が視覚的に整理されていたことにより、エンジニア視点での要素の特定が迅速に行えるようになった。特に、共通パーツをコンポーネント化し、それらに機能や用途に応じた命名を施したことで、各要素の再利用性が高まり、全体構造の把握が容易になった。また、ページ全体をセクション単位で分割して管理することで、意図する要素へ即座にアクセスできる環境が整った。 次に、コメント機能の活用においては、インタラクションやアニメーションに関する意図などをFigma上に直接記述することで、設計意図が明確に伝わる状態を構築できた。これにより、実装時における誤解や手戻りの発生は大きく減少し、エンジニアが迷うことなく実装作業に着手することが可能となった。 ~ ~ **今後の展望 本研究を通じて得られた知見は、Figma を活用した制作プロセスの質的向上に一定の効果をもたらすものであったが、より実践的かつ汎用性の高い運用方法を確立するためには、いくつかの課題と発展の余地が残されている。今後の展望として、まず挙げられるのは、Figma をチームで運用する際のガイドラインの策定である。具体的には、レイヤーやコンポーネントの命名規則、コメント記述の形式、ページ構成の方針といった点をあらかじめ定めておくことで、複数人が関わる場合にもデザインデータの読みやすさと一貫性を保ちやすくなると考えられる。 また、Figma 単体での仕様共有には限界がある場面も想定されることから、より高度なインタラクションやアニメーションの仕様を正確に伝えるために、Figma と連携可能なプロトタイピングツールやモーショングラフィックツール（たとえば Protopie や After Effects など）の活用も今後の検討課題となる。これにより、静的な画面デザインを超えた動的な挙動の共有が可能となり、特に複雑なユーザーインターフェースの設計においては、実装の質をさらに高める手段となるだろう。 さらに、本研究では一人でのシミュレーションという制約のもとで検証を行ったが、今後はより多人数かつ異なる職種（デザイナー、エンジニア、ディレクターなど）が関与する大規模なプロジェクトにおいて、Figma の運用がどのように機能しうるかを検証することも重要である。実際のチーム制作の現場に近い状況で検討を行うことで、本研究で得られた知見のスケーラビリティを評価し、より普遍的な協業支援ツールとしての Figma 活用法を模索していくことが期待される。 ~ ~ **結論 Figmaは、デザイナーとエンジニアの間における視覚的・構造的な共通理解の媒介として有効であり、適切な使い方を工夫することでコミュニケーションの質と作業効率の両立が可能となる。本研究を通じて得られた知見は、実務における協業体制の改善に寄与すると期待される。 ~ ~ ~ ~ ~ ---- CENTER:''The Echo of Green'' ---- ~ #image(main-visual.png) ~ ~ ~ **About 植物が持つ「生命のリズム」や「記憶」をテーマにした現代アート展。 目には見えにくいけれど確かに存在する植物たちの時間の流れ、成長と衰退、自然と人間の関係を、インスタレーションや映像・写真・サウンドアートで表現。 ~ ~ ~ **Where 福岡・六本松文化ギャラリー「TERRA Room」 ~ ~ ~ **Date 2025年6月10日〜7月15日（一般：500円／学生：無料） ~ ~ ~ ---- CENTER:''進捗記録'' ---- ~ **2025.06.01 -Hero 以外の画像を Lazy loading に変更 ~ ~ **2025.05.31 -画像フォーマットを jpg から Webp に変更 ~ ~ **2025.05.25 -Figma ファイルの整理 ~ ~ **2025.05.12 -Figma でスマホ版と Web 版のプロトタイプをそれぞれ作成 ~ ~ **2025.04.28 -フッターを作成 -展覧会開催日時をメインビジュアル内に記載 -Figma ファイルのテキストスタイルを作成 ~ ~ **2025.04.23 - サイトマップを作成 #image(sitemap.png) ~ ~ **2025.04.21 - Figma の操作方法を調査 ***レスポンシブ UI を作成する3つのポイント -文字スタイルを設定 -コンポーネントを作成 -オートレイアウトで時短 参考: [[Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント>https://stocker.jp/diary/figma-rwd-point/]] ~ ~ **2025.04.20 - ベンチマーク調査 ***[[MoMA>https://www.moma.org/]] -The ''M''useum ''o''f ''M''odern ''A''rt (ニューヨーク近代美術館) -メインビジュアルは館内の様子の映像 -サイト内は展示品の画像が多め -画像を目立たせるために白基調 ~ ***[[CAFE MUSÉE>https://www.cafemusee.net/]] -北九州市立美術館内にあるカフェ -ホバーアニメーションが洗練されていて好み ~ ~ //#hr //CENTER:''講義メモ'' //#hr //~ //**2025.04.28 //- フッターつける //- 日時は一番上に表示しておく //- メインビジュアルをポスター風にするのもありかも？ //- アクセスの場所（最後）に基本情報を一覧で表示 //- パソコンのレイアウトを考えながらプロトタイプを作成する //- パソコンのレイアウトはスマホを基準に //- 4つの基本原則（強弱・反復・整列・近接） //- <h2>のスタイルを強調する //~ //~ //**2025.04.21 //-展示作品を目立たせる //-ニュートラルなデザイン //-美術館のトップよりも展示ページの方が参考になるかも？ //-現代美術 = 見る側に判断を委ねる (作品を見た人がどう感じるか？) ため、 //-架空のウェブサイトであることを提示する //-ワイヤーフレームを作成するのもありかも？ //-展示作品を生成してみてイメージを掴む //-この[[ページ>https://www.moma.org/calendar/exhibitions/5729]]を参考に //~ //~ //**2025.04.14 //-架空の展覧会のウェブページを制作 //-画像生成AIを用いて掲載する画像を作成 //-複数の画像生成AIで作成された画像の比較 //-プロトタイプは Figma を使用 //-UX の5段階モデル //--表層: 視覚的デザイン //--骨格: デザインに落とし込むための設計図 //--構造: 構造マップや情報の配置計画、コンテンツの流れなどの情報設計 //--要件: コンテンツや機能を具体的に検討する //--戦略: アプリ制作の目的やコンセプト、ターゲットを設定する //~