JohnSmith/情報デザイン演習IIA

J's SQUARES｜John Smith

身近にある「正方形の面白い！」を紹介する Blog
Keywords：WebDesign, Square / Wordpress, InkScape, Blender

https://design.kyusan-u.ac.jp/OpenSquareJP_WP/

プロジェクトの概要

これは何？

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

目的・背景

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

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

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

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

ターゲット

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

制作物

• Blogサイト URL：https: //squares.wordpress.com
  • 10 x 10 ＝ 100ページ
  • モバイルファーストのデザインで、縦の構図を上部写真・下部解説で使う
    
    

プロジェクトで使用するツール等

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

プロジェクト管理

スケジュール

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

ToDo

• サイトを公開・運用開始 > プロジェクト集結 2020.07.23

2020.07.23

成果の公開

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

2020.07.20

本制作 ＞ 当該週の作業項目を列挙

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

2020.07.13

本制作 ＞ 当該週の作業項目を列挙

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

2020.07.06

プロトタイプの改善 ＞ 当該週の作業項目を列挙

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

2020.06.22 - 29

Webプレゼン ＞ 相互評価

https://design.kyusan-u.ac.jp/OpenSquareJP_WP/

プロトタイプ評価シート　← ココにコメントをお願いします

指摘された問題点

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

好評価を得た点

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

その他

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

2020.06.15

プロトタイピング２週目

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

• WordPressサイトの外観を調整
• 新規の投稿を追加して、投稿間の移動を確認
• 投稿にアイキャッチ画像を設定
  
  

プロトタイプ制作の方法

• WordPress の外観＞カスタマイズ機能を利用
• 記事の投稿には、WordPress の投稿機能を利用
  
  
  
  

2020.06.08

プロトタイピング１週目

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

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

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

プロトタイプ制作の方法

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

2020.06.01

アイデアの絞り込み

情報の公開方法

• Blog形式のWebサイト（WordPress.comサービスを使用）
  
  

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

• 10 x 10 ＝ 100ページ
• モバイルファーストのデザインで、縦の構図を上部写真・下部解説で使う
  
  

情報の内容（素材ネタ）

2020年前期は、大きく以下の２種類に限定（長期的にはカテゴリを増やす）

• 正方形の建築（茶室・東屋）
• 正方形のプロダクト（家具・家電・ステーショナリー・道具）

ネーミング

• J's SQUARE
  
  

情報の構成

• １つの「正方形」につき１ページ
• ページの上部に、正方形の画像、
  その下に対象物の基本情報と解説
• 基本情報は以下のとおり
  • 物品名（商品名）
  • 成立年代（発表年）
  • 製作者（メーカー、デザイナー）
  • サイズ　Width x Height x Depth
  • 素材
    
    

制作環境と方法

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

アイデア創出１｜2020.05.25

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

情報の公開方法

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ソフトとして使い慣れている。動画の編集だけでも使える

現状分析２｜2020.05.18

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

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

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

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

現状調査５｜技法

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

課題の整理

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

現状分析１｜2020.05.11

演習テーマの確定

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

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

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

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

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

ガイダンス｜2020.04.27

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

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

参考リンク

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