・HP（Webサイト）で成果を上げるための基本設計が学べる
・Web設計の基本や「型A」の理解を深められる
・自部署やOEM先で使う“テンプレート”や“型”の考え方を身につけられる
・コンテンツを配置する意図や流れ、なぜそこにあるのかという理由づけがわかる
・顧客が求めるゴールをくみ取り、ゴールに導くための道筋を学べる
・「見るレベル」「読むレベル」の使い分け、心理的動線の考え方が学べる
・「勝てるサイト」とは何か、そのために必要なコンテンツとは何かがわかる
・設計段階でのストーリー構築や配置の優先順位、理由づけを実務に落とし込める
・他社比較や実案件との比較により、文章作成・デザイン・構築といった総合的な力を見直せる
・Web学校で学んだことの一つの「答え」が見える
・「型A」の基礎から応用までをしっかり学び、業務に直結する方法を習得できる

・テキスト量の規定
・コンテンツ訴求ポイント
・生産管理No.（プロジェクトなどを管理する番号）
・コンテンツ領域
・パーツID
・代替パーツや代用コンテンツ
・差し込んでも良いコンテンツ
・BODYタグ全体のテキスト総量（ページ全体の文字数管理）

⇒ これらを活用することで「何ページに」「何文字の文章を」「どんな画像を何枚使うか」などのデータがとれる。
「型A」は、Webサイトを設計する際に「何をどこに配置するか」という基本型を示す枠組みといえる。

（1）ロゴは左上に置く
理由: 「あるべきところにあるべきもの」を配置し、ユーザーを迷わせないため
・ 視線の始点であり、多くのWebサイトが左上にロゴを配置することが“通例”となっている
・ ロゴを見たい人の心理は「なんという会社か知りたい」という思いから
・ ※ただし「トレンドが変わったらそれに合わせる」柔軟性も必要

（2）電話番号やCVボタン（問い合わせボタン）の左上配置
理由: 上記ロゴと同じく「絶対に見つけやすい場所」に置くため
・ ここでも「トレンドが変わったら合わせる」柔軟性が大事

（3）MV（メインビジュアル）
・ コンテンツとしてのインパクトが大きいため、領域をしっかり取る
・ 大きなキャッチコピーやビジュアルでサイトの第一印象を決める

（4）Gnav（グローバルナビゲーション）の並び順
・ HeaderとMVの間に配置している例が多い
・ 「目立たせたいものから並べる」というわけではなく、サイト全体のストーリーや閲覧者の導線を考慮する
・ 採用情報などは、閲覧者が自主的に探すものなので目立たせなくてもよい場合が多い

（5）事業紹介一覧（例: サービス一覧、メニュー一覧）
「フロアマップ」のような位置づけでMV直下に配置
・ デパートで例えると、迷わせないためにフロアマップを最初に示すのと同じ
・ ここでは細かい訴求よりも「何があるか」を簡潔に知らせることが目的
・ 画像と短いテキストのみで、閲覧者に瞬時に理解させる「見るレベル」のコンテンツ
・ 取り扱い商品一覧、店舗・サービス拠点一覧などが代替パーツになる場合もある
注意: もし店舗やサービス拠点一覧をここで見せる場合、MV（メインビジュアル）で「何をやっている会社か」をしっかり伝えないと混乱を招きやすい

（6）USPコンテンツ
USP（Unique Selling Proposition）: 独自の強み、他社との差別化ポイント
・ 事業紹介で「どんなことをしているか」がわかった上で、興味喚起を狙うコンテンツ
・ ガーディアンで言えば「OWLet」という独自CMSやビッグデータ、青山・久保などの人材力などが該当
・ イントロダクション段階のため、ここでCV（コンバージョン）に直結はしないが、閲覧者の興味を深める役割を果たす
代替コンテンツ: 選ばれる理由、実績紹介（非常に強烈ならば）、Before/After、マルチチャネル紹介など

（7）こんなお悩みありませんか？ コンテンツ
・ USPを提示し終わった後で、はじめてユーザーに投げかける（問いかける）コンテンツ
・ 文字だけだと冷たい印象になるため、画像を使ってやさしく興味を引く
代替コンテンツ:
・ 求めることランキング
・ 問題点から解決策への案内図
・ データ引用（統計やアンケート結果など）

