JohnSmith/情報デザイン演習IIA

J's SQUARES｜John Smith

身近にある「正方形の面白い！」を紹介する Blog

• John Smith
• https://www.example.com
• Keywords：WebDesign, Square / Wordpress, InkScape, Blender
  
  

相互評価 2025.04.28

• プロトタイプ評価シート　← ココにコメントをお願いします
  このページの編集画面からソースをコピーするのではなく、これと同様の共同編集シートを自分のGoogleドライブ内に作成した上で、そのシートに名簿をコピー＆ペーストしてご利用ください。
  
  
  
  

Overview

Introduction

身近にある「正方形の面白い！」を紹介する Blog サイトの構築。
正方形の建築とプロダクトを中心に 10x10=100件の事例を紹介。

Background and Purpose

| x | + | y | = r 　…　正方形は美しい数式*1で表現することができます。

風呂敷、折り紙、四畳半。自然との調和を重んじる日本人は、このカタチを「良し」として、正方形を基調とした様々なデザインを生み出しました。

私たちの身近にある「正方形」の活用事例を、発見する都度、Blogに投稿していくことで、「正方形」に関する「知」のコレクションにしたいと思います。

Blog システムでは、投稿ごとに自由にタグをつけることができます。タグ・クラウドの表示によって、従来とは異なる新しい視点で「正方形のデザイン」を分類できるかもしれません。

ターゲット

カタチとデザインに興味のある学生

Output

• URL：https: //www.example.com
• 仕様
  • サイズ・レイアウト：２カラム・右サイドバー
  • 記事：100ページ（各ページ 写真３点＋解説文+リンク）

Tools

• Blogサービス：WordPress　https://ja.wordpress.com/
• ２D解説図作成：InkScape　https://inkscape.org/ja/
• ３D解説図作成：Blender 　https://www.blender.org/
• 写真撮影：Panasonic DMC-GH4H
  
  

Term

202X.XX.XX - 202X.XX.XX

Conclusion

（プロジェクト完了時に執筆）

プロジェクト管理

スケジュール

• 進行管理表　 ← 作業の記録

参考：シートが「閲覧のみ」であることを確認するには

• 1) シートの共有リンクのURLをコピー
• 2) Googleにログインしていない別のブラウザを起動
• 3) 2で起動したブラウザのアドレス欄に 1)で取得したURLをペースト
• 4) シートの上部に「閲覧のみ」が表示されていればOKです。
  
  

ToDo

• サイトのメニューを作成
• WordPress システムのインストール
• サーバーアカウントの確保

• 情報の公開方法を決める
• 情報の形式（分量とサイズ）を決める
• 情報の内容（素材ネタ）を決める
• ネーミング
• 情報の構成を決める
• 制作環境と方法を決める
  
  
  
  

202X.XX.XX

成果発表準備

• ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
• ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
• ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
  
  

202X.XX.XX

XXXXX

• ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
• ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
• ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
  
  

XXXXX

• ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
• ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
• ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
  
  
  
  

202X.XX.XX

XXXXX

• ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
• ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
• ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
  
  

XXXXX

• ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
• ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
• ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
  
  
  
  

202X.XX.XX

制作物の現状

成果物（現状）のスクリーンショット等、視覚的な資料とコメント

今週の取り組み

今週取り組んだ調査、実験、技術的な訓練、作業内容等

今後の課題

発見された問題、解決すべき課題等　＞ ToDoに記載

202X.XX.XX

制作物の現状

成果物（現状）のスクリーンショット等、視覚的な資料とコメント

今週の取り組み

今週取り組んだ調査、実験、技術的な訓練、作業内容等

今後の課題

発見された問題、解決すべき課題等　＞ ToDoに記載

202X.XX.XX

指摘された問題点

• ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
• ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
• ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
• ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
  
  

好評価を得た点

• ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
• ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
• ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
• ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
  
  

その他

• ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
• ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
• ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
• ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
  
  
  
  

プロトタイピング｜202X.XX.XX

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

• サイトのワイヤーフレーム
  • 一般的なブログスタイル
  • ２カラム、右サイドバー
    
    

• プロトタイプサイトの立ち上げ
  ＞「プロジェクトの現状」に掲載
  
  

プロトタイプ制作の方法

• AdobeIllustrator で ワイヤーフレームを制作
• サーバーアカウントの確保
• WordPress システムのインストール
• ワイヤーフレームに近いテーマを暫定的に選定
• サイトのメニューを作成
• ダミーデータの投稿＞表示動作確認
  
  
  
  

アイデア創出｜202X.XX.XX

アイデアの量産（思いついたことは、一旦すべて書き出す）

情報の公開方法

Web、冊子、動画のいずれかで思案中

• Webサイト：GitHubPages、X-Freeサーバー、WordPress.comサービス
• 冊子：印刷して学内のラックに置かせてもらう、PDFにしてWebで公開
• 動画：YouTube、Vimeo、
  
  

情報の形式（分量とサイズ）

Web、冊子、動画のいずれかで思案中

• Webサイト：
  • サイズ：PCベースで 960px幅、1280px幅、スマホベースで 640px幅？
  • ページ数： 100ページ、64ページ？、正方形にちなんで２のべき乗にする？
• 冊子：
  • サイズ： A5
  • ページ数：100ページ、64ページ？、正方形にちなんで２のべき乗にする？
  • １つの話題につき１ページ、４つの話題を１ページに正方形状に？
• 動画：
  • サイズ：1920x1018、1280x720、960x960 正方形、縦にするか？
  • 本数：16本、9本（少ない？）、一発撮り・無編集で100本？
    
    

情報の内容（素材ネタ）

• 正方形の数学的記述
• 「方」という言葉について
• 正方形の空間（計画都市、公園、球場、交差点、建築物、四畳半・・）
• 正方形のプロダクト（家具・インテリア、家電、風呂敷、折り紙・・）
• 正方形のボードゲーム（囲碁・将棋・・・・15パズル・・・）
• 正方形の絵画（キャンバスタイプが S のもの ）
• 正方形の写真（ 6x6版 HOLGA 、ポラロイド、Instagram・・・）
• その他（柱の断面、線の交差部分、画素、）
  
  

ネーミング

英語名か日本語名、どちらかで思案中

• 英語名：S-COLLECTION、T-SQUARE、SQUARES、J's SQUARE、J’s BOX
• 日本語名：正方形であそぼ、せいほうけい、ましかく、
  
  

情報の構成

Webと冊子は同様の発想。動画については構成が難しい・・

• Webサイト・冊子
  • １つの話題につき１ページ
  • ４つの話題を１ページに正方形状に？
• 動画
  • 音楽にあわせて１小節分の時間で１素材
  • 要素数の少ないものから、徐々に大きなものへ
  • 箱の中にまた箱・・どんどん入れ子状に奥へ進行するイメージ

制作環境と方法

Web、冊子、動画のいずれかで思案中

• Webサイト
  • HTML+CSS：個性的なビジュアルデザインにこだわるならこれ。
  • MediaWiki：Wikipediaに利用されているもの。百科事典的な整理に向く
  • PukiWiki：学科サイトで利用経験があって導入しやすい
  • WordPress：Blog形式なので、思いつくたびに投稿・・これが楽。
• 冊子
  • Adobe Illustrator：使い慣れている
  • Adobe Indesign：マスターページでデザインコントロールしやすい
• 動画
  • Adobe Premiere：使い慣れている
  • LightWorks：オープンソースの動画編集ツール
  • Blender：３Dソフトとして使い慣れている。動画の編集だけでも使える

現状分析｜202X.XX.XX

演習テーマの確定

• タイトル：◯◯◯◯◯◯◯◯◯◯◯◯
• テーマ採択の背景：◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯・・・・
  ・・ ・文章で記載して下さい。・・・・・・・・・・ ・・・・・
  ・・・・・・・・・・・ ・・・・・・・・・・・
  
  

現状調査１ テーマ内容の先行事例

• ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
• ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
• ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
• ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
  
  

現状調査２ 表現形式の先行事例

• ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
• ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
• ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
• ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
  
  

現状調査３｜時間軸（対象の歴史的知見）

• ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
• ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
• ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
  
  

現状調査４｜空間軸（対象の地理的知見）

• ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
• ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
• ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
  
  

現状調査５｜技法

• ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯
• ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
  
  

課題の整理

• 情報の公開方法を決める
• 情報の形式（分量とサイズ）を決める
• 情報の内容（素材ネタ）を決める
• ネーミング
• 情報の構成を決める
• 制作環境と方法を決める
  
  
  
  

ガイダンス｜202X.XX.XX

プロジェクトのテーマ候補（３件以上）

• ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
• ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
• ◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
  
  

参考リンク

• ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
• ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
• ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
• ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