• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 諸琳/博士前期/デザイン総合研究II へ行く。
  • 1 (2022-04-14 (木) 19:38:44)
  • 2 (2022-04-14 (木) 19:38:44)
  • 3 (2022-04-15 (金) 12:25:21)
  • 4 (2022-04-21 (木) 21:58:39)
  • 5 (2022-04-22 (金) 11:14:00)
  • 6 (2022-05-13 (金) 01:53:11)
  • 7 (2022-05-13 (金) 04:15:34)
  • 8 (2022-05-13 (金) 11:35:37)
  • 9 (2022-05-13 (金) 11:35:37)
  • 10 (2022-05-13 (金) 11:46:20)
  • 11 (2022-05-13 (金) 11:51:54)
  • 12 (2022-05-13 (金) 12:00:16)
  • 13 (2022-05-13 (金) 12:24:29)
  • 14 (2022-05-16 (月) 20:49:28)
  • 15 (2022-05-19 (木) 16:33:35)
  • 16 (2022-05-20 (金) 00:17:36)
  • 17 (2022-05-20 (金) 12:32:11)
  • 18 (2022-05-20 (金) 12:46:56)
  • 19 (2022-05-27 (金) 01:49:12)
  • 20 (2022-05-27 (金) 11:57:32)
  • 21 (2022-05-27 (金) 12:38:14)
  • 22 (2022-06-03 (金) 02:22:16)
  • 23 (2022-06-10 (金) 01:43:10)
  • 24 (2022-06-10 (金) 04:16:34)
  • 25 (2022-06-24 (金) 12:22:25)
  • 26 (2022-07-08 (金) 05:54:44)
  • 27 (2022-07-08 (金) 12:18:00)
  • 28 (2022-07-08 (金) 12:34:30)
  • 29 (2022-08-16 (火) 19:10:03)
  • 30 (2022-09-16 (金) 12:27:23)
  • 31 (2022-09-22 (木) 17:32:43)
  • 32 (2022-09-29 (木) 17:43:52)
  • 33 (2022-09-29 (木) 23:50:05)
  • 34 (2022-09-30 (金) 02:09:18)
  • 35 (2022-09-30 (金) 12:40:29)
  • 36 (2022-10-07 (金) 02:51:54)
  • 37 (2022-10-07 (金) 12:54:23)
  • 38 (2022-10-12 (水) 18:22:24)
  • 39 (2022-10-13 (木) 23:14:33)
  • 40 (2022-10-17 (月) 23:25:43)
  • 41 (2022-10-18 (火) 00:08:55)
  • 42 (2022-10-19 (水) 04:28:25)
  • 43 (2022-10-19 (水) 18:59:50)
  • 44 (2022-10-20 (木) 02:49:59)
  • 45 (2022-10-20 (木) 11:57:10)
  • 46 (2022-10-20 (木) 16:00:35)
  • 47 (2022-10-21 (金) 01:03:29)
  • 48 (2022-11-03 (木) 17:51:02)
  • 49 (2022-11-04 (金) 02:45:13)
  • 50 (2022-11-11 (金) 12:30:47)
  • 51 (2022-11-11 (金) 12:30:47)
  • 52 (2022-11-25 (金) 12:15:20)
  • 53 (2022-11-25 (金) 12:15:20)

---

日日是好日

自然のパターンを活用したWebカレンダーの制作

 

            Main Visual / CurrentStatus
            プロジェクトの最新の状態を視覚的に掲載

  

• 諸琳
• Keywords：植物・動くウェブ・カレンダー・・・
• https://orangecatmo.github.io/calender1-2/

CONTENTS

• 第１章　序論
  • 1.1. 研究目的
  • 1.2. 研究の背景
  • 1.3. コンセプト「日日是好日」
  • 1.4. サイトのデザインのあたって
• 第２章　調査研究
  • 2.1. 国内外のカレンダーの現状調査
  • 2.2. アンケート調査
  • 2.3. アンケートの結果
  • 2.4. アンケートの分析
