その事業に、 伝わる見せ方を。

B面メモ 01：ヒーローの書き込み

1. 1企画・設計の意図

   サイト全体の企画：A面は完成品、B面はその裏側

   このサイトでいちばん伝えたいのは、GANCHAN 11号の企画力です。そこで、このサイトそのものを実績として見せることにしました。A面は、完成したサービスのサイトです。B面（いまご覧のページ）は、同じトップページの実物に、企画の意図・AIが作ったもの・GANCHAN 11号の判断を、色ペンで書き込んだものです。完成した見せ方と、それを選んだ理由を、同じ実物の上で確かめられます。紹介記事や画面の写真に置き換えず、A面と同じ部品を使っているので、A面を直すとB面の実物も変わります。ご依頼を考えている方には判断の理由を、作り方を知りたい方には制作の方法を読んでいただけるようにしています。A面とB面の切り替えそのものも、企画の一つの例です。

2. 2企画・設計の意図

   このサイトの色と文字

   このサイトの配色は、採用したロゴから取り出しました。実装の前に作った「構成案」（載せる内容・セクションの並び・配色・説明文の候補などをまとめた、サイトの設計図）では「落ち着いた黄」も使う予定でしたが、ロゴに無い色なので外し、2つ目の色はロゴの下の帯にある赤にしました。英字・番号・計器のような表示には、Oxanium という書体を使っています。下に、使っている色と書体の見本を並べました。

   • ページの地
   • カード・画面
   • 本文
   • 機械の枠
   • ブランド主色
   • 赤ペン・帯
   • 設計パネル
   • 補足文

   Noto Sans JP伝わる見せ方を。

   OxaniumTARGET 01 → 32px

3. 3企画・設計の意図

   骨組みの段階から読める

   ページを開いた時の演出は、線だけで描いた「骨組み」の状態から始まります。その段階でも、見出し・説明・相談ボタンは読めるようにしました。骨組みの間は文字の色をグレーにするだけで、大きさや位置は変えていません。演出の途中で文字が動いて、読みにくくならないようにするためです。

4. 4企画・設計の意図

   ボタンの形は、ロゴの形から

   ボタンの形は、ロゴの形をモチーフにしました。ロゴと同じように角を斜めに落とし、濃い紺の外枠で囲んで、右下にロゴと同じシアン（青緑）の小さな部品を付けています。ボタンは2つだけにしました。いちばん押してほしい「サイト制作を相談する」は、ブランドの色のえんじで塗りました。「このサイトのB面を見る」は明るい面の控えめな見た目にして、相談のボタンより目立たないようにしています。マウスを乗せると色が変わり、矢印が少し右へ動きます。同じ形のボタンを、サイト全体で使っています。

5. 5企画・設計の意図

   ロゴのマークから、最初の画面を考えた

   ロゴのマークには、線だけで描いたサイトの設計図（ワイヤーフレーム）と、赤ペンが入っています。これをコンセプトにして、設計図に赤ペンで直しを入れながら完成品にしていく流れを、ページを開いた時の演出と、このB面の書き込みに使いました。

6. 6AIが作成

   コードと、装飾の絵はAIが作成

   サイトを作るためのコードはAIが書きました。ページを組み立てるプログラム（PHP）、見た目の指定（SCSS）、動きを付けるプログラム（JavaScript）です。設計モニター・装甲・ボルト・赤ペン・ワイヤーフレームの絵も、拡大してもぼやけない図（SVG）としてAIが描きました。ブラウザのタブに出る小さなアイコン（ファビコン）も、ロゴから切り出しています。

7. 7GANCHAN 11号が用意

   イラストは、人が用意

   画面の中のイラストは、GANCHAN 11号が用意したものです。周囲の余白を詰めて1140×855pxに切り抜き、軽い画像形式（webp）と、それが使えない環境向けの jpg の2つで書き出しました。絵の背景の色も、画面の枠に合わせています。

8. 8企画・設計の意図

   赤ペンは、ペン先で動かす

   ページを開いた時の演出では、赤ペンが文字に線を引いたり、丸を付けたりします。ペンを傾ける時の回転の中心を、ペンの真ん中ではなくペン先に置きました。動かす時はペン先の位置だけを計算します。傾けても、書いている位置からペン先がずれません。

9. 9GANCHAN 11号の判断

   演出は、全部見せる

   スマホ・タブレットでは絵が画面の下にはみ出し、下で起きる動きが見えませんでした。AIは「スマホでは一部の演出を出さない」案を出しましたが、GANCHAN 11号の判断は「作り込んだものを見せるのがコンセプト。アニメーションは全部見せたい」。そこで、動く場所まで自動でスクロールし、完成したら一番上に戻るようにしました。

