ケラスターゼ ヘアケア マガジン (Kérastase Haircare Magazine)
日本ロレアルのサロン向けヘアエステティック ブランド「ケラスターゼ」のWebサイト、“ケラスターゼ ヘアケア マガジン” の制作をお手伝いさせていただきました。
髪にトラブルを抱える女子、より美しい髪を追い求める女子必見。
ケラスターゼは1964年にフランスのパリで「健康な頭皮から健康な髪が生まれる」とという画期的な理念に基づいて誕生したヘアエステティックの最高級ブランドで、1990年代に日本に進出後「プロフェッショナル・ラグジュアリ・ブランド」という独自のブランドコンセプトをもって進化し続けています。ドラッグストアやスーパーで購入できる汎用向けの市販品では無いため、特にわれわれ男子には馴染みの薄いブランドかもしれませんが、サロンを利用する機会の多い女性の間では口コミを中心に長らく愛されてきたブランドです。
そのケラスターゼのレジスタンスシリーズ「フォルス」に、ホームエステ用の新製品が投入されるのを機に、ブランドWebサイト “ケラスターゼ ヘアケア マガジン” がローンチいたしました。
ブログサイトへのレビュー投稿を促すプレゼントキャンペーンを展開するほか、全国のケラスターゼサロンをキーワードまたはエリアで検索可能な「サロン検索」機能を実装し、ユーザーが製品へリーチするための具体的な情報と動機を提供するなど、プロモーションツールとして有効に機能するサイトへと仕上がっています。
ケラスターゼには現在レジスタンス シリーズを含め7つの製品ラインが展開しておりますが、現時点でサイトにアップされている情報はレジスタンスシリーズのみ。今後残り6ラインの情報もアップ予定ですので乞うご期待。
制作はディレクションおよびサーバーサイドのプログラミングをFICC inc.の村松さん・福岡さん、アートディレクション / デザイン / コーディングをaguije 小野にて担当させていただきました。タイトなスケジュールのなか細々とご調整いただき、終始制作に注力できる取り回しをしてくださった村松さん、本当にありがとうございました！
ついこのあいだ行く機会があったので、僕が月イチで通っている美容室もケラスターゼを扱ってるのか観察してみようと思ったところ、観察するまでもなく店内の至るところにケラスターゼ製品がディスプレイされていてびっくり。これまで気がつかなかったのが不思議、どんだけ目が節穴なんだろうと。。自分でもケラスターゼを試してみたかったのですが、ショートヘアですし頻繁に切ってしまうのでなんだかもったいない気がして手が出せませんでした。トヨエツばりのロングに挑戦することがあったら使ってみたい。
ネットショップによってはケラスターゼ製品を扱っている店舗があるようですが、ケラスターゼ製品は個人の髪質に合わせて様々な製品ラインが用意されており、頭皮の状態によっても使うべき製品の選択が変わってくるデリケートな製品です。ご自身に合わないものを使うと効果が無いばかりか逆にダメージを与えてしまう可能性もあるとのことですので、ご利用はやはり専門の知識を持ったサロンの美容師さんに相談の上でお使いになることをオススメします。あなたの街のケラスターゼサロンは「サロン検索」にて。
カラースキームと質感
今回の私の作業領域はHTML + CSSのみの非常にベーシックなもの。アイキャッチ的なFlashアニメーションも無く、デザイナーとしての基本的な能力を問われた気がして実はかなり緊張して制作いたしました。カラースキームは悩みの種で、と言うのもケラスターゼ製品のパッケージに使われているキーカラーが製品ラインによって異なるため。今回フィーチャーしている「レジスタンス シリーズ」はディープグリーンですが、それ以外のキーカラーが入ってきても干渉の少ないユニバーサルなカラースキームというのは難度の高かったところで、特に面積が広くサイトの印象を大きく左右する背景の扱いに悩まされました。さんざん検討して導き出したのがこの彩度が低く明るいアクアブルーです。
無彩色（グレー）にすればどのような色と組み合わせても干渉のないスキームに出来たのですが、アクアブルーにした理由は髪にとって最も重要な成分である「水」をイメージさせたかったことと、メインビジュアル（モデル写真）の色調が硬質なモノクロームであったため、グレーにするとやや無機質で冷たい印象になってしまうため。
さらにその「水」の潤い・透明感や、健康的で艶やかな髪が持つ「光沢」を感じさせるよう、背景にページ上部から光線が放射状に射し込んで見えるような大きなグラデーション画像（直リンク）を配置して質感を追加。ベタのアクアブルーよりもさらに印象を柔らかにすることができました。1,920×1,035ピクセルとかなり大きめの画像ですが単調なおかげもありJPEGでぐぐっと圧縮できて容量は45kB。
ただし普通に配置したのでは、コンテンツ量が多くページが縦に長い場合にグラデーションがページ上部で終了してしまいページ下部でやや背景色の印象が強くなってしまうほか、意図した質感からも離れてしまいます。今回はその問題を避けるため背景画像を position: fixed の固定配置としました。
グラデーションやシャドウを多用しているデザインのため、背景を固定するとなにかと前面に置く画像の切り出しが難しくなるのですが、透過PNGの採用で解決させました。Internet Explorer 6 (IE6) は標準では透過PNGに対応していないためAlphaImageLoader Filterを使って実装しましたが、これがまたじゃじゃ馬で強烈なクセのある代物です。思いの外苦労したのですが、なんとか飼い馴らせてよかった。。IE6への対応のためHTMLに若干無駄なマークアップを増やさなければならなかった部分はありますが、画像書き出しとCSSの煩雑化を回避するためのトレードオフです。
その他細々と気をつかって構築させていただきましたが、HTMLとCSSという基本中の基本を改めて見直すことのできた案件であり非常に勉強になりましたし、自分としても今後の拡張が楽しみなサイトとなりました。ケラスターゼとエンドユーザーの距離を縮める一助となれば幸いです。
ポートフォリオPDF更新
ついでに告知。ケラスターゼ ヘアケア マガジンを含め最新のお仕事を加えたaguijeのポートフォリオPDFを更新いたしました。このページの右サイドにあるビューアでご覧いただくか、ダウンロードされたい方はaguijeサイトかIssuuよりしていただければ幸いです。もっと掲載できるようがんばります。仕事ボシュー。