地域密着の工務店を想定
建物ではなく、住む人を主役にする
ファーストビューに建物ではなく引き渡しの場面を置き、「誰が建てるか」で選ばれる構成にしました。生成りの紙にレンガ色を差し、見出しは明朝体で落ち着かせています。
- 創業年・年間棟数・価格帯・対応エリアを、問い合わせ前に開示する
- 施工事例には必ず施主の言葉を添え、仕様表だけで終わらせない
- 大工の手元を見せ、設計と施工が同じ人間であることを示す
Works
どんなデザインになるかを、先に見てください。
「SEOに強い」「記事が更新できる」は、文字だけでは判断できません。業種ごとにデザインの方向を変えたサンプルサイトを制作しているので、実物をご覧ください。
設計事務所・高価格帯のビルダーを想定
説明を削り、写真1枚あたりの質で勝負する
白と墨の2色だけ。本文まで明朝体にし、余白を通常の倍以上に取りました。作品は番号と土地の名前だけで並べ、説明を詳細ページに逃がしています。
- アクセント色を持たない。色で語らず、余白と書体で語る
- 一覧にサムネイルを出さない。写真を小さく並べると1枚の印象が落ちるため
- 数字は3つだけに絞る（年6棟・設計者1名・18か月）
リフォーム専門会社を想定
「いくらかかるか分からない」を、数字と写真で消す
濃紺を面で使い、橙で行動喚起する構成です。ビフォーアフターは並べるだけでなく、動かして確かめられる比較スライダーにしました。明朝を一切使わず、01・02とは真逆に情報密度を上げています。
- ヒーローの主役を比較スライダーにし、変化を最初の画面で見せる
- 工事別の工期と費用を表で公開し、相見積もりの土俵に先に乗る
- 追加工事が出た経緯と金額まで事例ページに書く
自然素材の家・古民家再生を想定
時間の経過を、価値として見せる
深緑と生成りで組み、見出しを縦書きにしました。番号は漢数字。写真は彩度を落として使っています。新築の写真だけを並べず、0年・5年・10年・30年の変化を主題に据えた構成です。
- ヒーローの見出しを縦書きにし、素材と時間を扱う店の佇まいをつくる
- 経年変化を年数ごとに開示し、塗り直しの費用まで書く
- 木の産地・伐採時期・乾燥期間を数字で示す
完成見学会のランディングページを想定
迷っている人を、その場で予約させる
LPの実例調査に基づき、成約に効く構成をそのまま採用しました。ただし造形は寄せていません。袋文字も斜めの帯も使わず、朱は行動喚起だけに絞っています。構造は実例に従い、見た目は保つ——という作り方です。
- ファーストビューはベネフィットと信頼材料に絞り、日程は1行に圧縮する
- CTAをファーストビュー・中盤・末尾・追従バーの4か所に置く
- お客様の声・来場特典・作り手の言葉で、参加の不安と動機を両側から埋める
中小企業の顧問税理士を想定
定番の白＋紺に乗り、イラストを外して差をつくる
税理士サイトで最も多い配色にあえて乗ったうえで、この業種で最も多用されるイラストを一切使いませんでした。角丸も使わず、直角と細い罫線で帳票のような硬さを出しています。「豊富な経験」とは書かず、創業32年・顧問先186社という数字に翻訳しました。
- 顧問料を年商×訪問頻度の2軸の表で公開し、含まれない費用も分けて書く
- 対応業種を3つに絞り、勘定科目レベルの論点まで踏み込む
- ブログではなく「制度のうごき」として、顧問先に影響がある改正だけを短く出す
相続専門の税理士事務所を想定
急いでいるが、急かされたくない人に向けて
士業サイトでほぼ見ない生成りと臙脂で組みました。青系は一切使っていません。見出しは明朝、行間は広め。相続という状況に合わせて、急かさない見え方を優先しています。「親身な対応」を見出しに使いつつ、その言葉が空虚にならないよう中身で受けました。
- 10か月という期限を、煽らず事実として3段階で示す
- 費用を遺産総額に対する料率で公開し、加算される条件も並べる
- 代表の顔写真は生成せず、実運用で入る位置だけを確保する
社労士事務所（労務トラブル対応）を想定
緊急性を、配色と行間で出す
士業サイトにほぼ存在しない白＋黒＋黄で組みました。黄は警告色として、注意喚起の箇所にだけ使っています。行間を1.8まで詰め、見出しは900の極太。02の相続サイトとは真逆に、落ち着きより即応を優先した設計です。
- 「今日中に確認すること」を最初の画面に置き、順番を間違えると不利になると明示する
- サービス名ではなく、起きている事象（解雇・未払い残業・労基署）で入口を分ける
- 電話番号をページ内で最も大きい要素にする。この業種の主導線だから
スタートアップ向け税理士事務所を想定
士業に見えないこと自体を、狙う
黒地にライムを1色だけ差し、欧文主体で組みました。ここまでの士業3件はすべて明るい地だったので、地の色から変えています。この1件だけ、定番の安心記号（無料相談・親身な対応）を意図的に入れていません。
- 前の事務所との違いを、×とチェックの2列で一目で読ませる
- 月次で返す数字（ランウェイ・バーンレート）を、棒グラフつきの図で見せる
- 5件すべてに定番の記号を入れると全部同じに戻るため、ここだけ外す
助成金申請のランディングページを想定
扱うのは「期限」ではなく「金額」
LPのビジュアル訴求を改めて調査し、金額そのものをファーストビューの主役に据えました。平均受給額を大きな数字と分布の目盛りで図にし、実績はバッジで置いています。色は濃緑・橙・白の3色から増やしていません。
- 金額を見出しの一部ではなく、独立した図として組む
- 権威付けは文章ではなくバッジで置く（支援実績・決定率・着手金0円）
- 対象外だった方の声も載せ、無理に申請を勧めないことを示す
都市部の美容室を想定
ページ全体をモノクロで通し、スタイル写真だけを色にする
ヒーローに施術写真を使わず、無人の店内をモノクロで置きました。色が出るのはスタイル一覧の1か所だけです。雑誌の見開きに寄せた構成で、視線がスタイル写真に落ちるように設計しています。料金はすべて所要時間つきで出しました。
- カラー写真を1か所に限定し、見せたい要素へ視線を集める
- 料金を「所要時間つき」で出し、その日に何分かかるかを先に示す
- 追加料金が出る条件を3つに絞って公開し、当日の後出しをなくす
隠れ家エステサロンを想定
売っているのは施術ではなく、90分ぶんの静けさ
「何をされるか分からないまま横になる」という、この業種で最大の障壁を先に消しました。90分を6段階の縦のタイムラインで開示しています。生成りに若草を線でだけ置き、写真は地の色に沈めました。初回限定価格は出しますが、「勧誘しません」を必ず同じ視界に並べています。
- 90分の中身を時間ごとに開示し、来店前の不安を先に消す
- 初回限定価格と「勧誘・物販なし」を同じ視界に置く。安さだけでは逆に警戒される
- 毎月通う必要がない方にはそう伝える、という方針をページに書く
ネイル・まつげサロンを想定
主題を「デザインの綺麗さ」から「持ち」に移す
3〜4週ごとに通う定期客が読む前提で組みました。最初の画面に置いたのは仕上がりの美しさではなく、持ち・オフ・駐車場という、通う人が最初に確かめる3点です。持ちの目安はメニューごとに横棒で示しました。11件で唯一、角丸と丸ゴシックで通したページです。
- 持ちの週数をメニューごとに図で開示し、比較の土俵に自分から乗る
- オフ込み・税込で表示し、当日の会計で金額が変わらないようにする
- 「駐車場4台」を店舗情報に自然に置く。郊外店ではこれが来店の条件になる
メンズグルーミングサロンを想定
売りは技術ではなく、匿名性
美容室に入りづらい男性が判断の基準にしているのは、上手いかどうかより「誰にも会わずに済むか」です。そこを最初の画面で言い切り、「個室」の中身を6行で具体化しました。メニューはサービス名ではなく悩み（薄毛・ヒゲ・肌）で分けています。黒地は士業04でも使いましたが、あちらはライムと角丸、こちらは真鍮と直角で分けました。
- 「個室」の条件を6行で具体化する。言葉だけでは信用されない
- 入口を悩みで分ける。自分の悩みの名称を知らないまま探している人に合わせる
- 料金を総額表示にし、当日の追加提案をしないと明記する
医療脱毛のランディングページを想定
美容LPの型に乗せたうえで、主張は「安さ」ではなく「増えないこと」
美容皮膚科のLPを実物で調べ直し、この業種の型に正面から乗せました。悩みタグ・六角バッジ・月々の価格・白フチ見出し・黄色マーカーといった記号は、装飾ではなく判断の手がかりとして機能しています。そのうえで主張は他と変えました。安さではなく、いただかない費用を6項目すべて0円で出すという構成です。
- 価格は「月々」を主役にし、コース総額は打ち消し線つきで添える
- 医療脱毛とエステ脱毛の違いを◎○△×の表で出す。この業種で最も検索される疑問
- 効果を断定せず、副作用と個人差を明記する。医療広告の制約と訴求を両立させる
大衆酒場を想定
飲食の定番「暗い地に料理を浮かせる」を、あえて外す
大衆酒場は高級店ではありません。暗く組むと値段が高く見えて、来てほしい客層とずれます。クリームの地に朱赤と濃紺を置き、昭和の酒場の看板の色でまとめました。お品書きは画像ではなく短冊のHTMLで組んでいます。画像1枚のメニューは、拡大しないと読めないうえ検索にも引っかかりません。
- メニューを画像ではなくテキストの短冊で組み、全品を1ページに出す
- 「予約なしでも入れます」を最初の画面に置く。この業態では予約制のほうが敷居になる
- 混雑する時間帯を曜日別に公開する。リアルタイムの空席表示は運用が続かない
ベーカリーカフェを想定
主題は味ではなく「何時に行けば何があるか」
ベーカリーは、行った時間で買えるものが変わります。おいしさを語る前に、焼き上がりの時間を全部開示しました。時間割をページの骨格に据え、混む回には印を付けています。素材と日持ちまで書いたのは、価格の根拠と、添加物を使わないことの裏返しを同時に示すためです。
- 焼き上がりの時間割を骨格にする。来店時間を決められる形にした
- テイクアウトとイートインの条件を分けて明記する（電源・Wi-Fiなしも含めて）
- 日持ちと保存方法まで書く。添加物を入れない店ほど、ここを書かないと不満になる
鮨店（カウンター八席）を想定
選ばせない。20件で最も情報量の少ないページにする
おまかせ一本の店なので、品書きを並べる代わりに「献立の考え方」と「一日の流れ」だけを置きました。写真は3枚のみ、余白は他のサンプルの1.5倍です。情報量の少なさは設計であって、手抜きではありません。縦書きは建設04でも使いましたが、あちらは深緑の地。こちらは濃藍の地に、写真の点数と余白量で差をつけています。
- 選択肢を出さない構成にする。おまかせ一本の店で品書きを並べると、かえって嘘になる
- 「お一人様歓迎」を主張として置く。この業態で最も多い不安がそこだから
- 当日キャンセルを全額いただく理由まで書く。条件だけ書くと冷たく読まれる
ラーメン専門店を想定
「専門店です」と書かず、一杯の分解図で示す
丼の写真に番号を打ち、麺・スープ・鶏・味玉の設計を写真の位置と直結させました。20件で唯一の図解です。何が入っているかではなく、なぜそうしているかを書いています。士業03も白＋黄ですが、あちらの黄は警告色として面で使うもの。こちらの黄土は鶏白湯の色で、罫と番号にだけ使いました。
- 一杯の分解図をつくり、素材の説明を写真の位置と対応させる
- 1日140杯・売り切れ終いという制約を、そのまま強みとして書く
- 時間帯ごとの待ち時間を平日／土日で表にする。飲食で最も知りたい情報だから
焼肉食べ放題のランディングページを想定
定番の記号を捨てず、密度で押し切る
美容のLPで得た方針をそのまま適用しました。リボン、丸バッジ、黄色のマーカーといった「見慣れた記号」を外さず、価格を独立した図として置いています。黒地は士業04・美容04に続き3件目ですが、あちらは静けさと余白の黒。こちらは赤と金を高密度に敷き、同じ黒でも温度を変えました。
- 価格・品数・実績を、最初の画面に図とバッジで収める
- 品数を他店平均と横棒で比較する。食べ放題は品数で選ばれるから
- 「安い肉ばかりでは」など、疑われている点を6つ先に潰す
SEO / AIO
見た目が違っても、中身の作りは同じです。
業種ごとにデザインは変えていますが、検索エンジンとAI検索に対する作りは全事例で共通しています。ここを省くと、後から足すときに作り直しになるためです。
構造化データ（JSON-LD）
事業者の定義・パンくず・よくある質問・記事を、全ページに実装します。表示している文字と同じ値から生成するため、人が読む情報とAIが読む情報がズレません。
検索意図ごとにページを分ける
サービス・料金・流れ・事例を別のURLにします。1ページに詰め込むと、どの検索意図にも中途半端に当たります。
静的サイトとして構築する
ページを事前に生成して配信します。表示が速く、プラグインの更新漏れによる改ざんリスクもありません。
記事が積み上がる仕組み
管理画面と記事生成の仕組みを最初から組み込みます。公開後に記事を足しても、デザインが崩れません。
Results
実際に、順位が動いた案件
運営元の株式会社iroha が手がけた案件です。クライアントが特定されないよう、エリアと業種までの表記にとどめています。
Y県 × 建設業
地域名を含む検索キーワード
9〜10位 検索1ページ目 3ヶ月以内
既存サイトの検索順位が9〜10位で停滞していた会社。ページ構成とキーワード設計を組み直し、3ヶ月以内に1ページ目まで押し上げました。
東京都S区 × 美容業
地域名を含む検索キーワード
新規ドメイン 検索1ページ目 1ヶ月
ドメイン取得直後の新規サイト。地域名を軸にした構成で、公開から1ヶ月で対象キーワードの1ページ目に入りました。
検索順位は当方が決められるものではないため、保証はしていません。上記はあくまで過去の記録であり、同じ結果をお約束するものではありません。
By industry
業種ごとの考え方
同じ作り方をしても、業種によって効く場所が違います。何を優先すべきかを業種別に書いています。
Construction
工務店・リフォーム会社のホームページ制作
施工の質は、写真と実例の見せ方でしか伝わりません。
事例と考え方を見る Professional税理士・社労士事務所のホームページ制作
選ばれる理由が「安さ」にならないようにします。
事例と考え方を見る Beauty美容室・サロン・エステのホームページ制作
写真の世界観がそのまま単価になります。
事例と考え方を見る Restaurant飲食店のホームページ制作
ポータルサイトに払い続けない状態をつくります。
事例と考え方を見る掲載しているデザイン事例は、Atelier Iroha が自社で制作したサンプルサイトです。
見どころ