サンプルについて: 掲載している院名・院長名・住所・電話番号はすべて架空です。写真は AI 生成画像を使用しています。 実際の制作時はお客様の情報・お写真・撮影手配で差し替えます。

歯科医院

歯科医院のホームページ制作で押さえるべきは、初診の不安解消・予約導線・診療メニュー一覧・院長紹介の 4 点です。ファミリー層向けの親しみあるトーンと、自由診療中心の上質トーンは、来院動機が違うので別構成にした方が転換率が上がります。設計の考え方は「歯科医院ホームページ制作で押さえるべき設計原則」の記事で詳しく解説しています。

歯科医院サンプル 親しみ版 ヒーロー画像
歯科 / 親しみ版 最短2日納品

ひだまり歯科クリニック — 親しみ版

地域密着・ファミリー層向けの温かみあるトーン。診療メニュー8項目タイル、初診の流れ、予約フォーム、FAQ、院長紹介、簡易チャットボットを1ページに集約。

シングルページ レスポンシブ SSL対応 予約フォーム
歯科医院サンプル 高級版 ヒーロー画像
歯科 / 高級版 最短2日納品

ひだまり歯科クリニック — 高級版

自由診療・審美/インプラント中心の医院向け、上質で落ち着いたトーン。CT・診療ユニット・コンサル風景の写真主導レイアウトでブランド訴求型に。

シングルページ レスポンシブ SSL対応 予約フォーム

接骨院・整骨院

整骨院・接骨院のホームページは「マッサージ屋との違い」を明確に出すことで集客率が変わります。国家資格(柔道整復師)の証明、保険診療と自費メニューの料金透明化、症状訴求(腰痛・肩こり・自律神経・スポーツ障害・産後ケア)の章立てが核。地域密着の親しみ版と、自費メニュー中心の編集デザイン版で大きく方向性が変わります。詳しい設計手順は「整骨院・接骨院のホームページで集客を作る 7 つの構成要素」で解説しています。

接骨院サンプル ヒーロー画像
接骨院 / 親しみ版 最短2日納品

ふじみ整骨院 — 親しみ版

国家資格者の信頼感と地域密着のあたたかさを両立。保険診療・交通事故治療・骨盤矯正・鍼灸まで網羅、料金プラン3コース、施術メニュー8項目を1ページで案内。

シングルページ レスポンシブ SSL対応 Web予約 FAQ
接骨院サンプル 編集デザイン版 ヒーロー画像
接骨院 / 編集デザイン版 最短2日納品

結 YUI 整骨院 — 編集デザイン版

自由診療・自費メニュー中心の整骨院向け、編集誌のような高級感。明朝×セリフのタイポグラフィ、温かみのある紙質トーン、Apple風の実績数値、施術前後の VAS スコア推移チャートまで盛り込んだ「他とは違う」訴求型。

シングルページ レスポンシブ 編集デザイン データ可視化 料金透明

美容室・ヘアサロン

美容室・ヘアサロンのホームページは「スタイリスト指名」と「予約」が中心動線。スタイリスト紹介・ギャラリーグリッド・料金メニュー・予約フォームを 1 ページに集約し、ホットペッパービューティーと併用する前提で「公式サイトでしか取れない情報(オーガニックカラー・完全予約制・スタイリスト本人の作品集)」を出すと差別化できます。詳しい設計手順は「美容室・ヘアサロンのホームページで指名予約を増やす設計」で解説しています。

美容室サンプル ヒーロー画像
美容室 / エレガント 最短2日納品

サロン・ルミエール

ピンク × モーブ × クリームの上品なトーン、スタイリスト指名制・オーガニックカラー・完全予約制を訴求。スタイリスト3名紹介・ギャラリーグリッド・料金メニュー・予約導線を集約。

シングルページ レスポンシブ スタイリスト紹介 ギャラリー

士業(弁護士・税理士・司法書士)

士業(弁護士・税理士・司法書士・行政書士・社会保険労務士)のホームページは、ネイビー × ゴールドの威厳系トーンで「信頼・知性・実績」を伝える設計が王道。取扱業務 8 項目の網羅、初回相談無料の明示、料金体系の「目安範囲」明記、相談の流れ 4 ステップ、そして広告規制(弁護士法・税理士法)に配慮したコピー設計が必須です。詳しい設計手順は「士業(弁護士・税理士・司法書士)のホームページで信頼を獲得する設計」で解説しています。

