LogoMark.png

山田美優/情報デザイン研究II の変更点


#author("2023-01-16T05:40:35+09:00","default:member","member")
#author("2023-01-16T05:41:45+09:00","default:member","member")
*映えとる?
〜イラスト集の制作とWEB展示〜


#image(mainvi.png)




-''Miyuu Yamada''
-'''Keywords:Illstration,Website,SNS'''
-[[WEB展示会用イラスト>https://drive.google.com/drive/folders/1JvY-DOH7BOEjVrVzI18Nloa8D-dcDS0_]]
-[[インスタグラム>https://www.instagram.com/miyuuuuuuu01/]]
-[[PC版:プロトタイプ>https://xd.adobe.com/view/9c2a729a-6f1d-4d63-b667-f9556f397b30-c979/?fullscreen]]
-[[スマホ版:プロトタイプ>https://xd.adobe.com/view/cc68374a-bc93-43a6-af50-66b18787a7b0-993b/?fullscreen]]
-[[GitHub:サイトページ>https://miyuuyamada.github.io/BAETORU/]]
-[[GitHub:ファイル>https://github.com/MiyuuYamada/BAETORU.git]]

~


**Overview
***What is this?
//&color(red){これは何か・・を簡潔に};
イラスト集の制作とWEBサイトでの展示
~

//***Background and Purpose
//&color(red){プロジェクトの背景と目的};

***Background
SNSで作品を発信する機会は増えたが、プロのイラストレーターのように独自のサイトや作品集を制作する機会と技術は一般の人にはあまりない。
自分たちの力でもWEBサイトとイラスト集の制作が可能であるという事を示したい


~

***Purpose
多くの人に作品を見てもらえて、どこでも交流を深められるための場所をつくる。
そのために、誰でも気軽に閲覧できて、SNSよりも深掘りしたサイトを制作する。
それに加え、冊子を制作することで、デジタルとアナログでどのように作品のイメージが変化するのか確かめたい。


~

***Concept
//&color(red){基本的な考え方、枠組み、視点など};
山田が女性、山路が男性のイラストを描く。
作品のテーマとしては、SNS映えするような男女。
そのテーマを軸に、場所やコンセプトなどを決め、それぞれ2、3点ずつ作品を制作する。
一方が1枚を完成させ、それをもう一方が参考にしてイラストを描く。
合作も制作する。
~

***Outputs
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
WEBサイト
-[[GitHub:サイトページ>https://miyuuyamada.github.io/BAETORU/]]
A4冊子
-[[WEB展示会用イラスト>https://drive.google.com/drive/folders/1JvY-DOH7BOEjVrVzI18Nloa8D-dcDS0_]]

~

***Member
//&color(red){共同プロジェクトの場合のみ|メンバーと役割分担を明記};
山田美優
イラストの制作、サイトの制作

[[山路由依>山路由依/情報デザイン研究II]]
イラストの制作、サイトロゴの制作、冊子のレイアウト制作

~

***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
-MacBook Pro
-Wacom Cintiq Pro 24
-CLIP STUDIO PAINT
-XD
~

***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
2022.9.21 - 2022.12.21
~

***Conclusion
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};

自分達で、サイトや冊子を作ることができるということがわかった。
2人で制作したことにより、タッチの違う作品が隣り合わせになり、見飽きないような構成ができたと感じている。

また、サイトと冊子で、印象の差が出ることも実感できた。
サイトでは、ある程度の大きさで画像を固定してしまうため、小さく感じてしまうし、画面との距離もある。

しかし、A4の冊子だと、ページいっぱいに印刷して、近づけて見ることができる。
そうすると、視界いっぱいでイラストを見ることができる。

イラスト単体だと、冊子の方が強い印象を与えることができているように感じることがわかったため、サイトにはそれ以外の部分でメリットを与えなければならない。
ただ、そこまでの技術がまだ備わっていないことがわかったため、勉強して、サイトの機能を更新していこうと思う。







~


~
~


**Research

***Current Situation
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
最近、インスタグラムやツイッターなどのSNSで自身の作品を公開する人が増えた。
スマホやタブレットなどで手軽にデジタルイラストを描けるようになり、さらにSNSで投稿するだけで全世界に発信できるので、大量にイラストが投稿されている。
そのことや、コロナの流行を受けて、デジタルでの展示が増えたように思える。
その中で、目を惹くイラストとはどのようなものかを知る。

~

***Precedent
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
-[[オンライン美術館 HASARD>https://wam-hasard.com]]
「誰でも・いつでも・無料で」、オンライン上でアートを楽しむことのできる、唯一のオンライン美術館、と謳っているようにオンラインで楽しめる美術館。


-[[モンスターストライク オンラインアート展>https://lp.anique.jp/exhibition/monst/]]
期間限定で開催されていたのモンストのオンラインアート展。
オンライン上で無料に楽しめて、150点以上の作品を展示されていた。


~

***Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
-[[イラスト・マンガ描き方ナビ>https://www.clipstudio.net/oekaki]]
CLIP STUDIOがイラストのポイントについて解説しているサイト。



~
~

**Project Management

***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
[[後期スケジュール>https://docs.google.com/spreadsheets/d/1oUr8SFN27kD-EMiZjSzlM5BOjpT-ivNB/edit?usp=sharing&ouid=105733997053067886056&rtpof=true&sd=true]]


~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
%%-イラストの制作%%
%%-WEBサイトのデザイン変更%%
-WEBサイトの公開用のサーバーを決める
-スマホ版のメニュー画面を作る
-各ページの制作
%%--HOME%%
--ILLUSTRATION
%%--PROFILE%%
--CONTACT



~
~
~

#hr
CENTER:''WORK LOG''
//&color(red){List the most recent information at the top.};
#hr
~
~


**2022.12.21〜
***作業内容
-HOMEの下の方にもっと見るボタンを追加した
-画像を押すとポップアップ表示されるようにした
-文字にlightboxをつけると白くなって見えなくなってしまったので付けていない




~


**2022.12.14
***作業内容
-最終発表をした。
-山路さんの作品のタイトルを教えてもらい、仮のタイトルから変更した。
-フッターをつけた

~

**2022.12.7
***作業内容
イラストを全部完成させた
-[[紫の子>https://drive.google.com/drive/u/0/folders/1APjNgOGdRN92igt-qGl2B7sRVr-atyHv]]
--背景の葉っぱと白い花を書き加えた
--身体とドレスも整えた
-[[花冠の子>https://drive.google.com/drive/u/0/folders/1APjNgOGdRN92igt-qGl2B7sRVr-atyHv]]
--背景の花を増やし、茎と葉っぱも描いた
--花冠の影も加えた
-[[メイドさん>https://drive.google.com/drive/u/0/folders/1APjNgOGdRN92igt-qGl2B7sRVr-atyHv]]
--洋服を描いた
--フリルがうまく描けた
--背景が寂しかったので、チェキ風にした
-[[黒い服の女の子>https://drive.google.com/drive/u/0/folders/1APjNgOGdRN92igt-qGl2B7sRVr-atyHv]]
--首から下の部分を描いた
--山路さんの絵と対応するような配色の衣服にすることを心がけた

サイトもコーディングをした
-プロフィールページの行間や文字の大きさを整えた
-ホームに画像を追加した
-イラストページにも載せる画像を決めて載せた
--イラストの下の名前と丸い画像の部分を押すとプロフィールに飛ぶように設定した



~


**2022.11.30
***作業内容
-3つのイラストの制作を進めた
-[[紫の子>https://drive.google.com/drive/u/0/folders/1APjNgOGdRN92igt-qGl2B7sRVr-atyHv]]
--青と紫のバラを描いた
--葉っぱを増やしているところ
-[[花冠の子>https://drive.google.com/drive/u/0/folders/1APjNgOGdRN92igt-qGl2B7sRVr-atyHv]]
--後の花を増やしている最中
-[[メイドさん>https://drive.google.com/drive/u/0/folders/1APjNgOGdRN92igt-qGl2B7sRVr-atyHv]]
--山路さんのカフェ店員の子と対になるべく制作し始めたイラスト
--眼帯→黄緑のカラコン
--ウエイター→メイド
--紫の髪→インナーを紫に


~



**2022.11.23
***作業内容
-[[黄色いお花の子>https://drive.google.com/file/d/1rgTVy6_xuQx4zZhdhCLXYMG2NdvvKxMU/view?usp=sharing]]がやっと完成した
--ひたすら葉っぱを描き続けた

-[[サイト>https://miyuuyamada.github.io/BAETORU/]]のPROFILEとCONTACTのコーディングを進めた


~


**2022.11.16
***作業内容
-[[黄色いお花の子>https://drive.google.com/file/d/1rgTVy6_xuQx4zZhdhCLXYMG2NdvvKxMU/view?usp=sharing]]の葉っぱを描き終わった
--後は陰影をつけるだけ
-[[花冠の子>https://drive.google.com/drive/u/0/folders/1APjNgOGdRN92igt-qGl2B7sRVr-atyHv]]の葉っぱを描いた
--後は背景の緑と洋服を描けば終わる
-山路さんのカフェのウエイターの子と対になるようにメイドさんを描き始めた


~


**2022.11.9
***作業内容
-葉っぱを加筆した
--ただ、バランスがおかしいので、修正したい
--とりあえず、土曜日までに完成間近のイラスト2枚を完成させようと思う


~


**2022.11.2
***作業内容
-中間発表をした
-合作のデータを山路さんに渡した
--左側の腕は男の子の腕を女の子が掴んでるような構図にしたいので、まだ描いていない
--プリクラ設定なので、背景は白
--ペンで落書きしたような柄を上から描き加えようと考えている

~


**2022.10.26
***作業内容
-[[黄色いお花のイラスト>https://drive.google.com/file/d/1rgTVy6_xuQx4zZhdhCLXYMG2NdvvKxMU/view?usp=sharing]]に花も加えつつ葉っぱをひたすら描き足す作業に入った
--おそらくあと3時間くらいで完成するのでは
-CSSでスマホ版の文字の大きさを変えられることを確認した
-ハンバーガーメニューはいまいち分からなかったので一旦保留
--11月中旬までにはどうにかしたい

~



**2022.10.19
***作業内容
-[[黄色いお花のイラスト>https://drive.google.com/file/d/1rgTVy6_xuQx4zZhdhCLXYMG2NdvvKxMU/view?usp=sharing]]のバラをひたすら描き続けた
--多分あと2、3個追加した後に葉っぱを大量に描けば完成
--中間発表までには完成させたい
-HOMEのABOUTの部分を調整した
--画面を狭くしても折り返せなかったので、折り返せるようにした
-ロゴを山路さんが制作した[[新しいロゴ>https://drive.google.com/file/d/1yYZ5sixw_ZNAcevO1fgpy77v_6cD_-sh/view?usp=sharing]]に変更した



~


**2022.10.12
***作業内容
-サイトのナビメニューを制作した
-GitHubにファイルをアップロードした
--まだHOMEしかいじってません
--ロゴがまだできていないので、イラストで代用してます
[[ファイル>https://github.com/MiyuuYamada/BAETORU.git]]
[[サイトページ>https://miyuuyamada.github.io/BAETORU/]]

~

**2022.10.5
***作業内容
-合作のイラストの制作を進めた
--プリクラを撮るカップル設定
--顔は完成したので、手と服を19日までには仕上げたい
-新しい自撮り設定のイラストを描き始めた
--山路さんがカフェ(ダーツバー?)の店員の絵を描いていたので、メイド服の女の子の絵にしようと考えている
-他のイラストにもちょいちょい描き加えた



~



**2022.9.28
***作業内容
-冊子のレイアウトについて話し合った
-サイトのHTMLとCSSを書き始めた
--ナビメニューの制作がなかなかうまくいかない
--ファーストビューとabout部分をまずは作ろうと思う
-[[紫の髪の女の子のイラスト>>https://drive.google.com/drive/u/0/folders/1APjNgOGdRN92igt-qGl2B7sRVr-atyHv]]の背景のバラを描き始めた


~


**2022.9.21
***テーマ案
-イラストのWEB展示とイラスト集の制作
--アートギャラリーの予約が取れなかったので、WEBサイトの制作とイラスト集の制作を行うことにした
-タイトルは『映えとる?』に変更
~
***作業内容
-授業ページの更新
-冊子制作におけるアイディア案を話し合った。
~
~


~