10. 10企画・設計の意図

    制作の工程を、そのまま見せる

    ページを開いた時の演出は、実際の制作の順番どおりです。骨組み → 文章（コピー）の推敲 → 色や飾りの追加 → 手での微調整 → 完成。ページの中身（HTML）は完成形の1つだけで、そこに途中の状態の見た目を重ね、段階ごとに外していく作りです。動きを付けるプログラム（JavaScript）が動かない時、端末で動きを減らす設定にしている時、2回目以降の表示では、最初から完成形が出ます。「制作工程を再生」で、もう一度見られます。

11. 11GANCHAN 11号の指摘

    気づき

    演出の全体が約8秒で長い。スマホでは、演出中の絵が画面の外で、進み具合が見えない

    修正

    段階ごとの秒数を詰めて約6.5秒に。スマホでは演出の間だけ、この工程表示を画面の下に固定した

B面メモ 02：企画の価値の書き込み

1. 1企画・設計の意図

   相談 → 整理 → 体験の順に

   「こんなご相談から始まります」（相談メモ3枚）→「企画で、この4つを整理します」→ 企画の比較例、の順に並べました。よくある相談から入り、企画で何を整理するかを見せてから、実際に変わる様子を試してもらいます。

2. 2GANCHAN 11号の指摘

   気づき

   4つのチェックが全部同じずれ方で、手で書いた感じがしない

   修正

   チェックごとに、線の形・位置・角度・大きさを変えた

3. 3GANCHAN 11号の指摘

   気づき

   チェックが描かれる前から、枠の中に赤い点が残っている（チェックの線は端を丸くしているため、描き始める前の長さ0の状態でも、端の丸い点だけが見えていた）

   修正

   描き始める瞬間まで、線を透明にした。同じ原因があった赤ペンの丸と、最初の画面の赤い矢印も、あわせて直した

4. 4企画・設計の意図

   例は、架空の工務店

   比較例は「ひだまり工務店（架空）」です。架空であることを、見出しのすぐ下と見本の中の両方に書きました。実績の数値や、お客様の成果は載せていません。

5. 5企画・設計の意図

   材料は同じ。変わるのは、選び方と順番

   写真3点・強み2点・情報5点の「共通の材料」を上に固定しました。どの相手を選んでも材料は同じで、選び方と順番だけが変わることが分かるように。いま主役になっている材料には、赤ペンの枠が付きます。

6. 6企画・設計の意図

   「相手を決めない」を選べる

   実装の前に作った構成案（サイトの設計図）では、相手は2つ（初めて家を建てる人／細部までこだわる人）でした。そこに「相手を決めない（企画する前）」を加えて3択にしました。企画しない場合との差で、企画の価値を体験してもらうためです。

7. 7AIが作成

   切り替えは、プログラムが動かなくても使える

   相手の切り替えは、選択ボタン（ラジオボタン）と見た目の指定（CSS）だけで作りました。動きを付けるプログラム（JavaScript）が動かない環境でも操作できます。端末で動きを減らす設定にしている時は、自動の切り替えや動きを止めます。スマホでは、この切り替えボタンを画面の上に貼り付け、見本を見ながら切り替えられるようにしました。

8. 8企画・設計の意図

   最初は「企画する前」から

   最初に見えた時は「相手を決めない」状態で始まり、少し待つと「初めて家を建てる人」に自動で切り替わって、赤ペンが入ります。情報の並べ替えも、実際に動いて見えます。

9. 9GANCHAN 11号が用意

   写真は、人が用意

   外観・打ち合わせ・木組みの写真3点は、GANCHAN 11号が用意したものです。画面に表示する大きさの2倍ほど（660×440px）に縮め、軽い画像形式（webp）と、それが使えない環境向けの jpg の2つで書き出しました。

10. 10企画・設計の意図

    見本の番号と、変わった所が対応

    見本の画面に赤ペンで①〜④を書き込み、下の「変化した要素」（コピー・写真・情報の順番・ボタン）と対応させました。企画する前は、番号が「？」になります。

B面メモ 03：ハイブリッド制作の書き込み

1. 1GANCHAN 11号の指摘・判断

   見出しは、4案から選んだ

   下の工程表をGANCHAN 11号の指摘で直した後、最初の見出し「AIで速く。判断と仕上げは、人の手で。」が、AIと一緒に考えて作る実際のやり方とずれました（GANCHAN 11号の指摘）。AIが4案を出し、GANCHAN 11号が「AIは、頼れる相棒。ハンドルは、最後まで人が握る。」を選びました。