士業サンプル ヒーロー画像
士業 / 信頼・知性 最短2日納品

サンプル法律事務所 — SAMPLE LAW OFFICE

ネイビー × ゴールドの威厳系。取扱業務8項目、初回相談無料、料金体系を「目安範囲」で明示、相談の流れ4ステップ、広告規制に配慮したコピー設計。

シングルページ レスポンシブ 料金目安テーブル 広告規制対応

カフェ・飲食店

カフェ・飲食店のホームページは「写真主導」が基本。大判ヒーロー画像でブランドの世界観を 3 秒で伝え、モーニング / ランチ / スイーツ / ドリンクの写真付きメニュー表、営業時間・座席数・予約導線、ギャラリーで店内の雰囲気を補完する構成が転換率の高い型です。Instagram と公式サイトの役割分担も提案できます。

カフェサンプル ヒーロー画像
カフェ / ナチュラル 最短2日納品

カフェ・キノヘ — CAFE KINOHE

アースカラーで写真主導、大判ヒーロー、モーニング/ランチ/スイーツの写真付きメニュー、ドリンク16種、ギャラリー、営業情報を1ページに集約。

シングルページ 写真主導 メニュー表 予約導線

介護福祉(デイサービス・通所介護)

介護福祉施設・デイサービス・通所介護のホームページは「ご家族と本人の安心」が判断軸。サービス内容・1 日の流れタイムライン・要支援/要介護別の料金目安・見学予約導線が必須項目です。本文 18px・行間 1.9 のアクセシブル設計、温かみのある黄色・オレンジ系の配色で、ご高齢の方ご家族の閲覧負担を最小化する設計を提案します。

介護福祉サンプル ヒーロー画像
介護福祉 / 安心・温かみ 最短2日納品

デイサービス・ひだまりの郷

温かい黄色とオレンジ、本文18px・行間1.9のアクセシブル設計。サービス8項目、1日の流れタイムライン、要支援/要介護別の料金目安、見学予約導線。

シングルページ アクセシブル設計 1日タイムライン 料金目安

中小製造業コーポレートサイト(マルチページ・全14ページ構成)

町工場・中小製造業のコーポレートサイトに必要なのは、事業 / 設備 / 品質 / 事例 / 採用の 5 つの情報層。取扱品目・対応材料・精度値・図面添付フォーム(STEP/IGES/PDF 対応・NDA 表記)・導入事例・採用ページまで揃った本格マルチページ構成で、「電話だけ」の問い合わせから脱却して新規取引・若手採用につなげます。詳しい設計手順は「中小製造業のコーポレートサイトで問い合わせを生む 14 ページ構成」で解説しています。

中小製造業コーポレートサイト ヒーロー画像
中小製造業 / マルチページ・コーポレート 14ページ構成

サンプル精密株式会社 — SAMPLE PRECISION Co., Ltd.

ペライチではない本格マルチページ構成。ホーム・会社概要・3事業ページ・導入事例ハブ+個別2件・設備一覧・品質保証・採用・お知らせ・お問い合わせの全14ページ。共通レイアウト・パンくず・JSON-LD(Organization/Service/Article/FAQPage/BreadcrumbList)・ドロップダウンナビ・図面ファイル添付フォームまで実装。中小製造業の発注判断に必要な情報を網羅。

マルチページ (14) 共通レイアウト パンくず JSON-LD構造化 採用ページ 図面添付フォーム

建築・設計事務所(ブルータリスト系)

建築事務所・プロダクトデザイン会社・コンサル会社のウェブサイトは、ジェネリックな企業 HP テンプレでは作品の格が下がります。OMA / BIG / 隈研吾事務所のような海外建築事務所サイトを参考に、超大型タイポ・コンクリ風 CSS テクスチャ・グリッドを意図的に破るレイアウト・1 色の強アクセントで作品集(Selected Works)を主役にする設計が向きます。Awwwards 級のクオリティを単一ページで実現します。

建築事務所サンプル ヒーロー画像
建築・設計 / ブルータリスト 最短2日納品

HŌI Architects — 方位設計事務所

OMA / BIG / 隈研吾事務所のような海外建築事務所サイトの方向性。超大型タイポ、コンクリ風 CSS テクスチャ、グリッドを意図的に破ったレイアウト、ブラッドオレンジの強アクセント。設計事務所・プロダクトデザイン会社・コンサル向け。

