#author("2026-07-20T16:54:05+09:00;2026-07-06T16:17:26+09:00","default:member","member") #author("2026-07-21T14:49:12+09:00;2026-07-06T16:17:26+09:00","default:member","member") *PLAY & LIFE PCユーザーのための、きれいに見えるデスクのレイアウト紹介サイト #image(main-2.png) -''野口 瑞季'' -'''Keywords：Webデザイン, 部屋レイアウト''' -https://miz-0301.github.io/PLAY-LIFE //-%%相互評価シート%% ご協力ありがとうございました。 ~ **概要 ***背景と目的 最近PCを購入した際、デスクのある部屋のレイアウトやPC・モニター選びの参考になる初心者向け情報が少ないと感じた。そこで本サイトでは、PC環境づくりを分かりやすく紹介し、初心者が理想の作業空間をつくる手助けを目的とする。 ~ ~ ***成果物の仕様 Webサイト |#image(sightmap2.png)|#image(wireframe2.png)| |#image(sitemap2.png)|#image(wireframe2.png)| -AI生成の流れ レイアウトの案出し→レイアウトの詳細→その詳細をもとにした部屋の画像生成→その画像を元にしたレイアウト図の生成 ~ ***制作ツール Visual Studio Code, Chat GPT ~ ~ ***使用言語 HTML, CSS ~ ~ #hr CENTER:''進捗記録'' #hr ~ ~ **2026.07.13 -レイアウト詳細に画像を追加 ~ ~ **2026.07.06 -レイアウトの詳細を追加 -タイトルをクリックでホームページに移動するようにした -見ているメニューに下線を追加 ~ ~ **2026.06.29 ***見出された問題点 -レイアウト一覧がない ~ ***好評を得た点 ＞ プロジェクトの特性として -サイトがシンプルで見やすい -参考になる ~ ~ **2026.06.22 ***今回制作したプロトタイプ #image(sightmap2.png) #image(sitemap2.png) サイトマップ ~ #image(wireframe2.png) ワイヤーフレーム ~ ~ **2026.06.15 ***現状分析 -https://voltcave.com -https://www.zetups.com ~ ***課題定義 -1. 成果物の構成 -2. 制作環境と方法 ~ ***制作上のアイデア -1. 成果物の構成 --「部屋条件」で探す --この部屋を作るのに必要なものを書く --PCをこれから買う人向けに見るポイントを解説するページ -2. 制作環境と方法 --Googleサイト --HTML・CSS ~ ~ **2026.06.08 ***テーマ候補 -''きれいに見える部屋のレイアウト'' -%%長期的な計画の立て方%% -%%満員電車を楽にやり過ごす方法%% ~ ***成果物の仕様 -形式：Webサイト ~ ***この演習を通して身につけたいスキル -Webデザイン -視線誘導 ~ ~ ~