渡邊和幸/情報デザイン前半 をテンプレートにして作成

開始行:
// - 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段階モデル //--表層: 視覚的デザイン //--骨格: デザインに落とし込むための設計図 //--構造: 構造マップや情報の配置計画、コンテンツの流れな... //--要件: コンテンツや機能を具体的に検討する //--戦略: アプリ制作の目的やコンセプト、ターゲットを設定... //~

ページ名: