このプレビューは実サイトを埋め込み表示しています。レイアウトは実際の閲覧環境と異なる場合があります。
コンセプト
「値段には、理由がある。」を掲げる、鑑定士のいる買取専門店のサイト。実績のカードを押すと、相場・状態・付属品・年式ごとの金額を書いた査定書が開き、その合計が買取価格になる。無料査定のページには、品目・購入時の価格帯・状態・年式・付属品を選ぶと査定書と同じ形で概算の幅を出すシミュレーターと、金・プラチナを品位と重さで計算する欄を置いた。TOP/買取実績(20件・品目と買取方法で絞り込み)/取扱品目(6品目・当日の地金単価)/買取の流れ(店頭・出張・宅配)/店舗一覧(3店・道順の略図)/無料査定(シミュレーターと疑似送信フォーム)/私たちについて/個人情報の取り扱い/404の全9ページ。写真35枚はすべて生成し、商品は白い背景紙、店と鑑定の場面は窓の光でそろえている。
背景・課題
基軸には同業ではなく英国のヴィンテージ時計商のサイトを選んだ。その「時計を売りたい方へ」のページが、売る理由・流れ・過去の成約価格・よくある質問という買取店の構成そのものだったためで、CSSとJSを静的に解析し、スクロールで要素が浮き上がる演出が1つも無いこと、角丸と影を使わないことを確かめてから設計した。動きは中身が変わる所だけに絞り、査定書の行が上から差し替わって金額が数え上がるシミュレーターを唯一の見せる動きにしている。計算は全912通りを別に書いた計算と照合して一致を確かめ、画面は9ページ×7幅×2つの描画エンジンの99通りで、横あふれ・潰れ・エラーが0件であることを実測した。画像生成に文字を書かせると崩れるため、酒瓶のラベルは白紙で生成し、架空の銘柄を後から合成している。
DESIGN PERSPECTIVE
TECHNOLOGIES & FEATURES
主な機能
査定書の引き出し(実績20件の内訳)概算シミュレーター(品目×状態×年式×付属品)金・プラチナの重さ計算絞り込みと並び替え(品目・買取方法)縦ステッパー(写真の切り替え)ヒーローのクロスフェード(一時停止つき)上部バーの時計と店舗の営業状況道順の略図(インラインSVG)ほか3件
使用技術
HTMLCSSJavaScript
CMSなし
フォームあり
アニメーションあり