2. 2企画・設計の意図

   説明文は、構成案から

   このサイトは、いきなり作り始めず、先に「構成案」を作ってから実装（実際のページ作り）に移っています。構成案は、載せる内容・セクションの並び・説明文の候補などをまとめた、サイトの設計図です。この説明文は、構成案の中で「採用候補」としていた文を、そのまま使っています。工程表の短い説明と担当の言葉（「磨いて決める」など）は、AIが書いた文をもとにしています。

3. 3企画・設計の意図

   制作の工程表で見せる

   5つの工程 × 担当（GANCHAN 11号／AI）の表です（GANCHAN 11号と方向性を合意）。GANCHAN 11号の線は最初から最後まで1本でつながり、AIは使う工程にだけ入ります。「一貫して担当する」「AIは効率化に使う」を、表の形そのもので伝えるためです。

4. 4AIが作成

   1つの表で、縦と横を入れ替える

   パソコンでは工程を横に、スマホ・タブレットでは縦に並べ、担当は縦書きの2列にしました。ページの中身（HTML）は1つのままで、見た目の指定（CSS）の「subgrid」という機能を使い、画面の幅に合わせて行と列を入れ替えています。スマホ用に別の表を作らないので、内容を直す時も1か所で済みます。

5. 5GANCHAN 11号の指摘

   気づき

   工程01（企画）が「GANCHAN 11号だけの判断」になっている。実際は、AIが出した案に、より良くする案や変更の案を返す「一緒にブレインストーミングしている感覚」

   修正

   工程01にもAIの担当（案を出す）を加え、GANCHAN 11号側は「磨いて決める」に。2つの担当の間に、案をやり取りする矢印を置いた（パソコンは「ブレスト中」の札付き）

6. 6GANCHAN 11号の指摘

   気づき

   工程03ではコードだけでなく、実装された画面のデザインも確かめている。工程04のコード修正も、デザインを調整するために行うことが多い

   修正

   工程03を「コードとデザインの確認」（担当：コードと画面を見る）に、工程04を「デザインの調整と手動の修正」に変え、説明文もデザイン中心に書き直した

7. 7企画・設計の意図

   赤ペンで線を引き、最後に「校了」

   スクロールに合わせて赤ペンが担当の線を引き、工程ごとに「確認済」のチェック、最後に「校了」の印を押します。「校了」は、印刷物で最終確認が済んだことを表す言葉です。この印は、ページの一番下（フッター）の校了スタンプと対応しています。上に戻ると線も戻ります。動きを付けるプログラム（JavaScript）が動かない時や、端末で動きを減らす設定にしている時は、線を引き終えた状態で出ます。

B面メモ 04：実績・このサイトの解説の書き込み

1. 1GANCHAN 11号の指摘・案

   気づき

   最初の見出し「説明より、このサイトが実物です。」が分かりにくい

   修正

   GANCHAN 11号の案「説明するより、このサイトを見てください。」に変えた。説明文も「このサイトも、…制作実例のひとつです。」に合わせた

2. 2GANCHAN 11号の指摘

   気づき

   スマホで見出しが3行になり、右の余白が空きすぎて収まりが悪い

   修正

   スマホでは「説明するより、／このサイトを見てください。」の2行に固定。2行目が折り返さないよう、画面の幅に合わせて文字を少し小さくした（画面の幅が360px以上なら2行に収まる）

3. 3企画・設計の意図

   実績の主役は、このサイト

   実績として一番に見せるのは、いま見ているこのサイトです。見せ方は「完成したサイトから、企画の裏側が現れる」（GANCHAN 11号と方向性を合意）。完成した表側を「A面」、その裏にある企画の判断や制作の記録を「B面」と呼び、このセクションをB面への入口にしました。

4. 4企画・設計の意図

   表紙をめくると、裏に設計図

   このサイトの最初の画面を「表紙（A面）」にしました。めくると、上の辺を軸に表紙が開き、下から線で描いた設計図（B面）と、赤ペンの書き込み（1〜3）が現れます。

5. 5GANCHAN 11号の指摘

   気づき

   最初から開いている、または自動でめくれるより、閉じた状態から自分でめくる方がよい

   修正

   自動でめくる動きをやめ、最初は閉じた状態にした。閉じている間は「めくってみてください」の付箋が揺れる

6. 6GANCHAN 11号の指摘

   気づき

   ページを読み込むと、表紙が一瞬開いてから閉じる。動きを付けるプログラム（JavaScript）が動かない時のために、開いた状態を最初の表示にし、読み込んだ後に閉じていたため

   修正

   ページを描き始める前に印を付け、最初から閉じた状態で描くようにした。プログラムが読み込めなかった時は、開いた状態に戻す

