サイト制作【架空バンド『LilASol』】
使用ツール
Adobe Dreamweaver / Photoshop / illustrator
デザイン詳細
個人制作のテーマとして、架空バンド『LilASol』のHPを作成しました。
コンセプトメインアイコン：演奏動画・グッズ・光
LilASolのイメージ：柔らかさ・元気・清潔感
世界観のキーワード：透明・光る・ふわっと動く
背景に演奏動画（仮動画）、演奏が聴けるYouTube（仮動画）を埋め込み、躍動感を演出しました。
ロゴに、”アニメーションで上下にふわふわ動く愛らしいイラスト” でプラスαのワクワク感を取り入れ、スクロールでふんわりフェードイン表示 、ホバーで輝くロゴやInstagramアイコンといった工夫も随所に施しました。 スムーズなページ遷移として、Contactページのメニューからindexページの各項目へ飛ぶ #アンカーリンク設定、スマホファーストのレスポンシブデザイン、ハンバーガーメニュー、
背景動画に光るライトリーク系 トランジションで非日常感を演出。
グッズデザインとして、illustratorで作成したギターのデザイン、ベースの低音記号をモチーフにしたデザインを、普段使いしやすいiPhoneケースなどのグッズイメージとし、モックアップを作成しました。
HP内グッズ画像はクリックすると、拡大ポップアップ表示されるように設定しました。