SOBOLON

海洋マイクロプラスチックを素材にしたハンドメイドアクセサリーブランドのLPです。デザインカンプをもとに、PC・スマートフォンの両方に対応する1ページのサイトとしてコーディングしました。

環境に配慮したブランドなのに、デザインはエコらしさを前面に出さず、明朝体と淡い水色、余白の多い写真で「雰囲気の良さ」を押し出しています。

ここから、届けたい相手は「可愛いものが欲しい。でも、ただ可愛いだけでいいのかな」と心のどこかで思っている人たちだと読みました。まず「可愛い」と感じてもらい、迷ったときには「地球にやさしい」という理由が、選んでいいと思える後押しになる。そんな順番の設計だと考えています。

写真の明るさを保ったまま、読みやすい文字に

カンプの「黒12%」を、写真に焼き込まずに再現する

カンプでは、白い文字を載せる写真に、黒を12%重ねる指定がありました。写真そのものを暗く加工するのではなく、CSSで写真の上に半透明の層を重ねる形で再現しています。

こうしておけば、写真を差し替えても同じ暗さが保てます。暗さを変えたいときも、数字を一つ変えるだけで済みます。

アニメーションの提案

ページを開いた時点で、テキストも画像もすべて表示されている作りです。カンプで動きの指定があったのは「more」ボタンのホバーだけだったので、それ以外は静止した状態で仕上げました。

ただ、このデザインは「まず可愛いと感じてもらい、そのあとで伝えたいことを届ける」順番で作られていると読みました。それなら、動きでもこの順番を表現できたはずです。たとえば、写真に重ねた黒の層は最初は透明にしておき、画面の中央までスクロールしたところで暗くしながら文字を出す。黒を写真とは別の層にしてあるので、この演出は後からでも加えられます。実務であれば、コーディングの段階でデザイナーにこうした動きを提案したいです。