• 第３章 制作概要
  • 3.1. 時間の分類
  • 3.2. 一月一植物
  • 3.3. 一週一色（いっしゅういっしょく）
  • 3.4. 一日一籤（いちにちいちくじ）
• 第４章　制作方法
  • 4.1. 制作環境　
  • 4.2. グラフィック表現の研究
  • 4.2.1 イラストの作成
  • 4.2.2. カラーとカレンダーの制作
  • 4.2.3. アイコンの作成
  • 4.3. Webの表現の研究
  • 4.3.1. SiteMap
  • 4.3.2. 動くアイコンの作成
  • 4.3.3. サイトの仕様
• 第５章　研究成果（制作物の現状）
  • 5.1.作品概要
  • 5.2. 成果の公開
• 第６章　結論と展望
  • 6.1. まとめ
  • 6.2. 今後の課題
• 参考文献・資料
  • 参考文献
  • 参考資料（アプリ、アプリ）
  • 情報提供
• APPENDIX
  • レイアウトサンプル
  • InDesign 入力用

第１章　序論

1.1. 研究目的

自然に隠されたパターン探究し、応用することは、視覚と機能に新しい可能性を持っていると考える。私はグラフィック、動くアイコン、ウィブサイトによってその表現方法を試行錯誤していきたい。それは私たちが見落としていた自然の真の美しいスペクタクルの再発見になり、新しい表現につながるだろう。
そこで本研究では、自然のテクスチャーを利用して視覚的、機能的なユーザー体験を実現するカレンダーを制作する。

1.2. 研究の背景

• 自然のパターン·テクスチャーについて
  
日常生活には多くの創作起因があるが、自然のテクスチャー·パターンもデザインに多くのインスピレーションを与えている。多くの伝統的なパターンでも同様だ。例えば、八代目の将軍徳川吉宗の故郷、紀州徳川家が使用した鮫小紋はサメの肌のテクスチャーを小さな点と弧状の模様で描いている（Fig.1）。平面の造形だが質感を感じさせるもので、シンプルながらも長く愛される模様だ。
  　しかし、自然なテクスチャーは伝統的なパターンの具現化であるだけでなく、それ自身のテクスチャーを通して新しい視覚的表現に適用することができる。現代でも三宅一生のPLEATS PLEASEを元としたデザイン展開がそうだ。佐藤卓はPLEATS PLEASEの色彩の基本系列をインスピレーションにし、生地を一枚一枚の山茶花（サザンカ）、梅花、チューリップ、ポピー、バラ、スイートピーなどと模擬した。また、食物、海洋生物など、服装のテクスチャーを生活と自然を結びつけることで、視覚的にも機能的にも新しいデザインを生み出していった（Fig.2,3）。
  　

  Fig.1	Fig.2	Fig.3

  
  

• カレンダーについて
  時間計画は常に重要である。自分に実用的なカレンダーがあれば便利だ。どのように自分に合うカレンダーを選ぶか、 アンケートを通じてユーザーのニーズを理解し、より多くのユーザーにとって可用性・実用性の高いカレンダーをデザインする。
  
  

1.3. 国内外研究現状（先行研究）

使用度の高いカレンダーの調査：

• Googleカレンダーのユーザーは、異なるタスクを明確に区別できるブラウジングデザインを好みます。
• 小米カレンダー*1は独特のシンプルなスタイルを好みます。
• iOSカレンダーのユーザは、彼らが設定したイベント地点時間に応じて通知を取得することが非常に有用であると考えている。
  お面白いカレンダーの調査：
• Peek カレンダー：https://www.peekcalendar.com/design.html
  • 色と音効果
  • インタラクション：フロントカメラを遮ると，スクリーンの上端に黒い影が現れ，現在の時間が表示される
  • 世界を風靡したシェイク機能にもPeek Calendarが入っており、スマートフォンを振ると、癒し系のビジュアルのスケジュールがランダムに生成され、どんなにクールな顔をしていても笑ってしまう。
    https://fullcalendar.io
    https://blog.csdn.net/zwxic/article/details/108790498
    
    

