[{"data":1,"prerenderedAt":662},["ShallowReactive",2],{"detailvacation2026":3,"$fp3nA7-sCk6XOTiSRdEnlkCy50xL2oZM6T6779Y2Im68":273,"$f7OovQEBIkf3flPSO65XgVqn1FRUlN7OLmCu_FYFaAPE":292,"works":497},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":7,"revisedAt":6,"title":8,"tag":9,"recommended_articles":31,"eyecatch":140,"heading_list":21,"content2":144,"description":145,"related_articles":146,"recruit":14,"cta_title":270,"cta_text":271,"cta_url":272,"is_html":14,"is_migration":14},"vacation2026","2026-10-05T06:33:00.591Z","2026-10-09T00:41:04.994Z","2026-10-09T00:39:38.380Z","2年ぶりの社員旅行で長崎へ行ってきました！",[10,15,22,26],{"id":11,"createdAt":12,"updatedAt":12,"publishedAt":12,"revisedAt":12,"name":13,"top":14},"company-trip","2024-03-15T05:38:37.920Z","社員旅行",false,{"id":16,"createdAt":17,"updatedAt":18,"publishedAt":17,"revisedAt":19,"name":20,"top":21},"promotion","2023-07-13T11:19:32.620Z","2023-08-09T08:38:30.413Z","2023-08-09T07:10:47.562Z","PR",true,{"id":23,"createdAt":24,"updatedAt":24,"publishedAt":24,"revisedAt":24,"name":25,"top":14},"event","2024-12-12T02:47:47.083Z","イベント",{"id":27,"createdAt":28,"updatedAt":29,"publishedAt":28,"revisedAt":28,"name":30,"top":14},"food","2023-08-08T03:58:47.975Z","2023-08-08T04:53:39.170Z","食",[32,74,109],{"id":33,"createdAt":34,"updatedAt":35,"publishedAt":36,"revisedAt":35,"title":37,"tag":38,"recommended_articles":45,"eyecatch":52,"heading_list":21,"summary":56,"content2":57,"description":58,"related_articles":59,"recruit":14,"cta_title":71,"cta_text":72,"cta_url":73,"is_html":14,"is_migration":14},"vacation2026-app","2026-08-14T02:25:28.575Z","2026-09-24T03:25:59.639Z","2026-09-24T03:25:42.801Z","AIで作ったプロトタイプを実用化。「AIプロトタイプ壁打ち」で社員旅行アプリを開発",[39,41,42,44],{"id":40},"ai",{"id":11},{"id":43},"internal-project",{"id":16},[46,48,50],{"id":47},"custom-reservation-system",{"id":49},"claude-code-perl-typescript-migration",{"id":51},"ai-generated-campaign-site",{"url":53,"height":54,"width":55},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F76171c49363646cc86698d5e2043af98\u002Fai-prototype-walltalk-eyecatch-revised-v3.png",900,1600,"\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プロトタイプ壁打ち」を社内で検証。技術構成やデザインの相談から、実装、旅行当日の利用、振り返りまでを紹介します。",[60,62,64,66,67,69],{"id":61},"vacation2024-missions",{"id":63},"vacation2024",{"id":65},"vacation2023",{"id":49},{"id":68},"event-ai-agent",{"id":70},"bird-classification-2","AIプロトタイプ壁打ちのご相談はこちら","AIでプロトタイプを作ったものの、バックエンドやインフラ、セキュリティ、デザインなどに不安がある方へ。要件が固まっていない段階でも、現在困っていることや実現したいことからご相談いただけます。","https:\u002F\u002Fwww.s2factory.co.jp\u002Fcontact\u002Fai-prototype-consultation\u002F",{"id":47,"createdAt":75,"updatedAt":76,"publishedAt":77,"revisedAt":77,"title":78,"tag":79,"recommended_articles":89,"eyecatch":95,"heading_list":21,"content2":99,"description":100,"related_articles":101,"recruit":14,"cta_title":107,"cta_text":108,"is_html":14,"is_migration":14},"2026-08-24T05:53:29.501Z","2026-09-07T04:01:25.896Z","2026-09-07T03:51:13.114Z","3つの事例で見るフルカスタムの予約システム",[80,82,84,86,87],{"id":81},"infrastructure",{"id":83},"security",{"id":85},"backend",{"id":16},{"id":88},"tech",[90,91,93],{"id":49},{"id":92},"nazotoki",{"id":94},"noel2025",{"url":96,"height":97,"width":98},"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連携など、要件に合わせた設計・実装の工夫をまとめました。",[102,103,104,105],{"id":49},{"id":51},{"id":70},{"id":106},"design-project-1","予約システムの開発・リニューアルをご検討の方へ","既存サービスでは運用に合わない、管理業務に手作業が残っている、ECサイトや会員基盤と連携したい。予約システムに関する課題をお聞かせください。新規開発から既存システムの見直しまで、要件に合わせて対応します。",{"id":49,"createdAt":110,"updatedAt":111,"publishedAt":112,"revisedAt":111,"title":113,"tag":114,"recommended_articles":121,"eyecatch":125,"heading_list":14,"content2":127,"description":128,"related_articles":129,"recruit":14,"cta_url":139,"is_html":14,"is_migration":14},"2026-05-29T08:21:55.189Z","2026-09-01T05:43:45.290Z","2026-06-02T01:45:24.758Z","テストがない 10 万行の Perl システムを、Claude Code で TypeScript へ書き換えた話",[115,116,118,119,120],{"id":40},{"id":117},"typescript",{"id":85},{"id":88},{"id":16},[122,123,124],{"id":106},{"id":51},{"id":70},{"url":126,"height":97,"width":98},"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件のテスト構築まで行った取り組みを紹介します。",[130,131,132,133,135,137],{"id":51},{"id":68},{"id":70},{"id":134},"edge-ai",{"id":136},"ux-certification-basics",{"id":138},"figma-plugin","https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fshader-basics\u002F",{"url":141,"height":142,"width":143},"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日間を写真とともに振り返ります。",[147,165,186,208,225,247],{"id":33,"createdAt":34,"updatedAt":35,"publishedAt":36,"revisedAt":35,"title":37,"tag":148,"recommended_articles":153,"eyecatch":157,"heading_list":21,"summary":56,"content2":57,"description":58,"related_articles":158,"recruit":14,"cta_title":71,"cta_text":72,"cta_url":73,"is_html":14,"is_migration":14},[149,150,151,152],{"id":40},{"id":11},{"id":43},{"id":16},[154,155,156],{"id":47},{"id":49},{"id":51},{"url":53,"height":54,"width":55},[159,160,161,162,163,164],{"id":61},{"id":63},{"id":65},{"id":49},{"id":68},{"id":70},{"id":63,"createdAt":166,"updatedAt":167,"publishedAt":168,"revisedAt":167,"title":169,"tag":170,"recommended_articles":179,"eyecatch":180,"heading_list":21,"content2":184,"related_articles":185,"recruit":14,"is_html":14,"is_migration":14},"2024-10-30T17:22:07.115Z","2025-06-12T07:54:13.094Z","2024-11-29T07:40:52.000Z","社員旅行 2024",[171,172,173,175,177],{"id":11},{"id":16},{"id":174},"character",{"id":176},"application",{"id":178},"look-back",[],{"url":181,"height":182,"width":183},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F360670743a444d118b437053c36ddacd\u002Fryo-nagisa-SbZ9uF-830w-unsplash.jpg",3024,4032,"\u003Cp>木枯らしが吹き、冬の足音がすぐそこまで近づいてまいりました。\u003Cbr>寒さが厳しくなる折、どうぞご自愛くださいませ。\u003Cbr>\u003Cbr>\u003Cbr>2024年も、いよいよ終わりが近づいてまいりました。\u003Cbr>様々な出来事があった一年ですが、弊社では昨年に続き、\u003Cstrong>社員旅行を実施\u003C\u002Fstrong>することができました。\u003Cbr>\u003Cstrong>前回は宮古島\u003C\u002Fstrong>でしたが、\u003Cstrong>今年は趣向を変え、雄大な自然と美食を楽しむ「北海道」\u003C\u002Fstrong>へ。\u003Cbr>\u003Cbr>昨年は初めての開催ということもあり、準備段階で苦労した部分も多くありましたが、今回はその反省を活かしてスムーズな計画を目指しました。\u003Cbr>前回との比較や改善点も交えながら、今年の社員旅行を振り返ってみたいと思います。\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fvacation2023\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>前回の社員旅行の様子はこちら。\u003C\u002Fstrong>\u003Cbr>\u003C\u002Fa>\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=\"\u002F\u002Fcdn.iframe.ly\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=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch2 id=\"h9707d3a59a\">概要\u003C\u002Fh2>\u003Cp>今年の社員旅行は、リフレッシュと交流を目的に\u003Cstrong>北海道・札幌で実施\u003C\u002Fstrong>しました。\u003Cbr>2 泊 3 日の行程には、東京・大阪から総勢約20名以上が参加。今年初参加の新入社員も多く、和気あいあいとした雰囲気でスタートしました。\u003Cbr>\u003Cbr>全体の予定としては、\u003Cstrong>初日と最終日に全員で楽しめるよう簡単なツアー\u003C\u002Fstrong>を取り入れつつ、\u003Cstrong>2 日目は全員自由行動\u003C\u002Fstrong>の時間を設けることで、それぞれが北海道の魅力を満喫できる構成に。\u003Cbr>また、連絡には Slack を使用し、\u003Cstrong>新たな取り組みとして社員旅行専用アプリを導入\u003C\u002Fstrong>。旅行の楽しみをさらに広げる工夫も加えました。\u003C\u002Fp>\u003Ch2 id=\"he6d4e69bd8\">スケジュール\u003C\u002Fh2>\u003Cp>スケジュールは以下の通り。\u003Cbr>1 日目と最終日は、全員で楽しめるアクティビティを中心に計画しました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>1 日目\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>朝\u003C\u002Fstrong>：羽田空港または伊丹空港に集合\u003C\u002Fli>\u003Cli>\u003Cstrong>昼過ぎ\u003C\u002Fstrong>：新千歳空港到着\u003C\u002Fli>\u003Cli>\u003Cstrong>バスツアー開始\u003C\u002Fstrong>：バスガイドさんと合流、ツアー出発\u003Cul>\u003Cli>\u003Cstrong>えこりん村\u003C\u002Fstrong>：昼食バイキング\u003C\u002Fli>\u003Cli>\u003Cstrong>エスコンフィールド\u003C\u002Fstrong>：観光\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>夕方\u003C\u002Fstrong>：ホテル到着、荷物を置いて夕食会場へ\u003C\u002Fli>\u003Cli>\u003Cstrong>夜\u003C\u002Fstrong>：すすきので地元料理を堪能\u003C\u002Fli>\u003Cli>\u003Cstrong>夕食後\u003C\u002Fstrong>：解散、自由行動\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>2 日目\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>完全自由行動\u003C\u002Fstrong>\u003Cul>\u003Cli>それぞれが自由に観光やグルメを楽しむ\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>3 日目\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>朝\u003C\u002Fstrong>：ホテルロビーに集合、各自チェックアウト\u003C\u002Fli>\u003Cli>\u003Cstrong>午前\u003C\u002Fstrong>：バスで場外市場へ\u003Cul>\u003Cli>市場で買い物\u003C\u002Fli>\u003C\u002Ful>\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>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>2 日目は完全に自由時間。各自が思い思いの時間を過ごしました。\u003Cbr>\u003Cbr>一人で早朝から出発し、\u003Cstrong>一日かけて札幌と宗谷岬を往復した社員\u003C\u002Fstrong>もいれば、数人でレンタカーを借りて富良野のラベンダー畑を訪れたグループや、温泉でリラックスするグループも。また、市内散策を選び、札幌のカフェや地元グルメを堪能する社員も多く、自由な時間の中でそれぞれが北海道の魅力を満喫していました。\u003Cbr>\u003Cbr>さらに、\u003Ca href=\"https:\u002F\u002Fwww.banei-keiba.or.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">ばんえい競馬\u003C\u002Fa>を観戦しに行った社員や、飛行機を使って函館まで足を伸ばした社員もおり、自由行動ならではの多様な楽しみ方が見られて面白かったです。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4c9692bd0aa549b48cd7138e512136f1\u002F%E7%A4%BE%E5%93%A1%E6%97%85%E8%A1%8C%E4%BD%8D%E7%BD%AE%E5%85%B1%E6%9C%89.png?w=250&h=556\" alt=\"位置情報共有\" width=\"250\" height=\"556\">\u003C\u002Ffigure>\u003Cp>また、\u003Cstrong>Googleの位置共有機能\u003C\u002Fstrong>を利用し、\u003Cstrong>参加者が北海道中を自由に巡っている様子をリアルタイムで確認\u003C\u002Fstrong>できるように。それぞれが訪れた場所やルートが共有され、北海道の広大さを実感することができました。\u003C\u002Fp>\u003Ch2 id=\"hc135c55324\">社員旅行アプリ\u003C\u002Fh2>\u003Cp>今年の社員旅行では、\u003Cstrong>社員旅行専用のアプリを開発し活用\u003C\u002Fstrong>しました。このアプリは、スケジュールの確認や写真投稿のタイムライン、コメント機能を通じて、情報共有や交流を促進するために作られたものです。その中でも、\u003Cstrong>目玉となったのが「ミッション機能」\u003C\u002Fstrong>でした。\u003C\u002Fp>\u003Ch4 id=\"hbdf1bf3d5d\">\u003Cstrong>アプリの主な機能\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>スケジュール確認\u003C\u002Fstrong>：旅行中の行程や集合場所、時間などをリアルタイムでチェック可能。\u003C\u002Fli>\u003Cli>\u003Cstrong>タイムラインとコメント機能\u003C\u002Fstrong>：社員が写真を投稿し、それにコメントし合うことで、旅行中の交流をオンラインでも広げる仕組み。\u003C\u002Fli>\u003Cli>\u003Cstrong>ミッション機能\u003C\u002Fstrong>：旅行中に設定された課題を達成し、写真投稿や得点を競う仕組み。ミッションの詳細や進捗状況もアプリ内で確認可能。\u003C\u002Fli>\u003Cli>\u003Cstrong>ミッション状況の可視化\u003C\u002Fstrong>：ミッションの得点状況を随時確認でき、参加者間での盛り上がりをサポート。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>このアプリは、スケジュール管理や情報共有をスムーズにするだけでなく、\u003Cstrong>社員間の交流を自然に生み出すツール\u003C\u002Fstrong>として大きな役割を果たしました。\u003Cbr>\u003Cbr>中でもミッション機能は、観光や食事を楽しみながら課題をクリアし、写真を投稿して得点を競う仕組みで、多くの社員が楽しんで参加していました。Slackとはまた違った形でつながりを感じられる点が好評で、旅行全体をさらに盛り上げるきっかけになったと思います。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4d1420c6286c498a85b2cc0e6dc734ce\u002F%E5%AE%8C%E6%88%90-3.png?w=450&h=975\" alt=\"ミッション\" width=\"450\" height=\"975\">\u003Cfigcaption>食事・場所・キャラ・S2・その他の5つのカテゴリを用意。難易度によって獲得ポイントが変わる。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Cstrong>最終日には、ミッションの得点状況をもとに表彰が行われ、上位 3 名に木彫りのくまを贈呈\u003C\u002Fstrong>しました。表彰式は、ただの結果発表にとどまらず、旅行を通じて生まれたエピソードをみんなで共有する楽しいひとときにもなりました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ffec90573c3104638ba5a8a3cf930a1bb\u002F%E6%9C%A8%E5%BD%AB%E3%82%8A%E3%81%AE%E7%86%8A.jpeg?w=650&h=447\" alt=\"木彫りの熊\" width=\"650\" height=\"447\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>このアプリの導入によって、旅行は観光や自由行動だけでなく、\u003Cstrong>全員で共有できる特別な体験\u003C\u002Fstrong>へと進化したのではないでしょうか。\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\u002Fvacation2024-missions\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\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=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>\u003Cstrong>また、こうしたアプリの開発に興味がある方やご相談をご希望の方は、ぜひお気軽に\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fcontact\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>お問い合わせ\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>ください。私たちが全力でサポートいたします！\u003Cbr>\u003C\u002Fstrong>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fcontact&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch2 id=\"h767a9b8c78\">昨年との違い\u003C\u002Fh2>\u003Cp>今回の社員旅行は、前回の経験を活かして計画を進めた結果、準備段階からスムーズに進行することができたのではないでしょうか。\u003Cbr>\u003Cbr>\u003Cstrong>前回は、突然 2 ヶ月以内に社員旅行を決行することに\u003C\u002Fstrong>なり、行き先や旅行会社の手配を急ピッチで進める必要がありました。\u003Cbr>そのうえ、\u003Cstrong>参加者全員が「一人一部屋で宿泊」という希望\u003C\u002Fstrong>があり、限られた時間の中で条件を満たす宿泊先を探すのに、非常に難儀したのを覚えています。\u003Cbr>\u003Cbr>なんとか宮古島のリゾートホテルに空きを見つけ、予約にこぎつけましたが、そこに至るまでに多くの時間と労力を要しました。しかし、苦労はそれだけでは終わりません。\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>\u003C\u002Fli>\u003Cli>\u003Cstrong>レンタカーの手配\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>など、短期間で数多くの準備をこなさなければならず、慌ただしい計画となりました。\u003Cbr>\u003Cbr>今回は、昨年のデータやノウハウを活用したことで、参加者情報の収集や宿泊先の手配がかなり効率化されたと思います。\u003Cbr>また、何と言っても\u003Cstrong>前回はほとんど一人で企画を進めていたような状態\u003C\u002Fstrong>だったため大変でしたが、\u003Cstrong>今年はチームを組み、定期的にミーティングを行いながら役割を分担して進められた\u003C\u002Fstrong>ことが大きな違いでした。この体制のおかげで、昨年よりも負担が軽減され、準備段階からスムーズに進行することができました。\u003C\u002Fp>\u003Ch3 id=\"h5ac8a4307d\">クリアカード\u003C\u002Fh3>\u003Cp>また、\u003Cstrong>去年の宮古島では社員旅行中の記念撮影用にアクリルスタンドを制作\u003C\u002Fstrong>し、スタッフ全員に配りましたが、\u003Cstrong>今年はクリアカード\u003C\u002Fstrong>を作りました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ff1cdb512bdca4bd99379aa9d2468f88a\u002F%E3%82%AF%E3%83%AA%E3%82%A2%E3%82%AB%E3%83%BC%E3%83%89.jpg?w=650&h=650\" alt=\"クリアカード全 8 種類\" width=\"650\" height=\"650\">\u003Cfigcaption>クリアカード全8種類\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>クリアカードは\u003Cstrong>全部で 8 種類\u003C\u002Fstrong>あり、\u003Cstrong>どれが当たるかわからないように銀紙で包装\u003C\u002Fstrong>されてあります。\u003Cbr>スタッフには 3 枚ずつ配布され、写真撮影用として使うだけでなく、社員同士でカードを交換し合うなどの交流のきっかけにもなりました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4dc76db1c0814e5b8481f04cca9040bc\u002F%E3%82%AF%E3%83%AA%E3%82%A2%E3%82%AB%E3%83%BC%E3%83%89%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9.JPG?w=650&h=650\" alt=\"クリアカードの使い方\" width=\"650\" height=\"650\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fa6009dcda7c54cfb97a8f22c23ec8cf4\u002F%E3%82%B0%E3%83%83%E3%82%BA%E3%82%B3%E3%83%BC%E3%83%8A%E3%83%BC.jpg?w=650&h=514\" alt=\"グッズコーナー\" width=\"650\" height=\"514\">\u003Cfigcaption>社内の一角にあるグッズコーナー。かなりバリエーションが増えてきました。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>今回の社員旅行は、「リフレッシュ」と「社員間の交流を深める」という目的をしっかりと果たすことができた 2 泊 3 日でした。自由行動が多いスケジュールの中でも、旅行専用アプリやミッション機能を活用することで、社員同士のつながりを感じられる機会が多くありました。\u003C\u002Fp>\u003Cp>\u003Cstrong>弊社では、社員の約 8 割がリモートワーク\u003C\u002Fstrong>をしており、普段は直接顔を合わせる機会が少ない中、今回の旅行は貴重な交流の場となりました。\u003Cbr>参加者からは、\u003Cstrong>「普段話せない社員と交流できた」「久々にリフレッシュできた」\u003C\u002Fstrong>といった感想が寄せられ、特に新入社員にとっては、会社の雰囲気に馴染む良い機会になったようです。\u003C\u002Fp>\u003Cp>また、\u003Cstrong>今回導入した旅行専用アプリは非常に好評\u003C\u002Fstrong>でした。スケジュールや写真投稿のタイムライン、ミッション機能などが旅行中の楽しみを広げるだけでなく、\u003Cstrong>旅行後も閲覧できるようにしたことで、「家族や友人に社員旅行の話をする際に役立った」\u003C\u002Fstrong>といった声も寄せられました。\u003Cbr>\u003Cbr>今後も、このような取り組みを続けながら、旅行に限らず、日々の業務においても新しいチャレンジや発見を積極的に取り入れ、さらに成長できるよう努めていきたいと思います。\u003Cbr>社員旅行で得られた経験が、業務にも前向きな姿勢や新しい発想をもたらしてくれることを期待しています。\u003C\u002Fp>",[],{"id":61,"createdAt":187,"updatedAt":188,"publishedAt":189,"revisedAt":188,"title":190,"tag":191,"recommended_articles":201,"eyecatch":202,"heading_list":21,"content2":206,"related_articles":207,"recruit":14,"is_html":14,"is_migration":14},"2024-10-30T17:05:37.788Z","2025-06-12T07:40:58.029Z","2024-11-27T07:40:58.000Z","社員旅行向けの Web アプリを開発してみた",[192,193,194,195,196,198,200],{"id":11},{"id":16},{"id":88},{"id":85},{"id":197},"frontend",{"id":199},"design",{"id":43},[],{"url":203,"height":204,"width":205},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Faac0d1a67524433c8a5670d06077cc7d\u002F%E4%B8%80%E8%A6%A7.png",768,1366,"\u003Ch2 id=\"hd2c91c24e4\">経緯\u003C\u002Fh2>\u003Cp>\u003Cstrong>2024年7月、社員旅行が実施\u003C\u002Fstrong>されることになり、せっかくの機会を\u003Cstrong>広報として活用できないか\u003C\u002Fstrong>と議論を重ねました。\u003C\u002Fp>\u003Ch2 id=\"h0b0d08b338\">企画\u003C\u002Fh2>\u003Cp>真っ先に\u003Cstrong>「何かシステムを作ってみようか？」\u003C\u002Fstrong>という案が浮上。\u003C\u002Fp>\u003Cp>「社員旅行のためだけにシステムを作るなんて大変では？」と思われるかもしれませんが、\u003Cstrong>システム開発は弊社の得意分野\u003C\u002Fstrong>です。\u003Cbr>だからこそイメージも付きやすく、また、利用するユーザー規模が少ないので、いくらでも楽のできる方法も思いつきます\u003Cstrong>。\u003C\u002Fstrong>実は意外と手軽な選択肢でした。\u003C\u002Fp>\u003Cp>システムの方向性を考えた際には、次の点を念頭に置きました。\u003C\u002Fp>\u003Cul>\u003Cli>旅程的に自由時間も多く、ある程度のグループはあるものの基本的にはバラバラに動くこともあり、何もないと社員旅行感が生まれないかも\u003C\u002Fli>\u003Cli>家族参加されるスタッフも多いことから、幅広い年齢層が楽しめる内容が良い\u003C\u002Fli>\u003C\u002Ful>\u003Cp>こうした要素を踏まえて、\u003Cstrong>写真投稿でミッションを達成していく「スタンプラリー」型のSNS\u003C\u002Fstrong>を作成することに決定。\u003Cstrong>2 泊 3 日の社員旅行のためだけに、フルスクラッチでSNSを構築する\u003C\u002Fstrong>ことになりました。\u003C\u002Fp>\u003Ch2 id=\"h4db3ec6501\">設計\u003C\u002Fh2>\u003Ch3 id=\"ha8f355181f\">画面をざっくり洗い出す\u003C\u002Fh3>\u003Cp>言い出しっぺでもある、\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Finterview-3\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>テクニカルディレクターの takano\u003C\u002Fstrong>\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\u002Finterview-3\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Finterview-3%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>\u003Cstrong>以下は実際のメモ内容です\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>タイムライン\u003C\u002Fstrong>\u003Cul>\u003Cli>インスタっぽく？TikTokっぽく？\u003C\u002Fli>\u003Cli>「これ以降は既読」が欲しい\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>ミッションリスト\u003C\u002Fstrong>\u003Cul>\u003Cli>すべて\u003C\u002Fli>\u003Cli>達成済み\u003C\u002Fli>\u003Cli>未達成\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>ミッション詳細\u003C\u002Fstrong>\u003Cul>\u003Cli>登録ボタン\u003Cul>\u003Cli>新規\u003C\u002Fli>\u003Cli>追加\u003C\u002Fli>\u003Cli>変更\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>他の人の状況と登録写真\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>メンバーリスト\u003C\u002Fstrong>\u003Cul>\u003Cli>アイコン\u003C\u002Fli>\u003Cli>アカウント名\u003C\u002Fli>\u003Cli>スコア\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>メンバー詳細\u003C\u002Fstrong>\u003Cul>\u003Cli>スコア\u003C\u002Fli>\u003Cli>ミッションの状況と登録写真\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>既視感のあるシステムなので、メモ程度の簡単な整理でも頭の中で全体のイメージができあがりました。\u003Cbr>ここから具体的にシステム設計に進みます。\u003C\u002Fp>\u003Ch3 id=\"h82b60cc132\">実装方針\u003C\u002Fh3>\u003Cp>システムの設計に取り掛かる前に、まずは全体の方向性や構成を考えることから始めました。\u003C\u002Fp>\u003Cp>今回のプロジェクトでは、基本的に takano が一人で全て作り切ることを前提に進めることにしました。\u003Cbr>普段はバックエンドエンジニアとしての業務が中心ですが、Android のネイティブアプリや Flutter を使ったハイブリッドアプリの開発経験もあるため、選択肢は少ないながらもいくつか考えられます。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"h5dc0967264\">\u003Cstrong>フロントエンド\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>\u003Cstrong>ネイティブアプリでは、スタッフにアプリをインストールしてもらう手間が発生\u003C\u002Fstrong>し、手軽に利用してもらえないと判断したため、選択肢から外しました。\u003Cbr>そこで、\u003Cstrong>Webアプリケーションとして開発\u003C\u002Fstrong>する方向に決め、以下の選択肢を検討しました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca href=\"https:\u002F\u002Fja.react.dev\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>React\u003C\u002Fstrong>\u003C\u002Fa>  \u003Cul>\u003Cli>社内のフロントエンドエンジニアが主に使用しているため、習得すれば今後の業務にも役立つ可能性が高い\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.jetbrains.com\u002Fja-jp\u002Fkotlin-multiplatform\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Kotlin Multiplatform \u003C\u002Fstrong>\u003C\u002Fa>\u003Cul>\u003Cli>Android開発者として馴染みがあり、個人的に興味もある分野\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fflutter.dev\u002Fmulti-platform\u002Fweb\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Flutter on the Web \u003C\u002Fstrong>\u003C\u002Fa>\u003Cul>\u003Cli>これまでネイティブアプリ開発で使ってきた経験があり、Flutter そのものへの好感度が高い\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>ただし、今回のプロジェクトは短期間での完成が求められるため、React の習得には十分な時間が確保できないと判断。また、Kotlin Multiplatform は現時点ではまだ時期尚早だと考え、消去法で \u003Cstrong>Flutter を選択\u003C\u002Fstrong>しました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fflutter.dev\u002Fmulti-platform\u002Fweb\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fflutter.dev%2Fmulti-platform%2Fweb&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch4 id=\"ha2cc149486\">\u003Cbr>\u003Cstrong>バックエンド\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>フロントエンドで Flutter を使おうと考えた時点で、バックエンドには自然と \u003Ca href=\"https:\u002F\u002Ffirebase.google.com\u002F?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Firebase\u003C\u002Fstrong>\u003C\u002Fa> を使おうと考えていました。\u003Cbr>\u003Cbr>フロントエンドの実装に注力したかったこともあり、バックエンドの構築に時間をかけられないと判断。また、以前からしっかり Firestore を利用したサービスを作ってみたいという思いもあり、Firebase を採用することにしました(普段は \u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">AWS\u003C\u002Fa> を使用しているため、\u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Flambda\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Lambda\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Fdynamodb\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">DynamoDB\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Fs3\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">S3\u003C\u002Fa> でも同様に迅速に作成可能だったとは思いますが、今回はあえて Firebase を選びました)。\u003C\u002Fp>\u003Cp>写真投稿機能を提供するにあたり、認証は必須だと考え、\u003Ca href=\"https:\u002F\u002Ffirebase.google.com\u002Fdocs\u002Fauth?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Firebase Authentication\u003C\u002Fstrong>\u003C\u002Fa> を採用。\u003Cbr>データストアには \u003Ca href=\"https:\u002F\u002Ffirebase.google.com\u002Fdocs\u002Ffirestore?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Cloud Firestore\u003C\u002Fstrong>\u003C\u002Fa> を使用し、データベース設計もメモ書き程度にまとめて構想しました。\u003C\u002Fp>\u003Cp>こちらが実際のメモ内容です。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>ミッション\u003C\u002Fstrong>\u003Cul>\u003Cli>ID\u003C\u002Fli>\u003Cli>タイトル\u003C\u002Fli>\u003Cli>説明文\u003C\u002Fli>\u003Cli>ポイント\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>メンバー\u003C\u002Fstrong>\u003Cul>\u003Cli>ID\u003C\u002Fli>\u003Cli>ステータスとかいる？\u003C\u002Fli>\u003Cli>アカウント名\u003C\u002Fli>\u003Cli>合計ポイント\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>ポスト\u003C\u002Fstrong>\u003Cul>\u003Cli>ID\u003C\u002Fli>\u003Cli>時間\u003C\u002Fli>\u003Cli>メンバーID\u003C\u002Fli>\u003Cli>ミッションID\u003C\u002Fli>\u003Cli>画像 base64 ？ cloud storage 使ってみる？\u003C\u002Fli>\u003Cli>写真コメント\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>洗い出してみることで、データの持ち方が次第にイメージできるようになります。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"he949583e15\">\u003Cstrong>コメント機能の検討\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>\u003Cstrong>「他者の投稿にコメントできた方が良いだろう」「リアクションしたくなる場面があるだろう」\u003C\u002Fstrong>との考えから、コメント機能の実装を検討。しかし、長年の経験から「そこまで手を広げると間に合わないのでは？」という警告が頭をよぎり、\u003Cstrong>既存のシステムを活用する方針\u003C\u002Fstrong>に。\u003C\u002Fp>\u003Cp>弊社では日頃から\u003Cstrong>コミュニケーションツールとして Slack を利用\u003C\u002Fstrong>しており、\u003Cstrong>社員旅行中の連絡にも Slack が想定\u003C\u002Fstrong>されていました。\u003Cbr>\u003Cbr>そこで、\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>写真を投稿すると、 Bot 経由で Slack にも投稿される仕組みを導入し、これを通知機能として活用\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>Slack 上の投稿に対して、リアクションやコメントをつけることで、コメント機能の代替とする\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>これにより、システムの開発範囲を抑えつつ、必要な機能を補完する形で Slack を活用することを決定しました。\u003C\u002Fp>\u003Ch3 id=\"h46fc9b640d\">プロトタイプ開発\u003C\u002Fh3>\u003Cp>概ねの設計が終わったところで、まずはざっとプロトタイプを作成します。\u003C\u002Fp>\u003Cp>今回、このタイミングでプロトタイプを作成した目的は\u003Cstrong>「デザイナーに機能を伝えるため」\u003C\u002Fstrong>でした。\u003Cbr>慣れないワイヤーフレームを書くより、実際に動く形で見せる方が早いと判断したからです。\u003Cbr>\u003Cbr>このタイミングでプロトタイプをなんとなくでも作成しておくことで、以下のようなポイントを洗い出すことができました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>残りの作業量の把握\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>実現が難しい機能の別案検討\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>本実装前に調査が必要な事項の明確化\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>これにより、今後の作業に対する見通しが立ち、安心感を持って進めることができるようになりました。\u003Cbr>\u003Cbr>プロトタイプの仕様としては、UI は Flutter の Widget をそのまま使用し、装飾は一切なし。\u003Cbr>バックエンドはしっかり構築し、 \u003Ca href=\"https:\u002F\u002Friverpod.dev\u002Fja\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Riverpod\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> を使って状態管理を行いながら Firebase と接続\u003C\u002Fstrong>。モックではなく、\u003Cstrong>データ連携が可能な状態になっており、写真の投稿も\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fcloud.google.com\u002Fstorage?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Cloud Storage\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> に保存して閲覧できるところまでは実装\u003C\u002Fstrong>しました。\u003Cbr>\u003Cbr>このプロトタイプを基に、次にデザインを社内のデザイナーに依頼します。\u003Cbr>ただし、相手も他の案件を抱えており、どの程度の時間がかかるかわからなかったので、ここまではかなり駆け足で進めました。\u003Cstrong>企画立案からプロトタイプ開発完了まで約 2 週間\u003C\u002Fstrong>ほどです。\u003C\u002Fp>\u003Ch3 id=\"hb570a6676d\">デザイン\u003C\u002Fh3>\u003Cp>アプリのデザインは、\u003Cstrong>社内デザイナーの \u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Finterview-5\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>matsue\u003C\u002Fstrong>\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\u002Finterview-5\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Finterview-5%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>社内案件ならではの自由度を活かし、プロトタイプを通じて実際に触れながら、細部まで丁寧に作り上げていきました。デザインには多くの工夫と遊び心が盛り込まれています。\u003Cbr>ここでは、\u003Cstrong>社員旅行アプリに込めた意図やデザインのポイント\u003C\u002Fstrong>についてご紹介します。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"hfa14ac7259\">\u003Cstrong>テーマ\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>\u003Cstrong>今回のテーマは「シンプルで見やすく、そして楽しく！」\u003C\u002Fstrong>。\u003Cbr>\u003Cbr>\u003Cstrong>配色は北海道の自然をイメージ\u003C\u002Fstrong>しました。広がる青空を彷彿とさせる彩度の高い青をメインに、草原を思わせる緑をアクセントカラーに採用。これにより、清々しく爽やかな雰囲気をデザインに取り入れています。\u003Cbr>\u003Cstrong>S2 のブランドカラー(ピンク、黄色、紺、黄緑)では普段使用しない色味をあえて採用し、旅行らしい新鮮さと特別感を演出\u003C\u002Fstrong>しました。\u003Cbr>\u003Cbr>\u003Cstrong>フォント\u003C\u002Fstrong>についても\u003Cstrong>テーマに合わせて選定\u003C\u002Fstrong>しています。\u003Cbr>スケジュール画面では、丸みがあり視認性の高い \u003Ca href=\"https:\u002F\u002Ffonts.google.com\u002Fspecimen\u002FZen+Maru+Gothic\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Zen Maru Gothic\u003C\u002Fstrong>\u003C\u002Fa> を採用し、読みやすさを重視。\u003Cbr>一方で、ミッション画面には遊び心を取り入れるため、ゲームらしい雰囲気が漂う \u003Ca href=\"https:\u002F\u002Ffonts.google.com\u002Fspecimen\u002FDela+Gothic+One\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Dela Gothic One\u003C\u002Fstrong>\u003C\u002Fa> を使用しました。いずれも日本語対応フォントの中から、テーマに合うユニークな書体を選びました。\u003C\u002Fp>\u003Cp>また、デザインのアクセントとして、\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fs2-character\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>S2 のオリジナルキャラクター\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>を随所に大胆に使用\u003C\u002Fstrong>しています。社員旅行という遊び心あふれるテーマに合わせ、親しみやすく楽しい雰囲気を感じられる仕上がりになりました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"h6936b451cc\">\u003Cstrong>スケジュール機能\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>当初の構成にはなかった\u003Cstrong>「スケジュール」機能\u003C\u002Fstrong>をデザインに加えました。\u003Cbr>\u003Cbr>北海道出身の社員から目的地や北海道に関する情報を聞き、注意事項や各スポットでできるアクティビティ、場所の簡単な説明などを写真付きで記載しました。次の目的地をイメージしやすいよう構成を工夫しています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"hfce69b5a73\">\u003Cstrong>ミッション画面\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>社員旅行アプリの\u003Cstrong>目玉の一つが「ミッション機能」\u003C\u002Fstrong>。\u003Cbr>この機能は、\u003Cstrong>参加者が旅行中に様々なアクティビティを楽しみながら写真を投稿し、ミッションを達成することでポイントを獲得できる仕組み\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>ミッションの目的は、\u003Cstrong>「全員が共有できる体験」を作り出すこと\u003C\u002Fstrong>。例えば、2日目は丸一日自由時間、初日の夜もそれぞれが自由に過ごせる時間があり、個人で行動する場面が多くなる状況でした。そんな中、ミッションを通じて共通の話題や目標を持つことで、一体感を生み出す狙いがあります。\u003Cbr>\u003Cbr>ミッションは、社員旅行前にチームでアイデアを出し合って決定。\u003Cbr>例えば「〇〇の写真を撮る」「地元の名物を食べる」といった課題に加え、社員の写真を撮影するというミッションも加えました。これにより、ポイント獲得だけでなく、\u003Cstrong>自然と社員同士の交流が生まれ、思い出として写真に残る仕組み\u003C\u002Fstrong>を意識しました。\u003Cbr>\u003Cbr>さらに、ポイントを獲得するだけではなく、何度も投稿したくなるよう、投稿そのものが楽しめるデザインを目指しています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4d1420c6286c498a85b2cc0e6dc734ce\u002F%E5%AE%8C%E6%88%90-3.png?w=450&h=975\" alt=\"ミッション画面\" width=\"450\" height=\"975\">\u003C\u002Ffigure>\u003Ch2 id=\"h04aefaf859\">開発\u003C\u002Fh2>\u003Ch3 id=\"h5c4db552d5\">UI 開発\u003C\u002Fh3>\u003Cp>デザインも決まったので本格的に実装を進めていきます。\u003Cbr>\u003Cstrong>今回の開発では「デザイナーにあまり負担をかけたくない」という方針を大前提\u003C\u002Fstrong>とし、できるだけ実装側で解決できるよう工夫しました。これにより、デザインの修正や調整にかかる手間を減らしつつ、スムーズな開発を目指しました。\u003C\u002Fp>\u003Cp>基本的には淡々と実装していくのみですが、特に工夫した点や注力した箇所についていくつかご紹介します。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"h8cd10f94c9\">\u003Cstrong>地味に面倒なヘッダー、フッターのカーブ\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc5adbcc7a69a45ed8c4653019731091e\u002F%E3%82%AB%E3%83%BC%E3%83%96.png?w=250&h=543\" alt=\"カーブ\" width=\"250\" height=\"543\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Cbr>Figma では Rectangle と Elipse を重ねて書いたようで、私には上手く扱うスキルがありません。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fae6e440113ac487080be4b20c1b3283e\u002F%E9%96%8B%E7%99%BA%E7%94%BB%E9%9D%A2.png?w=650&h=239\" alt=\"開発画面\" width=\"650\" height=\"239\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Cp>「別の方法で描いてもらう」「SVG で書き出してもらう」といった選択肢もありましたが、\u003Cstrong>実装してみること自体が経験になるし、楽しめそう\u003C\u002Fstrong>だと思ったので、コードで書いてみることにしました。\u003C\u002Fp>\u003Cp>\u003Cstrong>ヘッダー\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-dart\">AppBar(\n    shape: const HeaderAppBarShape(),\n    :\n);\n\nclass HeaderAppBarShape extends ContinuousRectangleBorder {\n  const HeaderAppBarShape();\n  final bottomPadding = 12.0;\n\n  @override\n  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {\n    var path = Path();\n    path.moveTo(0, 0);\n    path.lineTo(0, rect.height - bottomPadding);\n\n    path.quadraticBezierTo(\n        rect.width \u002F 2,\n        rect.height - 50,\n        rect.width,\n        rect.height - bottomPadding\n    );\n    path.lineTo(rect.width, 0);\n    path.lineTo(0, 0);\n    path.close();\n\n    return path;\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cbr>\u003Cstrong>フッター\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-dart\">ClipPath(\n    clipper: BottomNavigationBackgroundClipper(),\n    :\n);\n\nclass BottomNavigationBackgroundClipper extends CustomClipper<Path> {\n  final topPadding = 12.0;\n\n  @override\n  getClip(Size size) {\n    var path = Path();\n    path.moveTo(0, topPadding);\n    path.quadraticBezierTo(size.width \u002F 2, 60, size.width, topPadding);\n\n    path.lineTo(size.width, size.height);\n    path.lineTo(0, size.height);\n    path.lineTo(0, topPadding);\n    path.close();\n    return path;\n  }\n\n  @override\n  bool shouldReclip(BottomNavigationBackgroundClipper oldClipper) => false;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>改めて見るとかなり雑ですが、これで実現できました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"hc55027b20a\">\u003Cstrong>スケジュール表記\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>よく見かけるタイプのUIですが、いざ実装となるとどう組み立てるか一瞬考えさせられます。\u003Cbr>さらに、スケジュールはギリギリまで変更が入る可能性があるため、\u003Cstrong>変更に対応しやすい形で設計\u003C\u002Fstrong>する必要がありました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F9e133d2e6f544563b1b60581406d639b\u002F%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB.png?w=350&h=458\" alt=\"スケジュール\" width=\"350\" height=\"458\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>よく見ると 9:20～9:30 の間隔と 9:30～10:00 の間隔が違うのでこれも考慮しつつ、MEMO のように長文が入る場合は、デバイスの幅によって高さ(行数)が変化するため、左に走る縦線も右側の要素の高さに合わせて自動で伸びるようにしたいと考えました。\u003C\u002Fp>\u003Cp>こうした点を踏まえ、基本的には \u003Cstrong>Table\u003C\u002Fstrong> を活用しつつ、各パーツを関数化して編集が容易な形で実装を進めました。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-dart\">Table(\n    defaultColumnWidth: const IntrinsicColumnWidth(),\n    columnWidths: const {\n      2: FlexColumnWidth(1),\n    },\n    children: [\n      scheduleTimeStart("9:20", "ホテルのロビーに集合"),\n      scheduleSpacer(24),\n      scheduleTime("9:30", "ホテル出発"),\n      scheduleSpacer(40),\n      scheduleTime("10:00 - 11:00", "観光２"),\n      scheduleSpacer(24),\n      scheduleContents([\n        scheduleContentTitleWithLink("場外市場", "https:\u002F\u002Fwww.jyogaishijyo.com\u002F"),\n        const SizedBox(height: 16),\n        Text("個性いっぱいの60店舗！", style: CustomTextStyles.scheduleBody),\n        const SizedBox(height: 32),\n        const ScheduleTag(title: "MEMO"),\n        const SizedBox(height: 16),\n        Text(\n            """ツアーというほど時間もないですが海産物を買い漁ったりしてみてください\n食事を狙うのもあり（混み具合をよく見てね）（あとすぐ昼食だよ）""",\n            style: CustomTextStyles.scheduleBody,\n        ),\n      ]),\n      scheduleSpacer(40),\n      scheduleTime("11:30 - 13:15", "お昼と観光３"),\n      :\n    ],\n);\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cbr>関数の中身は例えばこんな感じです。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-dart\">TableRow scheduleTime(String time, String title, {RichText? richText}) {\n  return TableRow(\n    children: [\n      TableCell(\n        verticalAlignment: TableCellVerticalAlignment.fill,\n        child: Stack(\n          alignment: Alignment.center,\n          children: [\n            Positioned(\n              top: 0,\n              bottom: 0,\n              child: Container(\n                width: 4,\n                color: CustomColors.scheduleBar,\n              ),\n            ),\n            Positioned(\n              top: 4,\n              child: Container(\n                width: 16,\n                height: 16,\n                decoration: const ShapeDecoration(\n                  color: CustomColors.scheduleDot,\n                  shape: OvalBorder(),\n                ),\n              ),\n            ),\n          ],\n        ),\n      ),\n      const SizedBox(width: 8),\n      Row(\n        crossAxisAlignment: CrossAxisAlignment.start,\n        children: [\n          Text(time, style: CustomTextStyles.scheduleTime),\n          const SizedBox(width: 16),\n          richText ?? Text(title, style: CustomTextStyles.scheduleTimeTitle),\n        ],\n      ),\n    ],\n  );\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3 id=\"hb7426e2514\">システム開発\u003C\u002Fh3>\u003Ch4 id=\"hc3bd5f627a\">\u003Cstrong>Firestore\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>最終的に、以下のような形で \u003Cstrong>Entity\u003C\u002Fstrong> を定義し、Firestore に保存しています。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-dart\">\u002F\u002F ミッション情報\nclass Mission {\n  final String id;\n  final String title;    \u002F\u002F 撮影するお題\n  final String category; \u002F\u002F カテゴリー名("FOOD", "PLACE" など)\n  final int point;       \u002F\u002F 達成時の獲得ポイント数\n  final int sortKey;     \u002F\u002F 並び替え用のキー\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode class=\"language-dart\">\u002F\u002F メンバー情報\nclass Member {\n  final String id;\n  final String accountName;             \u002F\u002F アカウント名(表示名)\n  final int totalPoint;                 \u002F\u002F 総獲得ポイント数\n  final Map<String, int> categoryPoint; \u002F\u002F 各カテゴリーごとの獲得ポイント数\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>ユーザーアクションによってのみポイントが変動するため、都度集計するのではなく、増減値を直接保持する形にしました。\u003Cbr>\u003Cbr>各カテゴリーごとにランキングを集計して表示するために、\u003Ccode>categoryPoint\u003C\u002Fcode> を設けています。\u003Cbr>\u003Ccode>totalPoint\u003C\u002Fcode> の増減に合わせて \u003Ccode>categoryPoint\u003C\u002Fcode> も編集する設計にしました(後から考えると \u003Ccode>categoryPoint\u003C\u002Fcode> だけで全体のポイントも表現できるため、\u003Ccode>totalPoint\u003C\u002Fcode> は不要だったかもしれません)。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-dart\">\u002F\u002F メンバーごとのミッション達成状況\ntypedef MemberMission = Map<String, int?>;\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>投稿の削除が可能であり、同じミッションに複数回投稿できる仕様のため、以下の設計を採用しています。\u003C\u002Fp>\u003Cul>\u003Cli>各メンバーごとに、そのミッションに対して\u003Cstrong>何回投稿しているか\u003C\u002Fstrong>をカウント\u003C\u002Fli>\u003Cli>カウントの変化に応じてポイントを増減\u003Cul>\u003Cli>\u003Cstrong>0 ⇨ 1\u003C\u002Fstrong> に変化した際：ポイントを増加\u003C\u002Fli>\u003Cli>\u003Cstrong>1 ⇨ 0\u003C\u002Fstrong> に変化した際：ポイントを減少\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>このカウントは、ミッションの達成状況（フラグ）としても利用\u003C\u002Fli>\u003C\u002Ful>\u003Cpre>\u003Ccode class=\"language-dart\">\u002F\u002F 投稿情報\nclass Post {\n  final String id;\n\n  final String memberId;        \u002F\u002F 投稿したメンバーのID\n  final String accountName;     \u002F\u002F 投稿したメンバーの表示名\n\n  final String missionId;       \u002F\u002F 投稿対象のミッションID\n  final String title;           \u002F\u002F 投稿対象のミッションのお題名\n  final String category;        \u002F\u002F 投稿対象のミッションのカテゴリー名\n  final int point;              \u002F\u002F 投稿対象のミッションの達成時の獲得ポイント\n\n  final DateTime createdAt;     \u002F\u002F 投稿日時（タイムラインでのソートキーになる）\n  final List<PostImage> images; \u002F\u002F 画像の情報\n  final String comment;         \u002F\u002F 画像に対する投稿者のコメント\n  final String? slackTs;        \u002F\u002F 紐づいた Slack の timestamp\n}\n\n\u002F\u002F 投稿画像情報\nclass PostImage {\n  final String mainUrl;         \u002F\u002F メイン画像の公開URL\n  final String thumbnailUrl;    \u002F\u002F サムネイル画像の公開URL\n  final String path;            \u002F\u002F Cloud Storage のパス\n  final int width;              \u002F\u002F 画像の幅\n  final int height;             \u002F\u002F 画像の高さ\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>前半はすべて Mission と Member の値をコピーしています。\u003C\u002Fp>\u003Cp>今回のシステムでは、利用開始後にアカウント名やミッション情報が編集されることはありません。そのため、投稿情報を表示するたびに他のコレクションを参照するよりも、\u003Cstrong>必要なデータをコピーして保持する方が、高速かつシンプル\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>画像データは \u003Cstrong>Cloud Storage\u003C\u002Fstrong> に保存し、以下の工夫を取り入れました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>パフォーマンス最適化\u003C\u002Fstrong>\u003Cbr>ダウンロード用の URL を発行し、投稿データに格納することで、画像取得を効率化\u003C\u002Fli>\u003Cli>\u003Cstrong>認証への配慮\u003C\u002Fstrong>\u003Cbr>認証機能を利用していますが、発行される URL は推測が難しい形式のため、セキュリティ面も問題ないと判断\u003C\u002Fli>\u003C\u002Ful>\u003Cp>さらに、投稿データには \u003Cstrong>width\u003C\u002Fstrong> と \u003Cstrong>height\u003C\u002Fstrong> を保持する設計に。\u003Cbr>画像のアスペクト比を元に、読み込み中のプレースホルダー表示で正確なサイズを確保できます。これにより、画面がガタガタすることなく、スムーズなレイアウトが実現します。\u003C\u002Fp>\u003Cp>\u003Ccode>slackTs\u003C\u002Fcode> は、うっかり投稿すべきでない写真を選択してしまった場合、投稿後に削除しても Slack 上に残る問題が発生する可能性がありました。\u003Cbr>そこで、Slack の投稿時に得られるタイムスタンプを記録し、\u003Cstrong>投稿が削除された際には Slack 上の投稿も連動して削除\u003C\u002Fstrong>するように実装しました。\u003Cbr>\u003Cbr>これらの設計により、投稿の表示速度、画像の読み込み体験、そして Slack 連携の安全性と利便性を高めることができました。\u003C\u002Fp>\u003Cp>ちなみにルールは想像の通りですが、\u003C\u002Fp>\u003Cp>\u003Cstrong>Firestore\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-javascript\">rules_version = '2';\n\nservice cloud.firestore {\n  match \u002Fdatabases\u002F{database}\u002Fdocuments {\n  \tfunction requireS2FDomain() {\n  \t\treturn request.auth != null && request.auth.token.email.matches('.*@s2factory[.]co[.]jp$');\n    }\n    \n    match \u002Fmember_mission\u002F{userId} {\n      allow write: if requireS2FDomain() && request.auth.uid == userId;\n      allow read: if requireS2FDomain();\n    }\n    match \u002Fmembers\u002F{userId} {\n      allow write: if requireS2FDomain() && request.auth.uid == userId;\n      allow read: if requireS2FDomain();\n    }\n    match \u002Fmissions\u002F{document=**} {\n      allow write: if false;\n      allow read: if requireS2FDomain();\n    }\n    match \u002Fposts\u002F{document=**} {\n      allow update, delete: if requireS2FDomain() && resource.data.memberId == request.auth.uid;\n      allow read, create: if requireS2FDomain();\n    }\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cbr>\u003Cstrong>Storage\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-javascript\">rules_version = '2';\n\nservice firebase.storage {\n  match \u002Fb\u002F{bucket}\u002Fo {\n  \tfunction requireS2FDomain() {\n  \t\treturn request.auth != null && request.auth.token.email.matches('.*@s2factory[.]co[.]jp$');\n    }\n    \n    match \u002F{userId}\u002F{allPaths=**} {\n      allow write: if requireS2FDomain() && request.auth.uid == userId;\n      allow read: if requireS2FDomain();\n    }\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>requireS2FDomain\u003C\u002Fcode> によって、\u003Cstrong>特定ドメインのメールアドレスを持つ認証済みアカウントのみアクセスを許可\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fworkspace.google.com\u002Fintl\u002Fja\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Google Workspace\u003C\u002Fa> を利用して特定のドメインで絞り込む方法も考えられますが、今回は Workspace を使っていない組織でも同様のことが実現できるか試す意図もあり、別の形で実装しました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"h5052bae7d3\">\u003Cstrong>投稿時の処理フロー\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>最も肝となる投稿時の流れは以下の通りです。\u003C\u002Fp>\u003Col>\u003Cli>ログイン状態のチェック\u003C\u002Fli>\u003Cli>写真のアップロード(複数)\u003Col>\u003Cli>画像の幅と高さを取得\u003C\u002Fli>\u003Cli>メインサイズとサムネイルサイズに縮小\u003C\u002Fli>\u003Cli>それぞれ Cloud Storage へアップロード\u003C\u002Fli>\u003Cli>ダウンロードURLの取得\u003C\u002Fli>\u003C\u002Fol>\u003C\u002Fli>\u003Cli>MemberMission を取得し投稿済みかどうかをチェック\u003C\u002Fli>\u003Cli>未投稿であれば Member の totalPoint と categoryPoint を加算\u003C\u002Fli>\u003Cli>MemberMission を更新\u003C\u002Fli>\u003Cli>Post を作成\u003C\u002Fli>\u003C\u002Fol>\u003Cp>処理が重くなりがちな部分には \u003Ccode>Future\u003C\u002Fcode> を使用し、並列化して処理時間を短縮。ユーザーが待てる範囲の速度を維持しました。\u003Cbr>3～6 の Firestore への書き込みはトランザクション処理を利用して一貫性を確保。初めての利用でしたが、実装がシンプルで非常に使いやすいと感じました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"h2e856c9f6a\">\u003Cstrong>Slack への投稿\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>Slack への投稿はそれほど難しくありませんが、アクセストークンを付与したリクエストを行う必要があります。\u003Cbr>社内で使うものなので、フロントエンドにアクセストークンを持たせても問題ないのですが、\u003Cstrong>普段からセキュリティには注意を払っているため、たとえ社内向けのアプリでもそれは気持ち悪く感じてしまいます。\u003C\u002Fstrong>\u003Cbr>\u003Cbr>しかし、\u003Cstrong>バックエンドを実装しないというポリシーで開発を進めてきた\u003C\u002Fstrong>ため、アクセストークンをどこに隠蔽するかを検討。\u003Cbr>考えた末、以下のようにプロキシを利用することにしました。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-shell\"># Slack API\nSetEnvIf Request_URI "^\u002Fslack-notification\u002F" IS_SLACK\nRequestHeader SET host "slack.com" env=IS_SLACK\nRequestHeader SET authorization "Bearer xoxb-*******" env=IS_SLACK\nRewriteRule ^slack-notification\u002F(.*) https:\u002F\u002Fslack.com\u002Fapi\u002F$1 [P,L]\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>社内の認証で保護されたサーバー上で運用しているため、不正なアクセスができない構造になっています。\u003Cbr>この方法でアクセストークンを安全に隠蔽しつつ、Slack への投稿機能を実現しました。\u003C\u002Fp>\u003Ch2 id=\"hde965b176a\">完成\u003C\u002Fh2>\u003Cp>完成したものがこちらです。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc7b9740bfa854cbdb96fe92a8779cf50\u002F%E5%AE%8C%E6%88%90-1.png?w=450&h=975\" alt=\"スケジュール画面\" width=\"450\" height=\"975\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4d1420c6286c498a85b2cc0e6dc734ce\u002F%E5%AE%8C%E6%88%90-3.png?w=450&h=975\" alt=\"ミッション\" width=\"450\" height=\"975\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fa4d91f5859e44699b470d67def9420f5\u002F%E5%AE%8C%E6%88%90-4.png?w=450&h=975\" alt=\"ミッション\" width=\"450\" height=\"975\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F448baf19bffb4b59bcc68698921bdea5\u002F%E5%AE%8C%E6%88%90-2.png?w=450&h=975\" alt=\"タイムライン\" width=\"450\" height=\"975\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F71b1da2da1614a95a6ae46c0d4a0c09e\u002F%E5%AE%8C%E6%88%90-5.png?w=450&h=975\" alt=\"メンバー\" width=\"450\" height=\"975\">\u003C\u002Ffigure>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>みんな楽しんでくれたようで、\u003Cstrong>評判は上々\u003C\u002Fstrong>でした。 \u003Cbr>\u003Cbr>最終日には、ミッションの獲得ポイントを集計し、\u003Cstrong>上位3名を表彰\u003C\u002Fstrong>。\u003Cstrong>カテゴリーごとのランキングトップと総合得点トップの参加者に景品を授与\u003C\u002Fstrong>し、社員旅行を締めくくりました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ffec90573c3104638ba5a8a3cf930a1bb\u002F%E6%9C%A8%E5%BD%AB%E3%82%8A%E3%81%AE%E7%86%8A.jpeg?w=650&h=447\" alt=\"賞品の木彫りの熊\" width=\"650\" height=\"447\">\u003Cfigcaption>賞品の木彫りの熊\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>サービスは旅行後も残しておき、参加者からは\u003Cstrong>「思い出を振り返ったり、家族に旅行の話をするときに便利だった」\u003C\u002Fstrong>といった声も寄せられました。\u003C\u002Fp>\u003Cp>普段の業務では、利用者の顔が直接見えない場面での開発が多い中、今回は\u003Cstrong>「自分が作ったものを便利に楽しく使ってもらう」というモノづくりの醍醐味を久しぶりに実感\u003C\u002Fstrong>でき、やってよかったと感じています。\u003C\u002Fp>\u003Cp>ちなみに、\u003Cstrong>Google Cloud のインフラ費用は、開発・テスト期間も含めて税込 15 円\u003C\u002Fstrong>(工夫の甲斐あってか、想像以上に安く済みました)。\u003Cbr>一方で、バックエンドを実装しない方針にこだわりすぎた結果、無理をした部分もあり、その影響でいくつかのバグが発生してしまいました。次回は方針を少し緩め、バックエンドを取り入れることも検討しようと思います。\u003Cbr>\u003Cbr>また、自分も参加者として旅行に参加する中で、出先での改修が難しい場面も多く、変更が発生しそうな部分については、\u003Cstrong>あらかじめ CMS を用意しておくべきだったというのが反省\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>今回は、開発スピードを重視し、デザイン以外は一人で手掛けるという制約のもとで進めたため、内容的にはプロダクト品質には程遠いものでしたが、それでも何かの参考になれば幸いです。\u003Cbr>\u003Cbr>\u003Cstrong>また、こうしたアプリの開発に興味がある方やご相談をご希望の方は、ぜひお気軽に\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fcontact\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>\u003Cu>お問い合わせ\u003C\u002Fu>\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>ください。私たちが全力でサポートいたします。\u003C\u002Fstrong>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fcontact&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>",[],{"id":65,"createdAt":209,"updatedAt":210,"publishedAt":210,"revisedAt":210,"title":211,"tag":212,"recommended_articles":218,"eyecatch":219,"heading_list":14,"content2":223,"related_articles":224,"recruit":21,"is_html":14,"is_migration":14},"2024-03-12T07:44:34.099Z","2025-04-23T06:51:16.526Z","社員旅行に行ってきました！",[213,214,215,216,217],{"id":16},{"id":174},{"id":178},{"id":11},{"id":23},[],{"url":220,"height":221,"width":222},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fb3525caaf6a946109797b5618e5558ef\u002Fvacation2023-1.JPG.png",488,650,"\u003Cp>寒暖定まらぬこの頃ですが、皆様いかがお過ごしでしょうか。\u003Cbr>年度末を控え何かと慌ただしくなりがちですが、どうかご自愛ください。\u003Cbr>\u003Cbr>\u003Cbr>さて、弊社は先日の3月6日で創業18年目を迎えたのですが、なんと昨年、\u003Cstrong>長年の目標であった社員旅行を決行\u003C\u002Fstrong>しました。\u003Cbr>\u003Cstrong>新しいオフィスへの引っ越しと合わせて、新たなスタートを切る良い機会\u003C\u002Fstrong>になったと思います。\u003Cbr>\u003Cbr>\u003Cstrong>行き先は宮古島\u003C\u002Fstrong>。\u003Cbr>太陽の光がきらめき、青い海と白い砂浜が織りなすまさに楽園。\u003Cbr>初めこそ少し雨が降っていましたが、その後はずっと快晴で最高でした。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F58b1b3496ac04da9ae5cc49de822443d\u002FIMG_1960.png\" alt=\"空港\" width=\"650\" height=\"488\">\u003Cfigcaption>空港に到着してすぐは雨が降っていたのですが、すぐに晴れ間が見えました。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fad32f2725f824ab99e48fd051e331074\u002Fvacation2023-1.JPG\" alt=\"S2旗\" width=\"650\" height=\"488\">\u003Cfigcaption>社員旅行のために作ったS2旗\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fd232e326dcc047cc9fb4bc38c2c1853b\u002F20230826_094430.jpg\" alt=\"海\" width=\"650\" height=\"488\">\u003Cfigcaption>青い空、白い砂浜\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fff7f491f02e74967ba196bdc70bebb44\u002FIMG_2002.png\" alt=\"海とアクスタ\" width=\"650\" height=\"867\">\u003Cfigcaption>アクスタで思い出作り\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Feed17cd3bf4f4adc851fb34bfc6ef76e\u002FIMG_2039.png\" alt=\"夜の海\" width=\"650\" height=\"488\">\u003Cfigcaption>夜の海\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Cstrong>参加人数は総勢28人\u003C\u002Fstrong>。\u003Cbr>\u003Cstrong>夕食以外の時間は基本的に自由行動\u003C\u002Fstrong>とし、数人で島を観光するグループや、レンタカーを借りて一人でドライブする人、ダイビングやカヤック、パラセーリングなどのアクティビティを楽しむ人など、それぞれが自由に過ごしました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F55c3a84b3b2a490a938e8d92bf33991d\u002F20230826_092305.jpg\" alt=\"\" width=\"650\" height=\"488\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc7f723c8f41841bebc145df1ef446d35\u002F370477365_309873201698295_2329863843918874474_n.jpg?w=650&h=487\" alt=\"パラセーリング\" width=\"650\" height=\"487\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>具体的な行程は以下の通り。\u003Cbr>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>1日目\u003C\u002Fstrong>\u003Cul>\u003Cli>早朝羽田空港に集合\u003C\u002Fli>\u003Cli>昼過ぎに宮古島到着\u003C\u002Fli>\u003Cli>バスで観光しながらホテルへ移動\u003Cul>\u003Cli>神社\u003C\u002Fli>\u003Cli>ビーチ\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>夕食まで自由行動\u003C\u002Fli>\u003Cli>夕食後自由行動\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>2日目\u003C\u002Fstrong>\u003Cul>\u003Cli>夕食まで自由行動\u003C\u002Fli>\u003Cli>夕食後自由行動\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>3日目\u003C\u002Fstrong>\u003Cul>\u003Cli>お土産タイム\u003C\u002Fli>\u003Cli>バスツアー\u003Cul>\u003Cli>海中公園見学\u003C\u002Fli>\u003Cli>昼食\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>宮古空港から羽田へ\u003C\u002Fli>\u003Cli>解散\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>羽田空港が集合・解散地点でしたが、\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fmigration\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>全国に散らばるリモート勤務の社員たち\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>は、それぞれの地域から直接目的地に\u003C\u002Fstrong>集まりました。\u003Cbr>\u003Cbr>2泊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>実は、\u003Cstrong>社員旅行に行くことが決まってから2ヶ月以内に出発\u003C\u002Fstrong>という、かなり急ピッチで計画を練った裏側などもあり結構大変だったのですが、それはまた別で苦労話と反省として紹介できればと考えています。\u003Cbr>皆様が社員旅行を計画する際には参考になる部分もあると思いますので、ぜひご覧になってみてください。\u003Cstrong>乞うご期待\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>そしてなんと、去年の評判が良かったので、\u003Cstrong>今年も社員旅行を実施予定\u003C\u002Fstrong>です。\u003Cbr>現在、プロジェクトチームが中心になって計画を立てています。\u003Cbr>\u003Cbr>まだ行き先が確定したわけではありませんが、\u003Cstrong>今年は北海道\u003C\u002Fstrong>に行くつもりです。\u003Cbr>またブログで報告したいと思います！\u003Cbr>\u003C\u002Fp>",[],{"id":226,"createdAt":227,"updatedAt":228,"publishedAt":228,"revisedAt":228,"title":229,"tag":230,"recommended_articles":240,"eyecatch":241,"heading_list":21,"content2":245,"related_articles":246,"recruit":14,"is_html":14,"is_migration":14},"corporate-ekiden2025","2025-05-13T01:06:34.640Z","2025-07-22T06:11:50.449Z","チームTシャツを作って、企業対抗駅伝に出場した話",[231,233,234,236,238,239],{"id":232},"workshop",{"id":23},{"id":235},"exercise",{"id":237},"club",{"id":178},{"id":16},[],{"url":242,"height":243,"width":244},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F46fef95e7ab24d498f80fb7410324327\u002F%E9%9B%86%E5%90%88%E5%86%99%E7%9C%9F.jpg",1151,1500,"\u003Cp>S2 ではこれまで、\u003Cstrong>有志による社内部活動\u003C\u002Fstrong>のようなかたちで、いくつかのイベントに参加してきました。\u003Cbr>たとえば、\u003Cstrong>自転車部でツール・ド・東北に出場\u003C\u002Fstrong>したり、\u003Cstrong>esports 部で大会やイベント\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\u002Ftour-de-tohoku2024\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Ftour-de-tohoku2024%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\u002Fesports-club-4\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fesports-club-4%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>\u003Cbr>そうした取り組みのひとつとして、今回は\u003Cstrong>駅伝大会に出場\u003C\u002Fstrong>することになりました。\u003Cbr>参加したのは\u003Cstrong>「\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fsportsone.jp\u002Fed\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>企業対抗駅伝2025\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>」\u003C\u002Fstrong>の東京大会。\u003Cbr>初めての試みとなったこの駅伝について、準備から当日までの様子を振り返りたいと思います。\u003C\u002Fp>\u003Ch2 id=\"hdf9e1261f8\">出場の経緯\u003C\u002Fh2>\u003Cp>今回の駅伝参加は、日頃からランニングを続けているスタッフとの\u003Cstrong>雑談がきっかけ\u003C\u002Fstrong>でした。\u003Cbr>「\u003Cstrong>企業対抗の駅伝があるらしいんですが、出てみませんか？\u003C\u002Fstrong>」という話が社内で持ち上がり、参加者を募ってみたところ、思った以上に手が挙がりました。\u003C\u002Fp>\u003Cp>最終的に \u003Cstrong>6 名\u003C\u002Fstrong>が集まり、そのままチームを組んで出場することに。\u003Cbr>出場が決まってからは、メンバーで集まって練習する機会をつくったり、チームTシャツの準備を進めたりと、少しずつ大会に向けた動きが始まりました。\u003C\u002Fp>\u003Ch2 id=\"h3b35c4ccac\">大会について\u003C\u002Fh2>\u003Cp>出場したのは、2025年5月18日(日)にお台場・セントラル広場で開催された「\u003Cstrong>企業対抗駅伝2025 東京大会\u003C\u002Fstrong>」。\u003Cbr>チームでタスキをつなぎながら走るリレー形式のイベントで、企業チームのほか、有志の参加も可能です。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fsportsone.jp\u002Fed\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fsportsone.jp%2Fed%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>\u003Cbr>今回エントリーしたのは、以下の部門。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>部門名\u003C\u002Fstrong>：エンジョイリレーマラソン\u003C\u002Fli>\u003Cli>\u003Cstrong>コース\u003C\u002Fstrong>：1 周 2 kmの周回コース\u003C\u002Fli>\u003Cli>\u003Cstrong>走行数\u003C\u002Fstrong>：チームで計10周(1 人何周でもOK)\u003C\u002Fli>\u003Cli>\u003Cstrong>参加人数\u003C\u002Fstrong>：6 名で出場(1 〜 3 周ずつ担当)\u003C\u002Fli>\u003C\u002Ful>\u003Cp>例年、\u003Cstrong>数百チームが参加する比較的大規模なイベント\u003C\u002Fstrong>で、\u003Cstrong>タイム計測\u003C\u002Fstrong>や\u003Cstrong>順位発表\u003C\u002Fstrong>もあり、上位チームには\u003Cstrong>賞品\u003C\u002Fstrong>の提供も行われます。\u003C\u002Fp>\u003Ch2 id=\"h7986a87e75\">当日に向けて\u003C\u002Fh2>\u003Ch3 id=\"h95cfcc6d64\">走る練習\u003C\u002Fh3>\u003Cp>本番に向けて、\u003Cstrong>業務後に集まって練習をする機会\u003C\u002Fstrong>も設けました。\u003Cbr>弊社では\u003Cstrong>リモートワーク\u003C\u002Fstrong>で働くスタッフが多く、こうして顔を合わせて一緒に走ること自体に、ちょっとした\u003Cstrong>チームづくり\u003C\u002Fstrong>の意味合いもありました。\u003C\u002Fp>\u003Cp>参加者のほとんどはランニング経験が少なく、継続的に走っているメンバーはごく一部。\u003Cbr>「少しだけでも走っておこう」という軽いきっかけから、それぞれのペースで動き始めていきました。\u003C\u002Fp>\u003Cp>一部のメンバーは、ランニングアプリ「\u003Ca href=\"https:\u002F\u002Frunkeeper.com\u002Fja\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Runkeeper\u003C\u002Fstrong>\u003C\u002Fa>」で走行距離やペースを記録し、そのスクリーンショットを Slack のランニングチャンネルに投稿していました。\u003Cbr>「今日は何キロ」「久々に走ったらきつかった」といった報告にリアクションやコメントが返ってくることもあり、直接会わずとも、それぞれの動きがゆるやかにつながっていくようなやりとりが続いていました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F067cf542cf974bd28c9bef1ff0d6ae06\u002Fslack-running.png?w=650&h=348\" alt=\"slackでの会話\" width=\"650\" height=\"348\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>厳密な練習計画があったわけではありませんが、走るという共通項ができたことで、日常の中に少しだけ\u003Cstrong>共有の時間\u003C\u002Fstrong>が差し込まれていたように思います。\u003C\u002Fp>\u003Ch3 id=\"ha223781d85\">チームTシャツを作る\u003C\u002Fh3>\u003Cp>走る練習と並行して、\u003Cstrong>「チーム T シャツもつくろう」\u003C\u002Fstrong>という話が出てきました。\u003Cbr>\u003Cbr>企業対抗駅伝という名前のとおり、当日はロゴ入りのウェアやおそろいのTシャツを着たチームが多く、ちょっとした \u003Cstrong>PR の場\u003C\u002Fstrong>としての側面も見えてきます。\u003Cbr>そうした雰囲気を見越して、こちらも T シャツを作ってみようという話になりました。同じものを着て走るだけでもチームとしての一体感が出ますし、何より気分も盛り上がります。\u003Cbr>\u003Cbr>デザインは、社内の\u003Cstrong>デザインチームが担当\u003C\u002Fstrong>。\u003Cbr>\u003Cstrong>「S2 Running Club(S2RC)」というチーム名\u003C\u002Fstrong>をもとに、いくつかのデザインパターンを考えてくれました。\u003Cbr>\u003Cbr>Tシャツの背面には\u003Cstrong>「S」「2」「R」「C」\u003C\u002Fstrong>の文字を、それぞれ 3 種類の\u003Cstrong>線の太さから選んで自由に配置\u003C\u002Fstrong>。\u003Cbr>\u003Cstrong>インクの色も多数用意されており\u003C\u002Fstrong>、好みの色をそのまま使う人もいれば、\u003Cstrong>複数の色を混ぜて自分だけの色を作る人\u003C\u002Fstrong>もいました。\u003Cbr>前面のロゴと背面下部の共通テキスト(大会名とメンバー名)は全員お揃いですが、背面の S2RC ラインによって、それぞれのTシャツに自然と個性が出る仕上がりになっています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1ba3d8ae930b4c7cb0dbf75046cdded9\u002FS2godds_Tshirt-design.png\" alt=\"全員のチームTシャツ\" width=\"1920\" height=\"1280\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>プリントは、以前の\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ffamily-day-2\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">ファミリーデーイベント\u003C\u002Fa>でも使った\u003Cstrong>社内のシルクスクリーンプリンター\u003C\u002Fstrong>を活用し、\u003Cstrong>自分たちで印刷作業\u003C\u002Fstrong>を行いました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F425b7040a096482f9b47187c4a96a2cc\u002FIMG_1740.jpg?w=600&h=799\" alt=\"印刷作業\" width=\"600\" height=\"799\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fe2783d4440f64d618ff9771d9d068e96\u002FIMG_1748.jpg?w=600&h=799\" alt=\"色を混ぜる\" width=\"600\" height=\"799\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fdcc5074f15d648aeb699a2a71660eef0\u002FIMG_1730.jpg?w=600&h=799\" alt=\"乾燥中\" width=\"600\" height=\"799\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>素材もドライタイプのランニング用からコットン素材の普段使い向けまで、好みに合わせて選択。サイズや色も自由だったため、シルエットも含めてメンバーごとに少しずつ異なる一着となりました。\u003Cbr>自然とワークショップのような雰囲気にもなり、\u003Cstrong>チームで何かを作るというプロセス自体も良い準備\u003C\u002Fstrong>のひとつになった気がします。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F3c2001d7b8a24d7a92d69f4f42f12e2d\u002FS2godds_Tshirt-design_omote.png?w=1920&h=1280\" alt=\"前面\" width=\"1920\" height=\"1280\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F265181a6fc204c28a0cf84211d7e2dcd\u002FT-shirt.png\" alt=\"\" width=\"1200\" height=\"1612\">\u003C\u002Ffigure>\u003Ch2 id=\"h6142f4b8c5\">駅伝当日\u003C\u002Fh2>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F46fef95e7ab24d498f80fb7410324327\u002F%E9%9B%86%E5%90%88%E5%86%99%E7%9C%9F.jpg\" alt=\"\" width=\"1500\" height=\"1151\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>当日の天気は曇り。風も適度にあり、暑すぎることもなく、走るにはちょうどいいコンディション。\u003Cbr>会場となったお台場・セントラル広場には、企業や有志のチームが多数集まり、T シャツやのぼりを揃えるなどそれぞれのカラーが垣間見えるにぎやかな雰囲気で、中には会社の\u003Cstrong>マスコットキャラクターの着ぐるみ\u003C\u002Fstrong>を連れてきている企業もあり、ちょっとした注目を集めていました。\u003C\u002Fp>\u003Cp>今回、私たちが出場したのは「エンジョイリレーマラソン」部門。\u003Cbr>“楽しんで走る”というコンセプトで設定された枠で、リレー形式で全10周を走り切る内容です。競技性よりもチームでの参加や達成感を重視したカテゴリですが、それでもしっかりと\u003Cstrong>タイム計測や順位発表\u003C\u002Fstrong>があるため、走る側としては程よい緊張感もありました。\u003C\u002Fp>\u003Cp>スタート前は少しそわそわした空気もありましたが、いざ走り出してみると、思いのほかスムーズにタスキがつながっていきます。\u003Cbr>途中のトラブルもなく、全員がそれぞれのペースでゴールまで走り切ることができて良かったです。\u003C\u002Fp>\u003Cp>順位は振いませんでしたが、\u003Cstrong>チームとして無事に走り終えたという達成感\u003C\u002Fstrong>はしっかり味わえたと思います。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fe3622e41c5824237b3cd2911324ed286\u002F%E5%AE%8C%E8%B5%B0%E8%A8%BC.jpg?w=650&h=866\" alt=\"完走証\" width=\"650\" height=\"866\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>また、会場には応援に来てくれたスタッフもおり、レース後には\u003Cstrong>ドリンクやアイスの差し入れ\u003C\u002Fstrong>も。\u003Cbr>沿道からの声援や、ひんやりとした甘いものが、疲れた体に沁みました。\u003C\u002Fp>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>練習会を開いたり、チームTシャツを作ったり、日々の練習を Slack で共有したりと、チームとして取り組んできたことが、大会当日の形につながったのは素直に良かったと思います。\u003Cbr>すでに\u003Cstrong>「またランニング系のイベントに出てみたい」\u003C\u002Fstrong>という声も上がっており、それだけでも今回やってみた意味はあったのではないでしょうか。\u003C\u002Fp>\u003Cp>今回の「S2 Running Club」はこの大会をきっかけに生まれたチームですが、\u003Cstrong>S2 には他にも自転車部やesports部、園芸部に写真部など\u003C\u002Fstrong>、様々な部活があります。\u003Cbr>今後もなにか面白い取り組みがあれば、こちらのブログで紹介していきますので、ぜひ引き続きチェックしてみてください。\u003Cbr>\u003Cbr>なお、今回の T シャツのように、\u003Cstrong>S2 ではウェブ関連だけでなく、\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fct3\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>名刺\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>や\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fkurama\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>ロゴ\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>など、幅広くデザイン制作\u003C\u002Fstrong>を行っております。\u003Cbr>「こういうの一緒に作れないかな？」というご相談があれば、お気軽に\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fcontact\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>お問い合わせ\u003C\u002Fstrong>\u003C\u002Fa>ください。\u003C\u002Fp>",[],{"id":248,"createdAt":249,"updatedAt":250,"publishedAt":251,"revisedAt":250,"title":252,"tag":253,"recommended_articles":264,"eyecatch":265,"heading_list":21,"content2":268,"related_articles":269,"recruit":21,"is_html":14,"is_migration":14},"tour-de-tohoku2024","2024-09-27T00:55:12.120Z","2025-06-12T07:41:26.811Z","2024-11-12T07:41:26.000Z","ツール・ド・東北 2024",[254,255,256,258,259,261,263],{"id":235},{"id":237},{"id":257},"bicycle-club",{"id":16},{"id":260},"hobby",{"id":262},"sports",{"id":23},[],{"url":266,"height":267,"width":244},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F0c276b04c24448f6b52112e2af857952\u002FIMG_5982.jpg",1125,"\u003Cp>秋も深まり、木々の色づきが美しくなってきましたが、皆様いかがお過ごしでしょうか。\u003Cbr>季節の変わり目で体調を崩しやすい時期ですので、どうぞご自愛ください。\u003C\u002Fp>\u003Cp>さて、昨年に続いて、\u003Cstrong>今年も弊社の自転車部がツールド東北に参加\u003C\u002Fstrong>してきました。\u003Cbr>その活動を報告したいと思いますので、ぜひ最後までご覧ください！\u003C\u002Fp>\u003Cp>昨年の様子はこちら。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ftour-de-tohoku2023\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Ftour-de-tohoku2023%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch2 id=\"h530d646dcd\">ツールド東北とは\u003C\u002Fh2>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Ftourdetohoku.jp\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Ftourdetohoku.jp%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>\u003Cstrong>「ツール・ド・東北（Tour de Tohoku）」\u003C\u002Fstrong>は、\u003Cstrong>2013年から始まったサイクリングイベント\u003C\u002Fstrong>で、\u003Ca href=\"https:\u002F\u002Fwww.lycorp.co.jp\u002Fja\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">LINEヤフー株式会社\u003C\u002Fa>と\u003Ca href=\"https:\u002F\u002Fwww.kahoku.co.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">河北新報社\u003C\u002Fa>が主催しています。\u003Cbr>\u003Cstrong>2011年に発生した東日本大震災の復興支援と地域振興を目的\u003C\u002Fstrong>として始められ、毎年多くのサイクリストが参加してきました。\u003C\u002Fp>\u003Cp>参加者は、東北の海岸沿いや山間の風景を楽しめる様々なコースを走ります。\u003Cbr>コースの途中にはエイドステーションが設置されており、\u003Cstrong>地元の特産品を使用した食事や飲み物が提供され、東北の風土を感じながら楽しめるのが特徴\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\u002FviQ2lAu7Aro?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Cp>\u003Cbr>\u003Cbr>\u003Cstrong>コースは全部で 3 つ。\u003C\u002Fstrong>\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ctable>\u003Ctbody>\u003Ctr>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>日時\u003C\u002Fp>\u003C\u002Fth>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>コース\u003C\u002Fp>\u003C\u002Fth>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>走行距離\u003C\u002Fp>\u003C\u002Fth>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>9月15日（日）6:00〜順次\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>気仙沼大谷海岸フォンド\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>180km\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>9月15日（日）7:15〜順次\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>北上フォンド\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>100km\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>9月15日（日）9:00〜順次\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>女川・雄勝フォンド\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>65km\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>\u003Cbr>去年は、コロナ明け初の開催ということもあり、5 つのコースが用意されていましたが、今年は 3 コースに縮小されました。\u003Cbr>また、\u003Cstrong>前回は専用のアプリが提供\u003C\u002Fstrong>されていたものの、\u003Cstrong>今回は\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fridewithgps.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>既存のアプリ\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>を使う形に変更\u003C\u002Fstrong>され、位置情報を随時共有する機能もなくなっています。\u003C\u002Fp>\u003Ch2 id=\"h2fcd741e88\">ツールド東北に向けて\u003C\u002Fh2>\u003Cp>\u003Cstrong>昨年は弊社の自転車部から 2 人が参加\u003C\u002Fstrong>したのですが、\u003Cstrong>現地までの移動や出走コースも別々\u003C\u002Fstrong>だったので、部活動としての一体感はあまり感じられず、個人参加のような形になっていました。\u003Cbr>6 人応募したうちの 2 人しか抽選に当たらなかったという理由もあるのですが、それだと会社で参加している意味が薄れてしまいます。\u003Cbr>\u003Cbr>もし来年も参加するのであれば、\u003Cstrong>「もう少しチームとしての一体感を出したい」\u003C\u002Fstrong>と考えていたところ、今年の応募は幸いにも先着順でした。そのため、参加を希望していた 4 名が同時に申し込み、全員での参加が実現。\u003Cbr>\u003Cstrong>車をレンタルして自転車を積み込み、現地まで全員一緒に移動、同じ宿に泊まり、レース当日も同じコースを足並み揃えて走る\u003C\u002Fstrong>という、まさに「チーム」としての一体感を出すための計画を練りました。\u003C\u002Fp>\u003Cp>さらに、事前準備の段階で、企業チームとして参加していることが PR できるよう、\u003Cstrong>弊社のデザインチームがチームゼッケンも作成\u003C\u002Fstrong>。\u003Cbr>当日は全員でこれをつけて走ることにしました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F195b5284b6994d48a19ceb4633d1fa2e\u002F%E3%82%BC%E3%83%83%E3%82%B1%E3%83%B3.jpg?w=650&h=650\" alt=\"ゼッケン\" width=\"650\" height=\"650\">\u003C\u002Ffigure>\u003Ch2 id=\"h20f77f2566\">ツールド東北に出発\u003C\u002Fh2>\u003Ch3 id=\"hcb8433d3da\">1日目\u003C\u002Fh3>\u003Cp>色々と準備を重ね、ついに出発の日がやってきました。\u003Cbr>イベント当日は朝 7 時前後には会場入りしてエントリーを済ませないといけないので、\u003Cstrong>前乗り\u003C\u002Fstrong>です。走り終わってすぐに帰るのは体力的に厳しいという問題もあって、\u003Cstrong>二泊三日\u003C\u002Fstrong>します。\u003Cbr>\u003Cbr>早朝から事前に予約していたレンタカーを受け取り、各メンバーを順にピックアップしながら石巻へ向かいました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ff2d9e02823954025948f25ef6da4a966\u002F%E5%87%BA%E7%99%BA.jpg?w=650&h=487\" alt=\"出発\" width=\"650\" height=\"487\">\u003Cfigcaption>ハイエースの荷台に全員の自転車を積み込みます。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fe6b45536e22e46d197fa9d7a498681fa\u002F%E9%81%93%E4%B8%AD.jpg\" alt=\"サービスエリアでソフトクリーム休憩\" width=\"650\" height=\"488\">\u003Cfigcaption>サービスエリアでソフトクリーム休憩。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>会場は石巻専修大学です。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 75%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fembed\u002Fv1\u002Fplace?key=AIzaSyC5AabUmFCrVTvkne8HfUV-Qotqx6-MC3E&q=%E7%9F%B3%E5%B7%BB%E5%B0%82%E4%BF%AE%E5%A4%A7%E5%AD%A6&center=38.4530669,141.2947433&zoom=15\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen>\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Cp>\u003Cbr>周辺の宿泊施設は、ツール・ド・東北の影響もあり、予約開始後すぐに埋まってしまったため、少し離れた牡鹿半島にある民宿に泊まることに。\u003Cbr>本来なら17時前には宿に着いている予定でしたが、その日は三連休初日だったのもあり渋滞に巻き込まれ、\u003Cstrong>結局到着したのは20時過ぎ\u003C\u002Fstrong>。予想以上に時間がかかってしまいました。。\u003Cbr>\u003Cbr>宿に到着すると早速夕食。\u003Cbr>新鮮な海の幸がふんだんに並び、思わず驚くほどのボリュームです。大変美味しくいただきました。ご馳走様です。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F96a31614c77445d3a9aa66dee4f7457a\u002F%E5%A4%95%E9%A3%9F.jpg\" alt=\"夕食\" width=\"650\" height=\"499\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F24dc9fa794a64db4a3d5e7f7dbe15ac0\u002F%E5%A4%95%E9%A3%9F-2.jpg\" alt=\"\" width=\"650\" height=\"488\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>夕食後は、みんなで一緒にお風呂に入って翌日の準備をしました。まさに\u003Cstrong>合宿感\u003C\u002Fstrong>が出ています。\u003Cbr>今年は昨年のような位置情報共有アプリがなかったため、代わりに\u003Cstrong> Google の位置情報共有機能\u003C\u002Fstrong>を利用することにし、その設定をしたり、全員で\u003Cstrong>ゼッケン\u003C\u002Fstrong>を自転車用のウェアやバッグに縫い付けたり。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F654286f4957b4e4c9ecac8584e443b94\u002F%E3%82%BC%E3%83%83%E3%82%B1%E3%83%B3-2.jpg?w=650&h=553\" alt=\"ゼッケン\" width=\"650\" height=\"553\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F853bb7961a044ba8aa16ef4789ba8d30\u002F%E9%83%A8%E5%B1%8B.jpg\" alt=\"部屋の様子\" width=\"650\" height=\"488\">\u003Cfigcaption>今回のコンセプトは『合宿』なので、もちろん全員同じ部屋で雑魚寝。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>翌朝は 6 時前には出発しなければならないため、準備が整ったあとは早めに就寝することにしました。\u003Cbr>荷物の最終チェックも済ませ、冷え込む早朝に備えてそれぞれしっかりと休息をとります。\u003C\u002Fp>\u003Ch3 id=\"h1452651df4\">当日\u003C\u002Fh3>\u003Cp>5時過ぎには起床。前日にスーパーで買っておいた朝食を手早く済ませ、6 時前には宿を出発しました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1ff2aad82a364c20a239514c0f6a33ad\u002F%E9%83%A8%E5%B1%8B-2.jpg\" alt=\"\" width=\"650\" height=\"488\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>宿から 1 時間かけて会場へ。\u003Cbr>天気予報では雨の予報でしたが、会場に着いた頃は晴れ間が広がっていました。会場はたくさんのライダーで賑わっています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fa0c0ca05e6b64dbe9298223ecfee535f\u002F%E4%BC%9A%E5%A0%B4.jpg\" alt=\"会場の様子\" width=\"650\" height=\"488\">\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>などがあり、\u003Cstrong>イベント用のステージでは地元の方々によるパフォーマンスに加え、ゲストによるトークショーも開催\u003C\u002Fstrong>されるなど、ライダー以外の人たちも楽しめるように工夫がされていました。\u003Cbr>\u003Cbr>受付を済ませたら全員で出発前の記念撮影。スタートラインへ送り出します。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fa0909a7b62314ccab66eb6d0519369a5\u002F%E9%9B%86%E5%90%88%E5%86%99%E7%9C%9F.jpg\" alt=\"集合写真\" width=\"650\" height=\"488\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F7b3da519d73847258190ed1f2ab7ed0c\u002F%E5%87%BA%E7%99%BA%E5%89%8D.jpg\" alt=\"\" width=\"650\" height=\"488\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>別にレースではないので、並んだ順で適当にグループ分けされ、順次スタートする形です。\u003Cbr>スタートラインの横にも簡易なステージが設置されており、MC が出走前のライダーにインタビューして盛り上げています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F5cba26379acd4b99b96368a2d1445dc1\u002FIMG_5934.jpg\" alt=\"\" width=\"650\" height=\"488\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>いよいよ出発！\u003C\u002Fp>\u003Cp>\u003C\u002Fp>\u003Cp>今回はみんな一緒に縦一列になって\u003Ca href=\"https:\u002F\u002Ftourdetohoku.jp\u002Fcourse\u002Fkitakami\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>北上フォンドコース\u003C\u002Fstrong>\u003C\u002Fa>を走りました。\u003Cbr>北上フォンドの長さは100キロ、\u003Cstrong>途中にエイドステーション(以下AS)が 4 つ\u003C\u002Fstrong>あり、\u003Cstrong>各 AS ではご当地の名物料理が提供\u003C\u002Fstrong>されます。食べては走るの繰り返しなので、結構お腹が膨れるそうです。\u003Cbr>\u003Cbr>弊社の \u003Cstrong>Slack チャンネルと X で随時実況しつつ、Google の位置情報共有で位置を共有\u003C\u002Fstrong>し、現地のライブ感を社内でも楽しんでもらおうとしました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cblockquote class=\"twitter-tweet\" data-dnt=\"true\" align=\"center\">\u003Cp lang=\"ja\" dir=\"ltr\">いよいよ最後のASです！\u003Cbr>十三浜わかめをたっぷり使った十三浜わかめうどんをいただきます🌊\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fhashtag\u002F%E3%83%84%E3%83%BC%E3%83%AB%E3%83%89%E6%9D%B1%E5%8C%97?src=hash&ref_src=twsrc%5Etfw\">#ツールド東北\u003C\u002Fa>\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fhashtag\u002F%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AA%E3%83%B3%E3%82%B0?src=hash&ref_src=twsrc%5Etfw\">#サイクリング\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fhashtag\u002F%E8%87%AA%E8%BB%A2%E8%BB%8A%E9%83%A8?src=hash&ref_src=twsrc%5Etfw\">#自転車部\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fhashtag\u002F%E8%87%AA%E8%BB%A2%E8%BB%8A?src=hash&ref_src=twsrc%5Etfw\">#自転車\u003C\u002Fa>\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fhashtag\u002F%E5%8D%81%E4%B8%89%E6%B5%9C?src=hash&ref_src=twsrc%5Etfw\">#十三浜\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fhashtag\u002F%E3%82%8F%E3%81%8B%E3%82%81%E3%81%86%E3%81%A9%E3%82%93?src=hash&ref_src=twsrc%5Etfw\">#わかめうどん\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fhashtag\u002F%E5%8D%81%E4%B8%89%E6%B5%9C%E3%82%8F%E3%81%8B%E3%82%81?src=hash&ref_src=twsrc%5Etfw\">#十三浜わかめ\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fhashtag\u002F%E3%82%8F%E3%81%8B%E3%82%81?src=hash&ref_src=twsrc%5Etfw\">#わかめ\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fhashtag\u002F%E3%81%86%E3%81%A9%E3%82%93?src=hash&ref_src=twsrc%5Etfw\">#うどん\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Ft.co\u002Fi3OFlIavZj\">pic.twitter.com\u002Fi3OFlIavZj\u003C\u002Fa>\u003C\u002Fp>— S2 Factory (@s2factory_pr) \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fs2factory_pr\u002Fstatus\u002F1835206706063884364?ref_src=twsrc%5Etfw\">September 15, 2024\u003C\u002Fa>\u003C\u002Fblockquote>\n\u003Cscript async src=\"https:\u002F\u002Fplatform.twitter.com\u002Fwidgets.js\" charset=\"utf-8\">\u003C\u002Fscript>\n\n\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F507a31e4ae5b4bb8bc2470de2d1323f4\u002F%E4%BC%91%E6%86%A9.jpg?w=650&h=487\" alt=\"ASにて\" width=\"650\" height=\"487\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F0924144ee4ec4a88bda3d1fe6af8323a\u002F%E3%82%AB%E3%83%AC%E3%83%BC.jpg?w=650&h=487\" alt=\"名物のカレー\" width=\"650\" height=\"487\">\u003Cfigcaption>名物のサーモンカツカレーを今年もいただきました。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ff1580c8859d84a41aa5fb9ecc8f836a5\u002F%E4%BD%8D%E7%BD%AE%E6%83%85%E5%A0%B1.jpeg?w=350&h=617\" alt=\"Googleでの位置情報共有\" width=\"350\" height=\"617\">\u003Cfigcaption>位置情報を社内に共有。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>ゴールで待つこと 8 時間。いよいよゴールの瞬間が！\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F7b5e74925d664caea8a586f3e1c397af\u002F%E3%82%B4%E3%83%BC%E3%83%AB.png\" alt=\"ゴールの瞬間\" width=\"650\" height=\"409\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>皆さんお疲れ様でした！\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ff90392a5a8204e1d941281151a26faec\u002F%E3%82%B4%E3%83%BC%E3%83%AB%E5%BE%8C.jpeg?w=650&h=487\" alt=\"ゴール後の記念撮影。\" width=\"650\" height=\"487\">\u003Cfigcaption>ゴール後の記念撮影。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>途中から雨が降り出し、気温も下がって想像以上の寒さに。雨の中の長時間走行で全身ずぶ濡れとなり、体も冷え切ってしまいました。そのため、着替えを買い、スーパー銭湯で温まってから宿に戻ることに。\u003C\u002Fp>\u003Cp>宿では簡単な打ち上げを行いましたが、皆疲れ果てていたので、早めに就寝しました。\u003C\u002Fp>\u003Ch3 id=\"h9ab7e1177e\">3日目\u003C\u002Fh3>\u003Cp>最終日です。せっかくなので観光もして帰ります。\u003Cbr>\u003Cbr>宿をチェックアウトして「\u003Ca href=\"https:\u002F\u002Foshika.miyagi.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">ホエールタウンおしか\u003C\u002Fa>」に向かいました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Foshika.miyagi.jp\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Foshika.miyagi.jp%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>東北の海や鯨についての展示を見たり、観光船に乗って海を眺めようかと話したりもしましたが、疲れていたので結局乗らず。\u003Cbr>その後は女川の道の駅に立ち寄り、東北ならではのお土産を物色。たくさんお土産を買い込みます。\u003Cbr>\u003Cbr>そして石巻を出発。途中、松島に寄り道し、散策を楽しみました。\u003Cbr>街を歩き回ったものの、特に決まった予定もなく、ぶらぶらとした時間を満喫。地元の風景や空気に触れながらのんびり過ごしました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F30440e26b613465d925fab3d1ec871b0\u002F%E6%9D%BE%E5%B1%B1.jpg\" alt=\"\" width=\"650\" height=\"488\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>昼食は仙台に戻り、名物の牛タンを食べた後、クラフトビールの直売所にも立ち寄りました。\u003Cbr>\u003Cbr>なんやかんやとたくさん寄り道してしまったので、東京に戻ってきたのが22時頃。\u003Cbr>こうして東北の魅力を満喫した 3 日間の旅が幕を閉じました。\u003C\u002Fp>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>今年のツール・ド・東北は、\u003Cstrong>昨年よりも部活としての一体感を強く感じながら参加することができました\u003C\u002Fstrong>。\u003Cbr>車での長距離移動は大変でしたが、東北の美味しいご飯や景色をメンバーみんなで楽しめたのはとても貴重な体験です。サイクリングの時間だけでなく、移動や宿でのひとときも共有できたことで、部としての結束がさらに深まり、お互いの新たな一面も発見できました。\u003C\u002Fp>\u003Cp>ただ、こうして実際に参加してみると、来年以降の改善点もいくつか見えてきました。もし参加人数がさらに増えた場合の移動手段や、準備の段取りについても検討していきたいと思います。こうした試行錯誤を重ねて、さらに良い部活動の形を作れればと。\u003C\u002Fp>\u003Cp>ちなみに、\u003Cstrong>弊社には他にも多様な部活動があり、社内外の交流も積極的に行っています。ご興味があれば、ぜひお気軽にお声かけください\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cp>\u003C\u002Fp>",[],"旅行やイベントで使うアプリのご相談も承っています。","実際の旅行で運用した経験も活かし、旅行やイベントで使うアプリの開発も承ります。\n「情報共有の手間を減らしたい」「こんなアプリがあれば」といったお困りごとやアイデアがありましたら、ぜひお気軽にご相談ください。","https:\u002F\u002Fwww.s2factory.co.jp\u002Fcontact\u002F",{"contents":274,"totalCount":289,"offset":290,"limit":291},[275,277,279],{"id":33,"eyecatch":276,"publishedAt":36,"createdAt":34,"title":37,"is_html":14,"content2":57},{"url":53,"height":54,"width":55},{"id":47,"eyecatch":278,"publishedAt":77,"createdAt":75,"title":78,"is_html":14,"content2":99},{"url":96,"height":97,"width":98},{"id":280,"eyecatch":281,"publishedAt":285,"createdAt":286,"title":287,"is_html":14,"content2":288},"manhole-card",{"url":282,"height":283,"width":284},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F468c5e350f7c40f7b7a76fd33fa25a5b\u002Fmanhole.png",910,1728,"2026-09-01T06:24:08.870Z","2026-08-26T04:32:26.387Z","マンホールカードとは？見方や集め方、楽しみ方を紹介","\u003Cp>この記事は、社内イベント「\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ftea\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cu>お茶会\u003C\u002Fu>\u003C\u002Fa>」での発表内容をもとにまとめたものです。\u003Cbr>今回は、弊社の \u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Finterview-3\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">takano\u003C\u002Fa> が「マンホールカード」について発表しました。\u003C\u002Fp>\u003Chr>\u003Cp>\u003C\u002Fp>\u003Cp>本格的なコレクターというわけではありませんが、出かけた先で見つけた\u003Cstrong>マンホールカード\u003C\u002Fstrong>を少しずつ集めています。\u003Cbr>手元のマンホールカードを見ながら、\u003Cstrong>カードの見方や集め方、楽しみ方\u003C\u002Fstrong>を紹介したいと思います。\u003C\u002Fp>\u003Ch2 id=\"hc49a14f474\">ダムや橋を題材にしたインフラカード\u003C\u002Fh2>\u003Cp>全国各地では、ダムや橋、トンネルなどのインフラを題材にしたカードが発行されています。\u003Cbr>これらは総称して「インフラカード」と呼ばれますが、\u003Cstrong>ひとつの団体による統一シリーズではなく、発行元や配布方法はさまざま\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>\u003Cstrong>インフラカードの元祖といえるのが、ダムカード。\u003C\u002Fstrong> 国土交通省と独立行政法人水資源機構が管理するダムで2007年に配布が始まり、その後、題材はさまざまなインフラへ広がっていきました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>ダムカード\u003C\u002Fstrong>：各地のダムを写真やデータとともに紹介\u003C\u002Fli>\u003Cli>\u003Cstrong>橋カード\u003C\u002Fstrong>：橋の構造や特徴、周辺の情報などを掲載\u003C\u002Fli>\u003Cli>\u003Cstrong>トンネルカード\u003C\u002Fstrong>：トンネルの概要や工事の記録などを紹介\u003C\u002Fli>\u003Cli>\u003Cstrong>砂防カード\u003C\u002Fstrong>：砂防堰堤をはじめ、土砂災害から地域を守る施設を紹介\u003C\u002Fli>\u003C\u002Ful>\u003Cp>ダムカードには、\u003Cstrong>周年やイベントに合わせて発行される限定版\u003C\u002Fstrong>もあり、配布終了後には入手しにくい\u003Cstrong>「レアカード」\u003C\u002Fstrong>になることもあります。\u003Cbr>私も最初はダムカードを集めており、記念カードも手に入れました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F2585951c82da42c28ce21be31abbbd4d\u002Fdamcard.jpg?w=600&h=800\" alt=\"ダムカード\" width=\"600\" height=\"800\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>ただ、ダムカードは原則としてダムを訪れた人に、管理事務所や周辺施設で配布されるものです。公共交通では訪れにくい場所もあり、そのぶん手に入れたときの達成感はありますが、そもそもダムを訪れる機会が少なく、なかなか枚数は増えませんでした。\u003C\u002Fp>\u003Cp>そうしているうちに、イベントで\u003Cstrong>マンホールカード\u003C\u002Fstrong>の存在を知り、こちらも集めてみることにしました。\u003C\u002Fp>\u003Ch2 id=\"h7dd9eacda3\">マンホールカードとは\u003C\u002Fh2>\u003Cp>マンホールカードは、\u003Ca href=\"https:\u002F\u002Fwww.gk-p.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>下水道広報プラットホーム(GKP)\u003C\u002Fstrong>\u003C\u002Fa>が企画・監修し、マンホール蓋を管理する地方公共団体と共同で発行しているカードです。デザインマンホールを入口に、\u003Cstrong>下水道の役割や大切さへ関心を持ってもらうことを目的\u003C\u002Fstrong>としています。\u003C\u002Fp>\u003Cp>\u003Cstrong>2016 年 4 月に第 1 弾 30 種が登場し、2026 年 8 月時点で累計 1,311 種類が発行\u003C\u002Fstrong>されています。各自治体が指定する役所や観光案内所、下水道関連施設などで、\u003Cstrong>原則として一人一枚、無料\u003C\u002Fstrong>でもらえます。\u003C\u002Fp>\u003Cp>ダムカードと比べて街中で配布されているものが多く、\u003Cstrong>旅や街歩きのついでに集めやすいのも特徴\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Ch3 id=\"he6c39239dd\">マンホールカードの見方\u003C\u002Fh3>\u003Cp>マンホールカードは全国共通のフォーマットで作られており、\u003Cstrong>表面にはマンホール蓋と設置場所の情報、裏面にはデザインの背景や配布情報\u003C\u002Fstrong>がまとめられています。\u003Cbr>実際のカードを見ながら、記載されている内容を確認してみましょう。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fbc2f52f3f9f24ccebb04f3235face788\u002Fmaehashi.png\" alt=\"前橋市のマンホールカード\" width=\"1000\" height=\"698\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Cstrong>表面に記載されている情報\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>マンホール蓋の写真\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>発行した自治体名\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>緯度・経度\u003C\u002Fstrong>：写真のマンホール蓋が実際に設置されている場所\u003C\u002Fli>\u003Cli>\u003Cstrong>ピクトグラム\u003C\u002Fstrong>：自然や歴史、文化など、デザインの題材を表すマーク\u003C\u002Fli>\u003Cli>\u003Cstrong>デザイン管理ナンバーとコレクションナンバー\u003C\u002Fstrong>：自治体やデザインを識別し、カードを整理するための番号\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cbr>\u003Cstrong>裏面に記載されている情報\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>デザインの由来\u003C\u002Fstrong>：描かれている名所や歴史、文化、特産品などが紹介されている\u003C\u002Fli>\u003Cli>\u003Cstrong>設置開始年\u003C\u002Fstrong>：そのデザインのマンホール蓋が設置され始めた年\u003C\u002Fli>\u003Cli>\u003Cstrong>製造管理ナンバー\u003C\u002Fstrong>：カードの導入年月、修正回数、製造ロットを示す番号。末尾が「001」のものは初期ロット\u003C\u002Fli>\u003Cli>\u003Cstrong>配布場所とQRコード\u003C\u002Fstrong>：カードを受け取れる施設と、自治体の関連ページへアクセスできるQRコード\u003C\u002Fli>\u003C\u002Ful>\u003Cp>初期ロットを目当てに集める楽しみ方もあるそうですが、私は番号にはあまりこだわらず、デザインや訪れた場所との思い出を楽しんでいます。\u003C\u002Fp>\u003Ch2 id=\"h6d76565e2d\">手元のマンホールカードを見てみる\u003C\u002Fh2>\u003Cp>ここからは、私が集めたカードの中から、相模原市と小田原市、北広島市の 3 枚を見てみます。\u003C\u002Fp>\u003Cp>\u003Cbr>\u003Cstrong>相模原市｜はやぶさ2\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>小惑星探査機「\u003Ca href=\"https:\u002F\u002Fwww.hayabusa2.jaxa.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">はやぶさ2\u003C\u002Fa>」を題材にしたカードです。\u003Cstrong>マンホール蓋は淵野辺駅前\u003C\u002Fstrong>にあり、カードはJAXA相模原キャンパスの向かいにある\u003Ca href=\"https:\u002F\u002Fsagamiharacitymuseum.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">相模原市立博物館\u003C\u002Fa>で受け取りました。博物館を訪れた際、たまたま配布されていることを知って手に入れた一枚です。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4f2a4e90a4b042aaa4f2dab5d2fde7e5\u002Fsagamihara.png\" alt=\"相模原市のマンホールカード\" width=\"1000\" height=\"711\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Cstrong>小田原市｜小田原城\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>小田原城や城下町の風景が描かれています。実物の\u003Cstrong>マンホール蓋は小田原城址公園内\u003C\u002Fstrong>にあり、カードの配布場所は少し離れた\u003Ca href=\"https:\u002F\u002Fwww.city.odawara.kanagawa.jp\u002Ffield\u002Findustry\u002Furban\u002Fnariwai.html\" target=\"_blank\" rel=\"noopener noreferrer\">小田原宿なりわい交流館\u003C\u002Fa>でした。\u003Cbr>版画のような絵柄が蓋の凹凸で表現されており、イラストをはめ込んだタイプとは違う、マンホールらしいデザインが個人的に気に入っています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fe2454e65c6774014b96a8e5409a4e349\u002Fodawara.png\" alt=\"小田原市のマンホールカード\" width=\"1000\" height=\"705\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Cstrong>北広島市｜北海道ボールパークFビレッジ\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>北海道ボールパークFビレッジを題材にしたカードです。\u003Cbr>Fビレッジを訪れた際に、施設内の「HUB HOKKAIDO SELECT SHOP」で配布されていることを知り、受け取りました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F995729ded86742c8a7ee8e743e248b20\u002Fkitahiroshima.png\" alt=\"北海道北広島市のマンホールカード\" width=\"1000\" height=\"704\">\u003C\u002Ffigure>\u003Ch2 id=\"hfaecbbb682\">マンホールカードの魅力と楽しみ方\u003C\u002Fh2>\u003Cp>デザインマンホールには、名所や特産品、歴史など、その土地を象徴するものが描かれています。アニメやキャラクターを題材にしたものもあり、まさに\u003Cstrong>ご当地感の極み\u003C\u002Fstrong>。\u003Cbr>円形の蓋に地域らしさを落とし込んだ構図や、鋳造の凹凸、彩色も見どころです。\u003C\u002Fp>\u003Cp>最近では、ポケモンが描かれたマンホール蓋「\u003Ca href=\"https:\u002F\u002Flocal.pokemon.jp\u002Fmanhole\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>ポケふた\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>」\u003C\u002Fstrong>が全国各地に設置されているほか、実在するマンホールを題材にした漫画『\u003Ca href=\"https:\u002F\u002Fwww.shogakukan.co.jp\u002Fbooks\u002F09143565\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>マンホール戦記アオイ\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>』\u003C\u002Fstrong>も刊行され、楽しみ方はカード以外にも広がっています。\u003C\u002Fp>\u003Cp>カードを集め始めると、出かけた先でも足元のデザインが気になるようになります。街歩きの途中でデザインマンホールを見つけると、少しうれしくなるものです。\u003Cbr>気に入ったデザインや訪れた場所のカードだけでも楽しめるので、出かけた先で配布案内を見かけたら、よかったら集めてみてください。\u003C\u002Fp>",179,0,3,{"contents":293,"totalCount":495,"offset":290,"limit":496},[294,296,298,301,304,306,307,310,313,316,319,322,323,326,328,330,331,334,337,340,343,346,348,350,351,354,357,359,361,364,367,370,372,374,376,379,382,385,387,390,393,396,399,402,405,408,411,413,416,419,422,424,427,430,432,435,437,440,442,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492],{"id":40,"name":295},"AI",{"id":232,"name":297},"ワークショップ",{"id":299,"name":300},"tool","ツール",{"id":302,"name":303},"office","オフィス",{"id":43,"name":305},"社内案件",{"id":23,"name":25},{"id":308,"name":309},"iot","IoT",{"id":311,"name":312},"art","アート",{"id":314,"name":315},"moving","引越し",{"id":317,"name":318},"picture","映像",{"id":320,"name":321},"plant","植物",{"id":11,"name":13},{"id":324,"name":325},"health","健康",{"id":235,"name":327},"運動",{"id":257,"name":329},"自転車部",{"id":16,"name":20},{"id":332,"name":333},"interview","Interview",{"id":335,"name":336},"recruiting","採用",{"id":338,"name":339},"tea","お茶会",{"id":341,"name":342},"history","歴史",{"id":344,"name":345},"life","生活",{"id":237,"name":347},"部活動",{"id":174,"name":349},"キャラクター",{"id":27,"name":30},{"id":352,"name":353},"math","数学",{"id":355,"name":356},"alcohol","酒",{"id":81,"name":358},"インフラ",{"id":176,"name":360},"アプリ",{"id":362,"name":363},"parenting","子育て",{"id":365,"name":366},"data","通信",{"id":368,"name":369},"migration","地方移住",{"id":83,"name":371},"セキュリティ",{"id":373,"name":373},"esports",{"id":178,"name":375},"振り返り",{"id":377,"name":378},"animal","動物",{"id":380,"name":381},"css","CSS",{"id":383,"name":384},"game","ゲーム",{"id":117,"name":386},"TypeScript",{"id":388,"name":389},"management","マネジメント",{"id":391,"name":392},"remote-work","リモートワーク",{"id":394,"name":395},"frame-work","フレームワーク",{"id":397,"name":398},"music","音楽",{"id":400,"name":401},"money","お金",{"id":403,"name":404},"covid-19","コロナ",{"id":406,"name":407},"railway","鉄道",{"id":409,"name":410},"agriculture","農業",{"id":260,"name":412},"趣味",{"id":414,"name":415},"certification","資格",{"id":417,"name":418},"personal-computer","PC",{"id":420,"name":421},"welfare","福利厚生",{"id":88,"name":423},"技術",{"id":425,"name":426},"study","勉強",{"id":428,"name":429},"mental-health","メンタルヘルス",{"id":197,"name":431},"フロントエンド",{"id":433,"name":434},"pilates","ピラティス",{"id":85,"name":436},"バックエンド",{"id":438,"name":439},"tunnel","トンネル",{"id":199,"name":441},"デザイン",{"id":262,"name":443},"スポーツ",{"id":445,"name":446},"online","オンライン",{"id":448,"name":449},"internship","インターンシップ",{"id":451,"name":452},"animation","アニメーション",{"id":454,"name":455},"virtual-reality","VR",{"id":457,"name":458},"ssl","SSL",{"id":460,"name":461},"perl","Perl",{"id":463,"name":464},"operating-system","OS",{"id":466,"name":467},"ios","iOS",{"id":469,"name":470},"google","Google",{"id":472,"name":473},"deeplearning","DeepLearning",{"id":475,"name":476},"aws","AWS",{"id":478,"name":479},"apple","Apple",{"id":481,"name":482},"api","API",{"id":484,"name":485},"3-d","3D",{"id":487,"name":488},"school","学校",{"id":490,"name":491},"blender","Blender",{"id":493,"name":494},"android","Android",76,200,{"contents":498,"totalCount":291,"offset":290,"limit":291},[499,552,617],{"id":500,"createdAt":501,"updatedAt":502,"publishedAt":503,"revisedAt":502,"title":504,"category":505,"thumbnail":514,"image":517,"content":526,"keyword":527,"client":542,"team":543,"url":547,"release":548,"status":549,"top":14,"blog":21,"service":551},"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",[506,511],{"id":507,"createdAt":508,"updatedAt":509,"publishedAt":508,"revisedAt":508,"name":510},"web","2024-03-22T05:33:05.262Z","2024-06-24T23:16:42.692Z","ウェブ制作",{"id":199,"createdAt":512,"updatedAt":512,"publishedAt":512,"revisedAt":512,"name":513},"2024-03-22T05:34:30.127Z","デザイン＆ディレクション",{"url":515,"height":54,"width":516},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F47e7b069013a45b8b6e931ec132bd272\u002Fthumb.png",1200,[518,522,524],{"url":519,"height":520,"width":521},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F43a703ebe8d7467aac2c995378cb081e\u002F1.png",1800,2400,{"url":523,"height":520,"width":521},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F6aed2d670822422696329a5cb3a6877f\u002F2.png",{"url":525,"height":520,"width":521},"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>",[528,532,537],{"id":529,"createdAt":530,"updatedAt":531,"publishedAt":530,"revisedAt":531,"name":431,"filter":21,"page":21},"ice0h9h9ap","2024-06-28T01:14:44.830Z","2025-01-15T07:40:01.729Z",{"id":533,"createdAt":534,"updatedAt":535,"publishedAt":534,"revisedAt":535,"name":536,"filter":21,"page":21},"6ncqc37v7nzq","2024-06-28T01:14:12.293Z","2025-01-15T07:39:08.437Z","デザインプロジェクト",{"id":538,"createdAt":539,"updatedAt":540,"publishedAt":539,"revisedAt":540,"name":541,"filter":21,"page":21},"ztrz9np70v","2024-06-28T01:14:41.050Z","2025-01-15T07:40:30.428Z","コンセプトメイキング"," PH PARIS JAPON 株式会社",[544],{"fieldId":545,"title":546},"teamField","S2ファクトリー","https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fnoel2025\u002F","2025.10.17",[550],"公開中",[441],{"id":553,"createdAt":554,"updatedAt":555,"publishedAt":554,"revisedAt":555,"title":556,"category":557,"thumbnail":564,"image":568,"content":573,"keyword":574,"client":556,"team":589,"url":612,"release":613,"status":614,"statusText":615,"top":21,"blog":21,"service":616},"tamabi","2024-06-28T01:58:38.788Z","2025-05-27T03:25:42.261Z","多摩美術大学",[558,559],{"id":507,"createdAt":508,"updatedAt":509,"publishedAt":508,"revisedAt":508,"name":510},{"id":560,"createdAt":561,"updatedAt":562,"publishedAt":561,"revisedAt":561,"name":563},"system","2024-03-22T05:33:52.708Z","2024-06-24T23:16:53.739Z","システム開発",{"url":565,"height":566,"width":567},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002Fdea8e004e627415c80bf7b8d622bb4b9\u002Ftamabi-thumbnail-1.png",456,600,[569],{"url":570,"height":571,"width":572},"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>",[575,579,583,588],{"id":576,"createdAt":577,"updatedAt":578,"publishedAt":577,"revisedAt":578,"name":476,"filter":21,"page":21},"uftrxsmd0v72","2024-06-28T01:14:13.671Z","2025-01-15T07:39:25.538Z",{"id":580,"createdAt":581,"updatedAt":581,"publishedAt":581,"revisedAt":581,"name":582,"filter":14,"page":14},"yctx9hzd4","2024-06-28T01:14:33.743Z","Lambda",{"id":584,"createdAt":585,"updatedAt":586,"publishedAt":585,"revisedAt":586,"name":587,"filter":21,"page":21},"u84cy0fbzno","2024-06-28T01:14:39.521Z","2025-01-15T07:40:41.433Z","Cloud",{"id":529,"createdAt":530,"updatedAt":531,"publishedAt":530,"revisedAt":531,"name":431,"filter":21,"page":21},[590,593,596,599,602,605,608,611],{"fieldId":545,"title":591,"link":592},"萩原 俊矢","https:\u002F\u002Fshunyahagiwara.com\u002F#\u002Fworks",{"fieldId":545,"title":594,"link":595},"GrandBase Inc.","https:\u002F\u002Fwww.grandbase.jp\u002F",{"fieldId":545,"title":597,"link":598},"DSCL Inc.","https:\u002F\u002Fdscl.jp\u002F",{"fieldId":545,"title":600,"link":601},"株式会社トラフィックス","https:\u002F\u002Ftraffics.jp\u002F",{"fieldId":545,"title":603,"link":604},"株式会社カンバセーションズ","https:\u002F\u002Fqonversations.jp\u002F",{"fieldId":545,"title":606,"link":607},"Measurements Inc.","https:\u002F\u002Fwww.measurements.co.jp\u002F",{"fieldId":545,"title":609,"link":610},"tha ltd.","https:\u002F\u002Ftha.jp\u002F",{"fieldId":545,"title":546},"https:\u002F\u002Fwww.tamabi.ac.jp\u002F","2024.4.4",[550],null,[510],{"id":618,"createdAt":619,"updatedAt":620,"publishedAt":619,"revisedAt":620,"title":621,"category":622,"thumbnail":624,"image":626,"content":635,"keyword":636,"client":609,"team":652,"url":658,"release":659,"status":660,"statusText":615,"top":14,"blog":21,"service":661},"humanity","2024-06-28T01:56:51.507Z","2025-05-27T03:26:34.287Z","HUMANITY",[623],{"id":560,"createdAt":561,"updatedAt":562,"publishedAt":561,"revisedAt":561,"name":563},{"url":625,"height":566,"width":567},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F740adb4e02c54fee97d12025df5f16a0\u002Fhumanity-thumbnail-1.png",[627,629,631,633],{"url":628,"height":571,"width":572},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F2a10b034854d40e789d38ac33e0a3c4e\u002Fhumanity-other-1.png",{"url":630,"height":571,"width":572},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F1091c52a97f745e5a3fc105bd0e542dc\u002Fhumanity-other-2.png",{"url":632,"height":571,"width":572},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F613c8c836fff40119e9f85097262399d\u002Fhumanity-other-3.png",{"url":634,"height":571,"width":572},"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>",[637,642,647,648],{"id":638,"createdAt":639,"updatedAt":640,"publishedAt":639,"revisedAt":640,"name":641,"filter":21,"page":21},"fg8e4c9nl","2024-06-28T01:14:04.517Z","2025-01-15T07:36:58.970Z","CMS",{"id":643,"createdAt":644,"updatedAt":645,"publishedAt":644,"revisedAt":645,"name":646,"filter":21,"page":21},"p6qgoo2k9vl9","2024-06-28T01:14:06.759Z","2025-01-15T07:37:22.466Z","大規模データ",{"id":584,"createdAt":585,"updatedAt":586,"publishedAt":585,"revisedAt":586,"name":587,"filter":21,"page":21},{"id":649,"createdAt":650,"updatedAt":651,"publishedAt":650,"revisedAt":651,"name":384,"filter":21,"page":21},"pxnv6cy2u","2024-06-28T01:14:45.570Z","2025-01-15T07:39:54.004Z",[653,656,657],{"fieldId":545,"title":654,"link":655},"Enhance","https:\u002F\u002Fenhance-experience.com\u002Fja\u002F",{"fieldId":545,"title":609,"link":610},{"fieldId":545,"title":546},"https:\u002F\u002Fhumanity.game\u002Fja\u002F","2023.5.16",[550],[563],1791506526342]