紙、ガラス、石、金属と赤い糸を組み合わせた抽象的な編集ビジュアル

SAMPLE TEMPLATE / NON-CLIENT DEMO

あなたの仕事を、
選ぶ理由に。

確認できた事実だけを、価値・証拠・判断材料へ編集する。業種名の差し替えでは終わらない、量産のためのHP設計です。

STRUCTURE
22 MODULES
BODY TYPE
16PX+
PRIMARY GOAL
ONE CTA

DESIGN PRINCIPLE

装飾ではなく、
判断を設計する。

高く見えるHPは、情報が多いHPではありません。読み手が迷わず、比較でき、納得して動けるよう、必要な情報を必要な順序で置くHPです。

DEFINE PROVE DECIDE

DECISION ARCHITECTURE

8章ではなく、
8つの判断。

並び順は情報カテゴリではなく、初めて知った人が相談するまでの気持ちの変化から決めます。

  1. 01
    定義

    誰の、何のサイトかを5秒で伝える。

  2. 02
    即答

    場所・料金・時間など、最初の疑問へ答える。

  3. 03
    価値

    機能ではなく、選んだ後の変化を示す。

  4. 04
    証拠

    工程・人物・実績など、確認できる根拠を置く。

  5. 05
    比較

    プランや条件を、同じ物差しで見せる。

  6. 06
    体験

    利用前後の流れを、具体的に想像できる形へ。

  7. 07
    解消

    FAQと注意事項で、行動前の不安を減らす。

  8. 08
    行動

    判断材料が揃った場所で、CTAを一つに絞る。

固定するのは、
見た目ではなく品質。

CODEX UNIVERSAL / PRINCIPLE 03

CONTROLLED VARIATION

同じ骨格でも、
同じ顔にしない。

案件ごとの事実から、強弱・写真比率・情報密度・署名モチーフを変えます。色替えだけの量産にはしません。

LOCK / 固定

  • 本文の可読性
  • CTAの実接続
  • 事実の出典
  • レスポンシブ品質

FIT / 可変

  • 構成の強弱
  • 写真の役割
  • タイポグラフィ
  • 署名の一手

01 / SOURCE確認済みの事実

02 / EDIT選ぶ理由へ編集

03 / SHIP品質ゲートを通過

VISUAL SLOT / 01実案件では、確認済みの写真・商品・工程がこの構造の主役になります。

ALL BUSINESS MODULES

必要な判断材料を、
選んで組む。

全22役割の一覧です。業種ではなく、確認できる事実があるモジュールだけを完成ページへ組み込みます。

VOICE / THIRD-PARTY PROOF

選んだ人の言葉を、
判断材料に。

掲載許可・出典・投稿日を確認できる声だけを載せる枠です。声がない案件では、無理に作らずセクションごと外します。

VOICE 01

実際の言葉を短く引用し、利用内容と時期を添えます。

掲載内容の確認後に差し替え
VOICE 02

何が決め手だったのか分かる一節を優先します。

創作レビューは使用しない

ABOUT / OVERVIEW

誰が、何を、
どのように。

事業紹介用写真の配置を示す抽象的な生成イメージ
実案件では、場所・仕事・人柄が分かる写真へ差し替えます。

会社や店の説明を、沿革の羅列ではなく、初めて知る人が安心できる順に編集します。

所在地、対応範囲、仕事の進め方など、依頼前に必要な事実をここへまとめます。

OFFER / PRICE

頼めることと、
料金の目安。

商品、サービス、プランを同じ物差しで比較する枠です。料金を公開しない案件では、相談条件や対応範囲へ置き換えます。

01

主力の商品・サービス

対象、含まれる内容、納期・所要時間を記載。

確認済み料金
02

追加・関連メニュー

違いが一目で分かる比較軸だけを残します。

確認済み料金

SIGNATURE OFFER

主力商品またはサービスの写真枠を示す抽象的な生成イメージ

一番選ばれてほしいものを、
深く伝える。

素材、工程、対応範囲、選び方。主力の価値を支える確認済みの事実を、写真と文章で詳しく説明します。

  • 01

    選べる内容違いと選び方

  • 02

    つくり方工程と品質

  • 03

    利用条件対象と注意点

CUSTOMER FLOW

相談してから、
受け取るまで。

  1. 01

    問い合わせ

    必要な連絡内容と受付方法。

  2. 02

    確認・提案

    日程、内容、見積もりの確認。

  3. 03

    提供・実施

    当日の流れと所要時間。

  4. 04

    支払い・完了

    支払い方法と受け取り後の案内。

