#author("2022-04-15T12:10:37+09:00","default:art-gs","art-gs") #author("2022-04-15T12:15:36+09:00","default:inoue.ko","inoue.ko") #setheadercolor(white,"linear-gradient(to top, #a8edea 0%, #fed6e3 100%)",0.8)to top, #a8edea 0%, #fed6e3 100% *[[諸琳]] 研究経過報告 研究経過報告 2021 https://github.com/orangecatmo ~ ***ToDo -''カレンダーのwebサイトの制作'' -CSSの学習 -''テクスチャー素材の制作'' -Webページの実践 ~ ~ //***CONTENTS //#contents2_1 **2022.04.15 -毎月のアイコンの作成 ~ #image(LG01.jpg) イラストの形態に合わせて作られたアイコン (動くアイコン) #image(LG01.gif) ~ -アイコンのデザインプロセス ~ #image(LG02.jpg) #image(LG03.jpg) #image(LG04.jpg) #image(LG05.jpg) #image(LG06.jpg) #image(LG07.jpg) #image(LG08.jpg) #image(LG09.jpg) #image(LG010.jpg) #image(LG013.jpg) #image(LG012.jpg) #image(LG011.jpg) ~ -Webサイトの制作中 ~ #image(2-1.jpg) https://orangecatmo.github.io/calender1-2/ ~ ~ ~ **2022.04.08 **新しい視覚について考える ***毎月のカラーの更新 -- 季節とイラストの組み合わせ #image(1201.jpg)50% ~ ***カレンダーの制作 --カラーの選択 #image(カラー.jpg)50% ~ --カレンダーの制作 #image(365.jpg)50% ***新しいページ考える -Topページはコンセプトを展示します、動く画面を考えます ~ ~ **2021.12.17 ***デザイン総合研究Iの更新 [[諸琳/デザイン総合研究I]] ~ ***動的なイラストの制作が終わりました #YOUTUBE(tTf-FfpDvmU) ~ ***動くテクスチャーがwebサイトに入りしました https://orangecatmo.github.io/Home-page2021/ ~ ***冬休みのToDo - 毎月(12個)のページの制作 - ホームページ視覚の修正 - 動的ロゴの作成 - メモ添加と毎日の日付変換 ~ ~ ~ **2021.12.10 ***動くテクスチャーがwebサイトを更新します（９個） https://orangecatmo.github.io/Home-page2021/ ***1月のページ レイアウトサンプル（制作中） ページ修正は，自由に変更することができる https://orangecatmo.github.io/1-01-month/ Jsの学習中は，インタラクション機能を加える予定であり，メモにメモを付加することができる. -参考リンク https://github.com/nhn/tui.calendar **2021.12.03 ***動くテクスチャーがwebサイトに入っています！（制作中） https://orangecatmo.github.io/home01/ ***1月のページ レイアウトサンプル https://orangecatmo.github.io/home1-01/ ~ ~ ~ **2021.11.26 ***webサイトの制作中 -HTMLとCSSの学習：月単位のカレンダー https://orangecatmo.github.io/CalenderHome0/ https://orangecatmo.github.io/date01/ -JSの学習：JSの試みでは，赤は日付によってループするが，Webページにはまだ応用されていない。 https://orangecatmo.github.io/js-date-01/ ***動的なイラストの制作中 -制作ツール（技法） -Adobe Illustrator：イラストを作成 -Adobe After Effects：動的な表現自然物の変化の特徴に基づいて作る（まだ、考えます） ~ ~ ~ **2021.11.12 ***テクスチャーのイラストを更新しました！ -梅の花｜１月 #image(D1.jpg)50% -椿（つばき）｜２月 #image(D2.jpg)50% -チューリップ｜３月 #image(D3.jpg)50% -桜｜４月 #image(D4.jpg)50% -タンポポ｜５月 #image(D5.jpg)50% -紫陽花｜６月 #image(D6.jpg)50% -アサガオ｜７月 #image(D7.jpg)50% -ひまわり｜８月-１ #image(D8.jpg)50% -ハスの葉｜８月-２ #image(80.jpg)50% -ラベンダー｜９月 #image(D9.jpg)50% -モクセイの花｜10月 #image(D10.jpg)50% -かえで｜11月 #image(D11.jpg)50% #image(D12.jpg)50% -イチョウの葉｜12月 #image(D13.jpg)50% #image(D14.jpg)50% -すべてのイラストを集める #image(e44.jpg)50% 動的なイラストは佐藤先生の課程で作っています ~ ***webサイトの制作を作っています #image(e1.jpg)50% ~ ~ **2021.11.05 12ヶ月の代表的な植物のイラストは、植物の自然状態の特徴に応じて動するイラスト。 --梅の花 #image(10.jpg)50% --椿（つばき） #image(20.jpg)50% --桜 #image(30.jpg)50% --紫陽花 #image(40.jpg)50% --タンポポ #image(50.jpg)50% --アサガオ #image(60.jpg)50% --ひまわり #image(70.jpg)50% --ハスの葉 #image(80.jpg)50% --ラベンダー #image(90.jpg)50% --モクセイの花 #image(100.jpg)50% --かえで #image(110.jpg)50% --イチョウの葉 #image(120.jpg)50% ~ ~ **2021.10.29 ***SiteMap ~ #image(本0.jpg)50% ~ ***ページのレイアウトサンプル #image(2x.jpg)50% ~ ~ ***テクスチャーの制作 --梅の花 #image(p01.jpg)50% --イチョウの葉 #image(p02.jpg)50% --ラベンダー #image(p03.jpg)50% --ハスの葉 #image(p04.jpg)50% --ひまわり #image(p05.jpg)50% --タンポポ #image(p6.jpg)50% --紫陽花 #image(p7.jpg)50% --桜 #image(p8.jpg)50% ~ ~ **2021.10.22 '''''テクスチャー素材の制作''''' ***1~12月のテクスチャーの選択。（12のテクスチャー）まだ考えます -春の花 --二月：桃の花 --三月：桜 --四月：紫陽花・チューリップ -夏の海 --六月：海・雨 --七月：蝉(せみ) -秋の落ち葉 --八月：ラベンダー --九月：ハスの葉 --十月：もみじの葉 -冬天の木 --十一月：イチョウの葉 --十二月：竹・松の木 --一月：梅の花 ~ -参考リンク https://ganref.jp/subject/flower/09_september.html ***テクスチャーのイラスト 桜・紫陽花・イチョウの葉（サンプル） #image(22.jpg)50% '''''1つのカラーブロックを押すと、画面がボロボロになります''''' イラストを作るテクスチャーまたは動的なテクスチャの変化 ~ ~ **2021.10.08 **カレンダーの制作 ***homeページのサンプル #image(001.jpeg)50% ~ ***具体の制作 https://orangecatmo.github.io/CalenderHome0/ ~ ***2级ページのサンプル - 月のカレンダーのレイアウトデザイン - 季節に関する情報 - 祝日と節気の注意 -当日はテクスチャーの図形を追加しております ~ #image(1x.jpg)50% ~ ~ **2021.09.30 '''''カレンダーのwebサイトの制作''''' カレンダーのデザインのサンプル（まだ、考えます） -ホームページのレイアウト：アンケートによると，トップページの月選択を色と数字で簡単に区別する #image(q2.jpg)50% ~ 具体的ページのレイアウト #image(q3.jpg)50% ~ ~ #image(q1.jpg)50% ***カレンダーデザインの考え -1、調査結果によると、カレンダー使用月に対する使用率が最も高く、祝日を重視し、簡単な形式に傾いていることが分かった。したがって、休日には専門的なページと注釈が作られる -2、後でテクスチャ—の素材を追加することを検討します。季節や祝日などに応じて自然物を決め、テクスチャーの素材の制作を行います -3、最後にいい言葉を入れてテーマを表現する日日是好日です ＞参考：[[Wikipedia:日日是好日]] ~ ~ **2021.09.23 *** デザイン総合研究Iの更新 [[諸琳/デザイン総合研究I]] ~ *** アンケートの分析について #image(2w.jpg)50% #image(3w.jpg)50% #image(4w.jpg)50% #image(6w.jpg)50% #image(5w.jpg)50% #image(7w.jpg)50% -1、人数：30人、年齢層：基本20代、性別：それぞれ半50分。 -2、主に携帯電話でカレンダーを使うことが多いが、サラリーマンはパソコン用カレンダー記事が好き。 -3、簡単な形でカレンダーを見る傾向がある。 -4、カレンダーのスタイルやレイアウトが気になる。 -5、記事や祝日の機能が気になる。 ~ ~ **2021.07.16 tongtong ページの制作 *** tongtongの情報の変更 https://orangecatmo.github.io/tongtong ***進行中のアンケート [[__アンケート__>https://docs.google.com/forms/d/1q5lNGhxGzzmGTHBzI_P54kivGVynUl_oxDsT01bzXME/edit#responses]] ~ ***シングルページ参考 -DEMO：https://koichi-inoue.github.io/SinglePage/ -CODE：https://github.com/koichi-inoue/SinglePage ~ ***WORK -[[入門サンプル>https://design.kyusan-u.ac.jp/OpenSquareJP/?JavaScript/Sample]] -事例1-6 --DEMO：https://koichi-inoue.github.io/JS_Sample_01/ --CODE：https://github.com/koichi-inoue/JS_Sample_01 -事例7-12 --DEMO：https://koichi-inoue.github.io/JS_Sample_02/ --CODE：https://github.com/koichi-inoue/JS_Sample_02 -BOMを含めた事例 --DEMO：https://koichi-inoue.github.io/JS_Sample_03/ --CODE：https://github.com/koichi-inoue/JS_Sample_03 -その他 --https://design.kyusan-u.ac.jp/OpenSquareJP/?JavaScript/Sample2 --https://design.kyusan-u.ac.jp/OpenSquareJP/?JavaScript/ImageSwitcher --https://design.kyusan-u.ac.jp/OpenSquareJP/?JavaScript/Calendar ~ ~ **2021.07.09 ページの制作 ~ ***HTML学習 https://orangecatmo.github.io/tongtong - 新しいページが作成されました - ページジャンプ ***レスポンシブデザイン参考 -DEMO：https://koichi-inoue.github.io/responsive01_JS/ -CODE：https://github.com/koichi-inoue/responsive01_JS ~ ***Google アンケート調査の作成 ~https://forms.gle/rtxmucEpjsNFvFiN9 ~ ~ **2021.07.02 カレンダーについての考え ~ *** Google アンケート調査の変更 - ホームページ：https://docs.google.com/forms/d/e/1FAIpQLScLM-kaWDpgqqDRvwrp_v-9S4T5unu-DgvSO966hAv_U-vHIQ/viewform?usp=sf_link ~ ***とんとんのwebの制作 https://orangecatmo.github.io/tongtong/ ~ ~ ~ **2021.06.18 カレンダーについての考え ~ *** アンケート調査について ユーザーインタビューを行い、カレンダーを使う過程で他の人の意見や意見を知るための表を作成するつもりです。 -&color(green){カレンダーの気になる点のアンケートの問題}; ~（まだ、考えています） --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://docs.google.com/forms/d/e/1FAIpQLScLM-kaWDpgqqDRvwrp_v-9S4T5unu-DgvSO966hAv_U-vHIQ/viewform?usp=sf_link ~ ~ -参考リンク |面白いデザイン| --https://www.design-ah-exhibition.jp ~ #youtube(MG2z_yTnqMc) ~ ~ **2021.06.11 カレンダーについての考え ~ *** カレンダーの調査について -考えられる点 --1. システムが機能を実現する流れが合理的かどうか，ユーザの基本的なニーズを満たすことができるかどうか。 --2. 情報の伝達や美学的要因は，使用時にユーザに快適さを感じさせるかどうかである。 ~ -使用度の高いカレンダーの調査： --Googleカレンダーのユーザーは、異なるタスクを明確に区別できるブラウジングデザインを好みます。 --小米カレンダーは独特のシンプルなスタイルを持っている。 --iOSカレンダーのユーザは，彼らが設定したイベント地点時間に応じて通知を取得することが非常に有用であると考えている。 ~ *** カレンダーの気になる点のアンケート調査（まだ、考えています） ユーザーインタビューを行い、カレンダーを使う過程で他の人の意見や意見を知るための表を作成するつもりです。 -1 毎日カレンダーを使いますか？ -2 カレンダーはパソコンで使いますか？ -3 カレンダーのスタイルを重視しますか？ -4 タスクおよびイベントの追加機能を求めますか（必要としますか）？ -5 高いインタラクティブ性を求めますか（必要としますか）？ -6 過去、現在、未来の明確な視覚的区別を求めますか（必要としますか）？ -7 スケジュールイベントの他者との共有を求めますか（必要としますか）？ -8 季節や祝日などの重要なイベントの掲載を求めますか（必要としますか）? -9 ... ~ ~ ***カレンダー制作の参考リンク -'''''Peek 日历''''' https://www.peekcalendar.com/design.html 面白い点 --1、色と音効果 --2、インタラクション：フロントカメラを遮ると，スクリーンの上端に黒い影が現れ，現在の時間が表示される. --3、全国を風靡した“振る”機能にもPeek Calendarが入っており、携帯電話を振ると、癒し系の味のスケジュールがランダムに生成され、どんなにクールな顔をしていても笑ってしまいます。時々人の心を温めるのは、一言かもしれない。 https://fullcalendar.io https://blog.csdn.net/zwxic/article/details/108790498 ~ -色の参考リンク https://www.japandesign.ne.jp/books/2016/05/14449/ http://www.seigensha.com/books/978-4-86152-734-0 ~ ~ **2021.06.03「日日是好日」 *** カレンダーの制作について ~ 時間と色の分類 時間：2022年 色の選択：季節、旧暦、自然物、季節で一般的に選択されている着こなしなどによって選ばれたカラーブロック。グラデーションの使用。 ~ *** 月→週→日 ~ -1月から12月までの代表色 色パターン：RGB #image(uu.jpg)50% ~旧暦の説明: http://www.i-nekko.jp/meguritokoyomi/zassetsu/wafuugetumei/ - 週→日: 52週365日:毎週毎日の色が含まれている。 #image(2022.jpg)50% - Webデザインについての考え方： まずページは月から始まり、次は具体的なカレンダーページに行きます。 2つ目は具体的な毎週の色に応じて肌を選ぶ。テクスチャーに関する視覚表現を作成する。最後のおみくじの使用。 ~ ~ **2021.05.28 ***「日日是好日（にちにちこれこうじつ）」 ~「日日是好日」という言葉は禅語の一つである。意味として、生活の善し悪しは決して絶対性はなく、常に１人の心境及び物事への認識に関係があると考えられている。 ~ ***映画『日日是好日』 ~喫茶文化の学者として知られている日本有名人の森下典子は「日日是好日」を映画化にした。主人公の典子は茶道を介して自由及び生活の面白みを見出した物語という映画である。同じく、これも作者本人の人生経歴だったのである。 まだまだ多くの人が良い日だとは思っていませんが、その後のお茶会では、武田先生の言葉も「一期一会」という文を深く解釈しました。 #image(027.jpg)50% 「いちごいちえ」 ~映画に出てきている四季の変化、節気の変動、風ないし雨の音という二十四節の変化にともなって物語が推進されてきたのである。「日日是好日」がかけてある武田先生の和式茶室は和式美学を反映している極端的な表現である。時下は永久であり、日々を有意義に過ごすことは極めて重要である。 #image(034.jpg)50% ~ ***日日是好日の発想について '''''一月一色 、一週一肌、 一日一籤''''' ~日々、嬉しいこともあれば悲しいこともある。しかし、善し悪しにかかわらず、いずれも成長の経歴になるはずである。すべての日を素晴らしき日という理念で考え、大自然のテクスチャを素材にし、身近に隠されている美を見つけた上で、籤を抽選するような形を以て、素晴らしき一日を始めることにしよう。日々、少しながら期待する気分を以て、生活を体験すれば、日常生活も多様多彩になるのであろう。 ~ ***具体的方法：情報の収集と並べ替え ~ -'''''一月一色（いっかげついっしょく）'''''： 時間と色の分類 時間：1年12か月、52週間、365日。 色：色情報を並べ替えて、毎月テーマの色を開始します。 #image(88.jpg)50% 色の参考リンク ~https://color.uisdc.com/ ~https://webgradients.com/ ~https://uigradients.com/ ~https://webkul.github.io/coolhue/ ~https://nipponcolors.com/#kohbai ~https://colrd.com/palette/ ~ -'''''一週一肌（いっしゅういちはだ）'''''： テクスチャーの収集と分類 ~テクスチャーの色とテクスチャー種類と時間に関連する自然物によって分類されます。（たとえば、春のスペシャル：花、イチゴ、梅雨など。） ~具体的方法：（最初の考え、まだ決まっていない） マクロレンズの使用：写真を撮る,顕微鏡下で感じがあります。 #settableborder(none) |33|33|33|33|c |#image(19.jpg)|#image(13.jpg)|#image(17.jpg)| |キュウリ|オニオン|エンドウ| '''''1つのカラーブロックを押すと、画面がボロボロになります''''' イラストを作るテクスチャーまたは動的なテクスチャの変化（まだ決まっていない） ~ -'''''一日一籤（いちにちいちくじ）'''''： テキストの収集とレイアウト いい言葉を收集。日日是好日のコンセプトを展示します。 ~ ~ ~ ~ **2021.05.21 ***日日是好日の発想について 映画『日日是好日（にちにちこれこうじつ）』 #image(2.jpg)50% ~ ***テクスチュアの分類方法 -色（オレンジ、青・・・・） --自然の素材（海、動物の皮、木、石・・・） ~ 例えば： 自然的テクスチャー：オレンジ色 #settableborder(none) |33|33|33|c |#image(4.jpg)|#image(77.jpg)|#image(32.jpg)| |さびた壁|葉|蝶の羽| 自然なテクスチャーの分類：海、動物の皮、木、石、都市、果物、ハーブ、水の波紋、光と影、空など。 ~ ***制作スタイル '''''1日1つのテクスチャー''''' ~ -参考リンク |#image(82.jpg)| ~ ***Web上のインターフェイスのアイデア '''''1つのカラーブロックを押すと、画面がボロボロになります''''' ~ -参考リンク |#image(835.jpg)| |#image(W.jpg)| |面白いカレンダー| ~ ***その他参考 -https://81-web.com/ ~ ~ **2021.05.14 ***自然のテクスチャー・パターンの視覚表現に関する研究 ~テクスチャーの視覚化を表現する：ウェブデザイン・アプリデザイン -今まで２つの提案があります。 ***1.水分子の五感のテクスチャー：水リップル、液体、海水（key word） ~ビジュアル：カラー、 水分子（ぶんし）、 水リップル ~触覚：氷（こおり）、雪、雨 ~聴覚：雨の音、流れる水の音、潮の音 ~味覚（みかく）：弱い（環境の影響、甘い湧（わ）き水、塩のかいすい） ~嗅觉（きゅうかく）：潮の香り・ ***2.日日是好日 ~1日1つのテクスチャー 自然に隠された美しい質感を発見する。カレンダー、生活を記録する。 ~ ~ **2021.05.07 ***１、テクスチャーの発見 ~触覚のテクスチャー： 纸、物など~ ~味覚のテクスチャー ： みずみずしい、さらさらなど ~ビジュアルのテクスチャー：都市（人文）と自然のテクスチャーなど ~情緒のテクスチャー: テクスチャーは私たちが見て、触って、感じることができるものが、同時に人間の感情にもテクスチャーがある。 ~ ***２、葉のテクスチャーについて ~ #settableborder(none) |33|33|33|c |#image(01.jpg)|#image(04.jpg)|#image(8.jpg)| |バナナの葉|蓮の葉|サポテン| |#image(03.jpg)|#image(066.jpg)|#image(07.jpg)| | ポプラの葉|銀杏|ココナッツの木| ~ -「呼吸」葉の脈絡 葉の脈絡。「呼吸（こきゅう）」という言葉から展開しますと、人の肌にしても、葉の脈絡（みゃくらく）にしても、間違えなく、役割（やくわり）は呼吸です。ですから、呼吸感はこれらの呼吸からやってくることになりました。 -葉のイラストを作る ( ココナッツの木、紅葉 、ニレの葉、銀杏、ポプラ、サボテンなど ) ~ ***参考リンク -[[原研哉的デザイン-IDEA 白について>https://www.nitesha.com/?pid=93556057]] 白ごとに相関のデザインがある：梅田病院の優しさ白、松屋銀座センシュアスな白、長野オリンピックの記憶の中の白 ~ ~ **2021.04.16 ***テクスチャーと情報の発想 ~ CENTER:'''''テクスチャー ＝ 符号 ＝ 情報''''' ~ ~ -テクスチャーには象徴性がある。 深澤直人さんは、消費者が直接わかるように、果物のかわを使ったパッケージデザインをおこなった。 テクスチャーにもさまざまな情報があります。また、 テクスチャーの質感によって感じ方も違って来る。テクスチャーによって情報が違うので、 情報や人に関する内容のテクスチャーを入れて、 テクスチャーを使って情報の識別度を上げる。 ~ ***参考リンク -◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯ -[[深澤直人さんのデザイン>https://www.google.com/search?safe=active&rls=en&source=univ&tbm=isch&q=%E6%B7%B1%E6%BE%A4%E7%9B%B4%E4%BA%BA+%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3&client=safari&sa=X&ved=2ahUKEwiy-pHe-KLwAhVFQd4KHb8ODicQjJkEegQIBRAB&biw=1197&bih=745]] ~ ~