イラストで選び、3台まで比較｜除雪機ガイドのWebサイト・診断機能制作

「どの除雪機を選べばよいか」と「持っている機種をどう調べるか」。購入前と購入後の二つの目的から使える情報サイトとして、除雪機ガイドのデザインとWordPressの独自機能を制作しました。

雪景色を大きく見せるトップページに、イラストで条件を選ぶ診断、機種情報の検索、最大3台の比較を組み合わせています。自主制作し、現在も運営・改善している実サイトの事例です。

雪景色と鮮やかな青で、サイト全体を統一

トップページは雪景色を全面に使い、写真の余白に見出しと診断への入口を配置。白を基調に鮮やかな青をアクセントにして、雪の清潔感と、次に押す場所の分かりやすさを両立するデザインを目指しました。

雪の結晶を使ったロゴから、記事、一覧、検索、サイドバー、フッターまで共通のデザインに整理。初めて購入する方と、すでに持っている方の入口を分け、記事だけでなく機能からも情報を探せる構成にしています。

文章だけに頼らず、イラストを見て条件を選ぶ診断

独自のWordPressプラグインに、8ステップの選択画面を実装しました。地面の状態、雪質、雪の深さ、片付け方、燃料・電源、通路や収納場所の寸法などを順に確認できます。

• 診断用のイラストを制作し、選択肢や入力欄に対応する絵を同じ画風で統一。
• 「舗装と砂利」「やわらかい雪と固い雪」「20cm未満と20〜40cm」などの違いを、絵と短い説明で表示。
• 選んだ項目は青い枠と選択マークで示し、回答済みの条件を確認できる構成。
• パソコンでは選択肢を並べ、スマートフォンでは幅に合わせて配置を調整。

機種を知らない方でも、まずは自宅の雪や敷地を思い浮かべて選べる入口を目指しています。公開中の診断画面を見る

機種情報の検索と、最大3台の比較

メーカー公式資料へのリンクと仕様を機種ごとに管理し、条件別の表示と比較に利用しています。診断結果では、資料で確認できた条件と、販売店への相談・追加確認が必要な条件を区別します。

• 診断結果の並び替えに対応。参考価格、除雪幅、重さなどを切り替え、その場で表示順を変更。
• 気になる機種を最大3台まで追加し、本体の幅、除雪する幅、重さ、参考価格などを表で比較。
• メーカー名や型番で検索し、機種ごとの公式資料と確認事項を表示。
• 現行機種と旧型・資料案内を分け、購入検討と所有機の資料探しを混同しない構成。

価格はメーカー希望小売価格と販売店の実売価格を分けて扱っています。登録情報は継続して確認・更新する前提であり、すべてのメーカー・機種を網羅したものではありません。

記事・商品情報・運営管理を、一つのサイトにつなぐ

選び方や整備の記事と、診断・比較・所有機検索を行き来できるように設計しました。既存の広告枠と楽天の商品表示を残し、商品カードや検索画面もサイトの配色・余白に合わせています。

楽天の商品情報は既存の連携機能を利用。診断で使う仕様・根拠と、販売店の商品情報・写真は別に扱い、広告であることを表示しています。診断の判定処理にはAIのAPIを使わず、登録情報と判定ルールを利用しています。

管理画面には、選ばれた条件、結果件数、表示機種、判定理由などを確認できる診断履歴も用意しました。公開画面で保存を案内し、30日間の保存と生のIPアドレスを残さない運用にしています。結果が少ない条件などを、運営側が見直すための仕組みです。

制作範囲と、掲載画像について

• サイト構成、WordPress独自テーマ、ロゴ、トップ・記事・一覧などの画面デザイン。
• イラスト付き診断、機種台帳、検索、比較、結果の並び替え、管理画面の独自プラグイン開発。
• 診断用イラスト、既存の商品表示とのデザイン調整、PC・スマートフォン幅での表示確認。

掲載画像は、2026年10月24日に公開中のサイトを撮影した実画面です。トップページはフッターまでの全景、診断・比較・検索は該当部分の画像を掲載しています。旧デザイン案を現在の画面として使用したり、操作結果を描き直したりしたものではありません。

全景を大きく確認する：PC版の全景画像 ／ スマートフォン版の全景画像

掲載用画像では、外部の商品写真を一部非表示にしています。トップページの風景・方式紹介に使う画像はイメージで、実機の仕様を示すものではありません。画面内の価格や登録状況は撮影時点の表示です。

この事例は自社運営サイトの自主制作・継続開発です。顧客からの受託制作・納品実績や、売上・集客効果を示すものではありません。診断は候補と確認事項を整理するための機能で、現場での適合や安全な作業を保証するものではなく、情報・判定ルールの精査と改善を続けています。

記事を読むだけでなく、条件を選んで調べられるサイトにしたい。既存のWordPressに検索・比較・診断などの機能を加えたい。そうしたご相談で、必要な画面と運営の仕組みを考える参考になる制作事例です。