BEHIND THE SCENES — AI × 100TH
AIと組めば、
自分たちで作れる。
AIは魔法ではない。ただの道具だ。
でも、使い方次第で100年の歴史を未来に届ける。
このページは、100周年特設サイトの各コンテンツを、私たちがどうAIと共に作り上げたかを記録するものです。
01 — COMPARISON
もし、従来のやり方でタイムラインを作っていたら
100年分×4カテゴリの年表ページ。制作会社への外注と、AI協業の比較です。
制作会社に依頼した場合
- 費用:1,400-1,800万円(中堅+HubSpot認定パートナーの標準見積)
- 期間:4-5ヶ月(並列最適化時で14-18週)
- 体制:5-7名(FTE換算 2-3名)が並走
- 100年分のリサーチに5-6週間(取材ライター+リサーチャー+編集者で510時間)
- 修正のたびにフィードバック往復+追加費用が発生し、妥協しがちに
- PM・コンテンツ・デザイン・フロントエンド・QAの分業体制が必要
生成AIと一緒に作った場合
- 100年分の世界と日本の情勢を、AIが速やかに整理し下地に
- 70年史・40周年冊子をスキャンし、300件以上のイベントをAIが構造化
- 歴史を知る社員への聞き取りもAIが丁寧に分析、年表カードへ
- 「ここ直して」が数分で反映され、追加費用なしで納得いくまで磨ける
- 制作作業は実質1名+AI、他メンバーは情報収集・判断・チェックに集中する最小工数体制
02 — BY THE NUMBERS
数字で見る、タイムライン制作の実績
推測ではなく、典拠に基づいて構築した年表。
AIは典拠を素早く拾うが、何を採るかを決めるのは人間です。
歴史イベント
追記提案
採用した実写真
平成・未来
総額の圧縮率
制作期間の圧縮率
(中堅+認定パートナー)
実コスト
03 — 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ファイル分離+ビルドスクリプトは、この現場で生まれた現実的な解決策でした。
04 — COST & TIME
外注した場合との比較
業界実勢(ファインディ 2026・HubSpot Japan・周年サイト相場)に基づき再算出した、現実的なフェーズ別見積です。
| 比較項目 | 外注(標準ケース) | 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万円。浮いたリソースは「コンテンツの質」と「磨き込みの回数」に集中投下できました。
追加費用を気にせず、納得いくまで作り直せる——これが、自分たちで作る一番の手応えでした。
05 — PRICE TIER SCENARIOS
価格帯シナリオ別レンジ
想定する制作会社のグレードによって相場は3層に分かれます。
ナガシマグループの規模感(中堅メーカー、100周年)では「標準」が現実的なレンジです。
機能を絞り込んだミニマル実装。縦書き・スクロール演出など特殊表現は対応外、または別料金。
A級制作会社の現実値。縦書きCSS・スクロール連動・HubSpotモジュール開発を含む。今回の外注ベースライン。
完全外注で経営層インタビュー〜編集体制まで丸抱え。社史出版経験のある専門会社が担当。
06 — EVIDENCE & SOURCES
数字の根拠・参照した業界データ
本ページの単価・相場は2026年実勢に基づき、複数の一次資料を突き合わせて精緻化しました。
-
単価相場
ファインディ 2026年最新調査 — フリーランスエンジニア平均月単価約80万円 フロントエンド人月単価のベースライン(¥5,000-9,000/h)
-
CMS 相場
HubSpot Japan 公式 — CMS 導入Web サイト構築の相場 中規模30-50p ¥100-200万 / 大規模100p+ ¥500万〜
-
HubSpot 認定
株式会社パンセ — HubSpot CMS構築プラン(認定パートナー) HubSpot動的ページ生成 ¥60万〜のリファレンス
-
周年サイト
イントリックス株式会社 — 周年記念サイトの概要とデザイン・コンテンツ事例 周年記念サイト基本 ¥200万〜 / システム開発+¥50-100万
-
事例レポート
日経BPコンサルティング — 秀逸な周年記念サイト紹介・周年事業レポート 大手企業の周年事業の実態調査
01 — THE CHALLENGE
「なぜこのロゴなのか」を伝えるページをつくる
ロゴが完成しただけでは意味がない。約290名の従業員アンケートから始まり、創業の原点に立ち返り、大八車のモチーフにたどり着いた——そのストーリーそのものを伝えるページが必要でした。
しかしこれが想像以上に難しかった。「答え(ロゴ)」を最初に見せるのか、「問い(なぜ作るのか)」から始めるのか。プロジェクトチームからのフィードバックで次々と課題が浮上し、ページはゼロから3回つくり直すことになりました。
02 — VERSION EVOLUTION
3度のリビルド — ページはこう進化した
完成形にたどり着くまでの構成変遷。
初版 —「答え」を先に見せるスタイル
最初のバージョンは、ロゴを冒頭でドーンと見せ、その後に説明を並べる構成でした。ヒーロー → 大八車の説明 → ロゴ → 3つの約束 → なぜロゴを作るのか → アンケートデータ → デザイン解説。
しかし読み返してみると、「なぜこのロゴなのか」の納得感がない。ロゴを見せられても、そこに至るまでの物語がないと「ふーん」で終わってしまう。アンケートデータがページの一番下にあるため、約290名の声がロゴを生んだという最も重要なメッセージが埋もれていました。
構成反転 —「問い」から始めるストーリーテリング
ページ全体の構成を完全に反転しました。「なぜ作るのか」を最初に、アンケートデータを上部に移動し、「約290名の声 → キーワード発見 → 創業の原点に立ち返る → 大八車 → ロゴ誕生」という、読み手が自然に「なるほど」と思える流れに。
同時に、ロゴの表示サイズを300px → 560px → 最終的に1000pxに段階的に拡大。ロゴを発表するページなのにロゴが小さいのは本末転倒——という至極まっとうな指摘から。
チームフィードバック反映 — 細部の精度を上げる
プロジェクトチームの4名との共有で7つの改善点が浮上。「大八車って何?」という初見への配慮、句読点の不統一、日付のずれ、「デザイナーが作ったものではない」という断言への懸念——一つひとつ潰してようやく完成形に。
デザイン要素「人・車輪・道」のホバー演出(カーソルで該当箇所がゴールドに光る)と、ヒーローの光の粒エフェクトが、リビルドのたびに消えたり退化したりする問題も。AI生成コードの宿命として、何度も明示的に復元を指示し続けました。
03 — TEAM FEEDBACK
プロジェクトチームからのフィードバック
完成度を高めたのは、プロジェクトチームの目。
初見の人に「大八車」の意味がわからない。冒頭でイメージ画像と説明を入れて、興味を引くべき。
3つの約束のセクションが目立たない。背景色を変えてフォントを大きくするなど、もっと強調が必要。
「このロゴはデザイナーが作ったものではありません」——最終的にはデザイナーが仕上げているので、断言は避けるべき。
100周年が最初のスタートではないから、「スタートライン」ではなく「新たなスタートライン」にすべき。
04 — VISUAL CRAFTSMANSHIP
「声」を視覚化する、ふたつの演出
ロゴが「みんなの声から生まれた」ことを、テキストではなく動きで体感してもらう。
こだわって作り込んだ2つのインタラクションです。
従業員の声が、光の粒となってロゴに集まる
ヒーローエリアでは、従業員ひとりひとりの声を「光の粒」に見立て、画面のあちこちから色とりどりの粒が浮かび上がる演出にしました。様々な声を別々の色に置き換えることで、ロゴが「ひとりの作品」ではなく「みんなの声の結晶」であることを、入った瞬間に肌で感じてもらえる構成です。
粒は時間差で出現し、最終的に中央へとゆっくり収束。色と光が集まって、ロゴが立ち現れる——「アンケートの数字=290名」という事実を、データではなく「光の粒の量と多彩さ」として目で受け取る瞬間を設計しました。
人・車輪・道——カーソルで、該当箇所がゴールドに光る
ページ下部の「ロゴを構成する3要素」セクションでは、人の形・車輪の象徴・道のラインそれぞれにカーソルを合わせると、該当する箇所だけがゴールドに光る演出を仕込みました。説明文を読まなくても、ロゴのどの線がどの意味を担っているのかが、指の動きと目で同時に理解できます。
ゴールドは100周年文脈の限定色。解説と発光が連動することで、「3要素が一体となってロゴを成している」ことを直感的に伝える設計です。色の選び方ひとつで、説明の解像度が大きく変わると実感した工程でした。
05 — STRUGGLE EPISODES
制作の裏で起きていたこと
一見スムーズに見える制作の裏側で、繰り返し突きつけられた壁。
リビルドのたびに消えるアニメーション
デザイン要素「人・車輪・道」のセクションには、カーソルを合わせると該当箇所がゴールドに光るインタラクションがあります。しかしページ構成をフルリビルドするたびに、この演出が単調なものに退化してしまう——光るタイミングがズレたり、発光が弱くなったり、同時に光ってしまったり。
AIが新しいコードを生成する際に、前のバージョンの細かいCSS/JSが引き継がれないことが原因。「さっきまでもっとダイナミックだったのに」——この修正依頼を何度も出すことになりました。ヒーローの光の粒エフェクトでも同じことが起き、両方の演出を都度復元するのが地味な作業でした。
「最後の1%」が全体の印象を決める
大枠の構成が固まってからが本当の勝負でした。ロゴのサイズが小さい、信條のサブタイトルのフォントが大きすぎる、プロセスの日付が間違っている、不要なステップがある、「長島らしさ」ではなく「ナガシマらしさ」に統一すべき——。
完成に近づくほど見る目がシビアになり、修正が増える。でもこの「最後の1%」への執着こそが、「なんとなくいい感じ」と「プロの仕事」の分水嶺でした。
01 — CONCEPT
カウントダウンコンテンツと「漫画班」の誕生
カウントダウンコンテンツは、100周年に向けて時代区分ごとにナガシマグループの歴史を深掘りする連載企画です。社史のページよりもさらにグループの視点に絞り、各時代のエピソードを丁寧に伝える——そのための表現手段として浮上したのが「漫画」でした。
テキストだけでは伝わりにくい歴史も、漫画なら直感的に届く。この発想から、100周年プロジェクトチーム内に「漫画班」が自然発生的に生まれ、4回のミーティングを重ねながら制作体制が整っていきました。
02 — FOUR CHALLENGES
映像・漫画・音声を、AIと作る——4つの挑戦
従来は多くの工程と体制が必要だった制作を、AIとの協業でどう変えたか。試行錯誤の現場をそのまま記録します。
3分の映像を、二度作った。
カウントダウン第一回「黎明の時代(1904-1945)」のヒーローには、単なるイメージ画像ではなく、ナレーションと既存写真+AI画像のモンタージュを組み合わせた3分のシネマティック映像を据えました。社史から抽出した7つのシーン——茨城の秋(生家)→ 青年期(上京・関東大震災)→ 創業(恩人・田中屋)→ 不渡り(1,500円の壁)→ 激動の昭和(事業拡大)→ 焼失と再起(1945終戦)→ そして始まり——を、AI画像と社史実写の混成で構成し、秒単位でタイミングを設計しています。
実はこの映像、現在公開しているのは2度目のものです。一度ほぼ完成した直後、社史(70年誌・40周年冊子)を改めて読み直したところ、年代や創業エピソードに関する重要な事実が浮かび上がり、最初の構成では十分に伝えきれないと判断。シーン構成・ナレーション原稿・AI画像のプロンプトをすべてゼロから組み直しました。
AIだから素早く作れる——だからこそ、史実が深まれば、表現を作り直せる。この往復こそが、最終的な完成度を決めました。
5シーン構成
動画変換
高品質なナレーション再現
ピアノ+チェロ
物語を区切るのは4つのキメ台詞——「これが、100年の、始まりである」「信用、第一」「信用は、焼けない。人と人との、縁は、焼けない」「これが、ナガシマの、始まりである」。テロップは原則なし、キメ節だけ後のせで強調する方針にしました。
AIナレーションは、素直で頑固だった
「大正十五年(じゅうごねん)」と読ませるのが、想像以上に難しい。日本語AI音声は、何度生成しても「じゅうろくねん」と読み間違える。日本語のプロンプトでは揺れるのに、英語で「CRITICAL pronunciation: 十五 = じゅうご (15), absolutely NOT じゅうろく (16)」と否定形で明示すると、一発で矯正された。
「荷馬車(にばしゃ)」を「にぐるま」と読まないよう禁止リスト化したり、固有名詞のアクセントを助詞パターンで矯正したり。細部を一つずつ潰していく作業こそが、AI協業の本当の現場でした。
さらに、ナレーションの種類によって3つの声を使い分け。落ち着いた情報の声、重厚なドキュメンタリー女声、年配の商人を演じる包容力ある男声——声優を外注すれば大きなコストになる構成が、ほぼ無視できる水準で実現できました。
記録・分類
否定形を明示
3声を使い分け
蓄積・横展開
漫画35ページを、プロンプトの積み上げで仕上げた
当初は漫画専用の制作ツールを開発しようと試みました。テキスト情報からコマ割り・セリフ・画像生成プロンプトまで自動出力する仕組みです。しかしコマ単位の文脈管理やキャラクターの一貫性制御で壁に当たり、最終的にツール開発は断念しました。
代わりに選んだのは、地道なプロンプト研究の積み上げ。master_prompt + キャラクターシート + コマごとの状況指示という3層構造で、画像生成ツールに渡す文章そのものを丁寧に磨き上げる方針へ切り替えました。
結果として35ページの漫画を完成させましたが、細かい微調整(顔の角度、視線、衣装の整合、コマ間の連続性)の積み重ねが、時間の大半を占めました。「ツールを作る」のではなく「プロンプトを磨き続ける」が、現実的な解だったのです。
開発を試みる
ツール断念
3層構造を設計
微調整で完成
そして映像と同じく、漫画も社史の事実が深まるたびにキャラ・コマ・セリフを組み直しています。史実への敬意が、AI制作物の最終品質を決めると確信した工程でした。
「インタビュー形式」という発見
各時代のエピソードを伝えるフォーマットとして、その時代のテーマに合ったエピソードを持つ人物にインタビューをする形式を採用しました。
これにより、歴史の羅列ではなく「人の声」を通じて時代を追体験できる構成に。読み手にとっての親しみやすさと、コンテンツとしての一貫性を両立させました。
— PRODUCTION SCALE
内製で、ここまで作れた。
カウントダウン第一回の3分映像、漫画35ページ、インタビュー2本、縦書きナレーション、8つのページモジュール。
専門チームを集めれば数千万・数ヶ月を要する規模を、AIを相棒に、本業の合間で形にしました。
HTML+CSS+JS
モジュール
第1〜6話
シーン
制作会社に依頼した場合
- 費用:1,900-2,100万円(実勢相場・2ページ・8モジュール構成)
- 期間:5-6ヶ月
- 体制:6-8名のチーム編成(PM/AD/UI/FE/JS専門/ライター/校閲/プロ漫画家/QA)
- 漫画35P:プロ漫画家への発注で440-580万円相当(中堅企業漫画専門社・¥80-120k/P)
- HubSpot認定エンジニア・縦書きCSS専門・JSスペシャリストを集めて編成
- 修正のたびに見積追加・スケジュール再調整・往復メール
AIと一緒に作った場合
- 主担当:1名(本業の合間で並行進行)
- 期間:約4週間で公開まで到達
- 追加費用:ChatGPT・Claude・Geminiのサブスク利用料の範囲内で完結
- 漫画35P:キャラデザを一度仕込めば、追加の発注予算は不要だった
- 専門家は「集める」のではなく「呼び出す」——AIが役割を代行
- 修正は会話内で完結——数分で反映、見積待ちはありません
数字以外で、何が変わったか
- 外注の見積待ち・修正の往復が消えた。フィードバックから反映までが、会話の中で完結します。
- 「予算枠で何ができるか」が、「やりたいことを試せるか」に変わった。仕様変更の心理的ハードルが消える。
- 専門家を「集める」のではなく、「呼び出す」。HubSpot認定エンジニア・縦書きCSS専門・漫画家の役割を、AIが代行します。
- 社史の精度はファクトシート参照で担保。取材ライターが書き起こすより、誤情報リスクが小さい。
- キャラの年齢進行(國治 15歳→41歳)など、長期一貫性をAIで制御。通常の漫画分業より統一感が高くなりました。
※ 上記は中堅Web制作会社+企業漫画専門会社への外注を想定した実勢相場。
出典:ファインディ 2026年フリーランス調査/HubSpot Japan/企業漫画制作会社単価 ¥80-120k/P/日経BPコンサル周年事業レポート 2026
04 — COLUMN × AI
100周年サイトは、読みものの集まりだ。
人物伝、哲学、技術、社会貢献、地域、組織——
テーマの違う独立記事を、これからも増やしながら、ナガシマグループを描いていきます。
あなたが今読んでいるこのページも、その1本です。
長島國治という人間
記事を読む → 哲学なぜ100周年を「やる」のか
記事を読む → 技術・制作裏話AIとの対話から生まれたサイト
いま読んでいるページ 社会貢献730万世帯へ、1冊ずつ届ける
記事を読む → 地域連携38人の6年生がやってきた日
記事を読む → 組織ふたつの源流、ひとつのナガシマ
記事を読む →すべての読みもの、AIと一緒に作っています。
制作プロセスのこだわりは、それぞれの記事の中で語られています。
今は6本。これからも、増えていきます。
AIは道具でしかない。
でも、使い方次第で
100年の歴史を未来に届ける力になる。
— 100周年プロジェクトチーム