LogoMark.png

渡部楓花/情報デザイン研究I のバックアップの現在との差分(No.19)


#author("2021-06-24T07:48:45+09:00;2021-06-16T23:56:20+09:00","default:member","member")
#author("2021-07-08T09:39:59+09:00;2021-07-01T02:39:00+09:00","default:member","member")
//*BooKlothes
//本が着飾る
#image(Mcover.png)
~
-''Project Director:渡部ふうか''
-'''Keywords:ブックカバー ,Webサイト ,本の服 '''
-https://watabef.github.io/Bookloset/
-[[Webサイト(BooKloset)>https://watabef.github.io/Bookloset/]]

~


**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};

ブックカバーのデザインがダウンロードできるWebサイト

~

***Background and Purpose
//&color(red){プロジェクトの背景と目的};

-背景
漫画や小説…誰もが一度は手にしたことがある紙書籍だが、近年の電子書籍化により出版数に変化が訪れている。
しかし、紙書籍は電子書籍にはない良さを持っている。
その中のひとつが''実際に手に取って読むことができる満足感''だ。
1枚1枚ページをめくって読み進める楽しさは、紙書籍でしか味わうことはできない。
そこで、紙書籍の良さを知ってもらうきっかけ作りができないかと考えた。

-目的
紙書籍に触れる機会を作るために、面白いブックカバーがダウンロードできるWebサイトを制作する。
そして実際に印刷して使ってもらう。
~

***Concept
//&color(red){基本的な考え方、枠組み、視点など};
-実際に印刷して使いたくなるような面白いアイデアのブックカバー
-それらをダウンロードできるWebサイト
~

***Output
//&color(red){成果物の直接掲載またはリンク誘導};
//&color(red){&small(プロジェクトの途上では、試作品等、視覚的な資料を掲載・リンクして下さい。);};
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本情報も記載して下さい。);};
~
-6種類のブックカバーを選んでダウンロードできるWebサイト
-自分で切って組み立てる工作要素のあるアイデアのブックカバー
#image(output.png,center,60%)
-[[ブックカバーを選んでダウンロードできるWebサイト>https://watabef.github.io/Bookloset/]]

~


//***Member
//&color(red){共同プロジェクトの場合のみ|メンバーと役割分担を明記};
//~

***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
-Adobe Illustrator
-Word Press
-Git Hub
-Atom

~

***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };

2021.04.08 - 2021.07.08 
~

//***Conclusion / Summary 
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
~
~


**Survey

***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
-[[電子書籍の進化普及による出版業界構造変化へのインパクト>https://www.nttdata-strategy.com/knowledge/reports/archives/2013/1025/index.html]]
-[[紙書籍と電子書籍における消費者行動の変化>http://www.cit.nihon-u.ac.jp/laboratorydata/kenkyu/kouennkai/reference/No.51/pdf/5-21.pdf]]
-調査の結果、電子書籍が紙書籍の出版数を超えているのが現状。しかし、電子書籍の普及によって紙書籍の売り上げに相乗的にプラスな面があることがわかる。


~

***Precedent
//&color(red){先行事例の紹介、傾向分析など};

-__[[hontoブックカバー>https://honto.jp/netstore/bookcover.html]]__
--様々な種類のブックカバーがあるため、選ぶ楽しみがある。
--印刷の仕方や折り方の説明があって親切。
--コンビニからも印刷が可能なので、家にプリンターが無い人への考慮がされている。
~
-__[[本の洋服屋 I chobitt>https://chobitt.com/book/]]__
--デザインのカテゴリ分けをしているので、探しやすくなっている。
~
-__[[未来屋書店・アシーネ>https://www.miraiyashoten.co.jp/bookcover/]]__
--書店では手に入らないデザインも取り扱っている。
--Webサイトとしての完成度が高い。
~

***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
-__[[WordPressでダウンロードページを作る方法>https://wordpress-dic.com/wordpress-download#Download_Monitor]]__
-[[HTML無料テンプレートサイト「テンプレどん」>https://popo-design.net/template/]]


~
~

**Project Management

***Schedule
__[[スケジュール管理>https://docs.google.com/spreadsheets/d/1tQidZL2uInl9ZQb9m1hxZFs7YmEqPrJLL--MLsYwo7A/edit?usp=sharing]]__
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};

-%%テーマの決定%%
-%%テーマに基づいた調査%%
-%%進行管理表作成%%
-%%シンボルマーク・ロゴタイプ決定%%
-%%メインビジュアルの作成%%
-%%ブックカバーのPDFデータ作成(6/6)%%
--%%カレンダー入りのモダンなデザイン%%
--%%メモを書き込めるデザイン%%
--トレーシングペーパーに印刷する専用のデザイン
-%%Webサイトのフレームワーク作成%%
-%%Webサイトのレイアウト制作%%


~
~
~

#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr

~
~

**2021.07.5
***指摘された問題
-シンボルマークではハンガーが主役に見えるため、ブックカバーが目立たなくなっている。
-誰でもダウンロードして利用できるサイトということがわからない。


~
~

**2021.06.30
#image(cover02.png,center,40%)
-メインビジュアルのハンガーを追加
-サイト全体の統一感を表現した

~
[[BooKloset>https://watabef.github.io/Bookloset/]]
-画面表示の比率を調整

~
~
~


**2021.06.23

***ブックカバーデザイン制作
#image(cover.png,center,40%)
-春夏秋冬で異なるデザイン
-カレンダーと日付を付けることで、使いたくなる仕組みを作った
-季節ごとの色のイメージを選定

[[BooKloset>https://watabef.github.io/Bookloset/]]
-画像が正常に表示されない不具合を修正


~
~
~

**2021.06.16
***中間発表での指摘
-メインビジュアルの「K」の曲線が不自然
-「K」と「C」の造語だが「C」に見えない

***修正
-曲線を滑らかにし、「C」に見えるよう修正


***ブックカバーのアイデアまとめ
-カレンダー入りのモダンなデザイン
--[[Illustratorを使ったカレンダーデータの作り方>https://www.wave-inc.co.jp/weblog/?p=4011]]
-折り込み部分にメモを書き込めるデザイン
-トレーシングペーパーに印刷する専用のデザイン
--トレーシングペーパーを使用して、自宅で印刷する方法を説明する図案も必要
-読み始め・読み終わりの日付を書き込めるデザイン

~

***試作

#image(Sample3.jpg,center,40%)
-読み始め・読み終わりの日付を書き込めるデザインの試作


~
~
~

**2021.06.9
***立体ブックカバー試作

|45|3|55|c
|#image(sample1.jpg)||#image(sample2.jpg)|


-本棚に立てた時に、背表紙が飛び出て引き出しやすい形状を試作。
-外面は理想の形にできたが、中の青色の紙が干渉して本にかけることができない。

~

**2021.06.02
***タイトルの修正
-「BooKlothes」が既存のアイデアだったため、「Book」+「Closet」「Bookloset」に変更
-本の服を収納したクローゼット(Webサイト)という意味合いを込めた

***Webサイト作成
-ワイヤーフレームに近いテンプレートをダウンロードして、そこからカスタマイズして調整をした。
--[[使用したテンプレート>https://popo-design.net/template/]] (このサイトの「ポートフォリオ」より)

~
~
~

**2021.05.26
***ロゴタイプの修正
#image(タイトル.png,center,60%)
--「K」の形がフォントの「I + C」のままで不自然さがあったため修正
--画面をすっきりさせて造語に集中してもらうため、エレメントがシンプルな「筑紫B丸ゴシック」→「筑紫A丸ゴシック」に変更
~

***シンボルマーク制作

|50|3|50|c
|#image(Smark1.png)||#image(Smark2.png)|

--ブックカバーは本の服というイメージから、本がハンガーにかかっているようなイメージ
--ブックカバーを選んで着せ替える楽しさや好奇心を連想するオレンジを選定

~

***ブックカバー制作

#image(BC01.png,center,70%)
--本を持った時の手の跡を象ったデザインのブックカバー
--足跡ではなく手の跡

~
~
~

**2021.05.22
***シンボルマークのアイデアスケッチ

|50|3|35|c
|#image(IS01.jpg)||#image(IS02.jpg)|

~
-「BooKlothes」のタイトルに合ったシンボルマークを考案
~
Webサイトのアイコンに使用するため
  ↓
--小さく表示しても認識できるデザイン
--小さく表示しても潰れないようなシンプルなデザインを目指す

~
~
~

**2021.05.19
***ロゴタイプの試作
#image(タイトル3.jpg)
--「K」に見えるように「I」と「C」を組み合わせたデザイン。
--「Book」+「Clothes」の造語なのでどこか不自然さが生じるため、改善案を中間発表までに仕上げる。

~
~
~

**2021.05.12

***サイズの規定


#image(カバー規定.jpg)
#image(cover_kitei.jpg)


--A4で印刷する前提のサイズを規定
--ブックカバーの折り曲げる場所や表紙の位置などの規定を制作

~
~
~

**2021.05.11
***ブックカバーのサイズ調査
--A6判:W105×H148mm
--A5判:W148×H210mm
(本の分厚さによって多少異なる)

~

自身で印刷して使ってもらうことを目的とするため、A4の紙に収まるサイズの本のブックカバー(A6判)を作成する。

~
~
~

**2021.05.5 ( 3週目 )
**2021.05.5 
***プロジェクト名
--ブックカバー → 本が纏う紙 → 本が着る服 → 本の服 → 
「Book」+「Clothes」→「BooKlothes」
--「BooKlothes」の「K」は「C」に見えるようにデザインする。

~
~

***ワイヤーフレーム
#image(ワイヤーフレーム.png,center,50%)


~
~
~


**2021.04.15 ( 2週目 )
**2021.04.15

~

***ブックカバーを取り扱うWebサイトの調査
-__[[hontoブックカバー>https://honto.jp/netstore/bookcover.html]]__
--様々な種類のブックカバーがあるため、選ぶ楽しみがある。
--印刷の仕方や折り方の説明があって親切。
--コンビニからも印刷が可能なので、家にプリンターが無い人への考慮がされている。
~
-__[[本の洋服屋 I chobitt>https://chobitt.com/book/]]__
--デザインのカテゴリ分けをしているので、探しやすくなっている。
~
-__[[未来屋書店・アシーネ>https://www.miraiyashoten.co.jp/bookcover/]]__
--書店では手に入らないデザインも取り扱っている。
--Webサイトとしての完成度が高い。

~
~

***ブックカバーのデザインの調査
-書店で貰えるブックカバー
--シンプル・パターン化されたデザイン。
--書店名の入っているものが多い。
--何の本を読んでいるのかが分からない。

~


~
~
-面白いアイデアのブックカバー

|50|3|50|c
|#image(BC_02.jpeg)||#image(BC_03.jpeg)|

-__[[正和堂書店>https://twitter.com/SeiwadoBooks]]__
--斬新なアイデアで話題になったブックカバー。
--ブックカバー単体ではなく、栞とセットで楽しむことができる。

~
~
~

**2021.04.08 ( 1周目 )
**2021.04.08

~

***テーマ選定
-本に関連したデザイン
--ブックデザイン
--本の装丁
--ブックカバーのデザイン
--栞のデザイン

~

-本とWebサイトを結びつける
--見やすい電子書籍のWebサイト
--ブックカバーのデザインがダウンロードできるWebサイト
--Webサイトでしかできない本の装丁

~
研究テーマ
 ブックカバーのデザインがダウンロードできるWebサイト
~


***ToDo

-先行事例を調査する
-ブックカバーのアイデアスケッチ
-Webサイトのフレームワーク決め
-Webサイトのアイコン

~
~
#hr
CENTER:''Memo''
#hr

~

DEMO:https://koichi-inoue.github.io/CSS_Sample_02/
CODE:https://github.com/koichi-inoue/CSS_Sample_02/

~
-画像クリックでpdfのダウンロード
 <a href="pdf/XXXX.pdf"><img src="images/XXXX.jpg"></a>
~
-[[キービジュアルの入れ方>https://blog.mimipen.net/entry/2019/10/21/075700#%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%82%92%E4%BD%9C%E3%82%8B]]
-[[WEB DESIGN>https://design.kyusan-u.ac.jp/OpenSquareJP/?WebDesign]]
-[[CSS Sample>https://design.kyusan-u.ac.jp/OpenSquareJP/?CSS/Sample]]
~
~