1.4. 検討項目

本研究では、以下の３点を主な検討項目として設定する。

• システムが機能を実現する流れが合理的かどうか，ユーザの基本的なニーズを満たすことができるかどうか。
• 情報の伝達や美学的要因は，使用時にユーザに快適さを感じさせるかどうか。
• インタラクション機能の追加かどうか
  
  
  
  

第２章　調査研究

2.1. アンケート調査

XXXXXXXXを目的として、アンケート調査を行った。以下にその概要を記す。

• 調査情報
  • 人数：30人
  • 年齢層：基本20代
  • 性別：それぞれ半50分

• カレンダーの気になる点のアンケートの問題
  • Q 1 毎日カレンダーを使いますか。
  • Q 2：カレンダーは主にどのタイプを使いますか。
    紙（手帳）、パソコン、スマートフォン、その他
  • Q 3：表示形式は以下のどのパターンが好きですか。
    年単位、月単位、週単位、１日単位
  • Q 4：多機能な電子カレンダーが必要ですか。
  • Q 5：カレンダーのスタイルを重視しますか。
  • Q 6：タスクおよびイベントの追加機能を求めますか（必要としますか）。
  • Q 7：高いインタラクティブ性を求めますか（必要としますか）。
  • Q 8：過去、現在、未来の明確な視覚的区別を求めますか（必要としますか）。
  • Q 9：スケジュールイベントの他者との共有を求めますか（必要としますか）。
  • Q 10：季節や祝日などの重要なイベントの掲載を求めますか（必要としますか）
  • Q 11：トップページにどの機能をご希望ですか。
  • Q 12：以下の機能ですが、トップページにはどのような機能がご希望ですか。
  • Q 13：あなたの現在の仕事(オープンな問題):
    ユーザーインタビューを行い、カレンダーを使う過程で他の人の意見や意見を知るための表を作成する

• 使用した実際のアンケートフォーム（Googleフォーム）
• https://forms.gle/rtxmucEpjsNFvFiN9
  
  

2.2. アンケートの結果

アンケートの結果を図XXに示す。

図.XX

2.2. アンケートの分析

• 基本機能以外にも，月単位のカレンダー使用率に対する需要が最も高かった。カレンダーを開けて毎月何日くらいやるべきかを直接知ることができる傾向が高い
• 祝日を重視し、簡単な形式に傾いていることが分かった
• カレンダーのスタイルやレイアウトが気になる。
• 休日にもっと明確な注釈が出る
  • メモの設定：毎月やっていることをユーザーに直接知ってもらうことができる
• アンケートの結果に基づいて、カレンダーに関するウェブサイトを制作して、利用者の反応を見る
  
  

2.3. 自然物の調査と収集

• 撮影の手段を通して、自然物を記録する
• 調査場所：公園、花園

  #image(): File not found: "x1.jpg" at page "諸琳/デザイン総合研究I"	#image(): File not found: "x2.jpg" at page "諸琳/デザイン総合研究I"	#image(): File not found: "x3.jpg" at page "諸琳/デザイン総合研究I"
  1月-梅の花	2月-椿	3月-チューリップ
  #image(): File not found: "x4.jpg" at page "諸琳/デザイン総合研究I"	#image(): File not found: "x5.jpg" at page "諸琳/デザイン総合研究I"	#image(): File not found: "x6 .jpg" at page "諸琳/デザイン総合研究I"
  4月-桜	5月--タンポポ	6月-紫陽花
  #image(): File not found: "x7.jpg" at page "諸琳/デザイン総合研究I"	#image(): File not found: "x8.jpg" at page "諸琳/デザイン総合研究I"	#image(): File not found: "x9.jpg" at page "諸琳/デザイン総合研究I"
  7月-アサガオ	8月-ひまわり	9月-ラベンダー
  #image(): File not found: "x10.jpg" at page "諸琳/デザイン総合研究I"	#image(): File not found: "x11.jpg" at page "諸琳/デザイン総合研究I"	#image(): File not found: "x12.jpg" at page "諸琳/デザイン総合研究I"
  10月-モクセイの花	11月-かえで	12月-イチョウの葉

  
  
  
  

