【制作実績】申込みページ（LP）・会社サイト制作のご紹介 — 尾張旭青年会議所様 & ヒダネ自社HP

白瀬ヒカリです。ヒダネでWebマーケティングとHP制作を担当しています。

結論から書きます。ヒダネのHP制作は、見た目を整えることを目的にしていません。読んでほしい相手の悩みから逆に組み立てて、問い合わせ・申し込みまでの流れをつくることを目的にしています。この記事では、実際に手がけた2つの制作物——一般社団法人 尾張旭青年会議所様のセミナー集客用の申込みページ（LP）と、株式会社ヒダネのコーポレートサイト——を、設計の狙いとあわせてご紹介します。「どんなサイトを作れるの？」「実際の仕上がりはどんな感じ？」という方の参考になれば嬉しいです。

申込みページ（LP）とコーポレートサイトは何が違うのか

申込みページ（LP）とは、1つの行動に申し込んでもらうことだけを目的にした、1ページで完結するページのことです。コーポレートサイトは、会社の事業・サービス・実績をまとめて伝え、複数の入口から接点をつくる会社の公式サイトを指します。どちらが優れているという話ではなく、集めたい行動が1つに決まっているかどうかで選び分けます。

制作実績① 一般社団法人 尾張旭青年会議所様のLP — どう設計したか

https://owariasahi-seminar-lp.vercel.app/

案件の概要

創立50年の歴史を持つ一般社団法人 尾張旭青年会議所様からのご依頼で、「売上につながるSNS集客セミナー」の集客用ページを制作しました。セミナー兼異業種交流会への参加申し込みを増やすための、1ページで完結する申込みページ（LP）です。

誰に読んでほしいページか

SNSでの集客に課題を感じている経営者・事業責任者の方々に向けたページです。「投稿はしているけど反応がない」「広告費をかけずに集客したい」といった悩みを抱える中小企業の経営層が中心です。

設計で何を優先したか

• 「悩み → 解決策 → 申込み」の流れで設計：画面を開いて最初に見える部分で日時・会場・参加費をはっきり示し、離脱を防止。その後「3つの悩み」で共感を生み、「広告費ゼロで集客可能」という橋渡しの一言で期待を高め、申し込みへ自然につないでいます。
• 黒を基調に、オレンジを差し色に：経営者向けセミナーの信頼感と力強さを演出。色の濃淡の差をはっきりさせ、重要な情報が一目で伝わるデザインにしました。
• 申込みボタンを複数箇所に配置：ページ内の何ヶ所かに申し込み口を置き、「申し込みたい」と思った瞬間を逃さないようにしています（申込み率＝コンバージョンの改善）。
• 区切りごとの役割をはっきり分ける：悩み → 内容 → 主催者紹介 → 開催概要 → 締めくくり、と各区切りの役割を明確に分け、下にスクロールしながら自然に理解が深まる構成にしています。

使った技術は何か

Next.js＋Tailwind CSS（いずれもWebサイト制作用の技術）で作り、Vercel（公開用のサービス）で公開しました。期間限定のセミナーという性質に合わせて、表示の速さと、検索で見つけてもらう対策（SEO）を両立させています。

制作実績② 株式会社ヒダネのコーポレートサイト — 何を見せるサイトにしたか

https://hidane2025.com/

案件の概要

私たちヒダネ自身の会社サイトです。「社員3名 ＋ AI社員12名」という珍しい体制を持つ名古屋発のAI支援企業として、自社の実践をそのまま見せるという方針で制作しました。

誰に読んでほしいサイトか

AI活用に興味がある中小企業の経営者・人材育成担当者に向けたサイトです。特に従業員300名以下の企業で、人手不足や業務のデジタル化（DX）に課題を感じている方々が中心です。

設計で何を優先したか

