ご提案③「カタログ型・製品重視」の実用型UI設計

コンセプト

製品が主役。詳細な技術情報をわかりやすく、探しやすく。

特徴

– トップページには製品カテゴリカードを並べる
– プロダクトページはカテゴリ別・フィルター付き一覧形式
– 製品ページにPDF資料DL・お問い合わせCTAを配置

適しているケース

– 取り扱い製品数が多く、スペックや型番をしっかり見せたい
– 営業ツールや展示会後のWebフォローとして活用したい

WordPressでの実装例

カスタム投稿タイプ「製品」、カスタムフィールドでスペック登録、タクソノミーでカテゴリ管理など

デザインサンプル（HOME TOPのみ）

※サンプルデザイン内で使用しているテキスト、写真画像はすべて仮のものです。

  • ヘッダーメニューに製品検索欄設置。製品詳細ページへのアクセスをサポート。
  • 言語切り替えはヘッダーのプルダウンメニューにて。
  • 取り扱い製品の写真を並べたクールなイメージのメインビジュアル。
  • 主要な製品をピックアップしてトップで紹介。製品詳細ページへの導線を容易にする。

ワイヤーフレーム

※ワイヤーフレーム内で使用しているテキスト、写真画像はすべて仮のものです。

  • HOME

    • シンプルなキャッチコピーと製品情報がすぐに認知できるメインビジュアル。
    • 主要な製品をピックアップして紹介。写真と概要、製品詳細ページへのリンクボタン設置。
    • ブログ記事で最新情報を随時更新。

  • 私たちについて（会社情報）

    wireframe
    • 端的な会社情報ページ。
    • 本社、営業所、関連会社はフレームで区切って見やすい配置に。
    • 下部にCTA配置、問い合わせへの導線を容易にする。

  • 製品について

    • 左メニューで製品一覧、およびカテゴリーごとにタブ切り替え。右コンテンツ欄に製品リスト表示。
    • 製品リストは名称順、価格順、新着順などで並べ替え可能。
    • 製品リストの各項目には写真、製品名、概要、タグ、価格、詳細ページへのリンクボタン設置。

  • 製品詳細ページ

    • 複数の製品写真をタブ切り替えで表示可能。
    • 製品説明および仕様はタブ切り替えで表示可能。
    • 各種PDFなど関連資料などにリンクボタンでアクセス。

  • サービス

    • サービスの概要を項目ごとに分けて紹介。必要に応じて製品情報ページへのアクセスボタンを設置。
    • サービスに関するよくある質問欄を設置。
    • 中古製品に関しても同様に項目ごとに分け、製品情報ページへの導線を確保。

  • お問い合わせ

    • シンプルなお問い合わせフォームと本社連絡先情報。
    • ビジネスパートナー向けの製品ドキュメントやガイドPDFなどへのリンクバナーを設置。（パスワード管理可能）