第３章 制作概要

自然のテクスチャーを普段用いられていない媒体に展開する試みである。自然のテクスチャーの視覚における可能性を広げる。

3.1. 時間の分類

&color(green)一月一物 、一週一色、 一日一籤

• 1年12か月、52週間、365日。調査結果から分析するには年，月，週を明確に区別する必要があるので，季節に適した色に合わせて区別する

3.2. 一月一物

• 12ヶ月の代表的な植物、動的パターンが出現し期待感を増加させる
• 12ヶ月の代表的な植物の選択
  • 梅の花｜１月
  • 椿（つばき）｜２月
  • チューリップ｜３月
  • 桜｜４月
  • タンポポ｜５月
  • 紫陽花｜６月
  • アサガオ｜７月
  • ひまわり｜８月
  • ラベンダー｜９月
  • モクセイの花｜10月
  • かえで｜11月
  • イチョウ｜12月

3.3. 一週一色（いっしゅういっしょく）

• 毎週は色で区別する
  
  
• カラーの選択

  #image(): File not found: "カラー.jpg" at page "諸琳/WorkLog2021"

  • 色の参考リンク
    https://www.japandesign.ne.jp/books/2016/05/14449/
    http://www.seigensha.com/books/978-4-86152-734-0
    https://color.uisdc.com/
    https://webgradients.com/
    https://uigradients.com/
    https://webkul.github.io/coolhue/
    https://nipponcolors.com/#kohbai
    https://colrd.com/palette/
    
    
  • カラーとカレンダーの制作

    #image(): File not found: "365.jpg" at page "諸琳/WorkLog2021"

    
    

3.4. 一日一籤（いちにちいちくじ）

いい言葉を收集、日日是好日のコンセプトを展示する。面白さを増やす。

3.5. サイトの仕様

• SiteMap

  #image(): File not found: "本0.jpg" at page "諸琳/WorkLog2021"

  
  
• 調査結果の分析に基づき，ホームページで以下の機能を設けた

• トップページ
  コンセントの展示

  　

• ホームページ: 12ヶ月の展示
  • 自然物のパタンは12ヶ月を明確に区別する
  • くじの加入
  • 地図の加入
  • 時間の加入

• サプページ: 月のカレンダー
  https://orangecatmo.github.io/Home-page2021/
  • 具体的カレンダーと本月の情報
  • 季節に関する情報
  • その月の散歩情報。
  • その月平均気温情報。
  • その月食材の情報
  
  
• 他のサプページ：
  • 祝日
  • 通年のカレンダー
  
  

第４章　制作方法

4.1. 制作ツール　

• Photoshop：写真を調整
• Adobe Illustrator：カレンダー・イラスト・アイコン・LOGOを作成
• Adobe After Effects：イラスト・アイコン動的な表現

• 開発言語
  • HTML：ページの構造
  • CSS：ページのビジュアルデザイン
  • JavaScript：ページの動的変更
    
    

4.2. グラフィック表現の研究

• イラストの作成
  
• 梅の花｜１月

  #image(): File not found: "D1.jpg" at page "諸琳/WorkLog2021"

• 椿（つばき）｜２月

  #image(): File not found: "D2.jpg" at page "諸琳/WorkLog2021"

• チューリップ｜３月

  #image(): File not found: "D3.jpg" at page "諸琳/WorkLog2021"

• 桜｜４月

  #image(): File not found: "D4.jpg" at page "諸琳/WorkLog2021"

• タンポポ｜５月
  
• 紫陽花｜６月
  
• アサガオ｜７月

  #image(): File not found: "D7.jpg" at page "諸琳/WorkLog2021"

• ひまわり｜８月
  
