LogoMarkWhite.png

諸琳/博士前期/デザイン総合研究II のバックアップ(No.35)


日日是好日

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

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




CONTENTS




第1章 序論

1.1. 研究目的

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

時間計画は常に重要である。自分に実用的なカレンダーがあれば便利だ。どのように自分に合うカレンダーを選ぶか、 アンケートを通じてユーザーのニーズを理解し、より多くのユーザーにとって可用性・実用性の高いカレンダーをデザインする。視覚的にユニークなデザインを実現するために、自然に隠されたパターンを探究し、これをインターフェイスに応用する研究を行う。

本研究では、自然のパターンを利用して視覚的、機能的なユーザー体験を実現するカレンダーを制作する。


1.2. 研究の背景

1.3. サイトのデザインのあたって

本研究では、以下の点に配慮しつつ、サイトのデザインに取り組む。

第2章 調査研究

今日、国内および海外において、カレンダーに関わるアプリが多数存在する。また動的ウェブページにおける設計実践も少なくはない。この章では、カレンダーの基本設計を行うために、これらのカレンダーの美観および機能を対象として、国内外現状調査とアンケート調査を行った。

2.1. 国内外のカレンダーの現状調査

ここでは、主に「使用度の高いカレンダー」、「面白いカレンダー」に注目して、調査を行った。


2.2. アンケート調査

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

2.2. アンケートの結果

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

2w.jpg
3w.jpg
4w.jpg
6w.jpg
5w.jpg
7w.jpg

図.XX

2.3. アンケートの分析

アンケートの結果をまとめると、以下のように要約できる。

これらの要件にもとづき、Webカレンダーを制作する。


第3章 制作概要

「日日是好日」のテーマに沿って、カレンダーにかかわる情報の整理、イラスト、様式の編成を行った上、ウェブの研究および設計報告書の作成を進めた。詳しくは下記のようである。


3.1. 時間の分類

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

3.2. 一月一植物

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

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

#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: "x12.jpg" at page "諸琳/デザイン総合研究I"

#image(): File not found: "x11.jpg" at page "諸琳/デザイン総合研究I"

10月-モクセイの花11月-かえで12月-イチョウの葉




3.3. 一週一色(いっしゅういっしょく)

週の違いは色で区別する。

3.4. 一日一籤(いちにちいちくじ)

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

W7.jpeg
W8.jpeg


第4章 制作方法

Webカレンダーのインターフェイス要素として、新規性のある「自然のパターン」を活用・展開する。

4.1. 制作環境 

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

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

文章解説

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

4.2.1 イラストの作成

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

制作ツール:Adobe Illustrator


4.2.2.カレンダーの制作

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

4.2.3. アイコンの作成

文章解説

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

size:210x 297cm
制作ツール:Adobe Illustrator
写真やイラスト、認識度の高い図形をアイコンとして描く。

4.3. Webの表現の研究

4.3.1. 動くイラスト作成

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

梅の花|1月
椿(つばき)|2月
チューリップ|3月
桜|4月
タンポポ|5月
紫陽花|6月
アサガオ|7月
ひまわり|8月
ラベンダー|9月
モクセイの花|10月
かえで|11月
イチョウ|12月
制作ツール:Adobe Illustrator、Adobe After Effects

4.3.2. 動くアイコンの作成

文章解説 
自然のパターンに隠された形の魅力を改めて探究して、現代のwebデザインと組み合わせて表現する。互動性と機能性を展示する。

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

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

第5章 研究成果(制作物の現状)

5.1. サイトの仕様

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

5.2. 成果の公開

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


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




第6章 結論と展望

6.1. まとめ

文章解説
本研究の分析調査から実践まで,多くの知識を学習した。テーマを決めてから,Webデザインの実践を展開し,豊富な経験を積んだ。静的から動的へ、その間にページ作成の概念とページ設計の基本タイプやルールを整理することで、ページ設計における情報整理とコネクティビティの重要性を学習した。これらの理論は自分の設計実践に対して強い指導的意義を持っている。Webページの設計には多くのアイデア形式が表現されていることも分かる。動的ページ作成は開始のみであり、インタラクティブ読書はページ設計の二次開拓であり、デザイナーは読者にインタラクティブな読書過程を提供し、情報の閲覧可能性を豊富にし、読者とページの相互性を増加させ、より広く自由な読書空間を提供する。

自然のパターンをデザインに落とし込み、自然のパターの知られていない魅力を表現する。人間と自然には共通性があるので、自然に注目することは、人間に注目することと同じです。

6.2. 今後の課題

文章解説
今回の研究課題を通して、私も自然のパターンに興味を持っていますが、今回のデザインは自然界の季節の植物をテーマにしており、将来は動物、海洋生物、地形景観など、毎年のカレンダー作りを続けることができる。
情報時代には,事物の発展変化の速度がきわめて速く,様々な新しい事物,新しい観点が次々と現れ、動的なページ設計はページ設計に対する人間の固有の形態の認知を打破し、ページを静的から創意無限の動的に向上させる。デザイナーにより大きなアイデア発揮空間を与えました。情報伝達への感情を豊かにしている。目的の到達点から,デザインの点を探し,より良い社会とコミュニケーションをとるようになった。
デザインの本質は、物や事をカッコよく飾る付加価値ではありません−。ごく日常的な生活と接点を持つデザインを通して、物や事の真の価値と人間の営為との的確な繫ぎ方を、可塑的な柔軟性で思考する。(佐藤卓,2017)


参考文献・資料

参考文献


参考資料(アプリ、アプリ)

情報提供

APPENDIX

レイアウトサンプル

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

InDesign 入力用

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