Product

テーマ

キーワード：ブルーアワー、キノコ、ツリーハウス、月、星
日没後の太陽光が直接届かず、空が濃い青色に染まる神秘的な時間帯に、大好きなお月さまに会いにいくキノコの世界。

自分が応援しているアーティスト『moumoon』の曲をモチーフにしました。「ブルーアワー」という曲では、青色にオレンジ色が染まるイメージを、「Triangle」という曲では、手を伸ばして月を結べばいつでも繋がっていることをイラストで表現してみました。

Header｜イラストについて

生成AIで上記キーワードを元にパララックス用背景を作成。ファーストビューは手描きのイラストで温かいイメージを演出したかったので、AIデータを参考に一部アレンジしたイラストを描いてみました。
また、以前からはまっているアニメ「ドクターストーン」にも出るツリーハウスに憧れていました。 アニメの主人公が地道な作業にも諦めず、失敗が重なっても何度もチャレンジしていく姿を見て、地味な作業が好き・自分が好きな分野については諦めないことが似ていると思ったので、 ツリーハウスに住むキノコキャラクターで表現してみました。

素材について

背景パターン：キャンバス風紙質の背景にしたかったので、Photoshop＞フィルターでキャンバス適用で背景用パターン作成。

イラスト：鉛筆2B、ホルベインドローイングインクBlack、ZEBRA Gペン使用

About me｜キノコについて

・キノコ：高校時代にヘアスタイルを見て友達がつけてくれたあだ名が毒キノコだったので自分を表すキャラクターにしてみました。

・虫：あだ名をつけてくれた友達が夢の中でグミワームの形で登場したので、それ以来あだなをつけてあげたことを思い出して、キノコの頭に乗っかっているイメージのイラストにしました。

※イラスト：鉛筆2B、LUMA水彩インク、ホルベインドローイングインク、ファーバーカステル色鉛筆、レンブラント ソフトパステル

Product｜グラデーションについて

満月が昇り始める時はゴールド色に見えますが、空の高いところまで昇るとシルバー色に見えるので、月の色をグラデーションで表現してみました。

Skill｜月の満ち欠けについて

キノコが大好きなお月さまの満ち欠けをモチーフに、スキルが満月に近づけるように頑張っていく意気込みと、常に最新情報を取り入れる姿勢を持つ心構えを表現してみました。
※illustratorの図形で作成

配色

満月の色を温かみのあるオレンジ系の色、森の色をブラウンと緑色で設定

制作期間

アイデア出し：3日

ワイヤーフレーム作成：3時間

イラスト作成：8時間

デザイン制作：3時間

コーディング：7日

使用ツール / 素材

デザイン：Photoshop / Illustrator

コーディング：HTML / CSS

イラスト：手描き

ファーストビューのイラストを強調するコンセプトでしたので、パララックス効果と背景パターンの表示に苦労しましたが、自分が思い描いた世界を表現できたことで勉強になりました。HTMLを触った後はバリデーター チェックを忘れずに習慣をつけています。