• 黒基調の画面 × 色のグラデーション：青〜紫系の色の移り変わりを基調とし、先進的なAI企業らしい会社の見え方をつくりました。暗い背景で高級感と信頼感を両立しています。
• 助成金の活用を前面に打ち出す：「費用が気になる」というハードルを最初に解消するため、助成金を使うメリットをサイト全体で伝えています。人材開発支援助成金の経費助成率は中小企業の場合75%、大企業の場合60%で、実際に支給されるかどうかは企業ごとの要件によります。緑を差し色にして、金額的なメリットを目立たせました。
• 30分無料相談の申込みボタンを要所に配置：リスクの低い接点を繰り返し示し、問い合わせのハードルを下げる設計です。
• 実績の数字を目に見える形で提示：ご支援したクライアント事例として、クロススポーツクラブ様のTikTokがアカウント開設5日未満で1,000万再生を超えたこと、Instagramで977万再生に達したことを、そのままの数字で掲載しています。
• サービスをカード形式で一覧化：AI×動画研修8コース、AIコンサルティング、AI×SNS運用代行の3サービスをカード形式で並べ、見比べて理解しやすい画面にしています。
• 5ステップの導入の流れ：「何から始めればいいかわからない」という不安を解消するため、導入までの流れを5つの段階で図にしています。

使った技術は何か

Next.js＋Tailwind CSSで制作。検索で見つけてもらう対策（SEO）として、検索エンジンにページの中身を正しく伝えるデータ（構造化データ／JSON-LD）を組み込み、サイトの地図ファイル（サイトマップ）と巡回ルールの設定（robots.txt）も整えました。ページの表示速度と、Googleが定める表示品質の評価指標（Core Web Vitals）の改善にもこだわっています。

2つの事例の設計はどう違うか

ヒダネのHP制作は何を重視しているか

ヒダネのHP制作で重視しているのは、次の4点です。いずれも「作って終わりにしない」ための考え方です。

• 集客の視点で設計する：誰に・何を・どう伝えるか。読んでほしい相手の悩みから逆に組み立てて構成を決めます。
• 問い合わせ・申込みにつながる流れを作る：問い合わせ・申し込みなど、商売の成果につながる案内（申込みボタン）の設計を重視しています。
• 作って終わりにしない改善の繰り返し：アクセス解析（GA4）でデータを見ながら、公開後も継続的に申込み率（CV率）を改善します。
• 最新技術による速い表示：Next.js＋Vercelの組み合わせで、表示速度と検索対策（SEO）を両立させます。

よくある質問

LPとコーポレートサイト、どちらを先に作るべきですか？

集めたい行動が1つに決まっているなら、申込みページ（LP）が先です。セミナー集客やキャンペーンのように期限と申込み先がはっきりしている場合は、1ページで完結するLPのほうが早く成果を確認できます。会社そのものを知ってもらう必要がある段階なら、コーポレートサイトを先に整えます。順番は事業の状況によって変わるため、まず目的を伺ってから判断しています。

HP制作の費用はどれくらいかかりますか？

ページ数・掲載する内容・写真素材の有無によって変わるため、要件を伺ってからお見積りします。ご依頼の範囲によって作業量が変わりますので、まずは今の課題と公開したい時期をお聞かせください。そのうえで、必要な範囲と費用をご提示します。

今あるサイトを作り直したいのですが、何から始めますか？

現状のサイトの課題を分析するところから始めます。誰に向けたページになっているか、問い合わせまでの流れが途切れていないか、検索から人が来ているかを確認し、作り直しが必要な範囲を切り分けます。全部を作り直さず、一部の改善で足りる場合もあります。

公開したあとの運用もお願いできますか？

公開後の改善までを含めてご相談いただけます。アクセス解析（GA4）でデータを見ながら、申込み率（CV率）の改善を続けるのがヒダネのやり方です。どこまでを社内で行い、どこからをお任せいただくかは、体制に合わせて決めています。

Next.jsで作るとどんな利点がありますか？

表示速度と、検索で見つけてもらう対策（SEO）を両立させやすい点が利点です。ヒダネのコーポレートサイトでは、構造化データ（JSON-LD）・サイトマップ・robots.txtの整備と、Googleが定める表示品質の評価指標（Core Web Vitals）の改善まで同じ土台の上で行っています。

お問い合わせ

「自社のHPを作り直したい」「集客できる申込みページ（LP）を作りたい」という方は、まずは30分の無料相談でお気軽にご相談ください。今のサイトの課題の分析から、改善のご提案までお話しします。