Webサイト制作実績・サンプル
実物デモを業種別に公開しています。デザインの方向性をその場で比べていただけます。
歯科医院
歯科医院のホームページ制作で押さえるべきは、初診の不安解消・予約導線・診療メニュー一覧・院長紹介の 4 点です。ファミリー層向けの親しみあるトーンと、自由診療中心の上質トーンは、来院動機が違うので別構成にした方が転換率が上がります。設計の考え方は「歯科医院ホームページ制作で押さえるべき設計原則」の記事で詳しく解説しています。
接骨院・整骨院
整骨院・接骨院のホームページは「マッサージ屋との違い」を明確に出すことで集客率が変わります。国家資格(柔道整復師)の証明、保険診療と自費メニューの料金透明化、症状訴求(腰痛・肩こり・自律神経・スポーツ障害・産後ケア)の章立てが核。地域密着の親しみ版と、自費メニュー中心の編集デザイン版で大きく方向性が変わります。詳しい設計手順は「整骨院・接骨院のホームページで集客を作る 7 つの構成要素」で解説しています。
美容室・ヘアサロン
美容室・ヘアサロンのホームページは「スタイリスト指名」と「予約」が中心動線。スタイリスト紹介・ギャラリーグリッド・料金メニュー・予約フォームを 1 ページに集約し、ホットペッパービューティーと併用する前提で「公式サイトでしか取れない情報(オーガニックカラー・完全予約制・スタイリスト本人の作品集)」を出すと差別化できます。詳しい設計手順は「美容室・ヘアサロンのホームページで指名予約を増やす設計」で解説しています。
士業(弁護士・税理士・司法書士)
士業(弁護士・税理士・司法書士・行政書士・社会保険労務士)のホームページは、ネイビー × ゴールドの威厳系トーンで「信頼・知性・実績」を伝える設計が王道。取扱業務 8 項目の網羅、初回相談無料の明示、料金体系の「目安範囲」明記、相談の流れ 4 ステップ、そして広告規制(弁護士法・税理士法)に配慮したコピー設計が必須です。詳しい設計手順は「士業(弁護士・税理士・司法書士)のホームページで信頼を獲得する設計」で解説しています。
カフェ・飲食店
カフェ・飲食店のホームページは「写真主導」が基本。大判ヒーロー画像でブランドの世界観を 3 秒で伝え、モーニング / ランチ / スイーツ / ドリンクの写真付きメニュー表、営業時間・座席数・予約導線、ギャラリーで店内の雰囲気を補完する構成が転換率の高い型です。Instagram と公式サイトの役割分担も提案できます。
介護福祉(デイサービス・通所介護)
介護福祉施設・デイサービス・通所介護のホームページは「ご家族と本人の安心」が判断軸。サービス内容・1 日の流れタイムライン・要支援/要介護別の料金目安・見学予約導線が必須項目です。本文 18px・行間 1.9 のアクセシブル設計、温かみのある黄色・オレンジ系の配色で、ご高齢の方ご家族の閲覧負担を最小化する設計を提案します。
中小製造業コーポレートサイト(マルチページ・全14ページ構成)
町工場・中小製造業のコーポレートサイトに必要なのは、事業 / 設備 / 品質 / 事例 / 採用の 5 つの情報層。取扱品目・対応材料・精度値・図面添付フォーム(STEP/IGES/PDF 対応・NDA 表記)・導入事例・採用ページまで揃った本格マルチページ構成で、「電話だけ」の問い合わせから脱却して新規取引・若手採用につなげます。詳しい設計手順は「中小製造業のコーポレートサイトで問い合わせを生む 14 ページ構成」で解説しています。
建築・設計事務所(ブルータリスト系)
建築事務所・プロダクトデザイン会社・コンサル会社のウェブサイトは、ジェネリックな企業 HP テンプレでは作品の格が下がります。OMA / BIG / 隈研吾事務所のような海外建築事務所サイトを参考に、超大型タイポ・コンクリ風 CSS テクスチャ・グリッドを意図的に破るレイアウト・1 色の強アクセントで作品集(Selected Works)を主役にする設計が向きます。Awwwards 級のクオリティを単一ページで実現します。
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 まで実装。クライアントワーク獲得用の「名刺サイト」として機能します。
編集メディア・オウンドメディア(マルチページ・7ページ)
出版社・編集プロダクション・こだわりのオウンドメディアには、ジェネリックなブログテンプレでは出せない雑誌の組版品質が必要です。drop cap・欄外注釈・脚注・blockquote の本格組版、記事連番、ノンブル、編集後記の手書きサイン、バックナンバー一覧まで、紙の雑誌の作法を Web で再現。SEO のための内部リンク構造(カテゴリ/タグ/連載別)も組み込みます。
不動産仲介(リノベ系・マルチページ・7ページ)
古民家・町家・リノベーション物件専門の不動産仲介サイトは、cowcamo / 東京R不動産 系の編集型物件サイトが向きます。物件 ID 連番、SVG 手描き間取り図、担当者の顔と人柄、「担当者のこの物件のここがいい」コラム、物件の物語まで作り込み、普通の物件サイトでは出せない「物件の良さ」を伝えます。詳しい設計手順は「リノベ系不動産仲介サイトの設計」で解説しています。
料亭・高級和食店(マルチページ・5ページ)
料亭・割烹・高級和食店のホームページは、観光客向けレストラン HP と決定的に違う設計が必要。墨×生成り×金(落款のみ)の極ミニマル和の世界、屋号の縦書き巨大タイポ、店主の挨拶を手書き調で出す、印鑑風 SVG 落款、個室名の季語(霜月・残月・水音の間)、和暦・漢数字の予約カレンダー、お断り事項まで実装。詳しい設計手順は「料亭・高級和食店のWebサイト設計」で解説しています。
音楽アーティスト・個人サイト(マルチページ・5ページ)
インディーミュージシャン・実験音楽家・サウンドデザイナーの個人サイトは、テンプレでない作家本人の世界観を出すのが要諦。Warp / raster-noton / Bandcamp 系の禁欲ミニマル、純モノクロ、等幅 mono フォント、コンソール風メタ情報、内蔵プレイヤー+波形 SVG ビジュアライザ、Discography・Live スケジュール・Studio Diary まで実装。レーベル・個人マネジメント・自主リリース系に。
Yui Hasegawa / 長谷川 唯 — 実験的エレクトロニカ作家
Warp / raster-noton / Bandcamp 系の禁欲ミニマル個人サイト。純モノクロ・等幅 mono フォント・コンソール風メタ情報、内蔵プレイヤー(再生/シーク/トラック切替)+ 波形 SVG ビジュアライザ、リリース連番 [SLF-018] とプレス・マスタリング・スリーブの実名クレジット、Studio Diary("マスタリング送り (to aizu)" のような生っぽい日記)。トップ / Discography 18件 / Live スケジュール / Studio Diary / Contact の全5ページ。インディーレーベル・個人ミュージシャン向け。