PLACE / FACILITY

場所と設備を、
来る前に。

店舗、施設、事務所、対応環境など、現地で迷いやすい点を写真と短い説明で確認できる枠です。

場所や設備の主写真枠を示す抽象的な生成イメージ
全体が分かる写真
設備の詳細写真枠を示す抽象的な生成イメージ
入口・設備・利用環境

COMMITMENT / PROOF

選ばれる理由を支える、
三つの事実。

  1. 01

    素材・基準

    何を選び、どんな基準で判断しているか。

  2. 02

    工程・手間

    見えにくい工程を、具体的な事実で伝える。

  3. 03

    対応・姿勢

    依頼者と向き合うときに守っていること。

PERSON / OWNER

「何を大切にして、
この仕事をしているか。」

代表者写真の配置を示す抽象的な生成イメージ
実案件では掲載許可済みの人物写真へ差し替え

PERSON / TRUST

顔が見える安心

氏名、経歴、資格、仕事を始めた理由など、依頼前の安心につながる情報を掲載します。

SEASON / USE CASE

時期や目的で、
変わること。

季節、時間帯、利用目的などによって提供内容が変わる場合だけ使用します。

SPRINGSUMMERAUTUMNWINTER

WHO / FIT

こんな方に。

  • 初めて依頼する方
  • 比較して決めたい方
  • 条件を先に確認したい方

BEFORE YOU DECIDE

依頼する前に、
確認すること。

料金
確認済みの料金・追加費用
予約・申込
締切、変更、キャンセル条件
所要・納期
目安と変動条件
支払い
利用可能な支払い方法
用意するもの
持ち物・事前準備・利用条件

ACCESS / INFORMATION

場所・時間・連絡先。

MAP / VERIFIED LOCATION

実案件では確認済みの地図を表示

住所
確認済みの所在地
営業時間
確認済みの受付時間
定休日
確認済みの休業日
電話
公開許可済みの番号
駐車・交通
確認済みの案内
予約または問い合わせ導線の背景を示す抽象的な生成イメージ

RESERVATION / CONTACT

判断材料が揃ったら、
一つの行動へ。

実案件では、予約・電話・フォームなど最も重要な一つの窓口へ接続します。

相談内容をメールで送る

SHIP GATE

見た目の前に、
落とさない品質。

100%

HARD GATE PASS営業プレビューへ出す最低条件
TYPE
16px+モバイル本文
CONTRAST
4.5:1主要本文
WIDTH
360–430横崩れなし
TRUTH
0未確認の主張

このデモは架空ブランドのテンプレートです。実績・所在地・価格・口コミは掲載していません。

BUILD FLOW

LLMの自由度を、
役割で制御する。

  1. 01

    事実を閉じる

    公開できる内容、禁止事項、CTA、使える素材を先に確定。

  2. 02

    判断の順序を選ぶ

    読み手とゴールから、必要なモジュールだけを構成。

  3. 03

    固有の署名をつくる

    店名・工程・場所など、実在する特徴をページ文法へ。

  4. 04

    機械と目で検証

    可読性、事実、導線、実画面を確認し、合格したものだけ提示。

QUESTIONS

よくある質問

01どの業種でも使えますか?

骨格は汎用ですが、規制業種やB2Bなど意思決定が異なる案件では、情報構造と表現ゲートを調整します。

02写真が少なくても作れますか?

可能です。写真を水増しせず、文字・工程・数値・図解が主役になる構成へ切り替えます。

03毎回同じデザインになりませんか?

品質ゲートは共通化し、写真比率、密度、タイポグラフィ、署名モチーフは案件の事実から変えます。

04この文章や画像はそのまま公開できますか?

できません。このページは構造と品質を確認するデモです。実案件では、確認済みの事実と許諾済み素材へ置き換えます。

START WITH FACTS

まず、選ばれる理由を
一緒に見つける。

掲載内容を確認したうえで、予約・電話・フォームなど最も大切な一つの窓口へ接続します。

HP制作について相談する

CODEX UNIVERSAL WEBSITE TEMPLATE / 01

これは架空ブランドを用いた構造デモです。画像は生成したイメージで、実在する店舗・商品・人物を示しません。

© 2026 PECOLI INC. / INTERNAL TEMPLATE PREVIEW

通常の完成見本へ戻る