野口瑞季/情報デザイン演習IIA_02

PLAY & LIFE

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

• 野口 瑞季
• Keywords：Webデザイン, 部屋レイアウト
• https://miz-0301.github.io/PLAY-LIFE
• 相互評価シート　ご協力ありがとうございました。

概要

背景と目的

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

成果物の仕様

Webサイト

制作ツール

Visual Studio Code

使用言語

HTML, CSS

2026.07.13

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

2026.07.06

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

2026.06.29

見出された問題点

• レイアウト一覧がない
  
  

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

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

2026.06.22

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

サイトマップ

ワイヤーフレーム

2026.06.15

現状分析

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

課題定義

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

制作上のアイデア

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

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

2026.06.08

テーマ候補

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

成果物の仕様

• 形式：Webサイト
  
  

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

• Webデザイン
• 視線誘導