• オリジナル

参考URL:

https://cd-officek.com/works/hair-salon/hair-salon.html

更新内容　随時更新予定！

2021/04/26　初稿を投稿しました。

2021/04/27　デザインを修正しました。

2021/04/27　ホバーアニメーションを追加しました。

2021/04/30　デザインを修正しました。

2021/04/30　レスポンシブ対応を行いました。

2021/05/04　デザインを修正しました。

2021/05/04　ホバーアニメーションを追加・変更しました。

2021/05/04　スクロールアニメーションを追加しました。

2021/05/05　スマホ版、タブレット版デザインを変更しました。

デザインのこだわり

デザインで意識したのは、表現を柔らかくすることです。メインターゲットである女性を感じさせるような、柔らかいデザインを目指しました。

文字の太さや線の太さを細目に設定し、デザインのあしらいは少なめにすることで、ゴテゴテしすぎないようにしました。

ところどころに散りばめたダイヤのようなデザインは、その人自身の光る魅力をイメージしています。

少しデザインにあそびを出すために、パソコン版のConceptにはレイアウトを若干崩し、手書き風のタイトルも左脇に表示させました。

配色は清潔感をイメージした白、落ち着きのあるベージュ、茶色にしました。

ベージュは明度を抑えて柔らかい印象になるように、

茶色はベージュと対照的に明度を下げてアクセントカラーとなるようにしました。

フォントは英字のタイトルはCrimson Text、地の文はNoto Sans JPを用いています。

読みやすさはもちろんのこと、文字を細くした時におしゃれに見えるものをチョイスしました。

アニメーション

アニメーションは他より動きを少なめにし、落ち着いた印象にしています。

スクロール時のフェードインは、その場でフッと浮かび上がるようにすることで、高級感も印象付けようとしています。

ヘッダーのリンクの細い線をスッと引くアニメーションは、カーソルが当たっていることが分かる程度の最小限の派手さの強調をイメージしています。

BlogとSalonInfoのリンクは途中でダイヤが見えるようなアニメーションを選びました。

ホバーアニメーションの中でもスタイリッシュな部類で、あそびが多少出せたのではないかと思います。