ワクワク広がる
待望の新商品ラインナップ続々登場!特設サイトを見る
サービスサイト一覧BRANDS
ご利用シーンSCENE
ご両親・祖父母やお子様へ、心を込めた贈り物を。
可愛いうちの子の写真、グッズにすればもっと可愛い!
現像・プリントまでお任せください。
P COLLECTIONのカメラで撮って、そのままプリントへ。
ご両親・祖父母やお子様へ、心を込めた贈り物を。
可愛いうちの子の写真、グッズにすればもっと可愛い!
現像・プリントまでお任せください。
P COLLECTIONのカメラで撮って、そのままプリントへ。
写真のお店がつくる、毎日の道具。
撮る。残す。飾る。
写真のある毎日に、
ちょうどいい道具を。
P COLLECTIONは、パレットプラザのオリジナルブランドです。
撮った写真をプリントして、残して、飾る。写真のお店として向き合ってきた「写真のある暮らし」を、撮る道具からも支えたいと考えました。無駄のないデザインと手に取りやすい価格で、毎日の道具を少しずつそろえていきます。
お買い上げから1年間、通常のご使用で起きた不良は交換などで対応します。使い方動画・よくある質問・取扱説明書は、Webでいつでも。
DAYCAMは、日常使いをコンセプトにしたカメラのラインです。ポケットに入れて、首にかけて、手のひらで。撮りたい瞬間にすぐ使える3機種をそろえました。
通常のご使用で起きた不良は、交換などで対応します。保証書と、レシート(TikTok Shopは注文番号)を保管してください。
各商品のページに、機種ごとの質問と答えをまとめています。
操作は使い方動画で。説明書はPDFでいつでもダウンロードできます。
24時間受付。原則翌営業日までにメールでご回答します。
お手元の取扱説明書の裏面にあるQRコードからも、その商品のサポートページを開けます。
選んで進むだけで、1〜2分で送信できます。受付後、原則翌営業日までにメールでご回答します(土日祝・年末年始を除く)。
paletteplaza.jp を実際に開いて構造・配色・問い合わせ導線を確認し、Sony Cinema Line ほか参考サイトの型をどこに当てたかをまとめました。モックの各ページは、ここに書いた判断で組んでいます。
電話を減らす鍵はページの美しさより、「電話をかける前に答えに当たる場所」を3か所に増やすことです。具体的には、説明書のQR、商品ページのFAQ、フォームの途中に出す回答候補の3つです。現行HPには、全社共通のFAQ置き場もサポート用のナビもありません。問い合わせページはメールフォーム2本への入口だけで、そのフォームは氏名・フリガナ・メール2回の入力から始まります。カメラを新しく売るなら、この「受け皿の薄さ」がそのまま電話に流れます。
一方で、現行HPにはすでに /cp/data-crushing/(データまるごと粉砕サービス) という、独自デザインのLPにFAQ(details開閉)を内蔵した前例があります。当初は特設をこの型にならって /cp/camera/ 配下に置く案でしたが、P COLLECTIONは今後カテゴリを増やしていくブランドのため、独立したサブドメイン p.paletteplaza.jp に置くことにしました(技術面でも既存HPに触れずに作れる利点があります)。
トップは11セクション、全長約8,600px。ヘッダーは高さ111px・白地で、右端に水色「商品・サービス」とピンク「店舗を探す」の正方形ボタンが2つ並びます。
computed style から取得した値です。モックはこの値をそのまま使い、特設側だけ英字見出しを細いウェイトに振って Cinema Line 風の静けさを足しています。
#49CBDE#00AACA#CEF1F6#E4F9FC#FFFCF9#303030#FB4E69#272343書体は本文が Zen Maru Gothic、英字見出しが Adobe Fonts の urbane-rounded(32px / 700)。モックでは urbane-rounded の代わりに Google Fonts の Quicksand を当てています。本番は既存のTypekitキットをそのまま使えます。
form-mailer のフォームは「名前(姓・名)→フリガナ(姓・名)→メール→確認用メール→電話」から始まり、用件は後半。困っている人ほど最初の6項目で止まり、電話に切り替えます。
「ご利用のサービス・商品名」はネットプリント・店頭写真プリント・フォトブック…データまるごと粉砕まで10項目。カメラを足さないと「その他」に混ざり、集計も振り分けもできません。
form-mailer は入力途中に内容に応じてFAQを差し込む動きが作れません。自己解決を狙うなら、特設内に自前のフォーム(またはヘルプデスクSaaSのフォーム)が必要です。
サイトマップにFAQ・サポートの項目がなく、FAQはLP単位(データ粉砕など)でしか存在しません。カメラは発売後も問い合わせが続く商品なので、特設が終わっても残るサポート面が要ります。
良い点もあります。お問い合わせページには電話番号が載っておらず、すでに「メールフォームで承っております」という運用です。受付時間は10:00〜18:00(土日祝・年末年始除く)、18時以降と休日は翌営業日回答。今回の「電話をかけさせない」方針は、既存の運用の延長として説明できます。
| 参考サイト | 借りた型 | モックで使った場所 |
|---|---|---|
| Sony Cinema Line 特設 | 英字の大見出し+日本語サブ/左固定のアンカーナビとスクロール連動/ラインアップのカード(タグ・短文・詳しくはこちら)/タブ型の「取り組み」一覧/グループ見出し付きの機能比較表/動画カード/関連リンクとサポートへの出口 | 特設コンセプトページの骨格すべて |
| instax(チェキ)公式サポート | サポートページの最上部にチャットボットを置き、製品カテゴリのボタンから質問を始めさせる | フォームの「商品→困りごと」の選択肢(将来AIチャットを足すときの入口にも流用) |
| Insta360 サポート | 製品を選ぶ→FAQ→問い合わせの順。連絡手段はチャットを推奨、メールは補助、電話は前面に出さない | フォームの「商品から選ぶ」始まりと、電話を前面に出さない判断 |
| パレットプラザ /cp/data-crushing/ | 独自デザインのLPにFAQ(開閉式)を内蔵し、店舗への誘導ボタンを常時表示 | 商品ページのFAQ(開閉式)と、店舗への誘導 |
P COLLECTIONは今後カテゴリを増やすブランドのため、www配下のキャンペーンURL(/cp/)ではなく独立したサブドメインにする。
モック右下の「MOCK」ボタンから「導線メモ」をオンにすると、各ページのどこに何の意図があるかを黄色いピンで確認できます。
宣材写真と仕様を突き合わせて見つかった食い違いです。サイトをどれだけ整えても、ここが残ると「書いてあることと違う」という一番重い問い合わせになります。
スライドは「2.7K・72×23×28mm」。工場の仕様表は「2.7K・72×27×21mm・51.8g・500mAh」。宣材画像には「1080P Video」「47g」「120分バッテリー」と書かれています。どれが正か確定し、宣材画像の英語の焼き込み文字も差し替えが必要です。
宣材の正面写真には赤い「18X」バッジが入っています。スライドの仕様は「デジタル10倍ズーム」。購入者は数字の大きい方を信じます。量産品の印字と表記を一致させてください。
センサーは800万画素・1/2.9インチです。補間の数字を大きく出すと「思ったより粗い」という問い合わせと、景品表示法の優良誤認のリスクが同時に増えます。特設では「補間により」を必ず併記し、比較表には実センサー値を先に書きました。
手元にあるのは価格と写真3枚だけです。本体には他社ブランド「JUFINX」と「4K Ultra HD」の印字があります。軸数・画質・バッテリー・アプリ有無がわからないと、FAQも動画も作れません。
DC-W10は工場仕様に「2.4G」とあり、宣材にもWi-Fi転送・アプリプレビューの記載があります。日本で販売・使用するには技適(技術基準適合証明)が必要です。DC-G10も無線機能があれば同じです。取得状況を仕入先に確認してください。
DC-W10がアプリ接続を前提にするなら、アプリ名・対応OS・接続手順が問い合わせの大半を占めるはずです。スライドにアプリの記載がないので、扱う/扱わないを先に決めてください。
A5・両面1枚を想定した紙面イメージです。電話番号は載せず、裏面下部の「困ったときは」枠に製品別のQRコードだけを置きます。DC-W10・DC-G10も同じ型で、写真と手順だけを差し替えます。
方針自体は可能ですが、次の3点は法務・品質保証と確認してから確定してください。
説明書ではなく販売ページの表示の話です。通信販売の広告では事業者の電話番号が表示事項ですが、「請求があれば遅滞なく提供する」旨を表示し、実際に提供できる体制があれば省略できるとされています。TikTok Shop自体の出店者情報の要件は別途確認が必要です。
リチウムイオン電池内蔵機器の安全上の注意、Wi-Fi搭載機の技適マーク、販売元(株式会社プラザクリエイト)の名称・住所。PSE等の該当有無は製品ごとに要確認。
電話窓口は設けない方針です(10/7決定)。高齢の方やフォームを使えない方を締め出すと、店舗への来店クレームに形を変えるため、店頭スタッフがその場でフォーム入力を手伝う運用を検討します 要検討。
AIでコールセンターをゼロにする設計は、現実的ではありません。初期不良・返品・強い不満・高齢の方の4つは、人が受けないと別の形(店舗クレーム・SNSの悪評・低評価レビュー)で戻ってきます。狙うのは、人が受ける件数を、人が受けるべき件数まで減らすことです。そのための仕組みを、問い合わせが発生する前・最中・後の3段で提案します。
AIアシスタント(チャット)は将来フェーズで実装します。公開ページのモックからは外し、当面はフォームで選んだ内容に応じて、該当するよくある質問・手続きの案内を出す方式(ルールベース)で先行します。電話窓口は設けません。以下はAIを導入する段階の提案です。
左から右へ進むほど、対応コストが上がります。各段で解決できなかった人だけが次の段に進みます。
開封した人が最初に触れる場所を、Webの自己解決面に直結します。QRに製品名と流入元を持たせるので、どの製品のどの段階で困っているかがデータで取れます。
回答の根拠を説明書・FAQ・仕様表に限定する方式(RAG)にし、答えるたびに出典を表示します。根拠がない質問には答えず、会話の要約を持ったままフォームへ渡すので、お客様は同じ説明を2回書かずに済みます。
フォーム送信時にAIが種類と緊急度を判定します。使い方・充電・microSDのような定型はその場で回答メールを自動送信、それ以外は担当者向けの下書きを作ります。担当者は「書く」から「確認して送る」に変わります。
写真・動画と注文番号(店舗購入はレシート写真)を添付してもらい、購入から一定期間内・症状が交換対象なら、ルールで交換手配まで進めます。判断に迷うものだけ人に回します。交換基準そのものは品質保証と決める必要があります。
配送状況・注文変更・キャンセルなど、TikTok Shop内の問い合わせにもFAQを根拠にした自動返信を入れます。TikTok Shop出品体制のCS担当は現在未定欄にあり、ここを決めないと11月の販売開始後に問い合わせの行き先がなくなります。
LIVE中に「充電時間は?」「スマホに送れる?」と同じ質問が繰り返されます。配信者が1人で回す回もあるので、コメントを拾って定型回答の候補を手元に出す補助があると、売りながら答えられます。TikTokの機能・規約上どこまで自動化できるかは要確認。
店頭で聞かれてスタッフが答えられないと、店舗から本部への電話になります。同じAIチャットをスタッフにも開放し、接客中にその場で引けるようにします。見落とされがちですが、社内からの電話も確実に減ります。
フォーム・チャット・TikTokの問い合わせをAIが週次で分類集計し、「FAQに足すべき質問」「動画にすべき操作」「説明書で誤解されている箇所」を一覧にします。FAQは書いて終わりにすると半年で陳腐化するので、更新の仕組みまでを一式にします。
発売まで約4週間しかないため、AIは2段目以降に回し、最初は「受け皿を作る」ことに集中します。
目標値はまだ置けません。11月の実績を見てから決めるべき数字なので、項目だけを先に決めます。
| 方式 | 中身 | 向いている場合 | 注意点 |
|---|---|---|---|
| ヘルプデスクSaaS | Zendesk・Freshdesk など。FAQ・フォーム・チケット管理・AI機能が一式 | 早く始めたい/CSを複数人で回す | 月額は席数と機能で大きく変わるため見積もりが必要。既存HPとのデザイン統一に手間 |
| 国産チャットボット | 日本語の問い合わせ対応に特化した製品群 | 日本語の言い回しの精度を重視する | FAQの作り込みが前提。フォームは別に用意 |
| 内製(生成AI API+フォーム) | 特設内の自前フォーム+生成AI API+スプレッドシートやkintoneで管理 | モックの体験をそのまま実装したい/費用を抑えたい | 保守する人が要る。個人情報の扱いと誤回答対策を自前で設計 |
どれを選んでも、効果の大半はFAQと説明書の中身で決まります。ツール選定より先に、仕様の確定とFAQ初版づくりに手を付けるべきです。
次の情報がないため、この提案は件数や費用の見積もりまで踏み込んでいません。現在のコールセンターの人数・1日の入電数・問い合わせの内訳、カメラの販売台数見込み、TikTok ShopのCS担当、交換・返品の基準、DC-G10の仕様一式です。特に入電数と内訳があれば、どの段で何割減らせるかの試算ができます。
paletteplaza.jp を外から調べてわかった構造と、管理者不在の状態からClaudeとCodexを使って安全に改修していくための手順・設計・セキュリティの考え方をまとめました。外から見えない部分は推定で、確度を併記しています。
現行HPは、手書きのHTML・CSS・jQueryで作られたページを、nginxとPHP-FPMで配信し、AWS東京リージョンのコンテナ基盤に載せている構成だと推定します。WordPressのようなCMSは見当たらず、更新は「ファイルを書き換えて本番に反映する」方式です。つまり、更新の手順そのものが前任者の頭の中にしかない可能性が高い、ということです。
そのため、一番のリスクはコードの古さではありません。本番の鍵(AWS・ドメイン・DNS・各種SaaS)を誰が持っていて、前任者の権限がまだ生きているのかがわからないことです。最初の2週間はコードを書かず、権限の棚卸しと失効、ソースのGit化、ステージング環境の用意に充てるべきです。ここを飛ばして11月の特設に着手すると、障害が起きたときに戻す手段がありません。
新しく作る部分(特設・FAQ・問い合わせAPI・AIチャット)は、既存サイトに手を入れずに横に新しく立て、入口のリンクだけを既存HPに足すやり方を推奨します。既存を少しずつ置き換える「ストラングラー方式」です。11月の発売に間に合わせる範囲は、静的な特設ページと、ヘルプデスクSaaSのフォームまでにするのが現実的です。個人情報を受け取る自前のバックエンドを、4週間・1人で安全に作り切るのは難しいと考えます。
ブラウザからのレスポンスヘッダー、DNSの公開情報、HTMLのソースで確認しました。サーバーの中には入っていません。
| 項目 | 観測した事実 | 読み取れること | 確度 |
|---|---|---|---|
| DNS | ネームサーバーが awsdns(Amazon Route 53) | ドメインのDNSはAWSアカウント内で管理されている。そのAWSアカウントの持ち主が最重要の確認先 | 高 |
| 配信基盤 | www・nenga・goods が同じ東京リージョンのロードバランサー(ELB)を指す。名前は「32桁の16進数+数字」の形式。graduation・photobook は別のELB | 32桁16進の名前はKubernetesが自動で作るロードバランサーの命名と一致する。EKSなどのコンテナ基盤の可能性。年賀状EC(nenga)と同じ基盤に同居しているなら、HPの不具合や侵害が年賀状の注文にまで波及しうる | 中 |
| Webサーバー | server: nginx。存在しないURLで「File not found.」と素の文字列が返る。CSS・JSにはETag・Last-Modifiedがあり、HTMLにはない | 「File not found.」はPHP-FPMの既定の応答。HTMLはPHPを通して出力(共通ヘッダーの読み込み等)、CSS・画像はnginxが直接配信していると考えられる | 中〜高 |
| CDN・WAF | CloudFront等のCDNを経由せず、ELBに直接つながる | キャッシュ・WAF・DDoS対策が手薄な可能性。アクセス集中(TikTokでのバズ)時にサーバーへ直撃する | 中 |
| フロントの部品 | jQuery 3.4.1/Swiper 8.4.7(jsDelivr)/Vue 3を unpkg から「vue@3」で読み込み(バージョン未固定・開発版)/Font Awesome 6.4/Adobe Fonts。外部スクリプトにSRI(改ざん検知)なし | jQuery 3.4.1は既知の脆弱性(CVE-2020-11022/11023、3.5.0で修正)を含む版。Vueは配信元で中身が変わってもそのまま実行される状態で、サプライチェーン攻撃に最も弱い書き方 | 高 |
| 計測タグ | Googleタグマネージャー、GA4に加え、旧Universal Analyticsの ga.js も読み込み | ga.jsは計測が終わった旧方式の残骸。不要な外部スクリプトは、それだけで攻撃面と速度低下になる | 高 |
| セキュリティヘッダー | HSTS・CSP・X-Frame-Options・X-Content-Type-Options・Referrer-Policyがいずれも返っていない。HTMLに Access-Control-Allow-Origin: * が付いている | なりすましページへの埋め込み(クリックジャッキング)やHTTPへの格下げを防ぐ設定がない。ヘッダーは配信設定だけで足せるので、最も費用対効果が高い改善 | 高 |
| 品質・SEO | robots.txt と sitemap.xml が404。htmlタグにlang属性なし。viewportでズーム上限1.6。HTML内に旧コードのコメントが多数残る | 検索エンジンと読み上げソフトへの配慮が不足。コメントの残置は、過去の仕様を外部に見せてしまう | 高 |
| フォーム | お問い合わせは外部SaaS(form-mailer)に遷移 | 問い合わせの個人情報は外部事業者に保存されている。契約・管理者アカウントの名義確認が必要 | 高 |
| メール | MXはMicrosoft 365。SPFは -all で設定済み。CAAレコードなし | メールの送信元なりすまし対策はある程度できている。CAA(証明書を発行できる事業者の限定)は未設定 | 高 |
ここから言えるのは、今のHPは「動いているが、誰も触れない」状態だということです。前任者がいれば、更新はサーバー上のファイルを直接書き換えるか、コンテナイメージを作り直して入れ替えていたはずです。そのどちらかが判明しない限り、既存ページを1行直すことも危険です。
順番に意味があります。上ほど優先です。
既存サイトは当面そのまま動かし、新しい部分だけを別の場所に、読みやすく安全な作りで立てます。
出力がただのHTMLなので、どこにでも置けて速く、壊れにくい。ヘッダーやFAQカードを部品(コンポーネント)にして一か所で直せる。JavaScriptはフォームやチャットなど必要な所だけに載せる。CSSはモックと同じデザイントークン(CSS変数)を土台にする。
FAQや仕様はYAMLとMarkdownでリポジトリに置き、スキーマ(Zod)で検証する。「要確認」のまま公開しようとするとビルドが止まる、といったルールを機械で守らせる。将来、非エンジニアが編集するならヘッドレスCMSに移す。
問い合わせ受付とAIチャットの2本に絞り、AWS Lambda上のHono(TypeScript)で書く。サーバーの保守(OS更新等)が不要で、使った分だけの課金。問い合わせの保存と返信はヘルプデスクSaaSに任せ、管理画面を自作しない。
| 案 | 内容 | 良い点 | 弱い点 |
|---|---|---|---|
| A. 既存の配信に置く | ビルドしたHTMLを今のサーバーの /cp/ 配下に置く(データ粉砕LPと同じ) | URLが既存HPと揃う | 今の更新手順がわからない限り実行できない。APIは別に必要 |
| B. サブドメインに新設(採用:p.paletteplaza.jp) | P COLLECTIONの特設を p.paletteplaza.jp としてS3+CloudFrontで新設し、APIもここに置く | 既存HPに一切触れずに作れる。セキュリティ設定を最初から正しく入れられる | URLが既存と分かれる(入口リンクで補う) |
| C. wwwの前にCDNを置く | www全体をCloudFront経由にして、パスで新旧を振り分ける | 理想の形。既存HPにもWAFとヘッダーが効く | 本番のDNS切替を伴い、失敗時の影響が全ページに及ぶ。基盤を理解してからのPhase 3向き |
説明書のQRに載せるURLは、印刷したら二度と変えられません。どの案を選んでも、QRの行き先は「自社で転送先を変えられるURL」(例:p.paletteplaza.jp/cc1)にしてください。サイトの構成が後で変わっても、転送設定だけで追従できます。印刷の締め切りから逆算して、URLは今決める必要があります。
半年後の自分と、次の担当者と、AIが読んで迷わないことを最優先にします。
最初に知っておいてほしいこと:このモックのコードは本番に流用しないでください。モックは見た目と導線を確かめるための試作で、画面を文字列から組み立てる書き方(innerHTML)や、すべてを1ファイルに詰めた構造になっています。本番ではモックを「画面の仕様書」として扱い、下の構成で作り直すのが結局いちばん速く、安全です。
依存の向きを一方向にする。APIは「業務ルール(domain)」「ユースケース(application)」「外部とのつなぎ(infrastructure)」「入口(http)」の4層に分け、内側の層は外側を知らないようにします。ヘルプデスクを別の製品に替えても、変えるのは infrastructure の1ファイルだけです。
オブジェクト指向は「値」と「振る舞い」に使う。メールアドレスや受付番号は、作った時点で正しいことが保証された小さなクラス(値オブジェクト)にします。不正な値がシステムの奥まで入り込まないので、チェック漏れによるバグが構造的に起きません。一方、画面の部品は関数型のコンポーネントで素直に書き、クラスを無理に使いません。
命名は業務の言葉に合わせる。「問い合わせ=Inquiry」「自己解決=SelfResolved」のような対訳表を docs に置き、AIにも同じ言葉を使わせます。
TypeScriptはstrictモード、anyは禁止。ESLintとPrettierで書式を自動統一し、レビューでは中身だけを見る。
業務ルールの単体テスト(Vitest)と、「HP→特設→FAQ→フォーム送信」の導線を本物のブラウザで通すE2E(Playwright)。導線が壊れたら本番に出せない仕組みにする。
「なぜB案にしたか」「なぜこのSaaSか」をADRとして1枚ずつ残す。前任者が辞めて困っている今の状況を、次の担当者に繰り返させないため。
2025年版のOWASP Top 10(Webアプリの代表的な10大リスク)とIPAの10大脅威2026を軸に、このHPに当てはめて整理しました。
2025年版で一番変わったのは、「ソフトウェアのサプライチェーンの失敗」が3位に新設されたことです。自分のコードではなく、使っている部品・配信元・ビルドの仕組みが狙われます。2025年9月以降には、npm(JavaScriptの部品置き場)で、感染したパッケージが開発者の認証情報を盗んで次のパッケージに自己増殖する「Shai-Hulud」と呼ばれる攻撃が起き、米CISAが注意喚起を出しました。AIで開発する場合は、AIが実在しないパッケージ名を提案し、攻撃者がその名前で偽物を登録しておく「スロップスクワッティング」という手口も報告されています。現行HPがVueをバージョン未固定で外部から読み込んでいるのは、まさにこの3位に当たります。
| 優先 | 内容 | 理由 |
|---|---|---|
| 高 | 前任者のアクセス権の失効と、AWSルートユーザーの多要素認証 | 本番を丸ごと乗っ取れる鍵。最優先 |
| 高 | Vueの読み込みをやめる、または版を固定してSRIを付ける | unpkgの配信内容が変わればそのまま実行される。使っていないなら削除 |
| 高 | セキュリティヘッダーの追加(HSTS、X-Content-Type-Options、Referrer-Policy、frame-ancestors、Permissions-Policy)。CSPはまず報告のみのモードで様子を見る | nginxの設定数行で入る。CSPはいきなり強制するとタグ類が止まるため段階的に |
| 中 | jQueryを3.7系へ更新、または不要なら撤去 | 3.4.1は既知の脆弱性あり。更新前にステージングで動作確認 |
| 中 | 旧ga.jsの削除、HTMLの Access-Control-Allow-Origin: * の削除 | 不要な外部読み込みと、不要な許可を減らす |
| 中 | CAAレコードの設定、PHPのバージョン確認と更新 | 証明書の不正発行の予防。サポート切れのPHPは脆弱性が直らない |
| 低 | robots.txt・sitemap.xml・独自404ページ・html lang属性・HTMLコメントの整理 | セキュリティより品質・SEO・アクセシビリティの改善 |
| リスク | このHPで起きうること | 設計で防ぐ方法 |
|---|---|---|
| A01 アクセス制御の不備 | 他人の問い合わせ内容や添付写真が見える | 管理画面を自作しない(閲覧はヘルプデスクSaaS側の権限管理に任せる)。添付は非公開バケットに置き、短時間だけ有効な署名付きURLでしか開けないようにする |
| A02 設定の不備 | デバッグ情報やエラーの中身がそのまま表に出る | 本番ではスタックトレースを出さない。セキュリティヘッダーをCDNで一括付与。設定はCDKでコード化し、手作業の設定変更をなくす |
| A03 サプライチェーンの失敗 | 依存パッケージやCDNの改ざんで不正なコードが混入 | 依存は最小限にしロックファイルで版を固定。更新はRenovate等で、公開から数日たった版だけを取り込む。インストール時スクリプトは原則無効。外部スクリプトにはSRI。GitHub Actionsは版をコミットのハッシュで固定。AIが提案したパッケージは実在・利用実績を確認してから入れる |
| A04 暗号化の失敗 | 通信の盗聴、鍵の漏えい | HTTPSのみ(HSTS)。APIキー等はコードや.envに書かずSecrets Managerへ。リポジトリには秘密情報の検知を常時かける |
| A05 インジェクション | フォームから悪意あるスクリプトやメールヘッダーを注入 | 入力はサーバー側でもZodで検証(画面側の検証は信用しない)。出力はフレームワークの自動エスケープに任せ、利用者の入力をinnerHTMLで描かない。メールの件名・宛先に利用者の入力を直接入れない |
| A06 安全でない設計 | フォームの大量送信、AIチャットの乱用で費用が膨らむ | 「悪用されたらどうなるか」を設計時に書き出す。送信回数の制限、ボット判定(Cloudflare TurnstileやreCAPTCHA)、AI利用の上限額と警報 |
| A07 認証の失敗 | AWS・GitHub・SaaSの管理アカウントの乗っ取り | 共有アカウントを作らない。管理系はすべてパスキーなどフィッシングに強い多要素認証 |
| A08 ソフトウェア・データの完全性 | ビルドや配備の途中で改ざんされる | mainへの直接書き込み禁止、レビュー必須。配備はOIDC連携で長期の鍵を持たない。本番に出すのはCIでビルドした成果物だけ |
| A09 ログと警報の不備 | 攻撃や障害に気づけない | 構造化したログを残し、個人情報は記録しない。エラー急増・送信急増で通知 |
| A10 例外処理の誤り | 外部サービスの障害時に二重送信や情報漏えい | 外部呼び出しにはタイムアウトと再試行の上限。失敗したら安全側に倒す。同じ送信を2回受けても1件として扱う(冪等性) |
| リスク | 対策 |
|---|---|
| プロンプトインジェクション | 「指示を無視して…」と書かれても被害が出ないよう、チャットにはメール送信・データベース操作などの権限を一切持たせない。回答を作るだけの役割に限定する |
| 機密情報の漏えい | AIに渡すのは公開済みのFAQ・説明書・仕様だけ。顧客情報や社内資料は渡さない。チャット欄に個人情報を入れないよう案内する |
| 出力の扱い | AIの回答は文字として表示し、HTMLとして実行しない |
| 誤情報 | FAQ・説明書にない質問には答えず、フォームへ案内する。回答には必ず出典を表示する |
| 無制限な消費 | 1回あたりの文字数・1人あたりの回数・月の上限額を設け、超えたら止めて通知 |
| データの扱い | API経由で送った内容が学習に使われない契約・設定になっているかを、利用する事業者ごとに確認する |
AIに一度に大きく作らせるほど、読めないコードが増えて保守できなくなります。「小さく頼み、必ず読み、検査を通してから入れる」を1サイクルにします。Vaultですでに使っている CLAUDE.md / AGENTS.md の仕組みを、そのままリポジトリにも置くのが自然です。
12月から1月は年賀状が会社の稼ぎ頭になる時期です。年賀状ECと配信基盤を共有している可能性がある以上、この期間に基盤側の大きな変更を入れるのは避けるべきです。
次がわからないため、構成や工数の一部は推定にとどまっています。AWSアカウントの名義と管理者、現行HPの更新・配備の手順、ソースコードの所在(Gitの有無)、PHPとコンテナの版、バックアップの有無、制作会社との保守契約の有無、情報システム部門の変更管理ルール、ヘルプデスクSaaSの導入可否と予算です。特にAWSアカウントと配備手順は、Phase 0の最初の数日で判明させないと、11月の計画全体が組めません。