[{"data":1,"prerenderedAt":659},["ShallowReactive",2],{"detailcustom-reservation-system":3,"detail_related_custom-reservation-system_infrastructure":227,"$f9RY0l0i7KLl5y8RCCs5zGoUIlKmbQZNHir2tIkBpGsQ":252,"$f7OovQEBIkf3flPSO65XgVqn1FRUlN7OLmCu_FYFaAPE":286,"works":495},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":7,"revisedAt":7,"title":8,"tag":9,"recommended_articles":37,"eyecatch":143,"heading_list":32,"content2":145,"description":146,"related_articles":147,"recruit":15,"cta_title":225,"cta_text":226,"is_html":15,"is_migration":15},"custom-reservation-system","2026-08-24T05:53:29.501Z","2026-09-07T04:01:25.896Z","2026-09-07T03:51:13.114Z","3つの事例で見るフルカスタムの予約システム",[10,16,21,26,33],{"id":11,"createdAt":12,"updatedAt":13,"publishedAt":12,"revisedAt":13,"name":14,"top":15},"infrastructure","2023-08-07T17:24:41.630Z","2023-08-07T17:25:39.420Z","インフラ",false,{"id":17,"createdAt":18,"updatedAt":19,"publishedAt":18,"revisedAt":18,"name":20,"top":15},"security","2023-08-07T09:08:35.290Z","2023-08-09T06:17:46.657Z","セキュリティ",{"id":22,"createdAt":23,"updatedAt":24,"publishedAt":23,"revisedAt":23,"name":25,"top":15},"backend","2023-06-01T09:41:39.644Z","2023-08-09T06:36:56.137Z","バックエンド",{"id":27,"createdAt":28,"updatedAt":29,"publishedAt":28,"revisedAt":30,"name":31,"top":32},"promotion","2023-07-13T11:19:32.620Z","2023-08-09T08:38:30.413Z","2023-08-09T07:10:47.562Z","PR",true,{"id":34,"createdAt":35,"updatedAt":35,"publishedAt":35,"revisedAt":35,"name":36,"top":15},"tech","2023-06-01T09:42:09.082Z","技術",[38,77,112],{"id":39,"createdAt":40,"updatedAt":41,"publishedAt":42,"revisedAt":41,"title":43,"tag":44,"recommended_articles":52,"eyecatch":59,"heading_list":15,"content2":63,"description":64,"related_articles":65,"recruit":15,"cta_url":76,"is_html":15,"is_migration":15},"claude-code-perl-typescript-migration","2026-05-29T08:21:55.189Z","2026-09-01T05:43:45.290Z","2026-06-02T01:45:24.758Z","テストがない 10 万行の Perl システムを、Claude Code で TypeScript へ書き換えた話",[45,47,49,50,51],{"id":46},"ai",{"id":48},"typescript",{"id":22},{"id":34},{"id":27},[53,55,57],{"id":54},"design-project-1",{"id":56},"ai-generated-campaign-site",{"id":58},"bird-classification-2",{"url":60,"height":61,"width":62},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1632b87e5aaa4944a854ccc430cdb89e\u002F%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81.png",941,1672,"\u003Ch2 id=\"h586b90d155\">「AI が書いたコード、読んでますか？」\u003C\u002Fh2>\u003Cp>最近よく見かけるこの議論に、正直に答えます。\u003C\u002Fp>\u003Cp>\u003Cstrong>全部は読んでいません。10 万行、読みきれません。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>これは無責任に聞こえるかもしれません。「AI が書いたコードの 80% は負債だ」という研究もありますし、「理解していないコードをリリースするな」という意見はもっともだと思います。\u003C\u002Fp>\u003Cp>ただ、10 万行のコードを1行ずつ目で追って品質を担保するのは、\u003Cstrong>現実的に難しい\u003C\u002Fstrong>ですよね。人間が書いたコードでも、全行レビューはしていないはずです。\u003C\u002Fp>\u003Cp>じゃあどうしたか。\u003C\u002Fp>\u003Cp>\u003Cstrong>読む代わりに、検証する仕組みを作りました。 AI に書かせたコードを、AIに検証させ続ける\u003C\u002Fstrong>。24 時間、何百ラウンドも、バグが出なくなるまで。読んで理解する代わりに、正しさを証明する。\u003C\u002Fp>\u003Cp>この記事は、その話です。\u003C\u002Fp>\u003Ch2 id=\"h90ca2bc41d\">前提：テストがほぼない\u003C\u002Fh2>\u003Cp>私が担当しているのは、ある企業の EC サイトのバックエンドです。\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.perl.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">Perl\u003C\u002Fa> で書かれていて、10 年以上動いています。認証、注文、決済、予約、LINE連携、クーポン。\u003Cstrong>API のエンドポイントは 133 個\u003C\u002Fstrong>あります。\u003C\u002Fp>\u003Cp>そしてこのコードベースには、\u003Cstrong>まともな自動テストがほぼありませんでした。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>初めてソースを開いたときのことは覚えています。10 年分のビジネスロジックがぎっしり詰まっていて、でもそれを検証する手段が何もない。仕様書もない。何かを変えたとき、壊れたかどうかを知る方法がない。よくこれで 10 年動いてきたなと、率直に思いました。\u003C\u002Fp>\u003Cp>\u003Cstrong>これを \u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.typescriptlang.org\u002Fja\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>TypeScript\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> に書き換えろ、というのが今回のミッション\u003C\u002Fstrong>でした。\u003C\u002Fp>\u003Ch2 id=\"h460484bf92\">普通にやったら詰みます\u003C\u002Fh2>\u003Cp>テストのないコードの移植は、ソフトウェアエンジニアリングでも最悪の部類に入る仕事です。\u003C\u002Fp>\u003Cp>教科書的にやるなら、まず既存の Perl コードにテストを書きます。挙動を固めてから、TypeScript で書き直す。でも 10 年分のコードにテストを書く工数は、移植そのものと同じかそれ以上かかります。しかも、Perl の挙動をちゃんと理解してテストに落とせる人材は限られています。\u003C\u002Fp>\u003Cp>詰んでます。\u003C\u002Fp>\u003Ch2 id=\"h4677704352\">Claude Code に「書かせる」のは1週間で終わりました\u003C\u002Fh2>\u003Cp>Claude Code には、\u003Cstrong>カスタムスラッシュコマンド\u003C\u002Fstrong>という機能があります。\u003Cstrong>自分でコマンドを定義して、繰り返し使える仕組み\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>私はまず \u003Ccode>\u002Fmigrate-endpoint\u003C\u002Fcode> というコマンドを作りました。\u003C\u002Fp>\u003Cp>Perl のコントローラのファイルパスを渡すと、Claude Code が関連するモデルやエンティティ、DB スキーマまで全部読みに行って、TypeScript の実装コードとテストを一気に生成してくれます。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F285f776615bd4583a5177b8d1c440a90\u002Fmigrate-endpoint-flow.png\" alt=\"\" width=\"1448\" height=\"1086\">\u003C\u002Ffigure>\u003Cp>\u003Cstrong>テストがないなら、テストごと作ればいい。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>この割り切りで、\u003Cstrong>移植前にテストを書くという工程を丸ごとスキップ\u003C\u002Fstrong>できました。\u003C\u002Fp>\u003Cp>133 エンドポイント、約 10 万行。実装が終わるまで、約 1 週間でした。最初のエンドポイントが動いたときは「本当にこれでいけるのか？」という気持ちが正直ありましたが、\u003Cstrong>2 つ目、3 つ目と進むうちに、コマンドの精度がどんどん上がっていく\u003C\u002Fstrong>のがわかりました。\u003C\u002Fp>\u003Ch2 id=\"h1a681fd8e2\">でも「書けた」は「正しい」じゃない\u003C\u002Fh2>\u003Cp>1 週間で 10 万行。数字だけ見ればすごいです。\u003C\u002Fp>\u003Cp>でも、テストのほぼない Perl から移植したコードです。\u003Cstrong>「動くけど微妙に違う」コードが量産されている可能性\u003C\u002Fstrong>は大いにあります。\u003C\u002Fp>\u003Cp>Perl は未定義値を空文字やゼロとして黙って処理します。TypeScript ではそうはいきません。タイムゾーンの扱いも違う。数値と文字列の暗黙変換もある。こういう差異は、普通のテストでは見つかりません。\u003C\u002Fp>\u003Cp>そこで、これも仕組みで解決することにしました。\u003C\u002Fp>\u003Ch2 id=\"h7480bb35d9\">パリティ監査という仕組みを作りました\u003C\u002Fh2>\u003Cp>もう 1 つのカスタムコマンド、\u003Ccode>\u002Fparity-audit\u003C\u002Fcode> を作りました。\u003C\u002Fp>\u003Cp>やることはシンプルです。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Perl のコードと TypeScript のコードを突き合わせて、挙動の差異を見つける\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>差異があればバグとして修正し、テストを追加する\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>このコマンドを実行すると、\u003Cstrong>1 ラウンドで 20 の AI エージェントが並列に起動\u003C\u002Fstrong>し、それぞれが違う切り口でコードを調べていきます。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fe1d8b1dc72f44fcf9f367d8dc3b852b9\u002Fparity-audit-flow.png\" alt=\"\" width=\"1447\" height=\"1087\">\u003C\u002Ffigure>\u003Cp>あるエージェントはエンドポイント単位で、リクエストからレスポンスまでのコードパスを 1 行ずつ比較しています。別のエージェントは DB アクセス層を見ていて、クエリの条件やソート順、NULL の扱いをチェックしています。\u003C\u002Fp>\u003Cp>決済まわりを専門で見るエージェントもいます。税計算、クーポン適用、支払いステータス。1 円でもズレたらアウトの領域です。認証・セッション管理を集中的に検証するエージェントもいて、ログインや SSO、MFA といったセキュリティに直結する処理を重点的に見ます。\u003C\u002Fp>\u003Cp>日時処理、暗号化、バーコード生成といった「言語が変わると挙動が変わりやすい」ユーティリティも、専用のエージェントが横断的にチェックしています。\u003C\u002Fp>\u003Cp>これだけの観点を人間が毎回カバーするのは、まず無理だと思います。\u003C\u002Fp>\u003Ch2 id=\"h9def901947\">「10回連続クリーン」になるまで止めません\u003C\u002Fh2>\u003Cp>パリティ監査には、1 つ\u003Cstrong>ルール\u003C\u002Fstrong>を課しました。\u003C\u002Fp>\u003Cp>\u003Cstrong>連続10回、差異ゼロが出るまで回し続ける。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>1ラウンドでもバグが見つかったら、カウンタはゼロに戻ります。修正して、また最初から。10 回連続でクリーンになって、初めて「OK」です。\u003C\u002Fp>\u003Cp>このコマンドを夜間も含めて走らせ続けました。\u003C\u002Fp>\u003Cp>\u003Cstrong>2.5 ヶ月間。\u003C\u002Fstrong>\u003C\u002Fp>\u003Ch2 id=\"h29bb0ce50d\">監査 379 ラウンド、800件以上のバグを修正\u003C\u002Fh2>\u003Cp>結果として、\u003Cstrong>379 ラウンドの監査を回し、800 件以上のバグ\u003C\u002Fstrong>を見つけて直しました。\u003C\u002Fp>\u003Cp>最初のほうはラウンドごとにバグが山のように出てきて、正直なところ気が遠くなりました。でも修正を重ねるうちに、だんだんクリーンなラウンドが増えてきます。連続クリーンが 5 回、6 回と伸びていくのを見ているときは、ちょっとした達成感がありました。\u003C\u002Fp>\u003Cp>中には、\u003Cstrong>移植元の Perl 側に何年も潜んでいたバグが見つかったケースも\u003C\u002Fstrong>ありました。テストがなかったから、誰も気づかなかったバグです。\u003Cstrong>パリティ監査がなければ、そのまま TypeScript 側にも引き継がれていた\u003C\u002Fstrong>でしょう。\u003C\u002Fp>\u003Ch2 id=\"h3884ede80a\">これで何が変わったか\u003C\u002Fh2>\u003Cp>移植前と移植後で、テストの状況は一変しました。\u003C\u002Fp>\u003Cp>\u003Cstrong>移植後のテストは 1,419 件。\u003C\u002Fstrong> しかも全部パスしています。移植プロジェクトとしてだけでなく、テスト資産の構築としても大きな成果だと思っています。\u003C\u002Fp>\u003Cp>そして、1,419 件のテストがあるということは、ここからのリファクタリングが容易になるということでもあります。\u003Cstrong>テストがなかった頃は怖くて触れなかったコードを、安心して改善できる。\u003C\u002Fstrong>移植がゴールではなく、ここからがスタートです。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ffaaa3c46c0cf4ac6b95524e19d81e50c\u002Fmigration-audit-results.png\" alt=\"\" width=\"1448\" height=\"1086\">\u003C\u002Ffigure>\u003Ch2 id=\"h49ccabfba5\">そして、人間の手で確かめました\u003C\u002Fh2>\u003Cp>\u003Cstrong>最後に、フロントエンドとつないで E2E テスト\u003C\u002Fstrong>をしました。\u003C\u002Fp>\u003Cp>これは人間が手で動かすテストです。実際のブラウザで、実際の画面を操作して、注文を入れて、決済して、予約して。AI ではなく、人間の目と手で確かめました。\u003C\u002Fp>\u003Cp>\u003Cstrong>不具合は見つかりませんでした。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>10 万行。テストがほぼない状態からの移植。AI が書いて、AI が検証して、最後に人間が触って、壊れていなかった。\u003C\u002Fp>\u003Cp>正直、自分でもちょっと信じられませんでした。\u003C\u002Fp>\u003Ch2 id=\"h42e2556fbc\">Claude Codeの使い方として伝えたいこと\u003C\u002Fh2>\u003Cp>この経験を通じて、Claude Code の使い方について 3 つのことがわかりました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>カスタムコマンドで「仕組み」にする\u003C\u002Fstrong>\u003Cul>\u003Cli>属人的な「上手いプロンプトの書き方」ではなく、誰でも実行できるコマンドとして定義します。これで品質が人に依存しなくなります。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Ca href=\"http:\u002F\u002FCLAUDE.md\">\u003Cstrong>CLAUDE.md\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> に知識を貯める\u003C\u002Fstrong>\u003Cul>\u003Cli>プロジェクト固有のルール（アーキテクチャ、命名規則、エラーコードなど）を CLAUDE.md ファイルに書いておきます。セッションが変わっても、Claude Code はこれを読んでくれます。移植が進むほどこのファイルが育ち、後半フェーズほど手戻りが減りました。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>品質保証を「計算資源」の問題にする\u003C\u002Fstrong>\u003Cul>\u003Cli>1 ラウンド 20 エージェント × 379 ラウンド。この物量の検証を人間がやるのは無理です。でもコマンドにして 24 時間回せば、品質保証は工数の問題ではなく計算資源の問題になります。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"h5b6299b788\">「読んでない」のその先へ\u003C\u002Fh2>\u003Cp>冒頭に戻ります。\u003C\u002Fp>\u003Cp>\u003Cstrong>AI が書いたコード、読んでますか？\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>私の答えは変わりません。全部は読んでいません。でも、全部検証しました。20 エージェント並列で、379 ラウンド、800 件のバグを潰して、最後に人間の手で E2E テストして、不具合ゼロ。\u003C\u002Fp>\u003Cp>もちろん、コードを読んで理解すること自体の価値を否定するつもりはありません。ただ、「読む」以外にも品質を担保する手段はあるはずです。\u003C\u002Fp>\u003Cp>\u003Cstrong>読むか読まないかではなく、正しさをどう証明するか。\u003C\u002Fstrong> その仕組みを設計できるかどうかが、AI 時代のエンジニアリングで問われることなんじゃないかと思っています。\u003C\u002Fp>\u003Ch2 id=\"hc96909f29a\">この 3 ヶ月は長いのか\u003C\u002Fh2>\u003Cp>AI コーディングの事例として、「数時間でアプリを作った」「週末で完成した」といった話をよく見かけます。それと比べると、3 ヶ月という数字は地味に映るかもしれません。\u003C\u002Fp>\u003Cp>でも、考えてみてください。\u003Cstrong>テストのほぼない 10 万行のプロダクションコードを、133 エンドポイントの挙動を 1 つも壊さずに別言語へ移植\u003C\u002Fstrong>する。普通にやったら 1 年はかかるプロジェクトです。見積もりの段階で「現実的じゃない」と却下されてもおかしくない。\u003C\u002Fp>\u003Cp>\u003Cstrong>それを 3 ヶ月で、しかも人間の E2E テストで不具合ゼロという品質で完遂\u003C\u002Fstrong>できました。\u003C\u002Fp>\u003Cp>同じような課題を抱えている方は、少なくないと思います。テストのないレガシーシステム、移植したいけど踏み切れない、人手も時間も足りない。今回のアプローチは、そうしたプロジェクトにも十分に適用できると考えています。\u003C\u002Fp>\u003Cp>\u003Cstrong>レガシーシステムの移行でお困りの方がいらっしゃれば、ぜひご相談ください。\u003C\u002Fstrong>\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Chr>\u003Cp>\u003Cspan style=\"color: #6c6c6c\">注記：本記事で紹介した \u003C\u002Fspan>\u003Ccode>\u002Fmigrate-endpoint\u003C\u002Fcode>\u003Cspan style=\"color: #6c6c6c\">、\u003C\u002Fspan>\u003Ccode>\u002Fparity-audit\u003C\u002Fcode>\u003Cspan style=\"color: #6c6c6c\"> は Claude Code のカスタムスラッシュコマンド機能で構築したものです。\u003C\u002Fspan>\u003C\u002Fp>","テストがほぼない10万行のPerl製ECバックエンドを、Claude Codeを使ってTypeScriptへ移植。カスタムコマンドによる実装生成とパリティ監査で、379ラウンドの検証、800件以上のバグ修正、1,419件のテスト構築まで行った取り組みを紹介します。",[66,67,69,70,72,74],{"id":56},{"id":68},"event-ai-agent",{"id":58},{"id":71},"edge-ai",{"id":73},"ux-certification-basics",{"id":75},"figma-plugin","https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fshader-basics\u002F",{"id":78,"createdAt":79,"updatedAt":80,"publishedAt":81,"revisedAt":80,"title":82,"tag":83,"recommended_articles":91,"eyecatch":95,"heading_list":32,"content2":99,"description":100,"related_articles":101,"recruit":15,"is_html":15,"is_migration":15},"nazotoki","2026-03-17T06:24:17.497Z","2026-09-01T05:27:11.471Z","2026-03-30T08:35:07.001Z","Web サイトを使った謎解きを作ってみた",[84,86,88,90],{"id":85},"game",{"id":87},"tea",{"id":89},"hobby",{"id":46},[92,93,94],{"id":39},{"id":54},{"id":56},{"url":96,"height":97,"width":98},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1237f7caf6704f568fb90b1c3c65bcd3\u002Fs2-nazotoki.png",1201,1944,"\u003Cp>毎朝飲んでるトマトジュースがついに40円も値上げしてしまいました…。\u003C\u002Fp>\u003Cp style=\"text-align: start\">この記事は、社内イベント「\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ftea\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C\u002Fu>\u003C\u002Fa>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社の \u003Ca href=\"https:\u002F\u002Fx.com\u002Fs2_takano\" target=\"_blank\" rel=\"noopener noreferrer\">takano\u003C\u002Fa> が、\u003Cstrong>「謎解き」\u003C\u002Fstrong>をテーマに発表を行いました。\u003C\u002Fp>\u003Chr>\u003Cp>\u003Cbr>もともと謎解きが好きで、街歩き型のイベントや脱出ゲームなどにもよく参加しているほか、また最近では、自宅で遊べるキット型の謎解きなどにも手を出しています。\u003C\u002Fp>\u003Cp>その流れで、\u003Cstrong>今回自分でも謎解きを作ってみました。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>「謎解き」と言われても、あまり馴染みがないとイメージしづらいかもしれません。\u003Cbr>そもそも謎解きとはどういうものなのか。そこから説明したいと思います。\u003C\u002Fp>\u003Ch2 id=\"heb6bf4fdb1\">謎解きとは\u003C\u002Fh2>\u003Cp>まずはクイズとの違いから見てみます。\u003Cbr>たとえば、こんな問題です。\u003C\u002Fp>\u003Cblockquote>\u003Cp>\u003Cstrong>小田原北条氏の三代目は氏康ですが、その三男は北条氏照です。\u003Cbr>では、彼が築いた八王子にある山城といえば？\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp>答えは「\u003Cspan style=\"color: #ffffff\">八王子城\u003C\u002Fspan>」。\u003Cbr>\u003Cbr>この問題は、知識がないと解くことができません。\u003Cbr>一方で、謎解きは少し性質が異なります。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F01968bad337e4b32a6ea03bd0288fd8e\u002F%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\u002Ffigure>\u003Cp>\u003Cbr>この問題を解くと、\u003Cspan style=\"color: #000000\">「\u003C\u002Fspan>\u003Cspan style=\"color: #ffffff\">ウジテル\u003C\u002Fspan>\u003Cspan style=\"color: #000000\">」\u003C\u002Fspan>という答えが出てきます。\u003Cbr>\u003Cbr>\u003Cstrong>クイズが知識を前提にしているのに対して、謎解きは問題の中にある法則やヒントに気づく(閃く)ことで、答えにたどり着きます。\u003C\u002Fstrong>北条氏照という人物を知らなくても解ける。これが、クイズと謎解きの大きな違いです。\u003C\u002Fp>\u003Cp>考えても分からない時間があって、\u003Cstrong>ふと気づく瞬間\u003C\u002Fstrong>がある。\u003Cstrong>その体験が、謎解きの面白さ\u003C\u002Fstrong>につながっています。\u003C\u002Fp>\u003Ch3 id=\"hd0bb2aed17\">謎解きの広がり\u003C\u002Fh3>\u003Cp>謎解きの起源については諸説ありますが、主な流れを整理すると以下の通りです。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>1997年頃：\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.scrapmagazine.com\u002Fcolumn\u002Fwakuwaku01\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>株式会社SCRAP代表が親戚の集まりで宝探しイベントを始める\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Cstrong>2001年：リアル宝探しの開始(タカラッシュ)\u003C\u002Fstrong>\u003Cul>\u003Cli>現実空間で楽しむ謎解きが登場。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>2004年：『\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%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\u002Fstrong>\u003C\u002Fa>\u003Cstrong>』放送開始\u003C\u002Fstrong>\u003Cul>\u003Cli>テレビ放送としての謎解きの原点ともいえる存在です。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>2004年：『\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fy.honkakuha.success-games.net\u002Fgame\u002Fsu-56-crimsonroom\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>クリムゾン・ルーム\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>』公開\u003C\u002Fstrong>\u003Cul>\u003Cli>Flashゲームとして話題になり、脱出ゲームの原点のひとつとされています。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>2007年：リアル脱出ゲーム初開催(SCRAP)\u003C\u002Fstrong>\u003Cul>\u003Cli>体験型イベントとして一気に広がります。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>2012年：\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.newsweekjapan.jp\u002Fstories\u002Fbusiness\u002F2015\u002F06\u002Fpost-3675_3.php\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>海外展開\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>(サンフランシスコなど)\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>2017年：\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fcorp.eplus.jp\u002Fpress-release\u002Fdetail\u002F20171102.html\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>東京ミステリーサーカス オープン\u003C\u002Fstrong>\u003C\u002Fa>\u003Cul>\u003Cli>新宿歌舞伎町に脱出ゲームや謎解きが楽しめる常設施設が誕生。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>2019年：来場者100万人突破(東京ミステリーサーカス)\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>2019年：\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Friddler.co.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>RIDDLER株式会社\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>設立\u003C\u002Fstrong>\u003Cul>\u003Cli>謎解きを軸に、さまざまなメディアで体験を企画・制作するクリエイター集団。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>このように、謎解きは年々盛り上がりを見せており、現在では大きな\u003Cstrong>ブーム\u003C\u002Fstrong>となっています。\u003C\u002Fp>\u003Cp>たとえば、株式会社SCRAPが手がけるリアル脱出ゲームは累計参加者1,500万人を突破し、大規模な体験型イベントとして定着しました。\u003Cbr>また、「\u003Ca href=\"https:\u002F\u002Frealdgame.jp\u002Fs\u002Fchikanazo2025\u002F?link=enjoy\" target=\"_blank\" rel=\"noopener noreferrer\">地下謎への招待状\u003C\u002Fa>」のように、\u003Cstrong>鉄道や街全体を使った、日常の移動や街歩きそのものがゲームとなる企画も登場\u003C\u002Fstrong>し、多くの参加者を集めています。\u003C\u002Fp>\u003Cp>それだけでなく、\u003Cstrong>企業向けのチームビルディング研修\u003C\u002Fstrong>などにも取り入れられ、エンタメにとどまらない形でも活用されています。\u003C\u002Fp>\u003Ch2 id=\"h88ea32f50f\">実際に謎解きを作ってみた\u003C\u002Fh2>\u003Cp>謎解きにハマってからというもの、脱出ゲームや街歩き型の謎解き、キットを購入して遊ぶタイプのものなど、\u003Cstrong>いろいろと遊んできました\u003C\u002Fstrong>。そのうちに自分でも作ってみたくなり、実際に作ってみました。\u003Cbr>\u003Cbr>実は最近、トップページをリニューアルしたこともあり、せっかくならその内容も見てもらえるような形にできないかと思い、\u003Cstrong>Web サイトを見ながら進める謎解き\u003C\u002Fstrong>を作ってみることにしました。\u003C\u002Fp>\u003Ch3 id=\"h339271c395\">ストーリーとキーワードの設定\u003C\u002Fh3>\u003Cp>ストーリーについては、\u003Cstrong>「こういうことをやりたい」という方向性\u003C\u002Fstrong>を決めて、\u003Ca href=\"https:\u002F\u002Fgemini.google.com\u002Fapp?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer\">Gemini\u003C\u002Fa> に投げて考えてもらいました。\u003C\u002Fp>\u003Cp>あわせて、伝えたいキーワードも先に決め、それを最終的な答えとして設計しています。\u003Cbr>\u003Cstrong>どのように解くとその答えにたどり着くのか\u003C\u002Fstrong>という流れも、この段階で考えました。\u003C\u002Fp>\u003Cp>今回の謎解きページは、\u003Cstrong>Web サイトのログイン画面をイメージ\u003C\u002Fstrong>しています。\u003Cbr>各問題を解きながら情報を集め、最終的に導き出した答えをログイン用の\u003Cstrong>パスワード\u003C\u002Fstrong>として入力することでクリア！という構成にしています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1237f7caf6704f568fb90b1c3c65bcd3\u002Fs2-nazotoki.png\" alt=\"\" width=\"1944\" height=\"1201\">\u003C\u002Ffigure>\u003Ch3 id=\"ha572ddd150\">謎の設計\u003C\u002Fh3>\u003Cp>最終的な答えの文字数などから、\u003Cstrong>全体の STEP 数\u003C\u002Fstrong>を決めています。\u003C\u002Fp>\u003Cp>Webサイトを見てもらうことが目的だったため、\u003Cstrong>サイトを見ながら答えにたどり着くような問題\u003C\u002Fstrong>を中心にしたいと考えていました。ただ、実際に作ってみると難しく、途中でその方針を維持するのが難しくなり、\u003Cstrong>完全にはやりきれず…\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cp>ちなみにの話ですが、謎を作るうえで便利だったのが「\u003Ca href=\"https:\u002F\u002Fshiwehi.com\u002Ftools\u002Fwordsearch\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">謎解き単語検索β\u003C\u002Fa>」です。\u003Cbr>答えに「ネコ」を使いたいがそのまま見せたくない場合に、「?ねこ?」のように指定すると、前後に文字を加えた単語を辞書から探してくれます。\u003C\u002Fp>\u003Ch3 id=\"h922edff87b\">実装\u003C\u002Fh3>\u003Cp>\u003Cstrong>謎解きに使った画像は Google Slide で作成し、それをWebページに落とし込む作業は \u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fantigravity.google\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Antigravity\u003C\u002Fstrong>\u003C\u002Fa> で行いました。\u003C\u002Fp>\u003Cp>実装では、\u003Cstrong>ネタバレ防止\u003C\u002Fstrong>の工夫に特に気を使っています。\u003Cbr>ソースコードから答えが分かってしまわないように \u003Cstrong>Hash\u003C\u002Fstrong> を使うように指示したり、次のメッセージが先に見えてしまわないよう、\u003Cstrong>動的に JavaScript ファイルを読み込む仕組み\u003C\u002Fstrong>にしています。\u003C\u002Fp>\u003Cp>また、スクロールスピードや文字をタイプしているような演出についても細かく指示を出し、\u003Cstrong>体験として違和感が出ないように調整\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Ch3 id=\"h98ba4996ba\">デバッグ\u003C\u002Fh3>\u003Cp>まず、\u003Cstrong>脱出ゲームに慣れているスタッフにデバッグを依頼\u003C\u002Fstrong>しました。\u003Cbr>その中で、間違いや別解の発生、分かりづらい箇所などの指摘を受け、内容や画像を修正しています。\u003C\u002Fp>\u003Cp>その後、別のスタッフにも解いてもらい、さらに\u003Cstrong>ブラッシュアップ\u003C\u002Fstrong>を行いました。\u003Cbr>人によって詰まるポイントが異なる部分もあったため、\u003Cstrong>最終的には少し難易度を下げる方向で調整\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Ch3 id=\"h785b0e1177\">公開\u003C\u002Fh3>\u003Cp>\u003Cstrong>最終的にAnalyticsの設定やインフラの準備も行い、公開\u003C\u002Fstrong>しました。\u003C\u002Fp>\u003Ch2 id=\"h1331c56b22\">作ってみた感想\u003C\u002Fh2>\u003Cp>本来の仕事であるコーディングと近い部分もあり、普段とは違う形で頭を使うのが新鮮で楽しかったです。\u003C\u002Fp>\u003Cp>遊んでいる人の様子をリアルタイムで見られたら、どこで悩んでいるのか、どう進めているのかなども分かって面白かったのではないかと思います。\u003Cbr>今回はそこまで設計できていませんでしたが、\u003Cstrong>Analytics の取り方\u003C\u002Fstrong>を工夫すれば、どこで詰まっているのかといった\u003Cstrong>ユーザーの動きも可視化\u003C\u002Fstrong>できそうだと感じました。\u003C\u002Fp>\u003Cp>一方で、途中で力尽きてしまった部分もあり、当初考えていた\u003Cstrong>「Webサイトを見てもらいながら解いてもらう構成」を最後までやりきれなかった点は少し心残り\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>実際に作ってみて、これを仕事としてやっているプロの謎解きクリエイターのすごさを改めて実感しました。\u003Cbr>\u003Cbr>もしよければ、\u003Ca href=\"https:\u002F\u002Flab.s2factory.co.jp\u002Fnazo2026s\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>実際に遊んでみてもらえると\u003C\u002Fstrong>\u003C\u002Fa>幸いです。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Flab.s2factory.co.jp\u002Fnazo2026s\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Flab.s2factory.co.jp%2Fnazo2026s%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>","謎解きの基本から、Geminiを使ったストーリー設計やWebサイトを使った謎解きの制作プロセスまでを紹介。構成設計や実装、デバッグの工夫をまとめています。",[102,104,106,108,110,111],{"id":103},"vacation2024-missions",{"id":105},"office-humansensor",{"id":107},"toilet-sign",{"id":109},"game-development",{"id":71},{"id":68},{"id":113,"createdAt":114,"updatedAt":115,"publishedAt":116,"revisedAt":115,"title":117,"tag":118,"recommended_articles":131,"eyecatch":135,"heading_list":15,"summary":139,"content2":140,"description":141,"related_articles":142,"recruit":15,"is_html":15,"is_migration":15},"noel2025","2026-01-08T07:37:35.535Z","2026-09-01T05:36:26.704Z","2026-03-10T00:38:35.975Z","NOËL 2025 特設サイト 制作振り返り",[119,121,123,125,126,128,129],{"id":120},"frontend",{"id":122},"3-d",{"id":124},"animation",{"id":27},{"id":127},"look-back",{"id":34},{"id":130},"design",[132,133,134],{"id":39},{"id":56},{"id":54},{"url":136,"height":137,"width":138},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fe5ab4815df3942ccbfa7bd994c2233e3\u002F1.png",1800,2400,"\u003Cul>\u003Cli>\u003Cstrong>「深海（アビス）」をテーマにした、NOËL 2025 特設サイトのデザインと体験設計\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>WebGLやGPGPUを活用した、砂や泡などの表現とパフォーマンスへの工夫\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>デザイナーとエンジニアが連携し、実際の動きを確認しながら進めた制作の流れ\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>","\u003Cp>弊社は、これまで\u003Ca href=\"https:\u002F\u002Fwww.pierreherme.co.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>ピエール・エルメ\u003C\u002Fstrong>\u003C\u002Fa>の Web サイト制作に、デザインと実装の両面から継続的に携わってきました。\u003Cbr>年末に公開される「NOËL」のマカロンのサイトは、その中でも毎年スペシャルサイトとして制作しているページです。\u003C\u002Fp>\u003Cp>2025年も過去の延長ではなく、あらためて表現や体験の設計から考え直し、新たに制作しました。\u003Cbr>\u003Cstrong>深海をモチーフにした世界観\u003C\u002Fstrong>や、\u003Cstrong>サイト全体を通して展開される演出\u003C\u002Fstrong>など、細かな検討を重ねながら形にしています。\u003C\u002Fp>\u003Cp>本記事では、NOËL 2025 特設サイトの制作を振り返りつつ、\u003Cstrong>デザインと実装の両面から、表現や実装をどのように組み立てていったのか\u003C\u002Fstrong>を紹介したいと思います。\u003Cbr>\u003Cbr>実際のサイトはこちらです。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.pierreherme.co.jp\u002Ffeature\u002Fnoel-2025\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.pierreherme.co.jp%2Ffeature%2Fnoel-2025%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch2 id=\"h3bba4f50d6\">テーマと表現\u003C\u002Fh2>\u003Cp>今回制作した NOËL 2025 特設サイトは、年末に公開されるコンテンツとして、例年と同様に力を入れて制作したページです。\u003C\u002Fp>\u003Cp>テーマとして提示されていたのは、\u003Cstrong>「深海(アビス)」をモチーフにした世界観\u003C\u002Fstrong>。\u003Cbr>\u003Cstrong>冒頭は、海面からマカロンが海底に向かって落ちていくアニメーション\u003C\u002Fstrong>から始まります。そこから\u003Cstrong>スクロールに合わせて、背景のグラデーションや泡の演出が少しずつ変化\u003C\u002Fstrong>していきます。\u003Cbr>\u003Cbr>要素を場面ごとに切り替えるのではなく、\u003Cstrong>同じ要素の状態を変えていく\u003C\u002Fstrong>ことで、ページ全体が徐々に沈んでいく印象をつくりました。スクロール量がそのまま深さに対応する構成です。\u003Cbr>\u003Cbr>当初は逆方向の流れも想定していましたが、体験としての自然さを優先し、現在のものに落ち着きました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 75%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002F0CUs99XDKqI?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\u002Fiframe>\u003C\u002Fdiv>\u003Cp>\u003Cbr>商品情報のエリアでも、背景の泡や揺らぎはそのまま残しながら、商品画像の周囲に泡のフレームを重ねています。視線を商品に集めると同時に、海の中の要素としての泡もそこで見せ続けることで、流れを断ち切らず、世界観の中でフォーカスをつくっています。\u003Cbr>\u003Cbr>また、\u003Cstrong>パッケージにも使われているサンゴのイラストが持つきらめきや質感を、Web 上でも表現できないか\u003C\u002Fstrong>という要望があり、制作の中でも表現として工夫したポイントの一つです。\u003C\u002Fp>\u003Ch2 id=\"ha2fbbc5f62\">実装について\u003C\u002Fh2>\u003Cp>今回のサイトでは、砂や泡の表現を画面全体で動かしています。そのため、処理負荷を前提に実装を組み立てました。\u003C\u002Fp>\u003Cp>\u003Cstrong>砂は WebGL のシェーダーを使用し、パーティクルで構成\u003C\u002Fstrong>しています。数が数万個に及ぶため、CPU では負荷が高くなり重くなってしまうため、GPU で並列処理できるように \u003Cstrong>GPGPU という技術を採用\u003C\u002Fstrong>し実装しました。描画や動きの計算を GPU で処理することで、数万個のパーティクルが滑らかに動くように実装しています。\u003C\u002Fp>\u003Cp>通常のテキスト要素では、砂のアニメーションを表現できないため、\u003Cstrong>一部のテキストを 3D モデルとして作成し、WebGL で描画・配置\u003C\u002Fstrong>。ただし、そのままでは検索やテキスト選択ができなくなってしまうため、\u003Cstrong>SEO 的観点\u003C\u002Fstrong>からも \u003Cstrong>DOM 上には同内容のテキストも配置\u003C\u002Fstrong>し、表現と情報の両立を図りました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F34caffde445d451ca19cdef83760216e\u002F%E7%A0%82%E3%81%AE%E8%A1%A8%E7%8F%BE.png\" alt=\"砂の表現\" width=\"1887\" height=\"1044\">\u003Cfigcaption>テキストは 3D で作成。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>背景では、泡が画面下部から上部へと浮かび続けています。\u003Cbr>初めは画面全体に満遍なく漂っていますが、スクロールが進みサンゴのイラストの位置に達すると、左右へと散るようにしています。中央から泡が減ることで、自然にコンテンツへ視線が向かうようにしています。\u003C\u002Fp>\u003Cp>この泡も砂と同じく \u003Cstrong>WebGL のシェーダーで制御\u003C\u002Fstrong>し、\u003Cstrong>ノイズ関数を用いて形状を変化させ、水中らしい速度や揺れ幅になるよう調整\u003C\u002Fstrong>しました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 75%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FoSIIvT5jZ-0?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\u002Fiframe>\u003C\u002Fdiv>\u003Cp>\u003Cbr>一方で、\u003Cstrong>商品情報エリアで商品画像を囲む泡\u003C\u002Fstrong>は、別のアプローチを取っています。こちらは以前ブログで解説した \u003Cstrong>SVG の円アニメーションを応用\u003C\u002Fstrong>したものです。\u003Cbr>視線を集めるフレームとして機能させながら、水中の揺らぎとしても違和感が出ないよう、動きや歪みを調整しています。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fsvg-animation\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fsvg-animation%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fdbf4059fd28646b7887aff54eb237ec5\u002Fawa.png\" alt=\"限定のテキスト\" width=\"1754\" height=\"1037\">\u003Cfigcaption>右下の限定のテキストは海藻をイメージした動きに。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cstrong>サンゴのイラストに使われている箔押しの質感を、Web上でもどう再現するか\u003C\u002Fstrong>も今回のテーマでした。スクロール位置に応じて色味や干渉の見え方が変化するようにし、きらめきがわずかに揺らぐ印象をつくっています。\u003C\u002Fp>\u003Cp>この表現はサンゴのイラストだけでなく、一部のテキストにも展開しています。強いエフェクトではなく、あくまで質感として馴染ませることで、全体の世界観に統一感を持たせました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4685154937f147cc81fb4b135aa6b471\u002F%E3%82%B5%E3%83%B3%E3%82%B4.png\" alt=\"サンゴのイラスト\" width=\"2204\" height=\"1704\">\u003Cfigcaption>スクロール位置によって色味が変わる。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch3 id=\"h20a7e56e9b\">ブラウザ差への対応\u003C\u002Fh3>\u003Cp>ブラウザごとの差も、実装を進める中で意識していた点のひとつです。\u003Cbr>SVG で表現していた部分が Safari では重くなることが判明したため、その箇所は Canvas に置き換えて、サイトのパフォーマンスが落ちないように調整しました。\u003C\u002Fp>\u003Cp>Chrome で問題なく動いていても、Safari やスマートフォンで成立しない表現は採用していません。\u003Cbr>見た目や動きの印象を変えずに、\u003Cstrong>さまざまな環境で無理なく動作\u003C\u002Fstrong>するようにしています。\u003C\u002Fp>\u003Ch2 id=\"h70d3b5ba0f\">デザイナーとエンジニアの連携\u003C\u002Fh2>\u003Cp>今回の制作では、\u003Cstrong>早い段階で動きを確認できるモックを用意\u003C\u002Fstrong>しました。砂や泡、揺らぎといった表現は静止画では判断できないため、密度や速度、スクロール時の変化量を実際に動かしながら決めていく必要があったからです。\u003Cbr>\u003Cbr>制作チーム内でも、完成デザインを渡してから実装するという流れではなく、\u003Cstrong>動く状態を前提\u003C\u002Fstrong>に進めています。砂や泡の密度、揺らぎの強さ、スクロール時の変化量などは、実際に動かした状態で確認しながら決めていきました。静止画で固めてから実装するのではなく、挙動を見ながら細部を詰めていく進め方です。\u003C\u002Fp>\u003Cp>このモックは制作チーム内の検証だけでなく、ピエール・エルメの本社がフランスにあるため、本国側との共有にも使っています。完成形を言葉で説明するのではなく、実際の動きを見せながら認識を揃えていきました。\u003C\u002Fp>\u003Ch3 id=\"hbc6a78803c\">動きの強さのバランス\u003C\u002Fh3>\u003Cp>調整の中で、結果的に\u003Cstrong>採用しなかった表現\u003C\u002Fstrong>もあります。\u003Cbr>たとえば、商品周りの揺らぎや動きについては、当初はもっと強くかけることも可能でした。\u003Cbr>\u003Cbr>ただ、動きを強めすぎると視線が演出に引っ張られ、商品そのものが見えづらくなります。そのため、動きをなくすのではなく、意識しない程度に抑えています。\u003Cbr>結果として、表現を足していくというよりも、\u003Cstrong>「どこで止めるか」を決めていく作業が多かった\u003C\u002Fstrong>、という印象です。\u003C\u002Fp>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>弊社では、社内の\u003Cstrong>デザイナーとエンジニア\u003C\u002Fstrong>が普段から一緒にプロジェクトに関わり、\u003Cstrong>それぞれの視点や知見を共有\u003C\u002Fstrong>しながら制作を進めています。\u003Cbr>職種は違いますが、お互いの領域を理解しているからこそ、\u003Cstrong>表現と実装を分けずに扱う\u003C\u002Fstrong>ことが可能です。\u003Cbr>\u003Cbr>また、エンジニアもヒアリングの段階から直接やり取りに入り、技術的な可能性や制約を共有しながら、\u003Cstrong>「どうすれば実現できるか」\u003C\u002Fstrong>を具体化できることも S2 の特長です。\u003Cbr>というのも、日々新しい技術に触れ、表現の幅を広げている土台があるからです。今回の砂や泡の表現も、その積み重ねの一つ。\u003C\u002Fp>\u003Cp>NOËL 2025 の制作も、こうした関わりの中で形になりました。\u003Cbr>\u003Cstrong>対話を重ねながら、デザインと技術の両面から最適な形を探る。\u003C\u002Fstrong>それが私たちの進め方です。\u003Cbr>\u003Cbr>Web サイトの制作やリニューアルをご検討の際は、ぜひお気軽にご相談ください。\u003C\u002Fp>","ピエール・エルメ「NOËL 2025」特設サイトの制作事例。深海をテーマにした体験設計と、WebGLやGPGPUを用いたパーティクル表現など、デザインと実装の工夫を紹介します。",[],{"url":144,"height":61,"width":62},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F089ad5ed4cfa415983677dc8044d462a\u002Fcustom-reservation-system.png","\u003Cp>弊社ではこれまで、\u003Cstrong>施設の体験プログラムやイベントなど、さまざまな予約システムを開発\u003C\u002Fstrong>してきました。同じ予約システムでも、何を予約するのか、誰が管理するのかによって、求められる仕組みは変わります。\u003Cbr>\u003Cbr>今回は\u003Cstrong>特徴の異なる 3 つの事例から、個別の要望をどのように形にしたのか\u003C\u002Fstrong>を紹介します。\u003C\u002Fp>\u003Ch2 id=\"hdb941c213f\">体験型施設：現場の声からつくった管理画面\u003C\u002Fh2>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F0f46d438819249fe8af52687f5c34686\u002Fworkshop-admin.png.png\" alt=\"\" width=\"1672\" height=\"941\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>1 つ目は、\u003Cstrong>施設内で行われる体験型ワークショップの予約システム\u003C\u002Fstrong>です。利用者は会員登録後、Webサイトから希望する日時を予約できます。\u003C\u002Fp>\u003Cp>利用者向けの予約機能に加え、スタッフ側の管理機能も充実させました。学校などの団体から電話で受けた予約をその場で登録できるほか、団体利用に伴う駐車場や来館の予約も管理画面上で扱えます。\u003C\u002Fp>\u003Cp>リニューアルで特に重視したのが、\u003Cstrong>日々予約対応を行うスタッフの使いやすさ\u003C\u002Fstrong>です。管理画面のデザインと実装にあたり、\u003Cstrong>カスタマーサポートの担当者へヒアリングを実施\u003C\u002Fstrong>。従来のシステムで使いづらかった点だけでなく、変えずに残してほしい部分も確認し、実際の業務の流れに沿って画面や操作を調整しました。\u003C\u002Fp>\u003Cp>管理画面には、\u003Cstrong>予約した参加者を当日のテーブルへ割り当てる機能\u003C\u002Fstrong>も備えています。人数やグループ構成を見ながら、画面上で各テーブルへ配置できる仕組みです。年齢や参加者の組み合わせといった、\u003Cstrong>ワークショップ独自の予約条件にも対応\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Cp>現場へのヒアリングをもとに、独自の予約条件や当日の運用まで一つの管理画面に落とし込める点は、\u003Cstrong>フルスクラッチ開発の強み\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Ch2 id=\"h6ccc823773\">大規模イベント：アクセス集中を見越した設計\u003C\u002Fh2>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc8b5f984b7dc48429bce076a01fb1b9b\u002Fhigh-traffic-event.png.png\" alt=\"\" width=\"1672\" height=\"941\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>2 つ目は、\u003Cstrong>予約開始と同時に多くの申し込みが集まり、短時間で枠が埋まる大規模イベント\u003C\u002Fstrong>の事例です。最大の課題は、大量のアクセスを受け止めながら、\u003Cstrong>定員を超える予約を発生させないこと\u003C\u002Fstrong>でした。\u003C\u002Fp>\u003Cp>そのため、システムとインフラの両面から構成を検討。入口となるページは、アクセスのたびに処理が発生しない静的な構成にし、予約処理でロックする範囲も限定。\u003Cstrong>短時間に負荷が集中することを前提に設計\u003C\u002Fstrong>しています。\u003Cbr>\u003Cbr>予約には LINE ログインによる認証が必要です。認証を挟むことで利用者ごとの操作に時間差が生まれ、結果としてアクセスがある程度分散することも見込んでいます。一方で、\u003Cstrong>ログインを終えた時点ですでに満席となる状況を避けられる\u003C\u002Fstrong>よう、予約の流れも調整しました。\u003C\u002Fp>\u003Cp>受付開始前には、多くの利用者が同時に操作しても、用意した枠数を超えて予約が成立しないかを繰り返しテストしています。\u003C\u002Fp>\u003Cp>予約後は参加者ごとに QR コードを発行し、当日はスタッフがスマートフォンで読み取って入場を確認できます。多数の来場者を円滑に受け入れるため、\u003Cstrong>QR コードを使ったチケットのもぎり機能\u003C\u002Fstrong>まで独自に実装しました。\u003C\u002Fp>\u003Cp>アクセス集中への対策だけでなく、予約の受付から当日の入場まで、イベントの規模と運用に合わせて一から設計した事例です。\u003C\u002Fp>\u003Ch2 id=\"h2f3457306f\">有料イベント：Shopifyと連携した有料イベントの予約システム\u003C\u002Fh2>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fd65eac0757c244d0b5e25922e0a0bb97\u002Fecommerce-reservation-integration.png.png\" alt=\"\" width=\"1672\" height=\"941\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>3 つ目は、\u003Cstrong>EC サイトを運営するクライアント向けに開発した、有料イベントの予約システム\u003C\u002Fstrong>です。当初は一つのイベント向けに開発したものでしたが、\u003Cstrong>現在は複数のプログラムにも展開\u003C\u002Fstrong>されています。\u003C\u002Fp>\u003Cp>既存の EC サイトでは、 \u003Ca href=\"https:\u002F\u002Fwww.shopify.com\u002Fjp\" target=\"_blank\" rel=\"noopener noreferrer\">Shopify\u003C\u002Fa> が使われていました。そこで、イベント予約の機能を \u003Cstrong>Shopify のアプリとして開発\u003C\u002Fstrong>。既存の会員情報や決済機能をそのまま利用できるため、参加者は別のサービスでアカウントを作ったり、支払い情報を登録したりする必要がありません。\u003C\u002Fp>\u003Cp>運営側も、商品の販売とイベントの予約を同じ Shopify の管理画面から確認できます。参加経験などイベントごとに必要な情報を取得できるよう、\u003Cstrong>独自のアンケート機能\u003C\u002Fstrong>を追加。\u003Cstrong>以前利用していた外部サービスの予約データについても、過去の履歴を引き継げるよう移行をサポート\u003C\u002Fstrong>しました。\u003C\u002Fp>\u003Cp>実装にあたっては、\u003Cstrong>Shopify が備える多様な機能との整合性も考慮\u003C\u002Fstrong>しています。クーポンなどを利用した場合も予約を正しく処理できるよう、API の組み合わせを一つずつ検証。Shopify 側で扱う情報と、独自に保持する予約データを切り分けました。\u003C\u002Fp>\u003Cp>Shopify の既存機能を活かしながら、イベント運営に必要な予約機能を加えています。\u003C\u002Fp>\u003Ch2 id=\"h65a80d5aa6\">予約システムの開発・改善をご相談ください\u003C\u002Fh2>\u003Cp>予約システムを設計する際は、申し込みを受け付ける画面だけでなく、管理業務や当日の運用まで考える必要があります。\u003C\u002Fp>\u003Cp>弊社では、\u003Cstrong>利用者向けの予約画面、管理画面の UI、バックエンド、インフラ、外部サービスとの連携\u003C\u002Fstrong>まで、案件に応じて設計・開発しています。\u003Cbr>アクセスが集中するシステムには、\u003Cstrong>キャンペーン開発で培った負荷対策の知見\u003C\u002Fstrong>を活かして設計します。\u003C\u002Fp>\u003Cp>\u003Cstrong>システム全体の新規開発やリニューアルに限らず、一部機能の改修にも対応可能\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>\u003Cstrong>「既存の予約サービスでは運用に合わない」「管理業務の一部が手作業で残っている」「現在の EC サイトや会員基盤を活かしたい」\u003C\u002Fstrong>など、予約に関する課題があれば、\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fcontact\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>お問い合わせフォーム\u003C\u002Fstrong>\u003C\u002Fa>からご相談ください。\u003C\u002Fp>","S2 Factoryがフルカスタムで開発した予約システムを3つの事例から紹介。カップヌードルミュージアムの管理画面、大規模イベントのアクセス対策、山と道のShopify連携など、要件に合わせた設計・実装の工夫をまとめました。",[148,167,187,207],{"id":39,"createdAt":40,"updatedAt":41,"publishedAt":42,"revisedAt":41,"title":43,"tag":149,"recommended_articles":155,"eyecatch":159,"heading_list":15,"content2":63,"description":64,"related_articles":160,"recruit":15,"cta_url":76,"is_html":15,"is_migration":15},[150,151,152,153,154],{"id":46},{"id":48},{"id":22},{"id":34},{"id":27},[156,157,158],{"id":54},{"id":56},{"id":58},{"url":60,"height":61,"width":62},[161,162,163,164,165,166],{"id":56},{"id":68},{"id":58},{"id":71},{"id":73},{"id":75},{"id":56,"createdAt":168,"updatedAt":169,"publishedAt":170,"revisedAt":169,"title":171,"tag":172,"recommended_articles":176,"eyecatch":181,"heading_list":32,"content2":185,"related_articles":186,"recruit":15,"is_html":15,"is_migration":15},"2025-12-18T04:44:24.111Z","2026-09-01T05:32:07.516Z","2026-01-14T08:48:50.112Z","生成 AI を活用したコンテンツ生成キャンペーンサイトの制作事例",[173,174,175],{"id":27},{"id":46},{"id":34},[177,178,180],{"id":39},{"id":179},"birdwatch-camera",{"id":54},{"url":182,"height":183,"width":184},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F127f63b9fa8b47eb93d3f6d7c53fe605\u002Fwebsite.png",2000,4000,"\u003Cp>近年、広告・キャンペーン領域では、生成 AI を活用したユーザー参加型コンテンツが増えています。\u003Cbr>\u003Cstrong>ユーザーの入力をもとにコンテンツを生成し、その結果を画像として保存したり、SNS でシェアしたりできる仕組み\u003C\u002Fstrong>は、体験性と拡散性の両面を備えた手法です。\u003C\u002Fp>\u003Cp>具体的な案件名は出しませんが、今回は弊社で制作した\u003Cstrong>「生成 AI を利用したコンテンツ生成キャンペーンサイト」\u003C\u002Fstrong>について、どのような構成で、どんな実装を行ったのかを紹介したいと思います。\u003C\u002Fp>\u003Ch2 id=\"h9707d3a59a\">概要\u003C\u002Fh2>\u003Cp>今回紹介するのは、生成 AI を活用したコンテンツ生成型のキャンペーンサイトです。\u003Cbr>ユーザーが任意の文章を入力すると、その内容をもとに\u003Cstrong>架空の四字熟語を生成し、さらにその四字熟語を配置したデザイン画像を自動で生成\u003C\u002Fstrong>します。\u003C\u002Fp>\u003Cp>生成された画像は、サイト上でそのまま閲覧できるだけでなく、SNS へのシェアや、ユーザーの端末への保存にも対応しています。\u003Cbr>診断コンテンツのように気軽に参加でき、生成結果をそのままアウトプットとして扱える構成です。\u003C\u002Fp>\u003Col>\u003Cli>\u003Cstrong>ユーザーが文章を入力\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>文章をもとに架空の四字熟語を生成\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>生成された四字熟語を使って画像を生成\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>生成結果を表示・保存・シェア\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Fol>\u003Ch2 id=\"hb8b4f4df49\">生成 AI による四字熟語生成とチェック機構\u003C\u002Fh2>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fda95ca0e974c4a9ebd9a5692781467ac\u002Fcheck.png\" alt=\"\" width=\"1024\" height=\"595\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>ユーザーが入力した文章をもとに、\u003Cstrong>架空の四字熟語を生成する部分には、生成 AI の API を利用\u003C\u002Fstrong>しています。入力されたテキストの内容を踏まえ、意味的に成立する四字熟語が生成されます。\u003C\u002Fp>\u003Cp>ただし、キャンペーン用途として公開する以上、生成結果をそのまま無条件に表示するわけにはいきません。なので、生成結果に対していくつかの\u003Cstrong>チェック機構\u003C\u002Fstrong>を実装しています。\u003C\u002Fp>\u003Cp>具体的には、\u003Cstrong>プロンプトによる制御\u003C\u002Fstrong>に加え、あらかじめ用意した \u003Cstrong>NG 漢字リストを用いたチェック\u003C\u002Fstrong>を行っています。\u003Cbr>生成された四字熟語にネガティブな意味合いを持つ漢字や、不適切と判断される文字が含まれていた場合は、その結果を採用せず、\u003Cstrong>再度生成処理を行う\u003C\u002Fstrong>仕組みです。\u003C\u002Fp>\u003Cp>\u003Cstrong>プロンプトにすべてを依存せず、後段でチェックを行う構成とすることで、実運用を想定した安定した生成フローを実現\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Ch2 id=\"h05a3315797\">四字熟語を使った画像生成\u003C\u002Fh2>\u003Cp>生成された四字熟語は、そのままテキストとして表示するのではなく、\u003Cstrong>あらかじめ用意したデザインをもとに、画像として出力\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Cp>\u003Cstrong>画像生成にあたっては、いわゆる生成 AI による画像生成は使用していません。\u003C\u002Fstrong>\u003Cbr>文字の配置やサイズ、色、背景とのバランスなどは、事前に設計したデザインルールをもとに、\u003Cstrong>画像編集ライブラリを用いて動的に生成\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Cp>四字熟語は内容によって文字の印象やバランスが変わるため、単純に文字を載せるだけでは、見た目にばらつきが出てしまいます。\u003Cbr>そこで文字数や構成を考慮しながら、配置やスタイルを調整する処理を行い、\u003Cstrong>どの生成結果でも一定のビジュアルクオリティを保てるように\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Cp>\u003Cstrong>生成 AI は四字熟語を作る部分にのみ使用し、画像表現そのものは、これまでの Web 制作やビジュアル制作で培ってきた手法を用いて制御\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Ch2 id=\"h543fa3266b\">キャンペーン用途を想定したインフラ設計と安定稼働\u003C\u002Fh2>\u003Cp>本コンテンツでは、生成AIによる処理や画像生成を行うため、ユーザーの操作に対して即時に結果を返すことが難しい場面があります。\u003Cbr>さらに\u003Cstrong>キャンペーンサイトの場合、SNS での拡散などをきっかけに、短時間でアクセスが集中するケース\u003C\u002Fstrong>も想定されます。\u003C\u002Fp>\u003Cp>そのため、生成処理を含むバックエンドを \u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Fpm\u002Flambda\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>AWS Lambda\u003C\u002Fstrong>\u003C\u002Fa> 上に構築し、同時アクセスが発生しても処理が滞りにくい構成を採用しました。\u003Cbr>アクセス数の増減に応じて自動的にスケールすることで、キャンペーン期間中も安定した動作を維持できるようにしています。\u003C\u002Fp>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>今回は、「生成AIを利用したコンテンツ生成キャンペーンサイト」の一例を紹介しました。\u003Cbr>\u003Cbr>ユーザー参加型のコンテンツでは、\u003Cstrong>生成 AI の使いどころと制御、そして安定して運用できる構成が重要\u003C\u002Fstrong>になります。\u003Cbr>弊社では、こうした点を踏まえた制作をこれまで複数手がけてきました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>毎ドラ部 AI ソングメーカー\u003C\u002Fstrong>\u003Cbr>ユーザーが撮影した写真をアップロードすると、AI により歌詞が自動生成され、\u003Cbr>オリジナルのテーマソングとして楽しめるコンテンツです。\u003Cbr>同時に、写真からジャケットイラストも自動生成されます。\u003Cbr>（弊社は Web システム開発・インフラ構築を担当）\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fgeorgia-song-maker\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fwork%2Fdetail%2Fgeorgia-song-maker&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cstrong>毎ドラ部 AI イラストメーカー\u003C\u002Fstrong>\u003Cbr>ユーザーが撮影した写真を人気イラストレーター風のタッチに AI で変換し、生成されたイラストを日本全国のマップ上に投稿・共有できるキャンペーンサイトです。\u003Cbr>（弊社はテクニカルディレクション、Web 制作、システム開発、インフラ構築を担当）\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fgeorgia\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fwork%2Fdetail%2Fgeorgia&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cbr>\u003Cstrong>「生成AIを活用したコンテンツ制作」\u003C\u002Fstrong>についてご相談があれば、ぜひお気軽にお問い合わせください。\u003Cbr>これまでの知見をもとに、企画段階からの設計・制作・安定稼働までお手伝いします。\u003C\u002Fp>",[],{"id":58,"createdAt":188,"updatedAt":189,"publishedAt":190,"revisedAt":189,"title":191,"tag":192,"recommended_articles":199,"eyecatch":200,"heading_list":32,"content2":204,"description":205,"related_articles":206,"recruit":15,"is_html":15,"is_migration":15},"2025-12-01T09:52:57.341Z","2026-05-11T08:30:00.447Z","2025-12-03T08:40:57.702Z","モデルとデータを見直して、Bird Classification の精度を改善した話",[193,194,196,197],{"id":87},{"id":195},"internal-project",{"id":34},{"id":198},"deeplearning",[],{"url":201,"height":202,"width":203},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fbe7e9e0b19c24a2987a7dc6a4429996c\u002F%E3%83%A4%E3%83%9E%E3%82%AC%E3%83%A9.png",1356,2213,"\u003Cp>迷惑メールが多すぎます。\u003C\u002Fp>\u003Cp>この記事は、社内イベント「\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ftea\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C\u002Fu>\u003C\u002Fa>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社の arakawa が「\u003Cstrong>Bird Classification の精度改善」\u003C\u002Fstrong>について話しました。\u003C\u002Fp>\u003Chr>\u003Cp>\u003Cbr>\u003Cstrong>社内で制作した鳥類分類のデモアプリ\u003C\u002Fstrong>「\u003Ca href=\"https:\u002F\u002Flab.s2factory.co.jp\u002Fbird-classification\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Bird Classification\u003C\u002Fstrong>\u003C\u002Fa>」の精度を、日頃からちょこちょこ試しています。\u003C\u002Fp>\u003Cp>ある日、ネットで拾った\u003Ca href=\"https:\u002F\u002Fwww.google.com\u002Fsearch?q=%E3%83%A4%E3%83%9E%E3%82%AC%E3%83%A9&oq=%E3%83%A4%E3%83%9E%E3%82%AC%E3%83%A9&gs_lcrp=EgZjaHJvbWUyCQgAEEUYORiABDIGCAEQRRg7MgcIAhAAGIAEMgcIAxAAGIAEMgcIBBAAGIAEMgcIBRAAGIAEMgcIBhAAGIAEMgYIBxBFGDzSAQcyMTNqMGo0qAIAsAIB&sourceid=chrome&ie=UTF-8\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>ヤマガラ\u003C\u002Fstrong>\u003C\u002Fa>の写真を、試しに Bird Classification に読み込ませてみました。\u003Cbr>どう見てもヤマガラの写真だったので当然正しく判定されると思っていたのですが、返ってきた結果はまさかの\u003Ca href=\"https:\u002F\u002Fwww.google.com\u002Fsearch?q=%E3%82%B8%E3%83%A7%E3%82%A6%E3%83%93%E3%82%BF%E3%82%AD&oq=%E3%82%B8%E3%83%A7%E3%82%A6%E3%83%93%E3%82%BF%E3%82%AD&gs_lcrp=EgZjaHJvbWUyDggAEEUYORhDGIAEGIoFMgcIARAAGIAEMgoIAhAAGLEDGIAEMgwIAxAAGEMYgAQYigUyBwgEEAAYgAQyBwgFEAAYgAQyBwgGEAAYgAQyDAgHEAAYQxiABBiKBTIHCAgQABiABDIHCAkQABiABNIBBzMwM2owajmoAgCwAgA&sourceid=chrome&ie=UTF-8\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>ジョウビタキ♂\u003C\u002Fstrong>\u003C\u002Fa>。\u003C\u002Fp>\u003Cp>確かに、角度によってはジョウビタキ(特にオス)もお腹が橙色で、頭部に黒い柄があるので、一部分の特徴だけを捉えると似て見えることもあります。とはいえ、背中の色味や全体のシルエットまで含めて判断すれば、\u003Cstrong>両者は明らかに別の鳥\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>それを\u003Cstrong>判定できなかったことに、正直ショックを受けました\u003C\u002Fstrong>。\u003Cbr>そして、この事件をきっかけに「\u003Cstrong>どうにかして分類の精度をもっと上げたい\u003C\u002Fstrong>」と思うようになりました。\u003C\u002Fp>\u003Ch2 id=\"hebf6f58cc3\">Bird Classification とは\u003C\u002Fh2>\u003Cp>Bird Classification は、\u003Cstrong>ニューラルネット\u003C\u002Fstrong>を利用した技術検証プロジェクトとして、社内で開発した\u003Cstrong>野鳥画像の分類アプリ\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>私が個人的に撮影してきた写真の中から、\u003Cstrong>6,310 枚・77 種の画像を学習データ\u003C\u002Fstrong>としており、ブラウザ上で写真をアップロードすることで、鳥の種類を推定することができます。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Flab.s2factory.co.jp\u002Fbird-classification\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F57349a3a663e43c6bb5c242d2c7757f2\u002F2021-12-bird-classification.s2factory.co_.jp_.png?w=1200&h=772\" alt=\"Bird Classification\" width=\"1200\" height=\"772\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F5bed6d9e5c0f4c5490e5cda46ab56403\u002F2021-12-bird-classification.s2factory.co_.jp_-2.png?w=1200&h=715\" alt=\"Bird Classification\" width=\"1200\" height=\"715\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fdbbe98b347b149899d9f6b5643afdb0e\u002F2021-12-bird-classification.s2factory.co_.jp_-3.png?w=1200&h=715\" alt=\"Bird Classification\" width=\"1200\" height=\"715\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>Bird Classification について、詳しくはこちらの記事をご覧ください。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fneural-network-2\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fneural-network-2%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fbird-classification\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fbird-classification%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch2 id=\"he15b39bd7e\">ニューラルネットによる画像分類\u003C\u002Fh2>\u003Cp>ニューラルネットの精度を上げる方法を考える前に、まずはニューラルネットによる画像分類がどのように動いているのかを簡単におさらいしておきましょう。\u003C\u002Fp>\u003Cp>\u003Cstrong>ニューラルネット\u003C\u002Fstrong>は、\u003Cstrong>ニューロン\u003C\u002Fstrong>と呼ばれる\u003Cstrong>多入力一出力の非線形関数を、層状に束ねて結線したもの\u003C\u002Fstrong>です。\u003Cbr>ニューロンの内部には\u003Cstrong>重み\u003C\u002Fstrong>と呼ばれるパラメーターがあり、入力値に応じて計算を行い、出力を次のニューロンへ渡していきます。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F78b3fa88d8ae45f3acec469f15962b12\u002F%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%A9%E3%83%AB%E3%83%8D%E3%83%83%E3%83%88.png?w=650&h=304\" alt=\"ニューラルネット\" width=\"650\" height=\"304\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>ニューロンの結線方法は、やたらに繋げばいいわけではありません。\u003Cbr>\u003Cstrong>層の数や結線の仕方を工夫する必要\u003C\u002Fstrong>があり、こうした\u003Cstrong>構成全体(コンフィギュレーション)をモデル\u003C\u002Fstrong>と呼びます。\u003C\u002Fp>\u003Cp>画像分類の場合は、\u003Cstrong>画像のビットマップデータ(224×224ピクセル)\u003C\u002Fstrong>を入力し、ネットワークの各層を順に通るなかで特徴が取り出されていきます。\u003Cbr>最終的な出力層は、\u003Cstrong>分類対象ごとにニューロンを用意しておき、その中で最も大きい値となったものを判定結果として扱う仕組み\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>ニューラルネットが正しい判定をできるようにするには、\u003Cstrong>学習\u003C\u002Fstrong>が必要です。学習では、\u003Cstrong>データを与えたときの出力と正解との誤差\u003C\u002Fstrong>をもとに、\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%83%90%E3%83%83%E3%82%AF%E3%83%97%E3%83%AD%E3%83%91%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>バックプロパゲーション\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>というアルゴリズム\u003C\u002Fstrong>で各ニューロンのパラメーター(重み)を修正していきます。\u003Cbr>この更新を繰り返すことで、ネットワークが徐々に正しい出力に近づくようになるのです。\u003C\u002Fp>\u003Ch3 id=\"h37e1cf7a69\">学習のさせ方\u003C\u002Fh3>\u003Cp>ニューラルネットで画像分類を行うときは、まず\u003Cstrong>学習用データの一覧表\u003C\u002Fstrong>を作る必要があります。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F36b1f16f1fea4815858a93f19d65faec\u002F%E4%B8%80%E8%A6%A7%E8%A1%A8.png?w=450&h=455\" alt=\"学習データの一覧表\" width=\"450\" height=\"455\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>この一覧表づくりが意外と手間で、\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>ファイル名\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>正解の種類\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>画像を正方形に切り出すときの位置(中央・左など。今回補助的に入れたもの)\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>といった情報を、ひとつひとつ書いてまとめていきます。\u003Cbr>\u003Cbr>学習に使うデータはすべてを使うのではなく、\u003Cstrong>だいたい 2 割程度を評価用データとして残しておく\u003C\u002Fstrong>のが一般的です。\u003Cbr>ちなみに評価用データは、\u003Cstrong>学習には絶対に使ってはいけません\u003C\u002Fstrong>。これは「学習で見たことがない画像で正しく判断できるか」を確かめるためです。\u003C\u002Fp>\u003Cp>学習の流れはシンプルで、\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>学習用データを使ってニューラルネットのパラメーターを更新\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>1 エポック（学習の1巡）が終わるごとに、評価用データで正答率を計算する\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>これを繰り返します。\u003Cbr>\u003Cstrong>すべてのエポックの中で最も正答率が高かった時点の重みを、最終的な結果\u003C\u002Fstrong>とします。\u003C\u002Fp>\u003Ch3 id=\"h2f4fb49eaa\">実際の学習で見えてきた課題\u003C\u002Fh3>\u003Cp>実際に Bird Classification のデータで学習を回してみると、いくつか気になる点が出てきました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fb93d44943eac44c6b2da667bd38db66a\u002F%E7%94%BB%E5%83%8F%E4%B8%80%E8%A6%A7.png?w=1000&h=568\" alt=\"種類と画像の一覧\" width=\"1000\" height=\"568\">\u003Cfigcaption>種類と画像の一覧\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>まず、今回の誤判定の原因になった\u003Cstrong>ヤマガラの学習枚数が 15 枚\u003C\u002Fstrong>しかなかったことです。\u003Cbr>これではさすがに厳しい面もありますが、とはいえ何とかして判定できるようにしたいところ。\u003C\u002Fp>\u003Cp>さらに、全体の\u003Cstrong>6,310枚\u003C\u002Fstrong>という枚数も、画像分類のタスクとしては多いとは言えません。\u003Cbr>少ないデータをなんとか補うために、\u003Cstrong>別のデータセットで事前に学習された重みを使ってスタートするファインチューニング\u003C\u002Fstrong>の手法(少ない枚数でも成果が出やすい方法)をとりましたが、それでも限界がありました。\u003C\u002Fp>\u003Cp>25 エポック学習させた結果、\u003Cstrong>学習用データに対する正答率は順調に上がる\u003C\u002Fstrong>ものの、評価用データの正答率は点線のあたりで頭打ちになり、なかなか伸びていきませんでした。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ffd98da61a59d4681929002cd9a7c53ca\u002F%E5%AD%A6%E7%BF%92%E7%B5%90%E6%9E%9C.png?w=700&h=463\" alt=\"結果\" width=\"700\" height=\"463\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>これは学習が進むほど、\u003Cstrong>モデルが「写真そのものを覚えてしまっている」状態(過学習)\u003C\u002Fstrong>になってしまい、本来重要である「未知の画像」に対して良い結果が出せなくなっていたためです。\u003C\u002Fp>\u003Ch2 id=\"h15458c1c2e\">精度を上げるには\u003C\u002Fh2>\u003Cp>分類の精度を上げる方法は大きく分けて次の二つが考えられます。\u003C\u002Fp>\u003Col>\u003Cli>\u003Cstrong>学習させるデータを増やす\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>モデルそのものを高性能なものに置き換える\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>最も確実なのは 1 の「データを増やす」方法ですが、これは撮影・整理・一覧化を含めてとにかく手間がかかります。\u003Cbr>現実的にはかなりしんどく、すぐには対応できません。\u003C\u002Fp>\u003Cp>一方で 2 の「モデルを置き換える」方法は、計算機を動かして学習を回すだけで試せるため、比較的取り組みやすい手段です。\u003C\u002Fp>\u003Cp>今回はこの\u003Cstrong>モデルを高性能なものへ置き換える\u003C\u002Fstrong>アプローチを試してみることにしました。\u003C\u002Fp>\u003Ch3 id=\"he65e60ad85\">試したモデルとその結果\u003C\u002Fh3>\u003Cp>\u003Cstrong>従来の Bird Classification で使っていたモデル\u003C\u002Fstrong> はGoogle が公開している \u003Cstrong>EfficientNet\u003C\u002Fstrong> でした。\u003Cbr>事前学習済みデータとして \u003Cstrong>efficientnet-b7\u003C\u002Fstrong> を使用しており、そのサイズは \u003Cstrong>257,621,231 byte\u003C\u002Fstrong> とかなり大きなモデルです。\u003C\u002Fp>\u003Cp>今回はこの従来モデルの精度を超えることを目標に、\u003Ca href=\"https:\u002F\u002Ftimm.fast.ai\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>timm\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> に登録されているさまざまなモデルを試してみる\u003C\u002Fstrong>ことにしました。timm とは幅広い画像分類モデルがまとまっており、比較検証が非常にしやすいライブラリです。\u003C\u002Fp>\u003Cp>今回試したのは以下のモデルです。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>EfficientNet V2\u003C\u002Fstrong>\u003Cul>\u003Cli>efficientnetv2_rw_m.agc_in1k\u003C\u002Fli>\u003Cli>efficientnetv2_rw_s.ra2_in1k\u003C\u002Fli>\u003Cli>tf_efficientnetv2_l.in21k_ft_in1k\u003C\u002Fli>\u003Cli>tf_efficientnetv2_m.in21k_ft_in1k\u003C\u002Fli>\u003Cli>tf_efficientnetv2_xl.in21k_ft_in1k\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>CoAtNet\u003C\u002Fstrong>\u003Cul>\u003Cli>coatnet_0_rw_224.sw_in1k\u003C\u002Fli>\u003Cli>coatnet_rmlp_2_rw_224.sw_in12k_ft_in1k\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>MambaOut\u003C\u002Fstrong>\u003Cul>\u003Cli>mambaout_femto.in1k\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>ここ数年は、従来の「\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E7%95%B3%E3%81%BF%E8%BE%BC%E3%81%BF%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%A9%E3%83%AB%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF\" target=\"_blank\" rel=\"noopener noreferrer\">畳み込みニューラルネット(CNN)\u003C\u002Fa>」だけでなく、\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E5%A4%A7%E8%A6%8F%E6%A8%A1%E8%A8%80%E8%AA%9E%E3%83%A2%E3%83%87%E3%83%AB\" target=\"_blank\" rel=\"noopener noreferrer\">LLM\u003C\u002Fa> の流れから派生した\u003Cstrong>より大規模なニューラルネット\u003C\u002Fstrong>の性能が非常に高く、\u003Cstrong>その系統に属するのが\u003C\u002Fstrong> \u003Cstrong>CoAtNet\u003C\u002Fstrong> です。\u003Cbr>CoAtNet は\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E7%95%B3%E3%81%BF%E8%BE%BC%E3%81%BF\" target=\"_blank\" rel=\"noopener noreferrer\">畳み込み\u003C\u002Fa>と\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FVision_transformer\" target=\"_blank\" rel=\"noopener noreferrer\">ビジョントランスフォーマー\u003C\u002Fa>を組み合わせたハイブリッド構造になっており、今回も大きな期待を持って試しました。\u003C\u002Fp>\u003Cp>しかし、これらのモデルを使っても \u003Cstrong>未知のデータで精度が伸び悩み\u003C\u002Fstrong>、正答率が \u003Cstrong>95% を超えるところまで届かず\u003C\u002Fstrong>。\u003C\u002Fp>\u003Ch3 id=\"hd746411c2a\">もう一度 EfficientNet を試してみることに\u003C\u002Fh3>\u003Cp>そこで、一度原点に戻り\u003Cstrong>EfficientNet を再度試す\u003C\u002Fstrong>方針をとりました。\u003Cbr>ただし今回は、従来とは異なる事前学習データを使っています。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>事前学習データ\u003C\u002Fstrong>：efficientnet_el.ra_in1k\u003C\u002Fli>\u003Cli>\u003Cstrong>モデルサイズ\u003C\u002Fstrong>：従来の約 1\u002F7（37,203,003 byte）\u003C\u002Fli>\u003Cli>\u003Cstrong>入力サイズ\u003C\u002Fstrong>：256×256 pixel\u003C\u002Fli>\u003C\u002Ful>\u003Cp>この構成で学習させたところ、\u003Cstrong>正答率 96.13%\u003C\u002Fstrong> \u003Cstrong>という今までで最高の結果\u003C\u002Fstrong>を得ることができました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4f6d7114596841f79aaadbc2687c3a0b\u002F%E7%B5%90%E6%9E%9C.png?w=700&h=474\" alt=\"結果\" width=\"700\" height=\"474\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>そして問題の\u003Cstrong>ヤマガラ\u003C\u002Fstrong>を判定してみたところ、今度は\u003Cstrong>しっかり正しく分類できました。\u003C\u002Fstrong>\u003C\u002Fp>\u003Ch3 id=\"h85eea43db3\">もっと精度を上げたい\u003C\u002Fh3>\u003Cp>こうなると欲が出てきます。\u003Cstrong>もっと精度を上げたい\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cp>そこで、2021 年 6 月以降に撮り溜めていた \u003Cstrong>2,281 枚\u003C\u002Fstrong> の写真を使って、\u003Cstrong>“学習データを増やす”\u003C\u002Fstrong> \u003Cstrong>方向で再挑戦\u003C\u002Fstrong>することに。\u003Cbr>追加分すべてにラベル付けを行い、一覧表も作り直しています。\u003Cbr>\u003Cbr>その結果、\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>種類は従来より 11 種増加\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ヤマガラの枚数は 15 枚 → 29 枚に増加\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc3aefe7897184cd385739032cb67bf0c\u002F%E4%B8%80%E8%A6%A7%E8%A1%A8%E6%94%B9.png?w=1000&h=605\" alt=\"一覧表追加分\" width=\"1000\" height=\"605\">\u003Cfigcaption>緑色の行が今回追加した部分\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>データ量としては十分に増え、「これなら精度も上がるだろう」と期待したのですが、\u003Cstrong>学習させてみると、正答率は 93.03% に下がる結果に。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>なぜこんなことが起きたのかを考えたところ、「\u003Cstrong>種が増えたせいで、相対的に 1 種類あたりのデータ量が不足したのではないか？\u003C\u002Fstrong>」という可能性が見えてきました。\u003C\u002Fp>\u003Cp>そこで、\u003Cstrong>泣く泣く新しく増やした11種をいったん外し(画像枚数も8,431 枚に)\u003C\u002Fstrong>、従来と同じ種構成に戻して学習をやり直したところ、\u003Cstrong>正答率は 96.8% に到達し、これまでで最高の数字になりました。\u003C\u002Fstrong>\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F93bf4379794949a09afcd30a1f027497\u002F%E6%9C%80%E7%B5%82%E7%9A%84%E3%81%AA%E4%B8%80%E8%A6%A7%E8%A1%A8.png?w=1000&h=544\" alt=\"最終的な一覧表\" width=\"1000\" height=\"544\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F05ecf6aefffe4c25b593783379979e0c\u002F%E6%9C%80%E7%B5%82%E7%B5%90%E6%9E%9C.png?w=700&h=469\" alt=\"最終結果\" width=\"700\" height=\"469\">\u003C\u002Ffigure>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>今回のアップデートでは、モデルの差し替えやデータ量の調整など、いくつかの検証を重ねながら Bird Classification の精度改善に取り組みました。\u003C\u002Fp>\u003Cp>思ったように精度が伸びないケースもあれば、条件を変えた途端にうまくいく場面もあり、\u003Cstrong>単純に「最新モデルに変えれば精度が上がる」という話でもない\u003C\u002Fstrong>ことが確認できました。\u003C\u002Fp>\u003Cp>また、\u003Cstrong>データを増やしたからといって必ず性能が向上するわけではなく、種数や構成とのバランスが意外と影響する\u003C\u002Fstrong>、という点も今回の作業で改めて実感したところです。\u003C\u002Fp>\u003Cp>最終的には 96% 台まで精度が向上し、課題になっていた種も正しく分類できるようになりましたが、それ以上に、条件を変えながら確かめていく中で、結果が動くポイントがいくつか見えてきました。\u003C\u002Fp>\u003Cp>こうした検証は、Bird Classification に限らず、今後なにか画像分類を試すときにも役に立つはずです。\u003Cbr>条件を少しずつ変えながら試していくプロセス自体に、得られるものが多いことを再確認する機会になりました。\u003C\u002Fp>\u003Cp>引き続き、こうした検証の積み重ねを通して、よりよい仕組みやサービスづくりにつなげていきたいと思います。\u003C\u002Fp>\u003Ch2 id=\"hed1b589b7c\">今回の取り組みが活かせる場面\u003C\u002Fh2>\u003Cp>精度改善のプロセスやモデルは、Bird Classification 以外の場面にも応用できます。\u003C\u002Fp>\u003Cp>たとえば、 \u003Cstrong>弊社の野鳥特化モデル\u003C\u002Fstrong>を使って、\u003Cstrong>Web 上の野鳥図鑑に自動識別の機能を追加するといったことも可能\u003C\u002Fstrong>です。\u003Cbr>また、同程度の学習データが揃えられるのであれば、\u003Cstrong>対象を野鳥以外に置き換えて再学習させることも\u003C\u002Fstrong>できます。\u003C\u002Fp>\u003Cp>一方で、独自モデルをサーバーで運用する場合はインフラコストが発生するため、要件によっては\u003Cstrong>ネイティブアプリ化して\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fedge-ai\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>エッジ AI\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> で動かす構成\u003C\u002Fstrong>も選択肢に入ります。利用環境や目的に合わせて、最適な動かし方を設計できます。\u003C\u002Fp>\u003Cp>分類機能の導入やモデル活用をご検討の際は、今回得た知見も踏まえてご相談をお受けできますので、まずはお気軽に\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fcontact\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>お問い合わせ\u003C\u002Fstrong>\u003C\u002Fa>ください。\u003C\u002Fp>","野鳥分類アプリ「Bird Classification」の精度改善に向けて、モデル比較やデータ構成の見直しを実施。誤判定の原因分析から、EfficientNet を用いた再学習、学習データ追加による変化まで、実際の検証プロセスをまとめました。",[],{"id":54,"createdAt":208,"updatedAt":209,"publishedAt":210,"revisedAt":209,"title":211,"tag":212,"recommended_articles":215,"eyecatch":219,"heading_list":32,"content2":223,"related_articles":224,"recruit":15,"is_html":15,"is_migration":15},"2025-04-13T17:40:59.995Z","2026-09-01T05:28:42.103Z","2025-09-19T06:39:31.919Z","企業やサービスの“らしさ”を伝える、デザイン実績 4 選",[213,214],{"id":130},{"id":27},[216,217,218],{"id":39},{"id":56},{"id":54},{"url":220,"height":221,"width":222},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F806d7f3174a948a684ee38c45effa8b7\u002Feyecatch.png",1000,1680,"\u003Cp>\u003Cstrong>企業やサービスの「らしさ」を、伝わるかたちに。\u003C\u002Fstrong>\u003Cbr>私たちは、見た目だけでなく、使いやすさや体験の質までを含めて設計することで、その価値がきちんと届くデザインを目指しています。\u003C\u002Fp>\u003Cp>本ページでは、\u003Cstrong>ブランディング、企業サイト、BtoB、EC、キャンペーンページなど\u003C\u002Fstrong>、ジャンルも目的も異なる複数の事例を紹介しています。\u003Cbr>それぞれの案件にどのように向き合い、どう形にしていったのかを通して、S2ファクトリーのアプローチの一端をご覧いただければ幸いです。\u003C\u002Fp>\u003Ch2 id=\"hb685e3bedc\">実績\u003C\u002Fh2>\u003Ch3 id=\"h5dda7c7cea\">PIERRE HERMÉ PARIS 2024｜特集ページ制作\u003C\u002Fh3>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1960cec08b674c23b172b27b540f12c7\u002Fthumb.png\" alt=\"phpj2024\" width=\"2000\" height=\"1500\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Cstrong>PIERRE HERMÉ PARIS \u003C\u002Fstrong>の2024年〜2025年シーズン特集ページにて、\u003Cstrong>デザインとフロントエンド実装を担当\u003C\u002Fstrong>しました。母の日やホワイトデーなど、季節ごとに展開される限定ラインアップを、ブランドの世界観に合わせてビジュアルで表現しています。\u003C\u002Fp>\u003Cp>特集ページでは、キャンペーンのテーマやメインビジュアルにあわせて、\u003Cstrong>配色や余白、タイポグラフィのバランスまで細かく調整\u003C\u002Fstrong>。商品をただ並べるのではなく、\u003Cstrong>“ギフトを選ぶ体験そのものが心地よく感じられる”構成\u003C\u002Fstrong>を意識しました。\u003C\u002Fp>\u003Cp>ブランドが持つ華やかさと上質さを崩さず、見る人の期待感を高めるような UI・演出設計を行い、スマートフォンからの閲覧でも\u003Cstrong>美しく・迷わず・気持ちよく操作できるデザイン\u003C\u002Fstrong>を目指しています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F6456e65e51ce473a9fa2979ee36cd87b\u002Fphpj-md2024.png\" alt=\"phpj2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F2bfa2d0970de457692c7c1c93d04f148\u002Fphpj-sg2024.png\" alt=\"\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F7544c02db66a47f2871d5243a5a5b626\u002Fphpj-wg2025.png\" alt=\"phpj2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F5b5bd7e7053f46729cf6494be5a0baad\u002Fphpj-osechi2025.png\" alt=\"phpj2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F9fcb63a51968429abf38ba408ce7b890\u002Fphpj-sv2025.png\" alt=\"phpj2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F0dc55ffd0a734d6a810507be51e1beb7\u002Fphpj-wd2025.png\" alt=\"phpj2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Ch3 id=\"hd8f2ea7def\">PIERRE HERMÉ PARIS NOËL 2024 | 特集ページ制作\u003C\u002Fh3>\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.pierreherme.co.jp\u002Ffeature\u002Fnoel-2024\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">https:\u002F\u002Fwww.pierreherme.co.jp\u002Ffeature\u002Fnoel-2024\u002F\u003C\u002Fa>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-noel2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fdcccd7d4ddf344f4bf08803b84d431fd\u002F1.png\" alt=\"phpj-noel2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>ホリデーシーズン限定で公開された『NOËL 2024』特集ページの\u003Cstrong>デザインとフロントエンド開発を担当\u003C\u002Fstrong>しました。\u003C\u002Fp>\u003Cp>鉱石をモチーフにした幻想的な世界観に合わせ、\u003Cstrong>画面に奥行きをもたせるアニメーションや視差効果\u003C\u002Fstrong>を実装。ユーザーの操作に呼応する演出で、自然と画面の奥へ引き込まれる体験を目指しました。\u003Cbr>\u003Cbr>ブランドの魅力を保ちながら、落ち着いたトーンで季節感や特別感を伝える構成としています。\u003Cbr>また、PC・スマートフォンいずれの環境でも世界観が崩れないよう、\u003Cstrong>レスポンシブ設計やアニメーションのパフォーマンス最適化\u003C\u002Fstrong>を行いました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-noel2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F587a11839a214e35953ac1bd30bc5ef3\u002F2.png\" alt=\"phpj-noel2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-noel2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F9a81a389e2f846aba878a40a7a29b2bc\u002F3.png\" alt=\"phpj-noel2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Ch3 id=\"h135cfb2d1b\">三鷹光器株式会社｜コーポレートサイトリニューアル\u003C\u002Fh3>\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.mitakakohki.co.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">https:\u002F\u002Fwww.mitakakohki.co.jp\u002F\u003C\u002Fa>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.mitakakohki.co.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F487e7ac3ec444f5aa868d2aa1aca71d9\u002F1.png\" alt=\"三鷹光器\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>三鷹光器株式会社のWebサイトを\u003Cstrong>リニューアル\u003C\u002Fstrong>しました。\u003Cbr>\u003Cstrong>ディレクション、アートディレクション、デザイン、フロントエンド実装、CMS 構築を担当\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Cp>精密機器メーカーとしての信頼性や技術力を正しく伝えるため、\u003Cstrong>情報の構造整理からビジュアル表現まで、全体のトーンを丁寧に設計\u003C\u002Fstrong>。\u003Cbr>色数を抑えた落ち着いた配色や、視線誘導を意識した余白設計により、読みやすく品位のある印象に仕上げました。\u003C\u002Fp>\u003Cp>\u003Cstrong>スマートフォンやタブレットにも最適化されたレスポンシブ設計\u003C\u002Fstrong>で、あらゆる端末での閲覧体験を向上。\u003Cbr>また、CMS の導入により、製品情報の更新やコンテンツの拡充にも柔軟に対応できるサイト構成としています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.mitakakohki.co.jp\u002F\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fcb5cbeea243a48d2a844914766ceee11\u002F2.png\" alt=\"三鷹光器\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.mitakakohki.co.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc1a4ecbf7ed84faea821876418bde083\u002F5.png\" alt=\"三鷹光器\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Ch3 id=\"h9767f0dba2\">新建築データ｜ウェブサイトリニューアル\u003C\u002Fh3>\u003Cp>\u003Ca href=\"https:\u002F\u002Fdata.shinkenchiku.online\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">https:\u002F\u002Fdata.shinkenchiku.online\u002F\u003C\u002Fa>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fdata.shinkenchiku.online\u002F\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4093f71e20ef472986651a5ac076161d\u002F1.png\" alt=\"新建築データ\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>『新建築』『住宅特集』などに掲載された建築プロジェクトを、オンラインで検索・閲覧できるサービス「新建築データ」の Web サイトを\u003Cstrong>リニューアル\u003C\u002Fstrong>しました。\u003Cbr>弊社は、\u003Cstrong>構成設計、アートディレクション、デザイン、コンセプト設計\u003C\u002Fstrong>を担当しています。\u003C\u002Fp>\u003Cp>建築専門誌が持つ膨大で貴重なアーカイブを、誰でも迷わずアクセスできるように、\u003Cstrong>検索導線や画面構成を再設計\u003C\u002Fstrong>。専門性の高い情報を扱いつつも、\u003Cstrong>直感的に操作できるシンプルな UI \u003C\u002Fstrong>と、内容をしっかりと伝える情報設計を両立させました。\u003C\u002Fp>\u003Cp>また、写真や図面などのコンテンツが際立つよう、\u003Cstrong>余白・配色・タイポグラフィを丁寧に整え、世界観を保ちながら整理されたデザイン\u003C\u002Fstrong>に落とし込んでいます。\u003Cbr>\u003Cstrong>メディアとしての信頼感と、デジタルサービスとしての使いやすさを併せ持った事例\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fdata.shinkenchiku.online\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F65f0cb6bb0d346a68f9ca860ddd6b0df\u002F2.png?w=3500&h=2625\" alt=\"新建築データ\" width=\"3500\" height=\"2625\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fdata.shinkenchiku.online\u002F\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ffbd75973e67b4ddfb1cf1df6343abed4\u002F3.png?w=3500&h=2625\" alt=\"新建築データ\" width=\"3500\" height=\"2625\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fdata.shinkenchiku.online\u002F\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F54e105686386465b9e1d65935437ac96\u002F4.png\" alt=\"新建築データ\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Ch2 id=\"h13e0232e10\">お問い合わせ\u003C\u002Fh2>\u003Cp>\u003Cstrong>S2ファクトリーでは、プロジェクトの規模やジャンルを問わず、その企業やサービスの「らしさ」をかたちにするためのデザインをお手伝いしています。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>今回ご紹介したような \u003Cstrong>Web 制作をはじめ、ロゴや印刷物、展示会まわり、サービス設計など、多様な領域でのご相談に対応\u003C\u002Fstrong>しています。\u003Cbr>「こういうこと、お願いできるかな？」という段階からでも、お気軽にご相談ください。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fcontact&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>",[],"予約システムの開発・リニューアルをご検討の方へ","既存サービスでは運用に合わない、管理業務に手作業が残っている、ECサイトや会員基盤と連携したい。予約システムに関する課題をお聞かせください。新規開発から既存システムの見直しまで、要件に合わせて対応します。",{"contents":228,"totalCount":249,"offset":250,"limit":251},[229,239],{"id":230,"eyecatch":231,"publishedAt":235,"createdAt":236,"title":237,"is_html":15,"content2":238},"trains-and-snow",{"url":232,"height":233,"width":234},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fb80ef8e58fa347759367cf8efe39a876\u002Fsnow-2.jpg",768,1280,"2025-11-25T07:28:55.631Z","2025-06-10T01:21:40.894Z","雪で鉄道が止まる理由、止めないための工夫","\u003Cp>夜中にカップ焼きそばを食べたりしたいです。\u003C\u002Fp>\u003Cp>この記事は、社内イベント「\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ftea\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C\u002Fu>\u003C\u002Fa>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社の wataru が\u003Cstrong>鉄道と雪の関係\u003C\u002Fstrong>について話しました。\u003C\u002Fp>\u003Chr>\u003Cp>東京ではあまり雪が降るイメージがありませんが、日本全国には冬になるとまとまった降雪に見舞われる地域がたくさんあります。\u003Cbr>そして、\u003Cstrong>雪といえば交通機関の麻痺\u003C\u002Fstrong>。高速道路の通行止めや飛行機の欠航などが話題になりますが、\u003Cstrong>鉄道も例外ではありません\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cp>では、なぜ鉄道は雪に弱いのでしょうか？\u003C\u002Fp>\u003Cp>結論から言えば、\u003Cstrong>鉄道という仕組み自体が「雪と非常に相性が悪い」\u003C\u002Fstrong>構造になっているためです。\u003Cbr>雪が降ることで発生する主な問題には、以下のようなものがあります。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>ブレーキが効きづらくなる\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>線路が雪に埋まって走行できなくなる\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>列車が雪崩に巻き込まれる危険性\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ポイント（分岐器）が雪で動かなくなる\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>車体から落ちた雪が周囲に被害を及ぼす\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>車両の機械部分が凍結する\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>これらの問題について、次章からひとつずつ詳しく見ていきましょう。\u003C\u002Fp>\u003Ch2 id=\"h2980b59e67\">鉄道が雪に弱い理由\u003C\u002Fh2>\u003Ch3 id=\"h84d9ac2af3\">ブレーキが効きづらい\u003C\u002Fh3>\u003Cp>鉄道車両は、\u003Cstrong>鉄のレール上で車輪を転がす\u003C\u002Fstrong>ことで動いています。\u003Cbr>車輪は固い鉄製であるため、\u003Cstrong>レールと接触する面が小さく、摩擦も少ない\u003C\u002Fstrong>のが特徴です。\u003C\u002Fp>\u003Cp>摩擦が小さいことで、\u003Cstrong>少ない力で動かせる\u003C\u002Fstrong>上に、\u003Cstrong>転がる運動に対する抵抗も小さい\u003C\u002Fstrong>というメリットがあり、現在の鉄道は時速300キロを超えるような高速運転も可能となっています。\u003C\u002Fp>\u003Cp>一方で、\u003Cstrong>動き出そうとする力や、停めようとする力を生み出す摩擦が作りづらい\u003C\u002Fstrong>点は大きな弱点です。\u003Cbr>雪が車輪に噛みこむと摩擦力がさらに小さくなり、\u003Cstrong>車輪の空転や滑走が増えてしまいます。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>実際、\u003Cstrong>2014年の大雪の影響で、東急東横線・元住吉駅では電車が止まりきれず、\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.nikkei.com\u002Farticle\u002FDGXNASFK1500B_V10C14A2000000\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>衝突事故\u003C\u002Fstrong>\u003C\u002Fa>が発生しました。\u003C\u002Fp>\u003Ch3 id=\"hcd2871b7d5\">雪で線路が埋まり走れなくなる\u003C\u002Fh3>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F079e65afefe948e093594c07e06b1174\u002Fsnow-1.jpg?w=650&h=433\" alt=\"雪が積もる線路\" width=\"650\" height=\"433\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>特に\u003Cstrong>豪雪地帯\u003C\u002Fstrong>では、わずか 1 時間で地面が見えなくなるほどの雪が降ることもあります。\u003Cbr>数メートルもの積雪によって、線路や鉄道設備がすっかり埋もれ、列車は走れなくなります。\u003C\u002Fp>\u003Cp>こうなると、除雪が完了するまで列車は駅で立ち往生。\u003Cbr>乗客もその場で待機するか、ほかの交通手段を使って移動するしかありません。\u003C\u002Fp>\u003Cp>たとえば\u003Cstrong>昭和38年の豪雪では、北陸地方に記録的な雪が降り、除雪作業は10日間\u003C\u002Fstrong>にもおよびました。\u003Cbr>国鉄職員に加えて自衛隊や地元の人々も参加し、総出で雪を掻き出す日々が続いたといいます。\u003C\u002Fp>\u003Ch3 id=\"h18aad9133e\">列車が雪崩に巻き込まれる可能性\u003C\u002Fh3>\u003Cp>山間部の豪雪地帯では、\u003Cstrong>雪崩\u003C\u002Fstrong>が起きるおそれがあります。\u003Cbr>走行中の列車が巻き込まれると、大事故につながりかねません。\u003C\u002Fp>\u003Cp>実際に、過去にはそうした事例もありました。\u003Cstrong>米坂線や北陸線で発生した事故\u003C\u002Fstrong>が、その代表例です。\u003C\u002Fp>\u003Cp>このような背景から、山を越える路線では雪が降るたびに運休や速度規制が行われることが少なくありません。\u003C\u002Fp>\u003Ch3 id=\"h38d0fb94ff\">ポイントが凍結する\u003C\u002Fh3>\u003Cp>都市部でも雪が降ると、空転や滑走に加えてポイントの不具合が発生します。\u003Cbr>\u003Cstrong>ポイントとは、列車の進行方向を切り替えるための装置\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>降り積もった雪がポイントの隙間に詰まると、動かせなくなることがあります。\u003Cbr>また、操作用の機械が凍結し、切り替えができなくなるケースも見られます。\u003C\u002Fp>\u003Cp>このような状況になると、運行の継続は困難で、結果として、列車の遅延や運休が発生します。\u003C\u002Fp>\u003Ch3 id=\"hff597154b8\">車体から剥がれた雪の影響\u003C\u002Fh3>\u003Cp>かつて東海道新幹線では、関ヶ原周辺の雪によって思わぬ問題が発生していました。\u003Cbr>雪の多い区間を走行した後、\u003Cstrong>車体に付着していた雪の塊が落下し、線路のバラストを跳ね上げてしまう\u003C\u002Fstrong>のです。\u003C\u002Fp>\u003Cp>跳ねたバラストは、\u003Cstrong>車両の走行機器や車体、さらには窓ガラスにまで損傷\u003C\u002Fstrong>を与えることがありました。\u003Cbr>沿線の民家へ飛び散るといった被害も報告されています。\u003C\u002Fp>\u003Cp>現在では\u003Cstrong>スプリンクラーによって雪を溶かす設備\u003C\u002Fstrong>が導入されましたが、関ヶ原付近では冬の間、列車が徐行運転を強いられることもあります。\u003C\u002Fp>\u003Ch2 id=\"hb5a816f335\">雪とどう戦うか\u003C\u002Fh2>\u003Cp>雪への対策は、主に3つの方針に分けられます。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>雪を取り除く\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>雪に強い路線を作る\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>雪に強い車両を使う\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>どれも現場で積み重ねられてきた工夫ばかりです。\u003C\u002Fp>\u003Ch3 id=\"h1203e54448\">雪を取り除く\u003C\u002Fh3>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F59a5682dc9504c1db71e01878defd9a6\u002F%E9%99%A4%E9%9B%AA%E8%BB%8A%E4%B8%A1.jpg\" alt=\"除雪車\" width=\"640\" height=\"427\">\u003Cfigcaption>ラッセル式の除雪車\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>もっとも基本的な対策は、\u003Cstrong>雪を取り除くこと\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>\u003Cstrong>専用の除雪車\u003C\u002Fstrong>で線路の雪を脇へ押し出したり、場所によってはスコップや除雪機を使った手作業も行われます。スプリンクラーなどの設備がない区間では、\u003Cstrong>人力での対応\u003C\u002Fstrong>が欠かせません。\u003C\u002Fp>\u003Cp>除雪車にはいくつかの種類があり、\u003Cstrong>「ラッセル式」は車体前部の大きな翼で雪を左右に押しのける構造\u003C\u002Fstrong>です。一方で、\u003Cstrong>「ロータリー式」は回転する刃で雪を巻き込み、遠くに飛ばして排雪する仕組み\u003C\u002Fstrong>となっており、より深い積雪にも対応可能です。\u003C\u002Fp>\u003Cp>近年では、駅構内にポンプ式や小型ロータリー除雪機を導入するケースも増え、少人数でも効率よく作業が進められるようになっています。\u003C\u002Fp>\u003Ch3 id=\"h901c69c3ed\">雪に強い路線を作る\u003C\u002Fh3>\u003Cp>比較的新しい路線では、雪による影響を最小限に抑えるための設計が積極的に取り入れられています。\u003Cbr>単に除雪するだけでなく、\u003Cstrong>そもそも積もりにくくする・積もっても機能を維持できる構造にする\u003C\u002Fstrong>という考え方です。\u003C\u002Fp>\u003Cp>ここでは、そうした設備や工夫のいくつかを紹介します。\u003C\u002Fp>\u003Ch4 id=\"he19e9d9c34\">\u003Cstrong>スプリンクラー\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ff8bee39351dc442c916795c91016a50b\u002F%E3%82%B9%E3%83%97%E3%83%AA%E3%83%B3%E3%82%AF%E3%83%A9%E3%83%BC.jpg\" alt=\"スプリンクラー\" width=\"640\" height=\"480\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>スプリンクラーは、\u003Cstrong>常に水を撒いて雪を溶かし流すための設備\u003C\u002Fstrong>です。特にトンネル付近では、湧水の排水も兼ねて使われることが多く、新幹線では雪が舞い上がるのを防ぐ目的でも活用されています。\u003C\u002Fp>\u003Cp>水の散布量は非常に多く、大雨が降り続いたときと同程度の水が発生する場合もあり、\u003Cstrong>線路や高架橋には優れた排水性能が求められます\u003C\u002Fstrong>。排水機能が不十分だと、土壌の緩みによって地盤が不安定になるおそれもあるため、設置には地形や構造を踏まえた慎重な判断が必要です。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"h01deb011a9\">\u003Cstrong>消雪パネル・ジェット噴射によるポイント融雪\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>除雪車では対応が難しい場所では、\u003Cstrong>地面に設置された設備によって雪を溶かす方法\u003C\u002Fstrong>が採用されています。そのひとつが「\u003Cstrong>消雪パネル\u003C\u002Fstrong>」です。これは温水などを循環させることで、線路やポイント周辺の雪を直接溶かします。\u003Cbr>住宅街や高速道路を跨ぐ高架橋の上など、物理的に雪をどけられない場所で使われることが多く、雪処理の手間を大幅に軽減する仕組みといえるでしょう。\u003C\u002Fp>\u003Cp>また、分岐器(ポイント)の切り替えが重要な駅構内などでは、\u003Cstrong>温水をジェット噴射する装置\u003C\u002Fstrong>を使ってポイントの隙間に詰まった雪を吹き飛ばす方式もあります。これにより、雪による機構の凍結や動作不良を防ぐことができ、列車の運行を安定させるうえで大きな効果を発揮しています。\u003C\u002Fp>\u003Cp>他の手段として\u003Cstrong>カンテラ(ランプ)を使用する方法\u003C\u002Fstrong>もあります。線路の周囲に火を灯すことで、ポイントまわりの雪を直接溶かすというものです。電気式の装置が整備されていない場所などでは、降雪後に臨時で設置されることがあります。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"hcda5734065\">\u003Cstrong>雪に強い高架橋\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>豪雪地帯では、積雪による運行支障を防ぐため、\u003Cstrong>構造そのものにさまざまな対策\u003C\u002Fstrong>が施されています。以下は代表的な例です。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>貯雪型高架橋\u003C\u002Fstrong>\u003Cul>\u003Cli>比較的降雪量が少ない区間では、\u003Cstrong>線路脇の溝に雪を一時的にためておき、自然に融かすか、融雪パネルを利用して処理\u003C\u002Fstrong>する\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>流雪溝\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>事前に大量の水を流しておき、積もる前の雪を押し流す方式\u003C\u002Fstrong>。水資源が豊富な地域で導入されている\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>開床式高架橋\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>線路下が開放されている構造で、自然と雪が落ちる\u003C\u002Fstrong>仕組み。除雪の手間を軽減するうえで有効\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>構造段階から雪対策を組み込むことで、運行の安定性が大きく向上しています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"h3bd16a2f0c\">\u003Cstrong>長大トンネルによる雪対策\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F54461d5c957442d59e06277ef8a8cfbf\u002F%E3%83%88%E3%83%B3%E3%83%8D%E3%83%AB.jpg\" alt=\"トンネル\" width=\"640\" height=\"427\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>豪雪地帯を通る鉄道路線では、\u003Cstrong>線路自体を雪の届かない場所に逃がす「長大トンネル」\u003C\u002Fstrong>が有効な手段となっています。\u003C\u002Fp>\u003Cp>とくに山間部では、地表に線路を通すと雪崩や吹き溜まりのリスクが高くなります。そこで、線路自体を山の内部に通すことで、雪の影響を受けない空間に列車を通す構造が選ばれてきました。\u003C\u002Fp>\u003Cp>トンネル内は冬でも外気より温度が高く、風雪の影響を受けにくいため、除雪の必要もほとんどありません。結果として、運行の安定性を保ちやすくなります。\u003C\u002Fp>\u003Cp>たとえば、\u003Cstrong>上越新幹線の越後湯沢〜長岡間\u003C\u002Fstrong>では、\u003Cstrong>長大トンネルとスノーシェッド(雪覆い)を連続して配置\u003C\u002Fstrong>することで、「屋根のない区間」をほぼ無くしています。これにより、積雪そのものを構造的に回避し、冬でもスムーズな運行を実現しています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"hda90863551\">\u003Cstrong>雪を遮る構造物\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F3f204a6450894e319be9025091780205\u002F%E3%82%B7%E3%82%A7%E3%83%AB%E3%82%BF%E3%83%BC.jpg\" alt=\"シェルター\" width=\"640\" height=\"427\">\u003Cfigcaption>シェルターは駅やポイントへの積雪防止にも利用される\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch4 id=\"h662b64040f\">\u003Cbr>山間部や風が強い地域では、線路が雪に埋もれたり吹き溜まりになるのを防ぐために、周囲を囲ったり屋根をかけたりする設備が用いられています。\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>スノーシェッド(雪覆い)\u003C\u002Fstrong>\u003Cbr>　トンネルのように見える構造物で、線路の上に屋根をかけて雪の直撃を避けます。特に斜面の下や橋の部分など、雪崩や吹き溜まりが発生しやすい場所に設置されている\u003C\u002Fli>\u003Cli>\u003Cstrong>防雪柵\u003C\u002Fstrong>\u003Cbr>　雪が風で運ばれてくるのを防ぐため、線路の周囲に設置される柵です。雪が柵の向こう側で自然に落ちるよう設計されており、視界が悪化するのも防げる\u003C\u002Fli>\u003Cli>\u003Cstrong>防雪林\u003C\u002Fstrong>\u003Cbr>　人工的に植えられた樹木の列で、吹き付ける風と雪を弱める役割を担います。自然環境に調和しながら、雪の被害を和らげる方法\u003C\u002Fli>\u003C\u002Ful>\u003Cp>これらの設備によって、線路そのものに雪が届くのを防ぎ、除雪の必要性を抑えると同時に、事故や運休を未然に防ぐ仕組みが整えられています。\u003C\u002Fp>\u003Ch3 id=\"hea2b942aa5\">雪に強い車両を作る\u003C\u002Fh3>\u003Cp>鉄道の安定運行には、線路だけでなく車両側の備えも重要です。特に寒冷地では、積雪や凍結による支障を防ぐため、さまざまな対策が施されています。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>耐雪ブレーキ\u003C\u002Fstrong>\u003Cul>\u003Cli>降雪時には、スイッチで耐雪モードに切り替えることで、\u003Cstrong>車輪とブレーキシューの隙間をなくし、雪が噛みこむのを防ぐ\u003C\u002Fstrong>構造。これにより、制動力の低下やブレーキ不良を防ぎます。寒冷地向け車両だけでなく、首都圏のE233系やTX-3000系などにも採用されている\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>スノープラウ(排雪板)\u003C\u002Fstrong>\u003Cul>\u003Cli>先頭車両に装着され、\u003Cstrong>進行方向に積もった雪を線路脇へ押しのけながら走行\u003C\u002Fstrong>する。軽度の積雪であれば、これだけで運行を続けることが可能\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>ヒーターによる凍結防止\u003C\u002Fstrong>\u003Cul>\u003Cli>ドア周辺や台車の一部にはヒーターが設けられ、氷や雪の付着を抑えている。秋田などの地域では、ドア下に「高温注意」のステッカーが貼られている例も見られ、乗客への配慮もされている\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>雪は、美しい一方で鉄道にとっては厄介な存在です。視界を奪い、進行を妨げ、時には重大な事故を引き起こすこともあります。\u003C\u002Fp>\u003Cp>それでも私たちは、雪と共にある地域で、安全かつ安定した鉄道運行を目指してきました。スプリンクラーや除雪装置、雪に強い車両、そして長大トンネルの整備に至るまで、各地でさまざまな対策が実践されています。\u003C\u002Fp>\u003Cp>そして、万全の備えをしていてもなお、雪の影響を完全に排除することはできません。だからこそ、運休や遅延を前提にした仕組みを整えることも、現代の鉄道には求められています。\u003C\u002Fp>\u003Cp>列車がいつも通りに走る、その当たり前の裏側には、雪と向き合い続ける技術と知恵の積み重ねがあるのです。\u003C\u002Fp>",{"id":240,"eyecatch":241,"publishedAt":245,"createdAt":246,"title":247,"is_html":15,"content2":248},"isucon14",{"url":242,"height":243,"width":244},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc6fe0ec0b0394f8895ebdbce1c91f3f8\u002F%E3%82%B9%E3%82%B3%E3%82%A2%E6%8E%A8%E7%A7%BB.png",546,1029,"2024-12-12T05:36:00.873Z","2024-12-11T10:32:11.651Z","ISUCON14 に参加しました！","\u003Cp>初めまして、バックエンドエンジニアの maya です。\u003Cbr>この度、弊社スタッフでチームを組み、初めて \u003Ca href=\"https:\u002F\u002Fisucon.net\u002Farchives\u002F58593190.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>ISUCON14\u003C\u002Fstrong>\u003C\u002Fa> に参加しました！\u003Cbr>\u003Cbr>本記事では、ISUCON の概要や準備、当日の奮闘、そして参加してみて感じたことなどをまとめたいと思います。\u003C\u002Fp>\u003Ch2 id=\"h4156185283\">ISUCONとは？\u003C\u002Fh2>\u003Cp>\u003Cstrong>ISUCON\u003C\u002Fstrong>(\u003Ca href=\"https:\u002F\u002Fisucon.net\" target=\"_new\">Iikanjini Speed Up Contest\u003C\u002Fa>)は、\u003Cstrong>与えられたウェブサービスを題材に、そのパフォーマンスをどれだけ改善できるかを競うコンテスト\u003C\u002Fstrong>です。\u003Cbr>参加者は、システムの設計やアプリケーションコードの改善、データベースやサーバー構成の最適化などを駆使してスコアを伸ばします。\u003C\u002Fp>\u003Cp>2011年に始まったこのコンテストは、\u003Ca href=\"https:\u002F\u002Fwww.lycorp.co.jp\u002Fja\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">LINEヤフー株式会社\u003C\u002Fa>を中心とした企業や団体が主催しており、学生から社会人まで幅広い層が集まる人気イベントです。\u003Cbr>\u003Cbr>\u003Cstrong>課題は、実運用を想定したリアルなウェブサービスをモデル\u003C\u002Fstrong>にしており、スキルアップや新たな知見を得られる絶好の機会となっています。\u003Cbr>また、上位チームには豪華な賞品や特別な表彰が用意されており、参加者のモチベーションをさらに高めています。\u003C\u002Fp>\u003Ch2 id=\"hd2c91c24e4\">経緯\u003C\u002Fh2>\u003Cp>元々、私がISUCONに興味を持っており、社内で「興味がある人はいませんか？」と声をかけたところ、「面白そう」と反応してくれた takano、そして参加登録の報告にリアクションをくれた kuriyama がメンバーとして加わってくれることになりました。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>参加メンバー\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>maya\u003C\u002Fstrong>（私）\u002F 今年入社した S2 の新人バックエンドエンジニア\u003Cul>\u003Cli>\u003Cstrong>担当\u003C\u002Fstrong>: アプリケーションと DB 最適化\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>takano \u003C\u002Fstrong>\u002F\u003Cstrong> \u003C\u002Fstrong>テクニカルディレクター\u003Cul>\u003Cli>\u003Cstrong>担当\u003C\u002Fstrong>: アプリケーション開発と Redis 移行\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>kuriyama \u003C\u002Fstrong>\u002F インフラエンジニア\u003Cul>\u003Cli>\u003Cstrong>担当\u003C\u002Fstrong>: インフラ構築と環境整備\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"h31d727ccda\">準備\u003C\u002Fh2>\u003Cp>\u003Cstrong>初参加\u003C\u002Fstrong>ということもあり、具体的なイメージがつかない部分が多かったため、まずは他チームのブログを読み、当日にどのようなことを進めればよいか考えるところから始めました。\u003Cbr>また、公式サイトの \u003Ca href=\"https:\u002F\u002Fisucon-workshop.trap.show\u002F\" target=\"_new\">ISUCON 初心者向け講習会\u003C\u002Fa>を参考に、必要なツールや基本的な進め方を確認。\u003Cbr>\u003Cbr>\u003Cstrong>競技言語\u003C\u002Fstrong>については、事前の調査で「Go言語での参加者が圧倒的に多く、公開されている知見も豊富」という認識がありましたが、以下の理由から普段業務で使用している \u003Ca href=\"https:\u002F\u002Fnodejs.org\u002Fen\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Node.js\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> を採用\u003C\u002Fstrong>することにしました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>日々の開発で使い慣れているため、短時間で最大限のパフォーマンスを発揮できると判断\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>競技を通じて得た知見を日々の開発に活かすことで、業務に良いフィードバックを得るため\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>使用するフレームワークについても検討を行い、業務でよく使用している \u003Ca href=\"https:\u002F\u002Fexpressjs.com\u002Fja\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Express.js\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> \u003C\u002Fstrong>をベースに考えつつ、過去問で採用例のあった \u003Ca href=\"https:\u002F\u002Fhono.dev\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Hono\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> \u003C\u002Fstrong>にも触れ、選択肢を広げました。\u003Cbr>準備段階から各自でツールや技術のキャッチアップを進め、当日スムーズに動けるよう備えておきます。\u003C\u002Fp>\u003Ch3 id=\"hc705a9411d\">方針\u003C\u002Fh3>\u003Cp>大体 2 週間に一度のペースで定例を実施し、以下のような方針を共有しました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>1 台構成でのチューニングから始め、後で複数台構成に移行\u003C\u002Fstrong>する。\u003C\u002Fli>\u003Cli>\u003Cstrong>DB を PostgreSQL に切り替えるかどうかは当日の課題次第で判断\u003C\u002Fstrong>する。\u003C\u002Fli>\u003Cli>\u003Cstrong>担当分け\u003C\u002Fstrong>を以下のように決定。\u003Cul>\u003Cli>アプリケーションは maya と takano\u003C\u002Fli>\u003Cli>インフラは kuriyama\u003C\u002Fli>\u003Cli>運営からの連絡は maya が担当\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>スコアの目標として、\u003Cstrong>最初のベンチマークスコアの10倍\u003C\u002Fstrong>を設定。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"h1452651df4\">当日\u003C\u002Fh2>\u003Cp>\u003Cstrong>今回の課題は、「ISURIDE」という架空のアプリケーションのパフォーマンス改善\u003C\u002Fstrong>でした。\u003Cbr>ISURIDE は、アプリで椅子を呼び、その椅子に座って自動運転で目的地まで移動できるタクシーのようなサービスです。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FUFlcAUvWvrY?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;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Cp>\u003Cbr>当日は3人とも寝坊することなく、時間通りに集まりました(3 人とも普段から朝型勤務なので0回戦敗退の心配はしていませんでしたが)。\u003C\u002Fp>\u003Cp>\u003Cstrong>kuriyamaと私はオフィスから、takanoは自宅からリモートで参加\u003C\u002Fstrong>。\u003Cbr>オフィスでは、kuriyamaが「\u003Cstrong>ハック系イベントといえばドーナツ\u003C\u002Fstrong>」とおやつを買ってきてくれました！\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F077a973c60204902843f159b017eeb64\u002F%E3%83%89%E3%83%BC%E3%83%8A%E3%83%84.jpeg\" alt=\"ドーナツ\" width=\"650\" height=\"488\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>Zoomで集まり、公式配信を見ながら課題の確認をしたのですが、課題のクオリティの高さに驚きます。\u003C\u002Fp>\u003Cp>競技中の取り組みは、\u003Cstrong>午前中に環境構築\u003C\u002Fstrong>や\u003Cstrong>デプロイの自動化\u003C\u002Fstrong>、\u003Cstrong>ドキュメントの確認\u003C\u002Fstrong>を進めながら、すぐに対応できる箇所に着手することから始めました。\u003Cstrong>午後からは、サーバーを複数台構成に変更し、スコアアップを狙う流れに移行\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cp>以下は、時間帯ごとの主な作業内容です。\u003C\u002Fp>\u003Ch4 id=\"hab8b37e8e0\">午前\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>10:00 - 環境構築とドキュメント確認\u003C\u002Fstrong>\u003Cul>\u003Cli>kuriyama が早々に環境構築を開始。\u003C\u002Fli>\u003Cli>takano と私はアプリケーションのドキュメントを読み進め、肝になりそうな「マッチング機能」に注目しました。\u003C\u002Fli>\u003Cli>最初のベンチマーク(SCORE: 970 を回し、Node.js に切り替えて 553 からのスタート。やや苦戦の予感。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>11:00 - ツール導入と DB 最適化の開始\u003C\u002Fstrong>\u003Cul>\u003Cli>kuriyama は「\u003Ca href=\"https:\u002F\u002Fdocs.percona.com\u002Fpercona-toolkit\u002Fpt-query-digest.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">pt-query-digest\u003C\u002Fa>」や「\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ftkuchiki\u002Falp\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">alp(Access Log Profiler)\u003C\u002Fa>」などのツールを導入。\u003C\u002Fli>\u003Cli>takano が DB インデックスの追加を開始し、\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fredis\u002Fredis\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Redis\u003C\u002Fa> へのデータ移行に着手。\u003C\u002Fli>\u003Cli>私は esbuild を試すも依存関係の問題で断念。スコアは 763 に微増。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Ch4 id=\"hd21874b24c\">\u003Cbr>午後\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>12:00 - 本格的な最適化作業へ\u003C\u002Fstrong>\u003Cul>\u003Cli>takano は DB アクセスの最適化を進め、私は別の DB クエリをチェックしてインデックスを追加。\u003C\u002Fli>\u003Cli>kuriyama は CI の整備を進め、システム全体の効率化に貢献。\u003C\u002Fli>\u003Cli>スコアは 1721 まで向上し、喜びの声が上がる。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>13:00 - サーバー分離構成へ移行\u003C\u002Fstrong>\u003Cul>\u003Cli>takanoが椅子の現在地をDBに保存し、ユーザーを距離が近い順にマッチングするようプログラムを修正。スコアは 3212 に上昇。\u003C\u002Fli>\u003Cli>全てを 1 台に載せていた構成から、サーバーを 3 台に分離する作業を開始。\u003C\u002Fli>\u003Cli>kuriyama が構成変更を準備。ドーナツを食べて糖分補給をしつつ、午後の作業に取り組む。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>15:00 - さらなるスコアアップを目指して\u003C\u002Fstrong>\u003Cul>\u003Cli>Redis を別サーバーに移行し、スコアは 4883 に上昇。\u003C\u002Fli>\u003Cli>MySQL も別サーバーに移行し、ベンチマークスコアは 5385 点に到達。\u003C\u002Fli>\u003Cli>kuriyama のスロークエリ分析を基に、takano と私はプログラムの調整を進める。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Ch4 id=\"hf7e7ed7633\">\u003Cbr>最終調整と結果\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>16:00 - スコア停滞と修正試み\u003C\u002Fstrong>\u003Cul>\u003Cli>各々クエリの最適化や環境調整を進めるも、スコアは6675で停滞。\u003C\u002Fli>\u003Cli>一時的にリーダーボードで100位になり、記念スクショを撮る。\u003C\u002Fli>\u003Cli>16:30頃から大きな修正を試みるも、ベンチマークでwarningが多発。\u003C\u002Fli>\u003Cli>17:56 まで粘りましたが、結局安定した状態に戻し、最終スコアは5957で競技終了。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>午後の取り組みの中盤、途中でリーダーボード（全チームのスコア表）を確認したところ、\u003Cstrong>一時的に100位\u003C\u002Fstrong>になっているのを発見。嬉しくて記念にスクリーンショットを撮りました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1d260278fc1341599eae0a5fe8a0b35e\u002F%E8%A8%98%E5%BF%B5%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A7.png\" alt=\"途中のスコア\" width=\"628\" height=\"203\">\u003C\u002Ffigure>\u003Ch2 id=\"h8968b28212\">参加してみて\u003C\u002Fh2>\u003Cp>18:00 に競技が終了。\u003Cbr>配信を見ながら感想戦をしたところ、たくさんの改善点があがりました。一方で、参加してみて良かったことも同じぐらい出ました。\u003C\u002Fp>\u003Ch4 id=\"h315dfc3fb4\">改善点\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>修正の試行錯誤中に別の修正の反映待ちが発生していたため、反映させるサーバーを分けることで待ちを解消するべきだった。\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>デバッグ環境の整備が十分ではなく、手戻りが発生した部分があった。\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>スコアの計算方法をより意識し、優先すべき修正箇所を絞り込むべきだった。\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Ch4 id=\"hcef2f884ec\">良かった点\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>チームプレイを発揮できたこと\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>サーバーを分けるタイミングを適切に判断できたこと。\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>作業に迷うことなく、最後まで手を動かし続けられたこと。\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>言い出しっぺの私としては、\u003Cstrong>メンバーから「楽しかった」という感想が聞けたのが何より嬉しかった\u003C\u002Fstrong>です。\u003Cbr>普段の業務ではチャット中心のコミュニケーションが多いため、\u003Cstrong>リアルタイムで話し合いながら 8 時間ひとつの課題に集中する経験はとても貴重\u003C\u002Fstrong>でした。\u003C\u002Fp>\u003Cp>また、\u003Cstrong>当初の目標であった「初期スコアから 10 倍にする」を達成できた\u003C\u002Fstrong>ことにほっとしました。\u003Cbr>\u003Cstrong>最終スコアは 5957 点\u003C\u002Fstrong>で、\u003Cstrong>順位は\u003C\u002Fstrong> \u003Cstrong>831 チーム中 292 位\u003C\u002Fstrong>という結果でした。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc6fe0ec0b0394f8895ebdbce1c91f3f8\u002F%E3%82%B9%E3%82%B3%E3%82%A2%E6%8E%A8%E7%A7%BB.png\" alt=\"スコア推移のグラフ\" width=\"1029\" height=\"546\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>まだまだ上は目指せると思うので、もっとレベルアップして、また来年も出場したいと思います！\u003C\u002Fp>",5,0,2,{"contents":253,"totalCount":284,"offset":250,"limit":285},[254,264,274],{"id":255,"eyecatch":256,"publishedAt":260,"createdAt":261,"title":262,"is_html":15,"content2":263},"manhole-card",{"url":257,"height":258,"width":259},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F468c5e350f7c40f7b7a76fd33fa25a5b\u002Fmanhole.png",910,1728,"2026-09-01T06:24:08.870Z","2026-08-26T04:32:26.387Z","マンホールカードとは？見方や集め方、楽しみ方を紹介","\u003Cp>この記事は、社内イベント「\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ftea\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cu>お茶会\u003C\u002Fu>\u003C\u002Fa>」での発表内容をもとにまとめたものです。\u003Cbr>今回は、弊社の \u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Finterview-3\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">takano\u003C\u002Fa> が「マンホールカード」について発表しました。\u003C\u002Fp>\u003Chr>\u003Cp>\u003C\u002Fp>\u003Cp>本格的なコレクターというわけではありませんが、出かけた先で見つけた\u003Cstrong>マンホールカード\u003C\u002Fstrong>を少しずつ集めています。\u003Cbr>手元のマンホールカードを見ながら、\u003Cstrong>カードの見方や集め方、楽しみ方\u003C\u002Fstrong>を紹介したいと思います。\u003C\u002Fp>\u003Ch2 id=\"hc49a14f474\">ダムや橋を題材にしたインフラカード\u003C\u002Fh2>\u003Cp>全国各地では、ダムや橋、トンネルなどのインフラを題材にしたカードが発行されています。\u003Cbr>これらは総称して「インフラカード」と呼ばれますが、\u003Cstrong>ひとつの団体による統一シリーズではなく、発行元や配布方法はさまざま\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>\u003Cstrong>インフラカードの元祖といえるのが、ダムカード。\u003C\u002Fstrong> 国土交通省と独立行政法人水資源機構が管理するダムで2007年に配布が始まり、その後、題材はさまざまなインフラへ広がっていきました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>ダムカード\u003C\u002Fstrong>：各地のダムを写真やデータとともに紹介\u003C\u002Fli>\u003Cli>\u003Cstrong>橋カード\u003C\u002Fstrong>：橋の構造や特徴、周辺の情報などを掲載\u003C\u002Fli>\u003Cli>\u003Cstrong>トンネルカード\u003C\u002Fstrong>：トンネルの概要や工事の記録などを紹介\u003C\u002Fli>\u003Cli>\u003Cstrong>砂防カード\u003C\u002Fstrong>：砂防堰堤をはじめ、土砂災害から地域を守る施設を紹介\u003C\u002Fli>\u003C\u002Ful>\u003Cp>ダムカードには、\u003Cstrong>周年やイベントに合わせて発行される限定版\u003C\u002Fstrong>もあり、配布終了後には入手しにくい\u003Cstrong>「レアカード」\u003C\u002Fstrong>になることもあります。\u003Cbr>私も最初はダムカードを集めており、記念カードも手に入れました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F2585951c82da42c28ce21be31abbbd4d\u002Fdamcard.jpg?w=600&h=800\" alt=\"ダムカード\" width=\"600\" height=\"800\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>ただ、ダムカードは原則としてダムを訪れた人に、管理事務所や周辺施設で配布されるものです。公共交通では訪れにくい場所もあり、そのぶん手に入れたときの達成感はありますが、そもそもダムを訪れる機会が少なく、なかなか枚数は増えませんでした。\u003C\u002Fp>\u003Cp>そうしているうちに、イベントで\u003Cstrong>マンホールカード\u003C\u002Fstrong>の存在を知り、こちらも集めてみることにしました。\u003C\u002Fp>\u003Ch2 id=\"h7dd9eacda3\">マンホールカードとは\u003C\u002Fh2>\u003Cp>マンホールカードは、\u003Ca href=\"https:\u002F\u002Fwww.gk-p.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>下水道広報プラットホーム(GKP)\u003C\u002Fstrong>\u003C\u002Fa>が企画・監修し、マンホール蓋を管理する地方公共団体と共同で発行しているカードです。デザインマンホールを入口に、\u003Cstrong>下水道の役割や大切さへ関心を持ってもらうことを目的\u003C\u002Fstrong>としています。\u003C\u002Fp>\u003Cp>\u003Cstrong>2016 年 4 月に第 1 弾 30 種が登場し、2026 年 8 月時点で累計 1,311 種類が発行\u003C\u002Fstrong>されています。各自治体が指定する役所や観光案内所、下水道関連施設などで、\u003Cstrong>原則として一人一枚、無料\u003C\u002Fstrong>でもらえます。\u003C\u002Fp>\u003Cp>ダムカードと比べて街中で配布されているものが多く、\u003Cstrong>旅や街歩きのついでに集めやすいのも特徴\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Ch3 id=\"he6c39239dd\">マンホールカードの見方\u003C\u002Fh3>\u003Cp>マンホールカードは全国共通のフォーマットで作られており、\u003Cstrong>表面にはマンホール蓋と設置場所の情報、裏面にはデザインの背景や配布情報\u003C\u002Fstrong>がまとめられています。\u003Cbr>実際のカードを見ながら、記載されている内容を確認してみましょう。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fbc2f52f3f9f24ccebb04f3235face788\u002Fmaehashi.png\" alt=\"前橋市のマンホールカード\" width=\"1000\" height=\"698\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Cstrong>表面に記載されている情報\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>マンホール蓋の写真\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>発行した自治体名\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>緯度・経度\u003C\u002Fstrong>：写真のマンホール蓋が実際に設置されている場所\u003C\u002Fli>\u003Cli>\u003Cstrong>ピクトグラム\u003C\u002Fstrong>：自然や歴史、文化など、デザインの題材を表すマーク\u003C\u002Fli>\u003Cli>\u003Cstrong>デザイン管理ナンバーとコレクションナンバー\u003C\u002Fstrong>：自治体やデザインを識別し、カードを整理するための番号\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cbr>\u003Cstrong>裏面に記載されている情報\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>デザインの由来\u003C\u002Fstrong>：描かれている名所や歴史、文化、特産品などが紹介されている\u003C\u002Fli>\u003Cli>\u003Cstrong>設置開始年\u003C\u002Fstrong>：そのデザインのマンホール蓋が設置され始めた年\u003C\u002Fli>\u003Cli>\u003Cstrong>製造管理ナンバー\u003C\u002Fstrong>：カードの導入年月、修正回数、製造ロットを示す番号。末尾が「001」のものは初期ロット\u003C\u002Fli>\u003Cli>\u003Cstrong>配布場所とQRコード\u003C\u002Fstrong>：カードを受け取れる施設と、自治体の関連ページへアクセスできるQRコード\u003C\u002Fli>\u003C\u002Ful>\u003Cp>初期ロットを目当てに集める楽しみ方もあるそうですが、私は番号にはあまりこだわらず、デザインや訪れた場所との思い出を楽しんでいます。\u003C\u002Fp>\u003Ch2 id=\"h6d76565e2d\">手元のマンホールカードを見てみる\u003C\u002Fh2>\u003Cp>ここからは、私が集めたカードの中から、相模原市と小田原市、北広島市の 3 枚を見てみます。\u003C\u002Fp>\u003Cp>\u003Cbr>\u003Cstrong>相模原市｜はやぶさ2\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>小惑星探査機「\u003Ca href=\"https:\u002F\u002Fwww.hayabusa2.jaxa.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">はやぶさ2\u003C\u002Fa>」を題材にしたカードです。\u003Cstrong>マンホール蓋は淵野辺駅前\u003C\u002Fstrong>にあり、カードはJAXA相模原キャンパスの向かいにある\u003Ca href=\"https:\u002F\u002Fsagamiharacitymuseum.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">相模原市立博物館\u003C\u002Fa>で受け取りました。博物館を訪れた際、たまたま配布されていることを知って手に入れた一枚です。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4f2a4e90a4b042aaa4f2dab5d2fde7e5\u002Fsagamihara.png\" alt=\"相模原市のマンホールカード\" width=\"1000\" height=\"711\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Cstrong>小田原市｜小田原城\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>小田原城や城下町の風景が描かれています。実物の\u003Cstrong>マンホール蓋は小田原城址公園内\u003C\u002Fstrong>にあり、カードの配布場所は少し離れた\u003Ca href=\"https:\u002F\u002Fwww.city.odawara.kanagawa.jp\u002Ffield\u002Findustry\u002Furban\u002Fnariwai.html\" target=\"_blank\" rel=\"noopener noreferrer\">小田原宿なりわい交流館\u003C\u002Fa>でした。\u003Cbr>版画のような絵柄が蓋の凹凸で表現されており、イラストをはめ込んだタイプとは違う、マンホールらしいデザインが個人的に気に入っています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fe2454e65c6774014b96a8e5409a4e349\u002Fodawara.png\" alt=\"小田原市のマンホールカード\" width=\"1000\" height=\"705\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Cstrong>北広島市｜北海道ボールパークFビレッジ\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>北海道ボールパークFビレッジを題材にしたカードです。\u003Cbr>Fビレッジを訪れた際に、施設内の「HUB HOKKAIDO SELECT SHOP」で配布されていることを知り、受け取りました\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F995729ded86742c8a7ee8e743e248b20\u002Fkitahiroshima.png\" alt=\"北海道北広島市のマンホールカード\" width=\"1000\" height=\"704\">\u003C\u002Ffigure>\u003Ch2 id=\"hfaecbbb682\">マンホールカードの魅力と楽しみ方\u003C\u002Fh2>\u003Cp>デザインマンホールには、名所や特産品、歴史など、その土地を象徴するものが描かれています。アニメやキャラクターを題材にしたものもあり、まさに\u003Cstrong>ご当地感の極み\u003C\u002Fstrong>。\u003Cbr>円形の蓋に地域らしさを落とし込んだ構図や、鋳造の凹凸、彩色も見どころです。\u003C\u002Fp>\u003Cp>最近では、ポケモンが描かれたマンホール蓋「\u003Ca href=\"https:\u002F\u002Flocal.pokemon.jp\u002Fmanhole\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>ポケふた\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>」\u003C\u002Fstrong>が全国各地に設置されているほか、実在するマンホールを題材にした漫画『\u003Ca href=\"https:\u002F\u002Fwww.shogakukan.co.jp\u002Fbooks\u002F09143565\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>マンホール戦記アオイ\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>』\u003C\u002Fstrong>も刊行され、楽しみ方はカード以外にも広がっています。\u003C\u002Fp>\u003Cp>カードを集め始めると、出かけた先でも足元のデザインが気になるようになります。街歩きの途中でデザインマンホールを見つけると、少しうれしくなるものです。\u003Cbr>気に入ったデザインや訪れた場所のカードだけでも楽しめるので、出かけた先で配布案内を見かけたら、よかったら集めてみてください。\u003C\u002Fp>",{"id":265,"eyecatch":266,"publishedAt":270,"createdAt":271,"title":272,"is_html":15,"content2":273},"dx-library-puzzle-game",{"url":267,"height":268,"width":269},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F8fe79ab758cb41b6871dee5591cfdbf5\u002Fdx-library-puzzle-game.jpg",1688,3000,"2026-08-13T05:33:03.675Z","2026-08-11T05:15:55.477Z","C++とDXライブラリで落ちものパズルゲームを作っている話","\u003Cp>ハーゲンダッツのCMに出たいです。\u003C\u002Fp>\u003Cp>この記事は、社内イベント「\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ftea\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">お茶会\u003C\u002Fa>」での発表内容をもとにまとめたものです。\u003Cbr>今回は、弊社の wataru が、\u003Cstrong>DXライブラリを使って作っている落ちものパズルゲーム\u003C\u002Fstrong>について発表しました。\u003C\u002Fp>\u003Chr>\u003Cp>\u003Cbr>普段はバックエンドのシステム開発をしているのですが、最近は息抜きに、普段あまり触れることのない UI やゲームの実装を試しながら、高校時代に作った落ちものパズルゲームを少しずつ作り直しています。\u003Cbr>というわけで今回は、\u003Cstrong>現在の実装状況をはじめ、DX ライブラリを使った描画・入力処理や、今後試してみたいこと\u003C\u002Fstrong>について紹介したいと思います。\u003C\u002Fp>\u003Ch2 id=\"h0574876bfe\">落ちものパズルゲームを作り直す\u003C\u002Fh2>\u003Cp>高校生の頃、コンピュータ部の出し物として文化祭に展示しようと、\u003Ca href=\"https:\u002F\u002Fja.cppreference.com\u002Fc\" target=\"_blank\" rel=\"noopener noreferrer\">C 言語\u003C\u002Fa>と \u003Ca href=\"https:\u002F\u002Fdxlib.xsrv.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>DX ライブラリ\u003C\u002Fstrong>\u003C\u002Fa>を使って\u003Cstrong>落ちものパズルゲーム\u003C\u002Fstrong>を作り始めました。\u003Cbr>文化祭には間に合わなかったものの、その後も少しずつコードを修正。最終的には、一通り遊べる状態まで完成させました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002Fik9MOwHc4VE?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\u002Fiframe>\u003C\u002Fdiv>\u003Cp>\u003Cbr>その後は長らく触っていませんでしたが、最近、\u003Cstrong>ブロックの形状や回転状態を以前より整理して定義\u003C\u002Fstrong>できそうだと思い、久しぶりに作り直してみることにしました。\u003Cbr>現在は当時のコードを改修するのではなく、一から書き直しています。\u003C\u002Fp>\u003Ch2 id=\"hb404b0ecc8\">DX ライブラリを使ったゲームの実装\u003C\u002Fh2>\u003Ch3 id=\"hb913cd443e\">現在の実装状況\u003C\u002Fh3>\u003Cp>現在は基本的な操作や処理を実装し、\u003Cstrong>ひとまず遊べる状態\u003C\u002Fstrong>まで進んでいます。\u003C\u002Fp>\u003Cp>実装できているのは、主に次の機能です。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>ピースの移動\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ピースの回転\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>落下と固定\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>次に出てくるピースの表示\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>まだ作り直し始めたばかりなので、\u003Cstrong>操作中のピースが意図しない形に変わったり、正しく回転しなかったりするバグ\u003C\u002Fstrong>も残っています。\u003Cbr>今は、こうしたバグを直しながら基本動作を整えているところです。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FfelBQ7YJbVc?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\u002Fiframe>\u003C\u002Fdiv>\u003Ch3 id=\"ha78b91dcfe\">DX ライブラリとは\u003C\u002Fh3>\u003Cp>\u003Ca href=\"https:\u002F\u002Fdxlib.xsrv.jp\u002F\">\u003Cstrong>DX ライブラリ\u003C\u002Fstrong>\u003C\u002Fa>は、\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FMicrosoft_DirectX\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>DirectX\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> や Windows に関する複雑な処理を、比較的簡単な関数で扱えるようにした \u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FC%2B%2B\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>C++\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> 用のゲームライブラリ\u003C\u002Fstrong>です。C++ 用ではありますが、C 言語の知識を使って開発できます。\u003C\u002Fp>\u003Cp>Windows には、画像や 3DCG、音声などを扱うための DirectX という API 群があります。DirectX の開発キットをそのまま使う場合、さまざまな設定や複雑なコードが必要です。DX ライブラリを利用することで、こうした処理を簡略化し、ゲーム本体の実装に集中しやすくなります。\u003C\u002Fp>\u003Cp>DX ライブラリは 2001 年に公開され、現在も更新が続いています。Windows のほか、Android・iOS 向けのライブラリも配布されており、Nintendo Switch、PlayStation 4、PlayStation Vita にも対応しています。\u003C\u002Fp>\u003Cp>\u003Cspan style=\"color: #838383\">※ 家庭用ゲーム機向けの利用には、各プラットフォームとの契約や「\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fplaydoujin.mediascape.co.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cspan style=\"color: #838383\">Play,Doujin!\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"color: #838383\">」への参加など所定の手続きが必要です。詳しくは、\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdxlib.xsrv.jp\u002Fdxswitch.html?utm_source=chatgpt.com\" target=\"_new\">\u003Cspan style=\"color: #838383\">こちら\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"color: #838383\">をご覧ください。\u003C\u002Fspan>\u003C\u002Fp>\u003Cp>扱える機能も幅広く、主なものだけでも次のような機能があります。\u003C\u002Fp>\u003Ctable>\u003Ctbody>\u003Ctr>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>分類\u003C\u002Fp>\u003C\u002Fth>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>主な機能\u003C\u002Fp>\u003C\u002Fth>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>描画\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>線や図形、画像、文字、3D モデルなどの表示\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>画面\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>解像度やウィンドウモード、描画先の設定\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>入力\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Ccode>GetJoypadInputState\u003C\u002Fcode>を使った、キーボードやゲームパッドの入力状態の取得\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>音声・動画\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>効果音や BGM、動画の再生\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>公式サイトには、各関数の使い方を確認できる\u003Ca href=\"https:\u002F\u002Fdxlib.xsrv.jp\u002Fdxfunc.html\" target=\"_blank\" rel=\"noopener noreferrer\">関数リファレンス\u003C\u002Fa>や\u003Ca href=\"https:\u002F\u002Fdxlib.xsrv.jp\u002Fdxprogram.html\" target=\"_blank\" rel=\"noopener noreferrer\">サンプルプログラム\u003C\u002Fa>も用意されています。\u003C\u002Fp>\u003Ch3 id=\"h41dffbbfc1\">今回のゲームでの実装\u003C\u002Fh3>\u003Cp>DX ライブラリには多くの機能がありますが、今回のゲームで主に使っているのは、\u003Cstrong>画面表示と入力\u003C\u002Fstrong>に関する機能です。\u003C\u002Fp>\u003Cp>主な処理は次のとおり。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>画面の設定：\u003C\u002Fstrong> \u003Ccode>SetGraphMode\u003C\u002Fcode>で解像度や色数を指定。あわせて、ウィンドウモードで起動するよう設定\u003C\u002Fli>\u003Cli>\u003Cstrong>入力の取得：\u003C\u002Fstrong> キーボードやゲームパッドの入力を受け取り、ピースの操作に利用\u003C\u002Fli>\u003Cli>\u003Cstrong>画像の読み込み：\u003C\u002Fstrong> \u003Ccode>LoadDivGraph\u003C\u002Fcode>で1枚の画像を複数に分割して読み込む\u003C\u002Fli>\u003Cli>\u003Cstrong>画面の更新：\u003C\u002Fstrong> 裏画面に描画した内容を\u003Ccode>ScreenFlip\u003C\u002Fcode>で表画面に反映\u003C\u002Fli>\u003C\u002Ful>\u003Ch4 id=\"h01e5d42029\">\u003Cbr>\u003Cstrong>ブロック画像の読み込みと描画\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>ブロックの描画には、\u003Ccode>LoadDivGraph\u003C\u002Fcode>を使用しています。これは、複数のブロックをまとめた1枚の画像を、指定したサイズと数に分割して読み込むための関数です。\u003C\u002Fp>\u003Cp>分割した画像は、それぞれ\u003Cstrong>グラフィックハンドルと呼ばれる識別子で管理\u003C\u002Fstrong>されます。描画時には現在のピースに対応する画像を指定し、形状データに沿って繰り返し表示することで、画面上にピースを描いています。画像を表示する処理は、各クラスから呼び出す構成です。\u003C\u002Fp>\u003Ch4 id=\"h284fed8d12\">\u003Cbr>\u003Cstrong>裏画面を使ってちらつきを防ぐ\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>画面の描画には、\u003Cstrong>ダブルバッファリング\u003C\u002Fstrong>という方法を使っています。\u003C\u002Fp>\u003Cp>まず、\u003Ccode>SetDrawScreen\u003C\u002Fcode>で描画先を裏画面に設定します。必要な描画が終わったところで\u003Ccode>ScreenFlip\u003C\u002Fcode>を実行し、\u003Cstrong>裏画面の内容を表画面へまとめて反映\u003C\u002Fstrong>します。\u003Cbr>この方法によって描画途中の状態が表示されることを防ぎ、画面のちらつきを抑えています。\u003C\u002Fp>\u003Ch3 id=\"h090ff28f5a\">作りながら見直していること\u003C\u002Fh3>\u003Cp>今回は、ピースやフィールドをクラスに分け、\u003Cstrong>データと処理の役割\u003C\u002Fstrong>を意識しながらコードを書いています。\u003Cbr>移動や回転までは比較的スムーズに進みましたが、落下や固定の処理を加えると、次のような部分が複雑になってきました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>状態判定に使うフラグ\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>クラス間で受け渡す配列データ\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ピースのデータを書き換えるタイミング\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>前述のバグも、配列に格納したピースのデータが、どこかで書き換わっていることが原因のようです。\u003Cbr>現在はバグの原因を追いながら、クラスの役割やデータの受け渡し方を少しずつ整理しています。今後の機能も追加しやすい形にしていくつもりです。\u003C\u002Fp>\u003Ch2 id=\"h88738c86b4\">これから追加してみたい機能\u003C\u002Fh2>\u003Cp>まずは、消したライン数に応じてレベルが上がり、落下速度も速くなっていく基本モードを完成させる予定です。\u003Cbr>\u003Cstrong>SE や BGM も追加\u003C\u002Fstrong>したいと考えています。\u003C\u002Fp>\u003Cp>その後は、\u003Cstrong>遊び方の異なる複数のモード\u003C\u002Fstrong>を実装したいと考えています。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>タイムアタック：\u003C\u002Fstrong> 一定のレベルへ到達するまでの時間を計測する\u003C\u002Fli>\u003Cli>\u003Cstrong>対戦：\u003C\u002Fstrong> 1 台の PC で 2 人が同時に遊び、消したラインを相手へ送り合う\u003C\u002Fli>\u003Cli>\u003Cstrong>レース：\u003C\u002Fstrong> 一定のレベルへ先に到達したプレイヤーが勝利する。LAP などのレース要素も検討中\u003C\u002Fli>\u003C\u002Ful>\u003Cp>いずれは\u003Cstrong>ネットワーク対戦\u003C\u002Fstrong>にも挑戦してみたいと思っています。リアルタイムで進行するゲームでは\u003Cstrong>通信の遅延が発生するため、それを目立たせない方法\u003C\u002Fstrong>も考えてみたいところです。\u003C\u002Fp>\u003Cp>さらに余裕があれば、\u003Cstrong>ブラウザや Linux でも動かせるように\u003C\u002Fstrong>してみたいです。別の環境へ展開するには、ゲームの進行を管理するロジックと、画面の描画や入力を処理する部分を分けておかなければなりません。\u003C\u002Fp>\u003Cp>まずは Windows 版を作りながら、ピースのデータ構造や状態の持たせ方を整理し、ほかの環境にも移しやすい形にしていく予定です。\u003C\u002Fp>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>今回は、空いた時間に少しずつ作っている落ちものパズルゲームの現在の様子を紹介しました。\u003C\u002Fp>\u003Cp>DX ライブラリを使って、描画や入力、ダブルバッファリングなどを自分で実装していくなかで、\u003Cstrong>ゲームが動くまでの流れ\u003C\u002Fstrong>もあらためて確認できました。\u003C\u002Fp>\u003Cp>まだ制作途中ですが、これからも息抜きとして少しずつ手を加え、まずは皆さんに遊んでもらえる状態まで仕上げたいと思っています。このゲームがひと段落したら、次はシューティングゲームにも挑戦してみたいです。\u003C\u002Fp>",{"id":275,"eyecatch":276,"publishedAt":280,"createdAt":281,"title":282,"is_html":15,"content2":283},"office-bookshelf",{"url":277,"height":278,"width":279},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc265bf88145b4209b9b9b3e05d5ce1f9\u002Fbookshelf-1.jpg",3024,4032,"2026-07-31T04:43:21.182Z","2025-04-30T16:13:56.191Z","スタッフのおすすめでつくる、オフィスの漫画本棚","\u003Cp>オフィスの 2 階にあるリラックスルームには、\u003Cstrong>スタッフが推薦した漫画を集めた本棚\u003C\u002Fstrong>があります。\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Frelax-room\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">以前の記事\u003C\u002Fa>でも紹介したとおり、この部屋は昼寝やミーティング、ピラティス、ゲーム、推し活、上映会など、さまざまな用途で使われている空間です。その一角に、技術書や業務に関する書籍とは別に、漫画を自由に読める棚を設けています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Faed6b5618b2b4fd59dc16c4ee9a3babe\u002Fbookshelf-2.jpg\" alt=\"休憩室\" width=\"4032\" height=\"3024\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>スタッフのおすすめを持ち寄ることで、\u003Cstrong>普段は自分で選ばない作品を知ったり、漫画をきっかけに会話が生まれたりする場所\u003C\u002Fstrong>を目指しています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Frelax-room\u002F\" data-iframely-url=\"https:\u002F\u002Fiframely.net\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Frelax-room%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fiframely.net\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch2 id=\"h76e75bd31d\">漫画を選んだ理由\u003C\u002Fh2>\u003Cp>弊社では、メディアやコンテンツに関わるプロジェクトも多く、\u003Cstrong>日頃から幅広い物語や表現に触れることが、制作物への理解や提案の幅を広げる\u003C\u002Fstrong>ことにもつながると考えています。\u003C\u002Fp>\u003Cp>その中でも漫画は、誰でも気軽に手に取りやすい媒体です。休憩時間に少しだけ読んだり、気になった作品を自分のペースで読み進めたりできます。\u003C\u002Fp>\u003Cp>こうした仕事との接点と親しみやすさから、まずは漫画を中心にそろえていくことになりました。\u003C\u002Fp>\u003Ch2 id=\"h163b8534fc\">作品の選び方\u003C\u002Fh2>\u003Cp>本棚に追加する作品は、\u003Cstrong>スタッフからの推薦と投票\u003C\u002Fstrong>で決めています。\u003Cbr>候補はスプレッドシートで管理しており、推薦するスタッフが次の情報を記入します。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>タイトル\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>作者\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>現在の巻数\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>完結しているかどうか\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>推薦コメント\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>推薦コメントには、あらすじだけでなく、どこがおもしろかったのか、なぜほかのスタッフにも読んでほしいのかといった、おすすめの理由が添えられます。\u003C\u002Fp>\u003Cp>投票は現在、不定期に実施しています。事前に Slack で開催を知らせ、候補の中から読みたい漫画にリアクションで投票。\u003Cstrong>得票数の多い作品から順に、票数に応じて購入\u003C\u002Fstrong>する巻数を決め、予算の範囲内で購入されるシステムです。\u003C\u002Fp>\u003Cp>締切が近づくと、漫画用の Slack チャンネルで\u003Cstrong>推薦者による選挙活動\u003C\u002Fstrong>が始まることもあります。推している作品の魅力を紹介したり、ほかのスタッフから質問が寄せられたりと、\u003Cstrong>投票前からちょっとした盛り上がり\u003C\u002Fstrong>を見せることも。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F246d8519f8814b44924ab1dec72f2f3a\u002Fbookshelf-3.jpg?w=716&h=800\" alt=\"漫画棚\" width=\"716\" height=\"800\">\u003C\u002Ffigure>\u003Ch2 id=\"h7a10f09440\">本棚の管理もシステム化へ\u003C\u002Fh2>\u003Cp>冊数が増えてきたことから、今後は\u003Cstrong>本棚を管理する仕組み\u003C\u002Fstrong>も検討しています。\u003C\u002Fp>\u003Cp>現在考えているのは、\u003Cstrong>どのような本があり、どこに置かれているのか、貸し出し中の場合は誰が持っているのか\u003C\u002Fstrong>を確認できるシンプルなシステムです。バーコードを読み取ると、書籍情報のAPIからタイトルや表紙画像などを取得し、自動で登録できる形を想定しています。\u003C\u002Fp>\u003Cp>まずは技術書の本棚での導入を検討しており、仕組みが整えば漫画の管理にも活用する予定です。さらに、どこまで読んだかを記録したり、漫画本棚の「制覇率」を表示したりと、読むこと自体を楽しめる機能もアイデアとして挙がっています。\u003C\u002Fp>\u003Ch2 id=\"h4737611bc7\">これからのこと\u003C\u002Fh2>\u003Cp>この本棚は、スタッフの提案から始まり、推薦や投票を取り入れながら現在の形になりました。目論見通り、漫画が増えるにつれて感想を交わしたり、次に読みたい作品を勧め合ったりする\u003Cstrong>コミュニケーション\u003C\u002Fstrong>も新たに生まれています。\u003C\u002Fp>\u003Cp>今後は、冊数に合わせた整理や保管、作品の追加・入れ替え、リモート勤務のスタッフも参加しやすい方法などを見直していく予定です。本棚に限らず、日々の中で出てきたアイデアを取り入れながら、スタッフが過ごしやすい環境を少しずつ整えていきます。\u003C\u002Fp>\u003Cp>本棚に限らず、身近なアイデアをまず試し、使いながらよりよい形にしていく。そんな柔軟さを大切にしながら、これからも\u003Cstrong>スタッフが気持ちよく過ごせる環境\u003C\u002Fstrong>をつくっていきます。\u003C\u002Fp>",177,3,{"contents":287,"totalCount":493,"offset":250,"limit":494},[288,290,293,296,299,301,304,307,310,313,316,319,322,325,328,331,332,335,338,340,343,346,349,352,355,358,361,362,365,368,371,374,375,377,379,382,385,387,389,392,395,398,401,404,407,410,413,415,418,421,424,425,428,431,433,436,437,440,442,445,448,451,453,456,459,462,465,468,471,473,476,479,482,484,487,490],{"id":46,"name":289},"AI",{"id":291,"name":292},"workshop","ワークショップ",{"id":294,"name":295},"tool","ツール",{"id":297,"name":298},"office","オフィス",{"id":195,"name":300},"社内案件",{"id":302,"name":303},"event","イベント",{"id":305,"name":306},"iot","IoT",{"id":308,"name":309},"art","アート",{"id":311,"name":312},"moving","引越し",{"id":314,"name":315},"picture","映像",{"id":317,"name":318},"plant","植物",{"id":320,"name":321},"company-trip","社員旅行",{"id":323,"name":324},"health","健康",{"id":326,"name":327},"exercise","運動",{"id":329,"name":330},"bicycle-club","自転車部",{"id":27,"name":31},{"id":333,"name":334},"interview","Interview",{"id":336,"name":337},"recruiting","採用",{"id":87,"name":339},"お茶会",{"id":341,"name":342},"history","歴史",{"id":344,"name":345},"life","生活",{"id":347,"name":348},"club","部活動",{"id":350,"name":351},"character","キャラクター",{"id":353,"name":354},"food","食",{"id":356,"name":357},"math","数学",{"id":359,"name":360},"alcohol","酒",{"id":11,"name":14},{"id":363,"name":364},"application","アプリ",{"id":366,"name":367},"parenting","子育て",{"id":369,"name":370},"data","通信",{"id":372,"name":373},"migration","地方移住",{"id":17,"name":20},{"id":376,"name":376},"esports",{"id":127,"name":378},"振り返り",{"id":380,"name":381},"animal","動物",{"id":383,"name":384},"css","CSS",{"id":85,"name":386},"ゲーム",{"id":48,"name":388},"TypeScript",{"id":390,"name":391},"management","マネジメント",{"id":393,"name":394},"remote-work","リモートワーク",{"id":396,"name":397},"frame-work","フレームワーク",{"id":399,"name":400},"music","音楽",{"id":402,"name":403},"money","お金",{"id":405,"name":406},"covid-19","コロナ",{"id":408,"name":409},"railway","鉄道",{"id":411,"name":412},"agriculture","農業",{"id":89,"name":414},"趣味",{"id":416,"name":417},"certification","資格",{"id":419,"name":420},"personal-computer","PC",{"id":422,"name":423},"welfare","福利厚生",{"id":34,"name":36},{"id":426,"name":427},"study","勉強",{"id":429,"name":430},"mental-health","メンタルヘルス",{"id":120,"name":432},"フロントエンド",{"id":434,"name":435},"pilates","ピラティス",{"id":22,"name":25},{"id":438,"name":439},"tunnel","トンネル",{"id":130,"name":441},"デザイン",{"id":443,"name":444},"sports","スポーツ",{"id":446,"name":447},"online","オンライン",{"id":449,"name":450},"internship","インターンシップ",{"id":124,"name":452},"アニメーション",{"id":454,"name":455},"virtual-reality","VR",{"id":457,"name":458},"ssl","SSL",{"id":460,"name":461},"perl","Perl",{"id":463,"name":464},"operating-system","OS",{"id":466,"name":467},"ios","iOS",{"id":469,"name":470},"google","Google",{"id":198,"name":472},"DeepLearning",{"id":474,"name":475},"aws","AWS",{"id":477,"name":478},"apple","Apple",{"id":480,"name":481},"api","API",{"id":122,"name":483},"3D",{"id":485,"name":486},"school","学校",{"id":488,"name":489},"blender","Blender",{"id":491,"name":492},"android","Android",76,200,{"contents":496,"totalCount":285,"offset":250,"limit":285},[497,549,614],{"id":498,"createdAt":499,"updatedAt":500,"publishedAt":501,"revisedAt":500,"title":502,"category":503,"thumbnail":512,"image":516,"content":523,"keyword":524,"client":539,"team":540,"url":544,"release":545,"status":546,"top":15,"blog":32,"service":548},"phpj-noel-2025","2025-12-15T06:18:04.117Z","2026-08-04T09:31:48.003Z","2026-03-05T04:15:03.177Z","PIERRE HERMÉ PARIS | NOËL 2025",[504,509],{"id":505,"createdAt":506,"updatedAt":507,"publishedAt":506,"revisedAt":506,"name":508},"web","2024-03-22T05:33:05.262Z","2024-06-24T23:16:42.692Z","ウェブ制作",{"id":130,"createdAt":510,"updatedAt":510,"publishedAt":510,"revisedAt":510,"name":511},"2024-03-22T05:34:30.127Z","デザイン＆ディレクション",{"url":513,"height":514,"width":515},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F47e7b069013a45b8b6e931ec132bd272\u002Fthumb.png",900,1200,[517,519,521],{"url":518,"height":137,"width":138},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F43a703ebe8d7467aac2c995378cb081e\u002F1.png",{"url":520,"height":137,"width":138},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F6aed2d670822422696329a5cb3a6877f\u002F2.png",{"url":522,"height":137,"width":138},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002Fb691d73151a94dcf9d60a6f8af436eac\u002F3.png","\u003Cp>昨年に続き、ホリデーシーズン限定の『NOËL 2025』スペシャルサイトを、\u003Cstrong>デザインとフロントエンドで担当\u003C\u002Fstrong>しました。\u003Cbr>\u003Cbr>\u003Cstrong>「深海(アビス)」をテーマ\u003C\u002Fstrong>に、鮮やかな青から徐々に暗く沈んでいくグラデーションで、海の中を潜っていくような体験を表現。泡や珊瑚、砂などのモチーフを取り入れ、ページ全体で海中の世界を感じられる構成に仕上げました。\u003Cbr>\u003Cbr>砂や泡の表現にはWebGLとGPGPUを用い、数万単位のパーティクルをGPUで並列処理することで滑らかな動作を実現。一部テキストは3D描画で演出しながら、DOM上にも同内容を配置し、表現とSEOの両立を図りました。\u003Cbr>また、Safariなどブラウザ差異による負荷を考慮し、SVGからCanvasへ置き換えるなど最適化を実施。視覚的な印象を保ちながら、各環境で安定して動作するよう設計しています。\u003Cbr>\u003Cbr>\u003Cstrong>デザインと実装の両面から、制作の背景やポイントについてブログで詳しく解説\u003C\u002Fstrong>しています。\u003C\u002Fp>",[525,529,534],{"id":526,"createdAt":527,"updatedAt":528,"publishedAt":527,"revisedAt":528,"name":432,"filter":32,"page":32},"ice0h9h9ap","2024-06-28T01:14:44.830Z","2025-01-15T07:40:01.729Z",{"id":530,"createdAt":531,"updatedAt":532,"publishedAt":531,"revisedAt":532,"name":533,"filter":32,"page":32},"6ncqc37v7nzq","2024-06-28T01:14:12.293Z","2025-01-15T07:39:08.437Z","デザインプロジェクト",{"id":535,"createdAt":536,"updatedAt":537,"publishedAt":536,"revisedAt":537,"name":538,"filter":32,"page":32},"ztrz9np70v","2024-06-28T01:14:41.050Z","2025-01-15T07:40:30.428Z","コンセプトメイキング"," PH PARIS JAPON 株式会社",[541],{"fieldId":542,"title":543},"teamField","S2ファクトリー","https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fnoel2025\u002F","2025.10.17",[547],"公開中",[441],{"id":550,"createdAt":551,"updatedAt":552,"publishedAt":551,"revisedAt":552,"title":553,"category":554,"thumbnail":561,"image":565,"content":570,"keyword":571,"client":553,"team":586,"url":609,"release":610,"status":611,"statusText":612,"top":32,"blog":32,"service":613},"tamabi","2024-06-28T01:58:38.788Z","2025-05-27T03:25:42.261Z","多摩美術大学",[555,556],{"id":505,"createdAt":506,"updatedAt":507,"publishedAt":506,"revisedAt":506,"name":508},{"id":557,"createdAt":558,"updatedAt":559,"publishedAt":558,"revisedAt":558,"name":560},"system","2024-03-22T05:33:52.708Z","2024-06-24T23:16:53.739Z","システム開発",{"url":562,"height":563,"width":564},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002Fdea8e004e627415c80bf7b8d622bb4b9\u002Ftamabi-thumbnail-1.png",456,600,[566],{"url":567,"height":568,"width":569},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002Fa000f3cedf5d474d83c5b70e8c11db4e\u002Ftamabi-other-1.png",1305,1740,"\u003Cp>「多摩美術大学」ウェブサイトリニューアルのお手伝いをさせていただきました。\u003Cbr>\u003Cbr>サイトのコンテンツを大幅に整理し、運用効率を考慮した再利用しやすく組み合わせやすいUIコンポーネントを構築。また多くの方に利用していただけるようにアクセシビリティの向上にも注力しました。\u003Cbr>インフラは、従来のオンプレミスとクラウドが混在していた環境から、AWS への段階的な移行を進めており、今後の完全移行に向けた準備も進行中です。 \u003Cbr>\u003Cbr>弊社は、フロントエンドとバックエンドの実装、インフラ構築を担当しました。\u003C\u002Fp>",[572,576,580,585],{"id":573,"createdAt":574,"updatedAt":575,"publishedAt":574,"revisedAt":575,"name":475,"filter":32,"page":32},"uftrxsmd0v72","2024-06-28T01:14:13.671Z","2025-01-15T07:39:25.538Z",{"id":577,"createdAt":578,"updatedAt":578,"publishedAt":578,"revisedAt":578,"name":579,"filter":15,"page":15},"yctx9hzd4","2024-06-28T01:14:33.743Z","Lambda",{"id":581,"createdAt":582,"updatedAt":583,"publishedAt":582,"revisedAt":583,"name":584,"filter":32,"page":32},"u84cy0fbzno","2024-06-28T01:14:39.521Z","2025-01-15T07:40:41.433Z","Cloud",{"id":526,"createdAt":527,"updatedAt":528,"publishedAt":527,"revisedAt":528,"name":432,"filter":32,"page":32},[587,590,593,596,599,602,605,608],{"fieldId":542,"title":588,"link":589},"萩原 俊矢","https:\u002F\u002Fshunyahagiwara.com\u002F#\u002Fworks",{"fieldId":542,"title":591,"link":592},"GrandBase Inc.","https:\u002F\u002Fwww.grandbase.jp\u002F",{"fieldId":542,"title":594,"link":595},"DSCL Inc.","https:\u002F\u002Fdscl.jp\u002F",{"fieldId":542,"title":597,"link":598},"株式会社トラフィックス","https:\u002F\u002Ftraffics.jp\u002F",{"fieldId":542,"title":600,"link":601},"株式会社カンバセーションズ","https:\u002F\u002Fqonversations.jp\u002F",{"fieldId":542,"title":603,"link":604},"Measurements Inc.","https:\u002F\u002Fwww.measurements.co.jp\u002F",{"fieldId":542,"title":606,"link":607},"tha ltd.","https:\u002F\u002Ftha.jp\u002F",{"fieldId":542,"title":543},"https:\u002F\u002Fwww.tamabi.ac.jp\u002F","2024.4.4",[547],null,[508],{"id":615,"createdAt":616,"updatedAt":617,"publishedAt":616,"revisedAt":617,"title":618,"category":619,"thumbnail":621,"image":623,"content":632,"keyword":633,"client":606,"team":649,"url":655,"release":656,"status":657,"statusText":612,"top":15,"blog":32,"service":658},"humanity","2024-06-28T01:56:51.507Z","2025-05-27T03:26:34.287Z","HUMANITY",[620],{"id":557,"createdAt":558,"updatedAt":559,"publishedAt":558,"revisedAt":558,"name":560},{"url":622,"height":563,"width":564},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F740adb4e02c54fee97d12025df5f16a0\u002Fhumanity-thumbnail-1.png",[624,626,628,630],{"url":625,"height":568,"width":569},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F2a10b034854d40e789d38ac33e0a3c4e\u002Fhumanity-other-1.png",{"url":627,"height":568,"width":569},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F1091c52a97f745e5a3fc105bd0e542dc\u002Fhumanity-other-2.png",{"url":629,"height":568,"width":569},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F613c8c836fff40119e9f85097262399d\u002Fhumanity-other-3.png",{"url":631,"height":568,"width":569},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F3a9dfb8cce0d4ec887ead3d3998be04c\u002Fhumanity-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\u002Fp>",[634,639,644,645],{"id":635,"createdAt":636,"updatedAt":637,"publishedAt":636,"revisedAt":637,"name":638,"filter":32,"page":32},"fg8e4c9nl","2024-06-28T01:14:04.517Z","2025-01-15T07:36:58.970Z","CMS",{"id":640,"createdAt":641,"updatedAt":642,"publishedAt":641,"revisedAt":642,"name":643,"filter":32,"page":32},"p6qgoo2k9vl9","2024-06-28T01:14:06.759Z","2025-01-15T07:37:22.466Z","大規模データ",{"id":581,"createdAt":582,"updatedAt":583,"publishedAt":582,"revisedAt":583,"name":584,"filter":32,"page":32},{"id":646,"createdAt":647,"updatedAt":648,"publishedAt":647,"revisedAt":648,"name":386,"filter":32,"page":32},"pxnv6cy2u","2024-06-28T01:14:45.570Z","2025-01-15T07:39:54.004Z",[650,653,654],{"fieldId":542,"title":651,"link":652},"Enhance","https:\u002F\u002Fenhance-experience.com\u002Fja\u002F",{"fieldId":542,"title":606,"link":607},{"fieldId":542,"title":543},"https:\u002F\u002Fhumanity.game\u002Fja\u002F","2023.5.16",[547],[560],1788753721574]