日日是好日
自然のパターンを活用したWebカレンダーの制作
- 諸琳
- Keywords：植物・動くウェブ・カレンダー・・・
- https://orangecatmo.github.io/cla-05/
CONTENTS
第１章 序論
1.1. 研究目的
自然に隠されたパターン探究し、応用することは、視覚と機能に新しい可能性を持っていると考える。私はグラフィック、動くアイコン、ウィブサイトによってその表現方法を試行錯誤していきたい。それは私たちが見落としていた自然の真の美しいスペクタクルの再発見になり、新しい表現につながるだろう。
人間と自然には共通性がある、そこで本研究では、自然のパターンを利用して視覚的、機能的なユーザー体験を実現するカレンダーを制作する。
1.2. 研究の背景
- 自然のパターン·テクスチャーについて
日常生活には多くの創作起因があるが、自然のパターン·テクスチャーもデザインに多くのインスピレーションを与えている。多くの伝統的なパターンでも同様だ。例えば、八代目の将軍徳川吉宗の故郷、紀州徳川家が使用した鮫小紋はサメの肌のテクスチャーを小さな点と弧状の模様で描いている（Fig.1,2）。平面の造形だが質感を感じさせるもので、シンプルながらも長く愛される模様だ。しかし、自然なテクスチャーは伝統的なパターンの具現化であるだけでなく、それ自身のテクスチャーを通して新しい視覚的表現に適用することができる。現代でも三宅一生のPLEATS PLEASEを元としたデザイン展開がそうだ。佐藤卓はPLEATS PLEASEの色彩の基本系列をインスピレーションにし、生地を一枚一枚の山茶花（サザンカ）、梅花、チューリップ、ポピー、バラ、スイートピーなどと模擬した。また、食物、海洋生物など、服装のテクスチャーを生活と自然を結びつけることで、視覚的にも機能的にも新しいデザインを生み出していった。（Fig.3,4）。
Fig.1 Fig.2
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デザインでは退屈な情報となるが、デザイナー大黑大悟は、読者とのインターフェイスに動くアイコンを使うことで動的なインタラクションを実現している。
- Peek カレンダー：https://www.peekcalendar.com/design.html
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月
 |  |  |
| 1月-梅の花 | 2月-椿 | 3月-チューリップ |
 |  |  |
| 4月-桜 | 5月--タンポポ | 6月-紫陽花 |
 |  |  |
| 7月-アサガオ | 8月-ひまわり | 9月-ラベンダー |
 |  |  |
| 10月-モクセイの花 | 11月-かえで | 12月-イチョウの葉 |
第３章 制作概要
自然のパターンの視覚における可能性を広げる目的で、自然のパターンが普段用いられていないWebカレンダーにインターフェイス要素として展開する。
3.1. 時間の分類
一月一植物 、一週一色、 一日一籤
- 1年12か月、52週間、365日。調査結果から分析するには年，月，週を明確に区別する必要があるので，季節に適した色に合わせて区別する。
3.2. 一月一植物
12ヶ月の代表的な植物、動的パターンが出現し期待感を増加させる演出を行う。代表的な植物は以下のとおり。
- 梅の花｜１月
- 椿（つばき）｜２月
- チューリップ｜３月
- 桜｜４月
- タンポポ｜５月
- 紫陽花｜６月
- アサガオ｜７月
- ひまわり｜８月
- ラベンダー｜９月
- モクセイの花｜10月
- かえで｜11月
- イチョウ｜12月
3.3. 一週一色（いっしゅういっしょく）
週の違いは色で区別する。
- カラーの選択
- カラーとカレンダーの制作。
3.4. 一日一籤（いちにちいちくじ）
「ことわざ」を收集、日日是好日のコンセプトを掲載する。面白さを増やす。
 |  |