• ラベンダー｜９月
  
• モクセイの花｜10月
  
• かえで｜11月

  #image(): File not found: "D11.jpg" at page "諸琳/WorkLog2021"

• イチョウの葉｜12月
  

制作ツール：Photoshop、Adobe Illustrator

• カレンダーの制作
  毎月のカラー：季節に応じて適切な色を選ぶ
  制作ツール：Adobe Illustrator
  
  

• アイコンの作成

  #image(): File not found: "LG01.jpg" at page "諸琳/WorkLog2021"

  size：210x 297cｍ
  制作ツール：Adobe Illustrator
  写真やイラスト、認識度の高い図形をアイコンとして描く。
  
  
  • アイコンのデザインプロセス

    #image(): File not found: "LG02.jpg" at page "諸琳/WorkLog2021"

    #image(): File not found: "LG03.jpg" at page "諸琳/WorkLog2021"

    #image(): File not found: "LG04.jpg" at page "諸琳/WorkLog2021"

    #image(): File not found: "LG05.jpg" at page "諸琳/WorkLog2021"

    #image(): File not found: "LG06.jpg" at page "諸琳/WorkLog2021"

    #image(): File not found: "LG07.jpg" at page "諸琳/WorkLog2021"

    #image(): File not found: "LG09.jpg" at page "諸琳/WorkLog2021"

    #image(): File not found: "LG08.jpg" at page "諸琳/WorkLog2021"

    #image(): File not found: "LG010.jpg" at page "諸琳/WorkLog2021"

    #image(): File not found: "LG013.jpg" at page "諸琳/WorkLog2021"

    #image(): File not found: "LG012.jpg" at page "諸琳/WorkLog2021"

    #image(): File not found: "LG011.jpg" at page "諸琳/WorkLog2021"

    
    

4.3. Webの表現の研究

• 動くイラスト作成
  植物の自然状態の特徴に応じて動するイラスト、自然物の状態に基づいて作られている。例えば：梅の花が一輪ずつ咲いている、ツバキの花が一輪ずつ落ちている、桜の花びらが散る、朝顔の朝に花が咲いて夜に閉じるなど。
  梅の花｜１月
  椿（つばき）｜２月
  チューリップ｜３月
  桜｜４月
  タンポポ｜５月
  紫陽花｜６月
  アサガオ｜７月
  ひまわり｜８月
  ラベンダー｜９月
  モクセイの花｜10月
  かえで｜11月
  イチョウ｜12月
  制作ツール：Adobe Illustrator、Adobe After Effects

• 動くアイコンの作成

  #image(): File not found: "sample.gif" at page "諸琳/WorkLog2022"

  制作ツール：Adobe Illustrator、Adobe After Effects
• 動くページ制作
  互動性と機能性
  
  

4.4. XXXXX

第５章　研究成果（制作物の現状）

5.1. コンセプト

「日日是好日」という言葉は禅語の一つである。意味として、生活の善し悪しは決して絶対性はなく、常に１人の心境及び物事への認識に関係があると考えられている。
日々、嬉しいこともあれば悲しいこともある。しかし、善し悪しにかかわらず、いずれも成長の経歴になるはずである。すべての日を素晴らしき日という理念で考え、大自然のテクスチャを素材にし、身近に隠されている美を見つけた上で、籤を抽選するような形を以て、素晴らしき一日を始めることにしよう。日々、少しながら期待する気分を以て、生活を体験すれば、日常生活も多様多彩になるのであろう。

5.2. 作品の展示

第６章　結論と展望

6.1. まとめ

6.2. 今後の課題

参考文献・資料

APPENDIX

レイアウトサンプル

論文執筆に利用するソフトウエアには指定はありません。InDesign、Word等、以下を参考に執筆して下さい。

• レポートレイアウトサンプル.pdf
  
  

InDesign 入力用

上記のサンプルの InDesign（idml）データです。表題等を書き換えるとともに、ページを追加する形でご利用下さい。

• 論文フォーム.idml