渡邊和幸/情報デザイン前半
をテンプレートにして作成
HOME
ABOUT
造形表現専攻概要
大学院進学希望の方へ
INFORMATION
論文等執筆要領
学位申請に関わる書類
学位論文等スケジュール
研究成果の公表
大学からのお知らせ
?
STUDENTS
STAFF
[ EDIT ]
?
SEARCH
開始行:
// - Header -
#setheadercolor(white,"linear-gradient(to top, #f83600 0%...
// ---
*Figma を活用したデザイナーとエンジニア間の協業支援に関す...
〜架空の展覧会 Web サイト制作プロジェクトを通じて〜
~
//SubTitle ・・・・・・・・・・・・・・・・
Keywords:'''生成 AI, Figma, HTML, CSS'''
~
[[Figma>https://www.figma.com/design/BwZ8FnsBHslU9snXJBeh...
[[Web>https://25gac27.github.io/the-echo-of-green/]]
~
~
----
CENTER:''Theme''
----
~
~
**研究背景
近年の Web 制作においては、UI/UX の洗練が求められる一方で...
これまで多くの現場では、デザインファイルを静的な形式で共...
このような課題を解消する手段として注目されているのが、ク...
とはいえ、Figma の導入が即座に効果的な協業を生むわけでは...
~
~
**研究目的
本研究の目的は、Figma を活用したウェブ制作プロセスにおい...
具体的には、架空の展覧会ウェブページを制作するという仮想...
また、最終的には、Figma を介したデザイン・開発間の橋渡し...
~
~
**研究方法
本研究では、Figma を用いたデザイナーとエンジニア間の協業...
まず、デザイナーの立場として、Figma 上に展覧会を紹介する1...
次に、Figma のレイヤー構造、タイポグラフィのスタイル、コ...
最終的に、制作から実装の視点を通して、デザイナーとしての...
~
~
**結果と考察
本研究において、Figmaを用いたウェブページの制作と情報設計...
まず、デザインの構造化に関しては、レイヤー名を論理的かつ...
次に、コメント機能の活用においては、インタラクションやア...
~
~
**今後の展望
本研究を通じて得られた知見は、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デザインを...
~
~
**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...
//~
//~
//**2025.04.14
//-架空の展覧会のウェブページを制作
//-画像生成AIを用いて掲載する画像を作成
//-複数の画像生成AIで作成された画像の比較
//-プロトタイプは Figma を使用
//-UX の5段階モデル
//--表層: 視覚的デザイン
//--骨格: デザインに落とし込むための設計図
//--構造: 構造マップや情報の配置計画、コンテンツの流れな...
//--要件: コンテンツや機能を具体的に検討する
//--戦略: アプリ制作の目的やコンセプト、ターゲットを設定...
//~
終了行:
// - Header -
#setheadercolor(white,"linear-gradient(to top, #f83600 0%...
// ---
*Figma を活用したデザイナーとエンジニア間の協業支援に関す...
〜架空の展覧会 Web サイト制作プロジェクトを通じて〜
~
//SubTitle ・・・・・・・・・・・・・・・・
Keywords:'''生成 AI, Figma, HTML, CSS'''
~
[[Figma>https://www.figma.com/design/BwZ8FnsBHslU9snXJBeh...
[[Web>https://25gac27.github.io/the-echo-of-green/]]
~
~
----
CENTER:''Theme''
----
~
~
**研究背景
近年の Web 制作においては、UI/UX の洗練が求められる一方で...
これまで多くの現場では、デザインファイルを静的な形式で共...
このような課題を解消する手段として注目されているのが、ク...
とはいえ、Figma の導入が即座に効果的な協業を生むわけでは...
~
~
**研究目的
本研究の目的は、Figma を活用したウェブ制作プロセスにおい...
具体的には、架空の展覧会ウェブページを制作するという仮想...
また、最終的には、Figma を介したデザイン・開発間の橋渡し...
~
~
**研究方法
本研究では、Figma を用いたデザイナーとエンジニア間の協業...
まず、デザイナーの立場として、Figma 上に展覧会を紹介する1...
次に、Figma のレイヤー構造、タイポグラフィのスタイル、コ...
最終的に、制作から実装の視点を通して、デザイナーとしての...
~
~
**結果と考察
本研究において、Figmaを用いたウェブページの制作と情報設計...
まず、デザインの構造化に関しては、レイヤー名を論理的かつ...
次に、コメント機能の活用においては、インタラクションやア...
~
~
**今後の展望
本研究を通じて得られた知見は、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デザインを...
~
~
**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...
//~
//~
//**2025.04.14
//-架空の展覧会のウェブページを制作
//-画像生成AIを用いて掲載する画像を作成
//-複数の画像生成AIで作成された画像の比較
//-プロトタイプは Figma を使用
//-UX の5段階モデル
//--表層: 視覚的デザイン
//--骨格: デザインに落とし込むための設計図
//--構造: 構造マップや情報の配置計画、コンテンツの流れな...
//--要件: コンテンツや機能を具体的に検討する
//--戦略: アプリ制作の目的やコンセプト、ターゲットを設定...
//~
ページ名: