WEBCAN.
Free Diagnosis無料診断
  1. TOP
  2. デザイン参考集
  3. ワイヤーフレーム部品キット

WIREFRAME KIT ／ 32 PARTS

集客の役割から選べる、
ワイヤーフレーム部品キット。

ヘッダーからフッターまで、地域の中小企業サイトで使われる構成を32種の部品にしました。部品ごとに「なぜ問い合わせにつながるのか」を添えています。SVGをFigmaにドラッグすれば、編集できるレイヤーとして開けます。

ヘッダー

電話番号＋予約ボタン常設型header-tel

ロゴ・ナビの右側に、電話番号と予約（問い合わせ）ボタンを並べて常に見せるヘッダー。

地域の事業者を探す人の多くは「今すぐ電話したい」状態で来る。番号を探させないことが最初の離脱対策になる。番号の下に受付時間を小さく添えると、かける前の不安を減らせる。

電話番号＋予約ボタン常設型（PC）電話番号＋予約ボタン常設型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトオーブルホーム（ARBRE HOME）アーキテックスハウジングふふ歯科グリーン歯科クリニック倉敷 おとなこども歯科・矯正歯科木の家イムラ小若歯科医院西宮北口ライフ歯科・矯正歯科・小児歯科つきやま歯科・矯正歯科 いじり本院運船建設

ロゴ＋ナビ＋1ボタン型header-simple

ロゴとナビゲーションに、目立つボタンを1つだけ置いたすっきりしたヘッダー。

ボタンを1つに絞ると、サイトが一番してほしい行動（資料請求・来場予約など）がはっきりする。世界観を優先するブランド型のサイトに向く。

ロゴ＋ナビ＋1ボタン型（PC）ロゴ＋ナビ＋1ボタン型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトcolocal（コロカル）サイボウズ式ferretメディア北欧、暮らしの道具店TURNS（ターンズ）

左固定サイドナビ型header-sidebar

ロゴ・メニュー・相談ボタンを画面左の縦長エリアに固定し、コンテンツを右側に流す。

どこまでスクロールしても「無料相談」「カタログ請求」が視界に残る。写真を大きく見せたい住宅系と相性がよい。メニュー項目が多くても横幅を気にせず並べられる。

左固定サイドナビ型（PC）左固定サイドナビ型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトアオイ建設の注文住宅（AOI Home）

ファーストビュー

全面写真＋コピー型hero-photo-full

画面いっぱいの写真に、短いキャッチコピーを重ねるファーストビュー。

施工写真や院内の写真で「どんな空気の会社か」を一瞬で伝えられる。コピーは地域名と得意分野を入れて15字前後に。写真の上の文字は読みにくくなりやすいので、暗幕か余白側に置く。

全面写真＋コピー型（PC）全面写真＋コピー型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトアオイ建設の注文住宅（AOI Home）オーブルホーム（ARBRE HOME）colocal（コロカル）ふふ歯科木の家イムラ西宮北口ライフ歯科・矯正歯科・小児歯科つきやま歯科・矯正歯科 いじり本院TURNS（ターンズ）運船建設

左コピー・右写真の分割型hero-split

左にコピーとボタン、右に写真を置く2分割のファーストビュー。

文字が写真に重ならないので、コピーとボタンが確実に読まれる。伝えたい情報が多い医療・士業や、ボタンを最初から見せたいサイトに向く。

左コピー・右写真の分割型（PC）左コピー・右写真の分割型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイト小若歯科医院

写真＋実績バッジ型hero-badge

メイン写真の上や下に、「施工実績〇〇棟」「創業〇〇年」などの数字バッジを並べるファーストビュー。

地方の比較検討では「ちゃんとした会社か」が最初の関門になる。数字は根拠になる実数だけを使い、3つまでに絞ると信頼の材料として効く。

写真＋実績バッジ型（PC）写真＋実績バッジ型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトアーキテックスハウジンググリーン歯科クリニック倉敷 おとなこども歯科・矯正歯科

インフォメーション

診療時間・休業日バー型info-bar

ファーストビュー直下に、診療（営業）時間・休業日・電話番号をまとめた帯を置く。

医院や店舗では「今日あいているか」が来院の最後の決め手になる。トップページの最初の数百pxで答えておくと、電話での問い合わせも減らせる。

