• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 諸琳/博士前期/デザイン総合研究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カレンダーの制作

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

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

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,2）。平面の造形だが質感を感じさせるもので、シンプルながらも長く愛される模様だ。

  Fig.1	Fig.2

  　しかし、自然なテクスチャーは伝統的なパターンの具現化であるだけでなく、それ自身のテクスチャーを通して新しい視覚的表現に適用することができる。現代でも三宅一生のPLEATS PLEASEを元としたデザイン展開がそうだ。佐藤卓はPLEATS PLEASEの色彩の基本系列をインスピレーションにし、生地を一枚一枚の山茶花（サザンカ）、梅花、チューリップ、ポピー、バラ、スイートピーなどと模擬した。また、食物、海洋生物など、服装のテクスチャーを生活と自然を結びつけることで、視覚的にも機能的にも新しいデザインを生み出していった。（Fig.3,4）。
  　

  Fig.3	Fig.4

  
  

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

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
      動Webページ先行調査：
  • 高尾山599博物馆：https://www.takao599museum.jp
    登山を豊かで面白いものにする博物館サイト 。普通の Webデザインでは退屈な情報となるが、デザイナー大黑大悟は、読者とのインターフェイスに動くアイコンを使うことで動的なインタラクションを実現している。

1.4. 検討項目

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

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

第２章　調査研究

2.1. アンケート調査

カレンダーのユーザー体験を目的として、アンケート調査を行った。以下にその概要を記す。

• 調査の概要
  • 対象：20代の学生および社会人
  • 人数：30名（男性15名、女性15名）
  • 調査期間：2021年7月〜9月
  • 調査方法：インターネット調査（Googleフォーム）

• 質問項目
  • 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.3. アンケートの分析

分析の結果、以下のことがわかった。

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

2.4. 自然物の調査と収集

自然物をデジタル写真として記録した。

• 撮影場所：公園、花園。
• 撮影期間：2021年4月〜2022年3月

第３章 制作概要

自然のパターンの視覚における可能性を広げる目的で、自然のパターンが普段用いられていないWebカレンダーにインターフェイス要素として展開する。

3.1. 時間の分類

一月一植物 、一週一色、 一日一籤

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

3.2. 一月一植物

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. 一日一籤（いちにちいちくじ）

「ことわざ」を收集、日日是好日のコンセプトを掲載する。面白さを増やす。

第４章　制作方法

4.1. 制作環境　

Webカレンダーの制作に関わるアプリケーションと開発言語は以下のとおり。

• アプリケーション
  • Photoshop：写真の調整
  • Adobe Illustrator：カレンダー・イラスト・アイコン・LOGOの作成
  • Adobe After Effects：イラスト・アイコン動的な表現
  • Adobe ：プロトタイプ制作
  • Atom：コーディング

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

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

（文章解説）

4.2.1 イラストの作成

（文章解説）

制作ツール：Adobe Illustrator

• 梅の花｜１月

  #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月
  

4.2.2.カレンダーの制作

（文章解説）

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

4.2.3. アイコンの作成

（文章解説）

#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の表現の研究

4.3.1. 動くイラスト作成

植物の自然状態の特徴に応じて動するイラスト、自然物の状態に基づいて作られている。例えば：梅の花が一輪ずつ咲いている、ツバキの花が一輪ずつ落ちている、桜の花びらが散る、朝顔の朝に花が咲いて夜に閉じるなど。

梅の花｜１月
椿（つばき）｜２月
チューリップ｜３月
桜｜４月
タンポポ｜５月
紫陽花｜６月
アサガオ｜７月
ひまわり｜８月
ラベンダー｜９月
モクセイの花｜10月
かえで｜11月
イチョウ｜12月
制作ツール：Adobe Illustrator、Adobe After Effects

4.3.2. 動くアイコンの作成

（文章解説）

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

制作ツール：Adobe Illustrator、Adobe After Effects

• 動くページ制作
  互動性と機能性。
  
  
  
  

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

5.1. サイトの仕様

サイトマップと、主たるページの概要を以下に示す。

• SiteMap

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

  
  

• ランディングページ
  コンセプトの掲載。
  
  

• メインページ：12ヶ月分の一覧掲載
  • 自然物のパタンは12ヶ月を明確に区別する
  • くじの掲載
  • 地図の掲載
  • 日時情報の掲載
    
    

• サブページ:：
  月のカレンダー：https://orangecatmo.github.io/Home-page2021/
  • 毎月の参考情報：https://japanese-food.net/january-2/
  • 具体的カレンダーと当月の情報
  • 季節に関する情報
    • その月の歳時記
    • その月の平均気温
    • その月の食材
      
      

• その他のサプページ：
  • 祝日
  • 通年のカレンダー
  
  

5.2. 成果の公開

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

制作したカレンダーは、GitHub上にソースを公開するとともに、以下のURLから閲覧できるよう公開している。

• https://orangecatmo.github.io/cla-05/

第６章　結論と展望

6.1. まとめ

自然のパターンに隠された形の魅力を改めて探究して、現代のwebデザインと組み合わせて表現する。自然のパターンをデザインに落とし込み、自然のパターの知られていない魅力を表現する。人間と自然には共通性があるので、自然に注目することは、人間に注目することと同じです。

6.2. 今後の課題

参考文献・資料

APPENDIX

レイアウトサンプル

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

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

InDesign 入力用

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

• 論文フォーム.idml