7. 7GANCHAN 11号の指摘

   気づき

   開いた表紙が手前に大きく倒れ、遠近感が強すぎて見出しに重なる

   修正

   遠近感を弱め、開く角度を浅くした。閉じている間は、表紙が倒れてくる場所を点線の枠で先に見せている

8. 8GANCHAN 11号の指摘・判断

   空いた場所に、赤ペンで書き込む

   縦に並ぶ画面で、閉じている時に見出しと表紙の間が大きく空いていました（GANCHAN 11号の指摘）。めくれた表紙が入る場所を、先に空けておくためです。AIが3案（余白に書き込む／開いた時だけ余白を広げる／左へめくる）を出し、GANCHAN 11号が「余白に書き込む」を選びました。開くと、めくれた表紙がこの書き込みの上に重なります。

9. 9GANCHAN 11号の提案

   表紙の裏に、表の画面が透ける

   めくった表紙の裏は、最初は罫線だけの紙でした。「罫線だけでは寂しい。表の画面をうっすら入れたい」というGANCHAN 11号の提案で、紙の裏から透けて見えるように、上下を反転して薄く入れました。

10. 10GANCHAN 11号の指摘

    気づき

    書き込みの一覧が最初から出ていると、表紙との関係が分かりにくい。開いた時に、枠付きで出す方がよい

    修正

    「MEMO」の札と留めテープ付きの枠に入れ、表紙を開いた時に下へ伸びて出てくるようにした

11. 11GANCHAN 11号の指摘

    気づき

    メモの場所を最初から空けておくと、スマホで閉じている時に大きな空き枠が残る。閉じ直した時も、枠の余白の分（60px）が残る

    修正

    閉じている時の空き枠は細い1行にし、メモの枠は開いた時に高さを伸ばして出す。閉じる時は高さ0まで縮むようにした

12. 12AIが作成

    表紙の写真と、文章の下書き

    表紙の画像は、このサイトの最初の画面が完成した状態を、AIが1280×800pxで撮影して800×500pxに縮めたものです（最初の画面を変えたら撮り直す）。説明文・設計図の書き込み3つ・企画の目的の文は、AIが下書きしました。プログラムが動かない時は表紙を開いた状態で出し、端末で動きを減らす設定にしている時は、動きなしで開け閉めします。

13. 13GANCHAN 11号に確認

    参考価格は「同じ仕様で依頼した場合」

    このサイトを、同じ仕様で依頼した場合の価格（30万円・税別）を、GANCHAN 11号に確認して載せました。料金ページの「オリジナル企画制作」からも、この実績へ戻れるようにしています。

14. 14GANCHAN 11号の判断

    「仕組み実装室」も、同じ方法で作った

    「仕組み実装室」も、このサイトと同様の方法で作ったため、実績例として掲載しました。

B面メモ 05：制作プランの書き込み

1. 1GANCHAN 11号の指摘

   気づき

   説明文が行の途中で折り返し、文の区切りと行の区切りがずれて読みにくい

   修正

   パソコン・タブレットでは「1ページだけのサイトも対象です。」の後で改行し、文の区切りで2行に収めた

2. 2GANCHAN 11号の判断

   細かい条件は、料金のページへ

   制作サポートの期間や回数の目安、「20万円〜」のように規模で金額が変わる理由は、別の「料金・対応範囲」のページにまとめました。トップのこの場所では、説明文の「料金は、ページ数だけでなく…から見積もります」と、金額に付けた「〜」で伝えるだけにしています。

3. 3企画・設計の意図

   状況を選ぶと、合うプランに赤ペンで丸

   「いまの状況に近いものは？」から1つ選ぶと、合うプランのカードに赤ペンで丸が描かれ、「おすすめ」の札が付きます。ほかのカードは少し色が落ちます。最初は何も選ばれていません。料金表を読ませる前に、「自分はどれか」を先に見つけてもらうための仕掛けです。

4. 4AIが作成

   動きのプログラムを使わずに切り替える

   この切り替えは、動きを付けるプログラム（JavaScript）を使わず、1つだけ選べるボタン（ラジオボタン）と、見た目の指定（CSS）だけで作りました。プログラムが動かない環境でも、同じように使えます。

5. 5GANCHAN 11号の指摘

   気づき

   スマホで選択肢が3列に並び、1つの文が3〜4行に折り返して読みにくい

   修正

   スマホでは選択肢を縦に並べ、選んだ印の丸を付けた

6. 6企画・設計の意図

   「企画込み」のはんこ

   制作をおまかせいただく2つのプランには、「企画込み」のはんこを押しました。マウスを乗せると、はんこを押し直す動きをします。すべての制作プランに企画が含まれる、というこのサイトの一番の特徴を、はんこで念押ししています。

7. 7GANCHAN 11号の指摘・判断

   気づき

   ライトとオリジナルの違いは、企画をどこから始めるかで、作業の中身はほぼ同じ。オリジナルにだけ「コピー」「独自のビジュアル・演出」を並べると、ライトには含まれないと誤解される

   修正

   AIが「企画の出発点」で違いを見せる案を出し、GANCHAN 11号が了承。各カードに「企画の出発点：いただいた内容から／何を打ち出すかから」の行を加えた。同じ作業を「整える」か「一から作る」かの深さで分けた

8. 8AIが作成

   説明文の下書きは、AI

   このセクションの説明文、各プランの説明と「こんな方に」、保守の案内の文は、AIが下書きしました。

9. 9GANCHAN 11号の指摘

   気づき

   「ライト制作の内容」の右端に付けた「＋」が、押すと開いたり閉じたりする項目に見える

   修正

   右端の「＋」をやめ、先頭に「＋ ライト制作の内容に加えて」と小さく書く形にした。下の3つの作業が加わる、という意味が文で読める

10. 10企画・設計の意図

    このサイトの値段を、例として出す

    オリジナル企画制作には「このサイトも同じ仕様で30万円（税別）」と書き、04 実績へ戻るリンクにしました。値段の例が、いま見ているこのサイトそのもの、という作りです。

11. 11企画・設計の意図

    自分で作る方向けは、点線の別枠

    制作サポートは、ご自身や社内でサイトを作る方への伴走です。制作をおまかせいただく2つのプランとは性格が違うため、点線で囲んだ横長の別枠にして、違いが形で分かるようにしました。

12. 12GANCHAN 11号の判断

    公開後の保守は、案内だけ

    構成案（実装の前に作ったサイトの設計図）では、「料金」と「公開後の保守（サイトの管理）」は別々のセクションでした。料金を詳しく説明するページを別に作ったため、トップでは保守を小さな案内枠だけにし、そのページの保守プランへつなぎました。あわせて、後ろのセクションの番号を1つずつ繰り上げています。

13. 13GANCHAN 11号に確認

    保守の「月額5,000円〜」をトップにも出す

    保守の料金をトップにも出すか、GANCHAN 11号に確認し、表示することにしました。制作の料金だけでなく、公開後にかかる費用の目安も先に分かるようにしています。案内枠のスパナの絵は、マウスを乗せるとボルトを締める動きをします。

B面メモ 06：ご依頼の流れの書き込み

1. 1企画・設計の意図

   依頼する前に、進め方の見通しを

   このセクションの役割は、構成案（実装の前に作ったサイトの設計図）どおり、依頼する前に進め方の見通しを持ってもらうことです。5つの段階それぞれに、こちらが「確認すること」と、お客様に「お願いすること」を並べました。制作期間は「最短○日」のように一律で掲げず、範囲と確認の日程に合わせて案内する、と書いています。

2. 2AIが作成

   車の絵と、文章の下書きはAI

   走る車の絵（SVG：拡大してもぼやけない図）と、説明文・各段階の文・ボタンの文は、AIが作りました。動きを付けるプログラム（JavaScript）が動かない時や、端末で動きを減らす設定にしている時は、車を出さず、最後の駅まで通り終えた状態で表示します。

3. 3GANCHAN 11号の判断

   路線図を、車が走る

   流れの見せ方を、AIが3つ提案しました（路線図を車が走る／付箋をめくる進行ボード／手帳のスケジュール）。GANCHAN 11号が「路線図を車が走る」を選びました。5つの段階を駅にして、ページを下に読み進めると、車が駅から駅へ走ります。パソコンでは横、タブレット・スマホでは縦の路線です。

4. 4企画・設計の意図

   運転手は、最後まで同じ

   最初の駅から最後の駅まで、運転するのはずっとGANCHAN 11号です。企画から公開まで一人が一貫して担当する、ということを、運転手で見せています。03 ハイブリッド制作の「ハンドルは、最後まで人が握る」ともつながる作りです。

5. 5GANCHAN 11号の指定

   気づき

   車を「企画搬送レールカー」にしたい。赤い装甲の小型車両で、金色のフロントガラス、アンテナ、側面にG11。荷台に企画書を積む

   修正

   AIが描き直し、道もレール（2本のレールと枕木）にした。金色はロゴの配色に無いため、フロントガラスとライトだけに使った。アンテナは走っている間に揺れる。企画書は、AIの提案で「3 企画・構成」の駅を過ぎた時に上から積まれる