（8）ベネフィットの訴求
メリット: 商品・サービス自体の良いところ
ベネフィット: その先にある「顧客が本当に得たい成果・価値」
・ 「ドリルを買うのは穴を開けたいから」「化粧品を買うのは美しさを得たいから」と同じ考え
・ ベネフィットを並べる数が多い設計にするのは、あらゆるニーズを持った閲覧者を逃さず「決意」させるため
代替コンテンツ: 欲求が叶うコンテンツ、手順・流れ、データ証明など

（9）権威付けコンテンツ
・ 他社比較、Before/After、受賞実績、お客様の喜ぶ顔ギャラリーなど
・ ここで「やっぱり他より良さそうだ」と思ってもらい、購買・問い合わせ意欲を高める

（10）お客様の声
・ 大事なのは「タグ」や「カテゴライズ」機能
・ 人は自分と近い属性の事例を見て安心する（属性依存）

代替コンテンツ: 名伏せ事例、ケーススタディ、お困りごと別お客様の声など

（11）FAQ（よくある質問）
・ 最終的な不安や疑問を取りこぼしなく解消するコンテンツ

（12）CVボタン、新着情報、About Usなど
・ CVボタン（問い合わせや購入ボタンなど）は最後まで見てもらった段階で再度促す配置が有効
・ About Usや会社概要ページはSEO的にも重要
・ 新着情報（お知らせ）はタイムリーな情報発信として機能

・コンビニ型、スーパー型、デパート型で考えると、デパート型は回遊ルートが固定されていないため設計が複雑・

・しかし「型A」を基軸にすれば、どこから流入してもストーリーが通るサイトを作りやすくなる

実サイト例（介護セミナー・講師サイト）

・ロゴは左上にしっかり配置
・ MVは複数枚のスライダーなどを用い、大きくスペースを取りインパクトを出す
・ その直下にサービス一覧・セミナー開催情報（→「USPの位置づけ」に近い形）
・ 代表メッセージやYouTube紹介などで人柄を訴求（「自己紹介＋強み」）
・ 「こんなお悩みありませんか？」でターゲットユーザーに問いかけ
・ 「ベネフィットの訴求」で利用者が得られる恩恵を列挙
・ 「お客様の声」「よくある質問」などで後押し・疑問解消
・ 全体を通じて「見るレベル」→「読むレベル」へ誘導し、ストーリーが一貫している

このように「型A」の考え方を基軸としながら、代替コンテンツを必要に応じて差し替えても、購買心理サイクル（興味喚起→比較検討→決意→後押し→不安解消→CV）を整合的に作っていけるのがポイント。

1. 「あるべきところにあるべきものがあるべき」
・ ロゴや電話番号、問い合わせボタンなど、ユーザーが「ここにあるはず」と思う場所に配置し、迷わせない。
・ トレンドや閲覧者の利用デバイスが変われば柔軟に対応。

2. 事業紹介やUSPで興味喚起を行い、ユーザーへの問いかけで共感を呼ぶ
・「こんなお悩みありませんか？」などでユーザーに初めて投げかける。
・代替として問題点→解決策の流れ、ランキング、データ引用などを組み合わせる。

3. ベネフィットや権威付けで購買意欲（決意）を高める
・ 多数のベネフィットを並べ、あらゆるニーズを逃さない。
・ 権威付け（実績、受賞歴、比較コンテンツなど）で「他社よりも優れている」と印象づける。

4. お客様の声・FAQで最後の背中押しと不安解消
・ 声や事例、Q&Aで「自分に合っているかも」「疑問点がクリアになった」と思わせる。
・ タグやカテゴライズを使い、属性に近い事例を見せると効果大。

5. 型Aを基軸にしながらも代替パーツは柔軟に
・必ずしも全てのサイトが同じ構成になるわけではない。
・ 「デパート型」「スーパー型」「コンビニ型」など、サイトやビジネスモデルに応じて柔軟に差し替える。

6. 購買心理サイクルを意識する
・興味喚起 → 比較検討 → 決意 → 不安解消 → 購入・問い合わせ
・どこから見てもストーリーが通るように設計するのが「型A」の強み。