numeroカラー全色の魅力を届けたい！制作の裏側

2026年10月27日

こんにちは！松風のとどろきです。

松風に入社して、あっという間に4ヶ月が経ちました！
夏に入社したはずなのに、気づけばもうすっかり秋🍂
毎日新しい発見があって、松風で過ごす毎日がとっても楽しいです🤎

今回は、そんな私が制作したカラーエクステページをご紹介します！
せっかくなので、作ることになったきっかけや、制作中に考えていたことなどを紹介していこうと思います！

そもそも、なぜ作ることになったの？

松風には、たくさんの種類のカラーエクステがあります。
せっかくこんなにカラーが揃っているなら、もっといろんな方に知ってもらいたい！

そして、これだけ色があるからこそ、もっと簡単に、楽しくカラーを探せたらいいなと思ったのがきっかけです。
どうせ作るなら、ただ商品を並べるだけじゃなくて、思わずいろんな色を見たくなるようなページにしたい！
そんなところから、今回の制作がスタートしました。

まず絶対に外せなかったのが、かわいいページにすること！✨

カラーエクステって、いろんな色を見ているだけでも楽しくないですか？👀
「この色かわいい！」「こんな色もあるんだ！」
そんなふうに、ワクワクしながらカラーを選んでもらえるページにしたいなと思っていました。

でも、実際に商品を探すときの使いやすさも大切。
そこで、こだわったのが次の3つです。

カラーがたくさんあると、どこから探せばいいか迷ってしまう。
そこで、毛の種類とカラー系統を組み合わせて絞り込めるようにしました！
例えば、使いたい毛の種類を選んで、そこからピンク系やブラウン系などのカラーを選ぶと、条件に合ったカラーが表示される仕組みです。

もうひとつ実現したかったのが、1つのページでカラーを見比べられること。
商品ページを何度も行き来するのではなく、同じページ内でさまざまなカラーを比較できるようにしました。

「やっぱりこっちの色がいいかな？」「この色も気になる！」
そんなふうに、いろいろなカラーを見ながら、お気に入りを探してもらえたらうれしいです。

カラーを探すところから購入まで、スムーズにつながることも意識しました。
気になったカラーを見つけたら、そのまま購入に進めるようにしています。

初めは、カラーを一覧で見られるように、表形式のデザインを考えていました。

一覧性はあるものの、情報量が多く、もう少し見やすく整理できないかな……と悩みました。

そこで、いろいろと試行錯誤した結果、現在のタブを切り替えてカラーを探せるデザインに！

タブで表示を切り替えることで、情報もすっきり！
デザインの雰囲気も崩さず、欲しいカラーを探しやすい形にできたかなと思います。

試行錯誤を重ねて、ついにカラーページが完成しました！

このページを見て、たくさんのカラーの中から、お気に入りの1色を見つけてもらえたらうれしいです✨

そして、実際に使ってみて
「こんな機能もあったら便利！」
「こうやって探せたらもっと使いやすい！」
などがあれば、ぜひ教えてください！
今後のページづくりの参考にさせていただきます🎶

最後まで読んでいただき、ありがとうございました。

この記事を書いた人

とどろき

松風のWeb制作・マーケティングを担当しています。松風の商品の魅力がより分かりやすく伝わるWebサイトづくりに日々取り組んでいます。最近は、アメリカの殺人事件ドキュメンタリーを見ることにハマっています！