パンと灯り 麦
毎朝焼きたての小さなパン屋向け。食欲をそそる商品写真主導で、人気のパン・素材へのこだわり・店舗情報・オンライン/予約導線をまとめた温かい構成。
30業種の実物デモを公開しています。デザインの方向性を、言葉ではなく実物で比べてください。同じ業種で複数バリエーションがあるものも、すべてブラウザでそのまま操作できます。
毎朝焼きたての小さなパン屋向け。食欲をそそる商品写真主導で、人気のパン・素材へのこだわり・店舗情報・オンライン/予約導線をまとめた温かい構成。
家族の節目を撮る写真館向け。七五三・成人式・お宮参り・家族写真の作品ギャラリーを主役に、撮影メニュー・料金・予約導線をやわらかく上質にまとめた構成。
暮らしに花を届ける街の花屋向け。季節の花・用途で選ぶギフト・オンライン注文/配達を、くすみピンク×セージのやさしく洗練されたトーンでまとめた構成。
上質な一日を演出する結婚式場向け。大判ビジュアルと余白、シャンパンゴールドの高級感で、会場・プラン・ブライダルフェア見学予約をまとめたエレガントな構成。
製造業の採用特設サイト。力強くストーリー性のある構成で、働く魅力・社員の声・募集要項・エントリー導線をまとめた、採用に効くダーク基調の1ページ。
自然素材の注文住宅をつくる地域工務店。大判の住宅写真、施工事例ギャラリー、家づくりの流れ、見学会予約まで、木の温もりが伝わる構成。
地域のかかりつけ内科・小児科向け。清潔感と安心感のあるトーンで、診療科目・Web予約・医師紹介・診療時間を整理。医療広告ガイドライン配慮。
ダークでエネルギッシュなトーン。体験予約・料金プラン・トレーナー紹介を、結果にこだわるパーソナルジムらしい力強い構成でまとめた1ページ。
Apple製品ページの型を下敷きにした、全画面ビジュアル+スクロール叙述のD2Cプロダクトページ。黒基調・特大タイポで商品を主役に。
Glossier系の柔らかくミニマルなD2Cスキンケアブランドサイト。くすみピンク×明朝で、商品ストーリーとカート導線を上品に。
Vogue・NYT風エディトリアルの型。太い明朝のマストヘッド、非対称グリッド、大型フィーチャー記事で、ブランドの世界観を伝えるメディア。
Stripe・Linear風のダークなグラデーションHero、抽象メッシュ、機能グリッド、料金表で構成したBtoB SaaSのランディングページ。
Awwwards風の大胆なダークポートフォリオ。全画面の作品ビジュアルと特大タイポで、写真・映像スタジオの世界観を表現。
地域のかかりつけ・ファミリー層向けの温かみあるトーン。診療メニュー8項目タイル、初診の流れ、予約フォーム、FAQ、院長紹介、簡易チャットボットを1ページに集約。
自由診療・審美/インプラント中心の医院向け、上質で落ち着いたトーン。CT・診療ユニット・コンサル風景の写真主導レイアウトでブランド訴求型に。
国家資格者の信頼感と、地元らしいあたたかさを両立。保険診療・交通事故治療・骨盤矯正・鍼灸まで網羅、料金プラン3コース、施術メニュー8項目を1ページで案内。
自由診療・自費メニュー中心の整骨院向け、編集誌のような高級感。明朝×セリフのタイポグラフィ、温かみのある紙質トーン、施術前後の VAS スコア推移チャートまで盛り込んだ「他とは違う」訴求型。
ピンク × モーブ × クリームの上品なトーン、スタイリスト指名制・オーガニックカラー・完全予約制を訴求。スタイリスト3名紹介・ギャラリーグリッド・料金メニュー・予約導線を集約。
ネイビー × ゴールドの威厳系。取扱業務8項目、初回相談無料、料金体系を「目安範囲」で明示、相談の流れ4ステップ、広告規制に配慮したコピー設計。
アースカラーで写真主導、大判ヒーロー、モーニング/ランチ/スイーツの写真付きメニュー、ドリンク16種、ギャラリー、営業情報を1ページに集約。
温かい黄色とオレンジ、本文18px・行間1.9のアクセシブル設計。サービス8項目、1日の流れタイムライン、要支援/要介護別の料金目安、見学予約導線。
OMA / BIG / 隈研吾事務所のような海外建築事務所サイトの方向性。超大型タイポ、コンクリ風 CSS テクスチャ、グリッドを意図的に破ったレイアウト、ブラッドオレンジの強アクセント。設計事務所・プロダクトデザイン会社・コンサル向け。
Linear / Vercel / Resend 系の本気版 LP。漆黒背景+電気青アクセント、コンソール風ダッシュボードモック、Python/TypeScript/curl のタブ切替コード片、価格表 3 段、Why us 対比表まで完備。AI/インフラ系 SaaS、エンジニア向け B2B プロダクトのファウンダー向け。
Aesop / Le Labo / 中川政七商店 系の編集デザイン EC。アースカラー基調、明朝×セリフのタイポ、縦書きキャッチ、3 種商品ラインナップ+特集 PDP、淹れ方ガイド、店主ストーリー、Journal までブランド世界観で構築。クラフト系食品・地方特産品・コスメ向け。
Awwwards SOTD 級を狙ったクリエイティブスタジオ・ポートフォリオ。カスタムカーソル、スクロール連動、Fraunces 可変ウェイトの巨大タイポ、ホバー連動の作品サムネ、無限ループマーキー、Featured Case の scrollytelling。映像作家・写真家・アートディレクター・デザインスタジオ向け。
Warp / raster-noton / Bandcamp 系の禁欲ミニマル個人サイト。純モノクロ・等幅 mono フォント・コンソール風メタ情報、内蔵プレイヤー(再生/シーク/トラック切替)+ 波形 SVG ビジュアライザ、リリース連番 [SLF-018] とプレス・マスタリング・スリーブの実名クレジット、Studio Diary("マスタリング送り (to aizu)" のような生っぽい日記)。トップ / Discography 18件 / Live スケジュール / Studio Diary / Contact の全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)を主役にする設計が向きます。
B2B SaaS・AI 系スタートアップ・インフラ系プロダクトの Landing Page は、Linear / Vercel / Resend 系のダーク UI が現在の標準。漆黒背景に発光する単色アクセント、コンソール風ダッシュボードモック、Python/TypeScript/curl のタブ切替コードサンプル、3 段プライシング、Why us 対比表まで揃った構成で、エンジニア・PM ターゲットの転換率を上げます。
クラフト系食品・地方特産品・オーガニックコスメ・伝統工芸品の 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 まで実装。レーベル・個人マネジメント・自主リリース系に。