6. 6GANCHAN 11号の指摘

   気づき

   レールカーの明るい赤が、サイトの中で浮いている

   修正

   明るい赤は、このサイトでは赤ペンの書き込みと強調に使っている色。車の装甲は、サイトの基調の赤（えんじ。相談ボタンや、通った駅と同じ色）に変えた。企画書の赤い札だけは、赤ペンの書き込みとして明るい赤のまま残した

7. 7企画・設計の意図

   「お願いすること」は、付箋のように

   「お願いすること」は、お客様の番であることが一目で分かるよう、付箋のように少し傾けて貼りました。

8. 8GANCHAN 11号の相談

   気づき

   企画の提案を契約の前に行うと、契約にならなかった時の負担が大きい

   修正

   AIも同意し、企画を契約の後に移した。段階を「相談・ヒアリング → お見積もり・ご契約 → 企画・構成 → 制作・途中確認 → テスト・公開／お引き渡し」に変えた。契約の前は、お見積もりのための「おおまかな方向性」までにした

9. 9GANCHAN 11号の方針

   写真は、お客様にご用意いただく

   撮影した写真などは、どのプランでもお客様にご用意いただく、というGANCHAN 11号の方針に合わせて、「原稿・写真などのご用意」と書きました。

10. 10企画・設計の意図

    走る・戻る・着く

    走っている間はタイヤが回り、車が弾み、後ろから煙が出ます。ページを上に戻ると、車はバックします（煙は出ません）。通った駅は赤に変わり、途中確認の駅では「確認ポイント」の旗がはためきます。終点に着くと、チェッカーフラッグ（レースのゴールの旗）が振れ、「公開」の印が押されます。

11. 11GANCHAN 11号の指摘

    気づき

    パソコンで、車が終点に着く頃には、路線図が画面のかなり上にある

    修正

    車が端から端まで走る区間を、画面の高さの80%→45%の位置に縮め、路線図が見やすい位置にあるうちに着くようにした

B面メモ 07：運営者の書き込み

1. 1企画・設計の意図

   誰が作るのか、その経験がどう役立つのか

   このセクションの役割は、構成案（実装の前に作ったサイトの設計図）どおり、誰が企画・制作するのかと、その経験が依頼する方にどう役立つのかを伝えることです。経歴は短くまとめ、構成案にあった3つの強み「目的の整理」「現実的な進行」「実装までの調整」に、1つずつ結びつけました。

2. 2AIが作成

   文章の下書きは、AI

   説明文、3つの強みの説明、最後の「窓口も作業も同じ担当者」の文は、AIが下書きしました。動きを付けるプログラム（JavaScript）が動かない時や、端末で動きを減らす設定にしている時は、起動し終えた状態で表示します。

3. 3AIが作成

   機体データと、配線図

   GANCHAN 11号の紹介を、ロボットの「機体データ」として見せ、経歴を「装備」として強みへつなぐ「配線図」にする案は、AIが出しました。画面に入ると起動し、スペックが1行ずつ点灯して「OK」が付き、稼働年数が0から数え上がります。

4. 4GANCHAN 11号が用意

   イラストは、GANCHAN 11号が作成

   GANCHAN 11号のイラストは、GANCHAN 11号が作りました。最初は仮の枠を置いておき、届いてから差し替えています。背景が透明な絵なので、AIが、足元から明かりが当たる格納庫の枠に立たせました。起動する時は暗い状態から、読み取りの光の線が上から下へ走って点灯します。画像は軽い形式（webp）も用意しました。

5. 5GANCHAN 11号の指摘

   気づき

   イラストが見える頃には、ほかの演出がすべて終わっている。セクションが画面に入った時に、全部まとめて起動していたため

   修正

   起動をばらばらにした。機体データは、イラストの6割が見えた時に起動し、読み取りの線（1.1秒に延長）が走ってからスペックが点灯する。配線は1本ずつ、見えた時に電気が通る

6. 6GANCHAN 11号の相談・訂正

   気づき

   「フリーランス約8年」は、フリーランス → 制作会社 → 再び独立、という経歴だと書き方が難しい

   修正

   GANCHAN 11号の判断で、通算の年数「Web制作の仕事 ○年目（フリーランス・制作会社を通算）」にした。2013年を1年目として、年が変わると自動で1つ増える（2026年は14年目）。最初は年数をAIが取り違えていたため、GANCHAN 11号が訂正した

7. 7GANCHAN 11号の指摘

   気づき

   「制作会社でWeb部門を立ち上げ」は、ぱっと見で意味が伝わりにくい。部長の時も、プレイングマネージャー（まとめ役をしながら自分でも作る立場）として制作を兼ねていた

   修正

   GANCHAN 11号の文案をもとに、「制作会社のWeb制作部門で、部長として統括。数々の案件のディレクション（制作の進行・取りまとめ）と制作（デザイン・コーディング）も兼任。」に書き換えた。装備の補足も同じ文案から作った