第４章 制作方法
4.1. 制作環境
Webカレンダーの制作に関わるアプリケーションと開発言語は以下のとおり。
- アプリケーション
- Photoshop：写真の調整
- Adobe Illustrator：カレンダー・イラスト・アイコン・LOGOの作成
- Adobe After Effects：イラスト・アイコン動的な表現
- Adobe
：プロトタイプ制作 - Atom：コーディング
- 開発言語
- HTML：ページの構造
- CSS：ページのビジュアルデザイン
- JavaScript：ページの動的変更
4.2. グラフィック表現の研究
4.2.1 イラストの作成
制作ツール：Adobe Illustrator
- 梅の花｜１月
- 椿（つばき）｜２月
- チューリップ｜３月
- 桜｜４月
- タンポポ｜５月
- 紫陽花｜６月
- アサガオ｜７月
- ひまわり｜８月
- ラベンダー｜９月
- モクセイの花｜10月
- かえで｜11月
- イチョウの葉｜12月
4.2.2.カレンダーの制作
毎月のカラー：季節に応じて適切な色を選ぶ。
制作ツール：Adobe Illustrator
4.2.3. アイコンの作成
size：210x 297cｍ
制作ツール：Adobe Illustrator
写真やイラスト、認識度の高い図形をアイコンとして描く。
- アイコンのデザインプロセス
4.3. Webの表現の研究
4.3.1. 動くイラスト作成
植物の自然状態の特徴に応じて動するイラスト、自然物の状態に基づいて作られている。例えば：梅の花が一輪ずつ咲いている、ツバキの花が一輪ずつ落ちている、桜の花びらが散る、朝顔の朝に花が咲いて夜に閉じるなど。
梅の花｜１月
椿（つばき）｜２月
チューリップ｜３月
桜｜４月
タンポポ｜５月
紫陽花｜６月
アサガオ｜７月
ひまわり｜８月
ラベンダー｜９月
モクセイの花｜10月
かえで｜11月
イチョウ｜12月
制作ツール：Adobe Illustrator、Adobe After Effects
4.3.2. 動くアイコンの作成。
制作ツール：Adobe Illustrator、Adobe After Effects
- 動くページ制作
互動性と機能性。
4.4. XXXXX
第５章 研究成果（制作物の現状）
5.1. サイトの仕様
サイトマップと、主たるページの概要を以下に示す。
- SiteMap
- 調査結果の分析に基づき，ホームページで以下の機能を設けた。
- ランディングページ
コンセプトの掲載。
- メインページ：12ヶ月分の一覧掲載
- 自然物のパタンは12ヶ月を明確に区別する
- くじの掲載
- 地図の掲載
- 日時情報の掲載
- サブページ:：
月のカレンダー：https://orangecatmo.github.io/Home-page2021/- 毎月の参考情報：https://japanese-food.net/january-2/
- 具体的カレンダーと当月の情報
- 季節に関する情報
- その月の歳時記
- その月の平均気温
- その月の食材
- その他のサプページ：
- 祝日
- 通年のカレンダー
5.2. 実際の作品
5.3. 作品の展示
第６章 結論と展望
6.1. まとめ
自然のパターンに隠された形の魅力を改めて探究して、現代のwebデザインと組み合わせて表現する。自然のパターンをデザインに落とし込み、自然のパターの知られていない魅力を表現する。人間と自然には共通性があるので、自然に注目することは、人間に注目することと同じです。
6.2. 今後の課題
参考文献・資料
以下の文章を、どこに置くか、再検討して下さい。
「日日是好日」という言葉は禅語の一つである。意味として、生活の善し悪しは決して絶対性はなく、常に１人の心境及び物事への認識に関係があると考えられている。
日々、嬉しいこともあれば悲しいこともある。しかし、善し悪しにかかわらず、いずれも成長の経歴になるはずである。すべての日を素晴らしき日という理念で考え、大自然のテクスチャを素材にし、身近に隠されている美を見つけた上で、籤を抽選するような形を以て、素晴らしき一日を始めることにしよう。日々、少しながら期待する気分を以て、生活を体験すれば、日常生活も多様多彩になるのであろう。
APPENDIX
レイアウトサンプル
論文執筆に利用するソフトウエアには指定はありません。InDesign、Word等、以下を参考に執筆して下さい。
レポートレイアウトサンプル.pdfInDesign 入力用
上記のサンプルの InDesign（idml）データです。表題等を書き換えるとともに、ページを追加する形でご利用下さい。
2022.jpeg
2101.jpeg
W7.jpeg
W8.jpeg
37.jpeg
kk.jpeg
hh-06.jpg
hh-12.jpg
hh-10.jpg
hh-09.jpg
hh5.jpg
hh8.jpg
hh.jpg
2-2.jpg
2-1.jpg
2-2.png
1-1.png
6w.jpg
4w.jpg
7w.jpg
5w.jpg
3w.jpg
2w.jpg
