wildhawk
【お悩み解決】選択肢が多い製品やサービスを
シンプルな選択で簡単に選べる
Webの検索機能をご紹介
シンプルな選択で簡単に選べる
Webの検索機能をご紹介
型式が多くて困っていませんか?
同じ商品だが、仕様が異なり型式が複数ある場合、全ラインナップを写真入りで紹介するのは面倒なので、それを簡単に選べる仕組みを「HTML」「css」「JavaScript」で作成する方法をご紹介いたします。
こんな人にオススメ
同じ製品で仕様が異なり型式が複数ある
複数の型式があるので、どれがどれだか判断が難しい
複数の型式を簡単に選びたい
ネジとかビーカーは、同じように見えて高さとか幅などが少しずつ仕様が異なるので、お客様から型式で発注いただけないなど、困っている方にご提案いたします。
型式（かたしき）とは、製品の仕様や構造、性能などを識別・分類するために記号や番号を付けたものです。
型式を付ける目的としては以下のような理由があります。
- 製品の識別
同じ製品名でも、性能や部品構成が異なるものを区別するため - 製造・品質管理
型式ごとに仕様を固定することで、一貫した品質を保つため - 技術的管理
保守・修理・交換部品の指定に使われるため - 認証や法規対応
型式ごとに法令（例：自動車の排ガス規制）への適合性を確認するため
大人気アニメで「AE86」と言う型式が有名になりましたが、トヨタ自動車が1983年〜1987年に製造・販売していたカローラレビンとスプリンタートレノという車種の型式です。
何故か車好きは自動車を車種名ではなく、型式名でいいますが、私の愛車「ZZW30」は、知らない人が多い。。。
Webページで型式を簡単に検索する方法は、サンプルを見ていただければ分かりますが、仕様をボタンでクリックするだけで、画像と型式が瞬時に切り替わる機能をWebページに追加することができます。
その機能は以下の事前準備が必要です。
- 型式の仕様を確認
- 型式の画像を全て準備
- どのページにどんなデザインで追加するか
表示させる型式の仕様や数を確認してください。
今回のサンプルでは、以下のようなネジの仕様で作成します。
- ネジの頭を2種類
「プラス」「マイナス」 - ネジの長さを3種類
「5mm」「7mm」「9mm」
型式の仕様を確認したら、画像が何枚必要か確認します。
今回は「ネジの頭を2種類」×「ネジの長さを3種類」＝ 6枚の画像が必要です。
| ネジの長さ | ||||
|---|---|---|---|---|
| 5mm | 7mm | 9mm | ||
| ネジの頭 | プラス | NP5 |
NP7 |
NP9 |
| マイナス | NM5 |
NM7 |
NM9 |
|
画像のファイル名は型式にすると、ファイルの管理やプログラム開発も少し楽になるのでオススメです。
今回のプログラムは「HTML」と「css」でデザインが可能で「JavaScript」が動く環境なら、どこにでも配置が可能です。
もちろんWordPressにも設置が可能となります。
今回はサンプルなので、以下の様なシンプルな画面デザインで制作します。
もし今回のプログラムをご依頼いただく場合、画像のお手伝いは可能ですが、仕様についてはお客様にヒアリングが必要で、仕様の詳細確認は必須となります。
以下の「HTML」「css」「JavaScript」を用意します。
※プレビューは実際に動作するので、ボタンを押して試してください。
See the Pen Webページで型式を簡単に検索する方法 by 山内孝幸 (@hezfscev-the-looper) on CodePen.
実際に設置する場合は、それぞれ以下のようなファイルに記述します。
- HTML
ファイルや固定ページの表示したい箇所に直接記述します。 - css
cssファイル（select-neji.cssなど）を作り、インクルードで読み込みます。 - JavaScript
jsファイル（select-neji.jsなど）を作り、インクルードで読み込みます。
もちろん「css」も「JavaScript」も「HTML」に直接記述することも可能ですが、他のページにも同様の機能を表示させる場合は、重複表記すると修正が面倒になるので、できれば別ファイルで作成することをオススメいたします。
今回はWebページで型式を簡単に検索する方法を紹介しました。
ボタンを押すとリアルタイムに画面が切り替わるのは、お客様が商品を直感的に選ぶことができ、非常にわかりやすく商品を選ぶことができるので、Webページの顧客満足度を爆上げすることができます。
今回はサンプルなので、シンプルな仕様でしたが、例えば、ネジの頭がマイナスの場合は、5mmは選択不可にするなど、細かな仕様にも対応することが可能です。もちろん、仕様の数や選択肢を増やすことも可能です。
※約100通りの組み合わせも作成した実績があります。
型式検索ではありませんが、ご紹介できる事例として、ポータブル蓄電池を選ぶシミュレーターを同様の機能で作成しました。
【災害備蓄シミュレーター】https://www.ecosubsc.jp/lp?u=select
災害時に電気の確保が重要なので、蓄電池を用意したいが、低額から高額な蓄電池まで色々あり、何を選んで良いかわからないと思います。
そんな貴方に向けて必要な機器から蓄電池のおすすめを紹介してくれる「災害備蓄シミュレーター」です。
顧客満足度を上げたくても、この記事を参考に自作するのは難しいと感じるなら、我々wildhawkまでご相談いただければ、作成いたしますので、是非ご連絡をお待ちしています。
素材サイトのご紹介
このサイトでも活用しているオススメの素材サイトです。
是非こちらのバナーからご利用ください。
wildhawkからも写真素材を提供しています。是非ご活用ください