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

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

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

第２章　調査研究

2.1. 国内外研究現状

文章解説
時下、国内および海外において、カレンダーに関わるアプリが至って多い。且つ動的ウェブページにおける設計実践も少なくはない。これらのカレンダーの美観性および機能性を対象として、より一層詳しき研究調査を行い、カレンダーの基本設計およびアンケート調査を把握し、先行研究される。

• 使用度の高いカレンダーの調査：
  • 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デザインでは退屈な情報となるが、デザイナー大黑大悟は、読者とのインターフェイスに動くアイコンを使うことで動的なインタラクションを実現している。

2.2. アンケート調査

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

• 調査の概要
  • 対象：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. アンケートの分析

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

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

第３章 制作概要

文章解説
「日日是好日」をよりよく展開させるために、先んじて材料取集、資料の整理およびアンケート調査の研究を邁進していく。その次、カレンダーにかかわる情報の整理、挿絵の設計、様式の編成を行った上、ウェブの研究および設計報告書の作成を進める。
詳しくは下記のようである。
第一に、資料の収集をし、とりわけホームページに関するカレンダーの関連資料と設計的な理念および機能性のイノベーション関係の知識を主として収集する。その上、自然的に花につながる素材を収集し、分類と整理を行う。

第二に、調査研究の分析で、それに関連性のあるホームページの設計を克明に確認する。特に優れたホームページ設計の事例を参照し、アンケート調査による結果と相まって、実用性のあるカレンダーを設計してみたい。

第三に、カレンダーへの情報収集および花への挿絵設計を行うことを方針とする。数多くの挿絵を作成し、それをホームページの設計に入れて活かしていく。

第四に、情報およびホームページの構造によって、設計を行う。出来上がった挿絵を用いてアイコンを作成し、且つそれ相応の寸法を計画する。これにより、実践創作で、動的サイトの設計が作成できるという。 最後は、カレンダーの情報を整理し、様式の設計を編成することがポイントである。主として試験用の結果を修正し、改善し、反復的にカレンダーの様式を推考することによってカレンダーの作成をやり遂げる。

3.1. 時間の分類

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

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

3.2. 一月一植物

12ヶ月の代表的な植物、動的パターンが出現し期待感を増加させる演出を行う。代表的な植物は以下のとおり。

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

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

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

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

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

第４章　制作方法

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

4.1. 制作環境　

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

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

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

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

文章解説
グラフィックデザインの目的は情報を伝えることだ。情報をスムーズに伝えるには、視覚的なグラフィックを通じて効果的な刺激を生み出し、美的対象の感情的な体験を強化する必要がある。グラフィックデザインの完全な視覚情報を構築すると同時に、視聴者をさらに刺激すべきだ。（黄洪瀾, 2010）

4.2.1 イラストの作成

文章解説
植物の形態やテクスチャを観察して記録することで，それに応じたイラストを作成する。カレンダーの素材にしている。

• 梅の花｜１月

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

制作ツール：Adobe Illustrator

4.2.2.カレンダーの制作

文章解説
本研究では，研究方向を決定した後，自然界の毎月咲く花を素材とし，カレンダーに関する情報を整理した後，グラフィックの表現とwebの表現の研究をして、Webカレー作成を完了した。

• 毎月のカラー：季節に応じて適切な色を選ぶ。
• 制作ツール：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"

• 具体にカレンダーの１２個月のページ。

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

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

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

第６章　結論と展望

6.1. まとめ

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

6.2. 今後の課題

&color(red){文章解説};

参考文献・資料

参考文献

• 木村直司 (編集) (2009)「ゲーテ形態学論 」
• 木村直司 (編集)( 2009)「ゲーテ形態学論 」.
• 向井周太郎(2003)『かたちの詩学』[M]、美術出版社
• 本田総一郎(2004)『日本の家紋大全(日本語)』[M]、梧桐書院
• 永井一正(著)(2004)「 KAZUMASA NAGAI デザイン LIFE 1951-2004 GGG BOOKS 別冊 2 (スリージーブックス別冊 2)」
• 原研 哉(著)（2003）「デザインのデザイン」岩波書店出版社
• 原研 哉(著)（2008）「白」中央公論新社
• iyamadesign (著)（2016）「季節を感じる配色パターン」グラフィック社編集部 (編集)
• 沈暁寧、王浩「五輪聖火トーチ「祥雲」 情熱に火を灯し夢を伝える」,『人民中国』,2007 年 4 月 30日
• 佐藤 卓(著)（2017）「塑する思考」 新潮社出版
• 佐藤 卓(著)（2006）「クジラは潮を吹いていた」トランスアート
• 須永剛司(著)（2019）「デザインの知恵」フィルムアート出版社
• 黄洪瀾(2006)「テクスチャーはグラフィックデザインにおいてどんな応用があるについて」[J], 『学理論』:2
• コロナ・ブックス(編集)（2007）「日本のかたち」 平凡社(出版)

参考資料（アプリ、アプリ）

• Googleカレンダー
• 小米カレンダー
• iOSカレンダー
• Peek カレンダー https://www.peekcalendar.com/design.html
• 高尾山599博物馆 https://www.takao599museum.jp
  
  

情報提供

• 一般財団法人 日本気象協会
• 季節の歳時記:
  • https://www.i-nekko.jp/meguritokoyomi/
  • https://allabout.co.jp/gm/gc/461988/
    
    
    
    

APPENDIX

レイアウトサンプル

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

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

InDesign 入力用

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

• 論文フォーム.idml