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/
- 2D解説図作成:InkScape https://inkscape.org/ja/
- 3D解説図作成: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
プロトタイピング2週目
今回制作したプロトタイプ
- WordPressサイトの外観を調整
- 新規の投稿を追加して、投稿間の移動を確認
- 投稿にアイキャッチ画像を設定
プロトタイプ制作の方法
- WordPress の外観>カスタマイズ機能を利用
- 記事の投稿には、WordPress の投稿機能を利用
2020.06.08
プロトタイピング1週目
今回制作したプロトタイプ
- サイトのワイヤーフレーム
- 一般的なブログスタイル
- 2カラム、右サイドバー
- プロトタイプサイトの立ち上げ
>「プロジェクトの現状」に掲載
プロトタイプ制作の方法
- AdobeIllustrator で ワイヤーフレームを制作
- サーバーアカウントの確保
- WordPress システムのインストール
- ワイヤーフレームに近いテーマを暫定的に選定
- サイトのメニューを作成
- ダミーデータの投稿>表示動作確認
2020.06.01
アイデアの絞り込み
情報の公開方法
- Blog形式のWebサイト(WordPress.comサービスを使用)
情報の形式(分量とサイズ)
- 10 x 10 = 100ページ
- モバイルファーストのデザインで、縦の構図を上部写真・下部解説で使う
情報の内容(素材ネタ)
2020年前期は、大きく以下の2種類に限定(長期的にはカテゴリを増やす)
- 正方形の建築(茶室・東屋)
- 正方形のプロダクト(家具・家電・ステーショナリー・道具)
ネーミング
- J's SQUARE
情報の構成
- 1つの「正方形」につき1ページ
- ページの上部に、正方形の画像、
その下に対象物の基本情報と解説 - 基本情報は以下のとおり
- 物品名(商品名)
- 成立年代(発表年)
- 製作者(メーカー、デザイナー)
- サイズ Width x Height x Depth
- 素材
制作環境と方法
- Blogサービス:WordPress https://ja.wordpress.com/
- 2D解説図作成:InkScape https://inkscape.org/ja/
- 3D解説図作成:Blender https://www.blender.org/
- 写真撮影:Panasonic DMC-GH4H
アイデア創出1|2020.05.25
アイデアの量産(思いついたことは、一旦すべて書き出す)
情報の公開方法
Web、冊子、動画のいずれかで思案中
- Webサイト:GitHubPages、X-Freeサーバー、WordPress.comサービス
- 冊子:印刷して学内のラックに置かせてもらう、PDFにしてWebで公開
- 動画:YouTube、Vimeo、
情報の形式(分量とサイズ)
Web、冊子、動画のいずれかで思案中
- Webサイト:
- サイズ:PCベースで 960px幅、1280px幅、スマホベースで 640px幅?
- ページ数: 100ページ、64ページ?、正方形にちなんで2のべき乗にする?
- 冊子:
- サイズ: A5
- ページ数:100ページ、64ページ?、正方形にちなんで2のべき乗にする?
- 1つの話題につき1ページ、4つの話題を1ページに正方形状に?
- 動画:
- サイズ:1920x1018、1280x720、960x960 正方形、縦にするか?
- 本数:16本、9本(少ない?)、一発撮り・無編集で100本?
情報の内容(素材ネタ)
- 正方形の数学的記述
- 「方」という言葉について
- 正方形の空間(計画都市、公園、球場、交差点、建築物、四畳半・・)
- 正方形のプロダクト(家具・インテリア、家電、風呂敷、折り紙・・)
- 正方形のボードゲーム(囲碁・将棋・・・・15パズル・・・)
- 正方形の絵画(キャンバスタイプが S のもの )
- 正方形の写真( 6x6版 HOLGA 、ポラロイド、Instagram・・・)
- その他(柱の断面、線の交差部分、画素、)
ネーミング
英語名か日本語名、どちらかで思案中
- 英語名:S-COLLECTION、T-SQUARE、SQUARES、J's SQUARE、J’s BOX
- 日本語名:正方形であそぼ、せいほうけい、ましかく、
情報の構成
Webと冊子は同様の発想。動画については構成が難しい・・
- Webサイト・冊子
- 1つの話題につき1ページ
- 4つの話題を1ページに正方形状に?
- 動画
- 音楽にあわせて1小節分の時間で1素材
- 要素数の少ないものから、徐々に大きなものへ
- 箱の中にまた箱・・どんどん入れ子状に奥へ進行するイメージ
制作環境と方法
Web、冊子、動画のいずれかで思案中
- Webサイト
- HTML+CSS:個性的なビジュアルデザインにこだわるならこれ。
- MediaWiki:Wikipediaに利用されているもの。百科事典的な整理に向く
- PukiWiki:学科サイトで利用経験があって導入しやすい
- WordPress:Blog形式なので、思いつくたびに投稿・・これが楽。
- 冊子
- Adobe Illustrator:使い慣れている
- Adobe Indesign:マスターページでデザインコントロールしやすい
- 動画
- Adobe Premiere:使い慣れている
- LightWorks:オープンソースの動画編集ツール
- Blender:3Dソフトとして使い慣れている。動画の編集だけでも使える
現状分析2|2020.05.18
現状調査3|時間軸(対象の歴史的知見)
- ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
- ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
- ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
現状調査4|空間軸(対象の地理的知見)
- ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
- ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
- ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
現状調査5|技法
- ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯
- ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
課題の整理
- 情報の公開方法を決める
- 情報の形式(分量とサイズ)を決める
- 情報の内容(素材ネタ)を決める
- ネーミング
- 情報の構成を決める
- 制作環境と方法を決める
現状分析1|2020.05.11
演習テーマの確定
- タイトル:◯◯◯◯◯◯◯◯◯◯◯◯
- テーマ採択の背景:◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯・・・・
・・ ・文章で記載して下さい。・・・・・・・・・・ ・・・・・
・・・・・・・・・・・ ・・・・・・・・・・・
現状調査1 テーマ内容の先行事例
- ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
- ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
- ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
- ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
現状調査2 表現形式の先行事例
- ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
- ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
- ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
- ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
ガイダンス|2020.04.27
プロジェクトのテーマ候補(3件以上)
- ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
- ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
- ◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
参考リンク
- ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
- ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
- ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
- ◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