• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 野口瑞季/情報デザイン演習IIA_02 へ行く。
  • 1 (2026-06-08 (月) 14:19:12)
  • 2 (2026-06-08 (月) 15:34:40)
  • 3 (2026-06-08 (月) 15:34:40)
  • 4 (2026-06-08 (月) 15:34:40)
  • 5 (2026-06-08 (月) 15:34:40)
  • 6 (2026-06-22 (月) 15:19:13)
  • 7 (2026-06-29 (月) 15:49:04)
  • 8 (2026-07-06 (月) 16:17:26)
  • 9 (2026-07-06 (月) 16:17:26)
  • 10 (2026-07-06 (月) 16:17:26)
  • 11 (2026-07-06 (月) 16:17:26)

---

PLAY & LIFE

PCユーザーのための、きれいに見えるデスクのレイアウト紹介サイト

• 野口 瑞季
• Keywords：Webデザイン, 部屋レイアウト
• https://miz-0301.github.io/PLAY-LIFE

概要

背景と目的

最近PCを購入した際、デスクのある部屋のレイアウトやPC・モニター選びの参考になる初心者向け情報が少ないと感じた。そこで本サイトでは、PC環境づくりを分かりやすく紹介し、初心者が理想の作業空間をつくる手助けを目的とする。

成果物の仕様

Webサイト

• AI生成の流れ
  レイアウトの案出し→レイアウトの詳細→その詳細をもとにした部屋の画像生成→その画像を元にしたレイアウト図の生成
  
  

制作ツール

Visual Studio Code, Chat GPT

使用言語

HTML, CSS

---

---

2026.07.13

• レイアウト詳細に画像を追加
  
  
  
  

2026.07.06

• レイアウトの詳細を追加
• タイトルをクリックでホームページに移動するようにした
• 見ているメニューに下線を追加
  
  
  
  

2026.06.29

見出された問題点

• レイアウト一覧がない
  
  

好評を得た点 ＞ プロジェクトの特性として

• サイトがシンプルで見やすい
• 参考になる
  
  
  
  

2026.06.22

今回制作したプロトタイプ

#image(): File not found: "sightmap2.png" at page "野口瑞季/情報デザイン演習IIA_02"

サイトマップ

ワイヤーフレーム

2026.06.15

現状分析

• https://voltcave.com
• https://www.zetups.com
  
  

課題定義

• 1. 成果物の構成
• 2. 制作環境と方法
  
  

制作上のアイデア

• 1. 成果物の構成
  • 「部屋条件」で探す
  • この部屋を作るのに必要なものを書く
  • PCをこれから買う人向けに見るポイントを解説するページ

• 2. 制作環境と方法
  • Googleサイト
  • HTML・CSS
    
    
    
    

2026.06.08

テーマ候補

• きれいに見える部屋のレイアウト
• 長期的な計画の立て方
• 満員電車を楽にやり過ごす方法
  
  

成果物の仕様

• 形式：Webサイト
  
  

この演習を通して身につけたいスキル

• Webデザイン
• 視線誘導