8. 8企画・設計の意図

   詳しい紹介と、これまでの実績は外のサイトへ

   GANCHAN 11号の詳しい紹介と、これまでの制作実績は、運営者のサイト（ganchan11.com）（新しいタブで開きます）に載っています。ここでは短くまとめ、詳しく知りたい方を新しいタブで案内します。

9. 9GANCHAN 11号の指摘

   気づき

   「装備」「依頼者にとっての強み」の見出しが地味

   修正

   AIが札の形に作り直した。装備は青緑の札に回る歯車、強みは紙の色の札に電球を付け、間に流れる矢印を置いた

10. 10企画・設計の意図

    経歴から、強みへ電気が通る

    経歴（装備）と強みを配線でつなぎ、電気が通ると強みのランプが点きます。点いた後も、配線には信号が流れ続けます。どの経歴をどの強みにつなぐかは、AIが「ディレクション → 目的の整理」「Web部門の統括 → 現実的な進行」「実装の技術 → 実装までの調整」と組みました。

11. 11GANCHAN 11号の指摘

    気づき

    パソコンで、左の機体データが右の配線図より長く、右下が大きく空く

    修正

    配線図を機体データの高さに合わせ、配線の間隔を均等に広げた

12. 12GANCHAN 11号の指摘

    気づき

    画面の幅が1024pxの時、装備の枠が細く、説明が4行に折れる

    修正

    パソコンでは配線を短くし、装備の枠を広げた

13. 13企画・設計の意図

    相談から公開まで、一本の線

    最後に「相談・企画・デザイン・実装・公開」を一本の線でつなぎ、窓口も作業も同じ担当者であることを見せました。間に人が入らないので、伝言による食い違いが起きません。

B面メモ 08：よくある質問の書き込み

1. 1企画・設計の意図

   相談の前に残る疑問に、短く答える

   このセクションの役割は、構成案（実装の前に作ったサイトの設計図）どおり、相談の前に残りやすい疑問に答えることです。回答は短くして、読んですぐ判断できる形にしました。細かな条件は、料金・対応範囲のページや、トップの該当するセクションへ案内しています。

2. 2企画・設計の意図

   疑問ゲージ

   目盛りが、残っている疑問の数を表します。質問を開くたびに、目盛りが赤から青緑に変わっていきます。すべて開くと「疑問解消」の印が押され、「あとは、相談してみるだけです」と出て、次の09 お問い合わせにつなぎます。パソコンでは左の列、スマホ・タブレットでは質問の上に貼り付きます。

3. 3AIが作成

   開くと、GANCHAN 11号が通信で答える

   AIの案です。質問を開くと、GANCHAN 11号（07 運営者のイラストの顔）が少し「入力中…」を見せてから、通信で答えます。右の開閉のスイッチは、閉じている時は赤、開くと青緑に倒れます。開閉はブラウザに元からある仕組み（details）で作ったので、動きを付けるプログラム（JavaScript）が動かなくても、質問を開いて読めます。

4. 4GANCHAN 11号の指定

   質問は、11個

   AIの案では質問は9個でしたが、GANCHAN 11号の指定で、名前の「11号」にちなんで11個にしました。増やした2問（「AIを使うと、ほかのサイトと似たものになりませんか？」「スマートフォンでの見やすさ」）は、AIが案を出しました。

5. 5AIが作成

   「企画はご契約の後」を、先に伝える

   構成案にあった8つの質問に、AIの提案で「契約の前に、企画やデザインの案を見られますか？」を加えました。06 ご依頼の流れで決めた「企画はご契約の後」を、依頼する前に分かるようにするためです。

6. 6GANCHAN 11号の指摘

   気づき

   「写真はどのプランでもお客様のご用意」だと、すべての写真が必要だと誤解される。AIで作った画像で代わりにする場合もある

   修正

   「撮影が必要な写真は」と、範囲を限った

7. 7GANCHAN 11号に確認

   スマホ対応は、普段の確かめ方で答える

   AIの文は、一般的な説明だけでした。GANCHAN 11号に普段の確かめ方を聞き、「画面の横幅を1ピクセル単位で変えながら目で確かめ、調整する」ことを回答に加えました。

8. 8GANCHAN 11号の判断

   評価いただいた話は、ここに

   制作会社から評価をいただいた話を、AIは「07 運営者」か、この質問に入れる案を出しました。GANCHAN 11号と相談し、この質問の回答の最後に入れました。前の勤め先で褒められた話と誤解されないよう、「ご依頼いただいた制作会社から」と書く形は、GANCHAN 11号が決めました。

