サンプルについて: 掲載している店名・施設名・担当者名・住所・電話番号・実績数値はすべて架空のサンプルです。写真は AI 生成画像を使用しています。 実際の制作時はお客様の情報・お写真・撮影手配で差し替えます。
ベーカリーサンプル パンと灯り 麦
ベーカリー / パン屋写真主導

パンと灯り 麦

毎朝焼きたての小さなパン屋向け。食欲をそそる商品写真主導で、人気のパン・素材へのこだわり・店舗情報・オンライン/予約導線をまとめた温かい構成。

商品ギャラリー丸ゴシックテイクアウト
写真館サンプル ひかり写真館
写真館 / フォトスタジオギャラリー

ひかり写真館

家族の節目を撮る写真館向け。七五三・成人式・お宮参り・家族写真の作品ギャラリーを主役に、撮影メニュー・料金・予約導線をやわらかく上質にまとめた構成。

作品ギャラリー明朝予約導線
花屋サンプル 花とくらし
花屋 / フローリストEC・ギフト

花とくらし

暮らしに花を届ける街の花屋向け。季節の花・用途で選ぶギフト・オンライン注文/配達を、くすみピンク×セージのやさしく洗練されたトーンでまとめた構成。

用途で選ぶオンライン注文明朝
結婚式場サンプル ウエディング 凛
結婚式場 / ブライダルエレガント

ウエディング 凛

上質な一日を演出する結婚式場向け。大判ビジュアルと余白、シャンパンゴールドの高級感で、会場・プラン・ブライダルフェア見学予約をまとめたエレガントな構成。

会場ギャラリー見学予約明朝
採用サイトサンプル モノづくり製作所
採用サイト / リクルート採用特設

モノづくり製作所(採用特設)

製造業の採用特設サイト。力強くストーリー性のある構成で、働く魅力・社員の声・募集要項・エントリー導線をまとめた、採用に効くダーク基調の1ページ。

社員紹介募集要項エントリー導線
工務店サンプル 木の工務店きこり
工務店 / 注文住宅大判ビジュアル

木の工務店 きこり

自然素材の注文住宅をつくる地域工務店。大判の住宅写真、施工事例ギャラリー、家づくりの流れ、見学会予約まで、木の温もりが伝わる構成。

施工事例明朝相談予約
内科クリニックサンプル みどり内科クリニック
クリニック / 内科・小児科医療・信頼

みどり内科クリニック

地域のかかりつけ内科・小児科向け。清潔感と安心感のあるトーンで、診療科目・Web予約・医師紹介・診療時間を整理。医療広告ガイドライン配慮。

Web予約診療時間表レスポンシブ
法律事務所サンプル 青嵐法律事務所
法律事務所 / 士業重厚・信頼

青嵐法律事務所

ネイビー基調・明朝の重厚な信頼設計。取扱分野・弁護士紹介・初回相談導線を整理し、士業らしい知性と安心感を表現。広告規制に配慮。

取扱分野相談予約明朝
パーソナルジムサンプル FORGE
パーソナルジム / フィットネスダーク・力強い

FORGE パーソナルジム

ダークでエネルギッシュなトーン。体験予約・料金プラン・トレーナー紹介を、結果にこだわるパーソナルジムらしい力強い構成でまとめた1ページ。

体験予約料金プランダークUI
自動車整備サンプル カーケア伏見
自動車整備 / 車検明朗会計

カーケア伏見

地域の整備工場向け。車検・整備メニュー、料金の明確さ、予約導線を、実直で分かりやすいブルー基調の構成で。安心の明朗会計を訴求。

車検料金整備メニュー予約導線
動物病院サンプル ともだち動物病院
動物病院 / 親しみ版温かみ系

ともだち動物病院

犬・猫・小動物のかかりつけ動物病院。診療案内・料金目安・夜間救急の導線・予約導線を、丸みのある温かいトーンでまとめた1ページ。

シングルページレスポンシブ予約導線
D2Cプロダクトページサンプル HAZE COFFEE
D2C / Apple型構成プロダクト

HAZE COFFEE

Apple製品ページの型を下敷きにした、全画面ビジュアル+スクロール叙述のD2Cプロダクトページ。黒基調・特大タイポで商品を主役に。

プロダクトLPスクロール演出ダーク基調
旅館サンプル 湯宿 風韻
旅館 / ラグジュアリー高級感

湯宿 風韻

星のや級ラグジュアリー旅館の構成。明朝・大判全画面写真・余白・縦組みで、静けさと高級感を表現した宿泊施設サイト。

全画面ビジュアル明朝予約導線
民泊サンプル 京町家ステイ кото
民泊 / Airbnb型宿泊予約

京町家ステイ кото

Airbnbの型を参考にした、写真ギャラリー+設備+予約カードの一棟貸し民泊サイト。直予約を増やす導線設計。

ギャラリー予約カードレスポンシブ
D2Cコスメサンプル 葵 aoi
コスメ / Glossier型D2C

葵 aoi skincare

Glossier系の柔らかくミニマルなD2Cスキンケアブランドサイト。くすみピンク×明朝で、商品ストーリーとカート導線を上品に。

