DEVELOPMENT JOURNAL
完成品ではなく、
作っている途中を書いている。
中小企業診断士でありながら、自分でコードを書いています。診断・経営ゲーム・予約・認証―― 実際に動くシステムを、ひとりで作り続けている。その設計の判断、つまずき、直し方を、起きた順にそのまま記録したものです。きれいな成功談ではありません。
背表紙はシリーズ名、数字は記事数です。押すと、そのシリーズまで移動します。
SERIES 01
DX経営ゲーム制作記 — 全 49 記事
- 01なぜ私は数週間でオンライン経営ゲームを作れたのか
システム開発の世界に10年以上いる。だから自分が何をしたのか、その異常さがよくわかる。
- 02「製造業の社長になる」ゲームを選んだ理由
最初に考えていたゲームのテーマは、製造業ではなかった。
- 03AIとデータベース設計を1日でやった話
システム開発でいちばん後から修正しにくい部分がある。データベースの設計だ。
- 04最初のプロトタイプが動いた瞬間
開発には必ず「最初に動く瞬間」がある。
- 05ゲームの「ルール」を決めるのが一番難しかった
コードを書くより、ルールを決める方が難しかった。「現金がいくらになったら破産か」「DX投資の上限はいくらか」「市場需要は何個か」——これらは数字に見えて、本質は「どんな学びを生み出すか」という教育設計の問題だ。このプロセスで、3つのルールを
- 06市場シェアを「二乗」で配分するようになった経緯
最初は線形だった。「競争スコアが2倍の企業は、シェアも2倍取れる」——これが最初のシェア配分ロジックだ。しかし、あるテストプレイで問題が発覚した。
- 07DX変革ボーナス×3.0はなぜ3.0なのか
数字には根拠が必要だ。DX変革に成功した企業の競争スコアが3倍になる——この3.0という数字は、1.5から始まり、2.0を試し、2.5を経て、3.0に落ち着いた。
- 089ステップのターン計算エンジンを設計した話
ターンを進めるたびに何が起きるか。これを「処理の順番」として定義することが、ゲームエンジン設計の核心だ。順番が違えば、計算結果が変わる。最終的に9つのステップに整理した。
- 09イベントシステムはこうして生まれた
経営には「予期しない出来事」がある。好景気が来ることもあれば、原材料が高騰することもある。ゲームにこの「不確実性」を組み込むために、イベントシステムを設計した。
- 10140ゲームのシミュレーションでバランスを調整した
「このゲーム、DXに全振りすれば必ず勝てますよね」——テストプレイ後、参加者の一人にそう言われた。研修として失敗だ。ゲームの「最適解」が一つに収束してしまえば、多様な判断の面白さがなくなる。
- 11採用メカニズムを追加したらゲームが変わった
ゲームを公開して数ヶ月が経ったある日、参加者からフィードバックが来た。「生産能力の上限が最初から決まっているのに、増やす手段がない。経営判断の幅が狭い気がする」——的を射た指摘だった。
- 12諸経費を3.5万から1.0万に変えた理由
数字を変えたら、ゲームのバランスが劇的に改善した話だ。
- 13参加者が全員破産したテストゲームから学んだこと
忘れられないテストゲームがある。6ターン目が終わったとき、画面に表示されたのは「全社破産」だった。4社全員が破産した。これは失敗だ。しかし、このゲームから多くを学んだ。
- 14「勝てる戦略」が1つでいい理由
「このゲームはDX投資すれば必ず勝てるんですよね」という言葉を、研修の依頼を検討している企業の担当者から聞いた。この問いに答えることが、ゲームデザインの哲学を伝える機会になった。
- 15本番障害が起きた朝:SIGTERM事件
2026年5月31日、午前9時8分。スマートフォンにGitHub Actionsからアラートが来た。「dxgame.jp — HTTP 200以外を検知」。その日、研修が予定されていた。
- 1635項目全PASSの自動テストをAIと作った
本番環境を更新するたびに、ある不安がある。「前の機能が壊れていないか」——機能を追加するとき、既存の動作に影響を与えることがある。直したつもりが別の場所を壊すことがある。これを手動で全部確認していたら、更新するたびに何時間もかかる。自動テス
- 17ステージングと本番の同一性をどう管理するか
「ステージングで動いたのに、本番で動かない」——これはシステム開発者が最も嫌いな状況の一つだ。この問題を防ぐために、ステージング環境と本番環境の「同一性管理」を徹底している。
- 18GitHub Actionsで死活監視を5分で作った
夜中にサーバーが落ちていたとしても、誰も気づかない。研修の日の朝に「繋がらない」と連絡が来てから初めて知る——これが最悪のシナリオだ。
- 19緊急融資ボタンが研修を救った話
管理者画面に「緊急融資」ボタンがある。破産した会社に対して、政府救済として融資を実行する機能だ。破産しても研修が続けられる——これがこのボタンの存在理由だ。
- 20AIが研修の「先生」になった瞬間
ゲームの途中で、参加者が立ち止まることがある。「DX投資をいくら入れればいいのか、全然わからない」。ファシリテーターが1対1でアドバイスする時間は限られている。「AIを参加者の相談相手にしよう」と思った。
- 21チーム編を1週間で追加できた理由
個人編が完成した後、「チーム編を作りたい」という要望が出た。複数人がチームとして1社を経営する——CEO・CFO・COO・CDO・CMOそれぞれが役割を持ち、提案し、議論し、最終的にCEOが決定する。要件を聞いたとき、正直「これは時間がかか
- 22ドキュメントをAIと修正した話
システムの変更は速い。ドキュメントの更新は遅い。これは多くのシステム開発プロジェクトで起きる問題だ。コードが変わっても、マニュアルや仕様書が追いつかない。DX経営ゲームも例外ではなかった。
- 23モニター体験会を設計した話
システムが完成しても、売れなければ意味がない。最初の課題は「実績がないこと」だ。実績を作るために、無料のモニター体験会を企画した。
- 24DX経営ゲームで参加者は何が変わるか
研修の価値を測るのは難しい。「楽しかった」「勉強になった」というアンケート回答は取れる。しかし「研修を受けた後、実際に何が変わったか」は、数ヶ月後にしか見えない。それでも、体験中の参加者の反応から、いくつかのことは言える。
- 25次はAI経営シミュレーションを作る
このシリーズを書き終えて、DX経営ゲームの制作記を25本振り返った。設計の判断、失敗と修正、AIとの対話、本番障害、テスト自動化——全てのプロセスを記録した。最後に、次に作るものの話をしたい。
- 26初回本番26名開催で見つかった5つのバグ——「本番でしか分からない」の洗礼
研修本番当日にリアルタイムでバグを修正し続けた記録。422エラー・スライダー上限・AI相談404・モーダル構造・alert()の5つ。
- 27アンケートをAIへの設計指示書に変えた——仕様改善提言書の作り方
参加者の感想を具体的な実装案に落とし込む提言書の作成法。エンジニアでなくてもAIと協働できる翻訳スキル。
- 28ターン結果画面に「なぜそうなったか」を動的表示する——静的テキストとの決別
ターン番号固定の定型文から実際のゲーム状態に基づく動的インサイトへ。APIへの新フィールド追加と実装。
- 29DX変革ゲージの設計と実装——「L1を積まないとL3は無意味」を見える化する
L1/L2/L3の進捗バーと閾値マーカーで変革への道を可視化。変革が起きない理由を直感的に把握できるUI。
- 30イベントの影響を「自分ごと」で見せる——「運」を「経営判断」に変える設計
全員共通のイベント説明から参加者のDX状態に基づく個別メッセージへ。イベントを運要素から経営判断の結果に変える。
- 31Playwrightで4デバイス同時UI検証を自動化した——「動いているかどうか」を証明する仕組み
4デバイスで44項目を自動検証。テーブルの実幅をJSで測定し崩れを自動判定する仕組みの構築。
- 32スマホ表示の崩れはなぜ起きるか——テーブル設計の罠と3つの解決策
min-width・nowrap・列数の多さによる崩れの原因と、CSSオーバーライド・ellipsis・列非表示の3解決策。
- 33manifest.jsonを見落とした404の話——「修正した」と「直った」は違う
HTMLから削除したのにmanifest.jsonに残っていたicon参照。エラーの発信源を確認する習慣の重要性。
- 34140ゲームシミュレーションで分かったこと——「DX極振り」は諸刃の剣だった
6戦略×140ゲームの結果。DX極振り1位率63%・破産率25%。攻撃的戦略は100%破産。データでバランスを証明。
- 35自動テストが赤くても、すぐに不具合とは言えない——テスト結果を自分で読む
7件の自動テスト失敗を調べたら、製品バグは0件だった。テストが正しくてもテスト自体が古ければ結果は嘘をつく。
- 36どのファイルをテストするか——正本を決めない検証は意味がない
Dropbox・EC2・手元と3箇所にファイルが存在する状況で、「正本」を定義してから検証を始めるルール。
- 37パソコンで正常でも終わりではない——スマホ幅まで検証する意味
comp-tableとhome-trend-tableのはみ出しをゼロにするまで。コンソールエラーと幅超過件数で合否を判定する。
- 38「利益は出たのに現金がない」をゲームで再現する
製造原価報告書とキャッシュフロー計算書の実装。三帳票の整合性をどう検証するか。
- 39「社員を1人採用する」機能が、画面だけでは完成しない理由
採用フラグと従業員数の違い、スライダー上限の連動、費用計算、テスト境界値まで——1ボタンの裏にある連鎖。
- 40DX投資の効果を「効いた気がする」で終わらせない——動的インサイトの設計
固定テキストを動的表示に変えた。履歴APIにDX累積値を追加し、会社ごとに「なぜそうなったか」を表示する仕組み。
- 41同じイベントでも準備した会社としなかった会社で結果を変える——イベント設計の思想
サプライチェーン攻撃のバグ修正と、条件連動イベントの設計。「運が悪かった」を言わせない仕組み。
- 42経営ゲームのAI相談を「答えを教える機能」にしない理由
GPT-4o-miniに現在の経営状態を渡しつつ、最終判断は参加者に残す設計。ルール早見表との役割分担。
- 43機能が動いても、マニュアルが古ければ開発は終わっていない
参加者画面・仕様書・設計書・マニュアル・テスト仕様の5文書を横断照合した話。整合は一度では終わらない。
- 44未提出者がいても止まらない——フォールバックと巻き戻しを両立する設計
全員が提出しなくても進行できるフォールバックと、誤操作を取り消せる巻き戻し機能を同時に実装した。
- 01二つに分かれた仕組みを、一つに戻す——十八日で本番を上書きする
検証役に立てた別のAIに、要件の文書と実物を突き合わせてもらった。返ってきた判定は受入不可だった。理由を読んで、私はしばらく画面を見たまま動けなかった。指摘は不具合の話ではない。作りそのもの…
- 02AIを、称号ではなく経営資源にする——増幅する側に置く
最初に書いた案を、私は全部捨てた。AIを使いこなした企業に称号を与える案。毎ターンAIの活用度を判定して有利不利を出す案。どれも会議では受けがよかったのに、実装しようとすると必ず同じ壁に当た…
- 03賭けではなく、挑戦と呼ぶ——変革の見返りを作り直す
自分で作ったゲームを、自分で一人で通しで遊んでみた。何度か回して気づいたことがある。変革にはまったく手を出さず、効率化だけを積んだ企業が勝ってしまう。しかも、そこそこ勝つのではなく、圧勝する…
- 04試験が通ることは、終わったことではない——十一回の差し戻し
七十六本の自動試験が全部通っていた。私はその数字を添えて、実装が完了したと報告した。検証役に立てた別のAIが同じ試験を独立に走らせ、同じく七十六本の合格を確認した。それでも判定は差し戻しだっ…
- 05当日、終了ボタンは無かった——四十社六班の本番
開催当日の朝八時。参加は四十社、六つの班に分ける。開始は夕方六時半。前夜までの総点検で、進行が止まる級の不具合は零件だった。私は肩の力を抜きかけていた。
SERIES 02
1cto.jp制作記 — 全 13 記事
- 01noteを使わず、販売サイトを自分で作った理由
記事を書いた。次に考えたのは「どこで売るか」だ。
- 02FastAPIとStripeで認証と決済を1日で実装した話
「認証と決済」——Webサービス開発の中で最も面倒な2つの機能だ。ユーザー管理のミスはセキュリティ事故につながる。決済のミスは金銭トラブルになる。それだけに「外部サービスに任せる」という判断が多い。
- 03Webhook署名検証で422エラーが出続けた2時間の記録
本番でStripeの決済テストをしたとき、購入完了後に記事が読めなかった。Stripeのダッシュボードを見ると「422 Unprocessable Entity」というエラーが記録されていた。
- 04記事コンテンツの設計——価格と無料サンプルの決め方
システムが動いてもコンテンツがなければ売れない。技術の話より先に、「何をいくらで売るか」「何を無料にするか」という設計の話をする。
- 05公開して最初に起きたこと——テスト購入から最初の読者まで
サービスは動いている。記事も入っている。Stripeの設定も終わった。あとは公開するだけだ——と思っていたが、公開直後からトラブルが続いた。
- 01本番Stripeに切り替えた朝に起きたこと
そう思っていた。.envのAPIキーを差し替えてサービスを再起動するだけだ。何も難しいことはない。
- 02Stripeのサブスクを5回テストして学んだこと
これが最悪の状態だ。ユーザーにとって理不尽で、対応に追われるのはこちらだ。サブスクリプション決済は単発購入より状態が多い。テストを重ねて、その複雑さを自分で確認した。
- 03Webhookが届かなくてもサービスを止めないフォールバック設計
ネットワークの問題でリクエストが消えることがある。サーバーが再起動中だと受け取れない。Stripeの側で一時的な障害が起きることもある。「払ったのに読めない」はどれか一つが欠けるだけで起きる。
- 04マイページの解約フローを完成させるまでに詰まった7つのポイント
これだけのことに、7つの問題が隠れていた。解約機能は「簡単に見えて複雑」という代表的な機能だ。
- 05パスワードリセット機能を30分で作った話
後回しにしていた機能だ。メール送信コードが既に存在していた。それだけが理由だ。既存コードの再利用が設計の恩恵になった瞬間だった。
- 0154本の記事を一括でデータベースに投入した話——SCP・Python・psycopg2の連携
1cto.jpのデータベースにはまだ入っていない。ファイルとしては存在しているが、サイトから読めない。1本ずつ管理画面から入力するという選択肢もあったが、54本は現実的ではない。
- 02MarkdownファイルからタイトルとサマリーをPythonで自動抽出する設計
先頭に`# タイトル`という行があり、そのあとに本文が続く。データベースには`title`と`summary`の2カラムがある。ファイルを読んでこの2つを取り出す処理が必要だった。
- 03PowerShellのSCPが日本語パスで詰まった話——WindowsのSSHクライアントとBashの挙動の差
`Bad permissions. Try removing permissions for user: UNKNOWN\\UNKNOWN (Errno: 13 - Permission denied)`
SERIES 03
junka制作記 — 全 8 記事
- 01習い事教室の入退室をLINEで保護者に通知するシステムを作った
「子どもが教室に着いたかどうか、毎回気になるんです」
- 02GASはPOSTリクエストに302を返す——LINE Webhookの罠とEC2プロキシで解決した話
どんなシステムにも、「経験者なら5秒で気づく罠」がある。GAS(Google Apps Script)とLINEの組み合わせには、それが1つある。知らなければ何時間でも詰まる。知っていれば回避に10分かからない。
- 03Google SheetsのDate型に気づかず2日詰まった話
「Sat Dec 30 1899 10:30:00 GMT+0900」
- 04iPad対応:3列グリッドとタブレットUIの設計
習い事教室のタブレットUIを作り始めて、すぐに気づいた。スマートフォン向けのUIをそのまま拡大しても、タブレットで使いやすいものにはならない。
SERIES 04
toi-toi-toi制作記 — 全 28 記事
- 01片づけコーチのLINE予約システムをゼロから作った話
「予約管理で1日のうち何時間使ってると思いますか」
- 02LIFFでLINE User IDを自動取得する——なぜフォームに入力欄を作らなかったか
設計中に、一度だけ変なアイデアが浮かんだ。「フォームに『あなたのLINE IDを入力してください』という欄を作る」という案だ。
- 03GASスプレッドシート予約管理——在庫管理と同じ考え方で枠を設計した
予約システムを作ろうとして最初に悩んだのは、「予約枠をスプレッドシートでどう表現するか」だった。
- 04LINE通知設計:予約確認・前日リマインド・キャンセル通知の3本柱
「設定が終わったので、テストしてみてください」と伝えた。オーナーが予約フォームから試し予約を入れた。数秒後、スマートフォンにLINEの通知が来た。
- 05LP設計——コーチング系サービスのトップページに何を置くか
「自分の写真を使いたくない」という人がいる。顔を出すことへの抵抗感は、コーチやコンサルタントの仕事をしている人でも珍しくない。
- 01サービス種別を4種から6種に拡張した話
リリースから数週間後、オーナーから連絡が来た。「コーチングのセッションも、同じ予約フォームで受けられるようにしたい」という要望だった。
- 02Googleカレンダー追加ボタンの実装と罠——CalendarAppを使ってはいけなかった
「予約した後、Googleカレンダーにも入れられると便利」というフィードバックをオーナーからもらった。確かにそうだ。LINEで通知が来ても、それだけではカレンダーに予定が入らない。
- 03カレンダーURLが長すぎる問題——EC2リダイレクト方式で解決した
オーナー通知のLINEを確認してもらったとき、オーナーからメッセージが来た。
- 04Stripe Payment Links——個人コーチのオンライン決済をどう設計するか
「キャンセルが多くて困っている」という話を聞いたのは、予約システムを公開して少し経った頃だった。予約は来る。しかし当日になって連絡なしでキャンセルになることがある。
- 05予約システムの本番運用から見えてきたもの
「予約、すごく使いやすかったです。予約と同時に案内が届くのも安心感がありました」
- 01予約確定メッセージにお支払い案内を加えた——Square Payment Linksとスプレッドシートの連携
「振込先ってどこでしたっけ」という問い合わせが来た。
- 02管理画面に支払済フラグを1列追加した——スプレッドシートの14列目が変える運用
予約ID、サービスID、サービス名、枠ID、日付、時刻、氏名、電話番号、メールアドレス、LINE UID、ステータス、備考、作成日時。整理されているように見えて、一つだけ足りない情報があった。お金を受け取ったかどうかだ。
- 03LPにBefore・Afterを追加した——写真のCSSと申込率の間にあるもの
「このページのBefore/Afterコンテンツを反映させてほしい」
- 04予約の入り口をLINEに一本化した——11箇所のボタンをLIFF URLに変えた日
LPを見直したとき、「予約する」へのリンクが11箇所あることに気づいた。
- 05訪問とオンラインを別のservice_idにした——金額未確定問題をサービス分割で解決した
「訪問の場合、交通費が確定しないと金額をお伝えできないんです」
- 01Zoom URLを枠に紐付けた——1カラムの追加が7つの関数を連鎖させた
「オンラインレッスンのZoom URLを、予約確認LINEに自動で入れられませんか」
- 02イベント管理をゼロから設計した——新しいシートと新しい申込みフロー
「体験セミナーや講座をイベントとして管理したい。定員があって、満員になったら受付を止めたい」
- 03入金管理ページを作った——スプレッドシートで金の流れを追う
予約が入る。お客様が銀行振込をする。オーナーが通帳を確認する。スプレッドシートを開いて「支払済」と手入力する。お客様に「ご入金確認しました」とLINEを送る。
- 04'-'は'/'より小さい——日付フォーマット不一致で全イベントが過去扱いになった
イベント管理機能をデプロイした直後、イベントが1件も返ってこなかった。
- 05LIFFがURLを書き換えた——type=eventが消えるまでの追跡
Codexがブラウザで `/reserve?type=event` を開いた。
- 01保存ボタンが画面の外にあった——縦長モーダルとstickyフッター
管理画面のスクリーンショットが届いた。イベントの編集画面。日付、時間、所要時間、イベント名、説明、定員、参加費、決済URL、Zoom URL、アンケートURL。入力欄が縦にずらりと並んでいる。
- 02×ボタンが押せなかった——書いていないスタイルが、漏れていた
スマホのメニューを作った。右上のハンバーガーを押すと、右からメニューが滑り込む。コンセプト、片づけ、コーチング、プロフィール。上に「×」の閉じるボタン。標準的なやつだ。
- 03AIに引用される文章を、ページの裏に書く——FAQPageという構造
検索対策をしてほしい、と頼まれた。SEO。それと、AIO。
- 04誰でも、なりすませた——Webhookに署名がなかった話
自分の書いたコードに、別のAIを当てた。Codexにセキュリティ監査をさせる。リリース前の、最後の確認のつもりだった。
- 05既定値のまま動いていた——本番を止めずに鍵を入れ替える
ADMIN_PASSWORD = os.getenv("TTT_ADMIN_PASSWORD", "toitoi2024admin") GAS_ADMIN_SECRET = os.getenv("GAS_ADMIN_SECRET", "ttt-gas-admin-2024-secret")
SERIES 05
AiReview制作記 — 全 4 記事
- 01TypeFormとGASで事業計画書AI添削システムを作った話
「講師が一人ひとりの計画書を丁寧に見る時間は限られています」
- 02Gemini 2.5 Flashで長文レポートを生成する——プロンプトエンジニアリングの実際
Geminiは確かにレポートを返してきた。整った文章で、項目ごとに分かれていた。文字数は800字ほどだった。
- 03TypeFormのWebhookリトライとGASの同時実行——重複メール問題の原因と解決
受講者からの連絡だった。「添削レポートが2通届きました」。
- 04Flex版設計:講座に依存しない汎用AI添削エンジンの作り方
別の市の創業塾からの依頼が来たとき、まずA版のコードを開いた。
SERIES 06
AIFlex制作記 — 全 3 記事
- 01汎用版AI添削システムを作った理由と2フォーム構成
そう連絡が来たとき、最初にやったのはコードのコピーだった。AiReview.gsを丸ごとコピーして、設定値3か所を書き換えた。AiReview_B.gsの完成だ。
- 02スプレッドシートをキューとして使い、GASの30秒制限を回避する
GASは30秒でタイムアウトする。TypeFormは30秒以内にHTTP 200が返ってこないとWebhookをリトライする。Geminiは事業計画書の添削に1〜3分かかることがある。
- 03重複メールが送られた原因を2段階で特定した話
添削フォームを送信したユーザーに、同じ添削レポートが2通届いた。1通は想定内、2通は不具合だ。Queueシートを見ると、同じevent_idの行が2件存在していた。2行ともDONEになっていた。
SERIES 07
Fuhne制作記 — 全 6 記事
- 01完全予約制焼き菓子店のLINEお取り置き注文システムを作った話
その店はそういう焼き菓子店だ。その市で手作りのタルトと焼き菓子を、完全予約制で販売している。注文は日曜の0時から木曜の12時まで。それ以外の時間は受け付けない。週に一度だけ開く扉を守るためのルールだ。
- 02注文受付期間と枠上限の実装——時間と件数で注文を制御する
Instagramで告知を読む、ということも一つだ。しかしそれはお客さんが自分で確認しなければならない。システムならば、確認するまでもなく「今は注文できません」と表示できる。焼き菓子店のシステムが実現すべき最も重要なことがここにあった。
- 03管理画面に商品写真登録機能を追加した話——GASのDriveスコープとbase64アップロード
「商品写真も管理画面から登録できるようにしたい」というリクエストが来た。
SERIES 08
jiji制作記 — 全 6 記事
SERIES 09
TRYWORKS制作記 — 全 4 記事
- 01エアコン洗浄パートナービジネスのWebサイトをAWS S3+CloudFrontで作った話
「ある大学の先生が実験データを出してくれたんです」
- 02GASで資料請求フォームを実装——Formspreeから自作への移行
Formspreeはフォームのaction属性に専用URLを設定するだけでメールが届くサービスだ。設定は簡単だ。その施工会社のウェブサイトを最初に作ったとき、とりあえずFormspreeで動かした。
- 03スパム対策:ハニーポット・日本語チェック・電話番号バリデーション
スプレッドシートに「jdnskndskjn」という名前の問い合わせが届いた。
- 04車種別施工マニュアルシステムの設計——加盟店と本部が共有するナレッジ基盤
「この車種、どこからフィルター取り出すんでしたっけ」
SERIES 10
AiInterview制作記 — 全 6 記事
SERIES 11
simpleRec制作記 — 全 3 記事
- 01顔認証SaaSをゼロから作った話——AWS Rekognition・FastAPI・Google Sheets
その言葉から始まった。店舗の防犯と来店マーケティングを目的とした顔認証SaaSを、シンプルシステム株式会社の自社プロダクトとして作ることにした。
- 02TP-Link VIGIカメラからWebhookでスナップショットを受け取る——ファイル名なしmultipartの罠
422 Unprocessable Entity。
- 03Docker + Nginx + Let's Encrypt——EC2上の本番環境構築
FastAPIの認証処理がpasslibで書いてある。ログインしようとすると失敗する。ライブラリのバージョン問題だった。passlibとbcryptの最新版の間に、互換性の問題が起きていた。
SERIES 12
masakiyumi制作記 — 全 5 記事
- 01白で建て直す——画家のサイトに何を残し、何を捨てるか
「Coolな感じで。テーマカラーは赤・黒・白」
- 02作品が、拡大しなかった——HTMLの置き場所がすべてだった
ギャラリーに並べた絵をクリックすると、暗い背景の上に作品が大きく開く。ライトボックスというやつだ。コードは書いた。動くはずだった。
- 03縦も横もあるチラシを、切らずに並べる——object-fitの選択
画家のサイトに、これまでの個展のチラシを並べたい。送られてきたのは六枚の画像だった。
- 04メールだけは、止められない——ドメインを移すときのMXレコード
サイトはできた。あとは公開するだけだ。`example-gallery.jp` を、自分のEC2に向ける。
- 05HTTPSと、AIに読まれる構造——セカンダリDNSを待った夜
Aレコードが新しいサーバーを指した。次はHTTPSだ。`https://example-gallery.jp` を、鍵のかかったアドレスにする。
SERIES 13
AI_DX制作記 — 全 35 記事
- 01「AIを入れたい」とは、誰も言っていなかった——何を売る事業なのかを、最初に決める
中小企業の社長さんと話していて、「うちもAIを導入したいんですよ」と言われたことは、実はほとんどない。
- 02無料で、出し惜しみしない——有料の理由は、別の場所に作る
無料診断を作っていて、いちばん悩んだのは「どこまで無料で出すか」だった。
- 03決めてもらうのは、一段につき一つだけ——価値の階段をどう刻むか
人は、一度にたくさんのことを決められない。
- 049,800円が「無料の続き」に見えた——有料商品を、作り直した話
最初に作った有料商品は、九千八百円の「AI実行プラン」だった。
- 05数字で信頼を失わないために——AIに、金額を計算させない
AIを使った診断サービスを作っていて、いちばん最後まで気を抜けなかったのは、数字だった。
- 01自動化したのに、自分の時間が減らなかった話
無料診断は動いていた。三分で「あなたの会社の業務は、AIや自動化に向いているか」をざっくり返す入口をつくり、その先に詳細診断を置いた。業務量や所要時間を入れてもらえば、現在の工数、効果の見込み、最初に試すべき一件、検証のやり方まで出る。さらにその先には、稟議に使える有料の設計書を生成する仕組みまで組んだ。
- 02作業ではなく「判断」を自動化する
頭の中にある判断を、製品の側に移す。言うのは簡単だが、いざやろうとすると、自分が何を基準に決めているのかが、まるで言葉になっていないことに気づいた。
- 03人のレビューを、標準工程から外す
いちばん勇気がいったのは、品質チェックの扱いだった。
- 04無料相談を、やめた
この再設計で、自分でも意外だった決断がある。無料相談をやめたことだ。
- 05「無人で安全に回せるか」を設計の真ん中に置く
第2部を通してやってきたことを、最後に一つの問いにまとめておきたい。
- 01入口を広げすぎていた——「誰でもAI」をやめ、一つの業務に絞った日
無人ファネルを作ると決めて、まず自分の診断の入口を、もう一度開いてみた。
- 02連絡先は、価値を見せてから訊く——メール取得を一段あとへ
診断のフォームを作っていて、ずっと迷っていた一点があった。メールアドレスを、どこで訊くか、だ。
- 03「読めるか」を、その場で確かめてもらう——無料10件検証を実体験にした
ある相手から、こう訊かれたことがある。「うちの注文書で、本当に動くんですか」。
- 04売れる、と、無人で出していい、は別だった——適合判定エンジンを入口に置く
ある問い合わせを見て、背筋が少し冷えたことがある。
- 05面談ボタンを、入口から外しきる——例外だけを審査に回す
無料相談をやめると決めたのは、第2部で書いたとおりだ。ただ、決めることと、入口から外しきることの間には、まだ距離があった。
- 01AIの仕事と、ロジックの仕事を分けた——構造化出力という堀
成果物を自動で作る仕組みを組んでいて、一番神経を使ったのは、AIにどこまでやらせるか、という線引きだった。
- 02根拠のない結論は出さない——回答ID・資料箇所・計算式を残す
成果物が形になってきた頃、自分でそれを読み返していて、ふと不安になった。
- 03商品も価格も、コードに埋めない——版を固定して後から再現する
前の回で、適合判定の話の最後に、版を固定する、と書いた。今回はその中身だ。
- 04AIに任せない仕事を、先に決める——禁止領域と、間違いの捕まえ方
自動化を進めるほど、逆に「ここはAIに任せない」という線を、はっきり引く必要が出てきた。
- 05既にあるものの上に建てる——AIInterviewという土台
技術の堀、と大げさに書いてきた。けれど正直に言えば、その堀の多くは、新しく掘ったものではない。
- 01課金・個人情報・成果物を、最初に守る——P0の決め方
集客を増やす前に、何から作るべきかを、紙に書き出した夜があった。
- 02他人のIDで、他人の成果物は開けない——所有権とテナント分離
自分で作った仕組みに、わざと攻撃を仕掛けてみたことがある。
- 03同じ通知が二度来ても、二重に作らない——冪等性とWebフック署名
一件の支払いなのに、システムには二つの通知が来た。あやうく、同じ成果物を二つ作り、二重に請求しかけた。決済の世界では、こういうことが普通に起きる、と後で知った。通知は、一回だけ来るとは限らない。その前提が、私には抜けていた。
- 04止められること・消せること——停止と削除を製品機能にする
ある時、自分でも見落としていたことに気づいた。始め方ばかり作って、終わり方を作っていなかった。
- 05人は一つのキューだけを見る——例外センターという守りの最後
無人化を進めても、消えないものがあった。例外だ。
- 01代表者の時間を、売上の従属変数にしない——容量設計という考え方
最終部を書くにあたって、もう一度、あの計算をした。契約が一件増えると、自分の時間が何分増えるか。
- 02一件のお客様から、何度も——マネタイズを複線にする
売上を分解していて、ある弱点に気づいた。単発で、終わっていた。
- 03無人で完了した割合を、経営指標にする——KPIの組み替え
売上のグラフを眺めていて、あることに気づいた。この数字を見ても、肝心なことが分からない。
- 04一度に全部は自動化しない——一つの勝ち筋から広げる
設計書には、たくさんの業務が並んでいた。注文処理。問い合わせ対応。報告書作成。日報整理。どれも、自動化できる。
- 05増やさない、という戦い方——一人CTOがたどり着いた設計
第1部のあの夜から、ずいぶん長く書いてきた。最後に、ここまでの全部を、一度ふり返っておきたい。
- 01広告を出して、分かったこと——買う人は、検索していなかった
旗艦シリーズを一区切りにしたあと、私は電卓ではなく、広告の管理画面を見つめていた。表示回数は、九百ほど。クリックは、三十数回。そして、申し込みは、ゼロだった。
- 02同じ悩みを、違う入口から売る会社——痛みで入り、答えを後から出す
広告を止めたあと、私は自分と同じ領域の会社の広告を、片っ端から開いていった。相手がどう売っているのかを、見ておきたかった。その中に、手が止まる一枚があった。
- 03「AI内製」を、主役から降ろした——入口の言葉と、検索の言葉は違う
私の診断の入口には、ずっと「AI内製」という言葉が、いちばん大きく置いてあった。自社の仕組みを、外注しきりにせず、AIを使って自分たちで作り直す。事業の核を、そのまま見出しにしていた。それを、外すことにした。
- 04「あの人が辞めたら、誰も分からない」——痛みを、一つに定める
支援機関の相談の場で、私は何度も、同じ言葉を聞いてきた。業種が違っても、規模が違っても、経営者の口から出てくるのは、だいたい同じだった。「あの人が辞めたら、あの仕事は、もう誰も分からない」。
- 05需要を、感覚でなく数字で確かめた——市場を、公的データで検証する
一度、広告で手ひどく外した。だから今度は、「これはいい痛みだ」と思い込む前に、公的な数字を、机の上に並べてみた。感覚のいい話ほど、数字で裏を取る。その順番を、守ることにした。
SERIES 14
帳票AI読取制作記 — 全 7 記事
- 01FAX注文書4社4フォーマット——AI読取で手作業転記をなくす
4社の取引先から、それぞれまったく違う書式で。月間カレンダー形式、着日指定のグリッド形式、店舗別混在形式、丸印で数量を示す形式。担当者は4種類の帳票を読み解いて、1行ずつ手でシステムに入力する。
- 02FastAPI + PostgreSQLで読取結果を管理する設計
FAX1枚が「注文書」であり、その中に複数の「明細行」がある。
- 03Claude Visionで帳票を読む——4種の帳票と精度の違い
4社の本物の帳票をClaude Vision(claude-opus-4-8)に読み取らせて、結果を確認した。「精度は帳票によって大きく違う」という予想は当たっていた。どの帳票が得意で、どこで失敗するか。実験の記録を残す。
- 04確認画面のUX設計——信頼度・要確認フィルタ・一括OK
「正しく読めているか見る」作業と「間違いを直す」作業だ。この2つは性格が違う。前者は速くできる。目でざっと追って「OK」を押せばいい。後者は集中が必要だ。元の帳票画像を見て、数値を確認して、修正する。
- 05複数画像対応——サムネイルストリップとモーダルナビ
1枚目にカレンダー表、2枚目に備考、3枚目に追記。こういう帳票を「まとめて1つの注文として処理したい」という要件は当然だ。1枚ずつ別の注文として登録して後からまとめる、という操作は担当者には頼めない。
SERIES 15
現場の実装ノート — 全 10 記事
- 01「-」は「/」より小さい——日付を比べたら、全部が過去になった
ある朝、予約システムを使ってくれている方から連絡が来た。「イベントが、全部消えています」。
- 02保存できない長文——URLに、載せすぎていた
「長い感想を入れると、保存できないんです」。
- 03公開APIから、見えてはいけないURLが漏れていた
自分の作ったシステムに、わざと外から触ってみたことがある。
- 04直したのに、変わらない——キャッシュという落とし穴
「直したはずなのに、変わらないんですけど」。
- 05×ボタンが、押せない——グローバルなCSSが漏れていた
スマホ用に、画面の横から出てくるメニューを作った。開くアニメーションも、項目の並びも、閉じるための×印も、思った通りに表示されている。なのに、その×が押せない。タップしても、何も起きない。閉じられないメニューほど、間抜けなものはない。
- 01「4」は、数字じゃなかった——全角のまま、計算に混ざっていた
四百件の出荷データを、一括で別の形式に変換する。そういう処理を動かした朝だった。件数も多いし、手作業では追いつかない。だから自動でやる。動かして、出てきたファイルを開いて、血の気が引いた。
- 02住所は知っているのに、都道府県だけ空欄だった——足りない一項目を、自分で補う
出荷伝票を自動で作る処理を組んでいた。注文のデータから、宛先や品名を伝票の形に並べ替えて出す。出てきた伝票を、指定のフォーマットに通そうとしたら、弾かれた。
- 03送ったはずの合図が、消えていた——経路の途中で、情報は落ちる
予約ページに、二つの入口を作っていた。ひとつは通常の予約、もうひとつはイベントの予約。同じページを使い回し、リンクに「これはイベント用」という合図を一つ付けて、開いたときに切り替える。そういう仕組みだった。
- 04同じ申込が、二回届いた——二度押される前提で、作り直す
「確認のメールが、二通来ました」。お客様からそう言われて、記録を見た。たしかに、まったく同じ申込が、ほんの一秒ほどの差で、二件並んでいた。
- 05時刻だけのはずが、百年以上前になっていた——表計算が覚えている、見えない日付
受け取り希望の時間を、お客様に選んでもらう。「13:00」とか「16:30」とか。それを表計算シートに記録して、あとで通知に載せる。単純な話のはずだった。
SERIES 16
地域ニュースポータル制作記 — 全 5 記事
- 01紙の地域情報を、ポータルに作り替える——何を載せる場所かを、先に決める
長く続いてきた地域の情報紙がある。町のできごと、店の話題、暮らしの知らせを、紙で届けてきた媒体だ。その会社から、Webサイトを新しくしたい、と相談を受けた。
- 02一つのサーバーが、サイトもAPIも画像も返す——小さく保つという選択
サイトの中身が決まると、次は動かす仕組みだ。記事を出すAPI、広告を受け付ける入口、投稿された画像の置き場。役割で数えると、けっこうな数になる。
- 03広告は、載る前に一度止める——外から入るものは、既定で世に出さない
広告主が、自分で広告を投稿できる。この入口を作るとき、いちばん時間をかけたのは、投稿された広告を「すぐには載せない」仕組みだった。
- 04二つ目のワーカーが、ログインを弾いた——状態をプロセスの中に持つと、増やせない
管理画面のログインは、あっさり動いていた。パスワードを入れると入れて、しばらく操作でき、時間が経つと切れる。試したときは、何の問題もなかった。
- 05編集部に、AIを八つ渡した——賢さより、外さないことを設計する
サイトが動きはじめてから、編集部の仕事を軽くするために、AIをいくつか組み込んだ。数えると、八つになった。派手な一つの機能ではなく、日々の作業のあちこちに、小さく差し込んでいった。
SERIES 17
卸売受注AI制作記 — 全 4 記事
- 01電話の注文を、手を触れずに取り込む——「毎回の手作業ゼロ」という絶対条件
ある食品の卸に、社内で使うシステムを作ることになった。注文は、いまも電話で来る。年末になると、朝から鳴りっぱなしになるという。受けた注文を紙に書き、あとでまとめ直し、出荷の指示に回す。この流れが、繁忙期に人を疲れさせていた。
- 02その業界でしか通じない言葉を、AIに教える——聞き取りを、注文の形に直す
録音を文字にするところまでは、すぐ動いた。問題は、その文字を、注文として使える形に直すところだった。
- 03AIが作るのは、下書きまで——最後は、人が確かめる
電話の録音から、注文が自動で立ち上がる。ここまで来ると、いっそ出荷まで一気に流したくなる。人の手を、一つも介さずに。
- 04箱を撮る、動画で流し撮る——出庫を、写真から記録する
注文の取り込みと並んで、もう一つ頼まれたのが、出庫の記録だった。倉庫から品を出すとき、何を、いくつ出したかを残したい。これまでは、伝票を見ながら手で書き写していた。
SERIES 18
支援ナレッジ検索制作記 — 全 3 記事
- 01溜まった相談履歴を、逆引きできるようにする——探せない記録は、無いのと同じ
ある支援機関から相談を受けた。担当者が、地域の事業者を回り、経営やデジタル化の相談に乗る。その記録が、長年にわたって溜まっている。日付、事業者、相談の内容、使った道具、解決したかどうか。膨大な現場の知恵だ。
- 02記録の負担を、AIに肩代わりさせる——提出したら、空欄が埋まっている
条件から相談履歴を引けるようにすると、次の壁が見えてきた。その条件を、誰が入力するのか、という問題だ。
- 03大きいファイルは、置いてから渡す——五メガの、見えない境目
素材からAIに項目を起こさせる機能は、短い音声や小さな画像では、気持ちよく動いた。提出すると、すぐに欄が埋まる。うまくいった、と思った。
SERIES 19
出荷データ変換制作記 — 全 4 記事
- 01二つのサービスの間に、翻訳機を置く——毎日の手作業を、変換に置き換える
あるネット販売の事業者から相談を受けた。注文は販売サイトに溜まる。発送は配送会社の仕組みに入れる。この二つが、つながっていない。
- 02Excelで開くと、先頭のゼロが消える——ツールは正しく、道具が壊していた
変換ツールが動きはじめてすぐ、報告が来た。「電話番号の、先頭のゼロが消えています」。注文番号も、桁が足りない。せっかく変換したのに、肝心の番号が壊れている、という。
- 03列の位置ではなく、見出しの名前で探す——仕様変更に、強くしておく
帰りの翻訳機、つまり追跡番号を販売サイトの側へ書き戻す道具を作るとき、最初は素直に組んだ。何列目に注文番号があり、何列目に追跡番号がある、と位置で決め打ちして、そこへ書き込む。
- 04数になった注文番号は、もう突き合わせられない——ゼロ件の裏に、桁落ちがあった
帰りの翻訳機を、いろいろな形のデータで試していた。見出しの名前で列を探す作りにしたので、多少の違いは吸収できる。ほとんどの形で、追跡番号は正しく書き戻せた。
SERIES 20
データ層引っ越し制作記 — 全 5 記事
- 01表計算が、だんだん遅くなってきた——数年分の記録が溜まった先で
ある習い事教室の、入退室のお知らせの仕組みを、数年前に作った。子どもが教室に着くと、タブレットで名前を押す。すると家族のスマホに、着きましたと届く。帰りも同じ。小さな仕組みだが、毎日使われている。
- 02画面は、一つも変えない——裏側だけを、こっそり入れ替える
引っ越しを始めるとき、自分に一つ縛りをかけた。使う人が触る画面は、一つも変えない。タブレットも、管理画面も、家族に届くお知らせも、これまで通り。変えるのは、その裏でデータを出し入れしている部分だけにする。
- 03パスワードを、作り直させない——引っ越しで、家族に何も頼まない
引っ越しで、いちばん気を遣ったのが、ログインのパスワードだった。教室のオーナーは、それぞれ自分のパスワードで管理画面に入る。裏側を入れ替えたとき、そのパスワードが使えなくなったら、全員に作り直してもらうことになる。
- 04お知らせの受け口を、自分の側に持つ——仲介役を、一つ減らす
この仕組みでは、家族が使うメッセージアプリを通じて、二つのことをしている。一つは、着きました・終わりました、というお知らせを送ること。もう一つは、家族からの登録や停止の連絡を、受け取ることだ。
- 05たった一つのファイルを、守る——表計算をやめて、背負った責任
引っ越しが終わって、一つ、はっきりと変わったことがある。これまでデータは、クラウドの表計算にあった。オーナーも中を見られたし、いざとなればそこに残っていた。引っ越し後、データは、自分たちのサーバーの中の、一つのファイルにまとまった。
SERIES 21
SNS自動投稿制作記 — 全 5 記事
- 01投稿が続かない、を仕組みで解く——文章と画像を、機械に任せるまで
ある施工サービスの会社から、SNSでの発信を増やしたいという相談を受けた。伝えたいことは二つある。一つは、施工を頼みたい人に向けた案内。もう一つは、一緒に施工を担ってくれる仲間の店を増やす募集だ。どちらの投稿も、その先には公式のメッセージアプリやサイトの窓口が待っている。
- 02全部は、自動にしなかった——最後の一目だけ、人に残す
下書きを自動で作る仕組みはできた。次に決めるのは、その下書きを誰が世に出すかだ。技術的には、生成から投稿まで人を挟まず全自動にできる。実際、最初はそのつもりで作り始めた。けれど途中で立ち止まり、一か所だけ人を残すことにした。投稿する直前の、承認だ。
- 03撮影せずに、動画を作る——一枚目が、白紙だった話
SNSでは、静止画より短い動画のほうが人に届きやすい、と言われている。ただ、動画には撮影という壁がある。現場は毎日忙しく、撮影を頼める体制はない。手元にあるのは、施工の前と後の写真と、現場の写真が数枚だけ。
- 04ボタンの向こうで、時間切れ——重い仕事は、受付と分ける
承認画面には、動画をその場で作り直すボタンを付けてあった。ある日、それを押すと、しばらく待たされた末にエラー画面が出た。時間切れ、という素っ気ない表示。何度押しても同じだった。
- 05反応の数字を、次の投稿に返す——届く投稿と、効く投稿は違った
投稿が自動で続くようになると、次の関心は、どの投稿が効いているのかに移る。感触で語ることはできる。けれど感触は、たまたま目にした一件に引きずられる。数字で見たかった。一人で回している仕組みだからこそ、判断の根拠は、自分の感覚の外に置いておきたい。
SERIES 22
ギャラリーEC制作記 — 全 4 記事
- 01小さな画廊に、売り場をつくる——決済の準備を待たずに、店を開けるまで
ある観光地の、有名な名所のすぐそばに、小さなギャラリーがある。色彩を専門にしてきた店主が、絵画や工芸品を展示して売る店だ。サイトはすでにあった。既製のホームページ作成サービスで作られたもので、店の紹介としてはよくできている。ただ、そこには売り場がなかった。作品を気に入った人が、その場で買う手段がないのだ。
- 02冷たい、と言われた——立派なお手本ほど、正しいとは限らない
七月の頭、デザインを大きく作り替えた版を見せた日のことだ。世界的に有名なギャラリーのサイトを手本に、余白をたっぷり取り、色をほとんど消した、真っ白でミニマルな画面。我ながら垢抜けたと思っていた。返ってきた言葉は短かった。冷たい、いまいち。その日のうちに撤回した。
- 03店主が、自分で更新できるように——サーバーに縛られない管理のかたち
サイトの公開から一週間ほどたったころ、作りを左右する話がひとつ決まった。このサイトは、将来、いまのクラウドから格安のレンタルサーバーへ引っ越す可能性があるという。ならば、特定のサーバーの機能に寄りかかった作りにはできない。そしてもう一つ。作品の入れ替えや展示の告知は、制作側を経由せず、店主が自分の手でできるようにしたい。頼まれるたびに私が動くのでは、更新はいつも後回しになる。この二つを同時に満たす方法を考えた。
- 04見せ方と、売り方のあいだ——ギャラリーらしさと、買いやすさの綱引き
一度、作品一覧のカードを、美術館のラベル風に作り替えたことがある。中央寄せで作品名と作家名だけを静かに置き、価格は小さく、カートに入れる、の文字は控えめなテキストに。売り場の気配をあえて薄めて、展示室の空気に寄せた。ギャラリーなのだから、売り込みがましくない方が上品だろう、という判断だった。だが、それは作り手の思い込みでもあった。
SERIES 23
記事配信制作記 — 全 4 記事
- 01新着を、待たずに届ける——既存サイトはそのまま、裏側だけ足す
ある地域情報紙から、相談を受けた。サイトに載せた新着記事を、メッセージアプリの公式アカウントにも流したい。読者が毎日サイトを見に来てくれるとは限らない。向こうから届けば、読まれる機会は増える。ただし、いま動いているサイトには手を入れたくない、という条件付きだった。長年動いてきたサイトである。触らずに済むなら、それに越したことはない。この制作記は、その配信の仕組みを設計し、作り、動かすまでの記録だ。
- 02「記事」という分類は、使われていなかった——0件の謎を追う
仕組みの骨組みができて、試運転を始めた。実際には送信せず、取得と整形だけを試す空振りの運転で、まず対象の記事が正しく拾えるかを確かめる。対象は、サイトの区分でいう記事・告知・求人・連載・特集の五つ。伝言板だけは除く取り決めだ。ところが、記事の分類で絞り込んで取得すると、返ってくるのが0件。サイトには今日も新しい記事が並んでいるのに、である。
- 03全自動を、やめる——配信の前に、人の目を通す
新着を拾い、カード型のメッセージに整え、自動で配信する。そこまで動くようになった稼働の直前で、立ち止まった。本当に、拾ったものを無条件に送っていいのか。相手は情報紙の公式アカウントで、届いた瞬間に読者のスマホが鳴る。間違いは取り消せない。完成間際の方針転換にはためらいもあったが、確認と承認を挟んでから配信する形に変えると決めた。あわせて、送る記事の種別を選べるようにしてほしい、という要望にも応えることにした。
- 04動かして、はじめて分かる——実機確認の報告に応える
本番稼働からしばらくして、クライアントから動作確認の報告が届いた。丁寧に試してくれた形跡のある、具体的な報告だった。不具合が二件、要望が一件、それに気になる点が一つ。作った側の試験では見えなかったものが、使う側の目には最初の数日で見えている。ありがたい報告である。一つずつ応えていった。
SERIES 24
デジタル模型制作記 — 全 5 記事
- 01画面の中で、模型を組む——最初の壁は、技術ではなく権利だった
2026年、私はパソコンの画面の中でプラモデルを組んでいた。マウスでパーツをつまみ、所定の位置まで運ぶと、カチッと音がして嵌まる。左には設計図があり、いま組むべき工程の番号が金色に光る。起動すると、箱を開ける演出まで付いている。誰かに売るものではなく、思いつきを形にしただけの試作品だ。それでも、画面の中で模型が組み上がっていく感触には、妙な手応えがあった。
- 02難しさは、パーツの数で作る——増やすのではなく、束ねる
権利フリーの方針を決めたあと、要件定義を書いた。軸に据えたのは「難易度はパーツの数で作る」という一行だ。試作の画面で百個近いパーツを眺めながら考えていた。初めての人にこの数は多すぎるし、慣れた人に十個では物足りない。同じ題材を、易しくも難しくも遊べるようにしたい。
- 03平面を捨てて、立体へ——パズルに見えたものを、模型に変える
遊びの骨格は通った。難易度も、コレクションも、壁紙も動く。それでも、触るほどに一つの引っかかりが育っていた。これは模型というより、平面のパズルに見えるのではないか。絵合わせと模型の間には、埋めがたい溝がある。平面のまま、どれだけ見た目を磨いても、その溝は越えられない気がした。思い切って、本物の立体に踏み込むことにした。
- 04リアリティは、アセットで決まる——描画ではなく、素材が本物をつくる
立体になったのは良かったが、まだ玩具に見える。「実物そのものと見紛うくらいでないと、売り物にはならない」。そう突きつけられて、私はしばらく描画の設定をいじり続けた。光の当て方、影の濃さ、映り込み。数字を細かく詰めれば詰めるほど本物に近づくはずだと、そう思い込んでいた。だが、いくら詰めても、玩具は玩具のままだった。
- 05写真から、自分だけのキットを——手元の宝物を、模型に変える構想
ここまでは、こちらが用意した題材を組む話だった。最後に、この試作でいちばん賭けている構想を書く。使う人自身の写真から、その人だけの模型を作る。棚に飾った思い出の品でも、可愛がっている乗り物でも、自分の手元にあるものが、画面の中で組み立てられるキットに変わる。目指しているのは、そういう遊びだ。
SERIES 25
DBなしブログ制作記 — 全 4 記事
- 01データベースを使わずに、ブログを持つ——月百円の器に、身の丈で収める
ある在宅訪問の管理栄養士から、サイトに栄養コラムを載せたい、と相談を受けた。作って終わりではなく、これから先、本人が思い立ったときに自分で書き足していける形にしたい。小さな事務所だ。維持費は極力かけたくない。この二つの条件が、作りの前提を最初から決めていた。ブログという、ありふれた機能を、どれだけ身軽に持てるか。そこが勝負だった。
- 02書いたら、静的なページに焼く——見る側は速く、書く側は普通に
データベースを使わないと決めたあと、次の問いは「見せ方」だった。記事を毎回その場で組み立てて返す作りにすると、閲覧のたびにサーバーが働く。安い器では、それが遅さや不安定につながりやすい。訪問の合間にスマホでコラムを開く人に、待たせたくはない。そこで選んだのが、書いた瞬間に、表示用のページをあらかじめ作り置きしておく方式だった。
- 03引っ越せる身軽さと、自前の入り口——どのサーバーでも、同じ手順で
安い器で始めたが、事業が育てば、いずれ上位のサーバーへ移りたくなるかもしれない。そのとき、いまの作りが特定のサーバーの機能に根を張っていると、引っ越しは難儀する。だから最初から、どこへでも持っていける身軽さを設計に織り込んだ。あわせて、管理画面の入り口である認証も、外の仕組みに頼らず自前で用意した。この二つは、別々のようでいて、同じ「縛られない」という一本の方針から出ている。
- 04写真は、二段構えで安全に——差し込みやすさと、守りを両立する
ブログで一番気を遣ったのは、写真の扱いだった。栄養コラムなら、料理や食材の写真が主役になる。記事の頭に大きく一枚、本文の途中にも何枚か。書く人が迷わず差し込めて、なおかつ、危ない使われ方をしない。この二つを同時に満たすのが、思いのほか難しい。手軽さに寄せれば穴が空き、守りに寄せれば使いにくくなる。その綱引きの記録だ。
SERIES 26
個人サロンLP制作記 — 全 4 記事
- 01一枚だけの、店のページ——予約は、外にお願いする
小さな個人サロンの経営者から、お店のウェブページを作ってほしいという相談を受けた。話を聞くと、最初は無料のサイト作成の道具を使って自分で組もうとしたが、思うようにならず、それなら任せたい、というかたちで来た。要望は三つあった。地図と、メニューの一覧と、雰囲気の分かる写真を載せたい。予約はすでに公式のメッセージアプリを使っているから、それはそのまま活かしたい。予算はあまりかけたくない。
- 02画像を、ページの中に貼り込む——一つのファイルに、店の景色を閉じる
ページの中身が形になってきたところで、写真の扱いに手をつけた。経営者から受け取った写真は、店内の様子と、施術の場面と、使っている道具の三種類、合わせて数枚あった。これを、ページの一部として、そのまま並べたい。ふつうなら、写真はページとは別のファイルとして持ち、ページを開いた側の機械が、写真を後から取りに来る。その取りに来る回数を、できるだけ減らしたかった。
- 03検索から来ない人にも、届く工夫——ページの裏に、店の情報を書き添える
一枚のページが形になった。あとは、このページを誰にどうやって見つけてもらうか、を考える段になった。地域の小さな個人サロンでは、検索の結果で目立つ位置を取るのは難しい。強い会社が上に並んでいて、そのすぐ下に個人の店が食い込むのは、なかなか厄介だ。ならば、検索の結果に入り込めなかった人にも、店にたどり着いてもらう道を、いくつか作っておこうと考えた。
- 04静かなインスタ——生きた埋め込みを、あえてやめる
お店のページには、SNSの最新の投稿をそのまま表示するかどうか、いつも悩ましい問いがある。開いた人に「今も生きているお店だ」と伝わりやすいし、更新の手間もない。ただ、その気軽さの裏には、いくつかの割に合わない負担が隠れていた。今回のお店では、生きた埋め込みをあえてやめて、静かな写真を三枚だけ置く形にした。
SERIES 27
公開前検証制作記 — 全 5 記事
- 01正常に動くことを確かめても、出せなかった——壊れ方を、先に作る
画面いっぱいに、通過の文字が並んだ。二十八件、失敗ゼロ。利用者が画像を送り、AIが立体のデータを組み立て、手元に届くまでの道筋が、ひととおり動いた。それでも、公開の手を止めた。動くことは確かめた。けれど、動かなかったときにどうなるかを、まだ何も確かめていなかった。
- 02終わった記録は、書き換えさせない——守りを、アプリの外側に置く
仕上がった一件ぶんの記録を眺めていた。どの画像を材料にしたか、どの道具のどの版で組み立てたか、途中でどんな判定を通ったか、出来上がったものの指紋はどれか。ここまで残っていれば、後から何を聞かれても答えられる。問題は、この記録が、その気になれば書き換えられることだった。
- 03同じ名前でも、中身は変わる——使ったAIの版を、数字で固定する
昨日まで動いていた組み立て処理が、ある朝、立ち上がらなくなった。設定は変えていない。書いたコードも触っていない。調べていくと、土台にしている読み込み用の部品が、新しい系統に上がっていた。新しい系統では、モデルの内部構造の呼び名が変わっていて、こちらが触ろうとしていた層が、そもそも存在しなくなっていた。
- 04作ってあるのに、動かさないまま出す——止まっていることを、証拠に残す
公開の日取りを決めたとき、機能の一覧を眺めて、一つだけ線を引いて外した。出来上がっている、試験も通っている、けれど公開初日には動かさないと決めたものがあった。作った成果物をそのままSNSへ流す仕組みだった。
- 05鍵をかける前に、隠す——管理画面を、外から見えなくする
公開の準備で最後に残ったのは、自分しか使わない画面だった。注文の状態を見たり、公開してよいものを選んだりする管理の画面が、利用者向けのサイトと同じ入口にぶら下がっていた。認証はかけてある。それでも、住所さえ分かれば、誰でもそのログイン画面までは辿り着ける状態だった。
SERIES 28
まちのスタンプラリー制作記 — 全 5 記事
- 01提案書に、動くものを添える——紙のままでは決められない
提案の資料は一式そろっていた。企画提案書、システム要件定義書、概算見積、それらを束ねた統合資料。地域の商工団体へ出す、まちぐるみのスタンプラリーの提案だった。参加する店はおよそ百二十。真冬の…
- 02貼るだけの札に、鍵をかける——店員の操作を、前提にしない
店にお願いするのは掲示物を貼ることだけ、と決めた瞬間に、難しい問題が一つ残った。貼ってあるだけの札は、誰でも撮れる。撮った写真は、そのまま人に送れる。店に行かずに印が入る道が、設計上いちばん…
- 03刷った符号が、読めなかった——四十枚のうち、三枚
店頭に貼る掲示物を四十枚ぶん出力した。A5の紙面に店の名前と遊び方を載せ、真ん中に符号を置いた形だ。出したあと、念のために画像から符号を読み直して確かめた。四十枚中、三枚が読めなかった。画面…
- 04疑わしきを、自動では止めない——点数ではなく、理由を残す
札の写真が共有されうる、という残ってしまうリスクをそのまま抱えたまま、次に考えたのは見つけ方だった。完全には防げないのなら、起きたときに気づけて、気づいたあとに手を打てる形にしておくしかない…
- 05本番の住所で、初めて出た——手元では、速すぎて見えない
一式ができたので、確かめる工程に入った。要件定義書に並べた受け入れ条件の番号を、そのまま試験にした。二十二項目。あわせて、実際のブラウザで四つの画面を通しで操作して回る検査も書いた。こちらは…
SERIES 29
動画自動公開制作記 — 全 5 記事
- 01毎朝七時に、一本ずつ——押し忘れても、事故は起きない
午前一時三十九分、私は「何をするか見るだけ」のつもりで一行を打った。作らない、上げない、公開しない。そういう印を付けたはずだった。ところがその回は、本当に公開された。予定は同じ日の朝七時で、…
- 02三つの関門——書き方と、読み違いと、中身
私が書いた台本には、原典と逆のことが書いてあった。競争の型を扱った古典の回で、買い手が強くなる条件を、買い手にとっての購入金額が小さいとき、と説明していた。原典は逆で、買い手の費用に占める割…
- 03読みは、理屈では決まらなかった——聞き比べでしか決まらない
読み上げに渡す台本には、読みを指定できる。表示はこの字、読みはこの音、と書き分ける仕組みだ。私は当初、数字は読み側を漢数字にする、という規則を作っていた。ある日、同じ文を九通り作って聞き比べ…
- 04縦を、横で上書きした——完成と出ても、何が完成したかは見ていない
短い動画は縦、本編は横で作る。道具も別で、縦のほうは一つ走らせれば動画まで出来上がる。私はある日、時間を惜しんで手順を手で並べ、本編と同じ流れを縦の動画にも当てた。縦で出来たものの上に、横で…
- 05消えるものと、消えないもの——上げ直しの費用を数える
語り手の絵柄を替えた。一日のうちに四回替わって、年齢相応の五代目に落ち着いた。問題はその後で、すでに公開した回をどうするかだった。私は、公開済みの本体は差し替えない、と決めた。
SERIES 30
老舗小売サイト制作記 — 全 4 記事
- 01写真が一枚もないまま、店を建てる——質感は、書式で作る
百年をゆうに超えて続く、街の小売店のウェブサイトを作り直すことになった。元のサイトは、書いてある事実そのものは正確だったが、体裁がひと昔前のままで、携帯電話で開くと文字が小さく、横に滑らせな…
- 02四つの商売を、一枚に詰め込まない——入口を、客ごとに割る
この店には、四つの商売が同居している。酒。学校の制服と体育衣料。贈答品。そして健康食品。一つの店でありながら、扱っているものの系統がまるで違う。作り直しの前のサイトは、この四つが一枚のページ…
- 03事実は、一字も足さない——古いサイトから、条件を落とさない
作り直しでいちばん危ないのは、見た目を整えるついでに、情報を整理してしまうことだと思っている。古いサイトは、たしかに読みにくい。文章が長く、注意書きが多く、否定形が並ぶ。だから新しくするとき…
- 04売り場は作らず、法定の表記だけ先に書く——借り物は、二つに絞った
このサイトには、買い物かごも決済もない。値段を並べた商品の一覧すらない。それなのに、特定商取引法に基づく表記のページは作った。矛盾しているように見えるが、そうではない。順序として、こちらのほ…
経営・業務のお悩みを、お聞かせください
現在の課題や、社内で検討されていることをお伺いし、解決に向けた方向性を一緒に整理します。まだ具体的な方針が決まっていない段階でも、お気軽にご相談ください。
事前の資料準備は不要です。お問い合わせへの返信や、ご相談に必要な連絡を除き、営業目的のご連絡はいたしません。