[{"data":1,"prerenderedAt":531},["ShallowReactive",2],{"detailclaude-code-perl-typescript-migration":3,"detail_related_claude-code-perl-typescript-migration_ai":44,"detail_related_claude-code-perl-typescript-migration_typescript":98,"$fWsKFg1X_QgAuu2ey0rEEOGw9E7Qv1gl0T__gcaeK1-E":111,"$fS4sOnCUpoF-wMfw16HWwnBnngwddN9OaX5p2KHuFyVA":145,"works":366},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":7,"revisedAt":6,"title":8,"content2":9,"eyecatch":10,"tag":14,"heading_list":19,"recruit":19,"is_html":19,"description":41,"related_articles":42,"recommended_articles":43,"is_migration":19},"claude-code-perl-typescript-migration","2026-05-29T08:21:55.189Z","2026-06-02T01:46:27.741Z","2026-06-02T01:45:24.758Z","テストがない 10 万行の Perl システムを、Claude Code で TypeScript へ書き換えた話","\u003Ch2 id=\"h586b90d155\">「AI が書いたコード、読んでますか？」\u003C/h2>\u003Cp>最近よく見かけるこの議論に、正直に答えます。\u003C/p>\u003Cp>\u003Cstrong>全部は読んでいません。10 万行、読みきれません。\u003C/strong>\u003C/p>\u003Cp>これは無責任に聞こえるかもしれません。「AI が書いたコードの 80% は負債だ」という研究もありますし、「理解していないコードをリリースするな」という意見はもっともだと思います。\u003C/p>\u003Cp>ただ、10 万行のコードを1行ずつ目で追って品質を担保するのは、\u003Cstrong>現実的に難しい\u003C/strong>ですよね。人間が書いたコードでも、全行レビューはしていないはずです。\u003C/p>\u003Cp>じゃあどうしたか。\u003C/p>\u003Cp>\u003Cstrong>読む代わりに、検証する仕組みを作りました。 AI に書かせたコードを、AIに検証させ続ける\u003C/strong>。24 時間、何百ラウンドも、バグが出なくなるまで。読んで理解する代わりに、正しさを証明する。\u003C/p>\u003Cp>この記事は、その話です。\u003C/p>\u003Ch2 id=\"h90ca2bc41d\">前提：テストがほぼない\u003C/h2>\u003Cp>私が担当しているのは、ある企業の EC サイトのバックエンドです。\u003C/p>\u003Cp>\u003Ca href=\"https://www.perl.org/\" target=\"_blank\" rel=\"noopener noreferrer\">Perl\u003C/a> で書かれていて、10 年以上動いています。認証、注文、決済、予約、LINE連携、クーポン。\u003Cstrong>API のエンドポイントは 133 個\u003C/strong>あります。\u003C/p>\u003Cp>そしてこのコードベースには、\u003Cstrong>まともな自動テストがほぼありませんでした。\u003C/strong>\u003C/p>\u003Cp>初めてソースを開いたときのことは覚えています。10 年分のビジネスロジックがぎっしり詰まっていて、でもそれを検証する手段が何もない。仕様書もない。何かを変えたとき、壊れたかどうかを知る方法がない。よくこれで 10 年動いてきたなと、率直に思いました。\u003C/p>\u003Cp>\u003Cstrong>これを \u003C/strong>\u003Ca href=\"https://www.typescriptlang.org/ja/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>TypeScript\u003C/strong>\u003C/a>\u003Cstrong> に書き換えろ、というのが今回のミッション\u003C/strong>でした。\u003C/p>\u003Ch2 id=\"h460484bf92\">普通にやったら詰みます\u003C/h2>\u003Cp>テストのないコードの移植は、ソフトウェアエンジニアリングでも最悪の部類に入る仕事です。\u003C/p>\u003Cp>教科書的にやるなら、まず既存の Perl コードにテストを書きます。挙動を固めてから、TypeScript で書き直す。でも 10 年分のコードにテストを書く工数は、移植そのものと同じかそれ以上かかります。しかも、Perl の挙動をちゃんと理解してテストに落とせる人材は限られています。\u003C/p>\u003Cp>詰んでます。\u003C/p>\u003Ch2 id=\"h4677704352\">Claude Code に「書かせる」のは1週間で終わりました\u003C/h2>\u003Cp>Claude Code には、\u003Cstrong>カスタムスラッシュコマンド\u003C/strong>という機能があります。\u003Cstrong>自分でコマンドを定義して、繰り返し使える仕組み\u003C/strong>です。\u003C/p>\u003Cp>私はまず \u003Ccode>/migrate-endpoint\u003C/code> というコマンドを作りました。\u003C/p>\u003Cp>Perl のコントローラのファイルパスを渡すと、Claude Code が関連するモデルやエンティティ、DB スキーマまで全部読みに行って、TypeScript の実装コードとテストを一気に生成してくれます。\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/285f776615bd4583a5177b8d1c440a90/migrate-endpoint-flow.png\" alt=\"\" width=\"1448\" height=\"1086\">\u003C/figure>\u003Cp>\u003Cstrong>テストがないなら、テストごと作ればいい。\u003C/strong>\u003C/p>\u003Cp>この割り切りで、\u003Cstrong>移植前にテストを書くという工程を丸ごとスキップ\u003C/strong>できました。\u003C/p>\u003Cp>133 エンドポイント、約 10 万行。実装が終わるまで、約 1 週間でした。最初のエンドポイントが動いたときは「本当にこれでいけるのか？」という気持ちが正直ありましたが、\u003Cstrong>2 つ目、3 つ目と進むうちに、コマンドの精度がどんどん上がっていく\u003C/strong>のがわかりました。\u003C/p>\u003Ch2 id=\"h1a681fd8e2\">でも「書けた」は「正しい」じゃない\u003C/h2>\u003Cp>1 週間で 10 万行。数字だけ見ればすごいです。\u003C/p>\u003Cp>でも、テストのほぼない Perl から移植したコードです。\u003Cstrong>「動くけど微妙に違う」コードが量産されている可能性\u003C/strong>は大いにあります。\u003C/p>\u003Cp>Perl は未定義値を空文字やゼロとして黙って処理します。TypeScript ではそうはいきません。タイムゾーンの扱いも違う。数値と文字列の暗黙変換もある。こういう差異は、普通のテストでは見つかりません。\u003C/p>\u003Cp>そこで、これも仕組みで解決することにしました。\u003C/p>\u003Ch2 id=\"h7480bb35d9\">パリティ監査という仕組みを作りました\u003C/h2>\u003Cp>もう 1 つのカスタムコマンド、\u003Ccode>/parity-audit\u003C/code> を作りました。\u003C/p>\u003Cp>やることはシンプルです。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>Perl のコードと TypeScript のコードを突き合わせて、挙動の差異を見つける\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>差異があればバグとして修正し、テストを追加する\u003C/strong>\u003C/li>\u003C/ul>\u003Cp>このコマンドを実行すると、\u003Cstrong>1 ラウンドで 20 の AI エージェントが並列に起動\u003C/strong>し、それぞれが違う切り口でコードを調べていきます。\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/e1d8b1dc72f44fcf9f367d8dc3b852b9/parity-audit-flow.png\" alt=\"\" width=\"1447\" height=\"1087\">\u003C/figure>\u003Cp>あるエージェントはエンドポイント単位で、リクエストからレスポンスまでのコードパスを 1 行ずつ比較しています。別のエージェントは DB アクセス層を見ていて、クエリの条件やソート順、NULL の扱いをチェックしています。\u003C/p>\u003Cp>決済まわりを専門で見るエージェントもいます。税計算、クーポン適用、支払いステータス。1 円でもズレたらアウトの領域です。認証・セッション管理を集中的に検証するエージェントもいて、ログインや SSO、MFA といったセキュリティに直結する処理を重点的に見ます。\u003C/p>\u003Cp>日時処理、暗号化、バーコード生成といった「言語が変わると挙動が変わりやすい」ユーティリティも、専用のエージェントが横断的にチェックしています。\u003C/p>\u003Cp>これだけの観点を人間が毎回カバーするのは、まず無理だと思います。\u003C/p>\u003Ch2 id=\"h9def901947\">「10回連続クリーン」になるまで止めません\u003C/h2>\u003Cp>パリティ監査には、1 つ\u003Cstrong>ルール\u003C/strong>を課しました。\u003C/p>\u003Cp>\u003Cstrong>連続10回、差異ゼロが出るまで回し続ける。\u003C/strong>\u003C/p>\u003Cp>1ラウンドでもバグが見つかったら、カウンタはゼロに戻ります。修正して、また最初から。10 回連続でクリーンになって、初めて「OK」です。\u003C/p>\u003Cp>このコマンドを夜間も含めて走らせ続けました。\u003C/p>\u003Cp>\u003Cstrong>2.5 ヶ月間。\u003C/strong>\u003C/p>\u003Ch2 id=\"h29bb0ce50d\">監査 379 ラウンド、800件以上のバグを修正\u003C/h2>\u003Cp>結果として、\u003Cstrong>379 ラウンドの監査を回し、800 件以上のバグ\u003C/strong>を見つけて直しました。\u003C/p>\u003Cp>最初のほうはラウンドごとにバグが山のように出てきて、正直なところ気が遠くなりました。でも修正を重ねるうちに、だんだんクリーンなラウンドが増えてきます。連続クリーンが 5 回、6 回と伸びていくのを見ているときは、ちょっとした達成感がありました。\u003C/p>\u003Cp>中には、\u003Cstrong>移植元の Perl 側に何年も潜んでいたバグが見つかったケースも\u003C/strong>ありました。テストがなかったから、誰も気づかなかったバグです。\u003Cstrong>パリティ監査がなければ、そのまま TypeScript 側にも引き継がれていた\u003C/strong>でしょう。\u003C/p>\u003Ch2 id=\"h3884ede80a\">これで何が変わったか\u003C/h2>\u003Cp>移植前と移植後で、テストの状況は一変しました。\u003C/p>\u003Cp>\u003Cstrong>移植後のテストは 1,419 件。\u003C/strong> しかも全部パスしています。移植プロジェクトとしてだけでなく、テスト資産の構築としても大きな成果だと思っています。\u003C/p>\u003Cp>そして、1,419 件のテストがあるということは、ここからのリファクタリングが容易になるということでもあります。\u003Cstrong>テストがなかった頃は怖くて触れなかったコードを、安心して改善できる。\u003C/strong>移植がゴールではなく、ここからがスタートです。\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/faaa3c46c0cf4ac6b95524e19d81e50c/migration-audit-results.png\" alt=\"\" width=\"1448\" height=\"1086\">\u003C/figure>\u003Ch2 id=\"h49ccabfba5\">そして、人間の手で確かめました\u003C/h2>\u003Cp>\u003Cstrong>最後に、フロントエンドとつないで E2E テスト\u003C/strong>をしました。\u003C/p>\u003Cp>これは人間が手で動かすテストです。実際のブラウザで、実際の画面を操作して、注文を入れて、決済して、予約して。AI ではなく、人間の目と手で確かめました。\u003C/p>\u003Cp>\u003Cstrong>不具合は見つかりませんでした。\u003C/strong>\u003C/p>\u003Cp>10 万行。テストがほぼない状態からの移植。AI が書いて、AI が検証して、最後に人間が触って、壊れていなかった。\u003C/p>\u003Cp>正直、自分でもちょっと信じられませんでした。\u003C/p>\u003Ch2 id=\"h42e2556fbc\">Claude Codeの使い方として伝えたいこと\u003C/h2>\u003Cp>この経験を通じて、Claude Code の使い方について 3 つのことがわかりました。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>カスタムコマンドで「仕組み」にする\u003C/strong>\u003Cul>\u003Cli>属人的な「上手いプロンプトの書き方」ではなく、誰でも実行できるコマンドとして定義します。これで品質が人に依存しなくなります。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Ca href=\"http://CLAUDE.md\">\u003Cstrong>CLAUDE.md\u003C/strong>\u003C/a>\u003Cstrong> に知識を貯める\u003C/strong>\u003Cul>\u003Cli>プロジェクト固有のルール（アーキテクチャ、命名規則、エラーコードなど）を CLAUDE.md ファイルに書いておきます。セッションが変わっても、Claude Code はこれを読んでくれます。移植が進むほどこのファイルが育ち、後半フェーズほど手戻りが減りました。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>品質保証を「計算資源」の問題にする\u003C/strong>\u003Cul>\u003Cli>1 ラウンド 20 エージェント × 379 ラウンド。この物量の検証を人間がやるのは無理です。でもコマンドにして 24 時間回せば、品質保証は工数の問題ではなく計算資源の問題になります。\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\u003Ch2 id=\"h5b6299b788\">「読んでない」のその先へ\u003C/h2>\u003Cp>冒頭に戻ります。\u003C/p>\u003Cp>\u003Cstrong>AI が書いたコード、読んでますか？\u003C/strong>\u003C/p>\u003Cp>私の答えは変わりません。全部は読んでいません。でも、全部検証しました。20 エージェント並列で、379 ラウンド、800 件のバグを潰して、最後に人間の手で E2E テストして、不具合ゼロ。\u003C/p>\u003Cp>もちろん、コードを読んで理解すること自体の価値を否定するつもりはありません。ただ、「読む」以外にも品質を担保する手段はあるはずです。\u003C/p>\u003Cp>\u003Cstrong>読むか読まないかではなく、正しさをどう証明するか。\u003C/strong> その仕組みを設計できるかどうかが、AI 時代のエンジニアリングで問われることなんじゃないかと思っています。\u003C/p>\u003Ch2 id=\"hc96909f29a\">この 3 ヶ月は長いのか\u003C/h2>\u003Cp>AI コーディングの事例として、「数時間でアプリを作った」「週末で完成した」といった話をよく見かけます。それと比べると、3 ヶ月という数字は地味に映るかもしれません。\u003C/p>\u003Cp>でも、考えてみてください。\u003Cstrong>テストのほぼない 10 万行のプロダクションコードを、133 エンドポイントの挙動を 1 つも壊さずに別言語へ移植\u003C/strong>する。普通にやったら 1 年はかかるプロジェクトです。見積もりの段階で「現実的じゃない」と却下されてもおかしくない。\u003C/p>\u003Cp>\u003Cstrong>それを 3 ヶ月で、しかも人間の E2E テストで不具合ゼロという品質で完遂\u003C/strong>できました。\u003C/p>\u003Cp>同じような課題を抱えている方は、少なくないと思います。テストのないレガシーシステム、移植したいけど踏み切れない、人手も時間も足りない。今回のアプローチは、そうしたプロジェクトにも十分に適用できると考えています。\u003C/p>\u003Cp>\u003Cstrong>レガシーシステムの移行でお困りの方がいらっしゃれば、ぜひご相談ください。\u003C/strong>\u003Cbr>\u003Cbr>\u003C/p>\u003Chr>\u003Cp>\u003Cspan style=\"color: #6c6c6c\">注記：本記事で紹介した \u003C/span>\u003Ccode>/migrate-endpoint\u003C/code>\u003Cspan style=\"color: #6c6c6c\">、\u003C/span>\u003Ccode>/parity-audit\u003C/code>\u003Cspan style=\"color: #6c6c6c\"> は Claude Code のカスタムスラッシュコマンド機能で構築したものです。\u003C/span>\u003C/p>",{"url":11,"height":12,"width":13},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1632b87e5aaa4944a854ccc430cdb89e/%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81.png",941,1672,[15,20,25,30,34],{"id":16,"createdAt":17,"updatedAt":17,"publishedAt":17,"revisedAt":17,"name":18,"top":19},"ai","2025-10-20T05:29:45.387Z","AI",false,{"id":21,"createdAt":22,"updatedAt":23,"publishedAt":22,"revisedAt":22,"name":24,"top":19},"typescript","2023-07-13T11:17:37.381Z","2023-08-09T06:19:34.864Z","TypeScript",{"id":26,"createdAt":27,"updatedAt":28,"publishedAt":27,"revisedAt":27,"name":29,"top":19},"backend","2023-06-01T09:41:39.644Z","2023-08-09T06:36:56.137Z","バックエンド",{"id":31,"createdAt":32,"updatedAt":32,"publishedAt":32,"revisedAt":32,"name":33,"top":19},"tech","2023-06-01T09:42:09.082Z","技術",{"id":35,"createdAt":36,"updatedAt":37,"publishedAt":36,"revisedAt":38,"name":39,"top":40},"promotion","2023-07-13T11:19:32.620Z","2023-08-09T08:38:30.413Z","2023-08-09T07:10:47.562Z","PR",true,"テストがほぼない10万行のPerl製ECバックエンドを、Claude Codeを使ってTypeScriptへ移植。カスタムコマンドによる実装生成とパリティ監査で、379ラウンドの検証、800件以上のバグ修正、1,419件のテスト構築まで行った取り組みを紹介します。",[],[],{"contents":45,"totalCount":95,"offset":96,"limit":97},[46,56,66,76,85],{"id":47,"eyecatch":48,"publishedAt":52,"createdAt":53,"title":54,"is_html":19,"content2":55},"figma-plugin",{"url":49,"height":50,"width":51},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/4eb2c2eb6cf4470b9b0ef247889fd582/figma.jpg",2784,4096,"2026-04-02T01:54:21.369Z","2026-03-31T03:52:33.440Z","Figma の作業を効率化するプラグインを作ってみた","\u003Cp>\u003Cstrong>デザインの現場では、画面の命名やフレームの作成、整列、スタイルの整理といった細かい作業が発生\u003C/strong>します。\u003Cbr>一つひとつは単純ですが、積み重なると時間を奪い、\u003Cstrong>ミスやストレスの原因\u003C/strong>にもなります。\u003C/p>\u003Cp>こうした作業を減らすために、\u003Ca href=\"https://www.s2factory.co.jp/blog/event-ai-agent/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>社内での AI エージェント検証\u003C/strong>\u003C/a>をきっかけに、\u003Ca href=\"https://code.claude.com/docs/ja/overview\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Claude Code\u003C/strong>\u003C/a>\u003Cstrong> を使って\u003C/strong>\u003Ca href=\"https://www.figma.com/ja-jp/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Figma\u003C/strong>\u003C/a>\u003Cstrong> 上の作業を効率化するプラグイン\u003C/strong>をいくつか作り始めました。\u003C/p>\u003Cp>というわけでこの記事では、\u003Cstrong>作ったプラグインを紹介\u003C/strong>していきたいと思います。\u003Cbr>\u003Cbr>AI エージェント検証についての記事はこちらです。\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/event-ai-agent/\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fevent-ai-agent%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Ch2 id=\"hf9f18e5bd9\">Frame Bulk Generator\u003C/h2>\u003Cp>\u003Cstrong>画面一覧をもとに、画面名とサイズをまとめて反映できるプラグイン\u003C/strong>です。\u003C/p>\u003Cp>あらかじめ画面一覧がある場合でも、Figma 上では名前の貼り付けとサイズ設定を一つずつ行う必要があり、手間がかかっていました。数が増えると、コピペミスも起きやすくなります。\u003Cbr>この作業をまとめて済ませられるようになったことで、初期構成の準備を短時間で進められるようになりました。\u003Cbr>\u003C/p>\u003Cp>\u003Cstrong>使い方\u003C/strong>\u003C/p>\u003Col>\u003Cli>\u003Cstrong>スプレッドシートなどから画面一覧をコピー\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>プラグインに貼り付け\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>画面サイズを指定して実行\u003C/strong>\u003C/li>\u003C/ol>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/2bc2442126414af2b324590d29942a1a/Frame%20Bulk%20Generator.png?w=498&h=600\" alt=\"\" width=\"498\" height=\"600\">\u003C/figure>\u003Ch2 id=\"h54553cec90\">Frame Labeler\u003C/h2>\u003Cp>オートレイアウトで整理した画面でも、\u003Cstrong>フレーム名を見える形で管理できるプラグイン\u003C/strong>です。\u003Cbr>\u003Cbr>オートレイアウトで画面をまとめるとフレーム名が表示されなくなり、どの画面なのか分かりづらくなります。せっかく付けた名前も活かせず、確認や共有の手間が増えていました。\u003Cbr>そこで、フレーム名をラベルとして画面上に配置し、\u003Cstrong>ラベルと画面をオートレイアウトでまとめる\u003C/strong>ことで、見た目を崩さずに名前を表示できるようにしました。フレーム名を変更すれば\u003Cstrong>ラベルや構造にも反映される\u003C/strong>ため、個別に修正する必要もありません。\u003C/p>\u003Cp>\u003Cstrong>使い方\u003C/strong>\u003C/p>\u003Col>\u003Cli>\u003Cstrong>ラベルを付与したいフレームを選択(複数可)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>プラグインを実行\u003C/strong>\u003C/li>\u003C/ol>\u003Cp>\u003Cspan style=\"color: #999999\">※フレーム名を変更した場合は再実行するとラベルにも反映されます\u003C/span>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1106f8a898dd4dfd9e8aa2e917ab1f00/Frame%20Labeler.png\" alt=\"Frame Labeler\" width=\"2300\" height=\"1388\">\u003C/figure>\u003Ch2 id=\"h30d8b8ca78\">Variable Exporter\u003C/h2>\u003Cp>Variables の情報をもとに、\u003Cstrong>スタイルシートをそのまま書き出せるプラグイン\u003C/strong>です。\u003Cbr>\u003Cbr>Variablesでデザインを管理していても、最終的にはスタイルガイドを別途整える必要があり、同じ内容を作り直す手間が発生していました。\u003Cbr>そこで、Variablesの内容をそのままスタイルとして書き出すことで、\u003Cstrong>デザインと資料を分けずに管理\u003C/strong>できるようにしました。スタイルシート作成にかかる時間も短縮されています。\u003C/p>\u003Cp>\u003Cspan style=\"color: #999999\">※テキストサイズの反映についてはまだ調整中です\u003C/span>\u003C/p>\u003Ch2 id=\"ha214098e44\">まとめ\u003C/h2>\u003Cp>今回紹介したプラグインは、どれも大きな機能ではありませんが、\u003Cstrong>日々の細かい作業を確実に減らしてくれるもの\u003C/strong>です。\u003Cbr>画面の準備や整理、スタイルの書き出しといった工程をまとめて効率化することで、手を動かす時間を減らし、\u003Cstrong>設計や検討に集中できる状態\u003C/strong>をつくっています。\u003C/p>\u003Cp>社内で進めているAIエージェントの検証も含め、こうした取り組みを通して、これまで手作業で行っていた部分を少しずつ置き換えられるようになってきました。結果として、作業負担の軽減だけでなく、ミスの削減にもつながっています。\u003C/p>\u003Cp>今回紹介したもの以外にも、まだ試している段階のものや、これから改善していくものもあります。\u003Cstrong>今後も新しく作ったプラグインや運用の変化があれば、この記事に追記していく予定\u003C/strong>です。\u003C/p>\u003Cp>引き続き、デザイン業務の中で「減らせる作業」を見つけながら、より効率的に進められる方法を探っていきます。\u003C/p>",{"id":57,"eyecatch":58,"publishedAt":62,"createdAt":63,"title":64,"is_html":19,"content2":65},"nazotoki",{"url":59,"height":60,"width":61},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1237f7caf6704f568fb90b1c3c65bcd3/s2-nazotoki.png",1201,1944,"2026-03-30T08:35:07.001Z","2026-03-17T06:24:17.497Z","Web サイトを使った謎解きを作ってみた","\u003Cp>毎朝飲んでるトマトジュースがついに40円も値上げしてしまいました…。\u003C/p>\u003Cp style=\"text-align: start\">この記事は、社内イベント「\u003Ca href=\"https://www.s2factory.co.jp/blog/tea/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C/u>\u003C/a>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社の \u003Ca href=\"https://x.com/s2_takano\" target=\"_blank\" rel=\"noopener noreferrer\">takano\u003C/a> が、\u003Cstrong>「謎解き」\u003C/strong>をテーマに発表を行いました。\u003C/p>\u003Chr>\u003Cp>\u003Cbr>もともと謎解きが好きで、街歩き型のイベントや脱出ゲームなどにもよく参加しているほか、また最近では、自宅で遊べるキット型の謎解きなどにも手を出しています。\u003C/p>\u003Cp>その流れで、\u003Cstrong>今回自分でも謎解きを作ってみました。\u003C/strong>\u003C/p>\u003Cp>「謎解き」と言われても、あまり馴染みがないとイメージしづらいかもしれません。\u003Cbr>そもそも謎解きとはどういうものなのか。そこから説明したいと思います。\u003C/p>\u003Ch2 id=\"heb6bf4fdb1\">謎解きとは\u003C/h2>\u003Cp>まずはクイズとの違いから見てみます。\u003Cbr>たとえば、こんな問題です。\u003C/p>\u003Cblockquote>\u003Cp>\u003Cstrong>小田原北条氏の三代目は氏康ですが、その三男は北条氏照です。\u003Cbr>では、彼が築いた八王子にある山城といえば？\u003C/strong>\u003C/p>\u003C/blockquote>\u003Cp>答えは「\u003Cspan style=\"color: #ffffff\">八王子城\u003C/span>」。\u003Cbr>\u003Cbr>この問題は、知識がないと解くことができません。\u003Cbr>一方で、謎解きは少し性質が異なります。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/01968bad337e4b32a6ea03bd0288fd8e/%E8%AC%8E%E8%A7%A3%E3%81%8D%E8%BF%B7%E8%B7%AF.png?w=450&h=402\" alt=\"謎解き迷路\" width=\"450\" height=\"402\">\u003C/figure>\u003Cp>\u003Cbr>この問題を解くと、\u003Cspan style=\"color: #000000\">「\u003C/span>\u003Cspan style=\"color: #ffffff\">ウジテル\u003C/span>\u003Cspan style=\"color: #000000\">」\u003C/span>という答えが出てきます。\u003Cbr>\u003Cbr>\u003Cstrong>クイズが知識を前提にしているのに対して、謎解きは問題の中にある法則やヒントに気づく(閃く)ことで、答えにたどり着きます。\u003C/strong>北条氏照という人物を知らなくても解ける。これが、クイズと謎解きの大きな違いです。\u003C/p>\u003Cp>考えても分からない時間があって、\u003Cstrong>ふと気づく瞬間\u003C/strong>がある。\u003Cstrong>その体験が、謎解きの面白さ\u003C/strong>につながっています。\u003C/p>\u003Ch3 id=\"hd0bb2aed17\">謎解きの広がり\u003C/h3>\u003Cp>謎解きの起源については諸説ありますが、主な流れを整理すると以下の通りです。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>1997年頃：\u003C/strong>\u003Ca href=\"https://www.scrapmagazine.com/column/wakuwaku01/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>株式会社SCRAP代表が親戚の集まりで宝探しイベントを始める\u003C/strong>\u003C/a>\u003C/li>\u003Cli>\u003Cstrong>2001年：リアル宝探しの開始(タカラッシュ)\u003C/strong>\u003Cul>\u003Cli>現実空間で楽しむ謎解きが登場。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>2004年：『\u003C/strong>\u003Ca href=\"https://ja.wikipedia.org/wiki/%E8%84%B3%E5%86%85%E3%82%A8%E3%82%B9%E3%83%86_IQ%E3%82%B5%E3%83%97%E3%83%AA\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>脳内エステ IQサプリ\u003C/strong>\u003C/a>\u003Cstrong>』放送開始\u003C/strong>\u003Cul>\u003Cli>テレビ放送としての謎解きの原点ともいえる存在です。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>2004年：『\u003C/strong>\u003Ca href=\"https://y.honkakuha.success-games.net/game/su-56-crimsonroom/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>クリムゾン・ルーム\u003C/strong>\u003C/a>\u003Cstrong>』公開\u003C/strong>\u003Cul>\u003Cli>Flashゲームとして話題になり、脱出ゲームの原点のひとつとされています。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>2007年：リアル脱出ゲーム初開催(SCRAP)\u003C/strong>\u003Cul>\u003Cli>体験型イベントとして一気に広がります。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>2012年：\u003C/strong>\u003Ca href=\"https://www.newsweekjapan.jp/stories/business/2015/06/post-3675_3.php\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>海外展開\u003C/strong>\u003C/a>\u003Cstrong>(サンフランシスコなど)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>2017年：\u003C/strong>\u003Ca href=\"https://corp.eplus.jp/press-release/detail/20171102.html\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>東京ミステリーサーカス オープン\u003C/strong>\u003C/a>\u003Cul>\u003Cli>新宿歌舞伎町に脱出ゲームや謎解きが楽しめる常設施設が誕生。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>2019年：来場者100万人突破(東京ミステリーサーカス)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>2019年：\u003C/strong>\u003Ca href=\"https://riddler.co.jp/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>RIDDLER株式会社\u003C/strong>\u003C/a>\u003Cstrong>設立\u003C/strong>\u003Cul>\u003Cli>謎解きを軸に、さまざまなメディアで体験を企画・制作するクリエイター集団。\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\u003Cp>このように、謎解きは年々盛り上がりを見せており、現在では大きな\u003Cstrong>ブーム\u003C/strong>となっています。\u003C/p>\u003Cp>たとえば、株式会社SCRAPが手がけるリアル脱出ゲームは累計参加者1,500万人を突破し、大規模な体験型イベントとして定着しました。\u003Cbr>また、「\u003Ca href=\"https://realdgame.jp/s/chikanazo2025/?link=enjoy\" target=\"_blank\" rel=\"noopener noreferrer\">地下謎への招待状\u003C/a>」のように、\u003Cstrong>鉄道や街全体を使った、日常の移動や街歩きそのものがゲームとなる企画も登場\u003C/strong>し、多くの参加者を集めています。\u003C/p>\u003Cp>それだけでなく、\u003Cstrong>企業向けのチームビルディング研修\u003C/strong>などにも取り入れられ、エンタメにとどまらない形でも活用されています。\u003C/p>\u003Ch2 id=\"h88ea32f50f\">実際に謎解きを作ってみた\u003C/h2>\u003Cp>謎解きにハマってからというもの、脱出ゲームや街歩き型の謎解き、キットを購入して遊ぶタイプのものなど、\u003Cstrong>いろいろと遊んできました\u003C/strong>。そのうちに自分でも作ってみたくなり、実際に作ってみました。\u003Cbr>\u003Cbr>実は最近、トップページをリニューアルしたこともあり、せっかくならその内容も見てもらえるような形にできないかと思い、\u003Cstrong>Web サイトを見ながら進める謎解き\u003C/strong>を作ってみることにしました。\u003C/p>\u003Ch3 id=\"h339271c395\">ストーリーとキーワードの設定\u003C/h3>\u003Cp>ストーリーについては、\u003Cstrong>「こういうことをやりたい」という方向性\u003C/strong>を決めて、\u003Ca href=\"https://gemini.google.com/app?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer\">Gemini\u003C/a> に投げて考えてもらいました。\u003C/p>\u003Cp>あわせて、伝えたいキーワードも先に決め、それを最終的な答えとして設計しています。\u003Cbr>\u003Cstrong>どのように解くとその答えにたどり着くのか\u003C/strong>という流れも、この段階で考えました。\u003C/p>\u003Cp>今回の謎解きページは、\u003Cstrong>Web サイトのログイン画面をイメージ\u003C/strong>しています。\u003Cbr>各問題を解きながら情報を集め、最終的に導き出した答えをログイン用の\u003Cstrong>パスワード\u003C/strong>として入力することでクリア！という構成にしています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1237f7caf6704f568fb90b1c3c65bcd3/s2-nazotoki.png\" alt=\"\" width=\"1944\" height=\"1201\">\u003C/figure>\u003Ch3 id=\"ha572ddd150\">謎の設計\u003C/h3>\u003Cp>最終的な答えの文字数などから、\u003Cstrong>全体の STEP 数\u003C/strong>を決めています。\u003C/p>\u003Cp>Webサイトを見てもらうことが目的だったため、\u003Cstrong>サイトを見ながら答えにたどり着くような問題\u003C/strong>を中心にしたいと考えていました。ただ、実際に作ってみると難しく、途中でその方針を維持するのが難しくなり、\u003Cstrong>完全にはやりきれず…\u003C/strong>。\u003C/p>\u003Cp>ちなみにの話ですが、謎を作るうえで便利だったのが「\u003Ca href=\"https://shiwehi.com/tools/wordsearch/\" target=\"_blank\" rel=\"noopener noreferrer\">謎解き単語検索β\u003C/a>」です。\u003Cbr>答えに「ネコ」を使いたいがそのまま見せたくない場合に、「?ねこ?」のように指定すると、前後に文字を加えた単語を辞書から探してくれます。\u003C/p>\u003Ch3 id=\"h922edff87b\">実装\u003C/h3>\u003Cp>\u003Cstrong>謎解きに使った画像は Google Slide で作成し、それをWebページに落とし込む作業は \u003C/strong>\u003Ca href=\"https://antigravity.google/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Antigravity\u003C/strong>\u003C/a> で行いました。\u003C/p>\u003Cp>実装では、\u003Cstrong>ネタバレ防止\u003C/strong>の工夫に特に気を使っています。\u003Cbr>ソースコードから答えが分かってしまわないように \u003Cstrong>Hash\u003C/strong> を使うように指示したり、次のメッセージが先に見えてしまわないよう、\u003Cstrong>動的に JavaScript ファイルを読み込む仕組み\u003C/strong>にしています。\u003C/p>\u003Cp>また、スクロールスピードや文字をタイプしているような演出についても細かく指示を出し、\u003Cstrong>体験として違和感が出ないように調整\u003C/strong>しています。\u003C/p>\u003Ch3 id=\"h98ba4996ba\">デバッグ\u003C/h3>\u003Cp>まず、\u003Cstrong>脱出ゲームに慣れているスタッフにデバッグを依頼\u003C/strong>しました。\u003Cbr>その中で、間違いや別解の発生、分かりづらい箇所などの指摘を受け、内容や画像を修正しています。\u003C/p>\u003Cp>その後、別のスタッフにも解いてもらい、さらに\u003Cstrong>ブラッシュアップ\u003C/strong>を行いました。\u003Cbr>人によって詰まるポイントが異なる部分もあったため、\u003Cstrong>最終的には少し難易度を下げる方向で調整\u003C/strong>しています。\u003C/p>\u003Ch3 id=\"h785b0e1177\">公開\u003C/h3>\u003Cp>\u003Cstrong>最終的にAnalyticsの設定やインフラの準備も行い、公開\u003C/strong>しました。\u003C/p>\u003Ch2 id=\"h1331c56b22\">作ってみた感想\u003C/h2>\u003Cp>本来の仕事であるコーディングと近い部分もあり、普段とは違う形で頭を使うのが新鮮で楽しかったです。\u003C/p>\u003Cp>遊んでいる人の様子をリアルタイムで見られたら、どこで悩んでいるのか、どう進めているのかなども分かって面白かったのではないかと思います。\u003Cbr>今回はそこまで設計できていませんでしたが、\u003Cstrong>Analytics の取り方\u003C/strong>を工夫すれば、どこで詰まっているのかといった\u003Cstrong>ユーザーの動きも可視化\u003C/strong>できそうだと感じました。\u003C/p>\u003Cp>一方で、途中で力尽きてしまった部分もあり、当初考えていた\u003Cstrong>「Webサイトを見てもらいながら解いてもらう構成」を最後までやりきれなかった点は少し心残り\u003C/strong>です。\u003C/p>\u003Cp>実際に作ってみて、これを仕事としてやっているプロの謎解きクリエイターのすごさを改めて実感しました。\u003Cbr>\u003Cbr>もしよければ、\u003Ca href=\"https://lab.s2factory.co.jp/nazo2026s/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>実際に遊んでみてもらえると\u003C/strong>\u003C/a>幸いです。\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://lab.s2factory.co.jp/nazo2026s/\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?url=https%3A%2F%2Flab.s2factory.co.jp%2Fnazo2026s%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>",{"id":67,"eyecatch":68,"publishedAt":72,"createdAt":73,"title":74,"is_html":19,"content2":75},"event-ai-agent",{"url":69,"height":70,"width":71},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1f7ae268ef684c979b3aef3b51d183a4/event.jpg",4000,6000,"2026-01-28T07:13:03.163Z","2026-01-16T04:00:35.807Z","AI エージェントを社内で試して見えてきたこと","\u003Cp>2 年間ほぼ毎日同じ時間に同じチョコザップに通い続けているのですが、いろんな人が来なくなりました。\u003C/p>\u003Cp>この記事は、社内イベント「\u003Ca href=\"https://www.s2factory.co.jp/blog/tea/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C/u>\u003C/a>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社の maya が、\u003Cstrong>社内で実施した「event-ai-agent」\u003C/strong>の取り組みをもとに、\u003Cstrong>「AI エージェント」\u003C/strong>について話しました。\u003C/p>\u003Chr>\u003Cp>\u003Cbr>最近、AI の話題の中で\u003Cstrong>「AI エージェント」\u003C/strong>という言葉を目にする機会が増えてきました。\u003Cbr>\u003Ca href=\"https://github.com/features/copilot?locale=ja\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub Copilot\u003C/a> のような補完型 AI や \u003Ca href=\"https://chatgpt.com/ja-JP/\" target=\"_blank\" rel=\"noopener noreferrer\">ChatGPT\u003C/a> のようなチャット型 AI とは異なり、\u003Cstrong>指示を与えると自律的にコードを書き、タスクを進めていくタイプの AI\u003C/strong> で、\u003Ca href=\"https://devin.ai/\" target=\"_blank\" rel=\"noopener noreferrer\">Devin\u003C/a> や \u003Ca href=\"https://claude.com/product/overview\" target=\"_blank\" rel=\"noopener noreferrer\">Claude Code\u003C/a> などが有名です。\u003C/p>\u003Cp>こうした AI は、便利そうに感じる一方で、実際にどこまで任せられるのか、どんな場面で使えるのかは、触ってみないと分からない部分が多いのも事実です。\u003C/p>\u003Cp>S2 には、コードを書くこと自体が好きだったり、自分でやったほうが速いと感じる人が多くいます。また、自社に権利のないデータや取り扱いに注意が必要な情報を扱う仕事が多いこともあり、\u003Cstrong>AI に任せることに対して慎重な感覚\u003C/strong>を持っている人も少なくありません。\u003Cbr>\u003Cbr>それでも今後、エージェント型 AI は広まっていくと考えられ、うまく使えれば作業の工数を抑えられる可能性もあります。そこで\u003Cstrong>「社内で AI エージェントをちゃんと使ってみる時間を作れないか」\u003C/strong>という話が社内で持ち上がりました。\u003C/p>\u003Cp>こうして立ち上がったのが、\u003Cstrong>1 か月間にわたって取り組んだ社内企画「event-ai-agent」\u003C/strong>です。\u003C/p>\u003Ch2 id=\"he4fe40370a\">AI エージェントとは\u003C/h2>\u003Cp>まずは、今回の企画の前提となる AI エージェントについて整理しておきます。\u003Cbr>\u003Cbr>ChatGPT のようなチャット型 AI は、チャットでやり取りした内容に対して、その場で回答を返す AI です。質問に答えたり、相談に応じたりといった使い方が中心になります。\u003C/p>\u003Cp>対して AI エージェントは、\u003Cstrong>目標を与えると、その達成に向けて自律的に行動する AI \u003C/strong>です。人が細かく手順を指示しなくても、状況を判断しながら処理を進め、コードを書いたりシステムに手を入れたりしながら、\u003Cstrong>複数の工程を含むタスクを一連の流れとして完了\u003C/strong>させます。\u003C/p>\u003Cp>AI エージェントの主な特徴は、次のとおりです。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>自律性(Autonomy)\u003C/strong>\u003Cbr>人の指示を逐一待たずに、自分で判断して行動できる\u003C/li>\u003Cli>\u003Cstrong>目標指向(Goal-oriented)\u003C/strong>\u003Cbr>与えられた目標を達成するために計画を立てる\u003C/li>\u003Cli>\u003Cstrong>環境認識(Perception)\u003C/strong>\u003Cbr>周囲の状況やデータを認識・理解する\u003C/li>\u003Cli>\u003Cstrong>行動実行(Action)\u003C/strong>\u003Cbr>ツールや API を使って実際に作業を行う\u003C/li>\u003Cli>\u003Cstrong>学習能力(Learning)\u003C/strong>\u003Cbr>経験から学び、振る舞いを改善していく\u003C/li>\u003C/ul>\u003Ch3 id=\"h0c83bdc0b0\">AI エージェントができること\u003C/h3>\u003Cp>AI エージェントは、さまざまな役割を担うことができます。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>カスタマーサポートエージェント\u003C/strong>\u003Cbr>顧客の質問に対応し、問題解決までを行う\u003C/li>\u003Cli>\u003Cstrong>データ分析エージェント\u003C/strong>\u003Cbr>データを収集・分析し、レポートを作成する\u003C/li>\u003Cli>\u003Cstrong>コーディングエージェント\u003C/strong>\u003Cbr>プログラムを書いたり、バグを修正したりする\u003C/li>\u003Cli>\u003Cstrong>タスク管理エージェント\u003C/strong>\u003Cbr>スケジュールを管理し、リマインダーを送る\u003C/li>\u003C/ul>\u003Cp>\u003Cstrong>MCP(Model Context Protocol)\u003C/strong> を利用することで、\u003Cstrong>外部のツールやサービスと連携した処理も可能\u003C/strong>です。\u003Cbr>例えば、\u003Ca href=\"https://www.figma.com/ja-jp/\" target=\"_blank\" rel=\"noopener noreferrer\">Figma\u003C/a> の MCP を読み込ませてデザインデータを参照したり、Gmail と連携してメールを送信したりといったこともできます。\u003C/p>\u003Ch2 id=\"h7907b76c82\">event-ai-agent\u003C/h2>\u003Cp>event-ai-agent は、\u003Cstrong>社内で AI エージェントを一定期間実際に使い、その使いどころや制約を確認するために行った取り組み\u003C/strong>です。\u003Cbr>個人で断続的に試すのではなく、\u003Cstrong>期間を区切り、参加者同士で状況を共有\u003C/strong>しながら進める形にしました。参加は希望制とし、関心のあるメンバーがそれぞれのペースで取り組めるようにしています。\u003C/p>\u003Cp>概要は以下のとおりです。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>実施期間\u003C/strong>：約 1 か月\u003C/li>\u003Cli>\u003Cstrong>使用ツール\u003C/strong>：\u003Ca href=\"https://claude.ai/login\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Claude Code\u003C/strong>\u003C/a>\u003Cul>\u003Cli>検証は、社内で用意したサンドボックス環境(EC2)上で実施\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>進め方\u003C/strong>\u003Cul>\u003Cli>期間中、各自で AI エージェントを使った検証を実施\u003C/li>\u003Cli>Slack 上の専用チャンネルで、検証内容や気づいたことを随時共有\u003C/li>\u003Cli>\u003Cstrong>週 1 回・30 分の共有会をオンラインで開催\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>期間内に 1 日、オフラインで集まり集中的に検証\u003C/strong>\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\u003Cp>\u003Cstrong>オフラインでの集中検証日には、次のレギュレーション\u003C/strong>を設けました。\u003C/p>\u003Cul>\u003Cli>人が行うのは AI エージェントへの指示出しのみ\u003C/li>\u003Cli>ソースコードを人が直接書くことは禁止\u003C/li>\u003Cli>指示用のテキストファイル作成は可\u003C/li>\u003C/ul>\u003Cp>また、本企画で設定していた\u003Cstrong>目的\u003C/strong>は次の 3 点です。\u003C/p>\u003Cul>\u003Cli>エージェント型 AI にふれるきっかけを作る\u003C/li>\u003Cli>できること・できないことを経験として知る\u003C/li>\u003Cli>今後の案件に活用できそうな可能性を探る\u003C/li>\u003C/ul>\u003Ch2 id=\"h55d45458f2\">事例紹介\u003C/h2>\u003Cp>それでは、期間中に参加者が試してみた事例について紹介します。\u003C/p>\u003Ch3 id=\"h3b8cb5ca5b\">事例 1：API 仕様書を渡してフロントエンドを作らせてみる\u003C/h3>\u003Cp>この事例では、\u003Cstrong>AI エージェントにどのような情報を渡せば、どこまでアウトプットできるのか\u003C/strong>を意識して試してみました。\u003C/p>\u003Cp>API 仕様書を入力として渡し、「この仕様をもとにフロントエンドを作ってほしい」と指示しました。AI エージェントに依頼した内容は次のとおりです。\u003C/p>\u003Cul>\u003Cli>作業用のブランチを作成する  \u003C/li>\u003Cli>簡単な API を実装する  \u003C/li>\u003Cli>実装後に動作確認を行う  \u003C/li>\u003Cli>README を作成する  \u003C/li>\u003Cli>.gitignore を設定する  \u003C/li>\u003Cli>成果物を commit し、リポジトリに push する  \u003C/li>\u003C/ul>\u003Cp>実装手順の分解や、Git 操作を含めた作業はすべて AI エージェントが行っています。\u003Cbr>その結果、生成されたのが下のアプリケーションです。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/706b8cb607f84b058316d5782a0b380b/%E4%BA%8B%E4%BE%8B-1.png?w=1000&h=639\" alt=\"生成されたフロントエンド\" width=\"1000\" height=\"639\">\u003C/figure>\u003Cp>\u003Cbr>仕様書という限られた情報からでも、フロントエンドの形を容易に作れることがわかります。\u003C/p>\u003Ch3 id=\"h1f5ee5b46a\">事例 2：Auth0 のエクスポートデータを変換するプログラム\u003C/h3>\u003Cp>\u003Cstrong>Auth0 からエクスポートしたデータを ion 形式に変換するプログラム\u003C/strong>の作成を AI エージェントに任せました。\u003Cbr>変換処理の実装に加えて、\u003Cstrong>テストデータの作成までまとめて行ってくれた\u003C/strong>点は便利に感じられました。\u003Cbr>\u003Cbr>一方で、最初に生成されたプログラムではパフォーマンス面に問題があり、特に処理の中で \u003Ca href=\"https://ja.wikipedia.org/wiki/Jq_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E)\" target=\"_blank\" rel=\"noopener noreferrer\">jq\u003C/a> の呼び出し回数が非常に多い点が気になりました。\u003C/p>\u003Cp>改善方法を指示することで、より良いプログラムにはなりましたが、\u003Cstrong>現状のまま実案件で使うのは難しそう\u003C/strong>に感じてしまいました。\u003C/p>\u003Ch3 id=\"h69e5e36448\">事例 3：古いメモデータの移行を手伝ってもらう\u003C/h3>\u003Cp>業務とは直接関係ないものの、日常的に発生しがちな作業として、古いメモデータの移行を AI エージェントに任せてみた事例です。\u003C/p>\u003Cp>\u003Cstrong>かんたん Markdown 形式で保存していたメモデータを、Markdown ファイルとして整理・変換する作業\u003C/strong>を行っています。変換処理はまとめて AI エージェントに指示しました。\u003C/p>\u003Cp>その結果、\u003Cstrong>全体の大部分は問題なく変換\u003C/strong>され、実用上は十分な精度で移行できました。特に、\u003Cstrong>ファイル名の正規化(NFD から NFC への変換)についても、指示だけで対応できた点は印象的\u003C/strong>でした。正規化の考え方自体も、この過程で把握することができています。\u003C/p>\u003Cp>しかし、\u003Cstrong>画像の埋め込み部分については正しくパースできないケース\u003C/strong>があり、いくつかのファイルは手動での確認が必要でした。\u003C/p>\u003Ch3 id=\"h8158e69e7a\">事例 4：積読管理\u003C/h3>\u003Cp>積読本を管理するための簡単な Web アプリ。\u003Cbr>\u003Cstrong>本棚のように本が並ぶ UI\u003C/strong> にしたい、という指示を出したところ、\u003Cstrong>レイアウトや見た目も含めて実装\u003C/strong>されています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/85cc7f4396fd4e29b5c69939d3218942/%E7%A9%8D%E8%AA%AD%E7%AE%A1%E7%90%86.png?w=1000&h=808\" alt=\"積読管理\" width=\"1000\" height=\"808\">\u003C/figure>\u003Cp>\u003Cbr>途中一度動かなくなってしまい、その際、AI エージェントがかなりの勢いでソースコード全体を確認し始めたため少し不安になりましたが、2 回ほど修正を重ねることで最終的には正常に動作する状態になりました。\u003C/p>\u003Ch3 id=\"hab78e183bc\">事例 5：競馬レース予想アプリ\u003C/h3>\u003Cp>競馬のレース条件を入力すると、AI が予想結果を生成するアプリです。\u003C/p>\u003Cp>レースの種類や距離、出走頭数を入力し、あわせて各馬の名前を登録したうえで「レースを登録」すると、\u003Cstrong>AI が予想\u003C/strong>を行います。\u003Cbr>単勝・複勝といった基本的な馬券に加え、三連単や三連複など、頭数や順序によって成立条件が変わる馬券についても、\u003Cstrong>あらかじめルールを伝えたうえで結果を出す構成\u003C/strong>になっています。\u003C/p>\u003Cp>予想を実行すると、\u003Cstrong>UI 上で馬が走る簡単なアニメーションが表示\u003C/strong>され、その後に予想結果が表示されます。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/f43390b16e574027a75bf6ab2d8c2646/%E4%BA%88%E6%83%B3%E7%94%BB%E9%9D%A2.png?w=1000&h=809\" alt=\"入力と結果画面\" width=\"1000\" height=\"809\">\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1a2c9e8778004d0fb0b7f57fe5995b2e/%E3%83%AC%E3%83%BC%E3%82%B9%E4%B8%AD.png?w=1000&h=655\" alt=\"レース中\" width=\"1000\" height=\"655\">\u003C/figure>\u003Ch2 id=\"h450f1919de\">オフライン会について\u003C/h2>\u003Cp>オフライン会では、\u003Cstrong>X を模倣したアプリ\u003C/strong>を作る取り組みを行いました。\u003Cbr>やっていいのは \u003Cstrong>AI エージェントへの指示出しのみ\u003C/strong>とし、フロントエンド・バックエンドを含むコードはすべて Claude Code に書かせる、というレギュレーションを設けています。\u003C/p>\u003Cp>参加者それぞれが自分の環境で AI エージェントに指示を出し、完成したものを持ち寄って見せ合いました。\u003Cstrong>一発の指示でどこまで書かせられるかが重要なポイントとなり、細かい修正を重ねるのは難しい\u003C/strong>と感じる場面もありました。\u003C/p>\u003Cp>私が作ったものはこちら。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/e95d1594116a43b6b2d76a0a56c62312/%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E7%94%BB%E9%9D%A2.png?w=1000&h=659\" alt=\"ログイン画面\" width=\"1000\" height=\"659\">\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/390ced090a264df1b98fecdaa62d38bd/%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%A9%E3%82%A4%E3%83%B3.png?w=1000&h=665\" alt=\"タイムライン\" width=\"1000\" height=\"665\">\u003C/figure>\u003Cp>\u003Cbr>ファンタジーなデザインで、と伝えたところ、この見た目になりました。\u003Cbr>投稿や削除に加えて、フォロー・アンフォロー、プロフィール編集、検索機能まで、\u003Cstrong>必要な機能は一通りちゃんと実装\u003C/strong>されています。\u003C/p>\u003Ch2 id=\"h40eb6b6976\">AI エージェントと S2 の今後\u003C/h2>\u003Cp>今回利用していた \u003Ca href=\"https://claude.com/ja-jp/pricing\" target=\"_blank\" rel=\"noopener noreferrer\">Clauded の Max プラン\u003C/a>については、上限まで使い切る参加者はいませんでした。\u003Cbr>今後は、\u003Cstrong>API キーを各人に発行し、使用量を把握しながら運用していく\u003C/strong>つもりです。従量課金ではありますが、事前チャージ制のため、コスト面では比較的管理しやすいと考えています。\u003C/p>\u003Cp>また、全体向けに AI エージェント利用時の\u003Cstrong>ガイドラインを作成\u003C/strong>し、\u003Cstrong>セキュリティや取り扱いのルールを整理\u003C/strong>していこうと思っています。\u003C/p>\u003Ch2 id=\"ha214098e44\">まとめ\u003C/h2>\u003Cp>event-ai-agent を通して、AI エージェントを実務に近い形で試すことができました。\u003C/p>\u003Cp>当初は\u003Cstrong>「まずは触ってみるきっかけを作る」ことを主な目的\u003C/strong>としていましたが、実際に使ってみる中で、\u003Cstrong>想像以上に実用的\u003C/strong>だと感じました。\u003Cbr>\u003Cstrong>定例や共有の場を設けたことで、「どう使っていけそうか」を継続的に話せた点も良かった\u003C/strong>と思います。週 1 回の定例後に、Slack チャンネルでのやり取りが活発になる様子も見られました。\u003C/p>\u003Cp>ですが、できるだけセキュアに使うための環境づくりやガイドライン整備については、思っていた以上に手間がかかることもわかりました。\u003C/p>\u003Cp>\u003Cstrong>自分でコードを書かなくても、フロントエンドからバックエンドまで含めて、実際に動くものが一通りそろうのは大きな利点\u003C/strong>だと感じています。ただし、まったく新しい仕組みを一から作るのは難しそうで、一般的によくある構成やパターンを持つものほど相性が良い、という印象もあります。\u003C/p>\u003Cp>今回の参加者は普段からプログラミングを書いている人ばかりでしたが、必ずしもそうでない人でも、日本語で指示を整理して伝えることで、さまざまなものが作れる可能性を感じました。\u003C/p>\u003Cp>今後は、社内でより多くの立場の人にも実際に使ってみてほしいと思っています。\u003C/p>",{"id":77,"eyecatch":78,"publishedAt":81,"createdAt":82,"title":83,"is_html":19,"content2":84},"ai-generated-campaign-site",{"url":79,"height":80,"width":70},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/127f63b9fa8b47eb93d3f6d7c53fe605/website.png",2000,"2026-01-14T08:48:50.112Z","2025-12-18T04:44:24.111Z","生成 AI を活用したコンテンツ生成キャンペーンサイトの制作事例","\u003Cp>近年、広告・キャンペーン領域では、生成 AI を活用したユーザー参加型コンテンツが増えています。\u003Cbr>\u003Cstrong>ユーザーの入力をもとにコンテンツを生成し、その結果を画像として保存したり、SNS でシェアしたりできる仕組み\u003C/strong>は、体験性と拡散性の両面を備えた手法です。\u003C/p>\u003Cp>具体的な案件名は出しませんが、今回は弊社で制作した\u003Cstrong>「生成 AI を利用したコンテンツ生成キャンペーンサイト」\u003C/strong>について、どのような構成で、どんな実装を行ったのかを紹介したいと思います。\u003C/p>\u003Ch2 id=\"h9707d3a59a\">概要\u003C/h2>\u003Cp>今回紹介するのは、生成 AI を活用したコンテンツ生成型のキャンペーンサイトです。\u003Cbr>ユーザーが任意の文章を入力すると、その内容をもとに\u003Cstrong>架空の四字熟語を生成し、さらにその四字熟語を配置したデザイン画像を自動で生成\u003C/strong>します。\u003C/p>\u003Cp>生成された画像は、サイト上でそのまま閲覧できるだけでなく、SNS へのシェアや、ユーザーの端末への保存にも対応しています。\u003Cbr>診断コンテンツのように気軽に参加でき、生成結果をそのままアウトプットとして扱える構成です。\u003C/p>\u003Col>\u003Cli>\u003Cstrong>ユーザーが文章を入力\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>文章をもとに架空の四字熟語を生成\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>生成された四字熟語を使って画像を生成\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>生成結果を表示・保存・シェア\u003C/strong>\u003C/li>\u003C/ol>\u003Ch2 id=\"hb8b4f4df49\">生成 AI による四字熟語生成とチェック機構\u003C/h2>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/da95ca0e974c4a9ebd9a5692781467ac/check.png\" alt=\"\" width=\"1024\" height=\"595\">\u003C/figure>\u003Cp>\u003Cbr>ユーザーが入力した文章をもとに、\u003Cstrong>架空の四字熟語を生成する部分には、生成 AI の API を利用\u003C/strong>しています。入力されたテキストの内容を踏まえ、意味的に成立する四字熟語が生成されます。\u003C/p>\u003Cp>ただし、キャンペーン用途として公開する以上、生成結果をそのまま無条件に表示するわけにはいきません。なので、生成結果に対していくつかの\u003Cstrong>チェック機構\u003C/strong>を実装しています。\u003C/p>\u003Cp>具体的には、\u003Cstrong>プロンプトによる制御\u003C/strong>に加え、あらかじめ用意した \u003Cstrong>NG 漢字リストを用いたチェック\u003C/strong>を行っています。\u003Cbr>生成された四字熟語にネガティブな意味合いを持つ漢字や、不適切と判断される文字が含まれていた場合は、その結果を採用せず、\u003Cstrong>再度生成処理を行う\u003C/strong>仕組みです。\u003C/p>\u003Cp>\u003Cstrong>プロンプトにすべてを依存せず、後段でチェックを行う構成とすることで、実運用を想定した安定した生成フローを実現\u003C/strong>しています。\u003C/p>\u003Ch2 id=\"h05a3315797\">四字熟語を使った画像生成\u003C/h2>\u003Cp>生成された四字熟語は、そのままテキストとして表示するのではなく、\u003Cstrong>あらかじめ用意したデザインをもとに、画像として出力\u003C/strong>しています。\u003C/p>\u003Cp>\u003Cstrong>画像生成にあたっては、いわゆる生成 AI による画像生成は使用していません。\u003C/strong>\u003Cbr>文字の配置やサイズ、色、背景とのバランスなどは、事前に設計したデザインルールをもとに、\u003Cstrong>画像編集ライブラリを用いて動的に生成\u003C/strong>しています。\u003C/p>\u003Cp>四字熟語は内容によって文字の印象やバランスが変わるため、単純に文字を載せるだけでは、見た目にばらつきが出てしまいます。\u003Cbr>そこで文字数や構成を考慮しながら、配置やスタイルを調整する処理を行い、\u003Cstrong>どの生成結果でも一定のビジュアルクオリティを保てるように\u003C/strong>しています。\u003C/p>\u003Cp>\u003Cstrong>生成 AI は四字熟語を作る部分にのみ使用し、画像表現そのものは、これまでの Web 制作やビジュアル制作で培ってきた手法を用いて制御\u003C/strong>しています。\u003C/p>\u003Ch2 id=\"h543fa3266b\">キャンペーン用途を想定したインフラ設計と安定稼働\u003C/h2>\u003Cp>本コンテンツでは、生成AIによる処理や画像生成を行うため、ユーザーの操作に対して即時に結果を返すことが難しい場面があります。\u003Cbr>さらに\u003Cstrong>キャンペーンサイトの場合、SNS での拡散などをきっかけに、短時間でアクセスが集中するケース\u003C/strong>も想定されます。\u003C/p>\u003Cp>そのため、生成処理を含むバックエンドを \u003Ca href=\"https://aws.amazon.com/jp/pm/lambda/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>AWS Lambda\u003C/strong>\u003C/a> 上に構築し、同時アクセスが発生しても処理が滞りにくい構成を採用しました。\u003Cbr>アクセス数の増減に応じて自動的にスケールすることで、キャンペーン期間中も安定した動作を維持できるようにしています。\u003C/p>\u003Ch2 id=\"ha214098e44\">まとめ\u003C/h2>\u003Cp>今回は、「生成AIを利用したコンテンツ生成キャンペーンサイト」の一例を紹介しました。\u003Cbr>\u003Cbr>ユーザー参加型のコンテンツでは、\u003Cstrong>生成 AI の使いどころと制御、そして安定して運用できる構成が重要\u003C/strong>になります。\u003Cbr>弊社では、こうした点を踏まえた制作をこれまで複数手がけてきました。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>毎ドラ部 AI ソングメーカー\u003C/strong>\u003Cbr>ユーザーが撮影した写真をアップロードすると、AI により歌詞が自動生成され、\u003Cbr>オリジナルのテーマソングとして楽しめるコンテンツです。\u003Cbr>同時に、写真からジャケットイラストも自動生成されます。\u003Cbr>（弊社は Web システム開発・インフラ構築を担当）\u003Cp>\u003Cbr>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/work/detail/georgia-song-maker\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fwork%2Fdetail%2Fgeorgia-song-maker&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Cp>\u003Cbr>\u003C/p>\u003C/li>\u003Cli>\u003Cstrong>毎ドラ部 AI イラストメーカー\u003C/strong>\u003Cbr>ユーザーが撮影した写真を人気イラストレーター風のタッチに AI で変換し、生成されたイラストを日本全国のマップ上に投稿・共有できるキャンペーンサイトです。\u003Cbr>（弊社はテクニカルディレクション、Web 制作、システム開発、インフラ構築を担当）\u003Cp>\u003Cbr>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/work/detail/georgia\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fwork%2Fdetail%2Fgeorgia&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003C/li>\u003C/ul>\u003Cp>\u003Cbr>\u003Cstrong>「生成AIを活用したコンテンツ制作」\u003C/strong>についてご相談があれば、ぜひお気軽にお問い合わせください。\u003Cbr>これまでの知見をもとに、企画段階からの設計・制作・安定稼働までお手伝いします。\u003C/p>",{"id":86,"eyecatch":87,"publishedAt":91,"createdAt":92,"title":93,"is_html":19,"content2":94},"edge-ai",{"url":88,"height":89,"width":90},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/6b31f88cd3094105a3aee9ff9cff3f0e/AI.jpg",2880,5120,"2025-11-18T08:07:56.805Z","2025-10-20T05:28:48.102Z","クラウドに頼らないAI ― エッジAIを試してみた","\u003Cp>温泉で滑って転んで怪我をしました。\u003C/p>\u003Cp style=\"text-align: start\">この記事は、社内イベント「\u003Ca href=\"https://www.s2factory.co.jp/blog/tea/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C/u>\u003C/a>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社の \u003Ca href=\"https://x.com/s2_takano\" target=\"_blank\" rel=\"noopener noreferrer\">takano\u003C/a> が\u003Cstrong>「エッジ AI」\u003C/strong>について話しました。\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/interview-3/\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&url=http%3A%2F%2Fs2factory.co.jp%2Fblog%2Finterview-3%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Chr>\u003Cp>\u003Cbr>この数年で、\u003Cstrong>画像生成や文章生成をはじめとする AI 技術\u003C/strong>が急速に広がり、Web サービスやアプリにも活用されるようになってきました。\u003Cbr>しかし、実際に AI を導入しようとすると次のような課題があるように思います。\u003C/p>\u003Cp>\u003Cstrong>AI の処理には GPU を搭載した高性能なマシンが必要\u003C/strong>で、基本的には 1 台(1 GPU)につき 1 処理ずつしか実行できません。そのため、Web サービスのように複数のユーザーがアクセスする環境では、次のような問題が発生します。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>処理中のユーザーに待ってもらう必要がある(遅延)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>サーバーの台数を増やして対応する必要がある(コスト増)\u003C/strong>\u003C/li>\u003C/ul>\u003Cp>また、\u003Cstrong>外部の AI サービスを API 経由で利用する方法\u003C/strong>も一般的になっていますが、これにも別の問題が。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>データを外部に送信する必要があり、プライバシー面での懸念がある\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>リクエストごとに費用が発生するため、アクセス量によってコストが変動する\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>自分でトレーニングしたモデルを使いづらい\u003C/strong>\u003C/li>\u003C/ul>\u003Cp>特に、\u003Cstrong>アクセス数が読みにくいサービスではコスト見積もりが難しく\u003C/strong>、運用面での負担をどう抑えるかが検討課題です。\u003C/p>\u003Cp>そうした状況の中で、\u003Cstrong>「ユーザーの手元の端末で処理してしまえばいいのでは」\u003C/strong>という発想が生まれました。\u003Cbr>近年は PC やスマートフォンの性能が大きく向上し、もはやちょっとしたサーバー並みです。\u003Cbr>\u003Cbr>そこで注目されるようになったのが、\u003Cstrong>エッジAI\u003C/strong> です。\u003C/p>\u003Ch2 id=\"hfe9b4b1d71\">エッジ AI とは\u003C/h2>\u003Cp>エッジAI とは、\u003Cstrong>AI の処理をクラウド上ではなくユーザーの手元にあるデバイス(PC・スマートフォン・IoT 機器など)で実行する技術\u003C/strong>のことです。\u003Cbr>\u003Cbr>その一例が、\u003Cstrong>ブラウザ上で JavaScript などを使って AI を動かす仕組み\u003C/strong>。\u003Cbr>ブラウザの中で AI モデルを読み込み、端末の CPU や GPU を使って推論を行います。\u003Cbr>\u003Cbr>クラウドを経由しないため、次のような\u003Cstrong>メリット\u003C/strong>があります。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>インフラコストがかからない\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>ローカル完結でユーザーのデータは外部に送られないためプライバシーが守られる\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>低遅延での応答が可能\u003C/strong>(個人の端末性能に依存するが、今後さらに高性能になっていくと考えられる)\u003C/li>\u003C/ul>\u003Cp>一方で、\u003Cstrong>デメリット\u003C/strong>も存在します。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>バッテリー消費や発熱の増加\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>モデルのダウンロードによる通信負荷\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>AI モデルやコードをユーザー側に読み込ませる必要があり、その中身を確認できてしまう\u003C/strong>(一般的なフロントエンドの課題でもあるが、同じものが作れてしまう)\u003C/li>\u003C/ul>\u003Cp>その中でも、個人的に特に大きいと感じているのがモデルのダウンロードの問題です。\u003Cbr>ここからは、その点について少し掘り下げてみます。\u003C/p>\u003Ch3 id=\"h609c402fc0\">モデルのダウンロード問題\u003C/h3>\u003Cp>\u003Cstrong>AI を端末側で動かすためには、学習済みモデルをユーザーの環境に読み込ませる\u003C/strong>必要があります。\u003C/p>\u003Cp>しかしこのモデルファイルが非常に大きく、それなりに良い LLM のもので \u003Cstrong>4GB 規模\u003C/strong>になることもあります。\u003Cbr>\u003Cstrong>モデルを端末に転送するだけで負荷が大きく、通信量も無視できません。\u003C/strong>\u003C/p>\u003Cp>さらに、Web のキャッシュは\u003Cstrong>サイト単位で管理される\u003C/strong>ため、同じモデルを使っていても\u003Cstrong>サイトが違えば再度ダウンロード\u003C/strong>が発生します。\u003Cbr>複数サイトで展開する場合や、性能の低い端末では現実的ではありません。\u003C/p>\u003Cp>加えて、\u003Cstrong>配信元のサーバーでも転送料金が膨大になる\u003C/strong>可能性があります。\u003Cbr>\u003Cstrong>「どこにモデルを置き、どのように配信するのか」\u003C/strong>これがエッジAIを運用する上で避けて通れない問題です。\u003C/p>\u003Ch3 id=\"h554478e0cf\">解決に向けて\u003C/h3>\u003Cp>通信量の課題を根本的に解決する方法は、まだ確立されていません。\u003Cbr>ただし、いくつか\u003Cstrong>現実的なアプローチ\u003C/strong>が考えられます。\u003Cbr>\u003Cbr>たとえば、\u003Cstrong>Web ではなくネイティブアプリとして提供する方法\u003C/strong>です。\u003Cbr>最近のゲームアプリのように大容量データが当たり前になっていることを考えると、数 GB のモデルでも受け入れられるかもしれません。\u003Cbr>\u003Cbr>また、管理画面など特定のユーザーが使う場面では、\u003Cstrong>ローカルにモデルをダウンロードしてもらい、利用のたびにそれを利用してもらう運用\u003C/strong>も考えられます。\u003Cbr>ただし、利用頻度が限られている場合は、\u003Cstrong>サーバー側で処理した方が合理的\u003C/strong>かもしれません。\u003C/p>\u003Cp>また今後、\u003Cstrong>Android や iOS に AI モデルがプリインストール\u003C/strong>され、それを呼び出す API が標準化されることがあれば、大きなブレイクスルーになるでしょう。\u003Cbr>\u003Cbr>IoT のように端末内部にモデルを組み込める環境では、すでにエッジAIと相性が良く、\u003Cstrong>Raspberry Pi などの小型デバイス\u003C/strong>でも AI を動かすことができます。\u003Cbr>このような構成を活かせば、IoT デモやおもちゃのような試作も手軽に行えるでしょう。\u003C/p>\u003Ch2 id=\"hb6a0beb984\">Google AI Edge\u003C/h2>\u003Cfigure>\u003Ca href=\"https://ai.google.dev/edge?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/62f25705c74b45ca86b111298900c573/google_ai_edge.png\" alt=\"Google AI Edgeロゴ\" width=\"1595\" height=\"754\">\u003C/a>\u003C/figure>\u003Cp>\u003Cbr>\u003Cbr>Google はクラウド上の AI サービスだけでなく、\u003Cstrong>デバイス上で AI を動かすためのプラットフォーム「\u003C/strong>\u003Ca href=\"https://ai.google.dev/edge?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Google AI Edge\u003C/strong>\u003C/a>\u003Cstrong>」も提供しています。\u003Cbr>その中でも特に今回紹介したいのが、\u003C/strong>\u003Ca href=\"https://ai.google.dev/edge/litert?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>LiteRT\u003C/strong>\u003C/a>\u003Cstrong> と \u003C/strong>\u003Ca href=\"https://ai.google.dev/edge/mediapipe/solutions/guide?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>MediaPipe\u003C/strong>\u003C/a>\u003Cstrong> \u003C/strong>という 2 つのランタイムです。\u003C/p>\u003Ch3 id=\"h9b1b0e2e79\">LiteRT\u003C/h3>\u003Cp>LiteRT は、\u003Cstrong>一般的な AI モデルを軽量化し、ブラウザやスマートフォン上で動作させるための仕組み\u003C/strong>です。\u003Cbr>既存の優秀な学習済みモデルを変換して利用できるため、\u003Cstrong>特別な環境構築をしなくても、端末上で AI を実行できる\u003C/strong>のが特徴です。\u003C/p>\u003Cp>また、\u003Ca href=\"https://ja.wikipedia.org/wiki/LoRA\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>LoRA(Low-Rank Adaptation)\u003C/strong>\u003C/a>\u003Cstrong>にも対応\u003C/strong>しています。\u003Cbr>これは\u003Cstrong>「既存モデルに追加の重みを足すことで、学習済みモデルを簡単にカスタマイズできる」\u003C/strong>アプローチで、製品説明の自動生成など、特定タスクに合わせた出力を調整する際に便利です。\u003Cbr>LoRA を使えば、モデル全体を再学習させなくても、必要な部分だけを差し替えて使うことができます。\u003C/p>\u003Ch3 id=\"h6fdeebb4fe\">MediaPipe\u003C/h3>\u003Cp>もう一つの MediaPipe は、\u003Cstrong>ウェブカメラなどを通じて映像から人の動きや物体を検出できるライブラリ\u003C/strong>です。\u003Cbr>\u003Cbr>手や顔の動きの認識だけでなく、\u003Cstrong>LLM の推論やマルチモーダル処理\u003C/strong>にも対応しています。\u003Cstrong>「マルチモーダル」とは、音声・映像・テキストなど異なる種類の情報を同時に扱う技術\u003C/strong>のこと。\u003Cbr>これまでクラウドでしか実現できなかった高度な処理を、\u003Cstrong>ブラウザ上で動かせる\u003C/strong>のが大きな特徴です。\u003C/p>\u003Cp>Google はこれらの機能を体験できる \u003Ca href=\"https://mediapipe-studio.webapps.google.com/home\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>MediaPipe Studio\u003C/strong>\u003C/a>\u003Cstrong> \u003C/strong>というデモサイトも公開しており、簡単に試せるようになっています。ぜひ遊んでみてください。\u003C/p>\u003Ch2 id=\"h16488962fd\">自作デモ\u003C/h2>\u003Cp>自分で簡単なデモも作ってみました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/fa2aed28987e49cb8871459d27df31b5/%E3%83%87%E3%83%A2.png?w=400&h=536\" alt=\"demo\" width=\"400\" height=\"536\">\u003C/figure>\u003Cp>\u003Cbr>今回は約 4GB のモデルをブラウザに読み込ませて動作を確認しました。\u003Cbr>都度ダウンロードするのは現実的ではないため、ローカルに置いたファイルを読み込んでいます。\u003Cbr>読み込みに少し時間はかかりましたが、完了後はすぐに動作しました。\u003C/p>\u003Cp>上部のテキストボックスに指示を入力します。試しに今日の天気を聞いてみたところ、すぐに回答が返ってきました。\u003C/p>\u003Cp>\u003C/p>\u003Cdiv style=\"max-width: 56vh;\">\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 177.7778%;\">\u003Ciframe src=\"https://www.youtube.com/embed/RfJ0TyvyVqs?rel=0&cc_load_policy=1\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\" referrerpolicy=\"strict-origin\">\u003C/iframe>\u003C/div>\u003C/div>\u003Cp>\u003Cbr>次に、下のみかんの画像を渡して画像認識をやってみます。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/6c8742dbc75741e5a71942991972e6f0/%E3%81%BF%E3%81%8B%E3%82%93.jpg\" alt=\"\" width=\"800\" height=\"533\">\u003C/figure>\u003Cp>\u003Cbr>入力した内容は以下の通りです。\u003C/p>\u003Cpre>\u003Ccode>あなたは画像認識APIです。  \n次の形式でレスポンスしてください。  \n\n{\n  "result": true,\n  "score": 95\n}\n\n次の画像にミカンが写っていれば true を、写っていなければ false を返してください。  \nミカンが写っていた場合は、写り方を 100 点満点で採点し、score として返してください。  \n\u003C/code>\u003C/pre>\u003Cdiv style=\"max-width: 56vh;\">\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 177.7778%;\">\u003Ciframe src=\"https://www.youtube.com/embed/x4BBhaQSa60?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\" referrerpolicy=\"strict-origin\">\u003C/iframe>\u003C/div>\u003C/div>\u003Cp>\u003C/p>\u003Cp>\u003Cstrong>ミカンが写っていると正しく判定\u003C/strong>され、スコアも返ってきましたね。\u003Cbr>\u003Cbr>続いてレモンの画像を渡して、「\u003Ccode>false\u003C/code> の場合は理由も返すように」と条件を加えてみました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv style=\"max-width: 56vh;\">\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 177.7778%;\">\u003Ciframe src=\"https://www.youtube.com/embed/U-kIYmroG8E?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\" referrerpolicy=\"strict-origin\">\u003C/iframe>\u003C/div>\u003C/div>\u003Cp>\u003Cbr>正しく判定できているようです。\u003C/p>\u003Cp>他にも、画像にテキストが含まれている場合でも、それをしっかりと認識し、内容を抽出することができます。\u003Cbr>さらに、画像の中の色を識別してカラーコードを判定することも可能でした。\u003C/p>\u003Cp>このように、\u003Cstrong>フロントエンド上だけでも想像以上に多くの処理が行える\u003C/strong>ことがわかります。\u003C/p>\u003Ch2 id=\"hf604d5817f\">LiteRTとONNX\u003C/h2>\u003Cp>LiteRT に変換することで、自分で作成したモデルもブラウザ上で動かせます。\u003Cbr>一方で、\u003Ca href=\"https://onnx.ai/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>ONNX(Open Neural Network Exchange)\u003C/strong>\u003C/a>というオープンな活動もあり、\u003Cbr>さまざまな形式のモデルを共通仕様で扱えるようにする取り組みが進んでいます。\u003C/p>\u003Cp>ONNXに変換すると、\u003Cstrong>JavaScript上でそのままモデルを動かすことが可能\u003C/strong>です。\u003Cbr>システムとしては \u003Ca href=\"https://developer.mozilla.org/ja/docs/WebAssembly#:~:text=WebAssembly%20%E3%81%AF%E7%8F%BE%E4%BB%A3%E3%81%AE%E3%82%A6%E3%82%A7%E3%83%96,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82\" target=\"_blank\" rel=\"noopener noreferrer\">WebAssembly \u003C/a>を利用しており、ブラウザ内で推論処理を実行できます。\u003Cbr>\u003Cbr>つまり、トレーニング済みのモデルを変換して読み込むだけで、フロントエンドから AI を呼び出せるようになるということです。\u003C/p>\u003Cp>自分でトレーニングしたモデルを使うこともできますが、MediaPipe のように使いやすいインターフェースは提供されていないため、ある程度の知識や環境構築が必要になります。\u003C/p>\u003Ch2 id=\"ha214098e44\">まとめ\u003C/h2>\u003Cp>エッジ AI にはまだ課題もありますが、管理画面などで AI を組み込んでみたいときに便利です。\u003C/p>\u003Cp>\u003Cstrong>MediaPipe などの機能は手軽に扱える\u003C/strong>ので、積極的に使っていける段階にあります。\u003Cbr>まずは触ってみて、どんなことができるのかを確かめてみましょう。\u003C/p>\u003Cp>AI を導入するときは、「サーバーで処理する」だけでなく、\u003Cstrong>フロントエンドで実装する\u003C/strong>という選択肢も見えてきました。\u003C/p>\u003Cp>ディレクションや設計の立場の方も、「この機能はフロントでエッジAIを使ったほうが早いかも」と判断できるくらいの理解を持っておくと、幅が広がると思います。\u003C/p>\u003Cp>エッジ AI は知っておくだけでも、\u003Cstrong>設計や提案の考え方を変えてくれる技術\u003C/strong>です。\u003Cbr>まずは身近な場面から取り入れて、その可能性を試してみてください。\u003C/p>",5,0,6,{"contents":99,"totalCount":110,"offset":96,"limit":110},[100],{"id":101,"eyecatch":102,"migration_date":106,"publishedAt":107,"createdAt":107,"title":108,"is_html":40,"html_contents":109},"uchinoko-maker",{"url":103,"height":104,"width":105},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/e35882d836104397b4b7f2a09c99968e/2022-08-thumbnail-1.png",456,960,"2022-08-16T13:19:33+09:00","2023-06-02T08:49:56.202Z","うちのこメーカーのフロントエンド実装","今回は弊社の森崎が\u003Cstrong>「うちのこメーカーのフロントエンド実装」\u003C/strong>について話しました。\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"/>\n\n\u003Cbr>今回は、\u003Cstrong>8月1日にリリースした「うちのこメーカー」\u003C/strong>のフロントエンド実装について、実装が始まるまでの流れ、目標、良かった点、困った点などをまとめて話そうと思います。\u003Cbr>\u003Cbr>\n\n\u003Ch2>うちのこメーカーとは\u003C/h2>\n\n\u003Cstrong>「\u003Ca rel=\"noreferrer noopener\" href=\"https://uchinoko-maker.jp/\" target=\"_blank\">うちのこメーカー\u003C/a>」\u003C/strong>は、\u003Ca rel=\"noreferrer noopener\" href=\"http://gritinc.tokyo/\" target=\"_blank\">株式会社GRIT\u003C/a>と弊社で共同開発した、\u003Cstrong>パーツを選ぶだけで2億パターン以上の猫イラストと、そのイラストが入ったグッズが購入できるウェブサービス\u003C/strong>です。\u003Cbr>\u003Cbr>サイトにアクセスして、体型や目、柄を選択していくだけで、簡単にイラストを作って画像をダウンロードすることができます。 また、\u003Ca rel=\"noreferrer noopener\" href=\"https://pepabo.com/\" target=\"_blank\">GMOペパボ株式会社\u003C/a>の様々なオリジナルグッズを作成できるサービス「\u003Ca rel=\"noreferrer noopener\" href=\"https://suzuri.jp/\" target=\"_blank\">SUZURI byGMOペパボ\u003C/a> 」と API 連携することによって、作成されたうちのこイラストが入ったグッズも購入することが可能です。\u003Cbr>\u003Cbr>\u003Cstrong>グッズが1つ購入されるごとに、保護猫の約 1 日分の食事代に相当する金額が保護猫団体に寄付\u003C/strong>されます。\u003Cbr>\u003Cbr>\n\n\u003Ch2>実装が始まるまでのフロー\u003C/h2>\n\n自分の経験上ですが、大体の案件の場合、\u003Cbr>\u003Cbr>\n\n\u003Col>\u003Cli>\u003Cstrong>企画が決まる\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>デザインが決まる\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>概要を聞く\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>実装が始まる\u003C/strong>\u003C/li>\u003C/ol>\n\n\u003Cbr>という流れで、\u003Cstrong>2 ~ 3\u003C/strong> あたりから参加する事が多かったのですが、今回は\u003Cstrong>企画の段階からフロントエンドもミーティングに参加\u003C/strong>するというのが新鮮でした。\u003Cbr>\u003Cbr>ミーティングの内容としては、プロデューサー、デザイナーの要望を聞いて検証をし、結果を元に再検討というのを繰り返し、実装が始まってからは進捗と実装の中で持ち上がった問題点について話しあって解決を目指すといった感じです。\u003Cbr>\u003Cbr>\n\n\u003Ch3>検証\u003C/h3>\n\n\u003Cbr>打ち合わせ段階から色々と問題提起がされていたのでその検証をやりつつ、実装開始に向けて動いていました。まず行われたのは\u003Cstrong>プロジェクトの肝となるイラストの作成\u003C/strong>についての検証です。\u003Cbr>\u003Cbr>\u003Cstrong>デザイン・実装の工数を少しでも削減したい\u003C/strong>ということで、\u003Cstrong>イラストの共通で使える部分はどこなのか\u003C/strong>を検証していきました。\u003Cbr>\u003Cbr>例えば、猫にはそれぞれ体型や色があるわけですが、それに関係なく柄を\u003Cstrong>共通化\u003C/strong>できないかとデザイナーのデザインした猫(左)のサイズを私の方で変形(右)し、クリッピングパスを使って柄を使い回せないかやってみたり（最終的には各体型ごとに柄を調整した方が可愛くなるということで、使い回しは断念）。\u003Cbr>また、同じ目や耳のパーツで各体型に組み合わせても破綻しないか検証したり。\u003Cbr>\u003Cbr>\u003Cbr>\n\n\u003Cfigure class=\"wp-block-image aligncenter size-full is-resized\">\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/e5b166c45c3e4ff98209efbad154811b/2022-08-2da4f9dd1a2f216dcc52b5137390e15e.png\" alt=\"\" class=\"wp-image-15250\" width=\"445\" height=\"216\"/>\u003C/figure>\n\n\u003Cbr>さらに、全体が白く部分的に虎柄が入っているような猫については、\u003Cstrong>Illustrator のソフトライト\u003C/strong>という機能を使って\u003Cstrong>白い部分の柄だけ見えないようにするなどして対応\u003C/strong>することになりました。\u003Cbr>\u003Cbr>\n\n\u003Cfigure class=\"wp-block-image aligncenter size-full\">\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/8a062671aec245d4b172284fa21729b1/2022-08-a73536158709668a66528d42fe6b62c9.png\" alt=\"\" class=\"wp-image-15253\"/>\u003C/figure>\n\n\u003Cbr>こうした検証を行って、工数が削減できないか模索していきます。\u003Cbr>\u003Cbr>\n\n\u003Ch2>実装開始\u003C/h2>\n\n4月半ば頃からいよいよ実装が始まりました。\u003Cbr>\n\n\u003Ch3>設計\u003C/h3>\n\nまずは、全体の構成からどのようにファイル構造を作るかを考えます。下が全体の構成です。\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>トップ\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>過去のイラスト一覧\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>イラスト作成\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>商品\u003C/strong>\u003Cul>\u003Cli>\u003Cstrong>一覧\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>詳細\u003C/strong>\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\n\n\u003Cbr>デザインを見るに必要なのは大きく分けて4ページ。\u003Cbr>中でもイラスト作成ページが今回の実装では一番大変そうだったので、どうやって実装するのがいいか、デザインからSVGのレイヤー構成を先に考えてみました。\u003Cbr>\u003Cbr>\n\n\u003Cfigure class=\"wp-block-image aligncenter size-full is-resized\">\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/8da63749009b4c2ca955a61565d42880/2022-08-42aa8235fc021dc96e8d40e9f18a073b.png\" alt=\"\" class=\"wp-image-15264\" width=\"396\" height=\"468\"/>\u003C/figure>\n\n\u003Cbr>考えた結果、上から順に、\u003Cbr>\u003Cbr>\n\n\u003Col>\u003Cli>\u003Cstrong>線だけをまとめたレイヤー\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>目・鼻・口のレイヤー\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>\u003Cspan style=\"color: initial; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;\">柄と色のレイヤー\u003C/span>\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>体型のパスを集めたレイヤー\u003C/strong>\u003C/li>\u003C/ol>\n\n\u003Cbr>として、一番下のレイヤーでクリッピングマスクを作り、背景を透過させることにしました。\u003Cbr>\u003Cmark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">※完成形は試行錯誤の結果、身体部分と尻尾部分でレイヤーを分けたりと、もう少し複雑になってます。\u003Cbr>\u003C/mark>\u003Cbr>ユーザーは、体型、柄、目、鼻・ 口(セット)、耳、尻尾の6つをイラストから選択することができ、\u003Cstrong>最初は約100万通りが作成できる想定\u003C/strong>だったのですが、どんどんイラストが増えていったため\u003Cstrong>最終的には2億通りを超えて\u003C/strong>しまいました。\u003Cbr>\u003Cbr>柄は色の濃淡を、目は色をそれぞれ選べるようにしたいとのことだったので、それも加味しながらデータ構造を考えました。\u003Cbr>\u003Cbr>\n\n\u003Ch3>要件\u003C/h3>\n\nそうしてまとめた要件がこちらです。\u003Cbr>\u003Cbr>\n\n\u003Col>\u003Cli>\u003Cstrong>SPA(React、Vue、jQuery などどれでも実現可能\u003C/strong>)\u003C/li>\u003Cli>\u003Cstrong>選択肢によってイラストを変更し、選択したデータを蓄積していく(jQuery で実装するなんて考えたくない、、\u003C/strong>)\u003C/li>\u003Cli>\u003Cstrong>商品の個別URLが必要になる可能性(React、Vueどちらでも可能\u003C/strong>)\u003C/li>\u003Cli>\u003Cstrong>イラスト(SVG)から画像を生成\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>ローカルストレージへのデータの保存と再利用\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>APIとの連携\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>コード内にSVGのパスを大量に含むので、コード分割を使いたい\u003C/strong>\u003C/li>\u003C/ol>\n\n\u003Cbr>\u003Cstrong>React v16 で追加された \u003Ca rel=\"noreferrer noopener\" href=\"https://ja.reactjs.org/docs/code-splitting.html\" target=\"_blank\">Lazy 、Suspense\u003C/a> を使えば簡単にコード分割が行える\u003C/strong>らしいので、\u003Cstrong>\u003Cmark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-pale-pink-color\">チャレンジ\u003C/mark>\u003C/strong>として使ってみることにしました。がその結果、\u003Cstrong>分割された JS のファイル数がなんと200弱に。。\u003C/strong>\u003Cbr>セオリー通りにいけば、今回だと4ページなので4つのファイルにまとめるのが普通だと思うのですが、大量にあるパスを細かく分けようとしたらそうなってしまいました。\u003Cbr>\u003Cbr>\n\n\u003Ch3>技術選定\u003C/h3>\n\n要件を考慮した結果、\u003Cstrong>フレームワークは React を使用\u003C/strong>。続いて使用するライブラリを選びます。\u003Cbr>下に一覧を書き出しましたが、今回はスマホがメインターゲットだったので \u003Cstrong>react-use\u003C/strong> や \u003Cstrong>react-device-detect\u003C/strong> などはそこまで使うことはなかったです。\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://github.com/streamich/react-use\" target=\"_blank\">react-use\u003C/a> : hooks の便利関数の寄せ集め\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://github.com/duskload/react-device-detect\" target=\"_blank\">react-device-detect\u003C/a> : OS判定など\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://swr.vercel.app/ja\" target=\"_blank\">swr\u003C/a> : データ取得のための hooks ライブラリ\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://github.com/axios/axios\" target=\"_blank\">axios\u003C/a> : データ取得\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://lodash.com/\" target=\"_blank\">lodash\u003C/a> : 便利関数\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://github.com/filipelinhares/ress\" target=\"_blank\">ress\u003C/a> : CSS Reset\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://swiperjs.com/\" target=\"_blank\">swiper\u003C/a> : スライダー（カルーセル）\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://github.com/react-component/slider\" target=\"_blank\">rc-slider\u003C/a> : スライダーバー\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>\u003Cs>\u003Ca rel=\"noreferrer noopener\" href=\"https://github.com/misund/hex-to-rgba\" target=\"_blank\">hex-to-rgba\u003C/a> : 色変換\u003C/s>（途中で chroma-js に変更）\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://github.com/iyegoroff/rgba-to-rgb\" target=\"_blank\">rgba-to-rgb\u003C/a> : 色変換\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://github.com/gka/chroma.js\" data-type=\"URL\" data-id=\"https://github.com/gka/chroma.js\" target=\"_blank\">chroma-js\u003C/a> : 色操作\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-react\" data-type=\"URL\" data-id=\"https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-react\" target=\"_blank\">simplebar-react \u003C/a>: カスタムスクロールバー\u003C/strong>\u003C/li>\u003C/ul>\n\n\u003Cbr>大体はよく使っているものですが、\u003Cstrong>swr\u003C/strong> は初めて使いました。\u003Cbr>「\u003Cstrong>データ取得のための hooks ライブラリ\u003C/strong>」と書きましたが、\u003Ca rel=\"noreferrer noopener\" href=\"https://nextjs.org/\" target=\"_blank\">next.js\u003C/a> を開発している \u003Ca rel=\"noreferrer noopener\" href=\"https://vercel.com/home?utm_source=next-site&utm_medium=banner&utm_campaign=next-website\" target=\"_blank\">Vercel\u003C/a> が開発したものだそうです。\u003Cbr>\u003Cbr>swr は \u003Ccode>stale-while-revalidate\u003C/code> の略で、\n\n\u003Cblockquote class=\"wp-block-quote\">まずキャッシュからデータを返し（stale）、次にフェッチリクエストを送り（revalidate）、最後に最新のデータを持ってくるという戦略です。\u003C/p>\u003Ccite>\u003Ca href=\"https://swr.vercel.app/ja\" target=\"_blank\" rel=\"noreferrer noopener\">SWR：データ取得のための React Hooks ライブラリ\u003C/a>\u003C/cite>\u003C/blockquote>\n\nということをやってくれるようです。\u003Cbr>便利そうなだと思ったので使ってみることにしました。\u003Cbr>\u003Cbr>使ってみた感想としては、まず \u003Ca href=\"https://ja.reactjs.org/docs/hooks-reference.html\" target=\"_blank\" rel=\"noreferrer noopener\">React hooks\u003C/a> との相性がすごく良いのと、通常の fetch や axios を使って実装すると、読み込み待ちなどを自分で実装しないといけないのが少し面倒なのですが、これを使えば一行書き加えるだけでその手間がなくなるのが便利でした。\u003Cbr>今回はやりませんでしたが、データ読み込みの依存関係なども簡単に設定できるようなので、機会があればもっと使ってみようかなと思っています。\u003Cbr>\u003Cbr>もう一つ紹介になりますが、\u003Cstrong>個人的なおすすめのライブラリは \u003Ca rel=\"noreferrer noopener\" href=\"https://lodash.com/\" target=\"_blank\">lodash\u003C/a>\u003C/strong> です。\u003Cbr>ネイティブの関数でもできるかもしれませんが、もっと幅広くかつ強力なチェーンメソッドが lodash には用意されているので、様々な対応が可能です。\u003Cstrong>配列やオブジェクトを扱う時には必須\u003C/strong>だと思います。\u003Cstrong>あって困ることはありません。\u003C/strong>\u003Cbr>\u003Cbr>\n\n\u003Ch3>目標\u003C/h3>\n\n\u003Cstrong>毎回案件に取り組む際に、目標を立てる\u003C/strong>ようにしています。\u003Cbr>今回の場合だと大きな目標は \u003Cstrong>React の習熟\u003C/strong>です。\u003Cbr>\u003Cbr>ちょうど React を使い始めて半年ぐらいで、案件的にもいくつかこなしてきたので、もっと使えるようになればいいなとその目標にしました。\u003Cbr>中でも \u003Ca rel=\"noreferrer noopener\" href=\"https://ja.reactjs.org/docs/hooks-reference.html\" target=\"_blank\">React hooks\u003C/a> というのが v16.8 で追加されたのですが、 これを扱えるようになれればと。\u003Cbr>\u003Cbr>\n\n\u003Ch2>まとめ\u003C/h2>\n\n最後にまとめとして良かった点と困った点を。\u003Cbr>\u003Cbr>\u003Cstrong>良かった点\u003C/strong>\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>ネコのイラストが可愛く実装していて楽しい(モチベーション)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>React は使いやすい(Typescript との相性など)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>ライブラリも豊富で検索するとだいたい見つかる\u003C/strong>\u003C/li>\u003C/ul>\n\n\u003Cbr>Typescript との相性を考えると \u003Ca rel=\"noreferrer noopener\" href=\"http://Vue 3\" target=\"_blank\">Vue.js\u003C/a> よりも圧倒的に React の方が使いやすいと思ったのですが、噂によると Vue.js も 3 になってから改善されているとか。まだ試していないので実際のところはわかりませんが。\u003Cbr>\u003Cbr>jQuery を使っていたときは極力自分でライブラリを作成するようにしていたのですが、React だといくらでもライブラリが転がっているのでそれらを使う方が対応が容易だなと思いました。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>困った点\u003C/strong>\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>選択肢のイラスト(SVG画像)を書き出すのが大変、、\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>イラストで使用するためのパスの作成が大変、、\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://codesandbox.io/s/svg-to-img-test-voqpze\" target=\"_blank\">Safari のバグ\u003C/a>！\u003C/strong>\u003Cul>\u003Cli>\u003Cstrong>CSS Filter が効かない、、\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>SVG Filter を使うと生成した画像がジャギる、、\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>clip-path にパスが複数入っていると画像がジャギる、、\u003C/strong>\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>案件が進むほどに各々がネコに詳しくなっていき、こだわりが増える、、\u003C/strong>\u003C/li>\u003C/ul>\n\n\u003Cbr>\u003Cbr>\u003Cstrong>とにかくイラストの選択肢が多いので、そのあたりの作業が非常に地道で大変\u003C/strong>でした。。。\u003Cbr>なんと、\u003Cstrong>それぞれのパスのコードは出し分けする処理の中に\u003Cstrong>人力で\u003C/strong>コピペしていくという力技\u003C/strong>。\u003Cbr>何かいい方法があれば良かったのですが思いつかず、、、\u003Cbr>\u003Cstrong>今後も随時、柄などを追加予定\u003C/strong>なので、効率化が今後の課題です。。\u003Cbr>\u003Cbr>\u003Cstrong>もう一点困ったのが Safari のバグです。\u003Cbr>\u003C/strong>設計のところで猫の色味の濃淡について少し触れましたが、単色の猫の場合だと透明度をただ変更するだけでいいのですが、三毛猫や錆猫の場合は柄とレイヤー構造の関係で\u003Cstrong>透明にならないように薄くするという処理が必要\u003C/strong>でした。\u003Cbr>\u003Cbr>それを実現するには CSS Filter で \u003Ccode>opacity\u003C/code> をかければ良かったのですが、なぜか \u003Cstrong>Safari だけうまくいかない。。SVG Filter で実装すると画像の淵がジャギジャギに\u003C/strong>。これも Safari だけ。\u003Cbr>結局どうしたかというと、透明度を変えるのではなく\u003Cstrong>\u003Cstrong>\u003Ccode>chroma-js\u003C/code>＋\u003Ccode>rgba-to-rgb\u003C/code> を使って色合成\u003C/strong>することでなんとか解決\u003C/strong>しました。\u003Cbr>\u003Cbr>\u003Cbr>という感じで色々と大変な部分ありましたが、\u003Cstrong>無事にローンチできました。\u003C/strong>\u003Cbr>\u003Cstrong>おかげさまで大盛況の「\u003Ca rel=\"noreferrer noopener\" href=\"https://uchinoko-maker.jp/\" target=\"_blank\">うちのこメーカー\u003C/a>」、全世界からたくさんのアクセスをいただいておりまして、ありがたい限りでございます！\u003C/strong>是非是非遊んでみてください。\u003Cbr>\u003Cbr>\n\n\u003Cfigure class=\"wp-block-image aligncenter size-full\">\u003Ca href=\"https://uchinoko-maker.jp/\">\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/08b6af8c2d5b4397adb2059df7372e91/2022-08-image.png\" alt=\"\" class=\"wp-image-15305\"/>\u003C/a>\u003C/figure>\n\n\u003Cbr>現在、\u003Ca rel=\"noreferrer noopener\" href=\"https://twitter.com/uchinokomaker/status/1556451617549225984?fbclid=IwAR2stjnh47kR1WMXWQACcfGCRoXLcmt-FzLIrCiaLNq5bXZv3vNgnSlAgEw\" target=\"_blank\">8月8日の世界猫の日を記念しまして、うちのこオリジナルクッションが抽選で3名様に当たるTwitterキャンペーンを8月31日まで実施中です。\u003C/a>そちらもよければ応募してみてください。\u003Cbr>\u003Cbr>さらに、\u003Ca rel=\"noreferrer noopener\" href=\"https://prtimes.jp/main/html/rd/p/000000016.000030202.html\" target=\"_blank\">PR TIMESに詳細と弊社代表花井のコメントが掲載\u003C/a>されておりますので、そちらも合わせて是非ご覧になってみてください！\u003Cbr>\u003Cbr>\u003Cstrong>うちのこメーカー\u003Cbr>インスタ：\u003Ca rel=\"noreferrer noopener\" href=\"https://www.instagram.com/uchinoko_maker/\" target=\"_blank\">https://www.instagram.com/uchinoko_maker/\u003C/a>\u003Cbr>Twitter：\u003Ca rel=\"noreferrer noopener\" href=\"https://twitter.com/uchinokomaker\" target=\"_blank\">https://twitter.com/uchinokomaker\u003C/a>\u003C/strong>",1,{"contents":112,"totalCount":143,"offset":96,"limit":144},[113,123,133],{"id":114,"eyecatch":115,"publishedAt":119,"createdAt":120,"title":121,"is_html":19,"content2":122},"paris-fashion-style-diagnosis",{"url":116,"height":117,"width":118},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/b2e054339c6d46ca81c5a48071b7018b/thumb.jpg",3648,5472,"2026-05-22T04:35:29.476Z","2026-05-08T02:51:21.139Z","パリ流ファッションスタイル診断を受診した話","\u003Cp>久しぶりにプリンを見たら美味しそうだなと思いました。\u003C/p>\u003Cp>この記事は、社内イベント「\u003Ca href=\"https://www.s2factory.co.jp/blog/tea/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C/u>\u003C/a>」での発表内容をもとにまとめたものです。\u003Cbr>今回は、弊社の tsujikado が\u003Cstrong>「パリ流ファッションスタイル診断」\u003C/strong>について話しました。\u003C/p>\u003Chr>\u003Cp>\u003Cbr>\u003Cstrong>パリ流ファッションスタイル診断\u003C/strong>というものを受診してきました。\u003Cbr>今回は、パリ流ファッションスタイル診断とはどのようなものなのか、実際に受けてみてどうだったのかを紹介します。\u003C/p>\u003Ch2 id=\"h80fac557c9\">パリ流ファッションスタイル診断とは？\u003C/h2>\u003Cp>パリ流ファッションスタイル診断は、いわゆる\u003Cstrong>イメージコンサルティングの一種\u003C/strong>です。\u003C/p>\u003Cp>イメージコンサルティングには、たとえば次のような診断があります。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>パーソナルカラー診断\u003C/strong>\u003Cul>\u003Cli>似合う色の傾向を見る診断\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>骨格診断\u003C/strong>\u003Cul>\u003Cli>身体のラインや質感から、似合う服の形・素材を見る診断\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>顔タイプ診断\u003C/strong>\u003Cul>\u003Cli>顔立ちの印象から、似合う服のテイストや髪型を見る診断\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\u003Cp>パリ流ファッションスタイル診断も、それらに近い診断で、\u003Cstrong>自分に似合うファッションの方向性を見ていくもの\u003C/strong>です。\u003C/p>\u003Cp>\u003Cstrong>フランス国家認定イメージコンサルタントの\u003C/strong>\u003Ca href=\"https://www.timage-paris.com/about-me/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>トモミさん\u003C/strong>\u003C/a>\u003Cstrong>が開発したメソッド\u003C/strong>で、\u003Cstrong>10タイプ\u003C/strong>の中から、その人に合うファッションスタイルを導き出します。\u003C/p>\u003Cp>「パリ流」という名前は、創始者であるトモミさんがパリで学ばれていたことや、フランスでは内面やパーソナリティを大切にする考え方があることに由来しているそうです。そのため、この診断でも外見だけではなく、その人の雰囲気や内面も含めて見ていきます。\u003C/p>\u003Cp>現在は\u003Cstrong>トモミさんから直接学んだ門下生しか診断できない\u003C/strong>そうで、診断士の数も多くないため、受けられるサロンも限られています。\u003C/p>\u003Ch3 id=\"h5d88dedbcc\">パリ流で見る「スタイル」とは？\u003C/h3>\u003Cp>パリ流ファッションスタイル診断でいう「スタイル」とは、\u003Cstrong>その人が持つイメージや雰囲気\u003C/strong>のことを指します。\u003C/p>\u003Cp>このスタイルは、\u003Cstrong>5 つのカテゴリー、10タイプ\u003C/strong>に分けられています。10タイプを簡単に整理すると、次のようになります。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/afa5124f592e4b87b50240d188f7759f/%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB.png?w=800&h=999\" alt=\"スタイル一覧\" width=\"800\" height=\"999\">\u003C/figure>\u003Cp>\u003Cbr>この診断では、10タイプの中から\u003Cstrong>「メイン」「サブ」「アクセント」\u003C/strong>を決めていきます。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>メイン\u003C/strong>\u003Cul>\u003Cli>一番強く出る要素。第一印象に近いもの。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>サブ\u003C/strong>\u003Cul>\u003Cli>メインを補い、その人らしい個性を出すもの。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>アクセント\u003C/strong>\u003Cul>\u003Cli>メインとサブだけでは表現しきれない部分を補うもの。人によっては、アクセントが付かない場合もあります。\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\u003Cp>つまり、パリ流ファッションスタイル診断は、10タイプの中から自分に合う要素を組み合わせて、自分らしいファッションの方向性を見ていく診断です。\u003C/p>\u003Cp>\u003Cstrong>「自分のスタイルに合ったファッションをすることで、その人の魅力をより引き出せる」\u003C/strong>という考え方がベースになっています。\u003C/p>\u003Ch3 id=\"ha56011c6a9\">スタイルの組み合わせでどう変わるのか\u003C/h3>\u003Cp>説明だけでは、少しイメージしづらいかもしれません。\u003C/p>\u003Cp>たとえば、\u003Cstrong>メインが「ナチュラル」、サブが「クリエイティブ」\u003C/strong>の人の場合。\u003C/p>\u003Cp>ナチュラルの要素だけで全身をまとめると、自然由来のゆったりとした服装や、無造作な髪型などがイメージされます。ただ、それだけでまとめてしまうと、\u003Cstrong>クリエイティブの要素を持つ人の個性までは引き出しきれない\u003C/strong>ことがあります。\u003C/p>\u003Cp>そこで、サブであるクリエイティブの要素を少し足していきます。たとえば、服の雰囲気とは違うビビッドなアイテムを取り入れたり、少し個性的な着こなしをしてみたりします。\u003C/p>\u003Cp>そうすることで、ナチュラルをベースにしながらクリエイティブの要素も入り、垢抜けた印象になったり、抜け感が出たりして、\u003Cstrong>その人らしさがより表現\u003C/strong>されます。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/6caf6947e3ae4a029e92fe92d014ff98/%E3%83%8A%E3%83%81%E3%83%A5%E3%83%A9%E3%83%AB%C3%97%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96.png?w=600&h=749\" alt=\"ナチュラル×クリエイティブ\" width=\"600\" height=\"749\">\u003Cfigcaption>ナチュラルをベースに、色や小物でクリエイティブの要素を足したイメージ。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>ほかにも、ナチュラル×エレガントであれば、差し色やエレガントな雰囲気のスカーフ、きれいめな形のスラックスなどを取り入れる、といった組み合わせ方もあります。\u003C/p>\u003Ch2 id=\"he1e7cbfa85\">受診しようと思った理由\u003C/h2>\u003Cp>これまでにも、パーソナルカラー診断、骨格診断、顔タイプ診断などを受けており、それぞれ次のような診断結果が出ていました。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>パーソナルカラー診断\u003C/strong>\u003Cul>\u003Cli>暗い・濃い・深い色が似合う\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>骨格診断\u003C/strong>\u003Cul>\u003Cli>ジャストサイズ、下重心、縦ラインを意識した服が似合う\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>顔タイプ診断\u003C/strong>\u003Cul>\u003Cli>個性的なデザインが似合う\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\u003Cp>ただ、これらは\u003Cstrong>あくまで「色」や「形」など、アイテムを構成する要素の話\u003C/strong>でもあります。\u003C/p>\u003Cp>色は濃くて、形はジャストサイズで、デザインは個性的。\u003Cbr>そう言われても、結局どんな服を選べばいいのかよくわかりません。\u003C/p>\u003Cp>それぞれの診断結果をどう組み合わせて、\u003Cstrong>最終的にどんなファッションに着地させる\u003C/strong>とよいのか。その部分を一度プロに見てもらいたいと思い、今回パリ流ファッションスタイル診断を受けてみることにしました。\u003C/p>\u003Ch2 id=\"he437eb6794\">診断を受けるまで\u003C/h2>\u003Ch3 id=\"hcd77833659\">サロン選び\u003C/h3>\u003Cp>絶対に対面で受けたかったので、まずは東京で対面診断をしているサロンを探しました。\u003Cbr>\u003Cbr>ただ、パリ流ファッションスタイル診断はそもそも\u003Cstrong>診断士が少なく\u003C/strong>、目を付けていたサロンもなぜかその時期は軒並み休業中。\u003Cstrong>サロン探しは思ったより難航\u003C/strong>しました。\u003Cbr>\u003Cbr>創始者のトモミさんはパリを拠点にしているため、対面で受けるには現地まで行く必要があります。国内にも診断を行っているサロンはありますが、パリ流を受ける前に、同じサロンでパーソナルカラー診断・骨格診断・顔タイプ診断をすべて受けてからという条件のところがあるなど、\u003Cstrong>時間や費用の面でもなかなかハードルが高め\u003C/strong>でした。\u003Cbr>\u003Cbr>最終的には、対面診断に対応していて、SNS の雰囲気からも話しやすそうだと感じた静岡の診断士の方にお願いすることに。東京出張も可能とのことだったので、\u003Cstrong>東京での出張診断を依頼\u003C/strong>しました。\u003Cbr>\u003Cbr>系統が違いそうな友人と比べながら受けたら楽しそうだったので、\u003Cstrong>ペア診断\u003C/strong>にしました。\u003C/p>\u003Cp>料金は出張費込みで、\u003Cstrong>1 人あたり27,000円\u003C/strong>。大体相場ぐらいの金額です。\u003C/p>\u003Ch3 id=\"h31fc5cbc4a\">事前準備\u003C/h3>\u003Cp>診断前のやり取りは、LINEで行いました。\u003C/p>\u003Cp>事前に送られてきたカウンセリングシートには、年齢や身長、過去に受けたイメージコンサルティング診断の結果、さらに好きなブランドや有名人などのファッションに関する項目に加えて、「自分の性格を一言で表すなら？」「服を着るときに重要視していることは？」といった\u003Cstrong>内面に関する質問\u003C/strong>もありました。\u003Cbr>\u003Cbr>そのほかに、\u003Cstrong>スタイル分析質問票という独自のアンケート\u003C/strong>にも回答。内容としては、少し MBTI に近いような印象です。\u003C/p>\u003Cp>あわせて、\u003Cstrong>普段のコーディネート写真\u003C/strong>も送ります。普段着ている服の好みや雰囲気を見てもらうためのもので、\u003Cstrong>5 枚以上が目安\u003C/strong>でした。\u003Cbr>私は診断のために写真を撮り溜めていたので、40枚くらい送りました。似合っていると思うものだけでなく、いまいちだと思う日の写真も、参考になりそうだったので混ぜています。\u003C/p>\u003Ch2 id=\"hfc6841db05\">診断当日の流れ\u003C/h2>\u003Ch3 id=\"h166a98441e\">当日に行ったこと\u003C/h3>\u003Cp>診断当日は、民家のような雰囲気の広めのレンタルスペースで行われました。\u003Cbr>当日の流れは、大きく分けると次のような感じです。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>カウンセリングシートをもとにヒアリング\u003C/strong>\u003Cul>\u003Cli>悩みや好みを改めて確認したり、送っていたコーディネート写真についてコメントをもらったりしました。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>骨格チェック\u003C/strong>\u003Cul>\u003Cli>鏡を見ながら、肩まわり、腰まわり、膝などを見てもらい、その人の骨格の特徴を確認していきます。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>アイテムを合わせてチェック\u003C/strong>\u003Cul>\u003Cli>診断士が持参した革ジャン、ジャージ、カーディガンなど、系統の違うアイテムを6種類ほど着て、似合い方を見てもらいました。\u003Cstrong>生地の軽さや柔らかさ、色、襟や袖の形、装飾品の要不要\u003C/strong>などを見ていきます。\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\u003Cp>印象的だったのはトレンチコートです。友人が着たときに「これは少しうるさすぎる」と言われ、診断士が襟や肩章をどんどん隠していきました。\u003Cstrong>最終的にはボタンなども含めてほとんど隠された状態になったのですが、その状態が一番しっくりきていて驚きました。\u003C/strong>\u003C/p>\u003Ch3 id=\"h6db3938d18\">診断結果の決まり方\u003C/h3>\u003Cp>ここまでのチェックが終わると、いよいよ診断結果を出していきます。\u003C/p>\u003Cp>ただし、「あなたはこれです」といきなり言われるわけではありません。\u003Cstrong>先ほど紹介した10タイプのスタイルを、遠いものから順番に落としていく形\u003C/strong>で診断が進みます。\u003C/p>\u003Cp>落としたスタイルについては、その都度理由を説明してくれます。「これは少し軽すぎる」「遊び心が足りない」といった感じで解説されるのですが、\u003Cstrong>中でも面白かったのが「意図せぬ生活感が出る」という表現\u003C/strong>でした。聞いていると、たしかにそうかもと納得できる部分が多かったです。\u003C/p>\u003Cp>\u003Cstrong>最後に残ったものが、メインのスタイル\u003C/strong>になります。\u003C/p>\u003Cp>メインが決まったら、次にサブとアクセントを見ていきます。ただし、\u003Cstrong>サブとアクセントは、単純に「最後まで残った順番」で決まるわけではありません\u003C/strong>。人によっては、もっと早い段階で落としたスタイルから要素を持ってくることもあるそうです。\u003C/p>\u003Cp>このあたりは、\u003Cstrong>全体のバランスを見ながら決めていく\u003C/strong>とのことでした。また、2つのスタイルで迷う場合は、事前に回答したスタイル分析質問票の内容など、\u003Cstrong>内面の傾向を考慮することもある\u003C/strong>そうです。\u003C/p>\u003Cp>こうして、私の診断結果も出してもらいました。\u003C/p>\u003Ch2 id=\"h0dbced7af6\">診断結果\u003C/h2>\u003Cp>診断の結果、私のスタイルは次のようになりました。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>メイン：クリエイティブ\u003C/strong>\u003Cul>\u003Cli>特定のスタイルに縛られない、自由度の高さを活かす。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>サブ：セクシー\u003C/strong>\u003Cul>\u003Cli>濃厚さや重さを足す。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>アクセント：シック\u003C/strong>\u003Cul>\u003Cli>好みとしても取り入れたい「強さ」を補う。\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/3568708393cd47ffa31ef59d7580ec36/%E8%A8%BA%E6%96%AD%E7%B5%90%E6%9E%9C-1.png?w=600&h=749\" alt=\"クリエイティブ、セクシー、シックをイメージしたコーディネート例\" width=\"600\" height=\"749\">\u003Cfigcaption>クリエイティブ、セクシー、シックをイメージしたコーディネート例。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>キーワードとして言われたのは、\u003Cstrong>遊び心、動的エネルギー、濃厚さ、重さ\u003C/strong>です。\u003C/p>\u003Cp>10タイプの中で近いもの・遠いものを整理すると、だいたい次のような位置づけでした。\u003C/p>\u003Cul>\u003Cli>近い：クリエイティブ / セクシー / シック / ドラマティック / スポーティ\u003C/li>\u003Cli>中間：トラディショナル / ナチュラル / クラシック\u003C/li>\u003Cli>遠い：ロマンティック / エレガント\u003C/li>\u003C/ul>\u003Cp>カチッとしたものや軽さのあるものだと、私の中にある動的エネルギーを弱めてしまうそうです。一方で、スポーティ以降はどれもいけると言われていて、特定のスタイルに絞るよりも、\u003Cstrong>自由度の高さを活かす方向\u003C/strong>でメインはクリエイティブになりました。\u003Cbr>\u003Cbr>ちなみに、\u003Cstrong>一緒に受けた友人は私とかなり真逆の結果\u003C/strong>でした。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>メイン：エレガント\u003C/strong>\u003Cul>\u003Cli>上品さ、調和、清潔感を土台にする。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>サブ：ロマンティック\u003C/strong>\u003Cul>\u003Cli>パーソナルカラーや顔タイプから、フェミニンな要素を補う。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>アクセント：ナチュラル\u003C/strong>\u003Cul>\u003Cli>抜け感や軽やかさ、安心感を足す。\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/2db774a681334dfdbdf05cd06734e4ca/%E8%A8%BA%E6%96%AD%E7%B5%90%E6%9E%9C-2.png?w=600&h=749\" alt=\"エレガント、ロマンティック、ナチュラルをイメージしたコーディネート例\" width=\"600\" height=\"749\">\u003Cfigcaption>エレガント、ロマンティック、ナチュラルをイメージしたコーディネート例。\u003C/figcaption>\u003C/figure>\u003Cp>友人のキーワードは、\u003Cstrong>清潔感、上品さ、調和\u003C/strong>。そのど真ん中にあるスタイルとして、メインはエレガントになりました。\u003C/p>\u003Cul>\u003Cli>近い：エレガント / ロマンティック / ナチュラル\u003C/li>\u003Cli>中間：クラシック / トラディショナル / シック / クリエイティブ\u003C/li>\u003Cli>遠い：セクシー / スポーティ / ドラマティック\u003C/li>\u003C/ul>\u003Cp>遊びや違和感など、調和を乱すような要素はあまり入れない方がいい一方で、パーソナルカラーや顔の雰囲気にはフェミニンな要素もあるため、それを補うものとしてサブにロマンティックが入っています。\u003C/p>\u003Cp>今回は友人とかなり違う方向性の結果になったので、比べながら聞けたのも面白かったです。\u003C/p>\u003Ch2 id=\"h97dbccb5aa\">受けてみた感想\u003C/h2>\u003Cp>今回の診断は、自分で「この服いい感じかも」と思っていたものに、\u003Cstrong>太鼓判を押してもらったような体験\u003C/strong>でした。\u003C/p>\u003Cp>好きな服や、なんとなくしっくりくるファッションの系統を、要素に分解して言語化してもらえたことで、\u003Cstrong>「好きな感じ」「なんかいい感じ」を前より目指しやすくなった\u003C/strong>気がします。\u003C/p>\u003Cp>ただ、「これを着れば正解です」と答えを決めてもらえる診断ではありません。教えてもらった人やアイテムのすべてにぴんと来たわけではないので、診断結果をヒントにしながら、最終的には自分で模索していくものなのだと思います。\u003C/p>\u003Cp>それでも、今日の服が少しいまいちかもと思ったときに、どこを調整すればよさそうか考えやすくなりました。自分の雰囲気をポジティブな言葉で表現してもらえるのも、普通に気分が上がります。\u003C/p>\u003Cp>否定されたり、苦手なものを押し付けられたりすることもなく、\u003Cstrong>安心して受けられる診断\u003C/strong>でした。\u003Cbr>パリ流ファッションスタイル診断に興味を持った方は、ぜひ一度受けてみてください。\u003C/p>",{"id":124,"eyecatch":125,"publishedAt":129,"createdAt":130,"title":131,"is_html":19,"content2":132},"corporate-ekiden2026",{"url":126,"height":127,"width":128},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/b1ebcac8eef144d487735eec83906973/%E9%9B%86%E5%90%88%E5%86%99%E7%9C%9F.jpg",4284,5712,"2026-05-14T07:11:43.569Z","2026-05-13T03:02:02.207Z","今年も企業対抗駅伝に出場しました","\u003Cp>昨年に続き、今年も\u003Cstrong>企業対抗駅伝に参加\u003C/strong>しました。\u003Cbr>\u003Cstrong>S2 では昨年から「S2 Running Club」、通称「S2RC」というランニングチームを結成\u003C/strong>し、企業対抗駅伝に出場しています。\u003Cbr>\u003Cbr>この記事では、\u003Cstrong>2 年目となる今年の準備と、大会当日の様子\u003C/strong>を振り返りたいと思います。\u003C/p>\u003Cp>\u003Cspan style=\"color: #949494\">昨年の様子はこちら。\u003C/span>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/corporate-ekiden2025/\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fcorporate-ekiden2025%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Ch2 id=\"h93f3e97420\">企業対抗駅伝とは\u003C/h2>\u003Cp>企業対抗駅伝はその名の通り、\u003Cstrong>企業ごとにチームを組んで参加する駅伝イベント\u003C/strong>です。\u003Cbr>東京大会と大阪大会があり、今年の東京大会は 5 月 10 日にお台場・セントラル広場で開催されました。\u003Cbr>今回は \u003Cstrong>650 チーム以上がエントリー\u003C/strong>したそうです。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https://www.youtube.com/embed/s6Lxedlcl7c?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\" referrerpolicy=\"strict-origin\">\u003C/iframe>\u003C/div>\u003Cp>\u003Cbr>\u003Ca href=\"https://sportsone.jp/ed/2026/event_tokyo.html\" target=\"_blank\" rel=\"noopener noreferrer\">種目\u003C/a>は以下の 3 つ。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>企業対抗駅伝(5 km× 5 区間＝計 25km)\u003C/strong>\u003Cul>\u003Cli>男性の部\u003C/li>\u003Cli>女性の部\u003C/li>\u003Cli>男女混合の部\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>企業対抗ファン駅伝(2 km× 3 区間＝計 6km)\u003C/strong>\u003Cul>\u003Cli>男性の部\u003C/li>\u003Cli>女性の部\u003C/li>\u003Cli>男女混合の部\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>エンジョイリレーマラソン(1 周 2 km× 10 周＝計 20km)\u003C/strong>\u003Cul>\u003Cli>一般男性の部\u003C/li>\u003Cli>女性の部\u003C/li>\u003Cli>一般男女混合の部\u003C/li>\u003Cli>企業対抗の部\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\u003Cp>\u003Cstrong>弊社は昨年に続き、エンジョイリレーマラソンに 6 人で参加\u003C/strong>しました。\u003Cstrong>1 周 2km のコースをチームで 10 周し、合計 20km を走る種目\u003C/strong>。スタートは 14 時からで、午後に行われる部門です。\u003C/p>\u003Cp>昨年は初参加だったこともあり、普段からランニングをしているメンバーが多めに走ってくれたのですが、今年は一度走ってみて「意外といけそう」という感覚もあり、1 人 2 周を走るメンバーが増えました。\u003C/p>\u003Cp>\u003Cstrong>計測は IC チップ\u003C/strong>で行われます。チップは大会側で用意される襷に入っており、ゴール後にはタイムが記録された\u003Cstrong>完走証\u003C/strong>も発行されます。\u003Cbr>さらに、順位表彰のほか、業界別・企業規模別・年代別・役職別などのランキングもあり、結果は公式サイトで公開されているそうです。\u003C/p>\u003Ch2 id=\"h920f835f68\">チームTシャツを今年仕様にアップデート\u003C/h2>\u003Cp>\u003Cstrong>昨年の企業対抗駅伝では、S2RC のチーム T シャツを制作\u003C/strong>しました。\u003Cbr>2 年目となる今回は、その T シャツに\u003Cstrong>追加でプリント\u003C/strong>を施し、\u003Cstrong>アップデート\u003C/strong>することに。\u003Cbr>デザインは、昨年に続き弊社デザインチームが考案しています。\u003Cbr>\u003Cbr>胸元には、S2RC のロゴの下に\u003Cstrong>小さな星を追加\u003C/strong>しました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/7262f64e33f345b4bc9ac33d6d1272c9/%E6%98%9F%E3%81%AE%E3%83%9E%E3%83%BC%E3%82%AF.jpeg?w=400&h=533\" alt=\"\" width=\"400\" height=\"533\">\u003C/figure>\u003Cp>\u003Cbr>この星は、\u003Cstrong>ランニングイベントへの参加回数\u003C/strong>を表しています。参加するたびに星を増やしていく想定で、今年は昨年分の星をひとつ追加しました。\u003C/p>\u003Cp>背面には、もともとプリントされていた「S2RC」の文字に加えて、\u003Cstrong>「S」の上に点線のプリントを追加\u003C/strong>しました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/2ae39d17ee1b43b3aa3f20571ceda5ee/%E8%83%8C%E4%B8%AD%E3%81%AE%E3%83%97%E3%83%AA%E3%83%B3%E3%83%88.jpeg\" alt=\"背中のプリント\" width=\"2000\" height=\"2667\">\u003C/figure>\u003Cp>\u003Cbr>去年、背面の「S2RC」をプリントしたときは、\u003Cstrong>Tシャツの生地、文字の位置や線の太さ、色を各メンバーがそれぞれ選んだのですが\u003C/strong>、今年から加わった新メンバーも、同じように自分の T シャツをカスタマイズしてプリントしました。\u003Cbr>\u003Cbr>追加した点線も、「S」の上に重ねることは決まっていますが、\u003Cstrong>色や細かな位置は自由\u003C/strong>です。\u003Cbr>元の「S」の真ん中に重ねる人もいれば、端に寄せてプリントする人もいます。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/4ce61187c8a14844b5126de9147cc602/%E5%8D%B0%E5%88%B7-1.jpg\" alt=\"\" width=\"5712\" height=\"4284\">\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1625201c658941d6ad48226c81143226/%E5%8D%B0%E5%88%B7-2.jpg\" alt=\"\" width=\"4032\" height=\"3024\">\u003C/figure>\u003Cp>\u003Cbr>\u003Cstrong>同じチーム T シャツでありながら、よく見ると一枚ずつ仕上がりが違う\u003C/strong>。\u003Cstrong>Tシャツごとにそれぞれの個性\u003C/strong>が出ているのも、自分たちでプリントする面白さです。\u003Cbr>\u003Cbr>ちなみにプリント作業には、シルクスクリーンキット「\u003Ca href=\"https://surimacca.com/\" target=\"_blank\" rel=\"noopener noreferrer\">SURIMACCA\u003C/a>」を使用しました。\u003Cbr>SURIMACCA は、以前開催した\u003Cstrong>ファミリーデー\u003C/strong>でも使ったのですが、T シャツやグッズを自分たちで作れるので、社内イベントとの相性がよく、今回の T シャツ制作でも活躍しました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/family-day-2/\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Ffamily-day-2%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/family-day/\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Ffamily-day%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Ch2 id=\"h821c40c86f\">大会当日\u003C/h2>\u003Cp>大会当日は、お台場・セントラル広場のガンダム前に集合しました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/e26d567b57194c91abb057573527fb78/%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0.jpg?w=387&h=516\" alt=\"ガンダム前に集合\" width=\"387\" height=\"516\">\u003C/figure>\u003Cp>\u003Cbr>この日は雲ひとつない青空。日陰に入ると涼しさもありましたが、日向は太陽が眩しく、かなり暑く感じるコンディションでした。昨年は曇り空で風も強かったため、同じ会場でもかなり違う印象です。\u003Cbr>会場には、すでに多くの企業チームが集まっており、チームウェアや揃いのTシャツを着ている参加者も多く、企業対抗イベントらしい雰囲気があります。\u003Cbr>\u003Cbr>会場に着いたあとは、空いているスペースを見つけて待機場所を確保。着替えを済ませ、配布されたゼッケンをチームTシャツに安全ピンで留めていきます。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/7cedb2134ff9466b8bdc6b862cbd1d84/%E3%82%BC%E3%83%83%E3%82%B1%E3%83%B3.JPG?w=900&h=600\" alt=\"\" width=\"900\" height=\"600\">\u003C/figure>\u003Cp>\u003Cbr>その後は、チーム内で出走順を確認。1 走目のメンバーは、スタートに向けてストレッチや準備運動を行います。\u003Cbr>他のメンバーも、自分の出番はまだ先なのに、なんとなくそわそわしながら体を伸ばしていました。\u003Cbr>\u003Cbr>14 時前になると、スタート地点に参加者が並び始めます。\u003Cstrong>前方には、速いペースで走る予定の人たちが並び、その後ろに各チームのランナー\u003C/strong>が続いていきます。\u003Cbr>\u003Cbr>14 時 5 分、エンジョイリレーマラソンがスタートしました。\u003Cbr>コースは 1 周 2km。距離だけ見ると短く感じますが、実際に走ってみると\u003Cstrong>アップダウン\u003C/strong>もあり、結構体力を使います。周りにも多くのランナーがいるため、ペースに惑わされず、自分のリズムで走ることも大切です。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/8a5532e60d7c4f5f994344a01f113f92/%E4%BC%81%E6%A5%AD%E5%AF%BE%E6%8A%97%E9%A7%85%E4%BC%9D.jpg\" alt=\"\" width=\"4284\" height=\"3777\">\u003C/figure>\u003Cp>\u003Cbr>走り終えたメンバーから次のメンバーへ、順番に襷をつないでいきます。\u003Cbr>差し入れを持って\u003Cstrong>応援に駆けつけてくれたスタッフ\u003C/strong>もいて、コース脇から旗を振ってランナーを応援してくれました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1a2e3cb5b86542dea08d27381c5154b1/%E5%BF%9C%E6%8F%B4.JPG\" alt=\"\" width=\"3120\" height=\"2080\">\u003C/figure>\u003Cp>\u003Cbr>結果は、\u003Cstrong>1 時間49分16秒\u003C/strong>。\u003Cbr>\u003Cbr>\u003Cstrong>昨年の記録は 1 時間57分11秒\u003C/strong>だったので、約 8 分タイムを縮めることができました。\u003Cbr>タイムが縮まったことも嬉しい結果ですが、何より無事誰も倒れることなく、最後まで走り切れたのがよかったです。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/03e98cede20c4668a4249a07043dee07/%E5%AE%8C%E8%B5%B0%E8%A8%BC.jpg\" alt=\"\" width=\"3072\" height=\"2349\">\u003C/figure>\u003Ch2 id=\"ha214098e44\">まとめ\u003C/h2>\u003Cp>今年も無事に、企業対抗駅伝を走り切ることができました。\u003Cbr>昨年よりタイムも縮まり、2 年目としてはいい結果になったと思います。走り終わったあとには、\u003Cstrong>来年はメンバーを増やして、チームを分けて出場してみるのもよさそう\u003C/strong>だという話も出ていました。\u003Cbr>\u003Cbr>企業対抗駅伝に限らず、参加できそうなランニングイベントがあれば、また挑戦してみたいところです。\u003Cbr>チームで集まって、公園などで走る機会も作れたらと思います。\u003Cbr>\u003Cbr>S2 では、\u003Cstrong>ランニング部以外にもいろいろな部活動が有志で活動\u003C/strong>しています。\u003Cbr>仕事以外のコミュニケーションの場として、こうした活動も無理なく続いていくとよさそうです。\u003C/p>",{"id":134,"eyecatch":135,"publishedAt":139,"createdAt":140,"title":141,"is_html":19,"content2":142},"kidzania",{"url":136,"height":137,"width":138},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/e3dfc808700b4f49ac05e381902876cd/%E3%82%B5%E3%83%A9%E3%83%80%E4%BD%9C%E3%82%8A.png",691,1124,"2026-04-28T08:04:58.239Z","2026-04-22T08:07:32.449Z","キッザニアの仕組みと回り方のポイント","\u003Cp>いろんなことを忘れていきます。\u003Cbr>\u003Cbr>この記事は、社内イベント「\u003Ca href=\"https://www.s2factory.co.jp/blog/tea/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C/u>\u003C/a>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社の tkoba が、「\u003Cstrong>キッザニア」\u003C/strong>について話しました。\u003C/p>\u003Chr>\u003Cp>\u003Cbr>子どもを連れて\u003Ca href=\"https://www.kidzania.jp/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>キッザニア\u003C/strong>\u003C/a>によく行きます。\u003Cbr>今回はその経験をもとに、\u003Cstrong>仕組みや回り方のポイント\u003C/strong>をまとめてみました。\u003C/p>\u003Ch2 id=\"h48e44c0c2b\">キッザニアとは\u003C/h2>\u003Cp>キッザニアは、\u003Cstrong>「子どもが主役」のお仕事体験型テーマパーク\u003C/strong>です。\u003Cbr>対象は 3 歳から中学生まで。施設内では、子どもがさまざまな職業を体験できます。\u003C/p>\u003Cp>特徴的なのは、大人の立ち位置で、保護者は施設内に入ることはできるものの、基本的に体験には関与できません。あくまで主役は子どもです。\u003C/p>\u003Cp>\u003Cstrong>館内には企業が出展するパビリオン(店舗)が並び、それぞれが“仕事”としてのアクティビティを提供\u003C/strong>しています。子どもはそこで働くことで報酬を得たり、逆にお金を支払ってサービスを受ける側になることもあります。\u003C/p>\u003Cp>施設内で使われる\u003Cstrong>通貨は「キッゾ(Z)」\u003C/strong>。\u003Cbr>初回には50キッゾが支給されますが、それ以降は自分で働いて稼ぐ必要があります。\u003C/p>\u003Ch3 id=\"h7a529d8b03\">キッザニアの基本情報\u003C/h3>\u003Cp>\u003Cstrong>キッザニアは1999年にメキシコで誕生\u003C/strong>し、\u003Cstrong>現在は世界19カ国・29拠点に展開\u003C/strong>されています。\u003Cbr>\u003Cstrong>海外初進出は日本\u003C/strong>で、2006年に東京・豊洲にオープンしました。運営は KDDI グループに属する\u003Ca href=\"https://www.kidzania.jp/corporate/\" target=\"_blank\" rel=\"noopener noreferrer\">KCJ GROUP株式会社\u003C/a>。\u003C/p>\u003Cp>日本国内では以下の 3 拠点があります。\u003C/p>\u003Cul>\u003Cli>\u003Ca href=\"https://www.kidzania.jp/tokyo/\" target=\"_blank\" rel=\"noopener noreferrer\">東京(ららぽーと豊洲)\u003C/a>\u003C/li>\u003Cli>\u003Ca href=\"https://www.kidzania.jp/koshien/\" target=\"_blank\" rel=\"noopener noreferrer\">甲子園(ららぽーと甲子園)\u003C/a>\u003C/li>\u003Cli>\u003Ca href=\"https://www.kidzania.jp/fukuoka/top\" target=\"_blank\" rel=\"noopener noreferrer\">福岡(ららぽーと福岡)\u003C/a>\u003C/li>\u003C/ul>\u003Cp>施設ごとに体験できるパビリオンの内容には多少の違いがあります。\u003C/p>\u003Ch3 id=\"h139246c58e\">キッザニア東京\u003C/h3>\u003Cp>キッザニア東京は、ららぽーと豊洲の一角にあります。\u003Cbr>\u003Cstrong>現在は事前予約が必須\u003C/strong>で、当日ふらっと入ることはできません。\u003C/p>\u003Cp>\u003Cstrong>入場は 2 部制\u003C/strong>になっており、以下のように時間が分かれています。\u003C/p>\u003Cul>\u003Cli>第1部：9:00〜15:00\u003C/li>\u003Cli>第2部：16:00〜21:00\u003C/li>\u003C/ul>\u003Cp>このほかにも、短時間のチケットや優先入場など複数の種類があり、チケット体系はやや複雑です。\u003C/p>\u003Cp>料金の一例(休日・第1部)は以下の通りです。\u003C/p>\u003Cul>\u003Cli>小人（3〜12歳）：5,500円\u003C/li>\u003Cli>中人（13〜15歳）：5,500円\u003C/li>\u003Cli>大人（16歳以上）：2,700円\u003C/li>\u003C/ul>\u003Cp>入場は ABC のブロックに分かれており、それぞれおよそ40組ずつで案内されます。\u003Cbr>とにかく混んでいて、平日の月曜日でも、\u003Cstrong>入場の 3 時間前に受付して約120番目\u003C/strong>でした。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/259d4d156e6e41b68fe1f5d96cb8a053/%E9%A0%86%E7%95%AA%E5%BE%85%E3%81%A1.png?w=600&h=483\" alt=\"順番待ち\" width=\"600\" height=\"483\">\u003C/figure>\u003Cp>\u003Cbr>平日でもこの状況なので、休日はさらに混雑します。入場前からすでに競争が始まっていると考えた方がいいです。\u003C/p>\u003Cp>ちなみに、館内ではピザや日本ハムなどのパビリオンで商品を購入することもでき、この場合はキッゾではなく現金が利用できます。\u003Cbr>詳しくは\u003Ca href=\"https://www.kidzania.jp/pdf/city_map/map_tokyo.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">こちら\u003C/a>をご覧ください。\u003C/p>\u003Cp>\u003C/p>\u003Ch3 id=\"h7256896ff5\">キッザニアを楽しむための心構え\u003C/h3>\u003Cp>キッザニアではすべてが\u003Cstrong>早い者勝ち\u003C/strong>です。\u003Cbr>人気のアクティビティはすぐ埋まるため、何をどう回るかで体験できる内容が大きく変わります。\u003C/p>\u003Cp>\u003Cstrong>館内の手続き(予約や受付など)はすべて子どもが行うのが前提\u003C/strong>で、大人は基本的に手を出せません。\u003Cbr>その分、\u003Cstrong>次に何をやるかを判断する“親の動き”も重要\u003C/strong>になってきます。\u003C/p>\u003Cp>1 つのアクティビティは 5 〜 6 人と枠が少なく、複数のアクティビティが同じ時間帯にまとまって始まり、さらに15分ほどずれて別の回が始まる構造になっています。\u003Cbr>また、1つのアクティビティにかかる時間は30 〜 40分程度が多く、長いものだと90分ほどかかる場合もあります(裁判所など)。\u003Cbr>そのため、\u003Cstrong>1 日を通して体験できるのは 5 〜 6 個ほどが目安\u003C/strong>で、すべてを回ることはできません。\u003Cbr>\u003Cbr>迷っていると、先着順でどんどん埋まっていきます。\u003C/p>\u003Cp>待機場所も限られており、待ち時間が発生するとその間は何もできません。\u003Cbr>なので\u003Cstrong>事前にある程度の計画を立てておくのが前提\u003C/strong>です。\u003C/p>\u003Ch2 id=\"h99beb4c042\">大まかな 1 日の流れ\u003C/h2>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/f43ebb81f6d24d9f874e1d55df01c30b/%E9%A4%A8%E5%86%85%E3%81%AE%E6%A7%98%E5%AD%90.png\" alt=\"館内の様子\" width=\"1718\" height=\"1150\">\u003Cfigcaption>館内の様子。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>ここからは、キッザニア東京の第 2 部をもとに、当日の流れを見ていきます。\u003C/p>\u003Ch3 id=\"h1fd24d0ec6\">入場前\u003C/h3>\u003Cp>ららぽーと到着後、まず受付を済ませると、入場のための待機場所が指定されます。\u003Cbr>少しでも早く入りたい場合は、\u003Cstrong>3 〜 4 時間前には受付を済ませておく\u003C/strong>必要があります。\u003C/p>\u003Cp>実際、平日の第 1 部に行った際は朝 6 時に到着しましたが、それでもすでに多くの人が並んでおり、かなり待つことになりました。\u003C/p>\u003Cp>受付後、子どもには\u003Cstrong>「Jobスケジュールカード」\u003C/strong>が 1 人 1 枚渡されます。\u003Cbr>\u003Cstrong>アクティビティの受付や予約は、すべてこのカードを使って行う\u003C/strong>ためとても重要なアイテムです。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/2d6b84279e82459490ca48f5671282c2/%E3%82%B8%E3%83%A7%E3%83%96%E3%82%AB%E3%83%BC%E3%83%89.png?w=450&h=474\" alt=\"ジョブスケジュールカード\" width=\"450\" height=\"474\">\u003C/figure>\u003Cp>\u003Cbr>どんな仕事があるか自体は事前にある程度把握できますが、\u003Cstrong>「どのアクティビティが何時から始まるか」は入場後でないとわかりません\u003C/strong>(最近は並んだ際に発行されるレシートに一部情報が記載されるようになり、多少はわかりやすくなりました)。\u003C/p>\u003Ch3 id=\"h445685a55e\">アクティビティの予約\u003C/h3>\u003Cp>キッザニアの予約システムは少しわかりづらく、最初につまずきやすいポイントです。\u003C/p>\u003Cp>まず、予約は各パビリオンの受付でしか行えません。\u003Cbr>また、\u003Cstrong>予約できるのは 1 つまで\u003C/strong>で、すでに予約がある状態では、その開始時間までに終わるアクティビティしか参加できません。\u003C/p>\u003Cp>\u003Cstrong>予約は集合時間単位でしか取ることができず、後の回を自由に選ぶことはできません\u003C/strong>。\u003Cbr>受付のスタッフに声をかけ、JobスケジュールカードのQRコードを読み取ってもらうことで予約が確定します。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/7ad66853808440eaade4f53ce70d3515/%E5%8F%97%E4%BB%98.png?w=1200&h=959\" alt=\"受付\" width=\"1200\" height=\"959\">\u003C/figure>\u003Ch4 id=\"h0087f1f435\">\u003Cbr>\u003Cstrong>現地での判断と難しさ\u003C/strong>\u003C/h4>\u003Cp>各パビリオン前の\u003Cstrong>管理表\u003C/strong>には、\u003Cstrong>アクティビティの集合時間や定員、対象年齢、必要な持ち物などの最新情報が掲示\u003C/strong>されており、これをもとにその場で判断しなければいけません。\u003C/p>\u003Cp>館内ではアプリでも情報を確認できますが、表示には遅延があるため、現地ではこの管理表の情報が基準になります。目の前で受付が締め切られることも珍しくなく、現地では泣き出す子どもや焦る親の姿も見かけます。\u003C/p>\u003Cp>予約を取るとその時間に縛られ、合間にできる仕事がかなり限られてしまう一方で、予約をしないと人気のアクティビティはほとんど取れません。\u003C/p>\u003Cp>このため、\u003Cstrong>常に「今予約を取るべきか」「別の仕事を先にやるべきか」を判断\u003C/strong>し続けなければいけません。\u003Cbr>ここでも\u003Cstrong>親のマネジメント力\u003C/strong>が問われるわけです。\u003C/p>\u003Ch3 id=\"h30aa01c3c5\">お仕事の流れ\u003C/h3>\u003Cp>アクティビティの時間になると、\u003Cstrong>制服\u003C/strong>に着替えて仕事が始まります。\u003C/p>\u003Cp>パビリオンごとに内容はさまざまで、例えばニンテンドーのパビリオンでは、Switch のゲーム制作ができるゲームソフトを使って、キャラクターの色を変えたり背景を調整したりといった作業を行っていました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/da6dd2f6ae874fcb808ec68a2cd8417e/%E4%BD%9C%E6%A5%AD%E3%81%AE%E6%A7%98%E5%AD%90.png?w=1200&h=866\" alt=\"作業の様子\" width=\"1200\" height=\"866\">\u003C/figure>\u003Cp>\u003Cbr>JRA では馬のアニマトロニクスに餌をあげる体験や触れ合いができたり、デパートでは\u003Cstrong>年齢によって役割\u003C/strong>が変わり、小さい子は品出し、大きい子はラッピングを担当するなど、\u003Cstrong>同じパビリオンでも内容に違い\u003C/strong>があります。\u003Cbr>\u003Cbr>\u003C/p>\u003Ch4 id=\"haa60f8fdcd\">\u003Cstrong>報酬とお土産\u003C/strong>\u003C/h4>\u003Cp>多くのアクティビティでは、\u003Cstrong>終了後にお土産\u003C/strong>がもらえます。\u003Cbr>例えば RF1 のパビリオンでは\u003Cstrong>作ったサラダ\u003C/strong>を持ち帰ることができ、Zoff では自分で\u003Cstrong>組み立てたメガネ\u003C/strong>をそのまま持ち帰れました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/e3dfc808700b4f49ac05e381902876cd/%E3%82%B5%E3%83%A9%E3%83%80%E4%BD%9C%E3%82%8A.png?w=900&h=553\" alt=\"サラダを作っている様子\" width=\"900\" height=\"553\">\u003C/figure>\u003Cp>\u003Cbr>加えて\u003Cstrong>報酬としてキッゾも支給\u003C/strong>され、ほとんどの仕事で 10 キッゾがもらえます。\u003Cbr>\u003Cbr>\u003C/p>\u003Ch4 id=\"h5f5fe1b02f\">\u003Cstrong>キッゾの使い道\u003C/strong>\u003C/h4>\u003Cp>稼いだキッゾは、館内でいくつかの使い道があります。\u003C/p>\u003Cp>\u003Cstrong>三井住友銀行のブースでは口座を作って預ける\u003C/strong>ことができ、キャッシュカードを使ってATMから引き出すことも可能です。利子もつきます。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/7fc823af523344fbb008c5afdb6530bb/%E9%8A%80%E8%A1%8C.png?w=900&h=569\" alt=\"銀行\" width=\"900\" height=\"569\">\u003C/figure>\u003Cp>\u003Cbr>一方で、\u003Cstrong>デパートなどで商品を購入\u003C/strong>することもできますが、価格はやや高めです。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/f6a8c7857cc84bbf8c3dc8a713d904cc/%E3%83%87%E3%83%91%E3%83%BC%E3%83%88.png?w=900&h=551\" alt=\"デパート\" width=\"900\" height=\"551\">\u003C/figure>\u003Cp>\u003Cbr>また、\u003Cstrong>一部のアクティビティではキッゾを使って体験や飲食\u003C/strong>をすることもできます。\u003Cbr>\u003Cbr>\u003C/p>\u003Ch4 id=\"ha0066fba9c\">\u003Cstrong>体験中の様子と写真\u003C/strong>\u003C/h4>\u003Cp>館内では大人は基本的にアクティビティの中には入れませんが、外から様子を見ることができる場所が多く、写真を撮ることに忙しくなります。\u003Cbr>気づくとあっという間に時間が過ぎていきます。\u003C/p>\u003Cp>こうして仕事をこなしていくと、Jobスケジュールカードが埋まっていきます。\u003Cbr>「写真撮影」のマークがついているアクティビティでは、スタッフが撮影した写真を後から購入することもできます。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/0b8b415c213c44729c1caaf664def64e/%E5%9F%8B%E3%81%BE%E3%81%A3%E3%81%A6%E3%81%84%E3%81%8F%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%82%AB%E3%83%BC%E3%83%89.png?w=800&h=729\" alt=\"埋まっていくスケジュールカード\" width=\"800\" height=\"729\">\u003C/figure>\u003Ch2 id=\"ha214098e44\">まとめ\u003C/h2>\u003Cp>キッザニアは一見するとテーマパークですが、実際には\u003Cstrong>「時間」と「予約」をどう扱うかで体験の質が大きく変わる場所\u003C/strong>です。\u003C/p>\u003Cp>子どもが主体となって動く仕組みである一方で、\u003Cstrong>限られた時間の中での体験の組み立て\u003C/strong>は、親のマネジメントにも大きく関わってきます。\u003Cbr>事前に流れを理解しておくだけでも、当日の動きやすさは大きく変わります。\u003C/p>\u003Cp>なお、キッザニアは子ども向けの施設ですが、\u003Ca href=\"https://www.kidzania.jp/tokyo/news/17255\" target=\"_blank\" rel=\"noopener noreferrer\">16歳以上の学生向けイベント\u003C/a>や、\u003Ca href=\"https://www.kidzania.jp/tokyo/news/17087\" target=\"_blank\" rel=\"noopener noreferrer\">大人向けに開放される企画\u003C/a>が実施されるなど、通常とは違った形で体験できる機会もあるようです。\u003C/p>\u003Cp>これからキッザニアに行ってみる予定がある方は、行く前の参考になれば幸いです。\u003C/p>",170,3,{"contents":146,"totalCount":364,"offset":96,"limit":365},[147,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,191,194,197,200,203,206,209,212,215,218,221,224,227,230,233,236,239,241,244,247,250,253,254,257,260,263,266,269,272,275,278,281,284,287,290,291,294,297,300,303,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361],{"id":16,"name":18},{"id":149,"name":150},"workshop","ワークショップ",{"id":152,"name":153},"tool","ツール",{"id":155,"name":156},"office","オフィス",{"id":158,"name":159},"internal-project","社内案件",{"id":161,"name":162},"event","イベント",{"id":164,"name":165},"iot","IoT",{"id":167,"name":168},"art","アート",{"id":170,"name":171},"moving","引越し",{"id":173,"name":174},"picture","映像",{"id":176,"name":177},"plant","植物",{"id":179,"name":180},"company-trip","社員旅行",{"id":182,"name":183},"health","健康",{"id":185,"name":186},"exercise","運動",{"id":188,"name":189},"bicycle-club","自転車部",{"id":35,"name":39},{"id":192,"name":193},"interview","Interview",{"id":195,"name":196},"recruiting","採用",{"id":198,"name":199},"tea","お茶会",{"id":201,"name":202},"history","歴史",{"id":204,"name":205},"life","生活",{"id":207,"name":208},"club","部活動",{"id":210,"name":211},"character","キャラクター",{"id":213,"name":214},"food","食",{"id":216,"name":217},"math","数学",{"id":219,"name":220},"alcohol","酒",{"id":222,"name":223},"infrastructure","インフラ",{"id":225,"name":226},"application","アプリ",{"id":228,"name":229},"parenting","子育て",{"id":231,"name":232},"data","通信",{"id":234,"name":235},"migration","地方移住",{"id":237,"name":238},"security","セキュリティ",{"id":240,"name":240},"esports",{"id":242,"name":243},"look-back","振り返り",{"id":245,"name":246},"animal","動物",{"id":248,"name":249},"css","CSS",{"id":251,"name":252},"game","ゲーム",{"id":21,"name":24},{"id":255,"name":256},"management","マネジメント",{"id":258,"name":259},"remote-work","リモートワーク",{"id":261,"name":262},"frame-work","フレームワーク",{"id":264,"name":265},"music","音楽",{"id":267,"name":268},"money","お金",{"id":270,"name":271},"covid-19","コロナ",{"id":273,"name":274},"railway","鉄道",{"id":276,"name":277},"agriculture","農業",{"id":279,"name":280},"hobby","趣味",{"id":282,"name":283},"certification","資格",{"id":285,"name":286},"personal-computer","PC",{"id":288,"name":289},"welfare","福利厚生",{"id":31,"name":33},{"id":292,"name":293},"study","勉強",{"id":295,"name":296},"mental-health","メンタルヘルス",{"id":298,"name":299},"frontend","フロントエンド",{"id":301,"name":302},"pilates","ピラティス",{"id":26,"name":29},{"id":305,"name":306},"tunnel","トンネル",{"id":308,"name":309},"design","デザイン",{"id":311,"name":312},"sports","スポーツ",{"id":314,"name":315},"online","オンライン",{"id":317,"name":318},"internship","インターンシップ",{"id":320,"name":321},"animation","アニメーション",{"id":323,"name":324},"virtual-reality","VR",{"id":326,"name":327},"ssl","SSL",{"id":329,"name":330},"perl","Perl",{"id":332,"name":333},"operating-system","OS",{"id":335,"name":336},"ios","iOS",{"id":338,"name":339},"google","Google",{"id":341,"name":342},"deeplearning","DeepLearning",{"id":344,"name":345},"aws","AWS",{"id":347,"name":348},"apple","Apple",{"id":350,"name":351},"api","API",{"id":353,"name":354},"3-d","3D",{"id":356,"name":357},"school","学校",{"id":359,"name":360},"blender","Blender",{"id":362,"name":363},"android","Android",76,200,{"contents":367,"totalCount":144,"offset":96,"limit":144},[368,422,486],{"id":369,"createdAt":370,"updatedAt":371,"publishedAt":372,"revisedAt":371,"title":373,"category":374,"thumbnail":383,"image":387,"content":396,"keyword":397,"client":412,"team":413,"url":417,"release":418,"status":419,"top":19,"blog":40,"service":421},"phpj-noel-2025","2025-12-15T06:18:04.117Z","2026-03-10T03:11:10.799Z","2026-03-05T04:15:03.177Z","PIERRE HERMÉ PARIS | NOËL 2025",[375,380],{"id":376,"createdAt":377,"updatedAt":378,"publishedAt":377,"revisedAt":377,"name":379},"web","2024-03-22T05:33:05.262Z","2024-06-24T23:16:42.692Z","ウェブ制作",{"id":308,"createdAt":381,"updatedAt":381,"publishedAt":381,"revisedAt":381,"name":382},"2024-03-22T05:34:30.127Z","デザイン＆ディレクション",{"url":384,"height":385,"width":386},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/47e7b069013a45b8b6e931ec132bd272/thumb.png",900,1200,[388,392,394],{"url":389,"height":390,"width":391},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/43a703ebe8d7467aac2c995378cb081e/1.png",1800,2400,{"url":393,"height":390,"width":391},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/6aed2d670822422696329a5cb3a6877f/2.png",{"url":395,"height":390,"width":391},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/b691d73151a94dcf9d60a6f8af436eac/3.png","\u003Cp>昨年に続き、ホリデーシーズン限定の『NOËL 2025』スペシャルサイトを、デザインとフロントエンドで担当しました。\u003Cbr>\u003Cbr>「深海(アビス)」をテーマに、鮮やかな青から徐々に暗く沈んでいくグラデーションで、海の中を潜っていくような体験を表現。泡や珊瑚、砂などのモチーフを取り入れ、ページ全体で海中の世界を感じられる構成に仕上げました。\u003Cbr>\u003Cbr>砂や泡の表現にはWebGLとGPGPUを用い、数万単位のパーティクルをGPUで並列処理することで滑らかな動作を実現。一部テキストは3D描画で演出しながら、DOM上にも同内容を配置し、表現とSEOの両立を図りました。\u003Cbr>また、Safariなどブラウザ差異による負荷を考慮し、SVGからCanvasへ置き換えるなど最適化を実施。視覚的な印象を保ちながら、各環境で安定して動作するよう設計しています。\u003Cbr>\u003Cbr>デザインと実装の両面から、制作の背景やポイントについてブログで詳しく解説しています。\u003C/p>",[398,402,407],{"id":399,"createdAt":400,"updatedAt":401,"publishedAt":400,"revisedAt":401,"name":299,"filter":40,"page":40},"ice0h9h9ap","2024-06-28T01:14:44.830Z","2025-01-15T07:40:01.729Z",{"id":403,"createdAt":404,"updatedAt":405,"publishedAt":404,"revisedAt":405,"name":406,"filter":40,"page":40},"6ncqc37v7nzq","2024-06-28T01:14:12.293Z","2025-01-15T07:39:08.437Z","デザインプロジェクト",{"id":408,"createdAt":409,"updatedAt":410,"publishedAt":409,"revisedAt":410,"name":411,"filter":40,"page":40},"ztrz9np70v","2024-06-28T01:14:41.050Z","2025-01-15T07:40:30.428Z","コンセプトメイキング"," PH PARIS JAPON 株式会社",[414],{"fieldId":415,"title":416},"teamField","S2ファクトリー","https://www.s2factory.co.jp/blog/noel2025/","2025.10.17",[420],"公開中",[],{"id":423,"createdAt":424,"updatedAt":425,"publishedAt":424,"revisedAt":425,"title":426,"category":427,"thumbnail":434,"image":437,"content":442,"keyword":443,"client":426,"team":458,"url":481,"release":482,"status":483,"statusText":484,"top":40,"blog":40,"service":485},"tamabi","2024-06-28T01:58:38.788Z","2025-05-27T03:25:42.261Z","多摩美術大学",[428,429],{"id":376,"createdAt":377,"updatedAt":378,"publishedAt":377,"revisedAt":377,"name":379},{"id":430,"createdAt":431,"updatedAt":432,"publishedAt":431,"revisedAt":431,"name":433},"system","2024-03-22T05:33:52.708Z","2024-06-24T23:16:53.739Z","システム開発",{"url":435,"height":104,"width":436},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/dea8e004e627415c80bf7b8d622bb4b9/tamabi-thumbnail-1.png",600,[438],{"url":439,"height":440,"width":441},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/a000f3cedf5d474d83c5b70e8c11db4e/tamabi-other-1.png",1305,1740,"\u003Cp>「多摩美術大学」ウェブサイトリニューアルのお手伝いをさせていただきました。\u003Cbr>\u003Cbr>サイトのコンテンツを大幅に整理し、運用効率を考慮した再利用しやすく組み合わせやすいUIコンポーネントを構築。また多くの方に利用していただけるようにアクセシビリティの向上にも注力しました。\u003Cbr>インフラは、従来のオンプレミスとクラウドが混在していた環境から、AWS への段階的な移行を進めており、今後の完全移行に向けた準備も進行中です。 \u003Cbr>\u003Cbr>弊社は、フロントエンドとバックエンドの実装、インフラ構築を担当しました。\u003C/p>",[444,448,452,457],{"id":445,"createdAt":446,"updatedAt":447,"publishedAt":446,"revisedAt":447,"name":345,"filter":40,"page":40},"uftrxsmd0v72","2024-06-28T01:14:13.671Z","2025-01-15T07:39:25.538Z",{"id":449,"createdAt":450,"updatedAt":450,"publishedAt":450,"revisedAt":450,"name":451,"filter":19,"page":19},"yctx9hzd4","2024-06-28T01:14:33.743Z","Lambda",{"id":453,"createdAt":454,"updatedAt":455,"publishedAt":454,"revisedAt":455,"name":456,"filter":40,"page":40},"u84cy0fbzno","2024-06-28T01:14:39.521Z","2025-01-15T07:40:41.433Z","Cloud",{"id":399,"createdAt":400,"updatedAt":401,"publishedAt":400,"revisedAt":401,"name":299,"filter":40,"page":40},[459,462,465,468,471,474,477,480],{"fieldId":415,"title":460,"link":461},"萩原 俊矢","https://shunyahagiwara.com/#/works",{"fieldId":415,"title":463,"link":464},"GrandBase Inc.","https://www.grandbase.jp/",{"fieldId":415,"title":466,"link":467},"DSCL Inc.","https://dscl.jp/",{"fieldId":415,"title":469,"link":470},"株式会社トラフィックス","https://traffics.jp/",{"fieldId":415,"title":472,"link":473},"株式会社カンバセーションズ","https://qonversations.jp/",{"fieldId":415,"title":475,"link":476},"Measurements Inc.","https://www.measurements.co.jp/",{"fieldId":415,"title":478,"link":479},"tha ltd.","https://tha.jp/",{"fieldId":415,"title":416},"https://www.tamabi.ac.jp/","2024.4.4",[420],null,[379],{"id":487,"createdAt":488,"updatedAt":489,"publishedAt":488,"revisedAt":489,"title":490,"category":491,"thumbnail":493,"image":495,"content":504,"keyword":505,"client":478,"team":521,"url":527,"release":528,"status":529,"statusText":484,"top":19,"blog":40,"service":530},"humanity","2024-06-28T01:56:51.507Z","2025-05-27T03:26:34.287Z","HUMANITY",[492],{"id":430,"createdAt":431,"updatedAt":432,"publishedAt":431,"revisedAt":431,"name":433},{"url":494,"height":104,"width":436},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/740adb4e02c54fee97d12025df5f16a0/humanity-thumbnail-1.png",[496,498,500,502],{"url":497,"height":440,"width":441},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/2a10b034854d40e789d38ac33e0a3c4e/humanity-other-1.png",{"url":499,"height":440,"width":441},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/1091c52a97f745e5a3fc105bd0e542dc/humanity-other-2.png",{"url":501,"height":440,"width":441},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/613c8c836fff40119e9f85097262399d/humanity-other-3.png",{"url":503,"height":440,"width":441},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/3a9dfb8cce0d4ec887ead3d3998be04c/humanity-other-4.png","\u003Cp>『HUMANITY』は、インターフェース／ビジュアルデザイナーの中村勇吾氏とゲームクリエイター水口哲也氏のタッグによって制作された PlayStation 5(PS VR2対応)、PlayStation 4(PS VR対応)、Steam(PC用VR対応)用アクションパズルゲームです。\u003Cbr>\u003Cbr>プレイヤーは柴犬を操作して、自我を失った人類を導きゴールを目指します。\u003Cbr>メインのストーリーモードには 90 以上のステージを収録。さらに「STAGE CREATOR」では、自分だけのオリジナルステージを作って全世界のプレイヤーにシェアが可能です。また「USER STAGES」では、他のプレイヤーがシェアしたステージが公開され、カスタムのプレイリストや、タグを使用して検索し、お気に入りのステージを発見・チャレンジできます。\u003Cbr>\u003Cbr>弊社はゲームのコミュニティ機能のバックエンドと管理ツールの作成、インフラを担当しました。\u003C/p>",[506,511,516,517],{"id":507,"createdAt":508,"updatedAt":509,"publishedAt":508,"revisedAt":509,"name":510,"filter":40,"page":40},"fg8e4c9nl","2024-06-28T01:14:04.517Z","2025-01-15T07:36:58.970Z","CMS",{"id":512,"createdAt":513,"updatedAt":514,"publishedAt":513,"revisedAt":514,"name":515,"filter":40,"page":40},"p6qgoo2k9vl9","2024-06-28T01:14:06.759Z","2025-01-15T07:37:22.466Z","大規模データ",{"id":453,"createdAt":454,"updatedAt":455,"publishedAt":454,"revisedAt":455,"name":456,"filter":40,"page":40},{"id":518,"createdAt":519,"updatedAt":520,"publishedAt":519,"revisedAt":520,"name":252,"filter":40,"page":40},"pxnv6cy2u","2024-06-28T01:14:45.570Z","2025-01-15T07:39:54.004Z",[522,525,526],{"fieldId":415,"title":523,"link":524},"Enhance","https://enhance-experience.com/ja/",{"fieldId":415,"title":478,"link":479},{"fieldId":415,"title":416},"https://humanity.game/ja/","2023.5.16",[420],[433],1780364841138]