https://www.eye-eye-isuzu.co.jp/blogs/column/jewelry-bridal-eternity-ring_2025-summer

Design / HTML / CSS / JavaScript
Illustrator / DreamWeaver / adobeXD

制作意図

「ブライダルリング」・「ファッション用のリング」において、ダイヤモンドが連なった「エタニティリング」という括りでユーザーに商品を紹介する機会がなかった。
「エタニティリング」は、ブライダルのリングとしても、またファッション用の指輪としても、女性のお客様からの需要が高い。ブライダル用・ファッション用、またブランドという括りに縛られない紹介ページで、ユーザーの購入意欲を高めるページの制作が必要とされたため。

ターゲットの年齢層が幅広くなることを想定したデザイン

①結婚やアニバーサリー(結婚10周年や20周年)の記念として、また日常使いするための指輪として使用など、ランディングページを見て購入を希望するユーザーの年齢層が幅広くなることを想定。デザイン全体としては白と黒を基調なるべくシンプルに落ち着かせています。
ただ差し色にゴールド、またセクション間や行間の余白を多めに設定し、商材の質の高さを感じられるように作成しています。

②購入が記念の周年や、またユーザーの年齢によって予算やデザイン・求めるブランドのグレードが幅広くなることが想定される。
ただ商材を一覧で並べるよりもユーザー自身で絞り込みの対応が出来たほうがいいのではと考え、ユーザー自身で欲しい指輪の方向性を考えてもらえるよう「全ての商材」「ブランド別」「価格別」「デザイン別」で一覧表示が切り替わるタブを設定。

この商材の一覧の表示・タブ切り替えと並び替えの連動はJavaScriptを使用しました。
参考『1冊ですべて身につくJavaScript入門講座』著者：Mana

③よくある質問内部の説明箇所は初期案ではテキストのみでしたが、初見のユーザーを考慮し、illustratorでエタニティリングのイラストを作成、テキストと併記しています。