TORIMA HP
自社サービスサイト制作事例
「作り直さないHP修正屋」というポジショニング設計から、診断ツール・見積もりフォーム連携までを、企画・デザイン・実装まで一人で担当した自社サービスサイトです。
HTML / CSS
JavaScript
WordPress
レスポンシブ
SEO対策
自社サイト
サイトを見る ↗
タイプ
自社サイト
制作期間
2週間
担当範囲
企画〜実装
公開年
2026年
プロジェクトの目的
既存のHP制作会社は「新規制作」または「フルリニューアル」に偏りがちで、「ちょっと直したい」というニーズの受け皿がありませんでした。この空白地帯を狙って、「作り直さない部分修正専門」のポジショニングでサービスを立ち上げるためのサイトを制作しました。
デザインで意識したポイント
-
1行目でポジショニングを伝える 「ホームページ、古すぎ？」というキャッチコピーで、迷わず自分事化してもらう導線に。
-
料金の透明性 7カテゴリ全ての料金レンジを公開。「高そう」の心理的ハードルを事前に破壊。
-
シアン × マゼンタ × イエローの3色制 カテゴリごとに色分けし、視認性と一貫性を両立。
技術的な工夫
診断ツール（shindan.html）を自作
7カテゴリ × 27問のYES/NO診断ロジックを純粋なJavaScriptで実装。Chart.js を使ったレーダーチャート、100点満点のスコアリング、NG項目に応じた見積もり自動計算まで、外部SaaSに頼らず自前で構築しました。
見積もりフォームとの完全連携
診断で得たスコアと選択項目が、そのまま見積もりモーダルに自動反映される設計。ユーザーは同じ情報を再入力する必要がなく、離脱率を下げています。
WordPress連携ブログ
サイト本体はHTML/CSSで作りつつ、ブログ機能だけWordPressをヘッドレス的に組み込み。更新のしやすさとサイト全体の高速表示を両立しました。
💡 この事例で証明できること
診断ツールのようなインタラクティブな機能を、外部SaaSに頼らずに自前でゼロから設計・実装できます。同レベルの機能をご希望のお客様にもご提案可能です。
使用技術
- HTML5 / CSS3（Grid, Flexbox, CSS Custom Properties）
- Vanilla JavaScript（フレームワーク非依存）
- Chart.js（レーダーチャート）
- WordPress（ブログ機能）
- Google Tag Manager / GA4