診療時間・休業日バー型（PC）診療時間・休業日バー型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトグリーン歯科クリニック倉敷 おとなこども歯科・矯正歯科

コンセプト

写真＋メッセージ型concept-photo-text

写真1枚と、会社（医院）の考え方を伝える短い文章を並べる。

価格や設備では差がつきにくい業種ほど、「誰が・どんな考えで」が決め手になる。代表の言葉を自分の言葉で書くのがいちばん効く。

写真＋メッセージ型（PC）写真＋メッセージ型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトアオイ建設の注文住宅（AOI Home）アーキテックスハウジングふふ歯科木の家イムラ小若歯科医院西宮北口ライフ歯科・矯正歯科・小児歯科

強み・選ばれる理由

番号つき3〜4項目型strength-numbered

「選ばれる理由」を番号つきで3〜4項目並べる。

比較している人に、他社との違いを短時間で渡せる。項目名は「丁寧」「安心」のような抽象語を避け、「完成後20年の定期点検」のように具体的に書く。

番号つき3〜4項目型（PC）番号つき3〜4項目型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトアオイ建設の注文住宅（AOI Home）オーブルホーム（ARBRE HOME）アーキテックスハウジングふふ歯科グリーン歯科クリニック倉敷 おとなこども歯科・矯正歯科つきやま歯科・矯正歯科 いじり本院運船建設

写真とテキストの交互型strength-zigzag

写真と説明文を左右交互に並べ、強みを1つずつ丁寧に見せる。

1項目あたりの情報量が多くても読みやすい。設備・技術・こだわりなど、写真で裏付けできる強みに向く。

写真とテキストの交互型（PC）写真とテキストの交互型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトオーブルホーム（ARBRE HOME）ふふ歯科木の家イムラ小若歯科医院西宮北口ライフ歯科・矯正歯科・小児歯科つきやま歯科・矯正歯科 いじり本院

メニュー・サービス

事例・実績

写真グリッド型works-grid

施工事例・実績を、写真中心のカードで格子状に並べる。

工務店・リフォームでは、事例写真がいちばん見られるコンテンツ。地域名・延床面積・費用帯などの短いラベルを添えると、自分ごととして比べてもらえる。

写真グリッド型（PC）写真グリッド型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトアオイ建設の注文住宅（AOI Home）オーブルホーム（ARBRE HOME）アーキテックスハウジング北欧、暮らしの道具店木の家イムラ西宮北口ライフ歯科・矯正歯科・小児歯科運船建設

記事・メディア

記事カードグリッド型article-grid

サムネイル・カテゴリ・タイトル・日付のカードを格子状に並べる。

新着を並べるだけでも「更新されているメディア」という信頼になる。サムネイルの比率と文字数をそろえると、量が多くても読みやすい。

記事カードグリッド型（PC）記事カードグリッド型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトcolocal（コロカル）サイボウズ式ferretメディア北欧、暮らしの道具店TURNS（ターンズ）

人気記事ランキング型ranking-list

よく読まれている記事を、番号つきの一覧で見せる。

初めて来た人は何から読めばいいか迷う。実際に読まれている記事を示すと、最初の1本を選んでもらいやすく、検索から入った人の回遊も増える。

人気記事ランキング型（PC）人気記事ランキング型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトサイボウズ式ferretメディア

イベント・キャンペーン

見学会・イベント告知型event-banner

完成見学会・相談会・キャンペーンなどを、日付つきのバナーで告知する。

工務店の問い合わせは見学会の予約から始まることが多い。日付・場所・予約ボタンを1か所にまとめ、終わった告知は必ず差し替える。

見学会・イベント告知型（PC）見学会・イベント告知型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトアオイ建設の注文住宅（AOI Home）オーブルホーム（ARBRE HOME）アーキテックスハウジングferretメディアふふ歯科木の家イムラ運船建設

流れ

ステップ型flow-steps

相談から完成（初診から治療完了）までの流れを、番号つきの手順で見せる。

初めての人がいちばん不安なのは「何から始まるのか」。最初の一歩（無料相談・初診）の中身と所要時間まで書くと、問い合わせのハードルが下がる。

ステップ型（PC）ステップ型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトグリーン歯科クリニック倉敷 おとなこども歯科・矯正歯科木の家イムラ小若歯科医院運船建設

料金

表組み型price-table

料金やプランを、表または比較カードで見せる。

