架空の展覧会のウェブページ作成
Keywords：生成AI, Figma, HTML, CSS
Figma
緑の残響
メインビジュアル
About
植物が持つ「生命のリズム」や「記憶」をテーマにした現代アート展。
目には見えにくいけれど確かに存在する植物たちの時間の流れ、成長と衰退、自然と人間の関係を、インスタレーションや映像・写真・サウンドアートで表現。
Where
福岡・六本松文化ギャラリー「TERRA Room」
Date
2025年6月10日〜7月15日（一般：500円／学生：無料）
進捗記録
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段階モデル
- 表層: 視覚的デザイン
- 骨格: デザインに落とし込むための設計図
- 構造: 構造マップや情報の配置計画、コンテンツの流れなどの情報設計
- 要件: コンテンツや機能を具体的に検討する
- 戦略: アプリ制作の目的やコンセプト、ターゲットを設定する