シングルページ レスポンシブ 超大型タイポ CSS テクスチャのみ ハンバーガーフルスクリーン

SaaS・スタートアップ LP(ダークテック系)

B2B SaaS・AI 系スタートアップ・インフラ系プロダクトの Landing Page は、Linear / Vercel / Resend 系のダーク UI が現在の標準。漆黒背景に発光する単色アクセント、コンソール風ダッシュボードモック、Python/TypeScript/curl のタブ切替コードサンプル、3 段プライシング、Why us 対比表まで揃った構成で、エンジニア・PM ターゲットの転換率を上げます。

SaaS LPサンプル ヒーロー画像
SaaS / ダークテック 最短2日納品

Halt — AI agent observability platform

Linear / Vercel / Resend 系の本気版 LP。漆黒背景+電気青アクセント、コンソール風ダッシュボードモック、Python/TypeScript/curl のタブ切替コード片、価格表 3 段、Why us 対比表まで完備。AI/インフラ系 SaaS、エンジニア向け B2B プロダクトのファウンダー向け。

シングルページ ダーク UI コンソールモック コード片タブ切替 料金 3 段

EC・ブランド物販(編集デザイン系)

クラフト系食品・地方特産品・オーガニックコスメ・伝統工芸品の EC サイトは、Aesop / Le Labo / 中川政七商店系の編集デザイン EC が刺さります。アースカラー基調、明朝×セリフのタイポ、縦書きキャッチ、商品ラインナップ+特集 PDP、淹れ方ガイド/使い方、ストーリー、Journal までブランド世界観で構築。Shopify テーマでは出せない世界観をオリジナルデザインで実現します。

EC ブランドサイトサンプル ヒーロー画像
EC / 編集デザイン 最短2日納品

灯火 TOMOSHIBI — シングルオリジン珈琲焙煎所

Aesop / Le Labo / 中川政七商店 系の編集デザイン EC。アースカラー基調、明朝×セリフのタイポ、縦書きキャッチ、3 種商品ラインナップ+特集 PDP、淹れ方ガイド、店主ストーリー、Journal までブランド世界観で構築。クラフト系食品・地方特産品・コスメ向け。

シングルページ 商品カード+カート 編集デザイン 縦書きキャッチ Brew Guide / Journal

クリエイティブスタジオ・ポートフォリオ(インタラクティブ系)

映像作家・写真家・アートディレクター・デザインスタジオのポートフォリオサイトは、Awwwards SOTD 級のインタラクションが求められます。カスタムカーソル、スクロール連動アニメ、Fraunces 可変ウェイトの巨大タイポ、ホバー連動の作品サムネ、無限ループマーキー、Featured Case の scrollytelling まで実装。クライアントワーク獲得用の「名刺サイト」として機能します。

クリエイティブポートフォリオサンプル ヒーロー画像
ポートフォリオ / インタラクティブ 最短2日納品

Studio NULA — Creative direction & motion

Awwwards SOTD 級を狙ったクリエイティブスタジオ・ポートフォリオ。カスタムカーソル、スクロール連動、Fraunces 可変ウェイトの巨大タイポ、ホバー連動の作品サムネ、無限ループマーキー、Featured Case の scrollytelling。映像作家・写真家・アートディレクター・デザインスタジオ向け。

シングルページ カスタムカーソル スクロール演出 マーキー reduced-motion 対応

編集メディア・オウンドメディア(マルチページ・7ページ)

出版社・編集プロダクション・こだわりのオウンドメディアには、ジェネリックなブログテンプレでは出せない雑誌の組版品質が必要です。drop cap・欄外注釈・脚注・blockquote の本格組版、記事連番、ノンブル、編集後記の手書きサイン、バックナンバー一覧まで、紙の雑誌の作法を Web で再現。SEO のための内部リンク構造(カテゴリ/タグ/連載別)も組み込みます。

季刊メディアサンプル ヒーロー画像
編集メディア / 季刊誌 7ページ構成

Quaternary — 季刊 暮らしの研究室

暮しの手帖・papersky 系の雑誌組版を Web で本気再現。drop cap・欄外注釈・脚注・blockquote の本格組版、記事連番(24-001〜)、ノンブル、編集後記の手書きサインまで紙の雑誌の作法を踏襲。トップ / 記事一覧 / 記事詳細2本 / 編集後記 / 媒体について / バックナンバー24号の全7ページ。出版社・編集プロダクション・こだわりのオウンドメディア向け。