料金を出していないと、比較の段階で候補から外されやすい。「〇〇万円〜」でも目安を出し、含まれるもの・含まれないものを書き分ける。

表組み型（PC）表組み型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイト小若歯科医院

人・代表

代表・院長あいさつ型people-message

代表（院長）の写真と、あいさつ文・経歴を並べる。

地域のサービスは「人で選ぶ」業種が多い。顔写真と、資格・経歴などの事実を並べると信頼につながる。

代表・院長あいさつ型（PC）代表・院長あいさつ型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトサイボウズ式グリーン歯科クリニック倉敷 おとなこども歯科・矯正歯科小若歯科医院西宮北口ライフ歯科・矯正歯科・小児歯科つきやま歯科・矯正歯科 いじり本院運船建設

お客様の声

よくある質問

お知らせ

お知らせ一覧型news-list

日付つきのお知らせ・ブログを一覧で並べる。

更新が止まっていると「営業しているのか」と不安を与える。更新できる頻度に合わせて、件数を少なめに出すのが安全。

お知らせ一覧型（PC）お知らせ一覧型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトアオイ建設の注文住宅（AOI Home）オーブルホーム（ARBRE HOME）アーキテックスハウジングサイボウズ式ふふ歯科グリーン歯科クリニック倉敷 おとなこども歯科・矯正歯科木の家イムラ西宮北口ライフ歯科・矯正歯科・小児歯科つきやま歯科・矯正歯科 いじり本院運船建設

アクセス

地図＋時間表型access-map

地図と住所・駐車場・診療（営業）時間表をまとめて見せる。

来店・来院型の業種では、最後に見られるのがアクセス。駐車場の台数、最寄り駅からの時間、時間表をここに集めておく。Googleビジネスプロフィールと表記をそろえる。

地図＋時間表型（PC）地図＋時間表型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトふふ歯科グリーン歯科クリニック倉敷 おとなこども歯科・矯正歯科小若歯科医院西宮北口ライフ歯科・矯正歯科・小児歯科つきやま歯科・矯正歯科 いじり本院

対応エリア一覧型area-list

施工・訪問・送迎などの対応エリアを、市区町村名で一覧にする。

「うちの地域は対応してもらえるのか」という最初の疑問に答えられる。市区町村名がページ内に自然に並ぶので、「〇〇市 工務店」のような地域名検索の土台にもなる。

対応エリア一覧型（PC）対応エリア一覧型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイト木の家イムラ運船建設

行動喚起

メルマガ・LINE登録型cta-newsletter

メールアドレスの入力欄や、LINE登録のボタンを置いて、読者に購読してもらう。

記事を読んだだけの人は、そのままでは戻ってこない。購読してもらうと、新しい記事やセミナー・商品の案内を届けられる見込み客になる。

メルマガ・LINE登録型（PC）メルマガ・LINE登録型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトferretメディア

電話＋Web予約の2ボタン帯型cta-band

ページの区切りに、電話番号とWeb予約（問い合わせ）ボタンを並べた帯を置く。

電話派とWeb派の両方を取りこぼさない。長いページでは2〜3回くり返して置き、読み終えた場所から行動できるようにする。

電話＋Web予約の2ボタン帯型（PC）電話＋Web予約の2ボタン帯型（スマホ）
PC版 SVG ↓スマホ版 SVG ↓使っている参考サイトアオイ建設の注文住宅（AOI Home）オーブルホーム（ARBRE HOME）ふふ歯科グリーン歯科クリニック倉敷 おとなこども歯科・矯正歯科運船建設

SP追従ボタンバー型sp-fixed-cta

スマホで画面下に常に表示する、電話・予約ボタンのバー。

スマホではヘッダーの番号はスクロールで消える。親指の届く位置に電話と予約を固定すると、読んでいる途中でも行動できる。

SP追従ボタンバー型（スマホ）
スマホ版 SVG ↓使っている参考サイトアオイ建設の注文住宅（AOI Home）オーブルホーム（ARBRE HOME）アーキテックスハウジング木の家イムラ小若歯科医院つきやま歯科・矯正歯科 いじり本院運船建設

フッター

FROM REFERENCE TO YOUR SITE

部品を選んだら、
中身は私たちが。

ワイヤーで構成が決まったら、文章・写真・SEOまで含めた制作はWEBCANにご相談ください。無料診断で、御社に合う構成案をお持ちします。

無料診断に申し込む