[{"data":1,"prerenderedAt":677},["ShallowReactive",2],{"detailannual-gathering":3,"detail_related_annual-gathering_workshop":270,"$fc6NqbRWfS8U1PKmTosqXpWSZjK8SGCyyRc1WbmpJtmc":292,"$f7OovQEBIkf3flPSO65XgVqn1FRUlN7OLmCu_FYFaAPE":302,"works":512},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":6,"revisedAt":6,"title":7,"tag":8,"recommended_articles":18,"eyecatch":130,"heading_list":13,"content2":134,"description":135,"related_articles":136,"recruit":13,"is_html":13,"is_migration":13},"annual-gathering","2026-10-23T05:57:22.415Z","2026-10-26T05:21:18.062Z","年に一度の全社集会",[9,14],{"id":10,"createdAt":11,"updatedAt":11,"publishedAt":11,"revisedAt":11,"name":12,"top":13},"workshop","2025-05-30T02:11:13.196Z","ワークショップ",false,{"id":15,"createdAt":16,"updatedAt":16,"publishedAt":16,"revisedAt":16,"name":17,"top":13},"event","2024-12-12T02:47:47.083Z","イベント",[19,64,99],{"id":20,"createdAt":21,"updatedAt":22,"publishedAt":23,"revisedAt":22,"title":24,"tag":25,"recommended_articles":34,"eyecatch":41,"heading_list":45,"summary":46,"content2":47,"description":48,"related_articles":49,"recruit":13,"cta_title":61,"cta_text":62,"cta_url":63,"is_html":13,"is_migration":13},"vacation2026-app","2026-08-14T02:25:28.575Z","2026-09-24T03:25:59.639Z","2026-09-24T03:25:42.801Z","AIで作ったプロトタイプを実用化。「AIプロトタイプ壁打ち」で社員旅行アプリを開発",[26,28,30,32],{"id":27},"ai",{"id":29},"company-trip",{"id":31},"internal-project",{"id":33},"promotion",[35,37,39],{"id":36},"custom-reservation-system",{"id":38},"claude-code-perl-typescript-migration",{"id":40},"ai-generated-campaign-site",{"url":42,"height":43,"width":44},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F76171c49363646cc86698d5e2043af98\u002Fai-prototype-walltalk-eyecatch-revised-v3.png",900,1600,true,"\u003Cul>\u003Cli>\u003Cstrong>Claude Codeで作った社員旅行用アプリを題材に、新サービス「AIプロトタイプ壁打ち」を社内で検証\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>技術構成やバックエンド、デザインについて相談し、参加者全員が使えるWebアプリへ改修\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>実際の社員旅行で運用し、利用後のアンケートから良かった点や改善点を振り返った\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>","\u003Cp>\u003Cstrong>2 年ぶりの社員旅行\u003C\u002Fstrong>で長崎に行きました。\u003Cstrong>前回は、写真を投稿してミッションを達成していく専用アプリを制作\u003C\u002Fstrong>しましたが、今回も社員旅行に合わせて新しい Web アプリを用意することに。\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\u002Fvacation2024-missions\u002F\" data-iframely-url=\"https:\u002F\u002Fiframely.net\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fvacation2024-missions%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fiframely.net\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>今回はこのアプリを題材に、\u003Cstrong>弊社で始める新サービス「AIプロトタイプ壁打ち」\u003C\u002Fstrong>を社内で検証しました。\u003Cstrong>普段は広報を担当し、開発を専門としていない私がクライアント役\u003C\u002Fstrong>となって Claude で作ったプロトタイプを持ち込み、\u003Cstrong>エンジニアとアートディレクターの支援\u003C\u002Fstrong>を実際に受けながら、社員旅行で使えるアプリへ仕上げました。\u003C\u002Fp>\u003Cp>本記事では、AIプロトタイプ壁打ちの流れと、アプリが完成するまでの過程を紹介します。\u003C\u002Fp>\u003Ch2 id=\"he7c7cc39d9\">「AIプロトタイプ壁打ち」とは\u003C\u002Fh2>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fcontact\u002Fai-prototype-consultation\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F52c6db9bdf6049a4bb90d0c68acb48ff\u002Fai-proto01.png\" alt=\"AIプロトタイプ壁打ちとは\" width=\"1440\" height=\"1124\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Ca href=\"https:\u002F\u002Fclaude.ai\u002Fnew\" target=\"_blank\" rel=\"noopener noreferrer\">Claude\u003C\u002Fa> のようなツールを使えば、専門的な知識が十分になくても、画面や基本的な動きを備えたプロトタイプを作れます。ただ、それを\u003Cstrong>公開し、実際に人に使ってもらう\u003C\u002Fstrong>となると、見た目を整えるだけでは済みません。\u003C\u002Fp>\u003Cp>入力したデータはどこに保存するのか。利用者以外から見えないようにするにはどうすればよいのか。必要な機能を実現するには、どのサービスを組み合わせればよいのか。AI に聞けば実装方法は返ってきますが、\u003Cstrong>その内容が適切かどうかを判断するには専門的な知識が必要\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>「AIプロトタイプ壁打ち」は、AIで作ったプロトタイプをもとに、実現したいことや利用する場面をヒアリングし、\u003Cstrong>技術、デザイン、使いやすさ、セキュリティなどの観点から、実用化までに必要なことを整理するサービス\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>まだ要件が固まっていない段階でも、\u003Cstrong>「このまま進めて大丈夫か」「次に何をすればよいか」\u003C\u002Fstrong>といったところから相談できます。\u003C\u002Fp>\u003Ch3 id=\"haebd317835\">今回は「月額顧問：ライト」に相当\u003C\u002Fh3>\u003Cp>AIプロトタイプ壁打ちには、支援内容に応じて次の 3 つのプランがあります。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fcontact\u002Fai-prototype-consultation\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4b0fc4fae6c94e05b52d4250d9a328b8\u002Fai-proto02.png\" alt=\"プランの紹介\" width=\"1440\" height=\"1124\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cul>\u003Cli>\u003Cstrong>単発セッション：\u003C\u002Fstrong> ヒアリング、90 分のセッション、簡易レポート\u003C\u002Fli>\u003Cli>\u003Cstrong>月額顧問・ライト：\u003C\u002Fstrong> Slack での随時相談、隔週 1 回のセッション\u003C\u002Fli>\u003Cli>\u003Cstrong>月額顧問・スタンダード：\u003C\u002Fstrong> Slack での随時相談、週 1 回のセッション\u003C\u002Fli>\u003C\u002Ful>\u003Cp>今回はこのうち、\u003Cstrong>「月額顧問：ライト」に相当する内容\u003C\u002Fstrong>で社内検証を実施しました。\u003C\u002Fp>\u003Cp>\u003Cstrong>実際のクライアントとのやり取りを想定した上で、技術担当者もデザイナーもいない企業の担当者\u003C\u002Fstrong>として、私がクライアント役を務めました。支援を担当したのは、弊社のエンジニアとアートディレクターです。\u003C\u002Fp>\u003Cp>初回の壁打ちだけでなく、技術構成の提案、開発環境やバックエンドの土台づくり、その後の Slack やミーティングでの相談、デザインレビューまで、\u003Cstrong>アプリの完成に向けて継続的にサポートを受ける形\u003C\u002Fstrong>で進めました。\u003C\u002Fp>\u003Ch2 id=\"hcc630d9979\">社員旅行用アプリのプロトタイプを作る\u003C\u002Fh2>\u003Ch3 id=\"h12af5505b6\">作りたかったもの\u003C\u002Fh3>\u003Cp>社員旅行用アプリには、集合時間や座席表などをまとめた旅のしおりに加えて、旅行をより楽しむための機能も取り入れることにしました。\u003C\u002Fp>\u003Cp>前回のアプリでは、写真を投稿しながらミッションを達成し、共通の話題や目標をつくることで、\u003Cstrong>自由行動中にも一体感が生まれる\u003C\u002Fstrong>ようにしました。今回も目的は変えず、別のアプローチを試すことに。\u003C\u002Fp>\u003Cp>そこで参考にしたのが、写真を共有し、1 日の記録を動画で振り返れる \u003Ca href=\"https:\u002F\u002Fsetlog.kr\u002F\">\u003Cstrong>setlog\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> \u003C\u002Fstrong>です。この体験をベースに、\u003Cstrong>それぞれの場所で過ごす様子を共有し、あとから1日の旅を動画で振り返れるアプリ\u003C\u002Fstrong>を目指しました。\u003C\u002Fp>\u003Ch3 id=\"he5ce4354bb\">まずは 4 つの画面を作成\u003C\u002Fh3>\u003Cp>作りたいもののイメージを Claude に伝え、まずは次の 4 画面を作成しました。\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>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fd45697594aa148ff8ad30323ea4f43ed\u002Fbefore.png\" alt=\"\" width=\"1312\" height=\"1199\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>Claude に指示しながら調整を重ねるうちに、画面を切り替えたり、サンプルの投稿やメンバー情報を表示したりできるようになりました。保存はされませんが、モーダルが開いて投稿することもできます。一見すると、\u003Cstrong>あとは見た目を整えれば、そのまま使えそうな状態\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>このプロトタイプを持って、最初の壁打ちに臨みました。\u003C\u002Fp>\u003Ch2 id=\"hbd1f209a2e\">プロトタイプを持ち込んで相談\u003C\u002Fh2>\u003Cp>相談にあたって共有したのは、Claude で作ったプロトタイプと、アプリの概要や必要な機能をまとめたガイドラインです。\u003C\u002Fp>\u003Cp>初回のセッションは、\u003Cstrong>Zoom を使ったオンラインミーティング形式\u003C\u002Fstrong>で実施。当日はプロトタイプの画面を共有し、実際に操作しながら、各画面の狙いや実現したいことを説明しました。\u003C\u002Fp>\u003Cp>この時点で、目指すアプリの方向性は決まっていましたが、\u003Cstrong>Claude にどのような指示を出せば実現できるのか、必要な技術やサービスをどう組み合わせればよいのかはわからない状態\u003C\u002Fstrong>でした。\u003C\u002Fp>\u003Ch3 id=\"hb4096d20ef\">今回相談したこと\u003C\u002Fh3>\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>\u003Cli>\u003Cstrong>社員だけが利用できるログインを用意したい\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>社員旅行の 3 日間を中心に使うため、運用費をできるだけかけずに実現したい\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>機能やデザインだけでなく、利用人数や期間、費用面も含めて相談しました。\u003C\u002Fp>\u003Cp>質問への回答に加えて、画面を見て気づいた課題や、開発を進めるうえで確認すべき点についても意見をもらいました。要望をそのまま形にするのが難しい場合には、\u003Cstrong>何を実現したいのかを確認しながら、別の方法を一緒に考えてもらえた\u003C\u002Fstrong>のも助かった点です。\u003C\u002Fp>\u003Ch3 id=\"h61e292a9e2\">初回の相談で整理したこと\u003C\u002Fh3>\u003Cp>初回のセッションで整理した内容のうち、特に大きかったのが、マップの表現方法と、複数人で利用するためのバックエンドです。\u003C\u002Fp>\u003Ch4 id=\"hf7860d2c20\">\u003Cbr>\u003Cstrong>マップは実際の地図をベースに\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>当初は、地図全体をイラストで表現したいと考えていました。しかし、位置や縮尺を正確に合わせる必要があり、制作の負担も大きくなります。\u003C\u002Fp>\u003Cp>そこで、\u003Cstrong>実際の地図を使い、観光スポットのマーカーをイラストにする方向\u003C\u002Fstrong>で進めることになりました。\u003C\u002Fp>\u003Ch4 id=\"h9b3b2ddb50\">\u003Cbr>\u003Cstrong>複数人で使うにはバックエンドが必要\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>この時点では、投稿データをブラウザ内に保存していたため、内容を確認できるのは自分の端末だけでした。\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>が欠かせません。\u003C\u002Fp>\u003Cp>このほか、\u003Cstrong>通知の実現方法や利用できるサービス、費用を抑えるための条件\u003C\u002Fstrong>なども確認しました。初回のセッションで整理した内容をもとに、\u003Cstrong>後日、具体的な技術構成と完成までのロードマップを提案\u003C\u002Fstrong>してもらいました。\u003C\u002Fp>\u003Ch2 id=\"h9d87693828\">提案をもとに開発の土台を整える\u003C\u002Fh2>\u003Cp>社員旅行の参加人数や 3 日間という利用期間、投稿される写真の枚数を踏まえ、アプリの公開とデータ保存には主に次のサービスを組み合わせることになりました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>GitHub\u003C\u002Fstrong>\u003C\u002Fa>：ソースコードを管理し、Vercel と連携する\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fvercel.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Vercel\u003C\u002Fstrong>\u003C\u002Fa>：アプリを公開し、データの送受信やログインなどの API を動かす\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fneon.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Neon\u003C\u002Fstrong>\u003C\u002Fa>：メンバーや投稿、リアクションなどのデータを保存する\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fcloudinary.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Cloudinary\u003C\u002Fstrong>\u003C\u002Fa>：写真や動画を保存し、サイズや形式の変換、配信を行う\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>GitHubへ変更を反映すると、Vercelを通じてアプリが自動的に更新\u003C\u002Fstrong>されます。\u003Cstrong>投稿された文字情報やリアクションは Neon\u003C\u002Fstrong> へ、\u003Cstrong>写真や生成した動画は Cloudinary へ保存\u003C\u002Fstrong>する構成です。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fafd12931a8d84c8e90f297cdcfbd60a6\u002Fai-prototype-system-architecture.png\" alt=\"\" width=\"1600\" height=\"830\">\u003C\u002Ffigure>\u003Cp>利用するサービスが決まったあと、各アカウントを作成し、案内を受けながら設定を進めました。\u003Cbr>GitHub と Vercel を連携した公開環境、Neon のデータベース、Cloudinary へ写真を送る API は、壁打ちを担当したエンジニアが構築。\u003Cbr>\u003Cbr>こうして、Claude で機能を追加できる状態から開発を引き継ぎました。\u003C\u002Fp>\u003Ch3 id=\"hdf69f15fb8\">想定される使用量も確認\u003C\u002Fh3>\u003Cp>無料枠で運用できるかを判断するため、Neon のデータ量と Cloudinary の画像保存量を中心に試算してもらいました。\u003C\u002Fp>\u003Cp>想定したのは、参加者 30 人が 1 人 50 枚ずつ投稿する、合計 1,500 枚です。写真をそのままCloudinaryへ保存すると約 6GB になりますが、アップロード時にサイズや画質を調整すれば、\u003Cstrong>1 枚あたり 300〜500KB、全体で最大約 750MB \u003C\u002Fstrong>まで抑えられます。\u003C\u002Fp>\u003Cp>Neon に保存するメンバーや投稿などの文字情報は、約 1 MB を想定しています。今回の人数と利用期間であれば、\u003Cstrong>提案時の無料枠で運用できる見込み\u003C\u002Fstrong>となりました。\u003C\u002Fp>\u003Cp>ただし、Cloudinary では保存容量だけでなく、画像や動画の変換、配信などでもクレジットを消費します。そのため、実装後も利用状況を確認しながら運用することが前提です。\u003Cbr>無料プランの内容や利用条件は変更される場合があります。最新の情報は、\u003Ca href=\"https:\u002F\u002Fneon.com\u002Fdocs\u002Fintroduction\u002Fplans\" target=\"_blank\" rel=\"noopener noreferrer\">Neon\u003C\u002Fa> と \u003Ca href=\"https:\u002F\u002Fcloudinary.com\u002Fpricing\" target=\"_blank\" rel=\"noopener noreferrer\">Cloudinary\u003C\u002Fa> の公式ページをご確認ください。\u003C\u002Fp>\u003Cp>自分では、どのサービスを選び、どう組み合わせれば実現できるのか判断できなかったのが、利用規模や費用を踏まえた構成を提示してもらい、実現可能だと確認できたことが大きな助けになりました。\u003C\u002Fp>\u003Ch2 id=\"h1b99dc3e31\">相談しながら機能を実装\u003C\u002Fh2>\u003Cp>引き継ぎ後は、提案された構成をもとに、引き続き Claude で開発を進めました。\u003C\u002Fp>\u003Cp>初期のプロトタイプでは、サンプルの投稿やメンバー情報を表示していました。これを Neon や Cloudinary、Vercel 上の API とつなぎ、\u003Cstrong>参加者が投稿した写真やリアクションを全員で共有できる状態\u003C\u002Fstrong>へ変えていきます。\u003C\u002Fp>\u003Cp>実装中にエラーが起きたときは、まず Claudeと 試行錯誤。それでも解決できないことや、実装方法を判断できない点は Slack で相談し、必要に応じて Zoom などで画面を共有しました。\u003C\u002Fp>\u003Ch3 id=\"hcabe9ba610\">開発途中で課題と方向を確認\u003C\u002Fh3>\u003Cp>開発が進んだところで、実装できた機能と作業中に出てきた課題を共有しました。\u003C\u002Fp>\u003Cp>この時点では、メンバー情報の変更が反映されない、ローカル環境でログインを確認できない、マップの画像表示に時間がかかるといった問題が発生していました。エンジニアに原因や確認方法を教えてもらい、データベースの扱い方や開発環境の整え方、\u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fmaps?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Google Maps API\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> への切り替え\u003C\u002Fstrong>について相談しました。\u003C\u002Fp>\u003Cp>デザインについても、旅行らしい楽しさと画面全体の統一感を両立させる方法を相談。参考画像を使って方向を伝える方法に加えて、\u003Cstrong>色や文字、余白などのルールを Markdown にまとめ、AI への指示に利用する Design.md\u003C\u002Fstrong> についてレクチャーしてもらいました。\u003C\u002Fp>\u003Cp>ここで整理した内容を Claude への指示に落とし込み、マップや通知、動画などの実装を進めました。\u003C\u002Fp>\u003Ch3 id=\"h3826854768\">仮置きのマップをGoogle Mapsへ\u003C\u002Fh3>\u003Cp>開発中のミーティングで整理した内容をもとに、プロトタイプで使っていた無料のマップライブラリから、Google Maps API へ切り替えました。\u003C\u002Fp>\u003Cp>Google Cloud の API キーと Map ID は自分で用意し、教えてもらった設定方法を Claude へ伝えて実装。初回の壁打ちで決めた\u003Cstrong>「実際の地図にイラストのマーカーを配置する」という方針\u003C\u002Fstrong>を、実際の画面へ反映していきました。\u003C\u002Fp>\u003Cp>観光スポットだけでなく、投稿された場所や、位置情報の共有を選んだ参加者もマップ上に表示。完成前のレビューでは、地図を引いたときに近くの投稿をまとめるマーカークラスタリングや、投稿場所を示す写真アイコンの大きさについてもアドバイスを受けました。\u003C\u002Fp>\u003Cp>観光スポットのイラストマーカーは ChatGPT で作成し、Claude を使ってアプリへ組み込んでいます。\u003C\u002Fp>\u003Ch3 id=\"hd32293748f\">通知を送る方法を使い分ける\u003C\u002Fh3>\u003Cp>旅行中に写真を投稿してもらうため、\u003Cstrong>約 1 時間ごとに通知\u003C\u002Fstrong>を送り、通知から投稿画面を開けるようにしました。\u003C\u002Fp>\u003Cp>開発時の Vercel の Hobby プランでは、Cron 機能を利用できる頻度が 1 日 1 回まででした。そこで、\u003Ca href=\"https:\u002F\u002Fcron-job.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">投稿を促す通知には外部サービスの cron-job.org\u003C\u002Fa>  を利用し、決まった時間に Vercel 上の通知用 API を呼び出す構成にしています。\u003C\u002Fp>\u003Cp>通知を送る時間は、初日と 2 日目が 9 時から 21 時まで、最終日は 9 時から 17 時まで。無料枠を利用しながら、必要な頻度で通知できる方法を選びました。\u003C\u002Fp>\u003Ch3 id=\"hcb6efaa4d9\">動画生成はClaudeと試行錯誤\u003C\u002Fh3>\u003Cp>もう一つ実装したかったのが、\u003Cstrong>1 日の投稿をまとめた動画\u003C\u002Fstrong>です。\u003Cstrong>Cloudinary の動画変換機能\u003C\u002Fstrong>を使い、投稿された写真をつなぎ合わせてダイジェスト動画を生成しました。\u003C\u002Fp>\u003Cp>単純に写真を順番に並べるのではなく、「みんなの動画」には次のようなルールを設けています。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>同じ時間帯では、同じ人の写真を 1 枚まで使用する\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>同じ時間帯から 1 〜4 枚を選び、複数枚の場合はコラージュにする\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>使用する写真の組み合わせを参加者ごとに変える\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>最後に、その日のベストショットを表示する\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>縦横比の異なる写真をどう配置するのか、コラージュを何枚で構成するのか、写真ごとの表示時間をどうそろえるのか\u003C\u002Fstrong>など、実装には細かな調整が必要でした。動画が表示されない、長さがそろわないといった問題が起きるたびに、状況を Claude へ伝えて修正を繰り返しました。\u003C\u002Fp>\u003Cp>当初は、自分の投稿だけをまとめた「自分の動画」も用意し、参加者が何度でも作り直せる仕様にしていたのですが、動画を生成するたびに Cloudinary のクレジットを消費します。開発中のテストですでに一定量を使用していたこともあり、このままでは旅行中に上限へ達する心配もありました。\u003C\u002Fp>\u003Cp>自分の投稿だけを振り返るより、参加者全員の写真をまとめた方が、別々に行動した時間も含めて\u003Cstrong>「みんなで旅行した」感覚\u003C\u002Fstrong>が伝わります。そこで、「自分の動画」は最終版から外し、「みんなの動画」のみに絞りました。\u003C\u002Fp>\u003Cp>\u003Cstrong>「みんなの動画」は、夜間処理を 1 日 1 回実行して参加者ごとに生成し、翌日に表示\u003C\u002Fstrong>します。一度決まった写真の組み合わせを再利用することで、同じ動画が何度も生成されないようにしました。\u003C\u002Fp>\u003Ch3 id=\"h897e363f98\">完成前にアプリ全体をレビュー\u003C\u002Fh3>\u003Cp>主要な機能がそろった段階で、エンジニアとアートディレクターによる\u003Cstrong>全体レビューを実施\u003C\u002Fstrong>しました。\u003C\u002Fp>\u003Cp>レビューの対象は、機能が想定どおり動くかだけではありません。\u003Cstrong>画面ごとの役割が伝わるか、アプリ全体のトーンが揃っているか\u003C\u002Fstrong>まで確認します。\u003C\u002Fp>\u003Cp>特に見直したのが、\u003Cstrong>ページごとの情報の見せ方\u003C\u002Fstrong>です。投稿画面とメンバー詳細は似た構成になっていたため、それぞれの目的に合わせて分けることに。色の明るさや装飾、文言も整え、必要な機能は残しながら、事務的だった印象をやわらげていきました。\u003C\u002Fp>\u003Cp>レビューによって修正すべき点が明確になり、Claude への指示にも落とし込みやすくなりました。指摘された内容を反映し、修正版を Slack で確認してもらいながら、社員旅行で使う最終版へ仕上げました。\u003C\u002Fp>\u003Ch2 id=\"h47cdf6c7a6\">完成した社員旅行アプリ\u003C\u002Fh2>\u003Cp>こうして、最初はサンプル情報を表示するだけだった 4 つの画面が、\u003Cstrong>参加者全員で使えるアプリ\u003C\u002Fstrong>になりました。\u003Cbr>ブラウザ上で動く Web アプリですが、旅行中は iOS・Android ともにホーム画面へ追加し、\u003Cstrong>アプリアイコンから起動\u003C\u002Fstrong>してもらいました。\u003Cbr>\u003Cbr>最終版は、\u003Cstrong>長崎の海をイメージした青を基調に、イラストやキャラクターを取り入れた明るいデザインで統一\u003C\u002Fstrong>しています。ここからは、完成した各画面と機能を紹介します。\u003C\u002Fp>\u003Ch3 id=\"hd14ad94190\">社員だけが使えるログイン画面\u003C\u002Fh3>\u003Cp>\u003Cstrong>社員共通の合言葉を入力し、参加者一覧から自分の名前を選んでログイン\u003C\u002Fstrong>します。\u003Cbr>合言葉はサーバー側で確認し、一度ログインすると状態が保存されるため、次回からは入力しなくても大丈夫です。\u003C\u002Fp>\u003Cp>ヘッダーには、\u003Cstrong>弊社の公式キャラクター「Sくん」「2ちゃん」「Fさん」\u003C\u002Fstrong>が、眼鏡橋で記念撮影を楽しむ様子を描いたイラストを配置しました。長崎らしい風景と社員旅行の楽しさが伝わるよう、ChatGPT へ構図や修正内容を伝えながら作成したものです。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F87a4953447474bb781362ae4fce11107\u002Flogin.png?w=500&h=750\" alt=\"ログイン画面\" width=\"500\" height=\"750\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>ちなみに初回ログイン時には、通知と位置情報共有について確認します。どちらも任意で、許可しなくてもアプリを利用できます。\u003Cbr>設定はメンバー画面の自分のページから、いつでも変更可能です。\u003C\u002Fp>\u003Ch3 id=\"h3c7140a5ae\">旅行中に必要な情報をまとめたスケジュール画面\u003C\u002Fh3>\u003Cp>\u003Cstrong>この画面を見れば、旅行中に必要な情報をひととおり確認できる\u003C\u002Fstrong>よう、2泊3日の予定を日ごとにまとめました。集合時間や移動予定に加えて、バスや食事の座席表も掲載。座席表は画像を拡大して確認できます。\u003C\u002Fp>\u003Cp>観光スポットの項目を開くと、見どころや公式サイトへのリンクを表示。さらに、端末の日付と時刻に合わせて現在の予定を自動で判定し、\u003Cstrong>進行中の項目がひと目でわかるようにハイライト\u003C\u002Fstrong>しています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fd7401ede6b5e42fb854e7d8936b333b6\u002Fschedule.png?w=1500&h=1582\" alt=\"スケジュール\" width=\"1500\" height=\"1582\">\u003C\u002Ffigure>\u003Ch3 id=\"hcae8a62685\">写真を投稿して共有\u003C\u002Fh3>\u003Cp>投稿画面では、\u003Cstrong>一度に最大 4 枚の写真を選び、タイトルやコメント、場所を付けて投稿\u003C\u002Fstrong>できます。投稿された写真は投稿時刻に沿って並び、ほかの参加者は\u003Cstrong>絵文字でリアクション\u003C\u002Fstrong>できます。\u003C\u002Fp>\u003Cp>写真には\u003Cstrong>ポラロイドのような白い余白\u003C\u002Fstrong>を設け、\u003Cstrong>壁に貼った写真のように少しずつ角度\u003C\u002Fstrong>を変えて表示。タイトルを付けると、\u003Cstrong>タイトルステッカーとして写真の上に重なります\u003C\u002Fstrong>。一般的な SNS とは少し違う見せ方で、旅の思い出を眺める楽しさを加えています。\u003C\u002Fp>\u003Cp>投稿時には、あらかじめ登録した観光スポットの一覧から場所を選び、写真と紐づけることも可能です。位置情報の共有を許可している場合は、投稿時に取得した位置情報も記録され、関連する写真をマップから確認できます。\u003Cbr>\u003Cbr>\u003Cstrong>その日に最も多くのリアクションを集めた投稿は、ベストショット\u003C\u002Fstrong>に選出されます。\u003Cbr>\u003Cbr>さらに決まった時間に届く通知から投稿画面を開けるほか、投稿ボタンを画面下部に固定し、旅行中でもすぐに写真を共有できるようにしました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F88f0526c70504b89badf298a3ccb7b18\u002Fpost.png?w=4000&h=2571\" alt=\"投稿画面\" width=\"4000\" height=\"2571\">\u003C\u002Ffigure>\u003Ch4 id=\"h207542fc58\">\u003Cbr>\u003Cstrong>1日の旅を動画で振り返る\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>翌朝になると、前日に参加者全員が投稿した写真から、1日を振り返る「みんなの動画」が自動で作られます。\u003C\u002Fp>\u003Cp>動画に使う写真は、1時間ごとに区切って選びます。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>同じ時間帯では、同じ人の写真を1枚まで使用する\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>各時間帯から1〜4枚を選び、複数枚の場合はコラージュにする\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>写真の組み合わせを、動画を見る参加者ごとに変える\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>最後に、その日のベストショットを掲載する\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>全員が同じ動画を見るのではなく、それぞれ少しずつ異なる1日を振り返れる仕組みです。自由行動で別々の場所にいた時間も、参加者全員の写真を通して一つの旅として楽しめるようにしました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F65ac247b5619498db43e38dca1e1109d\u002Fvideo.png?w=4000&h=2354\" alt=\"みんなの動画\" width=\"4000\" height=\"2354\">\u003C\u002Ffigure>\u003Ch3 id=\"h6d4cb5b2d8\">観光スポットと投稿をマップ上で結びつける\u003C\u002Fh3>\u003Cp>マップ画面は、\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>\u003Cp>2 日目の自由行動に先立って参加者へ行き先を聞き、訪れる可能性のある観光地をあらかじめ登録。それぞれの特徴を取り入れた\u003Cstrong>イラスト\u003C\u002Fstrong>をChatGPTで作り、マーカーとして配置しました。\u003Cbr>実際の地図を使いながらも、旅行アプリらしい楽しさを感じられるようにしています。\u003C\u002Fp>\u003Cp>観光スポットのマーカーを開くと、場所の紹介と、そこに紐づいた投稿をまとめて確認できるほか、スポットを選ばずに投稿した写真も、投稿時に取得した位置情報をもとにカメラアイコンで地図へ反映。近い場所に投稿が集まっている場合は一つのマーカーにまとめ、地図を拡大すると個別に見られます。\u003C\u002Fp>\u003Cp>位置情報を共有している参加者は、本人のアイコンで現在地を確認できます。共有は任意で、自分のページからいつでも切り替えられます。自由行動中でも、ほかの参加者がどこで何をしているのかを、場所と写真の両方から知ることができ、行動を共にしていなくとも\u003Cstrong>みんなで旅行してるような気持ち\u003C\u002Fstrong>になれるようにしました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F8a340711b9c24e4da007d77dfd3ced6e\u002Fmap.png?w=1500&h=1395\" alt=\"マップ画面\" width=\"1500\" height=\"1395\">\u003C\u002Ffigure>\u003Ch3 id=\"h12c1f37458\">メンバーごとに旅の写真を振り返る\u003C\u002Fh3>\u003Cp>メンバー画面では、\u003Cstrong>参加者を投稿数の多い順に並べ、投稿数と上位3名のメダルを掲載\u003C\u002Fstrong>しました。\u003C\u002Fp>\u003Cp>メンバーを選ぶと、その人が投稿した写真が 3 列の\u003Cstrong>グリッド\u003C\u002Fstrong>に並びます。複数枚をまとめた投稿には印を付け、開くと一枚ずつ確認できるようにしました。\u003Cbr>投稿画面が旅全体の出来事を追う場所であるのに対し、メンバー詳細は\u003Cstrong>一人ひとりの視点から旅行を振り返る画面\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>自分のページからは、投稿のタイトルやコメントの編集、写真の削除も可能です。初回に設定した通知と位置情報共有も、ここから変更できます。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F691b94f9996e470ca20954cd1e1ce9a3\u002Fmember.png?w=4000&h=2577\" alt=\"メンバー画面\" width=\"4000\" height=\"2577\">\u003C\u002Ffigure>\u003Ch2 id=\"h93eaa93a02\">社員旅行で実際に使ってみた\u003C\u002Fh2>\u003Cp>完成したアプリは、2 泊 3 日の社員旅行で実際に使用しました。\u003Cstrong>3 日間で投稿された写真は合計 377 枚。初日は 112 枚、自由行動の 2 日目は 218 枚、最終日は 47 枚\u003C\u002Fstrong>でした。最終日は旅行日程そのものが短く、疲れもたまっていたためか、利用は少なめです。\u003C\u002Fp>\u003Cp>最も投稿が集まった 2 日目には、参加者がそれぞれの場所で過ごす様子を写真で共有しました。\u003Cbr>\u003Cstrong>マップを見て近くにいることに気づき、一緒に食事へ行った参加者\u003C\u002Fstrong>もいたようです。\u003Cbr>\u003Cbr>別々に行動していても、写真や場所を通して互いの様子が伝わり、目指していた\u003Cstrong>自由行動中の一体感\u003C\u002Fstrong>につながったと思います。\u003C\u002Fp>\u003Ch3 id=\"hcc66d73f16\">アンケートで好評だったこと\u003C\u002Fh3>\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>\u003Cli>\u003Cstrong>1 日の写真を、翌日に動画で振り返れる\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>タイトルやコメントと写真の組み合わせを楽しめる\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>デザインがよく、操作も分かりやすい\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>予定の確認だけでなく、参加者同士で旅の出来事を共有し、あとから振り返るところまで一つのアプリで体験できた点が評価されました。\u003C\u002Fp>\u003Ch3 id=\"hde3fd539b6\">改善点や次回に向けて\u003C\u002Fh3>\u003Cp>一方で、実際に使ったからこそ見えた改善点もあります。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>画面の読み込み：\u003C\u002Fstrong> 投稿画面を開くたびに読み込みが発生するため、キャッシュを保持してほしい\u003C\u002Fli>\u003Cli>\u003Cstrong>写真を共有する場所：\u003C\u002Fstrong> Slackの写真共有チャンネルと役割が重なり、どちらへ投稿するか迷う場面があった\u003C\u002Fli>\u003Cli>\u003Cstrong>投稿画面の見せ方：\u003C\u002Fstrong> 投稿数ランキングやメダルは目的が伝わりにくく、ベストショットを上部に固定したことで、最新の投稿を追いづらい\u003C\u002Fli>\u003C\u002Ful>\u003Cp>また、\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>\u003Cli>\u003Cstrong>投稿した写真を社内の共有ドライブへ保存する\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>旅行先で使えるARフォトフレームを用意する\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>いずれも参加者から寄せられたアイデアです。\u003Cbr>どれを取り入れるかは未定ですが、今回見つかった改善点とあわせて、今後のアプリづくりに活かしたいと思います。\u003C\u002Fp>\u003Ch2 id=\"hee7b126aff\">AIで作ったプロトタイプを実用化するには\u003C\u002Fh2>\u003Cp>AIを使えば、開発の専門知識がなくても、画面や基本的な動きを備えたプロトタイプを作れます。だからといって、\u003Cstrong>そのまま公開して使えるわけではありません\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cp>Web上にどのように公開するのか。入力されたデータや画像をどこへ保存するのか。バックエンドには何が必要なのか。誰がアクセスできるようにするのか。\u003Cstrong>実用化にあたっては、セキュリティや費用、公開後の運用まで含めて検討\u003C\u002Fstrong>する必要があります。\u003C\u002Fp>\u003Cp>デザインについても、画面を作るだけでなく、それぞれの役割や情報の優先順位、操作の流れを整理し、アプリ全体の見せ方を整えなければなりません。\u003C\u002Fp>\u003Cp>\u003Cstrong>「AIプロトタイプ壁打ち」では、プロトタイプと利用条件を確認しながら、公開・運用までに必要なことを技術とデザインの両面から整理\u003C\u002Fstrong>します。\u003C\u002Fp>\u003Ch3 id=\"hff055326e9\">まだ形になっていなくても相談できます\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>AIで試作したものの、次に何をすればよいか分からない\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>要件が固まっていなくても、プロトタイプが途中でも構いません。作りたいものや現在困っていることから、\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fcontact\u002Fai-prototype-consultation\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\u002Fwww.s2factory.co.jp\u002Fcontact\u002Fai-prototype-consultation\u002F\" data-iframely-url=\"https:\u002F\u002Fiframely.net\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fcontact%2Fai-prototype-consultation%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fiframely.net\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>","Claude Codeで作った社員旅行用アプリを題材に、新サービス「AIプロトタイプ壁打ち」を社内で検証。技術構成やデザインの相談から、実装、旅行当日の利用、振り返りまでを紹介します。",[50,52,54,56,57,59],{"id":51},"vacation2024-missions",{"id":53},"vacation2024",{"id":55},"vacation2023",{"id":38},{"id":58},"event-ai-agent",{"id":60},"bird-classification-2","AIプロトタイプ壁打ちのご相談はこちら","AIでプロトタイプを作ったものの、バックエンドやインフラ、セキュリティ、デザインなどに不安がある方へ。要件が固まっていない段階でも、現在困っていることや実現したいことからご相談いただけます。","https:\u002F\u002Fwww.s2factory.co.jp\u002Fcontact\u002Fai-prototype-consultation\u002F",{"id":36,"createdAt":65,"updatedAt":66,"publishedAt":67,"revisedAt":67,"title":68,"tag":69,"recommended_articles":79,"eyecatch":85,"heading_list":45,"content2":89,"description":90,"related_articles":91,"recruit":13,"cta_title":97,"cta_text":98,"is_html":13,"is_migration":13},"2026-08-24T05:53:29.501Z","2026-09-07T04:01:25.896Z","2026-09-07T03:51:13.114Z","3つの事例で見るフルカスタムの予約システム",[70,72,74,76,77],{"id":71},"infrastructure",{"id":73},"security",{"id":75},"backend",{"id":33},{"id":78},"tech",[80,81,83],{"id":38},{"id":82},"nazotoki",{"id":84},"noel2025",{"url":86,"height":87,"width":88},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F089ad5ed4cfa415983677dc8044d462a\u002Fcustom-reservation-system.png",941,1672,"\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連携など、要件に合わせた設計・実装の工夫をまとめました。",[92,93,94,95],{"id":38},{"id":40},{"id":60},{"id":96},"design-project-1","予約システムの開発・リニューアルをご検討の方へ","既存サービスでは運用に合わない、管理業務に手作業が残っている、ECサイトや会員基盤と連携したい。予約システムに関する課題をお聞かせください。新規開発から既存システムの見直しまで、要件に合わせて対応します。",{"id":38,"createdAt":100,"updatedAt":101,"publishedAt":102,"revisedAt":101,"title":103,"tag":104,"recommended_articles":111,"eyecatch":115,"heading_list":13,"content2":117,"description":118,"related_articles":119,"recruit":13,"cta_url":129,"is_html":13,"is_migration":13},"2026-05-29T08:21:55.189Z","2026-09-01T05:43:45.290Z","2026-06-02T01:45:24.758Z","テストがない 10 万行の Perl システムを、Claude Code で TypeScript へ書き換えた話",[105,106,108,109,110],{"id":27},{"id":107},"typescript",{"id":75},{"id":78},{"id":33},[112,113,114],{"id":96},{"id":40},{"id":60},{"url":116,"height":87,"width":88},"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","\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件のテスト構築まで行った取り組みを紹介します。",[120,121,122,123,125,127],{"id":40},{"id":58},{"id":60},{"id":124},"edge-ai",{"id":126},"ux-certification-basics",{"id":128},"figma-plugin","https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fshader-basics\u002F",{"url":131,"height":132,"width":133},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc2d2b0aaaa70415c8ca8c564e86f5110\u002F%E5%85%A8%E7%A4%BE%E9%9B%86%E4%BC%9A-2.jpg",997,2000,"\u003Cp>昨年から、\u003Cstrong>年に一度、全国のスタッフが集まる全社集会\u003C\u002Fstrong>を開くようになりました。\u003C\u002Fp>\u003Cp>弊社の働き方は、フルリモートや、出社とリモートを組み合わせたハイブリッドワークなどさまざま。\u003Cstrong>大阪にもオフィス\u003C\u002Fstrong>があり、全員が直接顔を合わせる機会はなかなかありません。そこで、\u003Cstrong>一年に一度くらいはみんなで顔を合わせよう\u003C\u002Fstrong>と始めたのが、この全社集会です。\u003C\u002Fp>\u003Cp>一年の振り返りや今年の目標の共有に加え、みんなで楽しめる企画も用意。今回は、昨年と今年の様子をご紹介します。\u003C\u002Fp>\u003Ch2 id=\"hf600f39748\">一年を振り返り、目標を共有する\u003C\u002Fh2>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fd70f6742225f42059f34a7eb10b35219\u002F%E5%85%A8%E7%A4%BE%E9%9B%86%E4%BC%9A.png\" alt=\"\" width=\"1448\" height=\"1086\">\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>\u003Cli>\u003Cstrong>集合写真の撮影\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>懇親会\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>冒頭では、社長から今年の売上や過去との比較など、会社の状況と、それを踏まえた中長期的な目標について説明があります。\u003C\u002Fp>\u003Cp>その後はバックエンドやフロントエンド、デザインやPMなどのチームごとに分かれて一年を振り返り、\u003Cstrong>目標の達成に向けて、個人として、チームとして何をしていくか\u003C\u002Fstrong>を話し合い発表。会社全体の目標に、一人ひとりが自分も関わっているという意識を持って取り組めるよう、こうした時間を設けています。\u003C\u002Fp>\u003Cp>振り返りや目標の共有に加え、\u003Cstrong>みんなで楽しめるレクリエーションも行いました。\u003C\u002Fstrong>\u003Cbr>昨年は質問のくじを使ったトーク企画、今年はプロのカメラマンによる写真撮影です。それぞれの様子をご紹介します。\u003C\u002Fp>\u003Ch2 id=\"hab9e2bf1ef\">質問のくじを通じて意外な一面を知る\u003C\u002Fh2>\u003Cp>昨年は\u003Cstrong>「S2の誰かに聞きたいこと」\u003C\u002Fstrong>を事前に全員から募集しました。\u003Cstrong>集まった質問をくじにして、引いた人がその質問に 1 分間で答える企画\u003C\u002Fstrong>です。当たり付きのくじもあり、当たった人には賞品を用意しました。\u003C\u002Fp>\u003Cp>寄せられた質問は、仕事の話から趣味や暮らし、ちょっと変わった仮定の話までさまざま。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>一番思い出に残っている案件は？\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>S2の誰よりも自分が一番だと思うことは？\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> これをきっかけに社内広報でも質問企画を取り入れようと、現在企画を進めています。\u003C\u002Fp>\u003Ch2 id=\"hbea57602d6\">プロのカメラマンによる写真撮影\u003C\u002Fh2>\u003Cp>今年は、\u003Cstrong>デザインチームを中心に、プロのカメラマンによる写真撮影を企画\u003C\u002Fstrong>。会社のWebサイトや提案資料などで使うプロフィール写真のほか、個人用の写真も撮っていただきました。\u003C\u002Fp>\u003Cp>プロフィール写真のコンセプトは、\u003Cstrong>「共に伴走してくれそうな誠実さと人柄の暖かさ」\u003C\u002Fstrong>です。写真を見た方にスタッフの人柄が伝わり、「一緒に仕事をしたい」と感じてもらうことを目指しています。\u003C\u002Fp>\u003Cp>服装は白を基調にそろえ、リラックスした自然な表情で撮影に臨みました。\u003Cbr>プロのカメラマンに撮影してもらう機会なんてなかなかありません。みんな少し緊張しながらも、撮影を楽しんでいました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc4b71f724e8348fd8ca1ed1f44bf8b64\u002F%E5%86%99%E7%9C%9F%E6%92%AE%E5%BD%B1.jpg\" alt=\"写真撮影の様子\" width=\"1483\" height=\"1036\">\u003Cfigcaption>写真撮影の様子\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F2e5415942bcd4b3e95c52498065ef671\u002F%E5%86%99%E7%9C%9F%E6%92%AE%E5%BD%B12.jpg\" alt=\"\" width=\"2000\" height=\"1333\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>プロフィール写真とは別に、自由に撮ってもらえる時間もあり、花や小物と一緒に写るスタッフも。\u003Cstrong>グループ撮影\u003C\u002Fstrong>の時間も設け、それぞれのグループが異なるポーズで撮影しました。\u003C\u002Fp>\u003Cp>後日届いたレタッチ済みの写真は、\u003Cstrong>みんなで集まった日のいい記念です。\u003C\u002Fstrong>\u003C\u002Fp>\u003Ch2 id=\"h0e286b8804\">創立20周年に向けて\u003C\u002Fh2>\u003Cp>\u003Cstrong>弊社は来年 3 月に20周年を迎えます。\u003C\u002Fstrong> これまでお仕事をご一緒してきた皆さま、日頃からお世話になっている皆さまに支えられ、この節目を迎えられることをうれしく思います。\u003C\u002Fp>\u003Cp>現在、20周年に向けた企画も進行中です。これまでの感謝をお伝えするとともに、皆さまにも楽しんでいただけるものにしたいと、社内でアイデアを出し合っています。\u003C\u002Fp>\u003Cp>詳しい内容はまだお伝えできませんが、\u003Cstrong>S2らしい20周年にできれば\u003C\u002Fstrong>と考えています。あらためてご紹介しますので、どうぞお楽しみに。\u003Cbr>これからも、S2ファクトリーをどうぞよろしくお願いいたします。\u003C\u002Fp>","全国各地で働くスタッフが集まる、S2ファクトリーの全社集会。一年の振り返りや目標の共有に加え、質問くじによるトークやプロのカメラマンによる写真撮影など、昨年と今年の様子をご紹介します。",[137,171,206,240],{"id":138,"createdAt":139,"updatedAt":140,"publishedAt":141,"revisedAt":140,"title":142,"tag":143,"recommended_articles":149,"eyecatch":153,"heading_list":45,"content2":157,"description":158,"related_articles":159,"recruit":13,"cta_title":168,"cta_text":169,"cta_url":170,"is_html":13,"is_migration":13},"vacation2026","2026-10-05T06:33:00.591Z","2026-10-09T00:41:04.994Z","2026-10-09T00:39:38.380Z","2年ぶりの社員旅行で長崎へ行ってきました！",[144,145,146,147],{"id":29},{"id":33},{"id":15},{"id":148},"food",[150,151,152],{"id":20},{"id":36},{"id":38},{"url":154,"height":155,"width":156},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Feff393503bf945b3aa2bea066002bd6d\u002Fnagasaki.jpg",3886,5829,"\u003Cp>\u003Cstrong>2 年ぶりの社員旅行\u003C\u002Fstrong>で、長崎へ行ってきました。\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fvacation2023\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">宮古島\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fvacation2024\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">北海道\u003C\u002Fa>に続き、\u003Cstrong>今回で 3 回目の開催\u003C\u002Fstrong>です。\u003Cbr>長崎での 3 日間を写真とともに振り返りたいと思います。\u003C\u002Fp>\u003Cp>前回と前々回の記事はこちら。\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\u002Fvacation2023\u002F\" data-iframely-url=\"https:\u002F\u002Fiframely.net\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fvacation2023%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fiframely.net\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fvacation2024\u002F\" data-iframely-url=\"https:\u002F\u002Fiframely.net\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fvacation2024%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=\"h84c92de3e1\">行き先は長崎に\u003C\u002Fh2>\u003Cp>弊社では、\u003Cstrong>多くの社員がフルリモートやハイブリッドワーク\u003C\u002Fstrong>で働いています。\u003Cbr>社員旅行は、普段オンラインでやり取りしているメンバーと直接顔を合わせ、\u003Cstrong>仕事から離れて交流やリフレッシュができる機会\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>行き先は、前回の社員旅行後のアンケートでも希望が挙がっていた\u003Cstrong>長崎\u003C\u002Fstrong>です。\u003Cbr>今回も立候補者で幹事チームを組み、旅行会社と相談しながら宿泊先や食事、観光の行程を決めていきました。\u003C\u002Fp>\u003Cp>初日と最終日はみんなで観光や食事を楽しむ行程。社員旅行ではありますが、行きたい場所や旅の楽しみ方は人それぞれなので、\u003Cstrong>2 日目はこれまでと同じく終日自由行動\u003C\u002Fstrong>にしました。\u003C\u002Fp>\u003Ch3 id=\"h625d0b01b7\">旅行専用のWebアプリも制作\u003C\u002Fh3>\u003Cp>自由行動中にもみんなで旅行しているような一体感が生まれるよう、\u003Cstrong>前回に引き続き旅行専用の Web アプリを制作\u003C\u002Fstrong>しました。\u003Cbr>\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> 1 日分の投稿写真を動画にまとめ、みんなの旅を振り返る\u003C\u002Fli>\u003C\u002Ful>\u003Cp>写真の投稿では、\u003Cstrong>各日のベストショットを選ぶ企画\u003C\u002Fstrong>も実施。その日の投稿に集まった\u003Cstrong>リアクション数\u003C\u002Fstrong>をもとに受賞者を 3 名決め、賞品としてそれぞれに\u003Ca href=\"https:\u002F\u002Fwww.atelieryama.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">アトリエやま\u003C\u002Fa>で購入した\u003Cstrong>波佐見焼の置物\u003C\u002Fstrong>を贈りました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ff55cabf3725346438372daeba7dcaa23\u002F%E7%BE%8A%E3%81%AE%E7%BD%AE%E7%89%A9.jpg?w=1000&h=750\" alt=\"羊の置物\" width=\"1000\" height=\"750\">\u003Cfigcaption>賞品の一つ、羊の置物。他にも恐竜と鳩がありました。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>また、このアプリを題材に、弊社で始める新サービス\u003Cstrong>「AIプロトタイプ壁打ち」を社内で検証\u003C\u002Fstrong>。\u003Cstrong>AI で作ったプロトタイプを専門家と確認し、実用化までの進め方を整理するサービス\u003C\u002Fstrong>です。\u003Cbr>こうした社内イベントは、\u003Cstrong>自分たちで開発したツールや新しいサービスを、実際の利用環境で検証できる場\u003C\u002Fstrong>でもあります。\u003Cstrong>そこで得た知見を蓄積し、次の開発や運用に活かせること\u003C\u002Fstrong>も、弊社の強みの一つです。\u003Cbr>\u003Cbr>アプリの制作過程は、\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fvacation2026-app\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">こちらの記事\u003C\u002Fa>で詳しく紹介しています。ぜひご覧ください！\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\u002Fvacation2026-app\u002F\" data-iframely-url=\"https:\u002F\u002Fiframely.net\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fvacation2026-app%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fiframely.net\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fvacation2024-missions\u002F\" data-iframely-url=\"https:\u002F\u002Fiframely.net\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fvacation2024-missions%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=\"hcc23b5a107\">長崎での３日間\u003C\u002Fh2>\u003Ch3 id=\"he3650f0d4b\">1日目：長崎空港で合流し、市内観光へ\u003C\u002Fh3>\u003Cp>今回も\u003Cstrong>20人以上が参加\u003C\u002Fstrong>。東京組と大阪組が午前中に長崎空港で合流し、バスで市内へ向かいます。\u003Cbr>以前社員旅行のために作った\u003Cstrong>S2の旗を目印\u003C\u002Fstrong>に、幹事が引率。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F9fceea5afe9e49a39b12688fb4f20122\u002F%E5%BC%95%E7%8E%87.png\" alt=\"引率\" width=\"1086\" height=\"789\">\u003Cfigcaption>空港での引率の様子\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>昼食は、さっそく長崎名物の皿うどん。\u003Cbr>春巻や酢豚、エビチリなども大皿から取り分けていただきました。食後にはデザートのカステラも。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fb7e40f2ebe454fb98481ddef6d312cf6\u002F%E6%98%BC%E9%A3%9F.jpg\" alt=\"\" width=\"2268\" height=\"1878\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>午後からは、次の 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>教会や洋館を見学しながら、長崎の街を歩きます。\u003Cbr>暑い一日でしたが、天気にも恵まれ、青空の下で観光を楽しめました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F36bffadd6dce4aaaadaf33ec78aad6e2\u002F%E5%A4%A7%E6%B5%A6%E5%A4%A9%E4%B8%BB%E5%A0%82.png\" alt=\"\" width=\"1000\" height=\"845\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>夕食は、長崎の郷土料理、\u003Cstrong>卓袱(しっぽく)料理\u003C\u002Fstrong>。中国料理をもとに、和食やオランダ・ポルトガルなどの西洋料理の要素が加わって生まれたそうです。\u003Cbr>円卓に大皿を並べ、みんなで小皿に取り分けていただきます。\u003C\u002Fp>\u003Cp>食事は、「お鰭(おひれ)」と呼ばれるお吸い物から。まずはお吸い物をいただき、その後に乾杯するという順番も、卓袱料理ならではの作法です。\u003Cbr>この日の献立には、豚の角煮や豆の蜜煮、刺身など。いろいろな料理が一つの卓に並ぶ夕食を楽しみました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F694fec881e8848edbd96b4d02bc4b919\u002F%E5%8D%93%E8%A2%B1%E6%96%99%E7%90%86.png?w=600&h=588\" alt=\"卓袱料理\" width=\"600\" height=\"588\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>宿泊先は、長崎駅に近い長崎マリオットホテル。\u003Cbr>翌日の自由行動にも出かけやすい立地です。部屋からの景色や朝食も好評で、ホテルでゆっくり過ごす時間も旅の楽しみの一つになりました。\u003C\u002Fp>\u003Ch3 id=\"he887930006\">2日目：自由行動\u003C\u002Fh3>\u003Cp>2日目は、\u003Cstrong>観光も食事も各自\u003C\u002Fstrong>で。\u003Cbr>平和記念公園や長崎県美術館など、長崎市内を巡る人もいれば、ハウステンボスや五島列島の福江島まで足を延ばす人も。近場から遠方まで行き先はさまざまです。\u003C\u002Fp>\u003Cp>自由行動の途中には、\u003Cstrong>アプリのマップで近くにいるメンバーを見つけて合流\u003C\u002Fstrong>し、一緒にご飯を食べることもあれば、観光先でばったり会うことも。\u003Cstrong>別々に動いていても、旅先で顔を合わせる機会\u003C\u002Fstrong>がありました。\u003C\u002Fp>\u003Cp>アプリには、各地で撮った写真も集まります。\u003Cbr>自分が行かなかった場所の様子をのぞけるので、ほかのメンバーの投稿を眺めるのも楽しみでした。同じ長崎旅行でも、写真に写っているものは人それぞれです。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fa95c3f614d094d30b4b5a553e17b19bb\u002F%E7%A6%8F%E6%B1%9F%E5%B3%B6.jpg\" alt=\"\" width=\"5332\" height=\"3001\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F0ebcea5763a04164a12db3d621cc5de0\u002Fpenguin.jpg?w=600&h=800\" alt=\"ペンギン水族館\" width=\"600\" height=\"800\">\u003C\u002Ffigure>\u003Ch3 id=\"hf17068ddc7\">3日目：出島を巡って、帰路へ\u003C\u002Fh3>\u003Cp>最終日は、ホテルをチェックアウトして\u003Cstrong>出島\u003C\u002Fstrong>へ。再び全員で市内観光です。\u003C\u002Fp>\u003Cp>出島は、江戸時代にオランダとの貿易の拠点となった場所。商館長の住まいや倉庫などが復元され、当時の暮らしや貿易の様子が紹介されています。\u003Cbr>場内を歩きながら、建物や展示を見学しました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4cc684dcd29a458d8f605582c87a51ab\u002F%E5%87%BA%E5%B3%B6.png\" alt=\"\" width=\"1672\" height=\"941\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>見学後は、港沿いの出島ワーフを散策。\u003Cbr>最後の昼食は、海鮮丼や地げ丼をみんなでいただきました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fe0062ccf30a742698bc7a60fa54b0ac5\u002F%E3%83%A9%E3%83%B3%E3%83%81.jpg\" alt=\"\" width=\"1000\" height=\"573\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>食事を終えたら、バスで長崎空港へ。\u003Cbr>東京組と大阪組はここでそれぞれの帰路につき、3 日間の社員旅行を終えました。\u003C\u002Fp>\u003Ch2 id=\"hbdbffbb38b\">旅行を終えて\u003C\u002Fh2>\u003Cp>旅行後のアンケートでは、\u003Cstrong>ホテルでの滞在や自由行動、アプリなどに満足したという声\u003C\u002Fstrong>が多く寄せられました。大きなトラブルもなく、全員が無事に帰ってこられて良かったです。\u003C\u002Fp>\u003Cp>準備や運営では、\u003Cstrong>注意点や流れをまとめたドキュメントや、以前の幹事の経験談\u003C\u002Fstrong>にも助けられました。\u003Cbr>幹事チームでも良かった点や改善点を整理し、次回の企画や運営に引き継いでいきたいと思います。\u003C\u002Fp>\u003Ch3 id=\"h648b4867d1\">旅行のアイデアを形に\u003C\u002Fh3>\u003Cp>弊社では、\u003Cstrong>社内で使うシステムやツールも自分たちで作っています\u003C\u002Fstrong>。\u003Cbr>旅行アプリの制作は、前回に続いて\u003Cstrong>2回目\u003C\u002Fstrong>。旅を楽しむために用意したアプリを実際に使う中で、開発や運用の経験も重ねてきました。\u003C\u002Fp>\u003Cp>こうした経験や、\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">これまでの開発実績\u003C\u002Fa>で培った技術を活かして、旅行にまつわるアイデアを形にするお手伝いもできればと考えています。\u003C\u002Fp>\u003Cp>\u003Cstrong>「旅行中にこんなものがあれば」「こんなことを実現したい」\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ファクトリーの3回目の社員旅行は長崎へ。普段は離れた場所で働くメンバーが集まり、市内観光や卓袱料理、終日自由行動を楽しんだ3日間を写真とともに振り返ります。",[160,161,162,163,164,166],{"id":20},{"id":53},{"id":51},{"id":55},{"id":165},"corporate-ekiden2025",{"id":167},"tour-de-tohoku2024","旅行やイベントで使うアプリのご相談も承っています。","実際の旅行で運用した経験も活かし、旅行やイベントで使うアプリの開発も承ります。\n「情報共有の手間を減らしたい」「こんなアプリがあれば」といったお困りごとやアイデアがありましたら、ぜひお気軽にご相談ください。","https:\u002F\u002Fwww.s2factory.co.jp\u002Fcontact\u002F",{"id":172,"createdAt":173,"updatedAt":174,"publishedAt":175,"revisedAt":175,"title":176,"tag":177,"recommended_articles":183,"eyecatch":187,"heading_list":45,"content2":191,"description":192,"related_articles":193,"recruit":13,"is_html":13,"is_migration":13},"office-bookshelf","2025-04-30T16:13:56.191Z","2026-07-31T04:45:53.579Z","2026-07-31T04:43:21.182Z","スタッフのおすすめでつくる、オフィスの漫画本棚",[178,180,182],{"id":179},"office",{"id":181},"hobby",{"id":33},[184,185,186],{"id":38},{"id":82},{"id":84},{"url":188,"height":189,"width":190},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc265bf88145b4209b9b9b3e05d5ce1f9\u002Fbookshelf-1.jpg",3024,4032,"\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>","オフィスのリラックスルームに設けた、スタッフ推薦の漫画を集める本棚。漫画を選んだ理由や、Slackでの投票を取り入れた作品選びの仕組みを紹介します。",[194,196,198,200,202,204],{"id":195},"relax-room",{"id":197},"moving2023-lookback",{"id":199},"toilet-sign",{"id":201},"office-humansensor",{"id":203},"moving2023-interview-2",{"id":205},"moving2023-interview-1",{"id":207,"createdAt":208,"updatedAt":209,"publishedAt":210,"revisedAt":209,"title":211,"tag":212,"recommended_articles":221,"eyecatch":227,"heading_list":45,"content2":231,"description":232,"related_articles":233,"recruit":13,"is_html":13,"is_migration":13},"corporate-ekiden2026","2026-05-13T03:02:02.207Z","2026-09-01T05:26:37.145Z","2026-05-14T07:11:43.569Z","今年も企業対抗駅伝に出場しました",[213,215,217,218,219],{"id":214},"club",{"id":216},"exercise",{"id":15},{"id":33},{"id":220},"look-back",[222,223,225],{"id":84},{"id":224},"nenga2026",{"id":226},"birdwatch-camera",{"url":228,"height":229,"width":230},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fb1ebcac8eef144d487735eec83906973\u002F%E9%9B%86%E5%90%88%E5%86%99%E7%9C%9F.jpg",4284,5712,"\u003Cp>昨年に続き、今年も\u003Cstrong>企業対抗駅伝に参加\u003C\u002Fstrong>しました。\u003Cbr>\u003Cstrong>S2 では昨年から「S2 Running Club」、通称「S2RC」というランニングチームを結成\u003C\u002Fstrong>し、企業対抗駅伝に出場しています。\u003Cbr>\u003Cbr>この記事では、\u003Cstrong>2 年目となる今年の準備と、大会当日の様子\u003C\u002Fstrong>を振り返りたいと思います。\u003C\u002Fp>\u003Cp>\u003Cspan style=\"color: #949494\">昨年の様子はこちら。\u003C\u002Fspan>\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\u002Fcorporate-ekiden2025\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fcorporate-ekiden2025%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=\"h93f3e97420\">企業対抗駅伝とは\u003C\u002Fh2>\u003Cp>企業対抗駅伝はその名の通り、\u003Cstrong>企業ごとにチームを組んで参加する駅伝イベント\u003C\u002Fstrong>です。\u003Cbr>東京大会と大阪大会があり、今年の東京大会は 5 月 10 日にお台場・セントラル広場で開催されました。\u003Cbr>今回は \u003Cstrong>650 チーム以上がエントリー\u003C\u002Fstrong>したそうです。\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\u002Fs6Lxedlcl7c?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>\u003Ca href=\"https:\u002F\u002Fsportsone.jp\u002Fed\u002F2026\u002Fevent_tokyo.html\" target=\"_blank\" rel=\"noopener noreferrer\">種目\u003C\u002Fa>は以下の 3 つ。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>企業対抗駅伝(5 km× 5 区間＝計 25km)\u003C\u002Fstrong>\u003Cul>\u003Cli>男性の部\u003C\u002Fli>\u003Cli>女性の部\u003C\u002Fli>\u003Cli>男女混合の部\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>企業対抗ファン駅伝(2 km× 3 区間＝計 6km)\u003C\u002Fstrong>\u003Cul>\u003Cli>男性の部\u003C\u002Fli>\u003Cli>女性の部\u003C\u002Fli>\u003Cli>男女混合の部\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>エンジョイリレーマラソン(1 周 2 km× 10 周＝計 20km)\u003C\u002Fstrong>\u003Cul>\u003Cli>一般男性の部\u003C\u002Fli>\u003Cli>女性の部\u003C\u002Fli>\u003Cli>一般男女混合の部\u003C\u002Fli>\u003Cli>企業対抗の部\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>弊社は昨年に続き、エンジョイリレーマラソンに 6 人で参加\u003C\u002Fstrong>しました。\u003Cstrong>1 周 2km のコースをチームで 10 周し、合計 20km を走る種目\u003C\u002Fstrong>。スタートは 14 時からで、午後に行われる部門です。\u003C\u002Fp>\u003Cp>昨年は初参加だったこともあり、普段からランニングをしているメンバーが多めに走ってくれたのですが、今年は一度走ってみて「意外といけそう」という感覚もあり、1 人 2 周を走るメンバーが増えました。\u003C\u002Fp>\u003Cp>\u003Cstrong>計測は IC チップ\u003C\u002Fstrong>で行われます。チップは大会側で用意される襷に入っており、ゴール後にはタイムが記録された\u003Cstrong>完走証\u003C\u002Fstrong>も発行されます。\u003Cbr>さらに、順位表彰のほか、業界別・企業規模別・年代別・役職別などのランキングもあり、結果は公式サイトで公開されているそうです。\u003C\u002Fp>\u003Ch2 id=\"h920f835f68\">チームTシャツを今年仕様にアップデート\u003C\u002Fh2>\u003Cp>\u003Cstrong>昨年の企業対抗駅伝では、S2RC のチーム T シャツを制作\u003C\u002Fstrong>しました。\u003Cbr>2 年目となる今回は、その T シャツに\u003Cstrong>追加でプリント\u003C\u002Fstrong>を施し、\u003Cstrong>アップデート\u003C\u002Fstrong>することに。\u003Cbr>デザインは、昨年に続き弊社デザインチームが考案しています。\u003Cbr>\u003Cbr>胸元には、S2RC のロゴの下に\u003Cstrong>小さな星を追加\u003C\u002Fstrong>しました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F7262f64e33f345b4bc9ac33d6d1272c9\u002F%E6%98%9F%E3%81%AE%E3%83%9E%E3%83%BC%E3%82%AF.jpeg?w=400&h=533\" alt=\"\" width=\"400\" height=\"533\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>この星は、\u003Cstrong>ランニングイベントへの参加回数\u003C\u002Fstrong>を表しています。参加するたびに星を増やしていく想定で、今年は昨年分の星をひとつ追加しました。\u003C\u002Fp>\u003Cp>背面には、もともとプリントされていた「S2RC」の文字に加えて、\u003Cstrong>「S」の上に点線のプリントを追加\u003C\u002Fstrong>しました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F2ae39d17ee1b43b3aa3f20571ceda5ee\u002F%E8%83%8C%E4%B8%AD%E3%81%AE%E3%83%97%E3%83%AA%E3%83%B3%E3%83%88.jpeg\" alt=\"背中のプリント\" width=\"2000\" height=\"2667\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>去年、背面の「S2RC」をプリントしたときは、\u003Cstrong>Tシャツの生地、文字の位置や線の太さ、色を各メンバーがそれぞれ選んだのですが\u003C\u002Fstrong>、今年から加わった新メンバーも、同じように自分の T シャツをカスタマイズしてプリントしました。\u003Cbr>\u003Cbr>追加した点線も、「S」の上に重ねることは決まっていますが、\u003Cstrong>色や細かな位置は自由\u003C\u002Fstrong>です。\u003Cbr>元の「S」の真ん中に重ねる人もいれば、端に寄せてプリントする人もいます。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4ce61187c8a14844b5126de9147cc602\u002F%E5%8D%B0%E5%88%B7-1.jpg\" alt=\"\" width=\"5712\" height=\"4284\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1625201c658941d6ad48226c81143226\u002F%E5%8D%B0%E5%88%B7-2.jpg\" alt=\"\" width=\"4032\" height=\"3024\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Cstrong>同じチーム T シャツでありながら、よく見ると一枚ずつ仕上がりが違う\u003C\u002Fstrong>。\u003Cstrong>Tシャツごとにそれぞれの個性\u003C\u002Fstrong>が出ているのも、自分たちでプリントする面白さです。\u003Cbr>\u003Cbr>ちなみにプリント作業には、シルクスクリーンキット「\u003Ca href=\"https:\u002F\u002Fsurimacca.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">SURIMACCA\u003C\u002Fa>」を使用しました。\u003Cbr>SURIMACCA は、以前開催した\u003Cstrong>ファミリーデー\u003C\u002Fstrong>でも使ったのですが、T シャツやグッズを自分たちで作れるので、社内イベントとの相性がよく、今回の T シャツ制作でも活躍しました。\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\u002Ffamily-day-2\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Ffamily-day-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>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ffamily-day\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Ffamily-day%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=\"h821c40c86f\">大会当日\u003C\u002Fh2>\u003Cp>大会当日は、お台場・セントラル広場のガンダム前に集合しました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fe26d567b57194c91abb057573527fb78\u002F%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0.jpg?w=387&h=516\" alt=\"ガンダム前に集合\" width=\"387\" height=\"516\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>この日は雲ひとつない青空。日陰に入ると涼しさもありましたが、日向は太陽が眩しく、かなり暑く感じるコンディションでした。昨年は曇り空で風も強かったため、同じ会場でもかなり違う印象です。\u003Cbr>会場には、すでに多くの企業チームが集まっており、チームウェアや揃いのTシャツを着ている参加者も多く、企業対抗イベントらしい雰囲気があります。\u003Cbr>\u003Cbr>会場に着いたあとは、空いているスペースを見つけて待機場所を確保。着替えを済ませ、配布されたゼッケンをチームTシャツに安全ピンで留めていきます。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F7cedb2134ff9466b8bdc6b862cbd1d84\u002F%E3%82%BC%E3%83%83%E3%82%B1%E3%83%B3.JPG?w=900&h=600\" alt=\"\" width=\"900\" height=\"600\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>その後は、チーム内で出走順を確認。1 走目のメンバーは、スタートに向けてストレッチや準備運動を行います。\u003Cbr>他のメンバーも、自分の出番はまだ先なのに、なんとなくそわそわしながら体を伸ばしていました。\u003Cbr>\u003Cbr>14 時前になると、スタート地点に参加者が並び始めます。\u003Cstrong>前方には、速いペースで走る予定の人たちが並び、その後ろに各チームのランナー\u003C\u002Fstrong>が続いていきます。\u003Cbr>\u003Cbr>14 時 5 分、エンジョイリレーマラソンがスタートしました。\u003Cbr>コースは 1 周 2km。距離だけ見ると短く感じますが、実際に走ってみると\u003Cstrong>アップダウン\u003C\u002Fstrong>もあり、結構体力を使います。周りにも多くのランナーがいるため、ペースに惑わされず、自分のリズムで走ることも大切です。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F8a5532e60d7c4f5f994344a01f113f92\u002F%E4%BC%81%E6%A5%AD%E5%AF%BE%E6%8A%97%E9%A7%85%E4%BC%9D.jpg\" alt=\"\" width=\"4284\" height=\"3777\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>走り終えたメンバーから次のメンバーへ、順番に襷をつないでいきます。\u003Cbr>差し入れを持って\u003Cstrong>応援に駆けつけてくれたスタッフ\u003C\u002Fstrong>もいて、コース脇から旗を振ってランナーを応援してくれました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1a2e3cb5b86542dea08d27381c5154b1\u002F%E5%BF%9C%E6%8F%B4.JPG\" alt=\"\" width=\"3120\" height=\"2080\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>結果は、\u003Cstrong>1 時間49分16秒\u003C\u002Fstrong>。\u003Cbr>\u003Cbr>\u003Cstrong>昨年の記録は 1 時間57分11秒\u003C\u002Fstrong>だったので、約 8 分タイムを縮めることができました。\u003Cbr>タイムが縮まったことも嬉しい結果ですが、何より無事誰も倒れることなく、最後まで走り切れたのがよかったです。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F03e98cede20c4668a4249a07043dee07\u002F%E5%AE%8C%E8%B5%B0%E8%A8%BC.jpg\" alt=\"\" width=\"3072\" height=\"2349\">\u003C\u002Ffigure>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>今年も無事に、企業対抗駅伝を走り切ることができました。\u003Cbr>昨年よりタイムも縮まり、2 年目としてはいい結果になったと思います。走り終わったあとには、\u003Cstrong>来年はメンバーを増やして、チームを分けて出場してみるのもよさそう\u003C\u002Fstrong>だという話も出ていました。\u003Cbr>\u003Cbr>企業対抗駅伝に限らず、参加できそうなランニングイベントがあれば、また挑戦してみたいところです。\u003Cbr>チームで集まって、公園などで走る機会も作れたらと思います。\u003Cbr>\u003Cbr>S2 では、\u003Cstrong>ランニング部以外にもいろいろな部活動が有志で活動\u003C\u002Fstrong>しています。\u003Cbr>仕事以外のコミュニケーションの場として、こうした活動も無理なく続いていくとよさそうです。\u003C\u002Fp>","昨年に続き、企業対抗駅伝に参加しました。チームTシャツのアップデートやシルクスクリーンプリントの様子、大会当日の流れを振り返ります。",[234,235,237,239],{"id":165},{"id":236},"yokohama-marathon-2025",{"id":238},"trail-running",{"id":167},{"id":82,"createdAt":241,"updatedAt":242,"publishedAt":243,"revisedAt":242,"title":244,"tag":245,"recommended_articles":252,"eyecatch":256,"heading_list":45,"content2":260,"description":261,"related_articles":262,"recruit":13,"is_html":13,"is_migration":13},"2026-03-17T06:24:17.497Z","2026-09-01T05:27:11.471Z","2026-03-30T08:35:07.001Z","Web サイトを使った謎解きを作ってみた",[246,248,250,251],{"id":247},"game",{"id":249},"tea",{"id":181},{"id":27},[253,254,255],{"id":38},{"id":96},{"id":40},{"url":257,"height":258,"width":259},"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サイトを使った謎解きの制作プロセスまでを紹介。構成設計や実装、デバッグの工夫をまとめています。",[263,264,265,266,268,269],{"id":51},{"id":201},{"id":199},{"id":267},"game-development",{"id":124},{"id":58},{"contents":271,"totalCount":289,"offset":290,"limit":291},[272,281],{"id":58,"eyecatch":273,"publishedAt":277,"createdAt":278,"title":279,"is_html":13,"content2":280},{"url":274,"height":275,"width":276},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1f7ae268ef684c979b3aef3b51d183a4\u002Fevent.jpg",4000,6000,"2026-01-28T07:13:03.163Z","2026-01-16T04:00:35.807Z","AI エージェントを社内で試して見えてきたこと","\u003Cp>2 年間ほぼ毎日同じ時間に同じチョコザップに通い続けているのですが、いろんな人が来なくなりました。\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>今回は弊社の maya が、\u003Cstrong>社内で実施した「event-ai-agent」\u003C\u002Fstrong>の取り組みをもとに、\u003Cstrong>「AI エージェント」\u003C\u002Fstrong>について話しました。\u003C\u002Fp>\u003Chr>\u003Cp>\u003Cbr>最近、AI の話題の中で\u003Cstrong>「AI エージェント」\u003C\u002Fstrong>という言葉を目にする機会が増えてきました。\u003Cbr>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ffeatures\u002Fcopilot?locale=ja\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub Copilot\u003C\u002Fa> のような補完型 AI や \u003Ca href=\"https:\u002F\u002Fchatgpt.com\u002Fja-JP\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">ChatGPT\u003C\u002Fa> のようなチャット型 AI とは異なり、\u003Cstrong>指示を与えると自律的にコードを書き、タスクを進めていくタイプの AI\u003C\u002Fstrong> で、\u003Ca href=\"https:\u002F\u002Fdevin.ai\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">Devin\u003C\u002Fa> や \u003Ca href=\"https:\u002F\u002Fclaude.com\u002Fproduct\u002Foverview\" target=\"_blank\" rel=\"noopener noreferrer\">Claude Code\u003C\u002Fa> などが有名です。\u003C\u002Fp>\u003Cp>こうした AI は、便利そうに感じる一方で、実際にどこまで任せられるのか、どんな場面で使えるのかは、触ってみないと分からない部分が多いのも事実です。\u003C\u002Fp>\u003Cp>S2 には、コードを書くこと自体が好きだったり、自分でやったほうが速いと感じる人が多くいます。また、自社に権利のないデータや取り扱いに注意が必要な情報を扱う仕事が多いこともあり、\u003Cstrong>AI に任せることに対して慎重な感覚\u003C\u002Fstrong>を持っている人も少なくありません。\u003Cbr>\u003Cbr>それでも今後、エージェント型 AI は広まっていくと考えられ、うまく使えれば作業の工数を抑えられる可能性もあります。そこで\u003Cstrong>「社内で AI エージェントをちゃんと使ってみる時間を作れないか」\u003C\u002Fstrong>という話が社内で持ち上がりました。\u003C\u002Fp>\u003Cp>こうして立ち上がったのが、\u003Cstrong>1 か月間にわたって取り組んだ社内企画「event-ai-agent」\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Ch2 id=\"he4fe40370a\">AI エージェントとは\u003C\u002Fh2>\u003Cp>まずは、今回の企画の前提となる AI エージェントについて整理しておきます。\u003Cbr>\u003Cbr>ChatGPT のようなチャット型 AI は、チャットでやり取りした内容に対して、その場で回答を返す AI です。質問に答えたり、相談に応じたりといった使い方が中心になります。\u003C\u002Fp>\u003Cp>対して AI エージェントは、\u003Cstrong>目標を与えると、その達成に向けて自律的に行動する AI \u003C\u002Fstrong>です。人が細かく手順を指示しなくても、状況を判断しながら処理を進め、コードを書いたりシステムに手を入れたりしながら、\u003Cstrong>複数の工程を含むタスクを一連の流れとして完了\u003C\u002Fstrong>させます。\u003C\u002Fp>\u003Cp>AI エージェントの主な特徴は、次のとおりです。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>自律性(Autonomy)\u003C\u002Fstrong>\u003Cbr>人の指示を逐一待たずに、自分で判断して行動できる\u003C\u002Fli>\u003Cli>\u003Cstrong>目標指向(Goal-oriented)\u003C\u002Fstrong>\u003Cbr>与えられた目標を達成するために計画を立てる\u003C\u002Fli>\u003Cli>\u003Cstrong>環境認識(Perception)\u003C\u002Fstrong>\u003Cbr>周囲の状況やデータを認識・理解する\u003C\u002Fli>\u003Cli>\u003Cstrong>行動実行(Action)\u003C\u002Fstrong>\u003Cbr>ツールや API を使って実際に作業を行う\u003C\u002Fli>\u003Cli>\u003Cstrong>学習能力(Learning)\u003C\u002Fstrong>\u003Cbr>経験から学び、振る舞いを改善していく\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"h0c83bdc0b0\">AI エージェントができること\u003C\u002Fh3>\u003Cp>AI エージェントは、さまざまな役割を担うことができます。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>カスタマーサポートエージェント\u003C\u002Fstrong>\u003Cbr>顧客の質問に対応し、問題解決までを行う\u003C\u002Fli>\u003Cli>\u003Cstrong>データ分析エージェント\u003C\u002Fstrong>\u003Cbr>データを収集・分析し、レポートを作成する\u003C\u002Fli>\u003Cli>\u003Cstrong>コーディングエージェント\u003C\u002Fstrong>\u003Cbr>プログラムを書いたり、バグを修正したりする\u003C\u002Fli>\u003Cli>\u003Cstrong>タスク管理エージェント\u003C\u002Fstrong>\u003Cbr>スケジュールを管理し、リマインダーを送る\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>MCP(Model Context Protocol)\u003C\u002Fstrong> を利用することで、\u003Cstrong>外部のツールやサービスと連携した処理も可能\u003C\u002Fstrong>です。\u003Cbr>例えば、\u003Ca href=\"https:\u002F\u002Fwww.figma.com\u002Fja-jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">Figma\u003C\u002Fa> の MCP を読み込ませてデザインデータを参照したり、Gmail と連携してメールを送信したりといったこともできます。\u003C\u002Fp>\u003Ch2 id=\"h7907b76c82\">event-ai-agent\u003C\u002Fh2>\u003Cp>event-ai-agent は、\u003Cstrong>社内で AI エージェントを一定期間実際に使い、その使いどころや制約を確認するために行った取り組み\u003C\u002Fstrong>です。\u003Cbr>個人で断続的に試すのではなく、\u003Cstrong>期間を区切り、参加者同士で状況を共有\u003C\u002Fstrong>しながら進める形にしました。参加は希望制とし、関心のあるメンバーがそれぞれのペースで取り組めるようにしています。\u003C\u002Fp>\u003Cp>概要は以下のとおりです。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>実施期間\u003C\u002Fstrong>：約 1 か月\u003C\u002Fli>\u003Cli>\u003Cstrong>使用ツール\u003C\u002Fstrong>：\u003Ca href=\"https:\u002F\u002Fclaude.ai\u002Flogin\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Claude Code\u003C\u002Fstrong>\u003C\u002Fa>\u003Cul>\u003Cli>検証は、社内で用意したサンドボックス環境(EC2)上で実施\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>進め方\u003C\u002Fstrong>\u003Cul>\u003Cli>期間中、各自で AI エージェントを使った検証を実施\u003C\u002Fli>\u003Cli>Slack 上の専用チャンネルで、検証内容や気づいたことを随時共有\u003C\u002Fli>\u003Cli>\u003Cstrong>週 1 回・30 分の共有会をオンラインで開催\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>期間内に 1 日、オフラインで集まり集中的に検証\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>オフラインでの集中検証日には、次のレギュレーション\u003C\u002Fstrong>を設けました。\u003C\u002Fp>\u003Cul>\u003Cli>人が行うのは AI エージェントへの指示出しのみ\u003C\u002Fli>\u003Cli>ソースコードを人が直接書くことは禁止\u003C\u002Fli>\u003Cli>指示用のテキストファイル作成は可\u003C\u002Fli>\u003C\u002Ful>\u003Cp>また、本企画で設定していた\u003Cstrong>目的\u003C\u002Fstrong>は次の 3 点です。\u003C\u002Fp>\u003Cul>\u003Cli>エージェント型 AI にふれるきっかけを作る\u003C\u002Fli>\u003Cli>できること・できないことを経験として知る\u003C\u002Fli>\u003Cli>今後の案件に活用できそうな可能性を探る\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"h55d45458f2\">事例紹介\u003C\u002Fh2>\u003Cp>それでは、期間中に参加者が試してみた事例について紹介します。\u003C\u002Fp>\u003Ch3 id=\"h3b8cb5ca5b\">事例 1：API 仕様書を渡してフロントエンドを作らせてみる\u003C\u002Fh3>\u003Cp>この事例では、\u003Cstrong>AI エージェントにどのような情報を渡せば、どこまでアウトプットできるのか\u003C\u002Fstrong>を意識して試してみました。\u003C\u002Fp>\u003Cp>API 仕様書を入力として渡し、「この仕様をもとにフロントエンドを作ってほしい」と指示しました。AI エージェントに依頼した内容は次のとおりです。\u003C\u002Fp>\u003Cul>\u003Cli>作業用のブランチを作成する  \u003C\u002Fli>\u003Cli>簡単な API を実装する  \u003C\u002Fli>\u003Cli>実装後に動作確認を行う  \u003C\u002Fli>\u003Cli>README を作成する  \u003C\u002Fli>\u003Cli>.gitignore を設定する  \u003C\u002Fli>\u003Cli>成果物を commit し、リポジトリに push する  \u003C\u002Fli>\u003C\u002Ful>\u003Cp>実装手順の分解や、Git 操作を含めた作業はすべて AI エージェントが行っています。\u003Cbr>その結果、生成されたのが下のアプリケーションです。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F706b8cb607f84b058316d5782a0b380b\u002F%E4%BA%8B%E4%BE%8B-1.png?w=1000&h=639\" alt=\"生成されたフロントエンド\" width=\"1000\" height=\"639\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>仕様書という限られた情報からでも、フロントエンドの形を容易に作れることがわかります。\u003C\u002Fp>\u003Ch3 id=\"h1f5ee5b46a\">事例 2：Auth0 のエクスポートデータを変換するプログラム\u003C\u002Fh3>\u003Cp>\u003Cstrong>Auth0 からエクスポートしたデータを ion 形式に変換するプログラム\u003C\u002Fstrong>の作成を AI エージェントに任せました。\u003Cbr>変換処理の実装に加えて、\u003Cstrong>テストデータの作成までまとめて行ってくれた\u003C\u002Fstrong>点は便利に感じられました。\u003Cbr>\u003Cbr>一方で、最初に生成されたプログラムではパフォーマンス面に問題があり、特に処理の中で \u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FJq_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E)\" target=\"_blank\" rel=\"noopener noreferrer\">jq\u003C\u002Fa> の呼び出し回数が非常に多い点が気になりました。\u003C\u002Fp>\u003Cp>改善方法を指示することで、より良いプログラムにはなりましたが、\u003Cstrong>現状のまま実案件で使うのは難しそう\u003C\u002Fstrong>に感じてしまいました。\u003C\u002Fp>\u003Ch3 id=\"h69e5e36448\">事例 3：古いメモデータの移行を手伝ってもらう\u003C\u002Fh3>\u003Cp>業務とは直接関係ないものの、日常的に発生しがちな作業として、古いメモデータの移行を AI エージェントに任せてみた事例です。\u003C\u002Fp>\u003Cp>\u003Cstrong>かんたん Markdown 形式で保存していたメモデータを、Markdown ファイルとして整理・変換する作業\u003C\u002Fstrong>を行っています。変換処理はまとめて AI エージェントに指示しました。\u003C\u002Fp>\u003Cp>その結果、\u003Cstrong>全体の大部分は問題なく変換\u003C\u002Fstrong>され、実用上は十分な精度で移行できました。特に、\u003Cstrong>ファイル名の正規化(NFD から NFC への変換)についても、指示だけで対応できた点は印象的\u003C\u002Fstrong>でした。正規化の考え方自体も、この過程で把握することができています。\u003C\u002Fp>\u003Cp>しかし、\u003Cstrong>画像の埋め込み部分については正しくパースできないケース\u003C\u002Fstrong>があり、いくつかのファイルは手動での確認が必要でした。\u003C\u002Fp>\u003Ch3 id=\"h8158e69e7a\">事例 4：積読管理\u003C\u002Fh3>\u003Cp>積読本を管理するための簡単な Web アプリ。\u003Cbr>\u003Cstrong>本棚のように本が並ぶ UI\u003C\u002Fstrong> にしたい、という指示を出したところ、\u003Cstrong>レイアウトや見た目も含めて実装\u003C\u002Fstrong>されています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F85cc7f4396fd4e29b5c69939d3218942\u002F%E7%A9%8D%E8%AA%AD%E7%AE%A1%E7%90%86.png?w=1000&h=808\" alt=\"積読管理\" width=\"1000\" height=\"808\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>途中一度動かなくなってしまい、その際、AI エージェントがかなりの勢いでソースコード全体を確認し始めたため少し不安になりましたが、2 回ほど修正を重ねることで最終的には正常に動作する状態になりました。\u003C\u002Fp>\u003Ch3 id=\"hab78e183bc\">事例 5：競馬レース予想アプリ\u003C\u002Fh3>\u003Cp>競馬のレース条件を入力すると、AI が予想結果を生成するアプリです。\u003C\u002Fp>\u003Cp>レースの種類や距離、出走頭数を入力し、あわせて各馬の名前を登録したうえで「レースを登録」すると、\u003Cstrong>AI が予想\u003C\u002Fstrong>を行います。\u003Cbr>単勝・複勝といった基本的な馬券に加え、三連単や三連複など、頭数や順序によって成立条件が変わる馬券についても、\u003Cstrong>あらかじめルールを伝えたうえで結果を出す構成\u003C\u002Fstrong>になっています。\u003C\u002Fp>\u003Cp>予想を実行すると、\u003Cstrong>UI 上で馬が走る簡単なアニメーションが表示\u003C\u002Fstrong>され、その後に予想結果が表示されます。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ff43390b16e574027a75bf6ab2d8c2646\u002F%E4%BA%88%E6%83%B3%E7%94%BB%E9%9D%A2.png?w=1000&h=809\" alt=\"入力と結果画面\" width=\"1000\" height=\"809\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1a2c9e8778004d0fb0b7f57fe5995b2e\u002F%E3%83%AC%E3%83%BC%E3%82%B9%E4%B8%AD.png?w=1000&h=655\" alt=\"レース中\" width=\"1000\" height=\"655\">\u003C\u002Ffigure>\u003Ch2 id=\"h450f1919de\">オフライン会について\u003C\u002Fh2>\u003Cp>オフライン会では、\u003Cstrong>X を模倣したアプリ\u003C\u002Fstrong>を作る取り組みを行いました。\u003Cbr>やっていいのは \u003Cstrong>AI エージェントへの指示出しのみ\u003C\u002Fstrong>とし、フロントエンド・バックエンドを含むコードはすべて Claude Code に書かせる、というレギュレーションを設けています。\u003C\u002Fp>\u003Cp>参加者それぞれが自分の環境で AI エージェントに指示を出し、完成したものを持ち寄って見せ合いました。\u003Cstrong>一発の指示でどこまで書かせられるかが重要なポイントとなり、細かい修正を重ねるのは難しい\u003C\u002Fstrong>と感じる場面もありました。\u003C\u002Fp>\u003Cp>私が作ったものはこちら。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fe95d1594116a43b6b2d76a0a56c62312\u002F%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E7%94%BB%E9%9D%A2.png?w=1000&h=659\" alt=\"ログイン画面\" width=\"1000\" height=\"659\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F390ced090a264df1b98fecdaa62d38bd\u002F%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%A9%E3%82%A4%E3%83%B3.png?w=1000&h=665\" alt=\"タイムライン\" width=\"1000\" height=\"665\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>ファンタジーなデザインで、と伝えたところ、この見た目になりました。\u003Cbr>投稿や削除に加えて、フォロー・アンフォロー、プロフィール編集、検索機能まで、\u003Cstrong>必要な機能は一通りちゃんと実装\u003C\u002Fstrong>されています。\u003C\u002Fp>\u003Ch2 id=\"h40eb6b6976\">AI エージェントと S2 の今後\u003C\u002Fh2>\u003Cp>今回利用していた \u003Ca href=\"https:\u002F\u002Fclaude.com\u002Fja-jp\u002Fpricing\" target=\"_blank\" rel=\"noopener noreferrer\">Clauded の Max プラン\u003C\u002Fa>については、上限まで使い切る参加者はいませんでした。\u003Cbr>今後は、\u003Cstrong>API キーを各人に発行し、使用量を把握しながら運用していく\u003C\u002Fstrong>つもりです。従量課金ではありますが、事前チャージ制のため、コスト面では比較的管理しやすいと考えています。\u003C\u002Fp>\u003Cp>また、全体向けに AI エージェント利用時の\u003Cstrong>ガイドラインを作成\u003C\u002Fstrong>し、\u003Cstrong>セキュリティや取り扱いのルールを整理\u003C\u002Fstrong>していこうと思っています。\u003C\u002Fp>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>event-ai-agent を通して、AI エージェントを実務に近い形で試すことができました。\u003C\u002Fp>\u003Cp>当初は\u003Cstrong>「まずは触ってみるきっかけを作る」ことを主な目的\u003C\u002Fstrong>としていましたが、実際に使ってみる中で、\u003Cstrong>想像以上に実用的\u003C\u002Fstrong>だと感じました。\u003Cbr>\u003Cstrong>定例や共有の場を設けたことで、「どう使っていけそうか」を継続的に話せた点も良かった\u003C\u002Fstrong>と思います。週 1 回の定例後に、Slack チャンネルでのやり取りが活発になる様子も見られました。\u003C\u002Fp>\u003Cp>ですが、できるだけセキュアに使うための環境づくりやガイドライン整備については、思っていた以上に手間がかかることもわかりました。\u003C\u002Fp>\u003Cp>\u003Cstrong>自分でコードを書かなくても、フロントエンドからバックエンドまで含めて、実際に動くものが一通りそろうのは大きな利点\u003C\u002Fstrong>だと感じています。ただし、まったく新しい仕組みを一から作るのは難しそうで、一般的によくある構成やパターンを持つものほど相性が良い、という印象もあります。\u003C\u002Fp>\u003Cp>今回の参加者は普段からプログラミングを書いている人ばかりでしたが、必ずしもそうでない人でも、日本語で指示を整理して伝えることで、さまざまなものが作れる可能性を感じました。\u003C\u002Fp>\u003Cp>今後は、社内でより多くの立場の人にも実際に使ってみてほしいと思っています。\u003C\u002Fp>",{"id":282,"eyecatch":283,"publishedAt":285,"createdAt":286,"title":287,"is_html":13,"content2":288},"internship-2025",{"url":284,"height":190,"width":189},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F5fe12c6df10a4b62a1cd08b09d76613b\u002F%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%83%E3%83%97.jpg","2025-09-29T05:02:40.320Z","2025-09-08T13:41:31.520Z","2025年もインターンシップを実施しました","\u003Cp>\u003Cstrong>今年で、インターンシップを始めて10年目\u003C\u002Fstrong>を迎えました。\u003Cbr>コロナ禍の期間は実施を見送ったものの、それ以外は毎年欠かさず続けています。\u003C\u002Fp>\u003Cp>学生のみなさんにとっては、授業とはまた違うかたちでプログラミングやWeb制作に触れる機会。\u003Cbr>私たちにとっても、自分たちの仕事をあらためて言語化したり、教える立場として向き合ったりする良い機会になっています。\u003C\u002Fp>\u003Cp>今年も 2 週間のプログラムを用意し、2 名の学生に参加してもらいました。\u003Cbr>そのうち 1 名は体調不良で後半の参加が叶わなかったものの、もう 1 名は最後まで参加し、予定していた内容を一通り体験してもらいました。\u003Cbr>\u003Cbr>ということで、\u003Cstrong>今年もインターンシップの様子を紹介\u003C\u002Fstrong>したいと思います。\u003C\u002Fp>\u003Cp>これまでのインターンシップの詳細については以下をご覧ください。\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\u002Finternship-2024\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Finternship-2024%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Finternship-2023\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Finternship-2023%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>\u003Ch2 id=\"hefb7c37635\">実施内容\u003C\u002Fh2>\u003Cp>今年のインターンは、例年と同じく \u003Cstrong>2 週間のスケジュールで実施し、2 名の学生を受け入れました\u003C\u002Fstrong>。\u003Cbr>それぞれに対して\u003Cstrong>同じカリキュラムを個別に進めてもらう形式で、期間中は並行してサポート\u003C\u002Fstrong>を行いました。\u003C\u002Fp>\u003Ch3 id=\"hdbd0be846a\">1週目：Web開発の基礎を体験\u003C\u002Fh3>\u003Cp>\u003Cstrong>プログラミングを通じて Web 開発の仕事を知ってもらうことを目的\u003C\u002Fstrong>に、まずは基礎的なカリキュラムからスタートしました。\u003C\u002Fp>\u003Cp>まずは JavaScript の文法演習や開発環境の構築に取り組み、続いて \u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FSQL\" target=\"_blank\" rel=\"noopener noreferrer\">SQL\u003C\u002Fa> によるデータベース操作、\u003Ca href=\"https:\u002F\u002Fexpressjs.com\u002Fja\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">Express\u003C\u002Fa> を使った HTTP 通信、\u003Ca href=\"https:\u002F\u002Fejs.co\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">ejs\u003C\u002Fa> を用いた動的 Web ページ制作へと、一つずつ段階的に進めていきました。\u003Cbr>\u003Cstrong>Web アプリケーションの構成要素を順を追って実装\u003C\u002Fstrong>することで、仕組みへの理解を深めていきます。\u003C\u002Fp>\u003Cp>その上で学んだ内容を活かし、\u003Cstrong>生徒名簿のようなシンプルな Web アプリを開発\u003C\u002Fstrong>。データベースとの連携やフォーム処理などを実際に手を動かしながら学ぶことで、Web サービス制作の基本的な流れを掴んでもらいました。\u003C\u002Fp>\u003Cp>また、コードの管理には、今年も社内で利用している \u003Ca href=\"https:\u002F\u002Fabout.gitlab.com\u002Fja-jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">GitLab\u003C\u002Fa> を使用。\u003Cbr>初期の環境構築やアプリ制作の段階からリポジトリを用意し、\u003Cstrong>実際のプロジェクトに近い形式でコードを管理・運用する体験\u003C\u002Fstrong>も取り入れました。\u003C\u002Fp>\u003Ch3 id=\"h565cc93764\">2週目：実践的なアプリ制作に挑戦\u003C\u002Fh3>\u003Cp>後半は実践編として、\u003Cstrong>“X(旧Twitter)風” の掲示板アプリの開発\u003C\u002Fstrong>にチャレンジしてもらいました。\u003C\u002Fp>\u003Cp>この週から\u003Cstrong>体調不良により 1 名が不参加\u003C\u002Fstrong>となったため、残る 1 名とは 1on1 の形式で進行。マンツーマンでサポートを行いながら、要所では必要に応じてフォローを入れつつ、基本的には自力での実装に取り組んでもらいました。\u003C\u002Fp>\u003Cp>\u003Cstrong>完成したアプリは社内でも試用\u003C\u002Fstrong>してもらい、\u003Cstrong>フィードバックをもとに軽微なバグ修正などのメンテナンス\u003C\u002Fstrong>にも挑戦しました。\u003Cbr>開発から公開、改善までを通して経験することで、Web サービスづくりの流れを体感できたのではないかと思います。\u003C\u002Fp>\u003Ch3 id=\"h5ef7d69a3b\">成果物\u003C\u002Fh3>\u003Cp>\u003Cstrong>ログイン機能から投稿・閲覧・検索・削除まで、シンプルながら必要な機能を備えた X(旧Twitter)風の Web アプリケーションを構築\u003C\u002Fstrong>しました。\u003Cbr>以下では、画面とあわせて実装した機能を簡単にご紹介します。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"h4a79609b80\">\u003Cstrong>ログイン機能\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fd59bb6af2ef34d94a2b6487e1f39da53\u002F%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E7%94%BB%E9%9D%A2.png?w=1200&h=656\" alt=\"ログイン画面\" width=\"1200\" height=\"656\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>メールアドレスとパスワードでログインするシンプルな認証画面。HTML のバリデーション機能を活用し、不正な入力には即時で警告が表示されるようになっています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ff1ae26cfa358415d814dbbf69cbd7f57\u002F%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3.png?w=1200&h=651\" alt=\"バリデーション対応\" width=\"1200\" height=\"651\">\u003Cfigcaption>バリデーション例：「hogehoge」ではメールアドレスとして不正扱いに。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"h89b8caa6ca\">\u003Cstrong>タイムラインと投稿\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>ログイン後は\u003Cstrong>タイムライン画面\u003C\u002Fstrong>が表示され、\u003Cstrong>左側には投稿欄と検索機能\u003C\u002Fstrong>を配置。レスポンシブにも対応しています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F72441e99c67c49bca8dc176f83d6a6d3\u002F%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%A9%E3%82%A4%E3%83%B3.png?w=3000&h=1771\" alt=\"ホーム画面\" width=\"3000\" height=\"1771\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>投稿は時系列で右側に表示され、投稿者のメールアドレスと投稿内容、日時が確認できます。投稿ごとに\u003Cstrong>削除ボタンがあり、自身の投稿を取り消すことも可能\u003C\u002Fstrong>です。\u003Cbr>投稿者のメールアドレスをクリックすると、そのユーザーの投稿一覧と投稿数を確認できるページに遷移します。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fd69f0f78231d4e6dbba5e4d25febe566\u002F%E6%8A%95%E7%A8%BF%E3%82%A8%E3%83%A9%E3%83%BC.png?w=400&h=485\" alt=\"投稿画面\" width=\"400\" height=\"485\">\u003C\u002Ffigure>\u003Cp>投稿欄では、\u003Cstrong>全角140文字以内／半角英数字280文字以内の制限\u003C\u002Fstrong>を設けており、\u003Cstrong>超過するとエラー\u003C\u002Fstrong>が表示されます。\u003Cbr>また、検索欄では\u003Cstrong>投稿のキーワード検索が可能\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>今年は画像投稿機能までは実装が間に合いませんでしたが、制限時間の中で基本的な機能を実装し、見た目にも動作にも違和感のないものに仕上げることができました。\u003Cbr>短期間でも“使って試せる”アウトプットとして形にできたことで、\u003Cstrong>本人にとっても達成感のあるチャレンジ\u003C\u002Fstrong>になったようです。\u003C\u002Fp>\u003Ch3 id=\"h2adf8a5f3f\">デザインワークショップ\u003C\u002Fh3>\u003Cp>1 週目の後半には、2 週目の \u003Cstrong>SNS アプリの設計を進めるうえで「どういうサービスにしたいか」を考えるデザインワークショップ\u003C\u002Fstrong>を実施しました。\u003Cbr>実際に開発するものとは異なるアイデアですが、もしゼロから SNS をつくるなら？という視点で、サービスの価値や特徴、機能の方向性などを自分たちで考えてもらうことが目的です。\u003C\u002Fp>\u003Cp>昨年は 1 名での実施でしたが、今年は 2 名での参加となり、\u003Cstrong>小さなチームとしての発想や議論\u003C\u002Fstrong>も交えながら進めてみることに。\u003C\u002Fp>\u003Cp>以下が\u003Cstrong>ワークショップの流れ\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>アイスブレイク\u003C\u002Fstrong>\u003Cul>\u003Cli>まずは場をほぐすために「生まれ変わったら何のフルーツになりたいか？」などの問いかけで会話をスタート\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>チームビルディング\u003C\u002Fstrong>\u003Cul>\u003Cli>チーム名を決めたり、自己紹介やルール設定を行い、チームとしての一体感を作ります\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>SNSの課題と魅力を考える\u003C\u002Fstrong>\u003Cul>\u003Cli>「今の SNS に感じる課題は？」「SNS の良いところは？」といった問いに対し、自分たちの考えを出し合いました\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>自分たちが作るSNSのコンセプト設計\u003C\u002Fstrong>\u003Cul>\u003Cli>上記の議論をもとに、「誰のために」「どんな課題を解決する」SNS なのかを定め、名前(ネーミング)まで考案\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>必要な機能の洗い出し\u003C\u002Fstrong>\u003Cul>\u003Cli>既存 SNS の機能を参考にしながら、サービスに必要な機能と“ウリ”となる要素をブレスト。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>付箋を使ってアイデアを出し合い、ホワイトボードに貼っていくなど、全体的に和やかな雰囲気で自由に意見交換しながら進めることができました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F5fe12c6df10a4b62a1cd08b09d76613b\u002F%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%83%E3%83%97.jpg\" alt=\"\" width=\"3024\" height=\"4032\">\u003C\u002Ffigure>\u003Ch2 id=\"hc25df95622\">学生の感想\u003C\u002Fh2>\u003Cp>2 週間にわたるインターンの中で、学生たちはアプリの設計や実装に取り組むだけでなく、初週にはデザインワークショップを通じて、サービスの構想やユーザー体験についても主体的に考えました。\u003Cbr>\u003Cstrong>ただ「動くものを作る」だけでなく、チームで検討し、発信するまでを経験\u003C\u002Fstrong>できたことで、実践的な学びの多い時間になったのではないでしょうか。\u003C\u002Fp>\u003Cp>今回は体調不良により 1 名は 2 週目に参加できませんでしたが、最終的にアプリを完成させた学生に、インターンを終えての率直な感想を聞いてみました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cblockquote>\u003Cp>最初はすごく緊張していたんですけど、実際にやってみると新鮮なことばかりで楽しかったです。\u003Cstrong>学校ではアルゴリズムの勉強が中心で、Web の開発はほとんど触れたことがなかった\u003C\u002Fstrong>ので、HTML や JavaScript、DB の操作など一から学ぶことが多くて、毎日吸収することばかりでした。\u003Cbr>EJS を使ってページを表示させたり、検索や削除機能をどう実装するか考えたりする中で、\u003Cstrong>普段使っていた Web サービスの裏側にはこんなにいろんな仕組みがあるんだと実感\u003C\u002Fstrong>できました。\u003C\u002Fp>\u003Cp>1 週目は 2 人で進めていたのが、途中から 1 人になったことで少し不安もありましたが、その分、自分のペースで進められたり、細かい部分まで丁寧に見てもらえたりしたので、すごくありがたかったです。\u003Cstrong>作業に集中できる環境\u003C\u002Fstrong>だったと思います。\u003Cbr>最終的にタイムラインの表示や投稿・削除・検索機能まで一通り実装できたときは、\u003Cstrong>達成感が大きかった\u003C\u002Fstrong>ですね。\u003Cstrong>自分で調べながら形にしていく経験を通して、Web 開発の面白さを実感でき、将来はこうした分野で働いてみたいという気持ちがより強くなりました\u003C\u002Fstrong>。\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp>\u003Cbr>開発にじっくり取り組む中で、技術的にも気持ちの面でも充実した時間を過ごせたようで、受け入れ側としても安心しています。\u003C\u002Fp>\u003Ch2 id=\"hca3a105c24\">今回のインターンを通じて\u003C\u002Fh2>\u003Cp>これまで弊社では基本的に 1 名体制でインターンを受け入れてきましたが、時期や体制によっては 2 名同時に受け入れた例もあります。\u003Cstrong>今回の担当者にとっては初めての 2 名体制での対応\u003C\u002Fstrong>となり、それぞれの進度や理解度に合わせたレビューや添削に時間がかかる場面もあったようです。\u003C\u002Fp>\u003Cp>途中で 1 名が体調不良により参加できなくなるという想定外の出来事もあり、学校とのやりとりなど対応に追われる場面もありました。とはいえ、\u003Cstrong>後半は 1on1 体制に切り替えることで、より細やかなサポートができたのは良い点\u003C\u002Fstrong>だったと感じています。\u003C\u002Fp>\u003Cp>こうした経験を踏まえ、今後は 2 名体制での受け入れも見据えながら、より柔軟で実りあるインターンの機会を整えていければと考えています。\u003C\u002Fp>\u003Cp>私たちがインターンを続けているのは、採用のためだけではありません。\u003Cstrong>Web 制作やプログラミングの現場に触れることで、この仕事の面白さや可能性を知ってもらう\u003C\u002Fstrong>。その体験が、学生の皆さんの\u003Cstrong>未来の選択肢を広げるきっかけ\u003C\u002Fstrong>になればと願っています。\u003C\u002Fp>\u003Cp>\u003Cstrong>今後も短い期間でも学生にとって価値ある時間となるよう、無理のないかたちで続けていければと思います。\u003C\u002Fstrong>\u003C\u002Fp>",6,0,2,{"contents":293,"totalCount":300,"offset":290,"limit":301},[294,296,298],{"id":138,"eyecatch":295,"publishedAt":141,"createdAt":139,"title":142,"is_html":13,"content2":157},{"url":154,"height":155,"width":156},{"id":20,"eyecatch":297,"publishedAt":23,"createdAt":21,"title":24,"is_html":13,"content2":47},{"url":42,"height":43,"width":44},{"id":36,"eyecatch":299,"publishedAt":67,"createdAt":65,"title":68,"is_html":13,"content2":89},{"url":86,"height":87,"width":88},180,3,{"contents":303,"totalCount":510,"offset":290,"limit":511},[304,306,307,310,312,314,315,318,321,324,327,330,332,335,337,340,342,345,348,350,353,356,358,361,363,366,369,371,374,377,380,383,385,387,389,392,395,397,399,402,405,408,411,414,417,420,423,425,428,431,434,436,439,442,445,448,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507],{"id":27,"name":305},"AI",{"id":10,"name":12},{"id":308,"name":309},"tool","ツール",{"id":179,"name":311},"オフィス",{"id":31,"name":313},"社内案件",{"id":15,"name":17},{"id":316,"name":317},"iot","IoT",{"id":319,"name":320},"art","アート",{"id":322,"name":323},"moving","引越し",{"id":325,"name":326},"picture","映像",{"id":328,"name":329},"plant","植物",{"id":29,"name":331},"社員旅行",{"id":333,"name":334},"health","健康",{"id":216,"name":336},"運動",{"id":338,"name":339},"bicycle-club","自転車部",{"id":33,"name":341},"PR",{"id":343,"name":344},"interview","Interview",{"id":346,"name":347},"recruiting","採用",{"id":249,"name":349},"お茶会",{"id":351,"name":352},"history","歴史",{"id":354,"name":355},"life","生活",{"id":214,"name":357},"部活動",{"id":359,"name":360},"character","キャラクター",{"id":148,"name":362},"食",{"id":364,"name":365},"math","数学",{"id":367,"name":368},"alcohol","酒",{"id":71,"name":370},"インフラ",{"id":372,"name":373},"application","アプリ",{"id":375,"name":376},"parenting","子育て",{"id":378,"name":379},"data","通信",{"id":381,"name":382},"migration","地方移住",{"id":73,"name":384},"セキュリティ",{"id":386,"name":386},"esports",{"id":220,"name":388},"振り返り",{"id":390,"name":391},"animal","動物",{"id":393,"name":394},"css","CSS",{"id":247,"name":396},"ゲーム",{"id":107,"name":398},"TypeScript",{"id":400,"name":401},"management","マネジメント",{"id":403,"name":404},"remote-work","リモートワーク",{"id":406,"name":407},"frame-work","フレームワーク",{"id":409,"name":410},"music","音楽",{"id":412,"name":413},"money","お金",{"id":415,"name":416},"covid-19","コロナ",{"id":418,"name":419},"railway","鉄道",{"id":421,"name":422},"agriculture","農業",{"id":181,"name":424},"趣味",{"id":426,"name":427},"certification","資格",{"id":429,"name":430},"personal-computer","PC",{"id":432,"name":433},"welfare","福利厚生",{"id":78,"name":435},"技術",{"id":437,"name":438},"study","勉強",{"id":440,"name":441},"mental-health","メンタルヘルス",{"id":443,"name":444},"frontend","フロントエンド",{"id":446,"name":447},"pilates","ピラティス",{"id":75,"name":449},"バックエンド",{"id":451,"name":452},"tunnel","トンネル",{"id":454,"name":455},"design","デザイン",{"id":457,"name":458},"sports","スポーツ",{"id":460,"name":461},"online","オンライン",{"id":463,"name":464},"internship","インターンシップ",{"id":466,"name":467},"animation","アニメーション",{"id":469,"name":470},"virtual-reality","VR",{"id":472,"name":473},"ssl","SSL",{"id":475,"name":476},"perl","Perl",{"id":478,"name":479},"operating-system","OS",{"id":481,"name":482},"ios","iOS",{"id":484,"name":485},"google","Google",{"id":487,"name":488},"deeplearning","DeepLearning",{"id":490,"name":491},"aws","AWS",{"id":493,"name":494},"apple","Apple",{"id":496,"name":497},"api","API",{"id":499,"name":500},"3-d","3D",{"id":502,"name":503},"school","学校",{"id":505,"name":506},"blender","Blender",{"id":508,"name":509},"android","Android",76,200,{"contents":513,"totalCount":301,"offset":290,"limit":301},[514,567,632],{"id":515,"createdAt":516,"updatedAt":517,"publishedAt":518,"revisedAt":517,"title":519,"category":520,"thumbnail":529,"image":532,"content":541,"keyword":542,"client":557,"team":558,"url":562,"release":563,"status":564,"top":13,"blog":45,"service":566},"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",[521,526],{"id":522,"createdAt":523,"updatedAt":524,"publishedAt":523,"revisedAt":523,"name":525},"web","2024-03-22T05:33:05.262Z","2024-06-24T23:16:42.692Z","ウェブ制作",{"id":454,"createdAt":527,"updatedAt":527,"publishedAt":527,"revisedAt":527,"name":528},"2024-03-22T05:34:30.127Z","デザイン＆ディレクション",{"url":530,"height":43,"width":531},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F47e7b069013a45b8b6e931ec132bd272\u002Fthumb.png",1200,[533,537,539],{"url":534,"height":535,"width":536},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F43a703ebe8d7467aac2c995378cb081e\u002F1.png",1800,2400,{"url":538,"height":535,"width":536},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F6aed2d670822422696329a5cb3a6877f\u002F2.png",{"url":540,"height":535,"width":536},"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>",[543,547,552],{"id":544,"createdAt":545,"updatedAt":546,"publishedAt":545,"revisedAt":546,"name":444,"filter":45,"page":45},"ice0h9h9ap","2024-06-28T01:14:44.830Z","2025-01-15T07:40:01.729Z",{"id":548,"createdAt":549,"updatedAt":550,"publishedAt":549,"revisedAt":550,"name":551,"filter":45,"page":45},"6ncqc37v7nzq","2024-06-28T01:14:12.293Z","2025-01-15T07:39:08.437Z","デザインプロジェクト",{"id":553,"createdAt":554,"updatedAt":555,"publishedAt":554,"revisedAt":555,"name":556,"filter":45,"page":45},"ztrz9np70v","2024-06-28T01:14:41.050Z","2025-01-15T07:40:30.428Z","コンセプトメイキング"," PH PARIS JAPON 株式会社",[559],{"fieldId":560,"title":561},"teamField","S2ファクトリー","https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fnoel2025\u002F","2025.10.17",[565],"公開中",[455],{"id":568,"createdAt":569,"updatedAt":570,"publishedAt":569,"revisedAt":570,"title":571,"category":572,"thumbnail":579,"image":583,"content":588,"keyword":589,"client":571,"team":604,"url":627,"release":628,"status":629,"statusText":630,"top":45,"blog":45,"service":631},"tamabi","2024-06-28T01:58:38.788Z","2025-05-27T03:25:42.261Z","多摩美術大学",[573,574],{"id":522,"createdAt":523,"updatedAt":524,"publishedAt":523,"revisedAt":523,"name":525},{"id":575,"createdAt":576,"updatedAt":577,"publishedAt":576,"revisedAt":576,"name":578},"system","2024-03-22T05:33:52.708Z","2024-06-24T23:16:53.739Z","システム開発",{"url":580,"height":581,"width":582},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002Fdea8e004e627415c80bf7b8d622bb4b9\u002Ftamabi-thumbnail-1.png",456,600,[584],{"url":585,"height":586,"width":587},"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>",[590,594,598,603],{"id":591,"createdAt":592,"updatedAt":593,"publishedAt":592,"revisedAt":593,"name":491,"filter":45,"page":45},"uftrxsmd0v72","2024-06-28T01:14:13.671Z","2025-01-15T07:39:25.538Z",{"id":595,"createdAt":596,"updatedAt":596,"publishedAt":596,"revisedAt":596,"name":597,"filter":13,"page":13},"yctx9hzd4","2024-06-28T01:14:33.743Z","Lambda",{"id":599,"createdAt":600,"updatedAt":601,"publishedAt":600,"revisedAt":601,"name":602,"filter":45,"page":45},"u84cy0fbzno","2024-06-28T01:14:39.521Z","2025-01-15T07:40:41.433Z","Cloud",{"id":544,"createdAt":545,"updatedAt":546,"publishedAt":545,"revisedAt":546,"name":444,"filter":45,"page":45},[605,608,611,614,617,620,623,626],{"fieldId":560,"title":606,"link":607},"萩原 俊矢","https:\u002F\u002Fshunyahagiwara.com\u002F#\u002Fworks",{"fieldId":560,"title":609,"link":610},"GrandBase Inc.","https:\u002F\u002Fwww.grandbase.jp\u002F",{"fieldId":560,"title":612,"link":613},"DSCL Inc.","https:\u002F\u002Fdscl.jp\u002F",{"fieldId":560,"title":615,"link":616},"株式会社トラフィックス","https:\u002F\u002Ftraffics.jp\u002F",{"fieldId":560,"title":618,"link":619},"株式会社カンバセーションズ","https:\u002F\u002Fqonversations.jp\u002F",{"fieldId":560,"title":621,"link":622},"Measurements Inc.","https:\u002F\u002Fwww.measurements.co.jp\u002F",{"fieldId":560,"title":624,"link":625},"tha ltd.","https:\u002F\u002Ftha.jp\u002F",{"fieldId":560,"title":561},"https:\u002F\u002Fwww.tamabi.ac.jp\u002F","2024.4.4",[565],null,[525],{"id":633,"createdAt":634,"updatedAt":635,"publishedAt":634,"revisedAt":635,"title":636,"category":637,"thumbnail":639,"image":641,"content":650,"keyword":651,"client":624,"team":667,"url":673,"release":674,"status":675,"statusText":630,"top":13,"blog":45,"service":676},"humanity","2024-06-28T01:56:51.507Z","2025-05-27T03:26:34.287Z","HUMANITY",[638],{"id":575,"createdAt":576,"updatedAt":577,"publishedAt":576,"revisedAt":576,"name":578},{"url":640,"height":581,"width":582},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F740adb4e02c54fee97d12025df5f16a0\u002Fhumanity-thumbnail-1.png",[642,644,646,648],{"url":643,"height":586,"width":587},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F2a10b034854d40e789d38ac33e0a3c4e\u002Fhumanity-other-1.png",{"url":645,"height":586,"width":587},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F1091c52a97f745e5a3fc105bd0e542dc\u002Fhumanity-other-2.png",{"url":647,"height":586,"width":587},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F613c8c836fff40119e9f85097262399d\u002Fhumanity-other-3.png",{"url":649,"height":586,"width":587},"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>",[652,657,662,663],{"id":653,"createdAt":654,"updatedAt":655,"publishedAt":654,"revisedAt":655,"name":656,"filter":45,"page":45},"fg8e4c9nl","2024-06-28T01:14:04.517Z","2025-01-15T07:36:58.970Z","CMS",{"id":658,"createdAt":659,"updatedAt":660,"publishedAt":659,"revisedAt":660,"name":661,"filter":45,"page":45},"p6qgoo2k9vl9","2024-06-28T01:14:06.759Z","2025-01-15T07:37:22.466Z","大規模データ",{"id":599,"createdAt":600,"updatedAt":601,"publishedAt":600,"revisedAt":601,"name":602,"filter":45,"page":45},{"id":664,"createdAt":665,"updatedAt":666,"publishedAt":665,"revisedAt":666,"name":396,"filter":45,"page":45},"pxnv6cy2u","2024-06-28T01:14:45.570Z","2025-01-15T07:39:54.004Z",[668,671,672],{"fieldId":560,"title":669,"link":670},"Enhance","https:\u002F\u002Fenhance-experience.com\u002Fja\u002F",{"fieldId":560,"title":624,"link":625},{"fieldId":560,"title":561},"https:\u002F\u002Fhumanity.game\u002Fja\u002F","2023.5.16",[565],[578],1792992115184]