9. 9GANCHAN 11号の指摘

   気づき

   費用の例に「フォント代」があったが、インターネットから読み込む文字（Webフォント）を使うので、よほどのことがない限りかからない

   修正

   「フォント」を外し、「有料の素材（写真・イラストなど）」にした。料金のページを作った時に、「外部のサービス（予約ツールなど）」も加えた

10. 10GANCHAN 11号の発見・判断

    ほかで作られたサイトの保守も

    お問い合わせの選択肢を見ていて、「保守だけを頼みたい方もいるのでは」とGANCHAN 11号が気づきました。ほかで作られたサイトの保守も引き継げるため、回答に「ほかで作られたサイトの保守も、引き継いでお受けできます。」を加えました。

11. 11GANCHAN 11号の方針

    引き渡しの方法

    引き渡しの条件はまだ決まっていなかったため、AIは「ご契約の段階で取り決めます」とだけ書いていました。GANCHAN 11号の方針で書き換えました。ソースコード（サイトを作っている元の文書）は、お客様がサーバー（サイトのデータを置く場所）を用意する場合はそこへ載せてお渡しし、保守をお任せいただく場合は、ご要望があれば別にお送りします。

12. 12AIが作成

    回答の下書きは、AI

    回答は、それまでに決まった方針（AIと人の担当、企画はご契約の後、1ページのサイトも対象、保守は月額5,000円〜など）に合わせて、AIが下書きしました。まだ決まっていない条件は、内容を作らず「ご契約の段階で取り決めます」とだけ書き、GANCHAN 11号の確認を待ちました。

B面メモ 09：最終お問い合わせの書き込み

1. 1企画・設計の意図

   お願いすることは、1つだけ

   最後にお願いする行動は「サイト制作を相談する」の1つに絞りました。B面への案内は、小さな文字のリンクにとどめています。「まとまっていなくても相談できる」ことと、お問い合わせの後に何が起きるかを先に見せて、送る時の不安を減らすねらいです。相談の形式や無料の範囲は、運用の条件が決まるまで載せていません。

2. 2GANCHAN 11号の指摘

   気づき

   パソコンで、説明文と手順03が、区切りの悪いところで折り返す

   修正

   GANCHAN 11号の指定で、パソコンでは「。」で改行した。改行した1行が収まるよう、流れとゲートを左右に並べるのは画面の幅が1280px以上の時だけにし、説明文は横幅いっぱいに置いた。手順02も同じ形にそろえた

3. 3企画・設計の意図

   お問い合わせの後の流れ

   送った後に何が起きるかを、3つの手順で見せています。順番は、06 ご依頼の流れで決めた「企画はご契約の後」に合わせました。

4. 4GANCHAN 11号の方針

   2営業日以内に、返信する

   返信の目安が決まっていなかったため、AIは「ヒアリングの進め方をご案内します」とだけ書いていました。GANCHAN 11号の方針で、「2営業日以内に返信し、その時にヒアリングの日程を相談する」に書き換えました。

5. 5企画・設計の意図

   発進ゲート

   画面に入ると、操作盤の扉が左右に開き、GANCHAN 11号がせり上がって、相談ボタンが点灯します。ボタンにマウスを乗せると、通信の波が速くなります。扉は飾りなので、キーボードでボタンに移った時はすぐに開きます。下のフッターが紺色のため、このセクションだけ、えんじ色の面にしました。

6. 6GANCHAN 11号が用意・判断

   耳に手を当てて、通信を聞く

   AIは最初、07 運営者の全身のイラストを使い回していました。GANCHAN 11号が「耳に手を当てて通信を聞く」胸から上のイラストを新しく作り、差し替えました。AIは通信の波を耳に当てた手のあたりへ移しましたが、GANCHAN 11号の判断で、背中のアンテナから出る元の位置に戻しました。

7. 7GANCHAN 11号の指摘

   気づき

   通信の波の中心が、アンテナの先からずれている

   修正

   画像の中のアンテナの先の位置（左から74%・上から11.5%）を測り、波の中心をそこに合わせた。イラストが浮き上がる時は、波も一緒に動く

8. 8GANCHAN 11号の指摘

   気づき

   ボタンにマウスを乗せてイラストが浮き上がった時、胸の下端と床の間に隙間ができる

   修正

   AIは余裕を取って床に16〜18px埋めたが、GANCHAN 11号が「ギリギリを攻めたい」と指定し、パソコンでは浮き上がる量と同じ6pxだけ埋めた。浮いた時に、下端がちょうど床に乗る。スマホでは、胸から上の姿が宙に浮いて見えないよう、床に16px埋めた