#author("2020-07-30T19:53:44+09:00","default:member","member") *Night Dream -icon maker- レトロをテーマとしたフリーアイコンメーカーのWebサイト制作 '''Keywords：illustration / Web / icon maker''' ~ #author("2023-06-25T20:41:10+09:00","default:member","member") #image(night_dream_logo.JPG,center,50%) ~ ~ **プロジェクトの概要 //プロジェクトごとに作業の進め方は異なるので、見出しの構成もそれに応じて変わるものと考えて下さい。要は、メンバー間で「情報共有」すべき内容を、整理して書く・・ということです。}; ~ ~ ~ ***研究の背景・目的 近年、ネットの情報によると日本国内においてのSNSの普及率が７５%であった。これからもTwitterやInstagramなどと言ったSNSを使い始める人が増え続けるだろうと予想し、SNSを使い始める為に必須となるプロフィール画像を似顔絵など自分好みで顔のパーツをカスタマイズし無料で作れるツールであるフリーアイコンメーカーを作成しようと考えた。 他の人と被らないように自分だけのオリジナルのアイコンを作ることができれば魅力的だと考えた末に、自身が制作した輪郭、髪型、目、鼻、口などと言ったパーツごとのイラストを複数用意し、レトロをテーマに無料でアイコンを生成できるフリーアイコンメーカーのWebサイトを制作しようという思いに至った。 レトロがテーマになっている理由は、日本で作られた８０年代のシティ・ポップミュージックが海外で再評価され日本でも脚光を浴びていて主に若者の間でノスタルジックや哀愁漂う雰囲気を好みレトロがブームとなっている為受け入れられやすいと感じたからだ。 化粧品の製造・販売を主な事業とする日本の企業である株式会社資生堂のコスメブランド「マジョリカマジョルカ」のスマートフォンアプリによるプロモーションのための期間限定で生成できる似顔絵メーカー「マジョリ画」（図１）がSNSで一躍大人気となった。 そこで私はもっと気軽にWebサイトでアイコンを生成することができ、カスタマイズ性を追求したフリーアイコンメーカーを制作したいと考えた。 #image(majoriga.png,center,50%) 株式会社資生堂 「マジョリ画」 ~ ~ ~ ~ ***調査 ネットで複数のアイコンメーカーについて調べたところ、フリーアイコンメーカーを制作している人で独自のWebサイトを持っている人はかなり少数派であった。又個人によるWebサイトのアイコンメーカーは世界観が確立されていた。 個人によるフリーアイコンメーカーのWebサイトが雛形を配布していた為、雛形を元に自身のフリーアイコンメーカーのWebサイト制作を行うことにした。 自分でパーツ素材を用意さえすれば簡易的にアイコンメーカーが作成できる既存のサイトがあり、そこに作品を投稿されている人が多数であった。そこで、もし自身で制作したアイコンメーカーを投稿したとしても客観的に見ると他の作品があることにより選択肢が増え差が付かなくなってしまうのであまり使ってもえらないのではないかと考えた。 ~ 【参考サイト】 -[[Picrew>https://picrew.me/]] -[[アイコンメーカー>http://furrytail.sakura.ne.jp/ext/iconmaker/]] -[[めぶイカメーカー>https://mebuika.kenkenpa.net/]] ~ ~ ~ ***コンセプト 簡易的にアイコンメーカーが作成できる既存のサイトでは出せないような、オリジリティやカスタマイズ性を追求し、レトロをテーマとしたフリーアイコンメーカーを制作。 又独自のWebサイトを制作することにより世界観に入り込めるようUIデザインを設計する。 ~ ~ ~ ***試作 #image(shisaku.jpg,center,80%) 最初に試作したアイコンを実際のSNSでプロフィール画像を設定してみたところ、正面のアングルだと立体感を感じられなく無機質になってしまうのと明暗を細かく描写してしまうと他のパーツ素材を制作する際に統一感が無くなってしまう可能性がある。２回目のアイコンの試作では明暗を全て除去したところ、メリハリがなくなり印象が弱く感じる結果となった。又、アングルを変えたことにより影の描写がなくても立体感が感じられるようになった。改良後のアイコンを制作する際には、全体的な見栄えを考え、明暗、色味、アングルを調整した。 ~ ~ #image(IMG_1266.JPG,center,60%) シンボルロゴのラフスケッチ ~ ~ ~ ~ ~ ***完成品 ~ #image(night_dream_logo.JPG,center,50%) シンボル・ロゴ ~ シンボルマークのモチーフとなるモルフォ蝶の羽は実際には無色で「構造色」と呼ばれるもので様々な色彩を見せてくれる。自分でアイコンのパーツを選ぶことにより様々な顔が作れるといったカスタマイズ性の追求の意味を込めてモルフォ蝶を選んだ。ロゴタイプのフォントは、簡素で落ち着いたHelveticaを使用した。 ~ #image(icon1.jpg,center,80%) 改良後のアイコン ~ 改良後のアイコンでは目、口が同じパーツになっていることが分かりやすくする為、左右同士で対になるようにアイコン画像を並べている。髪型、目の色、肌の色を変更することにより印象がかなり変わっていることが分かる。 各パーツでカラフルな色彩になっているのはSNSでプロフィール画像を設定した際に個性が出しやすい為である。 髪型は現在トレンドになっているものからレトロな雰囲気に合わせて８０年代から９０年代に流行していた髪型を参考にイラスト制作を行った。 ~ #image(icon2.jpg,center,80%) 改良後のアイコン２ ~ 改良後のアイコン２では現実味を追求して美容室のカタログを参考に実際にその髪色をしている人が多いヘアカラーを選んだ。アイコンのキャラクターが目立つように全ての背景に淡い色を選んだ。 ~ ~ ~ ~ ~ ***まとめ 今期では、企画・コンセプト、シンボル・ロゴの制作、アイコンメーカーの基本となる髪型、輪郭、目、口などといったパーツ素材のイラスト制作、Webサイトのサーバーの確保を行った。調査においては、アイコンメーカーが作成できる雛形を配布しているサイトを見つけた。雛形を元に後期ではHTML、CSS、JavascriptでWebサイトの整理を行う。 又アイコンメーカーパーツ素材の背景の柄パターン、オブジェクト、アクセサリー類の装飾品などといったオプションの追加をできるようにイラスト制作を行っていく。 ~ ~ ~ ~ ~ ***制作物 //（最終的に何ができるか具体的に） -フリーアイコンメーカー -Webサイト ~ ~ ~ ~ ~ ***プロジェクトで使用するツール ~ ［機材］ -MacBook Pro -iPad Pro & Apple Pencil -GAOMON PD2200 ~ ［ソフト］ -CLIP STUDIO PAINT ~ ~ ~ ~ ~ ***参考文献・サイト MAJORICA MAJORKA <https://www.shiseido.co.jp/mj/> icon maker <http://furrytail.sakura.ne.jp/ext/iconmaker/> ~ ~ ~ ~ ~ **進捗・記録 ***2020.07.03 -前期概要集の作成 ~ ***2020.06.26 -http://ray7.html.xdomain.jp/sample サーバー確保しました。 動作確認済 ~ ***2020.06.12 -研究内容をアニメーション映像の制作から、フリーアイコンメーカーのWebサイト制作に変更。 ~ ***2020.06.05 - そもそもネオ・シティポップは音楽のジャンルなので、 どういったイメージで視覚表現するのか、シティポップとどう差別化するのか難しい。 アニメーション映像でPVを作っているアーティストは少ない。 シティポップとネオ・シティポップとの違い -若者に受け入れられやすい -当時と比べ機械や技術が進歩している -ジャズ、ヒップホップ、ブラックミュージックに影響されている印象 [[シティ・ポップ（city pop）>https://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%86%E3%82%A3%E3%83%BB%E3%83%9D%E3%83%83%E3%83%97]] 1970年代後半から1980年代にかけて日本でリリースされ流行した、ニューミュージックの中でも特に都会的に洗練され洋楽志向のメロディや歌詞を持ったポピュラー音楽。(Wikipediaより引用) ~ 【関連記事】 -[[【2020年 最新】なぜいまシティポップが注目されているのかを再検証>https://www.arban-mag.com/article/43877]] ~ ***2020.05.29 -フリーアイコンメーカー作成について サイトをHTMLでソース配布しているサイトがあったため借りようと思っている。 ~ ***2020.05.22 -作品のテーマ候補に 「ネオ・シティポップ」 ~ ***2020.05.15 -短いムービーをいくつか制作 ~ ***2020.05.08 制作物のアイデア -フリーアイコンメーカーの作成 ~ ***2020.05.01 作品のテーマ決め -曲に合わせて物語性のあるもの （できれば自分で曲を制作） -キャラクター設定 使用するソフトは、 ・Clip Studio EX （アニメーション制作可能のソフト） ~ ***2020.04.24 -アニメーション映像 自分の絵を使った作品 |#vimeo(318765067)|#vimeo(164996458)| ~ ~ |#youtube(1V_xRb0x9aw)|#youtube(HyHNuVaZJ-k)| |#youtube(FGBhQbmPwH8)|#youtube(dKJfJMMsqX4)| アルバムを通して楽曲ごとにストーリーが進むようになっている。 音楽で雰囲気や心理描写を表しているため、セリフがなくてもストーリーがわかる。 見た目が個性的で好き嫌いが別れそうなタッチではあるがインパクトのあるキャラクター設定でどこか惹かれるところがある。 ~ ~ |#youtube(coLerbRvgsQ)|#youtube(pPZDBF0kei0)| 音楽家と美術家によるコラボ 表現が抽象的なところはあるが、魅力的なキャラクターやカラフルでポップな色使いで世界観が確立されている。 ストーリーを楽しむというよりかは、音楽に合わせて動くキャラクター達を楽しめる。 ~ ~ |#youtube(FqdrDBBYmbg)|#youtube(ynGHPR0Sfpw)| アニメーションは基本ベタ塗りが多いが、普通のアニメーションよりも濃淡が表現されているため作者のタッチへのこだわりを感じる。 ~