BEHIND THE SCENES — AI × 100TH
AIと組めば、
自分たちで作れる
AIは魔法ではない。ただの道具だ。
でも、使い方次第で100年の歴史を未来に届ける。
このページは、100周年特設サイトの各コンテンツを、私たちがどうAIと共に作り上げたかを記録するものです。
100周年特設サイト・3つのメインコンテンツ
クリックでコンテンツを切り替え
01 — BY THE NUMBERS
数字で見る、
タイムライン制作の実績
推測ではなく、典拠に基づいて構築した年表。
AIは典拠を素早く拾うが、何を採るかを決めるのは人間です。
歴史イベント
追記提案
採用した実写真
(HTML+CSS+JS)
総額の圧縮率
制作期間の圧縮率
（中堅+認定パートナー）
実コスト
02 — PROCESS & STRUGGLES
つくり方と、
リアルな苦労
AIリサーチ — 10分で100年分の基礎データ
世界情勢、日本の出来事、物流業界の変遷——AIがわずか10分で100年分の基礎データを調査・整理。人間はファクトチェックに集中し、短時間で年表の土台を築きました。
社内資料の一括抽出 — 70年誌と冊子をOCRで構造化
過去の社内報、記念誌、議事録など長年の社内資料を物理的に裁断・スキャン。AIがOCRでテキスト化し、重要な日付・出来事・数字を自動抽出しました。さらに 70年誌・40周年冊子から121件のPDF典拠ベースの追記提案を構造化し、推測でなく原典に基づく年表に磨き込みました。
紙の資料は、まず人の手でデジタル化するしかない。
「未来の技術と、昭和の紙束の戦い」でした。
さらに、AIは時に推測で文章を補ってしまうこともある。
だからこそ「PDFから裏取りを必ずすること」を徹底ルールにしました。
インタビューで肉付け — 数字に人の物語を
経営陣へのインタビューを実施。AIが文字起こし・要約・構造化を担い、人間は編集判断に注力。創業者の墓碑銘や藍綬褒章受章記念冊子からも情報を織り込み、「数字」と「物語」を両立する年表に仕上げました。
デザイン実装 — 3度作り直して、教科書のような年表に
UI全体の構成は、最終的な形に辿り着くまで3度作り直しています。
1度目は縦長の100年スクロール。情報量は載るが、4社の動きと世界情勢を横並びで描く「並列の物語」が成立しなかった。
2度目は横スクロール＋5列グリッド。スクロール連動で列が動的に増減する仕掛けまで作り込んだが、視覚的な落ち着きにどうしても納得がいかず、白紙に戻して再構築を決意。
3度目で、ようやく現在の教科書のような秩序を持った横スクロール年表に行き着きました。
途中で出会った技術的な壁も、ひとつひとつ厚かったです。
年をまたぐ瞬間に4社の行が「カクッ」と離散的に切り替わる動きを、毎フレームの連続モーフへ書き直し（CSS変数＋smoothstep補間）。
SPでstickyが効かないバグは、テーマ側の overflow:hidden auto が祖先でsticky親コンテナを奪っていたのが原因と判明し、JSで上書き。
iPhoneのノッチで上端が外部ヘッダに埋もれる問題は、env(safe-area-inset-top)を加算して解消。
疑似要素がモバイルでクリックを吸収する罠も発見し、最終的に document.elementsFromPoint() ベースのクリック検知に到達。
表面の秩序は、こうした泥臭い試行錯誤の積み重ねの上に立っています。
完成形に近づくほど、表に出ない罠が次々に顔を出します。
JSの一行のnullエラーで、クリック・キーボード・スクロール同期が同時に死ぬ。
縦書きの「ナガシマ物流サービス」がスロットを超え、年表記まで切れて見えなくなる。
綺麗なはずのamberが、白背景ではコントラスト不足で文字として読めない。
画像URLにPortal IDセグメントが抜け、写真が一斉に404になる夜もありました。
こうした目立たない罠を一つひとつ潰す時間が、最後の完成度を決めました。
フィードバック＆ブラッシュアップ
プロジェクトチームと共有し修正を繰り返し完成度を高めました。AI協業では「ここ直して」で数分で反映。このスピード感が質の高いアウトプットに直結しました。
AIとの対話にも「コンテキストの壁」がある。
ファイルが巨大になるとAIが把握しきれなくなり、新しいチャットに引き継ぐ必要が出る。
3ファイル分離＋ビルドスクリプトは、この現場で生まれた現実的な解決策でした。
03 — COST & TIME
外注した場合との比較
この「100年の歩み」ページを、100年分のコンテンツ取材・画像制作まで含めてフル外注した場合の見積です（ロゴ／カウントダウン等の他ページは含みません）。業界実勢（フリーランス単価相場・年表ページ制作相場）に基づくフェーズ別の積み上げです。
| 比較項目 | 外注（標準ケース） | AI協業（実例） |
|---|---|---|
| 総額 | 1,400〜1,800万円 | 約30万円 |
| 期間 | 4-5ヶ月（14-18週） | 4週間 |
| 体制 | 5-7名のチーム | 実質1名+AI |
| 工数 | 1,670h（直接人件費） | 1名×4週※通常業務と並行 |
| 修正反映 | 数日〜数週 | 数分〜数時間 |
| 追加費用 | 経費 ¥40〜90万 + マージン 15〜20% | AIツール利用料 ¥10万 |
| 圧縮率 | 総額 約1/50／期間 約1/4／修正反映 約50-100倍の高速化 | |
外注時のフェーズ別 内訳を見る（A〜H・8工程）
| フェーズ | 工数 | 費用 | 期間 |
|---|---|---|---|
| A. 企画 | 110h | ¥80万 | 3週 |
| B. コンテンツ・取材 | 510h | ¥340万 | 5-6週 |
| C. デザイン | 160h | ¥120万 | 3週 |
| D. 画像制作（修復・色補正なし） | 140h | ¥85〜95万 | 3-4週 |
| E. フロントエンド実装 ★最大 | 380h | ¥320万 | 5週 |
| F. QA | 130h | ¥80万 | 2週 |
| G. コンテンツ流し込み | 140h | ¥80万 | 2週 |
| H. PM | 100h | ¥70万 | 全期間並走 |
| 合計（並列最適化時） | 1,670h | ¥1,180万 | 14-18週 |
| + 経費 ¥40〜90万 + 制作会社マージン 15〜20% | |||
外注 ¥1,400〜1,800万 → AI協業 約30万円。浮いたリソースは「コンテンツの質」と「磨き込みの回数」に集中投下できました。
追加費用を気にせず、納得いくまで作り直せる——これが、自分たちで作る一番の手応えでした。
04 — PRICE TIER SCENARIOS
価格帯シナリオ別レンジ
想定する制作会社のグレードによって相場は3層に分かれます。
ナガシマグループの規模感（中堅メーカー、100周年）では「標準」が現実的なレンジです。
機能を絞り込んだミニマル実装。縦書き・スクロール演出など特殊表現は対応外、または別料金。
A級制作会社の現実値。縦書きCSS・スクロール連動・動的ページ生成を含む。今回の外注ベースライン。
完全外注で経営層インタビュー〜編集体制まで丸抱え。社史出版経験のある専門会社が担当。
01 — THE CHALLENGE
「なぜこのロゴなのか」を
伝えるページをつくる
約290名の従業員アンケートから始まり、創業の原点に立ち返り、大八車のモチーフにたどり着いた100周年ロゴ。どんな想いでこのロゴを作ったのか、その過程と背景を一つのページにまとめて伝えたい。
——そう考えるところから、このロゴストーリーの制作は始まりました。
しかしこれが想像以上に難しかった。「答え（ロゴ）」を最初に見せるのか、「問い（なぜ作るのか）」から始めるのか。プロジェクトチームからのフィードバックで次々と課題が浮上し、ページはゼロから3回つくり直すことになりました。
02 — VERSION EVOLUTION
3度のリビルド —
ページはこう進化した
完成形にたどり着くまでの構成変遷。
初版 —「答え」を先に見せるスタイル
最初のバージョンは、ロゴを冒頭でドーンと見せ、その後に説明を並べる構成でした。ヒーロー → 大八車の説明 → ロゴ → 3つの想い → なぜロゴを作るのか → アンケートデータ → デザイン解説。
しかし読み返してみると、「なぜこのロゴなのか」の納得感がない。ロゴを見せられても、そこに至るまでの物語がないと「ふーん」で終わってしまう。アンケートデータがページの一番下にあるため、約290名の声がロゴを生んだという最も重要なメッセージが埋もれていました。
構成反転 —「問い」から始めるストーリーテリング
ページ全体の構成を完全に反転しました。「なぜ作るのか」を最初に、アンケートデータを上部に移動し、「約290名の声 → キーワード発見 → 創業の原点に立ち返る → 大八車 → ロゴ誕生」という、読み手が自然に「なるほど」と思える流れに。
同時に、ロゴの表示サイズを300px → 560px → 最終的に1000pxに段階的に拡大。ロゴを発表するページなのにロゴが小さいのは本末転倒——という至極まっとうな指摘から。
チームフィードバック反映 — 細部の精度を上げる
プロジェクトチームの4名との共有で7つの改善点が浮上。「大八車って何？」という初見への配慮、句読点の不統一、日付のずれ——一つひとつ潰してようやく完成形に。
デザイン要素「人・車輪・道」のホバー演出（カーソルで該当箇所がゴールドに光る）と、ヒーローの光の粒エフェクトが、リビルドのたびに消えたり退化したりする問題も。
AI生成コードの宿命として、何度も明示的に復元を指示し続けました。
03 — VISUAL CRAFTSMANSHIP
「声」を視覚化する、
ふたつの演出
ロゴが「みんなの声から生まれた」ことを、テキストではなく動きで体感してもらう。
こだわって作り込んだ2つのインタラクションです。
ヒーローエリアでは、従業員ひとりひとりの声を「光の粒」に見立て、画面のあちこちから色とりどりの粒が浮かび上がる演出にしました。様々な声を別々の色に置き換えることで、ロゴが「ひとりの作品」ではなく「みんなの声の結晶」であることを、入った瞬間に肌で感じてもらえる構成です。
粒は時間差で出現し、最終的に中央へとゆっくり収束。色と光が集まって、ロゴが立ち現れる——「アンケートの数字＝290名」という事実を、データではなく「光の粒の量と多彩さ」として目で受け取る瞬間を設計しました。
ページ下部の「ロゴを構成する3要素」セクションでは、人の形・車輪の象徴・道のラインそれぞれにカーソルを合わせると、該当する箇所だけがゴールドに光る演出を仕込みました。説明文を読まなくても、ロゴのどの線がどの意味を担っているのかが、指の動きと目で同時に理解できます。
ゴールドは100周年文脈の限定色。解説と発光が連動することで、「3要素が一体となってロゴを成している」ことを直感的に伝える設計です。色の選び方ひとつで、説明の解像度が大きく変わると実感した工程でした。
01 — CONCEPT
カウントダウンコンテンツとは
カウントダウンコンテンツは、100周年に向けて時代区分ごとにナガシマグループの歴史を深掘りする連載企画です。社史ページよりもグループの視点に絞り、各時代のエピソードを映像・漫画・音声で丁寧に伝えます。
このページで紹介するのは、現在公開中の「第1回（黎明編）」の制作で得た知見です。第2回以降を公開していく中で新たに見えてきたことがあれば、このページにも追記していく予定です。
02 — FOUR CHALLENGES
映像・漫画・音声を、
AIと作る——4つの挑戦
従来は多くの工程と体制が必要だった制作を、AIとの協業でどう変えたか。試行錯誤の現場をそのまま記録します。
1分の映像から、
3分の本編へ作り直した。
カウントダウン第一回「黎明の時代（1904-1945）」のヒーローには、単なるイメージ画像ではなく、ナレーションと既存写真＋AI画像のモンタージュを組み合わせたシネマティック映像を据えました。社史から抽出した7つのシーン——茨城の秋（生家）→ 青年期（上京・関東大震災）→ 創業（恩人・田中屋）→ 不渡り（1,500円の壁）→ 激動の昭和（事業拡大）→ 焼失と再起（1945終戦）→ そして始まり——を、AI画像と社史実写の混成で構成し、秒単位でタイミングを設計しています。
実はこの映像、最初は1分の構成で一度完成させていたものです。仕上げてから社史（70年誌・40周年冊子）を改めて読み直したところ、年代や創業エピソードに関する重要な事実が浮かび上がり、1分では伝えきれないと判断。長さを3分に延ばし、シーン構成・ナレーション原稿・AI画像のプロンプトをすべて組み直しました。
AIだから素早く作れる——だからこそ、史実が深まれば、表現を作り直せる。この往復こそが、最終的な完成度を決めました。
5シーン構成
動画変換
高品質なナレーション再現
ピアノ+チェロ
物語を区切るのは4つのキメ台詞——「これが、100年の、始まりである」「信用、第一」「信用は、焼けない。人と人との、縁は、焼けない」「これが、ナガシマの、始まりである」。ナレーションとテロップ（字幕）を完全に連動させ、語りに合わせて字幕を出す構成にすることで、視覚と聴覚の両方から物語が届くようにしました。
ナレーションの精度は、
プロンプトの工夫で決まる
ナレーションの指示を漢字だけで渡すと、読み間違いやイントネーションの崩れが起きやすい。同じ文章でも、生成のたびに読み方が揺れることもありました。そこで読み方やアクセントをプロンプト側で明示的に指定する工夫を重ね、狙った精度を一度で出せる状態へ近づけていきました。
さらに、ナレーションの種類によって複数の声を使い分け。落ち着いた情報の声、重厚なドキュメンタリー女声、年配の商人を演じる包容力ある男声——声優を外注すれば大きなコストになる構成が、ほぼ無視できる水準で実現できました。
そして、動画として一本にまとめる工程は手作業の連続でした。ナレーションと画像が切り替わるタイミング、BGMとの重なり——これらを動画編集ソフト上で一つずつ手で合わせる調整に、最も多くの時間がかかりました。AIが素材を速く生み出すほど、それを「作品」に仕上げる編集の比重が増していく実感がありました。
記録・分類
読み方を明示
3声を使い分け
蓄積・横展開
漫画35ページを、
プロンプトの積み上げで仕上げた
当初は漫画専用の制作ツールを開発しようと試みました。テキスト情報からコマ割り・セリフ・画像生成プロンプトまで自動出力する仕組みです。しかしコマ単位の文脈管理やキャラクターの一貫性制御で壁に当たり、最終的にツール開発は断念しました。
代わりに選んだのは、地道なプロンプト研究の積み上げ。master_prompt + キャラクターシート + コマごとの状況指示という3層構造で、画像生成ツールに渡す文章そのものを丁寧に磨き上げる方針へ切り替えました。
結果として35ページの漫画を完成させましたが、細かい微調整（顔の角度、視線、衣装の整合、コマ間の連続性）の積み重ねが、時間の大半を占めました。「ツールを作る」のではなく「プロンプトを磨き続ける」が、現実的な解だったのです。
開発を試みる
ツール断念
3層構造を設計
微調整で完成
AI協業は「自動化」ではなく「相棒との往復」。
だからこそ、35ページすべてに目を通して微調整する時間が、最後の品質を決めました。
そして映像と同じく、漫画も社史の事実が深まるたびにキャラ・コマ・セリフを組み直しています。
史実への敬意が、AI制作物の最終品質を決めると確信した工程でした。
「インタビュー形式」という発見
各時代のエピソードを伝えるフォーマットとして、その時代のテーマに合ったエピソードを持つ人物にインタビューをする形式を採用しました。
これにより、歴史の羅列ではなく「人の声」を通じて時代を追体験できる構成に。読み手にとっての親しみやすさと、コンテンツとしての一貫性を両立させました。
— PRODUCTION SCALE
内製で、
ここまで作れた。
カウントダウン第1回（黎明編）の3分映像、漫画35ページ、インタビュー2本、縦書きナレーション、ページモジュール群。
同等の品質を外注しても数百万円規模・数ヶ月を要する制作を、AIを相棒に、本業の合間で形にしました。
HTML+CSS+JS
モジュール
第1〜6話
シーン
同等の品質を外注した場合
- 映像制作（3分・ナレーション/イメージ映像/BGM）：50〜100万円
- 漫画35ページ（シナリオ＋作画＋キャラクター設計）：120〜200万円（フリーランス作画 ¥30〜50k/P）
- インタビュー2本（企画・収録・編集・記事化）：40〜90万円
- カウントダウン専用ページ実装（エピソードページ＋一覧・縦書きCSS/スクロール演出）：150〜300万円
- 合計：約400〜700万円／期間 3-5ヶ月／フリーランス中心 4-6名
- 修正のたびに見積追加・スケジュール再調整・往復メール
AIと一緒に作った場合
- 主担当：1名（本業の合間で並行進行）
- 期間：約2週間で公開まで到達
- 追加費用：ChatGPT・Claude・Geminiのサブスク利用料の範囲内で完結
- 漫画35P：キャラデザを一度仕込めば、追加の発注予算は不要だった
- 専門家は「集める」のではなく「呼び出す」——AIが役割を代行
- 修正は会話内で完結——数分で反映、見積待ちはありません
数字以外で、何が変わったか
- 外注の見積待ち・修正の往復が消えた。フィードバックから反映までが、会話の中で完結します。
- 「予算枠で何ができるか」が、「やりたいことを試せるか」に変わった。仕様変更の心理的ハードルが消える。
- 専門家を「集める」のではなく、「呼び出す」。Webエンジニア・縦書きCSS専門・漫画家の役割を、AIが代行します。
- 社史の精度はファクトシート参照で担保。取材ライターが書き起こすより、誤情報リスクが小さい。
- キャラの年齢進行（國治 15歳→41歳）など、長期一貫性をAIで制御。通常の漫画分業より統一感が高くなりました。
※ 本ページと同等の品質を、フリーランス＋小規模制作で外注した場合を想定した相場の積み上げ（大手スタジオ価格ではありません）。
出典：フリーランス映像編集相場（3分・1分あたり数万円〜）／フリーランス漫画作画 ¥30〜50k/P／インタビュー記事制作 ¥20〜40万/本／フリーランスWeb実装相場（複数社公開情報）
― なお、この連載をきっかけに、100周年プロジェクトチーム内には「漫画班」が自然発生的に生まれました。
テキストだけでは伝わりにくい歴史も、漫画なら直感的に届く。
――その発想から、ミーティングを重ねながら制作体制を整えていきました。
AIが当たり前になった時代に、
何を残し、どう伝えるか。
その選択こそ、
人にしかできない仕事だった。
— 100周年プロジェクトチーム
100周年サイトは、
読みものの集まりだ。
人物伝、哲学、技術、社会貢献、地域、組織——
テーマの違う独立記事を、これからも増やしながら、ナガシマグループを描いていきます。
あなたが今読んでいるこのページも、その1本です。