マルチページ (7) 本格組版 欄外注釈・脚注 記事連番 バックナンバー

不動産仲介(リノベ系・マルチページ・7ページ)

古民家・町家・リノベーション物件専門の不動産仲介サイトは、cowcamo / 東京R不動産 系の編集型物件サイトが向きます。物件 ID 連番、SVG 手描き間取り図、担当者の顔と人柄、「担当者のこの物件のここがいい」コラム、物件の物語まで作り込み、普通の物件サイトでは出せない「物件の良さ」を伝えます。詳しい設計手順は「リノベ系不動産仲介サイトの設計」で解説しています。

不動産仲介サンプル ヒーロー画像
不動産仲介 / リノベ専門 7ページ構成

次の家 / TSUGINO — 京都リノベ専門の小規模仲介

cowcamo / 東京R不動産 系の編集型不動産サイト。物件IDの連番(K-2026-014)、SVG 手描き間取り図(1F+2F)、担当者の顔SVG+メモ("猫が好き" "前職は大工")、「担当者のこの物件のここがいい」「前のオーナーは…」物件の物語まで。トップ / 物件一覧(フィルター付)/ 物件詳細2件 / エリアガイド / 会社案内 / お問合せの全7ページ。リノベ系不動産・町家リノベ業者向け。

マルチページ (7) SVG 間取り図 物件フィルター 物件ID連番 担当者ストーリー

料亭・高級和食店(マルチページ・5ページ)

料亭・割烹・高級和食店のホームページは、観光客向けレストラン HP と決定的に違う設計が必要。墨×生成り×金(落款のみ)の極ミニマル和の世界、屋号の縦書き巨大タイポ、店主の挨拶を手書き調で出す、印鑑風 SVG 落款、個室名の季語(霜月・残月・水音の間)、和暦・漢数字の予約カレンダー、お断り事項まで実装。詳しい設計手順は「料亭・高級和食店のWebサイト設計」で解説しています。

料亭サンプル ヒーロー画像
料亭 / 京都和食 5ページ構成

料亭 月讀 TSUKUYOMI — 京都・東山の隠れ料亭

菊乃井・瓢亭・和久傳 系の極ミニマル和の世界。墨×生成り×金(落款のみ)、屋号の縦書き巨大タイポ、店主の挨拶を手書き Klee One で縦書き、印鑑風 SVG 落款、個室名は季語(霜月・残月・水音・雪見の間)。和暦・漢数字の予約カレンダー、「香水はお控えください」等の老舗料亭らしいお断り事項まで。トップ / 品書き / 個室 / ご予約 / 道のりの全5ページ。料亭・高級和食店・割烹向け。

マルチページ (5) 縦書きレイアウト 印鑑 SVG 落款 和暦カレンダー 個室予約

音楽アーティスト・個人サイト(マルチページ・5ページ)

インディーミュージシャン・実験音楽家・サウンドデザイナーの個人サイトは、テンプレでない作家本人の世界観を出すのが要諦。Warp / raster-noton / Bandcamp 系の禁欲ミニマル、純モノクロ、等幅 mono フォント、コンソール風メタ情報、内蔵プレイヤー+波形 SVG ビジュアライザ、Discography・Live スケジュール・Studio Diary まで実装。レーベル・個人マネジメント・自主リリース系に。

音楽アーティストサンプル ヒーロー画像
音楽 / 実験エレクトロニカ 5ページ構成

Yui Hasegawa / 長谷川 唯 — 実験的エレクトロニカ作家

Warp / raster-noton / Bandcamp 系の禁欲ミニマル個人サイト。純モノクロ・等幅 mono フォント・コンソール風メタ情報、内蔵プレイヤー(再生/シーク/トラック切替)+ 波形 SVG ビジュアライザ、リリース連番 [SLF-018] とプレス・マスタリング・スリーブの実名クレジット、Studio Diary("マスタリング送り (to aizu)" のような生っぽい日記)。トップ / Discography 18件 / Live スケジュール / Studio Diary / Contact の全5ページ。インディーレーベル・個人ミュージシャン向け。

マルチページ (5) 内蔵プレイヤー 波形ビジュアライザ 純モノクロ 等幅 mono

貴社・貴店専用のサンプルを先にお作りします

業種・院名・大まかな雰囲気をお聞かせください。無料で「貴社・貴店専用サンプル」を 1-2 日で組み立てて、見てから決めていただけます。