ブランドサイトカート導線柔らかトーン
オウンドメディアサンプル KIWAMI JOURNAL
メディア / 雑誌型オウンドメディア

KIWAMI JOURNAL

Vogue・NYT風エディトリアルの型。太い明朝のマストヘッド、非対称グリッド、大型フィーチャー記事で、ブランドの世界観を伝えるメディア。

記事グリッド明朝編集デザイン
SaaSサンプル Flowdesk
SaaS / Stripe型BtoB

Flowdesk

Stripe・Linear風のダークなグラデーションHero、抽象メッシュ、機能グリッド、料金表で構成したBtoB SaaSのランディングページ。

SaaS LPダークUI料金表
ポートフォリオサンプル NOIR studio
ポートフォリオ / Awwwards型クリエイティブ

NOIR studio

Awwwards風の大胆なダークポートフォリオ。全画面の作品ビジュアルと特大タイポで、写真・映像スタジオの世界観を表現。

全画面作品特大タイポダーク基調
学習塾サンプル 向学ゼミナール
学習塾 / スクールLPスクール

向学ゼミナール

明るく信頼感のある学習塾LP。選ばれる理由・コース表・合格者の声・体験授業/資料請求の導線を、青基調のトーンでまとめた構成。

スクールLPコース表資料請求導線
歯科医院サンプル 親しみ版 ヒーロー画像
歯科 / 親しみ版最短2日納品

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

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

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

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

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

シングルページレスポンシブSSL対応予約フォーム
接骨院サンプル ヒーロー画像
接骨院 / 親しみ版最短2日納品

ふじみ整骨院 — 親しみ版

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

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

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

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

シングルページレスポンシブ編集デザインデータ可視化料金透明
美容室サンプル ヒーロー画像
美容室 / エレガント最短2日納品

サロン・ルミエール

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

シングルページレスポンシブスタイリスト紹介ギャラリー
士業サンプル ヒーロー画像
士業 / 信頼・知性最短2日納品

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

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

シングルページレスポンシブ料金目安テーブル広告規制対応
カフェサンプル ヒーロー画像
カフェ / ナチュラル最短2日納品

カフェ・キノヘ — CAFE KINOHE

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

シングルページ写真主導メニュー表予約導線
介護福祉サンプル ヒーロー画像
介護福祉 / 安心・温かみ最短2日納品

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

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

シングルページアクセシブル設計1日タイムライン料金目安
中小製造業コーポレートサイト ヒーロー画像
中小製造業 / マルチページ14ページ構成

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

ペライチではない本格マルチページ構成。ホーム・会社概要・3事業ページ・導入事例ハブ+個別2件・設備一覧・品質保証・採用・お知らせ・お問い合わせの全14ページ。共通レイアウト・パンくず・JSON-LD・ドロップダウンナビ・図面ファイル添付フォームまで実装。

マルチページ (14)共通レイアウトJSON-LD構造化採用ページ図面添付フォーム
建築事務所サンプル ヒーロー画像
建築・設計 / ブルータリスト最短2日納品

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

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

シングルページレスポンシブ超大型タイポCSS テクスチャのみ
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 / 編集デザイン最短2日納品

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

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

シングルページ商品カード+カート編集デザイン縦書きキャッチ
クリエイティブポートフォリオサンプル ヒーロー画像
ポートフォリオ / インタラクティブ最短2日納品

Studio NULA — Creative direction & motion

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

シングルページカスタムカーソルスクロール演出reduced-motion 対応
季刊メディアサンプル ヒーロー画像
編集メディア / 季刊誌7ページ構成

Quaternary — 季刊 暮らしの研究室

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

マルチページ (7)本格組版欄外注釈・脚注バックナンバー
不動産仲介サンプル ヒーロー画像
不動産仲介 / リノベ専門7ページ構成

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

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

マルチページ (7)SVG 間取り図物件フィルター担当者ストーリー
料亭サンプル ヒーロー画像
料亭 / 京都和食5ページ構成

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

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

マルチページ (5)縦書きレイアウト和暦カレンダー個室予約
音楽アーティストサンプル ヒーロー画像
音楽 / 実験エレクトロニカ5ページ構成

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

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

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

料金は、見積もり前に条件込みで料金ページにすべて公開しています。

業種別の設計ポイント

サンプルを作る時に押さえた、業種ごとの設計の考え方です。気になる業種だけ開いてご覧ください。

歯科医院

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

接骨院・整骨院

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

美容室・ヘアサロン

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

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

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

カフェ・飲食店

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

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

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

中小製造業コーポレートサイト

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

建築・設計事務所

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

SaaS・スタートアップ LP

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

EC・ブランド物販

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

クリエイティブスタジオ・ポートフォリオ

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

編集メディア・オウンドメディア

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

不動産仲介(リノベ系)

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

料亭・高級和食店

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

音楽アーティスト・個人サイト

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

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

業種・院名・大まかな雰囲気をお聞かせください。無料で「貴社・貴店専用サンプル」を 1-2 日で組み立てて、見てから決めていただけます。いまのサイトがある方は、先に無料診断で現状を数字にしておくと話が早くなります。

お電話でも:080-6133-7514(平日10〜17時)