[{"data":1,"prerenderedAt":651},["ShallowReactive",2],{"detailoffice-bookshelf":3,"$fcor7nJQYM2hnNpZr-ht7jXNdA4OJnov6gp-jTyBvNjE":246,"$fS4sOnCUpoF-wMfw16HWwnBnngwddN9OaX5p2KHuFyVA":281,"works":488},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":7,"revisedAt":7,"title":8,"tag":9,"recommended_articles":27,"eyecatch":127,"heading_list":26,"content2":131,"description":132,"related_articles":133,"recruit":14,"is_html":14,"is_migration":14},"office-bookshelf","2025-04-30T16:13:56.191Z","2026-07-31T04:45:53.579Z","2026-07-31T04:43:21.182Z","スタッフのおすすめでつくる、オフィスの漫画本棚",[10,15,20],{"id":11,"createdAt":12,"updatedAt":12,"publishedAt":12,"revisedAt":12,"name":13,"top":14},"office","2025-03-18T01:44:26.211Z","オフィス",false,{"id":16,"createdAt":17,"updatedAt":18,"publishedAt":17,"revisedAt":17,"name":19,"top":14},"hobby","2023-06-01T09:42:38.855Z","2023-08-09T06:23:57.481Z","趣味",{"id":21,"createdAt":22,"updatedAt":23,"publishedAt":22,"revisedAt":24,"name":25,"top":26},"promotion","2023-07-13T11:19:32.620Z","2023-08-09T08:38:30.413Z","2023-08-09T07:10:47.562Z","PR",true,[28,71,101],{"id":29,"createdAt":30,"updatedAt":31,"publishedAt":32,"revisedAt":31,"title":33,"tag":34,"recommended_articles":44,"eyecatch":51,"heading_list":14,"content2":55,"description":56,"related_articles":57,"recruit":14,"cta_url":70,"is_html":14,"is_migration":14},"claude-code-perl-typescript-migration","2026-05-29T08:21:55.189Z","2026-07-22T08:32:05.786Z","2026-06-02T01:45:24.758Z","テストがない 10 万行の Perl システムを、Claude Code で TypeScript へ書き換えた話",[35,37,39,41,43],{"id":36},"ai",{"id":38},"typescript",{"id":40},"backend",{"id":42},"tech",{"id":21},[45,47,49],{"id":46},"noel2025",{"id":48},"design-project-1",{"id":50},"nazotoki",{"url":52,"height":53,"width":54},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1632b87e5aaa4944a854ccc430cdb89e/%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81.png",941,1672,"\u003Ch2 id=\"h586b90d155\">「AI が書いたコード、読んでますか？」\u003C/h2>\u003Cp>最近よく見かけるこの議論に、正直に答えます。\u003C/p>\u003Cp>\u003Cstrong>全部は読んでいません。10 万行、読みきれません。\u003C/strong>\u003C/p>\u003Cp>これは無責任に聞こえるかもしれません。「AI が書いたコードの 80% は負債だ」という研究もありますし、「理解していないコードをリリースするな」という意見はもっともだと思います。\u003C/p>\u003Cp>ただ、10 万行のコードを1行ずつ目で追って品質を担保するのは、\u003Cstrong>現実的に難しい\u003C/strong>ですよね。人間が書いたコードでも、全行レビューはしていないはずです。\u003C/p>\u003Cp>じゃあどうしたか。\u003C/p>\u003Cp>\u003Cstrong>読む代わりに、検証する仕組みを作りました。 AI に書かせたコードを、AIに検証させ続ける\u003C/strong>。24 時間、何百ラウンドも、バグが出なくなるまで。読んで理解する代わりに、正しさを証明する。\u003C/p>\u003Cp>この記事は、その話です。\u003C/p>\u003Ch2 id=\"h90ca2bc41d\">前提：テストがほぼない\u003C/h2>\u003Cp>私が担当しているのは、ある企業の EC サイトのバックエンドです。\u003C/p>\u003Cp>\u003Ca href=\"https://www.perl.org/\" target=\"_blank\" rel=\"noopener noreferrer\">Perl\u003C/a> で書かれていて、10 年以上動いています。認証、注文、決済、予約、LINE連携、クーポン。\u003Cstrong>API のエンドポイントは 133 個\u003C/strong>あります。\u003C/p>\u003Cp>そしてこのコードベースには、\u003Cstrong>まともな自動テストがほぼありませんでした。\u003C/strong>\u003C/p>\u003Cp>初めてソースを開いたときのことは覚えています。10 年分のビジネスロジックがぎっしり詰まっていて、でもそれを検証する手段が何もない。仕様書もない。何かを変えたとき、壊れたかどうかを知る方法がない。よくこれで 10 年動いてきたなと、率直に思いました。\u003C/p>\u003Cp>\u003Cstrong>これを \u003C/strong>\u003Ca href=\"https://www.typescriptlang.org/ja/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>TypeScript\u003C/strong>\u003C/a>\u003Cstrong> に書き換えろ、というのが今回のミッション\u003C/strong>でした。\u003C/p>\u003Ch2 id=\"h460484bf92\">普通にやったら詰みます\u003C/h2>\u003Cp>テストのないコードの移植は、ソフトウェアエンジニアリングでも最悪の部類に入る仕事です。\u003C/p>\u003Cp>教科書的にやるなら、まず既存の Perl コードにテストを書きます。挙動を固めてから、TypeScript で書き直す。でも 10 年分のコードにテストを書く工数は、移植そのものと同じかそれ以上かかります。しかも、Perl の挙動をちゃんと理解してテストに落とせる人材は限られています。\u003C/p>\u003Cp>詰んでます。\u003C/p>\u003Ch2 id=\"h4677704352\">Claude Code に「書かせる」のは1週間で終わりました\u003C/h2>\u003Cp>Claude Code には、\u003Cstrong>カスタムスラッシュコマンド\u003C/strong>という機能があります。\u003Cstrong>自分でコマンドを定義して、繰り返し使える仕組み\u003C/strong>です。\u003C/p>\u003Cp>私はまず \u003Ccode>/migrate-endpoint\u003C/code> というコマンドを作りました。\u003C/p>\u003Cp>Perl のコントローラのファイルパスを渡すと、Claude Code が関連するモデルやエンティティ、DB スキーマまで全部読みに行って、TypeScript の実装コードとテストを一気に生成してくれます。\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/285f776615bd4583a5177b8d1c440a90/migrate-endpoint-flow.png\" alt=\"\" width=\"1448\" height=\"1086\">\u003C/figure>\u003Cp>\u003Cstrong>テストがないなら、テストごと作ればいい。\u003C/strong>\u003C/p>\u003Cp>この割り切りで、\u003Cstrong>移植前にテストを書くという工程を丸ごとスキップ\u003C/strong>できました。\u003C/p>\u003Cp>133 エンドポイント、約 10 万行。実装が終わるまで、約 1 週間でした。最初のエンドポイントが動いたときは「本当にこれでいけるのか？」という気持ちが正直ありましたが、\u003Cstrong>2 つ目、3 つ目と進むうちに、コマンドの精度がどんどん上がっていく\u003C/strong>のがわかりました。\u003C/p>\u003Ch2 id=\"h1a681fd8e2\">でも「書けた」は「正しい」じゃない\u003C/h2>\u003Cp>1 週間で 10 万行。数字だけ見ればすごいです。\u003C/p>\u003Cp>でも、テストのほぼない Perl から移植したコードです。\u003Cstrong>「動くけど微妙に違う」コードが量産されている可能性\u003C/strong>は大いにあります。\u003C/p>\u003Cp>Perl は未定義値を空文字やゼロとして黙って処理します。TypeScript ではそうはいきません。タイムゾーンの扱いも違う。数値と文字列の暗黙変換もある。こういう差異は、普通のテストでは見つかりません。\u003C/p>\u003Cp>そこで、これも仕組みで解決することにしました。\u003C/p>\u003Ch2 id=\"h7480bb35d9\">パリティ監査という仕組みを作りました\u003C/h2>\u003Cp>もう 1 つのカスタムコマンド、\u003Ccode>/parity-audit\u003C/code> を作りました。\u003C/p>\u003Cp>やることはシンプルです。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>Perl のコードと TypeScript のコードを突き合わせて、挙動の差異を見つける\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>差異があればバグとして修正し、テストを追加する\u003C/strong>\u003C/li>\u003C/ul>\u003Cp>このコマンドを実行すると、\u003Cstrong>1 ラウンドで 20 の AI エージェントが並列に起動\u003C/strong>し、それぞれが違う切り口でコードを調べていきます。\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/e1d8b1dc72f44fcf9f367d8dc3b852b9/parity-audit-flow.png\" alt=\"\" width=\"1447\" height=\"1087\">\u003C/figure>\u003Cp>あるエージェントはエンドポイント単位で、リクエストからレスポンスまでのコードパスを 1 行ずつ比較しています。別のエージェントは DB アクセス層を見ていて、クエリの条件やソート順、NULL の扱いをチェックしています。\u003C/p>\u003Cp>決済まわりを専門で見るエージェントもいます。税計算、クーポン適用、支払いステータス。1 円でもズレたらアウトの領域です。認証・セッション管理を集中的に検証するエージェントもいて、ログインや SSO、MFA といったセキュリティに直結する処理を重点的に見ます。\u003C/p>\u003Cp>日時処理、暗号化、バーコード生成といった「言語が変わると挙動が変わりやすい」ユーティリティも、専用のエージェントが横断的にチェックしています。\u003C/p>\u003Cp>これだけの観点を人間が毎回カバーするのは、まず無理だと思います。\u003C/p>\u003Ch2 id=\"h9def901947\">「10回連続クリーン」になるまで止めません\u003C/h2>\u003Cp>パリティ監査には、1 つ\u003Cstrong>ルール\u003C/strong>を課しました。\u003C/p>\u003Cp>\u003Cstrong>連続10回、差異ゼロが出るまで回し続ける。\u003C/strong>\u003C/p>\u003Cp>1ラウンドでもバグが見つかったら、カウンタはゼロに戻ります。修正して、また最初から。10 回連続でクリーンになって、初めて「OK」です。\u003C/p>\u003Cp>このコマンドを夜間も含めて走らせ続けました。\u003C/p>\u003Cp>\u003Cstrong>2.5 ヶ月間。\u003C/strong>\u003C/p>\u003Ch2 id=\"h29bb0ce50d\">監査 379 ラウンド、800件以上のバグを修正\u003C/h2>\u003Cp>結果として、\u003Cstrong>379 ラウンドの監査を回し、800 件以上のバグ\u003C/strong>を見つけて直しました。\u003C/p>\u003Cp>最初のほうはラウンドごとにバグが山のように出てきて、正直なところ気が遠くなりました。でも修正を重ねるうちに、だんだんクリーンなラウンドが増えてきます。連続クリーンが 5 回、6 回と伸びていくのを見ているときは、ちょっとした達成感がありました。\u003C/p>\u003Cp>中には、\u003Cstrong>移植元の Perl 側に何年も潜んでいたバグが見つかったケースも\u003C/strong>ありました。テストがなかったから、誰も気づかなかったバグです。\u003Cstrong>パリティ監査がなければ、そのまま TypeScript 側にも引き継がれていた\u003C/strong>でしょう。\u003C/p>\u003Ch2 id=\"h3884ede80a\">これで何が変わったか\u003C/h2>\u003Cp>移植前と移植後で、テストの状況は一変しました。\u003C/p>\u003Cp>\u003Cstrong>移植後のテストは 1,419 件。\u003C/strong> しかも全部パスしています。移植プロジェクトとしてだけでなく、テスト資産の構築としても大きな成果だと思っています。\u003C/p>\u003Cp>そして、1,419 件のテストがあるということは、ここからのリファクタリングが容易になるということでもあります。\u003Cstrong>テストがなかった頃は怖くて触れなかったコードを、安心して改善できる。\u003C/strong>移植がゴールではなく、ここからがスタートです。\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/faaa3c46c0cf4ac6b95524e19d81e50c/migration-audit-results.png\" alt=\"\" width=\"1448\" height=\"1086\">\u003C/figure>\u003Ch2 id=\"h49ccabfba5\">そして、人間の手で確かめました\u003C/h2>\u003Cp>\u003Cstrong>最後に、フロントエンドとつないで E2E テスト\u003C/strong>をしました。\u003C/p>\u003Cp>これは人間が手で動かすテストです。実際のブラウザで、実際の画面を操作して、注文を入れて、決済して、予約して。AI ではなく、人間の目と手で確かめました。\u003C/p>\u003Cp>\u003Cstrong>不具合は見つかりませんでした。\u003C/strong>\u003C/p>\u003Cp>10 万行。テストがほぼない状態からの移植。AI が書いて、AI が検証して、最後に人間が触って、壊れていなかった。\u003C/p>\u003Cp>正直、自分でもちょっと信じられませんでした。\u003C/p>\u003Ch2 id=\"h42e2556fbc\">Claude Codeの使い方として伝えたいこと\u003C/h2>\u003Cp>この経験を通じて、Claude Code の使い方について 3 つのことがわかりました。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>カスタムコマンドで「仕組み」にする\u003C/strong>\u003Cul>\u003Cli>属人的な「上手いプロンプトの書き方」ではなく、誰でも実行できるコマンドとして定義します。これで品質が人に依存しなくなります。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Ca href=\"http://CLAUDE.md\">\u003Cstrong>CLAUDE.md\u003C/strong>\u003C/a>\u003Cstrong> に知識を貯める\u003C/strong>\u003Cul>\u003Cli>プロジェクト固有のルール（アーキテクチャ、命名規則、エラーコードなど）を CLAUDE.md ファイルに書いておきます。セッションが変わっても、Claude Code はこれを読んでくれます。移植が進むほどこのファイルが育ち、後半フェーズほど手戻りが減りました。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>品質保証を「計算資源」の問題にする\u003C/strong>\u003Cul>\u003Cli>1 ラウンド 20 エージェント × 379 ラウンド。この物量の検証を人間がやるのは無理です。でもコマンドにして 24 時間回せば、品質保証は工数の問題ではなく計算資源の問題になります。\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\u003Ch2 id=\"h5b6299b788\">「読んでない」のその先へ\u003C/h2>\u003Cp>冒頭に戻ります。\u003C/p>\u003Cp>\u003Cstrong>AI が書いたコード、読んでますか？\u003C/strong>\u003C/p>\u003Cp>私の答えは変わりません。全部は読んでいません。でも、全部検証しました。20 エージェント並列で、379 ラウンド、800 件のバグを潰して、最後に人間の手で E2E テストして、不具合ゼロ。\u003C/p>\u003Cp>もちろん、コードを読んで理解すること自体の価値を否定するつもりはありません。ただ、「読む」以外にも品質を担保する手段はあるはずです。\u003C/p>\u003Cp>\u003Cstrong>読むか読まないかではなく、正しさをどう証明するか。\u003C/strong> その仕組みを設計できるかどうかが、AI 時代のエンジニアリングで問われることなんじゃないかと思っています。\u003C/p>\u003Ch2 id=\"hc96909f29a\">この 3 ヶ月は長いのか\u003C/h2>\u003Cp>AI コーディングの事例として、「数時間でアプリを作った」「週末で完成した」といった話をよく見かけます。それと比べると、3 ヶ月という数字は地味に映るかもしれません。\u003C/p>\u003Cp>でも、考えてみてください。\u003Cstrong>テストのほぼない 10 万行のプロダクションコードを、133 エンドポイントの挙動を 1 つも壊さずに別言語へ移植\u003C/strong>する。普通にやったら 1 年はかかるプロジェクトです。見積もりの段階で「現実的じゃない」と却下されてもおかしくない。\u003C/p>\u003Cp>\u003Cstrong>それを 3 ヶ月で、しかも人間の E2E テストで不具合ゼロという品質で完遂\u003C/strong>できました。\u003C/p>\u003Cp>同じような課題を抱えている方は、少なくないと思います。テストのないレガシーシステム、移植したいけど踏み切れない、人手も時間も足りない。今回のアプローチは、そうしたプロジェクトにも十分に適用できると考えています。\u003C/p>\u003Cp>\u003Cstrong>レガシーシステムの移行でお困りの方がいらっしゃれば、ぜひご相談ください。\u003C/strong>\u003Cbr>\u003Cbr>\u003C/p>\u003Chr>\u003Cp>\u003Cspan style=\"color: #6c6c6c\">注記：本記事で紹介した \u003C/span>\u003Ccode>/migrate-endpoint\u003C/code>\u003Cspan style=\"color: #6c6c6c\">、\u003C/span>\u003Ccode>/parity-audit\u003C/code>\u003Cspan style=\"color: #6c6c6c\"> は Claude Code のカスタムスラッシュコマンド機能で構築したものです。\u003C/span>\u003C/p>","テストがほぼない10万行のPerl製ECバックエンドを、Claude Codeを使ってTypeScriptへ移植。カスタムコマンドによる実装生成とパリティ監査で、379ラウンドの検証、800件以上のバグ修正、1,419件のテスト構築まで行った取り組みを紹介します。",[58,60,62,64,66,68],{"id":59},"ai-generated-campaign-site",{"id":61},"event-ai-agent",{"id":63},"bird-classification-2",{"id":65},"edge-ai",{"id":67},"ux-certification-basics",{"id":69},"figma-plugin","https://www.s2factory.co.jp/blog/shader-basics/",{"id":50,"createdAt":72,"updatedAt":73,"publishedAt":74,"revisedAt":73,"title":75,"tag":76,"recommended_articles":83,"eyecatch":84,"heading_list":26,"content2":88,"description":89,"related_articles":90,"recruit":14,"is_html":14,"is_migration":14},"2026-03-17T06:24:17.497Z","2026-05-14T08:26:35.257Z","2026-03-30T08:35:07.001Z","Web サイトを使った謎解きを作ってみた",[77,79,81,82],{"id":78},"game",{"id":80},"tea",{"id":16},{"id":36},[],{"url":85,"height":86,"width":87},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1237f7caf6704f568fb90b1c3c65bcd3/s2-nazotoki.png",1201,1944,"\u003Cp>毎朝飲んでるトマトジュースがついに40円も値上げしてしまいました…。\u003C/p>\u003Cp style=\"text-align: start\">この記事は、社内イベント「\u003Ca href=\"https://www.s2factory.co.jp/blog/tea/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C/u>\u003C/a>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社の \u003Ca href=\"https://x.com/s2_takano\" target=\"_blank\" rel=\"noopener noreferrer\">takano\u003C/a> が、\u003Cstrong>「謎解き」\u003C/strong>をテーマに発表を行いました。\u003C/p>\u003Chr>\u003Cp>\u003Cbr>もともと謎解きが好きで、街歩き型のイベントや脱出ゲームなどにもよく参加しているほか、また最近では、自宅で遊べるキット型の謎解きなどにも手を出しています。\u003C/p>\u003Cp>その流れで、\u003Cstrong>今回自分でも謎解きを作ってみました。\u003C/strong>\u003C/p>\u003Cp>「謎解き」と言われても、あまり馴染みがないとイメージしづらいかもしれません。\u003Cbr>そもそも謎解きとはどういうものなのか。そこから説明したいと思います。\u003C/p>\u003Ch2 id=\"heb6bf4fdb1\">謎解きとは\u003C/h2>\u003Cp>まずはクイズとの違いから見てみます。\u003Cbr>たとえば、こんな問題です。\u003C/p>\u003Cblockquote>\u003Cp>\u003Cstrong>小田原北条氏の三代目は氏康ですが、その三男は北条氏照です。\u003Cbr>では、彼が築いた八王子にある山城といえば？\u003C/strong>\u003C/p>\u003C/blockquote>\u003Cp>答えは「\u003Cspan style=\"color: #ffffff\">八王子城\u003C/span>」。\u003Cbr>\u003Cbr>この問題は、知識がないと解くことができません。\u003Cbr>一方で、謎解きは少し性質が異なります。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/01968bad337e4b32a6ea03bd0288fd8e/%E8%AC%8E%E8%A7%A3%E3%81%8D%E8%BF%B7%E8%B7%AF.png?w=450&h=402\" alt=\"謎解き迷路\" width=\"450\" height=\"402\">\u003C/figure>\u003Cp>\u003Cbr>この問題を解くと、\u003Cspan style=\"color: #000000\">「\u003C/span>\u003Cspan style=\"color: #ffffff\">ウジテル\u003C/span>\u003Cspan style=\"color: #000000\">」\u003C/span>という答えが出てきます。\u003Cbr>\u003Cbr>\u003Cstrong>クイズが知識を前提にしているのに対して、謎解きは問題の中にある法則やヒントに気づく(閃く)ことで、答えにたどり着きます。\u003C/strong>北条氏照という人物を知らなくても解ける。これが、クイズと謎解きの大きな違いです。\u003C/p>\u003Cp>考えても分からない時間があって、\u003Cstrong>ふと気づく瞬間\u003C/strong>がある。\u003Cstrong>その体験が、謎解きの面白さ\u003C/strong>につながっています。\u003C/p>\u003Ch3 id=\"hd0bb2aed17\">謎解きの広がり\u003C/h3>\u003Cp>謎解きの起源については諸説ありますが、主な流れを整理すると以下の通りです。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>1997年頃：\u003C/strong>\u003Ca href=\"https://www.scrapmagazine.com/column/wakuwaku01/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>株式会社SCRAP代表が親戚の集まりで宝探しイベントを始める\u003C/strong>\u003C/a>\u003C/li>\u003Cli>\u003Cstrong>2001年：リアル宝探しの開始(タカラッシュ)\u003C/strong>\u003Cul>\u003Cli>現実空間で楽しむ謎解きが登場。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>2004年：『\u003C/strong>\u003Ca href=\"https://ja.wikipedia.org/wiki/%E8%84%B3%E5%86%85%E3%82%A8%E3%82%B9%E3%83%86_IQ%E3%82%B5%E3%83%97%E3%83%AA\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>脳内エステ IQサプリ\u003C/strong>\u003C/a>\u003Cstrong>』放送開始\u003C/strong>\u003Cul>\u003Cli>テレビ放送としての謎解きの原点ともいえる存在です。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>2004年：『\u003C/strong>\u003Ca href=\"https://y.honkakuha.success-games.net/game/su-56-crimsonroom/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>クリムゾン・ルーム\u003C/strong>\u003C/a>\u003Cstrong>』公開\u003C/strong>\u003Cul>\u003Cli>Flashゲームとして話題になり、脱出ゲームの原点のひとつとされています。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>2007年：リアル脱出ゲーム初開催(SCRAP)\u003C/strong>\u003Cul>\u003Cli>体験型イベントとして一気に広がります。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>2012年：\u003C/strong>\u003Ca href=\"https://www.newsweekjapan.jp/stories/business/2015/06/post-3675_3.php\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>海外展開\u003C/strong>\u003C/a>\u003Cstrong>(サンフランシスコなど)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>2017年：\u003C/strong>\u003Ca href=\"https://corp.eplus.jp/press-release/detail/20171102.html\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>東京ミステリーサーカス オープン\u003C/strong>\u003C/a>\u003Cul>\u003Cli>新宿歌舞伎町に脱出ゲームや謎解きが楽しめる常設施設が誕生。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>2019年：来場者100万人突破(東京ミステリーサーカス)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>2019年：\u003C/strong>\u003Ca href=\"https://riddler.co.jp/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>RIDDLER株式会社\u003C/strong>\u003C/a>\u003Cstrong>設立\u003C/strong>\u003Cul>\u003Cli>謎解きを軸に、さまざまなメディアで体験を企画・制作するクリエイター集団。\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\u003Cp>このように、謎解きは年々盛り上がりを見せており、現在では大きな\u003Cstrong>ブーム\u003C/strong>となっています。\u003C/p>\u003Cp>たとえば、株式会社SCRAPが手がけるリアル脱出ゲームは累計参加者1,500万人を突破し、大規模な体験型イベントとして定着しました。\u003Cbr>また、「\u003Ca href=\"https://realdgame.jp/s/chikanazo2025/?link=enjoy\" target=\"_blank\" rel=\"noopener noreferrer\">地下謎への招待状\u003C/a>」のように、\u003Cstrong>鉄道や街全体を使った、日常の移動や街歩きそのものがゲームとなる企画も登場\u003C/strong>し、多くの参加者を集めています。\u003C/p>\u003Cp>それだけでなく、\u003Cstrong>企業向けのチームビルディング研修\u003C/strong>などにも取り入れられ、エンタメにとどまらない形でも活用されています。\u003C/p>\u003Ch2 id=\"h88ea32f50f\">実際に謎解きを作ってみた\u003C/h2>\u003Cp>謎解きにハマってからというもの、脱出ゲームや街歩き型の謎解き、キットを購入して遊ぶタイプのものなど、\u003Cstrong>いろいろと遊んできました\u003C/strong>。そのうちに自分でも作ってみたくなり、実際に作ってみました。\u003Cbr>\u003Cbr>実は最近、トップページをリニューアルしたこともあり、せっかくならその内容も見てもらえるような形にできないかと思い、\u003Cstrong>Web サイトを見ながら進める謎解き\u003C/strong>を作ってみることにしました。\u003C/p>\u003Ch3 id=\"h339271c395\">ストーリーとキーワードの設定\u003C/h3>\u003Cp>ストーリーについては、\u003Cstrong>「こういうことをやりたい」という方向性\u003C/strong>を決めて、\u003Ca href=\"https://gemini.google.com/app?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer\">Gemini\u003C/a> に投げて考えてもらいました。\u003C/p>\u003Cp>あわせて、伝えたいキーワードも先に決め、それを最終的な答えとして設計しています。\u003Cbr>\u003Cstrong>どのように解くとその答えにたどり着くのか\u003C/strong>という流れも、この段階で考えました。\u003C/p>\u003Cp>今回の謎解きページは、\u003Cstrong>Web サイトのログイン画面をイメージ\u003C/strong>しています。\u003Cbr>各問題を解きながら情報を集め、最終的に導き出した答えをログイン用の\u003Cstrong>パスワード\u003C/strong>として入力することでクリア！という構成にしています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1237f7caf6704f568fb90b1c3c65bcd3/s2-nazotoki.png\" alt=\"\" width=\"1944\" height=\"1201\">\u003C/figure>\u003Ch3 id=\"ha572ddd150\">謎の設計\u003C/h3>\u003Cp>最終的な答えの文字数などから、\u003Cstrong>全体の STEP 数\u003C/strong>を決めています。\u003C/p>\u003Cp>Webサイトを見てもらうことが目的だったため、\u003Cstrong>サイトを見ながら答えにたどり着くような問題\u003C/strong>を中心にしたいと考えていました。ただ、実際に作ってみると難しく、途中でその方針を維持するのが難しくなり、\u003Cstrong>完全にはやりきれず…\u003C/strong>。\u003C/p>\u003Cp>ちなみにの話ですが、謎を作るうえで便利だったのが「\u003Ca href=\"https://shiwehi.com/tools/wordsearch/\" target=\"_blank\" rel=\"noopener noreferrer\">謎解き単語検索β\u003C/a>」です。\u003Cbr>答えに「ネコ」を使いたいがそのまま見せたくない場合に、「?ねこ?」のように指定すると、前後に文字を加えた単語を辞書から探してくれます。\u003C/p>\u003Ch3 id=\"h922edff87b\">実装\u003C/h3>\u003Cp>\u003Cstrong>謎解きに使った画像は Google Slide で作成し、それをWebページに落とし込む作業は \u003C/strong>\u003Ca href=\"https://antigravity.google/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Antigravity\u003C/strong>\u003C/a> で行いました。\u003C/p>\u003Cp>実装では、\u003Cstrong>ネタバレ防止\u003C/strong>の工夫に特に気を使っています。\u003Cbr>ソースコードから答えが分かってしまわないように \u003Cstrong>Hash\u003C/strong> を使うように指示したり、次のメッセージが先に見えてしまわないよう、\u003Cstrong>動的に JavaScript ファイルを読み込む仕組み\u003C/strong>にしています。\u003C/p>\u003Cp>また、スクロールスピードや文字をタイプしているような演出についても細かく指示を出し、\u003Cstrong>体験として違和感が出ないように調整\u003C/strong>しています。\u003C/p>\u003Ch3 id=\"h98ba4996ba\">デバッグ\u003C/h3>\u003Cp>まず、\u003Cstrong>脱出ゲームに慣れているスタッフにデバッグを依頼\u003C/strong>しました。\u003Cbr>その中で、間違いや別解の発生、分かりづらい箇所などの指摘を受け、内容や画像を修正しています。\u003C/p>\u003Cp>その後、別のスタッフにも解いてもらい、さらに\u003Cstrong>ブラッシュアップ\u003C/strong>を行いました。\u003Cbr>人によって詰まるポイントが異なる部分もあったため、\u003Cstrong>最終的には少し難易度を下げる方向で調整\u003C/strong>しています。\u003C/p>\u003Ch3 id=\"h785b0e1177\">公開\u003C/h3>\u003Cp>\u003Cstrong>最終的にAnalyticsの設定やインフラの準備も行い、公開\u003C/strong>しました。\u003C/p>\u003Ch2 id=\"h1331c56b22\">作ってみた感想\u003C/h2>\u003Cp>本来の仕事であるコーディングと近い部分もあり、普段とは違う形で頭を使うのが新鮮で楽しかったです。\u003C/p>\u003Cp>遊んでいる人の様子をリアルタイムで見られたら、どこで悩んでいるのか、どう進めているのかなども分かって面白かったのではないかと思います。\u003Cbr>今回はそこまで設計できていませんでしたが、\u003Cstrong>Analytics の取り方\u003C/strong>を工夫すれば、どこで詰まっているのかといった\u003Cstrong>ユーザーの動きも可視化\u003C/strong>できそうだと感じました。\u003C/p>\u003Cp>一方で、途中で力尽きてしまった部分もあり、当初考えていた\u003Cstrong>「Webサイトを見てもらいながら解いてもらう構成」を最後までやりきれなかった点は少し心残り\u003C/strong>です。\u003C/p>\u003Cp>実際に作ってみて、これを仕事としてやっているプロの謎解きクリエイターのすごさを改めて実感しました。\u003Cbr>\u003Cbr>もしよければ、\u003Ca href=\"https://lab.s2factory.co.jp/nazo2026s/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>実際に遊んでみてもらえると\u003C/strong>\u003C/a>幸いです。\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://lab.s2factory.co.jp/nazo2026s/\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?url=https%3A%2F%2Flab.s2factory.co.jp%2Fnazo2026s%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>","謎解きの基本から、Geminiを使ったストーリー設計やWebサイトを使った謎解きの制作プロセスまでを紹介。構成設計や実装、デバッグの工夫をまとめています。",[91,93,95,97,99,100],{"id":92},"vacation2024-missions",{"id":94},"office-humansensor",{"id":96},"toilet-sign",{"id":98},"game-development",{"id":65},{"id":61},{"id":46,"createdAt":102,"updatedAt":103,"publishedAt":104,"revisedAt":103,"title":105,"tag":106,"recommended_articles":119,"eyecatch":120,"heading_list":14,"content2":124,"description":125,"related_articles":126,"recruit":14,"is_html":14,"is_migration":14},"2026-01-08T07:37:35.535Z","2026-05-12T01:12:30.120Z","2026-03-10T00:38:35.975Z","NOËL 2025 特設サイト 制作振り返り",[107,108,110,111,113,115,117],{"id":21},{"id":109},"look-back",{"id":42},{"id":112},"design",{"id":114},"frontend",{"id":116},"animation",{"id":118},"3-d",[],{"url":121,"height":122,"width":123},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/e5ab4815df3942ccbfa7bd994c2233e3/1.png",1800,2400,"\u003Cp>弊社は、これまで\u003Ca href=\"https://www.pierreherme.co.jp/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>ピエール・エルメ\u003C/strong>\u003C/a>の Web サイト制作に、デザインと実装の両面から継続的に携わってきました。\u003Cbr>年末に公開される「NOËL」のマカロンのサイトは、その中でも毎年スペシャルサイトとして制作しているページです。\u003C/p>\u003Cp>2025年も過去の延長ではなく、あらためて表現や体験の設計から考え直し、新たに制作しました。\u003Cbr>\u003Cstrong>深海をモチーフにした世界観\u003C/strong>や、\u003Cstrong>サイト全体を通して展開される演出\u003C/strong>など、細かな検討を重ねながら形にしています。\u003C/p>\u003Cp>本記事では、NOËL 2025 特設サイトの制作を振り返りつつ、\u003Cstrong>デザインと実装の両面から、表現や実装をどのように組み立てていったのか\u003C/strong>を紹介したいと思います。\u003Cbr>\u003Cbr>実際のサイトはこちらです。\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.pierreherme.co.jp/feature/noel-2025/\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.pierreherme.co.jp%2Ffeature%2Fnoel-2025%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Ch2 id=\"h3bba4f50d6\">テーマと表現\u003C/h2>\u003Cp>今回制作した NOËL 2025 特設サイトは、年末に公開されるコンテンツとして、例年と同様に力を入れて制作したページです。\u003C/p>\u003Cp>テーマとして提示されていたのは、\u003Cstrong>「深海(アビス)」をモチーフにした世界観\u003C/strong>。\u003Cbr>\u003Cstrong>冒頭は、海面からマカロンが海底に向かって落ちていくアニメーション\u003C/strong>から始まります。そこから\u003Cstrong>スクロールに合わせて、背景のグラデーションや泡の演出が少しずつ変化\u003C/strong>していきます。\u003Cbr>\u003Cbr>要素を場面ごとに切り替えるのではなく、\u003Cstrong>同じ要素の状態を変えていく\u003C/strong>ことで、ページ全体が徐々に沈んでいく印象をつくりました。スクロール量がそのまま深さに対応する構成です。\u003Cbr>\u003Cbr>当初は逆方向の流れも想定していましたが、体験としての自然さを優先し、現在のものに落ち着きました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 75%;\">\u003Ciframe src=\"https://www.youtube.com/embed/0CUs99XDKqI?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\" referrerpolicy=\"strict-origin\">\u003C/iframe>\u003C/div>\u003Cp>\u003Cbr>商品情報のエリアでも、背景の泡や揺らぎはそのまま残しながら、商品画像の周囲に泡のフレームを重ねています。視線を商品に集めると同時に、海の中の要素としての泡もそこで見せ続けることで、流れを断ち切らず、世界観の中でフォーカスをつくっています。\u003Cbr>\u003Cbr>また、\u003Cstrong>パッケージにも使われているサンゴのイラストが持つきらめきや質感を、Web 上でも表現できないか\u003C/strong>という要望があり、制作の中でも表現として工夫したポイントの一つです。\u003C/p>\u003Ch2 id=\"ha2fbbc5f62\">実装について\u003C/h2>\u003Cp>今回のサイトでは、砂や泡の表現を画面全体で動かしています。そのため、処理負荷を前提に実装を組み立てました。\u003C/p>\u003Cp>\u003Cstrong>砂は WebGL のシェーダーを使用し、パーティクルで構成\u003C/strong>しています。数が数万個に及ぶため、CPU では負荷が高くなり重くなってしまうため、GPU で並列処理できるように \u003Cstrong>GPGPU という技術を採用\u003C/strong>し実装しました。描画や動きの計算を GPU で処理することで、数万個のパーティクルが滑らかに動くように実装しています。\u003C/p>\u003Cp>通常のテキスト要素では、砂のアニメーションを表現できないため、\u003Cstrong>一部のテキストを 3D モデルとして作成し、WebGL で描画・配置\u003C/strong>。ただし、そのままでは検索やテキスト選択ができなくなってしまうため、\u003Cstrong>SEO 的観点\u003C/strong>からも \u003Cstrong>DOM 上には同内容のテキストも配置\u003C/strong>し、表現と情報の両立を図りました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/34caffde445d451ca19cdef83760216e/%E7%A0%82%E3%81%AE%E8%A1%A8%E7%8F%BE.png\" alt=\"砂の表現\" width=\"1887\" height=\"1044\">\u003Cfigcaption>テキストは 3D で作成。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>背景では、泡が画面下部から上部へと浮かび続けています。\u003Cbr>初めは画面全体に満遍なく漂っていますが、スクロールが進みサンゴのイラストの位置に達すると、左右へと散るようにしています。中央から泡が減ることで、自然にコンテンツへ視線が向かうようにしています。\u003C/p>\u003Cp>この泡も砂と同じく \u003Cstrong>WebGL のシェーダーで制御\u003C/strong>し、\u003Cstrong>ノイズ関数を用いて形状を変化させ、水中らしい速度や揺れ幅になるよう調整\u003C/strong>しました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 75%;\">\u003Ciframe src=\"https://www.youtube.com/embed/oSIIvT5jZ-0?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\" referrerpolicy=\"strict-origin\">\u003C/iframe>\u003C/div>\u003Cp>\u003Cbr>一方で、\u003Cstrong>商品情報エリアで商品画像を囲む泡\u003C/strong>は、別のアプローチを取っています。こちらは以前ブログで解説した \u003Cstrong>SVG の円アニメーションを応用\u003C/strong>したものです。\u003Cbr>視線を集めるフレームとして機能させながら、水中の揺らぎとしても違和感が出ないよう、動きや歪みを調整しています。\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/svg-animation/\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fsvg-animation%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/dbf4059fd28646b7887aff54eb237ec5/awa.png\" alt=\"限定のテキスト\" width=\"1754\" height=\"1037\">\u003Cfigcaption>右下の限定のテキストは海藻をイメージした動きに。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cstrong>サンゴのイラストに使われている箔押しの質感を、Web上でもどう再現するか\u003C/strong>も今回のテーマでした。スクロール位置に応じて色味や干渉の見え方が変化するようにし、きらめきがわずかに揺らぐ印象をつくっています。\u003C/p>\u003Cp>この表現はサンゴのイラストだけでなく、一部のテキストにも展開しています。強いエフェクトではなく、あくまで質感として馴染ませることで、全体の世界観に統一感を持たせました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/4685154937f147cc81fb4b135aa6b471/%E3%82%B5%E3%83%B3%E3%82%B4.png\" alt=\"サンゴのイラスト\" width=\"2204\" height=\"1704\">\u003Cfigcaption>スクロール位置によって色味が変わる。\u003C/figcaption>\u003C/figure>\u003Ch3 id=\"h20a7e56e9b\">ブラウザ差への対応\u003C/h3>\u003Cp>ブラウザごとの差も、実装を進める中で意識していた点のひとつです。\u003Cbr>SVG で表現していた部分が Safari では重くなることが判明したため、その箇所は Canvas に置き換えて、サイトのパフォーマンスが落ちないように調整しました。\u003C/p>\u003Cp>Chrome で問題なく動いていても、Safari やスマートフォンで成立しない表現は採用していません。\u003Cbr>見た目や動きの印象を変えずに、\u003Cstrong>さまざまな環境で無理なく動作\u003C/strong>するようにしています。\u003C/p>\u003Ch2 id=\"h70d3b5ba0f\">デザイナーとエンジニアの連携\u003C/h2>\u003Cp>今回の制作では、\u003Cstrong>早い段階で動きを確認できるモックを用意\u003C/strong>しました。砂や泡、揺らぎといった表現は静止画では判断できないため、密度や速度、スクロール時の変化量を実際に動かしながら決めていく必要があったからです。\u003Cbr>\u003Cbr>制作チーム内でも、完成デザインを渡してから実装するという流れではなく、\u003Cstrong>動く状態を前提\u003C/strong>に進めています。砂や泡の密度、揺らぎの強さ、スクロール時の変化量などは、実際に動かした状態で確認しながら決めていきました。静止画で固めてから実装するのではなく、挙動を見ながら細部を詰めていく進め方です。\u003C/p>\u003Cp>このモックは制作チーム内の検証だけでなく、ピエール・エルメの本社がフランスにあるため、本国側との共有にも使っています。完成形を言葉で説明するのではなく、実際の動きを見せながら認識を揃えていきました。\u003C/p>\u003Ch3 id=\"hbc6a78803c\">動きの強さのバランス\u003C/h3>\u003Cp>調整の中で、結果的に\u003Cstrong>採用しなかった表現\u003C/strong>もあります。\u003Cbr>たとえば、商品周りの揺らぎや動きについては、当初はもっと強くかけることも可能でした。\u003Cbr>\u003Cbr>ただ、動きを強めすぎると視線が演出に引っ張られ、商品そのものが見えづらくなります。そのため、動きをなくすのではなく、意識しない程度に抑えています。\u003Cbr>結果として、表現を足していくというよりも、\u003Cstrong>「どこで止めるか」を決めていく作業が多かった\u003C/strong>、という印象です。\u003C/p>\u003Ch2 id=\"ha214098e44\">まとめ\u003C/h2>\u003Cp>弊社では、社内の\u003Cstrong>デザイナーとエンジニア\u003C/strong>が普段から一緒にプロジェクトに関わり、\u003Cstrong>それぞれの視点や知見を共有\u003C/strong>しながら制作を進めています。\u003Cbr>職種は違いますが、お互いの領域を理解しているからこそ、\u003Cstrong>表現と実装を分けずに扱う\u003C/strong>ことが可能です。\u003Cbr>\u003Cbr>また、エンジニアもヒアリングの段階から直接やり取りに入り、技術的な可能性や制約を共有しながら、\u003Cstrong>「どうすれば実現できるか」\u003C/strong>を具体化できることも S2 の特長です。\u003Cbr>というのも、日々新しい技術に触れ、表現の幅を広げている土台があるからです。今回の砂や泡の表現も、その積み重ねの一つ。\u003C/p>\u003Cp>NOËL 2025 の制作も、こうした関わりの中で形になりました。\u003Cbr>\u003Cstrong>対話を重ねながら、デザインと技術の両面から最適な形を探る。\u003C/strong>それが私たちの進め方です。\u003Cbr>\u003Cbr>Web サイトの制作やリニューアルをご検討の際は、ぜひお気軽にご相談ください。\u003C/p>","ピエール・エルメ「NOËL 2025」特設サイトの制作事例。深海をテーマにした体験設計と、WebGLやGPGPUを用いたパーティクル表現など、デザインと実装の工夫を紹介します。",[],{"url":128,"height":129,"width":130},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/c265bf88145b4209b9b9b3e05d5ce1f9/bookshelf-1.jpg",3024,4032,"\u003Cp>オフィスの 2 階にあるリラックスルームには、\u003Cstrong>スタッフが推薦した漫画を集めた本棚\u003C/strong>があります。\u003C/p>\u003Cp>\u003Ca href=\"https://www.s2factory.co.jp/blog/relax-room/\" target=\"_blank\" rel=\"noopener noreferrer\">以前の記事\u003C/a>でも紹介したとおり、この部屋は昼寝やミーティング、ピラティス、ゲーム、推し活、上映会など、さまざまな用途で使われている空間です。その一角に、技術書や業務に関する書籍とは別に、漫画を自由に読める棚を設けています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/aed6b5618b2b4fd59dc16c4ee9a3babe/bookshelf-2.jpg\" alt=\"休憩室\" width=\"4032\" height=\"3024\">\u003C/figure>\u003Cp>\u003Cbr>スタッフのおすすめを持ち寄ることで、\u003Cstrong>普段は自分で選ばない作品を知ったり、漫画をきっかけに会話が生まれたりする場所\u003C/strong>を目指しています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/relax-room/\" data-iframely-url=\"https://iframely.net/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Frelax-room%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://iframely.net/embed.js\" charset=\"utf-8\">\u003C/script>\u003Ch2 id=\"h76e75bd31d\">漫画を選んだ理由\u003C/h2>\u003Cp>弊社では、メディアやコンテンツに関わるプロジェクトも多く、\u003Cstrong>日頃から幅広い物語や表現に触れることが、制作物への理解や提案の幅を広げる\u003C/strong>ことにもつながると考えています。\u003C/p>\u003Cp>その中でも漫画は、誰でも気軽に手に取りやすい媒体です。休憩時間に少しだけ読んだり、気になった作品を自分のペースで読み進めたりできます。\u003C/p>\u003Cp>こうした仕事との接点と親しみやすさから、まずは漫画を中心にそろえていくことになりました。\u003C/p>\u003Ch2 id=\"h163b8534fc\">作品の選び方\u003C/h2>\u003Cp>本棚に追加する作品は、\u003Cstrong>スタッフからの推薦と投票\u003C/strong>で決めています。\u003Cbr>候補はスプレッドシートで管理しており、推薦するスタッフが次の情報を記入します。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>タイトル\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>作者\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>現在の巻数\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>完結しているかどうか\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>推薦コメント\u003C/strong>\u003C/li>\u003C/ul>\u003Cp>推薦コメントには、あらすじだけでなく、どこがおもしろかったのか、なぜほかのスタッフにも読んでほしいのかといった、おすすめの理由が添えられます。\u003C/p>\u003Cp>投票は現在、不定期に実施しています。事前に Slack で開催を知らせ、候補の中から読みたい漫画にリアクションで投票。\u003Cstrong>得票数の多い作品から順に、票数に応じて購入\u003C/strong>する巻数を決め、予算の範囲内で購入されるシステムです。\u003C/p>\u003Cp>締切が近づくと、漫画用の Slack チャンネルで\u003Cstrong>推薦者による選挙活動\u003C/strong>が始まることもあります。推している作品の魅力を紹介したり、ほかのスタッフから質問が寄せられたりと、\u003Cstrong>投票前からちょっとした盛り上がり\u003C/strong>を見せることも。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/246d8519f8814b44924ab1dec72f2f3a/bookshelf-3.jpg?w=716&h=800\" alt=\"漫画棚\" width=\"716\" height=\"800\">\u003C/figure>\u003Ch2 id=\"h7a10f09440\">本棚の管理もシステム化へ\u003C/h2>\u003Cp>冊数が増えてきたことから、今後は\u003Cstrong>本棚を管理する仕組み\u003C/strong>も検討しています。\u003C/p>\u003Cp>現在考えているのは、\u003Cstrong>どのような本があり、どこに置かれているのか、貸し出し中の場合は誰が持っているのか\u003C/strong>を確認できるシンプルなシステムです。バーコードを読み取ると、書籍情報のAPIからタイトルや表紙画像などを取得し、自動で登録できる形を想定しています。\u003C/p>\u003Cp>まずは技術書の本棚での導入を検討しており、仕組みが整えば漫画の管理にも活用する予定です。さらに、どこまで読んだかを記録したり、漫画本棚の「制覇率」を表示したりと、読むこと自体を楽しめる機能もアイデアとして挙がっています。\u003C/p>\u003Ch2 id=\"h4737611bc7\">これからのこと\u003C/h2>\u003Cp>この本棚は、スタッフの提案から始まり、推薦や投票を取り入れながら現在の形になりました。目論見通り、漫画が増えるにつれて感想を交わしたり、次に読みたい作品を勧め合ったりする\u003Cstrong>コミュニケーション\u003C/strong>も新たに生まれています。\u003C/p>\u003Cp>今後は、冊数に合わせた整理や保管、作品の追加・入れ替え、リモート勤務のスタッフも参加しやすい方法などを見直していく予定です。本棚に限らず、日々の中で出てきたアイデアを取り入れながら、スタッフが過ごしやすい環境を少しずつ整えていきます。\u003C/p>\u003Cp>本棚に限らず、身近なアイデアをまず試し、使いながらよりよい形にしていく。そんな柔軟さを大切にしながら、これからも\u003Cstrong>スタッフが気持ちよく過ごせる環境\u003C/strong>をつくっていきます。\u003C/p>","オフィスのリラックスルームに設けた、スタッフ推薦の漫画を集める本棚。漫画を選んだ理由や、Slackでの投票を取り入れた作品選びの仕組みを紹介します。",[134,155,176,193,211,230],{"id":135,"createdAt":136,"updatedAt":137,"publishedAt":138,"revisedAt":137,"title":139,"tag":140,"recommended_articles":148,"eyecatch":149,"heading_list":14,"content2":153,"related_articles":154,"recruit":14,"is_html":14,"is_migration":14},"relax-room","2025-03-18T01:43:49.576Z","2026-05-14T08:30:18.520Z","2025-06-13T07:12:42.700Z","昼寝から推し活まで。オフィスのリラックスルームの話",[141,142,144,146,147],{"id":11},{"id":143},"pilates",{"id":145},"club",{"id":78},{"id":16},[],{"url":150,"height":151,"width":152},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/fbabfbf964e44fa5bf8aa73af67e358f/office-3.jpg",434,650,"\u003Cp>オフィスの2階にある\u003Cstrong>「リラックスルーム」\u003C/strong>は、スタッフが自由に過ごせる多目的なスペースです。\u003Cbr>畳が敷かれ、靴を脱いでリラックスできるこの部屋は、オフィスにいながら少し気持ちを切り替えられる場所として、多くのスタッフに親しまれています。\u003C/p>\u003Cp>壁にはアーティストの \u003Ca href=\"http://mhak.jp/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>MHAK\u003C/strong>\u003C/a>\u003Cstrong> \u003C/strong>によるペインティングとサインが描かれており、1 階エントランスやミーティングルームと並んで、会社の空間づくりに一貫した世界観を与えています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/3fc236bd9219457b9df2232abf757f7d/wall-7.jpg?w=650&h=433\" alt=\"MHAKのペインティング\" width=\"650\" height=\"433\">\u003C/figure>\u003Cp>\u003Cbr>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/moving2023-interview-2/\" data-iframely-url=\"//cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fmoving2023-interview-2%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"//cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Ch3 id=\"hdb26563bbb\">「余白」から始まる、コミュニケーション\u003C/h3>\u003Cp>このリラックスルームは、ただの休憩所ではありません。\u003Cbr>構想の段階から大切にしていたのは、\u003Cstrong>「気分を切り替えたり、雑談したり、ちょっと立ち止まれる空間があること」\u003C/strong>。\u003Cbr>それは仕事の効率だけでなく、人間関係やチームワーク、発想の広がりにもつながっていくと考えたからです。\u003C/p>\u003Cp>象徴的なのが、\u003Cstrong>漫画本の棚\u003C/strong>。\u003Cbr>ここに並んでいるのは、ただ集められたものではなく、\u003Cstrong>社員に「会社に置きたい漫画」を募って購入したもの\u003C/strong>です。\u003Cbr>\u003Cbr>自分が読みたい作品、誰かに勧めたい作品。「この本、誰が選んだんだろう？」そんな会話がふと生まれることもあります。本棚そのものが、ゆるやかなコミュニケーションのきっかけとなっているのです。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/42011e7a3d604a178d257a0438dca19b/manga-1.jpg?w=650&h=487\" alt=\"漫画棚\" width=\"650\" height=\"487\">\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/22e32c0cc426476697fd8a8cee262b5c/manga-2.jpg?w=650&h=487\" alt=\"漫画棚\" width=\"650\" height=\"487\">\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/fb31f1d2a3754b9cb83852f36d62101e/manga-3.jpg?w=650&h=487\" alt=\"漫画棚\" width=\"650\" height=\"487\">\u003C/figure>\u003Ch3 id=\"hfb47a22993\">自然と広がる、使い方のバリエーション\u003C/h3>\u003Cp>設置当初の想定を超えて、使い方の幅もどんどん広がっています。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>昼休みに仮眠をとる\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>気分を変えてデスクワークやオンラインミーティングを行う\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>プロジェクターを使って映画やライブ映像を楽しむ推し活\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>ボードゲームを囲んで交流する\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>備え付けのPS5を使って、社内からesports部の活動に参加\u003C/strong>\u003C/li>\u003C/ul>\u003Cp>会社の福利厚生として\u003Cstrong>毎週火曜の昼休みに実施しているオンラインピラティス\u003C/strong>も、出社しているスタッフたちがこの部屋に集まり、画面を見ながら一緒に体を動かしています。\u003Cbr>畳の上で、ちょっとしたストレッチやリフレッシュをするのにもぴったりな場所です。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/6ba735b391f04f0cb449ca75cfaeb363/relaxroom-1.png?w=650&h=481\" alt=\"映画鑑賞会の様子\" width=\"650\" height=\"481\">\u003Cfigcaption>プロジェクターを使って映画鑑賞会や推し活などのイベントが行われることも。\u003C/figcaption>\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/119493275edd473085c60d296b80f68d/relaxroom-2.jpg?w=650&h=365\" alt=\"esportsをやってる様子\" width=\"650\" height=\"365\">\u003C/figure>\u003Cp>\u003Cbr>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/pilates/\" data-iframely-url=\"//cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fpilates%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"//cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Cp>\u003Cbr>誰かが静かに仕事をしていたり、昼寝をしていたり、同じ趣味の話で盛り上がっていたり。リラックスルームは、そんなふうに自然体で過ごせる場所として、少しずつ定着してきました。\u003C/p>\u003Cp>特別な目的がなくても立ち寄れる、気軽に使える場所がオフィスの中にあることで、業務の効率だけでなく、ちょっとしたリズムの変化や、会話のきっかけが生まれやすくなります。\u003C/p>\u003Cp>オフィスにお越しの際は、ぜひお気軽にお立ち寄りください。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cspan style=\"color: #b2b2b2\">下の特設サイトにオフィスに関する記事がまとめてありますので、良かったらそちらも合わせてご覧になってみてください。\u003C/span>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/moving2023/\" data-iframely-url=\"//cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fmoving2023%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"//cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>",[],{"id":156,"createdAt":157,"updatedAt":158,"publishedAt":159,"revisedAt":158,"title":160,"tag":161,"recommended_articles":169,"eyecatch":170,"heading_list":26,"content2":174,"related_articles":175,"recruit":14,"is_html":14,"is_migration":14},"moving2023-lookback","2024-06-07T06:07:04.702Z","2025-06-12T08:01:24.246Z","2024-06-14T07:42:38.000Z","新オフィスへの引越し：社内座談会で振り返るプロジェクトの裏側",[162,163,165,166,167],{"id":21},{"id":164},"interview",{"id":109},{"id":112},{"id":168},"moving",[],{"url":171,"height":172,"width":173},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1b142a8c72a04fa9b7788d0a13e1fad5/%E5%BA%A7%E8%AB%87%E4%BC%9A-1.png",800,1200,"\u003Ch2 id=\"h76899d6b28\">出社が楽しみになるような魅力的なプラットフォームに\u003C/h2>\u003Cp>\u003Cstrong>「働く場をつくる」という枠にとらわれず、自由な発想のもとで魅力的な空間に仕立てた新オフィス。\u003C/strong>この移転プロジェクトを主導したのがS2ファクトリー内の「movingチーム」です。栗山、仁科、根岸、小泉、山田からなる主要メンバー5名に、本プロジェクトを振り返ってもらいました。\u003C/p>\u003Cp>\u003Cstrong>＜メンバー＞\u003C/strong>\u003C/p>\u003Cp>\u003Cstrong>栗山\u003C/strong>\u003Cbr>取締役 兼 インフラエンジニア。社員が快適かつ効率的に働けるネットワーク環境を整備。\u003C/p>\u003Cp>\u003Cstrong>仁科\u003C/strong>\u003Cbr>経理。オフィスの移転に伴い、不用になった備品の譲渡および廃棄を担当。\u003C/p>\u003Cp>\u003Cstrong>根岸\u003C/strong>\u003Cbr>アートディレクター。社内の意見をまとめ、新オフィスの内装や家具の指揮を担当。\u003C/p>\u003Cp>\u003Cstrong>小泉\u003C/strong>\u003Cbr>フロントエンドエンジニア。外部と連携して昇降デスクやミューラルアートの導入を実現。\u003C/p>\u003Cp>\u003Cstrong>山田\u003C/strong>\u003Cbr>UIデザイナー。社名プレートや出入口、郵便ポストなどのサインデザインを担当。\u003C/p>\u003Ch2 id=\"h6cada5dfb4\">S2らしさを存分に表現できそうな物件\u003C/h2>\u003Cp>\u003Cstrong>栗山\u003C/strong>\u003Cbr>オフィスの移転を考えたきっかけは、\u003Cstrong>コロナ禍に推進したリモートワークによって出社する社員が減り、ワークスペースが余っていたこと\u003C/strong>です。まずは新オフィス探しからスタートしました。\u003Cbr>社員からの協力を得るべく、Slack 上にmovingチームを結成し、意見を交換するようになりましたよね。\u003C/p>\u003Cp>\u003Cstrong>仁科\u003C/strong>\u003Cbr>movingチームの第1回ミーティングで、物件を選ぶ際の条件を決めた記憶があります。\u003C/p>\u003Cp>\u003Cstrong>栗山\u003C/strong>\u003Cbr>一つ目は\u003Cstrong>ハイブリッドワークを前提とした適正な広さ\u003C/strong>であること。\u003Cbr>二つ目は\u003Cstrong>社員が通勤しやすいよう、旧オフィスのあった渋谷周辺\u003C/strong>であること。\u003Cbr>これら条件に一致する物件は限られていて、物件探しは難航しました。\u003C/p>\u003Cp>\u003Cstrong>仁科\u003C/strong>\u003Cbr>そんな最中、代表の花井が今回の移転先となる塩入小路が今なら空いているのではと、問い合わせてみたんです。\u003C/p>\u003Cp>\u003Cstrong>栗山\u003C/strong> \u003Cbr>\u003Cstrong>ここはS2の前身企業が入っていたオフィス\u003C/strong>で、何人かの社員にとっては慣れ親しんだ場所です。\u003Cbr>そのため親近感はあったものの建物の構造や広さなど、確認しておきたいポイントは多々あった。そこで内見を行うことにしました。\u003C/p>\u003Cp>\u003Cstrong>根岸\u003C/strong>\u003Cbr>庭があること、大きな窓から太陽光がよく入ること、オフィスらしさを感じないこと。\u003Cbr>改めて目にして、僕はそのあたりに惹かれました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/e644f525776f4472b36e85e7c290de0e/%E5%BA%A7%E8%AB%87%E4%BC%9A-3.jpg\" alt=\"\" width=\"2500\" height=\"1667\">\u003C/figure>\u003Cp>\u003Cbr>\u003Cstrong>仁科\u003C/strong>\u003Cbr>私が魅力を感じたのは、最寄り駅から徒歩2分にも関わらず、静かな環境であることです。\u003Cbr>また、新しいオフィスには今までなかったキッチンがあり、これも大きな魅力の一つでした。\u003C/p>\u003Cp>\u003Cstrong>栗山\u003C/strong>\u003Cbr>これまでに内見した物件と比べ、明らかに社員の反応も良かったです。みんなのフィーリングに合うものがあったんだと思います。条件にも合致したので、ここに決めました。\u003C/p>\u003Ch2 id=\"h741e6f1ceb\">オフィスづくりに欠かせない、信頼できるデザイナーとの出会い\u003C/h2>\u003Cp>\u003Cstrong>根岸\u003C/strong>\u003Cbr>Zoom上で新オフィスのデザインについて話し合ったのは、2022年11月のことです。\u003Cbr>どのような空間にしたいか、社内から意見を募りました。\u003C/p>\u003Cp>\u003Cstrong>仁科\u003C/strong>\u003Cbr>ここで上がったのが、部屋ごとに床や雰囲気を変えたいという声です。\u003C/p>\u003Cp>\u003Cstrong>根岸\u003C/strong>\u003Cbr>その後も、Slack上に「マンガ棚」や「昇降デスク」、「見せる本棚」といった意見が上がりました。\u003Cbr>これらの意見を取り入れていけば、社員の出社頻度は高まるはず。\u003Cbr>そこで移転のテーマのひとつを\u003Cstrong>「居心地が良く、みんなの個性が表現されたオフィス」\u003C/strong>にしました。もうひとつは\u003Cstrong>「デザイン的にこだわったオフィス」\u003C/strong>です。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/8a9c1366f8b14f3690fbb2eadd30f802/%E5%BA%A7%E8%AB%87%E4%BC%9A-2.png\" alt=\"\" width=\"1200\" height=\"800\">\u003C/figure>\u003Cp>\u003Cbr>\u003Cstrong>栗山\u003C/strong>\u003Cbr>2023年の1月頃から、\u003Cstrong>僕らの構想を形にしてくれるパートナー探し\u003C/strong>もスタートしました。\u003C/p>\u003Cp>\u003Cstrong>根岸\u003C/strong>\u003Cbr>知人を介して紹介してもらったデザイン会社から新オフィスのレイアウトや内装の提案を受けました。\u003Cbr>ただ、S2がどういった会社で、今回の移転で何を重視しているのか、といったことを踏まえないままに提案が続いたことにもどかしさを感じたのと、「らしさ」を引き出すことを旨とする我々のスタイルと相反するものを感じたので、結果的には床とネットワークの工事のみを依頼するに留まりました。\u003C/p>\u003Cp>\u003Cstrong>小泉\u003C/strong>\u003Cbr>次なるパートナーとの出会いは偶然でした。\u003Cbr>\u003Ca href=\"https://dalamokko.net/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>DaLa木工さん\u003C/strong>\u003C/a>に昇降デスクの制作について相談したところ、彼らから協業したいデザイナーとして紹介されたのが\u003Ca href=\"http://ambos.pw/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>株式会社ambos\u003C/strong>\u003C/a>\u003Cstrong>の代表を務める石井一東さん\u003C/strong>です。\u003Cbr>打ち合わせが決まったところで、石井さんのWebサイトを見たら事務所が素敵だったこともあり、訪問したいとお願いしました。\u003C/p>\u003Cp>\u003Cstrong>根岸\u003C/strong>\u003Cbr>石井さんからは、昇降デスク以外についてもアドバイスをいただきました。\u003Cbr>例えば、レイアウトによる導線の作り方、雑談が生まれる場所づくり、反響音を抑える方法、プライバシー空間の作り方など、オフィス設計全般についてその場で教えていただいたのを覚えています。\u003Cbr>石井さんは、\u003Cstrong>S2のミッション「らしさを、仕立てる。」\u003C/strong>や社員についても興味を持ってくださり、\u003Cstrong>僕らをしっかり理解した上でデザインに臨む姿勢が嬉しかった\u003C/strong>です。\u003C/p>\u003Cp>\u003Cstrong>小泉\u003C/strong>\u003Cbr>僕も根岸も「これは、いいプロジェクトになりそうだ！」という期待感でいっぱいに。\u003Cbr>打ち合わせ後、すぐに会社から発注の承認を得ました。\u003C/p>\u003Ch2 id=\"had922a65a0\">壁一面に描かれたアートがゲストをお出迎え\u003C/h2>\u003Cp>\u003Cstrong>栗山\u003C/strong>\u003Cbr>\u003Cstrong>石井さんにお願いしたのは、オフィスを移転する約 1 カ月前\u003C/strong>、つまり2023年4月中旬頃だったはずです。\u003Cbr>S2らしさを追求するためにも、\u003Cstrong>移転までに内装や家具の手配を強引に間に合わせるのではなく、まずは旧オフィスの家具を移転先でも使用しながら、納得いく内装・家具を追求する方針\u003C/strong>に切り替えました。\u003Cbr>ここから、オフィスの移転に向けて細かな部分を詰めていくことになります。\u003C/p>\u003Cp>\u003Cstrong>根岸\u003C/strong>\u003Cbr>そうですね。そのひとつが\u003Cstrong>サインデザイン\u003C/strong>です。\u003Cbr>新オフィスでは社員用、ゲスト用、宅配業者用と出入口を分けることになったので、それぞれにサインが必要になりました。このデザインを山田が担当してくれました。\u003C/p>\u003Cp>\u003Cstrong>山田\u003C/strong>\u003Cbr>はい。元々サインデザインには関心があったので、根岸からの打診には二つ返事で飛びつきました。\u003Cbr>今回は、著名な建築家が何を考えてデザインしているか、どのような工夫を凝らしているか、といったことを調べながら制作を進めました。印象に残っているのは、\u003Cstrong>「一番のポイントは、それぞれの出入口へしっかり誘導できること」\u003C/strong>という根岸からのアドバイスです。\u003Cbr>基本中の基本ではありますが、実寸大に出力した用紙を出入口に貼りながら、大きさや形状の調整を重ねていきました。\u003C/p>\u003Cp>\u003Cstrong>根岸\u003C/strong>\u003Cbr>実際、ゲストや宅配業者が出入口を間違えることはほとんどありません。\u003Cbr>デザインがしっかり機能している証拠だと思います。\u003C/p>\u003Cp>\u003Cstrong>小泉\u003C/strong>\u003Cbr>新オフィスに移転したのは2023年5月で、まず形にしたのが\u003Cstrong>見せる本棚\u003C/strong>です。\u003Cbr>当時から在籍していた社員24名から\u003Cstrong>それぞれが関心のあるキーワード\u003C/strong>を提示してもらい、それらをもとに石井さんから紹介いただいた名古屋の\u003Ca href=\"https://www.liebbooks.com/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>LIEB BOOKさん\u003C/strong>\u003C/a>\u003Cstrong>が選書した24冊\u003C/strong>を並べました。社員それぞれの興味が垣間見られる書籍を手にすることで、社内外の人たちとのコミュニケーションが増えてほしいですね。\u003C/p>\u003Cp>\u003Cstrong>根岸\u003C/strong>\u003Cbr>そうですね。これらの本は社員も読めるようになっていて、社員の関心事を知るツールとしても活用してもらえればと思います。\u003Cbr>僕は家紋、小泉は建築、山田はタイポグラフィの本。他にも天文学や建築、パッケージデザインなど様々なジャンルの本が並べられています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/9b2fb54bb36a4a1d88e80b0e497bf8bb/office-2.jpg\" alt=\"\" width=\"3000\" height=\"2000\">\u003C/figure>\u003Cp>\u003Cbr>\u003Cstrong>小泉\u003C/strong>\u003Cbr>\u003Cstrong>ミューラルアート\u003C/strong>が完成したのは2023年8月です。僕がアートのあるオフィスに憧れていたことがきっかけで構想はスタートしました。これを描いたのは、国内外で活躍する\u003Cstrong>ペインターの\u003C/strong>\u003Ca href=\"http://mhak.jp/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>MHAK\u003C/strong>\u003C/a>。\u003Cbr>彼とは面識があり、作風も知っていました。だから具体的なオーダーはせず、一度内見してもらっただけで自由に描いてもらいました。\u003C/p>\u003Cp>\u003Cstrong>山田\u003C/strong>\u003Cbr>MHAKさんのペインティング当日にたまたま出社したのですが、\u003Cstrong>「余白にも意味を込めている」\u003C/strong>という話を伺い、このアートを見る目が変わりました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/a8540d421bd443a3a843c1b0b99bc4ab/office-3.jpg?w=650&h=975\" alt=\"エントランス\" width=\"650\" height=\"975\">\u003C/figure>\u003Ch2 id=\"hfb36ea58a6\">オリジナルの昇降デスクが完成\u003C/h2>\u003Cp>\u003Cstrong>栗山\u003C/strong>\u003Cbr>2 階の部屋は、みんながくつろげる場所にしたかったので\u003Cstrong>畳\u003C/strong>を敷いて、\u003Cstrong>マンガ棚\u003C/strong>を置きました。\u003Cbr>マンガは自身が読みたい作品と、社員に薦めたい作品について社内アンケートを実施して、特に多くの声が上がった作品を選んでいます。\u003C/p>\u003Cp>\u003Cstrong>山田\u003C/strong>\u003Cbr>社内システム上で作品の推薦者がわかるようになっていて、社員が薦めているマンガを読むと、その人となりが見えるようで面白いですよね。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1eb4acfcbdce4346b656e809ca97955d/office-4.jpg\" alt=\"\" width=\"3000\" height=\"2001\">\u003C/figure>\u003Cp>\u003Cbr>\u003Cstrong>小泉\u003C/strong>\u003Cbr>内装の施工日や家具の納品日が決まっていく中、石井さんからの要望でひと通り完了した後の新オフィスを撮影することになったのですが、撮影前に 2 階の部屋を見渡すと、畳と照明しかなくて殺風景に感じました。\u003Cbr>もっと見栄えするようにしたいと思い、\u003Cstrong>観葉植物を飾ることを提案\u003C/strong>します。\u003C/p>\u003Cp>\u003Cstrong>根岸\u003C/strong>\u003Cbr>今回のプロジェクトでは、\u003Cstrong>プライベートの繋がりから仕事を依頼することが多かった\u003C/strong>のですが、ここで相談した先も、プライベートでお世話になっている\u003Ca href=\"https://www.instagram.com/sougensya1/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>草原舎さん\u003C/strong>\u003C/a>。\u003Cbr>S2 の特徴や部屋のコンセプトなどを説明し、植物のセレクトは一任しました。これらはオフィスの随所に設置しています。\u003Cbr>\u003Cbr>\u003Cstrong>栗山\u003C/strong>\u003Cbr>オフィスに植物が配置されたことで空間がより心地良くなりました。\u003Cbr>\u003Cstrong>植物の手入れを、社員同士が行うことによって新たな会話も生まれています。\u003C/strong>中には育てることの面白さ、難しさを感じている社員もいるようです。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/7743073c00e74f7f8cacc08f028fdbfb/office-6.jpg\" alt=\"\" width=\"3000\" height=\"2001\">\u003C/figure>\u003Cp>\u003Cbr>\u003Cstrong>小泉\u003C/strong>\u003Cbr>最後に完成したのが、\u003Cstrong>昇降デスク\u003C/strong>です。\u003Cbr>石井さんには欧米の家具メーカーの製品をご覧いただき、\u003Cstrong>家具としての格好良さとエンジニアにとっての使いやすさを両立させるデザインをオーダー\u003C/strong>しましたが、途中でデザインのやり直しが発生するなど、思いのほか難航しました。\u003Cbr>主な原因は、昇降用のパーツを前にして石井さんのデザインを実現できないことが判明したためです。\u003C/p>\u003Cp>\u003Cstrong>栗山\u003C/strong>\u003Cbr>DaLa木工さんも苦労していました。\u003Cbr>天板裏の中央に昇降用モーターを設置するため、昇降デスクの脚を大きくして重心を下げる必要がありましたが、私たちが希望するシュッとしたフォルムを両立させるのは、とても難しかったと思います。\u003C/p>\u003Cp>\u003Cstrong>小泉\u003C/strong>\u003Cbr>昇降デスクが新オフィスに設置された時は壮観でした。\u003Cbr>天板に施されたグレーの目はじき塗装は、見た目だけでなく手触りも抜群で、想像以上に素敵な仕上がりになりました。\u003Cbr>\u003Cstrong>電動式の昇降機能をしっかり備えているのはもちろん、電源コードを脚の中に隠せる設計もポイント\u003C/strong>です。\u003C/p>\u003Cp>\u003Cstrong>栗山\u003C/strong>\u003Cbr>昇降デスクが納品されたところで、movingチームとしての活動もひと区切りになりましたね。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/fa7932629fcd4b1f85091265a35cb14a/office-5.jpg\" alt=\"昇降デスク\" width=\"3000\" height=\"2000\">\u003C/figure>\u003Ch2 id=\"hfdc29adb70\">働くだけじゃない、交流と繋がりの場\u003C/h2>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/a257bb49cf3c4b4580054beb7e15c74d/office-1.jpg\" alt=\"\" width=\"3000\" height=\"2001\">\u003C/figure>\u003Cp>\u003Cbr>\u003Cstrong>栗山\u003C/strong>\u003Cbr>今後も、オフィスで気になるところは、\u003Cstrong>みんなで意見を出し合いながらアップデート\u003C/strong>していきたいと思います。\u003Cbr>これまではオフィスの内装や家具は無難なものに決めがちでしたが、根岸と小泉のおかげで居心地のいいユニークな空間にすることができました。\u003C/p>\u003Cp>\u003Cstrong>小泉\u003C/strong>\u003Cbr>社内から上がってくる意見を踏まえ、成果を上げれば高く評価もしてもらえる。この\u003Cstrong>会社の良さを改めて感じたプロジェクト\u003C/strong>でした。\u003Cbr>今は、\u003Cstrong>オフィスに出社する社員が増えている\u003C/strong>ほか、いろんなイベントが開催されていることも嬉しいです。\u003C/p>\u003Cp>\u003Cstrong>根岸\u003C/strong>\u003Cbr>新たに入社する人がいると歓迎会を開催するようになりました。2階の部屋ではゲームを、キッチン周りでは飲食や会話を楽しむ社員の姿も見かけます。\u003Cbr>\u003Cstrong>コミュニケーションをとる場が充実しているからこその変化\u003C/strong>だと思います。\u003C/p>\u003Cp>\u003Cstrong>仁科\u003C/strong>\u003Cbr>新オフィスには社員の仕事以外の一面が見えたり、体を動かせる場があったりして、出社するのが楽しくなりました。\u003Cbr>せっかく石井さんをはじめ\u003Cstrong>大勢の方とS2のみんなで創り上げてきた場所\u003C/strong>です。これからも汚したり傷をつけたりしないよう、大切にしていきたいと思います。\u003C/p>\u003Cp>\u003Cstrong>山田\u003C/strong>\u003Cbr>仕事以外の楽しみをオフィス内につくる。これに関与できたのは思いのほか楽しかったです。\u003Cbr>\u003Cstrong>みんなにとってもオフィスは働くだけの場ではありません。\u003C/strong>社員のS2に対する愛着は格段に高まっていると思います。\u003C/p>\u003Cp>\u003Cstrong>栗山\u003C/strong>\u003Cbr>みんなに満足してもらえたことも嬉しいのですが、今回のプロジェクトに関わってくれた社外の方々が素晴らしかったのが特に印象的でした。\u003Cstrong>人の輪が繋がり、S2の「らしさ」を体現するオフィスが形になったことが、何より良かった\u003C/strong>と思います。\u003C/p>",[],{"id":96,"createdAt":177,"updatedAt":178,"publishedAt":179,"revisedAt":178,"title":180,"tag":181,"recommended_articles":186,"eyecatch":187,"heading_list":14,"content2":191,"related_articles":192,"recruit":14,"is_html":14,"is_migration":14},"2025-04-13T16:52:56.932Z","2025-04-18T05:27:52.091Z","2025-04-18T04:48:06.935Z","3DフィギュアでトイレのサインをDIYした話",[182,184,185],{"id":183},"character",{"id":21},{"id":11},[],{"url":188,"height":189,"width":190},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/bda65e5231a8401aa5734251ef0fa395/S2character-6.jpg",1455,2001,"\u003Cp>少し前のことになりますが、\u003Cstrong>弊社オフィスのトイレサインをオリジナルで制作・設置\u003C/strong>しました。\u003Cbr>使用したのは、\u003Ca href=\"https://www.s2factory.co.jp/blog/s2-character/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>弊社マスコットキャラクター「Sくん」と「2さん」\u003C/strong>\u003C/a>\u003Cstrong>の3Dフィギュア\u003C/strong>。\u003Cbr>\u003Cbr>このサインは既製品ではなく、社内でのちょっとした発案から始まり、スタッフの手によって DIY で仕上げられたものです。\u003Cbr>日頃から社内でも親しまれているキャラクターを活かし、オフィス内のサインにも\u003Cstrong>“らしさ”\u003C/strong>を取り入れた事例として、ここでご紹介します。\u003C/p>\u003Ch2 id=\"h6987f006c6\">トイレサインを S2 らしいものにしたい\u003C/h2>\u003Cp>1 階の 2 つのトイレは、もともと男女別に分かれてはいましたが、視覚的に明示されたサインはありませんでした。\u003Cbr>来訪者にもわかりやすく、かつ自分たちらしいサインを取り付けられないか——そんな声がきっかけで、この取り組みが始まりました。\u003C/p>\u003Cp>そこで目をつけたのが、過去に制作していた \u003Cstrong>S くんと 2 さんの3Dフィギュア\u003C/strong>です。\u003Cbr>このフィギュアは、マスコットキャラクターを用いたグッズ制作の一環として作られたもので、その制作経緯については\u003Ca href=\"https://www.s2factory.co.jp/blog/s2character-print/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">こちらのブログ記事\u003C/a>でもご紹介しています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/s2character-print/\" data-iframely-url=\"//cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fs2character-print%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"//cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Ch3 id=\"h4e84fdd5ec\">フィギュアの加工とサインの設置\u003C/h3>\u003Cp>今回の制作は、弊社デザイナーの \u003Ca href=\"https://x.com/yamadas2fa\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">yamada\u003C/a>\u003Cstrong> \u003C/strong>を中心に、\u003Ca href=\"https://x.com/s2_negi\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">negi\u003C/a>\u003Cstrong> \u003C/strong>とともに進められました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/interview-5/\" data-iframely-url=\"//cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Finterview-5%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"//cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/interview-4/\" data-iframely-url=\"//cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Finterview-4%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"//cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Cp>\u003Cbr>まず、S くんと 2 さんのフィギュアに取り付けられていた台座を取り外すところから。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/fc4b9a37462a458d9f1c9f6e4a8c9456/S2character-1.jpg?w=510&h=450\" alt=\"台座から取り外したフィギュア\" width=\"510\" height=\"450\">\u003C/figure>\u003Cp>\u003Cbr>そのままでは足元に塗装の剥がれた白地が見えてしまうため、\u003Cstrong>元の色味に合わせてアクリル絵の具で再塗装\u003C/strong>が行われました。\u003Cbr>塗料の選定や仕上げの質感にもこだわりながら、見た目にも自然に馴染むように細かな調整が加えられています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/9ab67032a9ac4c06893a1531c73ca994/S2character-2.jpg?w=625&h=450\" alt=\"塗装後\" width=\"625\" height=\"450\">\u003C/figure>\u003Cp>\u003Cbr>続いて、フィギュアの背中に\u003Cstrong>ドリルで小さな穴を開け、ネオジム磁石を埋め込む加工\u003C/strong>を実施。\u003Cbr>磁石のサイズや深さを調整し、しっかりと安定して壁に取り付けられるよう、試行錯誤を重ねながら仕上げていきました。\u003Cbr>当初は固定方法についても検討がありましたが、着脱のしやすさを考慮して磁石方式が採用されています。\u003Cbr>\u003Cbr>設置場所のトイレのひとつには、すでにアールのついたアクリル板状の装飾があったため、それに合わせて\u003Cstrong>東急ハンズで金属板をカット加工\u003C/strong>し、フィットするサイズで調整。\u003Cbr>最後に強力な粘着テープで金属板を取り付け、そこに加工済みのSくんと2さんのフィギュアを装着して、サインが完成しました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/18e1681ab7d24eaaac9b8a7633ed8417/S2character-4.jpg?w=650&h=974\" alt=\"男子トイレのサイン\" width=\"650\" height=\"974\">\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/41d00f254f474942b435b420ee2dc057/S2character-3.jpg?w=650&h=974\" alt=\"女子トイレのサイン\" width=\"650\" height=\"974\">\u003C/figure>\u003Ch2 id=\"hcbec2bf0d9\">終わりに\u003C/h2>\u003Cp>この取り組みは、社内にある素材やアイデアを活かして、空間にわかりやすさと少しの\u003Cstrong>“S2らしさ”\u003C/strong>を加えた、キャラクター活用の一例です。\u003Cbr>S くん、2 さん、そして最近加わった F ちゃんをはじめ、これまでにも\u003Cstrong>社内外向けに日常で使えるグッズ\u003C/strong>をたくさん制作してきました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/goods/\" data-iframely-url=\"//cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fgoods%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"//cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Cp>\u003Cbr>ただ、それだけでなく、\u003Cstrong>「やってみたい」と思ったことを、自分たちの手で実際に形にできる環境\u003C/strong>があることも、弊社の大きな特徴です。\u003C/p>\u003Cp>必要なものを、自分たちで工夫してつくる。働きやすくするために、少しずつ整えていく。\u003Cbr>そうした動きが、社内のあちこちで自然と根づいています。\u003C/p>\u003Cp>小さな工夫やものづくりの積み重ねが、S2ファクトリーらしい空気をつくっているのかもしれません。\u003Cbr>普段の仕事でも、そんな「らしさ」を大切にしながら、かたちにしていくことを続けています。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cspan style=\"color: #bababa\">下の特設サイトにオフィスに関する記事がまとめてありますので、良かったらそちらも合わせてご覧になってみてください。\u003C/span>\u003C/p>\u003Cp>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/moving2023/\" data-iframely-url=\"//cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fmoving2023%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"//cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>",[],{"id":94,"createdAt":194,"updatedAt":195,"publishedAt":196,"revisedAt":195,"title":197,"tag":198,"recommended_articles":204,"eyecatch":205,"heading_list":26,"content2":209,"related_articles":210,"recruit":14,"is_html":14,"is_migration":14},"2024-12-04T06:19:37.810Z","2025-03-12T02:45:26.137Z","2025-03-11T08:29:32.360Z","座席の利用状況を可視化するシステムを作った話",[199,200,201,202],{"id":168},{"id":21},{"id":42},{"id":203},"iot",[],{"url":206,"height":207,"width":208},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/a654f9d5a3eb41cfaae1464bfb4a8517/raspberry%20pi%20pico%20w.jpg",2976,4925,"\u003Cp>弊社では、\u003Cstrong>よく出社する一部の社員を除き、座席を固定していません\u003C/strong>。\u003Cbr>2023年6月のオフィス移転時に、「\u003Cstrong>フリーアドレスな座席の利用状況を見て、使用頻度の低い座席を把握したい\u003C/strong>」という要望が寄せられました。\u003C/p>\u003Cp>そこで、\u003Cstrong>座席にセンサーを設置\u003C/strong>し、利用状況を集計。最終的に、\u003Cstrong>どの座席がどれくらい使われているかを視覚化する画面を作成\u003C/strong>しました。\u003Cbr>\u003Cbr>現在、このシステムでは\u003Cstrong>以下の 2 つをヒートマップで表示\u003C/strong>しています。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>座席ごとの利用状況\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>全座席の利用頻度\u003C/strong>\u003C/li>\u003C/ul>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1f60e01ce9334bd58ebc5962df1a1623/front1.jpg?w=450&h=745\" alt=\"ヒートマップ\" width=\"450\" height=\"745\">\u003C/figure>\u003Cp>\u003Cbr>ただし、検証段階のため、センサーが設置されているのは 3 席のみです。\u003Cbr>\u003Cbr>ヒートマップでは、\u003Cstrong>未計測の日付はグレー\u003C/strong>、\u003Cstrong>使用頻度が高まるにつれて色が濃く\u003C/strong>なります。\u003Cbr>例えば、C-7 は最もよく使われており、C-5 と C-6 も最近頻繁に利用されるようになってきました。\u003Cbr>\u003Cbr>もっとセンサーが増えてデータが充実すれば、「\u003Cstrong>季節や気温による座席使用状況の違い\u003C/strong>」が見えるようになるかもしれません。そうすると、寒すぎる席や暑すぎる席への対策も可能になります。\u003C/p>\u003Cp>以下は全デバイスのところを拡大した画像です。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/67e7ee22c56e454587ca2eef1f306614/front2.jpg\" alt=\"\" width=\"1664\" height=\"772\">\u003C/figure>\u003Ch2 id=\"h265bff37a3\">AWSを活用した構成\u003C/h2>\u003Cp>このシステムは、AWS上で構築されています。全体の構成は以下の通りです。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/5dd1f5bf5f8543d9982f0a2e6ef1d3e3/aws.jpg?w=650&h=446\" alt=\"AWS上での構成\" width=\"650\" height=\"446\">\u003C/figure>\u003Col>\u003Cli>\u003Cstrong>データ収集\u003C/strong>\u003Cbr>センサーからの計測データを \u003Ca href=\"https://aws.amazon.com/jp/iot-core/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">AWS IoT Core\u003C/a> で受信し、加工した後に \u003Ca href=\"https://aws.amazon.com/jp/dynamodb/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">DynamoDB\u003C/a> へ保存します。\u003C/li>\u003Cli>\u003Cstrong>データの集計\u003C/strong>\u003Cbr>DynamoDB に保存されたデータは、1日1度、\u003Ca href=\"https://aws.amazon.com/jp/lambda/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Lambda\u003C/a> 関数によって集計されます。その結果は JSON 形式のファイルとして \u003Ca href=\"https://aws.amazon.com/jp/s3/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">S3\u003C/a> に保存され、フロントエンドで利用されます。\u003C/li>\u003Cli>\u003Cstrong>フロントエンド\u003C/strong>\u003Cbr>ヒートマップを表示する画面は、S3 に保存された JSON データを利用しています。\u003C/li>\u003C/ol>\u003Cp>このようなセンサーからのデータを集計して視覚化する場合、様々な実現方法がありますが、今回は社内での検証ということもあり\u003Cstrong>「コストをかけず、できるだけ安く！」という方針\u003C/strong>で構成を決定しました。\u003C/p>\u003Cp>\u003Cstrong>データの集計処理は以下の2種類を実行\u003C/strong>しています。\u003C/p>\u003Col>\u003Cli>\u003Cstrong>1 日単位でファイルを作成し、その日のデバイスごとの集計値を保存する\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>デバイス単位でファイルを作成し、1 ヶ月分の集計値を保存する\u003C/strong>\u003C/li>\u003C/ol>\u003Cp>これらを一つの Lambda 関数でまとめる方法もありましたが、\u003Cstrong>柔軟性を考慮し、それぞれの集計処理を別の Lambda 関数に担当\u003C/strong>させました。これにより、将来的にどちらか一方が不要になったり修正が必要になった場合でも、簡単に対処できる構成になっています。\u003C/p>\u003Cp>1 の集計処理が終了したら 2 の集計処理を開始するよう、\u003Ca href=\"https://aws.amazon.com/jp/step-functions/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Step Functions\u003C/strong>\u003C/a>\u003Cstrong> でステートマシンを設定\u003C/strong>しています。\u003Cbr>また、これらの処理が毎日決まった時間に実行されるよう、\u003Ca href=\"https://aws.amazon.com/jp/eventbridge/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>EventBridge\u003C/strong>\u003C/a>\u003Cstrong> にルールを作成\u003C/strong>しました。\u003Cbr>\u003Cbr>このルールにより、毎日指定した時間に Step Functions が起動し、設定された Lambda 関数が処理を実行。最終的に S3 へ集計ファイルが保存される仕組みになっています。\u003C/p>\u003Cp>AWS のリソース設定は、\u003Ca href=\"https://aws.amazon.com/jp/console/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">AWS Management Console\u003C/a> で手動設定することも可能ですが、今回は \u003Ca href=\"https://aws.amazon.com/jp/cdk/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>AWS CDK\u003C/strong>\u003C/a>\u003Cstrong> を使用\u003C/strong>しました。これにより、\u003Cstrong>設定内容をコードで管理でき、サービス構築から時間が経っても容易に内容を振り返ることが可能\u003C/strong>です。CDK を使ったおかげで、こうしてブログを書く際にも思い出しやすくなっています。\u003C/p>\u003Ch2 id=\"he9c5c84dc2\">センサー部分\u003C/h2>\u003Cp>最終的に全座席へのセンサー設置を目指し、コストを抑えつつ、AWS IoT Core を試す目的で連携部分を自作できる「\u003Cstrong>赤外線センサー」と「\u003C/strong>\u003Ca href=\"https://www.raspberrypi.com/products/raspberry-pi-pico/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Raspberry Pi Pico W\u003C/strong>\u003C/a>\u003Cstrong>」を採用\u003C/strong>。\u003C/p>\u003Cp>以前にも、Raspberry Pi を利用した DIY センシング行ったことがあったので慣れているつもりでしたが、Pico W は従来の Raspberry Pi とは仕様が異なり、購入後に事前調査の不足を痛感しました。それでも、\u003Ca href=\"https://micropython.org/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">MicroPython\u003C/a> を使用すれば問題を解決できると判断し、以下の処理を実装。\u003C/p>\u003Col>\u003Cli>\u003Cstrong>WiFi に接続\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>センサーの値を ADC（アナログ-デジタル変換）で読み取り\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>一定の閾値を超える変化があれば、\u003C/strong>\u003Ca href=\"https://aws.amazon.com/jp/what-is/mqtt/#:~:text=MQTT%20%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%81%AF%E3%80%81%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%8B%E3%82%89,%E8%80%85%E3%81%A8%E3%81%97%E3%81%A6%E6%A9%9F%E8%83%BD%E3%81%97%E3%81%BE%E3%81%99%E3%80%82\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>MQTTClient\u003C/strong>\u003C/a>\u003Cstrong> を利用して IoT Core にデータを送信\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>1 秒スリープ後、再び計測\u003C/strong>\u003C/li>\u003C/ol>\u003Cp>IoT Core へデータ送信するには、\u003Cstrong>デバイスに証明書をインストールする\u003C/strong>必要があります。この手順は AWS 公式チュートリアルに従い、ポリシー設定や証明書の作成を進めました。\u003Cbr>この証明書をRaspberry Pi Pico に書き込み、ファイルに普通にアクセスできる形で保存してあります。\u003Cbr>\u003Cbr>例えば、\u003Ccode>/certs/private.der\u003C/code>として参照し、接続時にオプションで指定することで、IoT Core にスムーズにメッセージを送信できるようにしました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/a654f9d5a3eb41cfaae1464bfb4a8517/raspberry%20pi%20pico%20w.jpg?w=650&h=392\" alt=\"raspberry pi pico w\" width=\"650\" height=\"392\">\u003Cfigcaption>各テーブルの裏側に設置してあります。\u003C/figcaption>\u003C/figure>\u003Ch2 id=\"h83ee18d802\">IoT Core設定\u003C/h2>\u003Cp>\u003Cstrong>IoT Core の「メッセージのルーティング」機能を利用\u003C/strong>し、\u003Cstrong>センサーから取得した値を DynamoDB に保存する仕組みを構築\u003C/strong>しました。これを実現するために、まずどのような形式でデータを保持するのが良いかを検討し、DynamoDBのスキーマを以下のように決めました。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>パーティションキー\u003C/strong>: センサーを特定する情報(部屋/デバイス番号)\u003C/li>\u003Cli>\u003Cstrong>ソートキー\u003C/strong>: タイムスタンプ\u003C/li>\u003C/ul>\u003Cp>今回は、集計処理が「センサーごと」で、単位は「1日分」です。そのため、集計処理では「センサー」をキーに検索し、タイムスタンプで絞り込む形が適していると判断しました。\u003C/p>\u003Cp>IoT Coreのルーティングルールでは、以下の項目を設定しました。\u003C/p>\u003Col>\u003Cli>\u003Cstrong>どの DynamoDB テーブルに保存するか\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>パーティションキーにどのデータを入れるか\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>ソートキーにどのデータを入れるか\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>センサーから取得したデータを入れる列名\u003C/strong>\u003C/li>\u003C/ol>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/cfd726c7d649464aad6259b6d6c68111/rules.jpg?w=650&h=409\" alt=\"構造\" width=\"650\" height=\"409\">\u003C/figure>\u003Cp>\u003Cbr>これらの設定に基づき、ルールクエリでフィルタリングされたセンサーのデータが、\u003Cstrong>DynamoDB の value カラムに自動的に保存\u003C/strong>されるようになりました。\u003C/p>\u003Ch2 id=\"h282144c8ac\">集計\u003C/h2>\u003Cp>センサーのデータは、DynamoDB に保存された後、\u003Cstrong>毎日決まった時間に集計処理\u003C/strong>が行われます。\u003Cbr>この処理は \u003Cstrong>Step Functions \u003C/strong>を利用して 2 つの Lambda 関数で実行され、結果は S3 に保存されます。\u003C/p>\u003Col>\u003Cli>\u003Cstrong>1 日単位の集計\u003C/strong>\u003Cul>\u003Cli>その日のデバイスごとの利用状況を集計し、\u003Cstrong>日付をファイル名\u003C/strong>として保存。\u003C/li>\u003Cli>保存されるデータ形式は、\u003Ccode>{device_id: string, time: long}\u003C/code>\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>デバイス単位の集計\u003C/strong>\u003Cul>\u003Cli>1ヶ月分のデバイスごとの利用状況を集計し、\u003Cstrong>デバイス名をファイル名\u003C/strong>として保存。フロントエンドのヒートマップでは、このデータを基に利用状況を可視化しています。\u003C/li>\u003Cli>保存されるデータ形式は、\u003Ccode>{date: string, time: long}\u003C/code>\u003C/li>\u003C/ul>\u003C/li>\u003C/ol>\u003Cp>1 つ目の Lambda で保存される日単位のデータは、現時点では使用されていませんが、他の表示形式で活用できる可能性があります。\u003Cbr>今後も利用の見込みがない場合は、この処理を変更または停止する予定です。\u003C/p>\u003Cp>Lambda関数を分割しているため、不要な処理の停止や変更が柔軟に対応できる構成になっています。\u003C/p>\u003Ch2 id=\"h5dc0967264\">フロントエンド\u003C/h2>\u003Cp>\u003Cstrong>フロントエンドは React で作成し、S3 でホスティング\u003C/strong>しています(構成図には含まれていません)。\u003Cbr>S3 に保存された集計ファイルを取得し、計測開始から現在までのデータを表示する仕組みになっています。\u003C/p>\u003Cp>ヒートマップ表示には、\u003Ccode>react-calendar-heatmap\u003C/code> を採用しました。\u003Cbr>開発当時「使ってみた」系の記事をよく見かけたというのが採用理由の一つですが、普段バックエンドばかりでフロントエンドは滅多に触る機会がない私でも容易に導入できました。\u003C/p>\u003Cp>現在、計測期間が長くなってきたため、ヒートマップで表示する期間を指定する機能を追加する必要が出てきています。\u003C/p>\u003Ch2 id=\"hcbec2bf0d9\">終わりに\u003C/h2>\u003Cp>普段から AWS を活用してシステムを構築していますが、まだ触れていないサービスも多くあります。\u003Cbr>今回は、社内で生まれた課題に対して \u003Cstrong>IoT Core \u003C/strong>を起点に \u003Cstrong>EventBridge \u003C/strong>や \u003Cstrong>Step Functions \u003C/strong>を組み合わせたシステムを構築することで、\u003Cstrong>課題解決とともに新たな知見を得ることができました\u003C/strong>。\u003C/p>\u003Cp>特に、デバイスから取得したセンシングデータを弊社の主戦場である AWS に統合するノウハウを得たことで、\u003Cstrong>IoT 関連のシステム開発においても守備範囲を広げられた\u003C/strong>と感じています。\u003C/p>\u003Cp>もし、以下のようなお悩みがあれば、ぜひご相談ください。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>こんなデータを取得して可視化できないか？\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>センサーデータを活用しきれずに困っている\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>そもそも何ができるの？\u003C/strong>\u003C/li>\u003C/ul>\u003Cp>具体的な実現イメージがある場合はもちろん、初期段階のご相談からでもお力になります。\u003C/p>\u003Cp>私たちは、お客様の課題を解決し、\u003Cstrong>新たな可能性を見つけるお手伝い\u003C/strong>をさせていただきます。\u003Cbr>お気軽にお問い合わせください。\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/\" data-iframely-url=\"//cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fcontact&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"//cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>",[],{"id":212,"createdAt":213,"updatedAt":214,"publishedAt":215,"revisedAt":214,"title":216,"tag":217,"recommended_articles":224,"eyecatch":225,"heading_list":14,"content2":228,"related_articles":229,"recruit":14,"is_html":14,"is_migration":14},"moving2023-interview-2","2024-08-22T05:11:03.457Z","2025-06-12T08:13:14.410Z","2024-10-30T07:41:37.000Z","新オフィスを創る：MHAKインタビュー",[218,219,220,221,223],{"id":168},{"id":21},{"id":164},{"id":222},"art",{"id":109},[],{"url":226,"height":227,"width":129},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/d6363a5808034eda8986f8faaf6b779f/mhak2.png",1701,"\u003Cp>神泉オフィスの来客用のエントランスは特徴的な壁面のある空間になっていて、そこには訪れた人を中に誘導するかのように、曲線的で流れるような柄が描かれている。アート作品をオフィスに取り入れるというS2 Factoryとしては新しい試みがどのように創られたのか、アーティストMHAKとのインタビューを通じてその背景を探る。\u003Cbr>\u003Cbr>Interview: MASATOSHI PONY KOIZUMI (S2 Factory)\u003Cbr>Photography: GAI NISHIDA (S2 Factory)\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/6e96fb1e0d9d4ba0af6792d9d0ad31f5/image-1.png\" alt=\"MHAK\" width=\"1500\" height=\"1000\">\u003C/figure>\u003Cp>\u003Cstrong>MHAK as MASAHIRO AKUTAGAWA\u003C/strong>\u003C/p>\u003Cp>1981年 福島県生まれ。 デザイナーズファニチャーや内装、様々な空間に影響を受け、絵画をインテリアの一部と捉えた「生活空間との共存」をテーマに創作活動を行う。抽象表現を追求し曲線で構築し反復する独自のパターンで、個人邸やホテルなど数々の内装壁画を手掛ける。これまでに国内はもちろん、アメリカ（ニューヨーク、ロサンゼルス、ポートランド）、アルゼンチン（ブエノスアイレス）、オーストラリア（メルボルン、シドニー）、イタリア（ミラノ）等で作品を発表。また、故郷である會津とのアートを通じた積極的な取り組みや、アーティスト集団“\u003Ca href=\"https://aoca.co.jp/sanno/about/81bastards/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">81BASTARDS\u003C/a>”の一員としても活動している。\u003C/p>\u003Ch2 id=\"h7429d01d8a\">依頼までの経緯について\u003C/h2>\u003Cp>―― 新オフィスが決まった時、この壁面で「何か」を作れたら面白いだろうと考えていて、真っ先に思い浮かんだのがMHAKでした。まず直接連絡して相談させてもらったわけですが、普段はどういった形で依頼を受けることが多いですか？\u003C/p>\u003Cp>\u003Cstrong>MHAK\u003C/strong>\u003Cbr>基本的には直接の依頼が多いですね。\u003Cbr>\u003Cbr>所属しているギャラリーからの紹介もありますが、やはり何かしらの繋がりがある方が仕事もスムーズに進みますし、内容にもよりますが、全く関係性がない場合だと『自分である必要があるのか』と考えてしまうこともあります。\u003Cbr>\u003Cbr>ありがたいことに最近は色々なところから連絡をいただくことが増えてきましたが、人との繋がりを大事にしてきたという判断基準は今も昔も変わらないですね。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/bf5e8538c6e744ddb8e4a4591546b75f/image-2.png\" alt=\"MHAK\" width=\"1500\" height=\"1000\">\u003C/figure>\u003Cp>\u003Cbr>―― 確かに仕事にしろ遊びにしろずっと現場や人との繋がりを大事にしてますね。\u003C/p>\u003Cp>\u003Cstrong>MHAK\u003C/strong>\u003Cbr>そうですね。我々の世界って\u003Cstrong>“ノリ”が大事\u003C/strong>じゃないですか。\u003C/p>\u003Cp>\u003Cstrong>遊び回る中で人に出会って、そこから『何か一緒にやろう』という話になり仕事に発展することも多い\u003C/strong>ですし、その方が自分としても楽しめます。\u003C/p>\u003Cp>毎日のようにどこかしらに顔を出すので周りからはタフだと言われることもありますが、今後も変わらないでやっていきたいですね。じっとしている方が辛いですから。\u003C/p>\u003Cp>―― 実際この件がきっかけで、\u003Ca href=\"https://store.omusu-bee.jp/lp/mhak/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">MHAKがOMUSUbeeとコラボした商品\u003C/a>を販売する際に撮影場所として使わせてもらえないかと相談がきたわけだけど、今まで自分たちの事務所をそういった形で利用することはなかったし、繋がりのある人たちと何かできるのは面白かったです。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/9206dfa011d741a69c82e4ccb42be55a/mhak7.png\" alt=\"コラボ商品\" width=\"2151\" height=\"2151\">\u003Cfigcaption>会津木綿を使ったルームシューズ\u003C/figcaption>\u003C/figure>\u003Ch2 id=\"h240f270606\">空間および制作について\u003C/h2>\u003Cp>―― 企画を進めるにあたり、事務所まで来てもらって話をさせてもらいましたが、物件の最初の印象はどうでしたか？\u003C/p>\u003Cp>\u003Cstrong>MHAK\u003C/strong>\u003Cbr>非常に面白い物件だと感じました。\u003Cstrong>普段は壁面でも平面に描くことが多く、こういった曲面に描く機会は少ない\u003C/strong>のですが、それだけに楽しみでもありました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/a4fd2ee6ea3f4b4b8395af005269348d/mhak3.png\" alt=\"画材\" width=\"3024\" height=\"3024\">\u003Cfigcaption>ミューラル・アーティストの為に開発したペンキ「STOKE / ストーク」\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>―― 元々空間と調和させることが得意なことは知っていたので、今回は事前に大まかなイメージを共有するくらいで細かいデザイン・レイアウトなどは現場で決めていきましたがどうでしたか？\u003C/p>\u003Cp>\u003Cstrong>MHAK\u003C/strong>\u003Cbr>そうですね、差し色を入れて欲しいということ以外は任せてもらいましたが、\u003Cstrong>信頼して任せてもらえるのはありがたい\u003C/strong>ですね。\u003C/p>\u003Cp>\u003Cstrong>内装を見た時にいいものが描けるだろうと確信があった\u003C/strong>ので、下書きも作らずに現場で直接描いていきました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/126094b06ec24bb6af8c588918819ac0/mhak4.png\" alt=\"ライティング\" width=\"3024\" height=\"3024\">\u003Cfigcaption>下書きはなく全てフリーハンドで描く\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>―― エントランスから壁面を巻くように柄を描いてますが、このあたりは当初予定せずに現場で相談しながら決めましたよね。\u003Cstrong>一緒に決めていくライブ感が楽しかった\u003C/strong>です。\u003Cstrong>何もない状態から二日間で仕上げてしまった\u003C/strong>のはすごかったです。\u003C/p>\u003Cp>\u003Cstrong>MHAK\u003C/strong>\u003Cbr>描いてる最中に少しトラブルがあったり、足場の問題でレイアウトを変更しましたが、この規模だと大体それくらいの期間で描いてしまいますね。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/f757c468fbc04c37930668b41c865451/mhak5.png\" alt=\"画材\" width=\"3024\" height=\"3024\">\u003Cfigcaption>MHAKらしい綺麗に管理された仕事道具\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>―― 内装や家具は\u003Ca href=\"https://www.s2factory.co.jp/blog/moving2023-interview-1/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>インテリアデザイナーの石井さん\u003C/strong>\u003C/a>にお願いしていましたが、今回みたいに壁だけお願いする場合、デザイナーとの連携が難しいケースもあると思いますがどうですか？\u003C/p>\u003Cp>\u003Cstrong>MHAK\u003C/strong>\u003Cbr>今回のように建築家さんと自分が直接やりとりせずに依頼主を挟むような場合は割と多いですね。\u003Cbr>\u003Cstrong>相手の世界観などを汲み取りつつ、納得してもらえるものを描くのは大変\u003C/strong>ですが、\u003Cstrong>そこは自分の得意とするところでもある\u003C/strong>ので今回も石井さんに気に入ってもらえてれば嬉しいですね。\u003C/p>\u003Cp>―― 実際、石井さんも気に入ってくれたので流石だなって思いましたね。\u003C/p>\u003Cp>\u003Cstrong>MHAK\u003C/strong>\u003Cbr>腹を割って話さないとわからないところもあるけど、そう言ってもらえると嬉しいです。\u003C/p>\u003Cp>―― 自分たちも普段は制作する側なので、その汲み取る力はすごく参考になりました。今回はデザイナー選定やMHAKへの依頼など、状況に応じてフリースタイルで決まっていった部分が多かったですが、結果面白いものができて楽しかったです。\u003C/p>\u003Ch2 id=\"h39803575bd\">感想および今後の活動予定について\u003C/h2>\u003Cp> ―― 今回の制作を終えてどうでしたか？\u003C/p>\u003Cp>\u003Cstrong>MHAK\u003C/strong>\u003Cbr>\u003Cstrong>予想取り自分のアーカイブとしてもいいものができた\u003C/strong>と思ってます。\u003C/p>\u003Cp> ―― \u003Ca href=\"https://hiddenchampion.jp/library/mhak/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>HIDDEN CHAMPIONでMAHK特集\u003C/strong>\u003C/a>の時に、うちのオフィス写真を使ってもらって反響があったので嬉しかったですね。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/baf4986d51ad498d827138d1a754f5f2/mhak6.png\" alt=\"HIDDEN CHAMPIONでのMAHK特集\" width=\"3024\" height=\"1701\">\u003C/figure>\u003Cp>\u003Cbr>―― 今後の予定を教えてください。\u003C/p>\u003Cp>\u003Cstrong>MHAK\u003C/strong>\u003Cbr>個人で言うと、2 年前の2022年に\u003Ca href=\"https://art.parco.jp/museumtokyo/detail/?id=920\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">渋谷のPARCO MUSEUMで個展\u003C/a>をしたのですが、あれは今までの作品を見てもらうアーカイブ展だったので、来年は\u003Ca href=\"https://www.gallery-target.com/2015/09/08/mhak-solo-exhibition-10-ten-by-mhak/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>10年ぶり\u003C/strong>\u003C/a>\u003Cstrong>くらいに個展を開催する予定\u003C/strong>です。\u003Cbr>今回は新しい自分を見てもらわないといけないので、その準備に日々追われています。\u003C/p>\u003Cp>―― そうすると今は制作に没頭してる感じですか？\u003C/p>\u003Cp>\u003Cstrong>MHAK\u003C/strong>\u003Cbr>今は準備段階で新しいものを作り始める前の段階ですね。まだ明確なアイデアがあるわけではないです。\u003C/p>\u003Cp>―― まだ新しいアイデアが決まっていない中で、個展の日程だけ決まっているのはプレッシャーになりませんか？\u003C/p>\u003Cp>\u003Cstrong>MHAK\u003C/strong>\u003Cbr>プレッシャーですが、逆にこうやって色々なところで話をすることで自分を追い込んでますね。今は日々インプットのため遊びに出て色々なものを吸収してます、そのうちこれだっていうものが降りてくるはずなので、それを待ってます。\u003C/p>\u003Cp>―― ありがとうございます！来年の個展を楽しみにしています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/c00e495eaccb472788b0d33feefb60e9/image.png\" alt=\"インタビュー写真\" width=\"2912\" height=\"1942\">\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/9d15afac735a4135bd0512862d436eda/wall-1.jpg\" alt=\"壁面\" width=\"2001\" height=\"3000\">\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/fc72036469654239b0ad45059b439de0/wall-3.jpg\" alt=\"壁面\" width=\"2001\" height=\"3000\">\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/565ca73a8e874310877a0099bfe28ecc/wall-4.jpg\" alt=\"壁面\" width=\"2000\" height=\"3000\">\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/e715f5dbff594e6abd1096c11e421caa/wall-5.jpg\" alt=\"2Fからの壁面\" width=\"3000\" height=\"2001\">\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/5dd65ccabc6e43f89de915d87873e504/wall-6.jpg\" alt=\"2Fからの壁面\" width=\"2001\" height=\"3000\">\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/3fc236bd9219457b9df2232abf757f7d/wall-7.jpg\" alt=\"2F壁面\" width=\"3000\" height=\"2001\">\u003C/figure>\u003Cp>\u003Cbr>\u003Cbr>オフィス移転に関する情報をまとめた\u003Ca href=\"https://www.s2factory.co.jp/moving2023/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>特設サイトはこちら\u003C/strong>\u003C/a>\u003C/p>",[],{"id":231,"createdAt":232,"updatedAt":233,"publishedAt":234,"revisedAt":233,"title":235,"tag":236,"recommended_articles":241,"eyecatch":242,"heading_list":14,"content2":244,"related_articles":245,"recruit":14,"is_html":14,"is_migration":14},"moving2023-interview-1","2024-06-18T09:48:58.412Z","2025-06-12T07:42:12.146Z","2024-07-19T07:42:12.000Z","新オフィスを創る：石井一東インタビュー",[237,238,239,240],{"id":168},{"id":21},{"id":164},{"id":112},[],{"url":243,"height":172,"width":173},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/876e6870f78d468396faa8febfdda2cb/%E5%BA%A7%E8%AB%87%E4%BC%9A2-top.png","\u003Ch2 id=\"hd34b97349f\">この場所、この企業でしかできない空間を\u003C/h2>\u003Cp>S2 らしさを具現化するデザイナーの存在を抜きに、今回のオフィス移転プロジェクトは語れません。\u003Cbr>ここでは、新オフィス全体のデザインを担った\u003Ca href=\"http://ambos.pw/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>株式会社 ambos\u003C/strong>\u003C/a>\u003Cstrong> の石井 一東（いしい かずはる）さん\u003C/strong>に、本プロジェクトへの想いや取り組みについて伺いました。\u003C/p>\u003Cp>＜プロフィール＞\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/75f4b6aea7b84845af2139ef55de7559/profile.jpg?w=450&h=337\" alt=\"プロフィール写真\" width=\"450\" height=\"337\">\u003C/figure>\u003Cp>\u003Cstrong>●石井一東\u003C/strong>\u003C/p>\u003Cp>1987年生まれ。名古屋大学工学部を卒業後、建築設計事務所勤務を経て、名城大学理工学研究科建築学専攻修士課程を修了。2015年よりコクヨ株式会社勤務。2020年 ambos 設立。2022年 株式会社 ambos 設立。\u003Cbr>\u003C/p>\u003Ch2 id=\"h3f4f9b4497\">設計のコンセプトは「テーラードファクトリー」\u003C/h2>\u003Cp>―― リニューアル前の物件を内見した際の印象はいかがでしたか？\u003C/p>\u003Cp>\u003Cstrong>石井\u003C/strong>\u003Cbr>\u003Cstrong>開口部が広いことや日当たりが良いこと\u003C/strong>に加え、\u003Cstrong>室内の動線が緩やかな曲線\u003C/strong>となること、ほかにも\u003Cstrong>ブロックガラスや障子といったグリッドが至るところにあしらわれていることが印象的\u003C/strong>でした。\u003Cbr>このビルを手掛けた建築家によってしつらえられたギャラリーのような空間でしたので、この雰囲気を活かしながら最小限の手数を加えるだけで、いいオフィスになるだろうと思いました。\u003Cbr>\u003Cbr>\u003Cbr>\u003C/p>\u003Cp>―― デザインのコンセプトについて教えてください。\u003C/p>\u003Cp>\u003Cstrong>石井\u003C/strong>\u003Cbr>私が大切にしているのは\u003Cstrong>「その企業にしか作れない空間にする」\u003C/strong>ことです。\u003Cbr>今回は、S2ファクトリーが掲げるミッション「らしさを仕立てる」から「企業や人の課題に対し、最適なアプローチを導き出すデジタル領域における経験豊富なスペシャリスト集団」＝「テーラード（仕立屋）」と連想していき、\u003Cstrong>コンセプトは「テーラードファクトリー」に\u003C/strong>。\u003Cbr>仕立てられた心地のいいファクトリーをイメージし、新たに内装を作り込むのではなく、\u003Cstrong>エリアごとの良さを引き立たせるという方向性\u003C/strong>でデザインを進めました。\u003Cbr>\u003Cbr>\u003Cbr>\u003C/p>\u003Cp>―― それぞれのエリアの特徴についてお話しいただけますか。\u003C/p>\u003Cp>\u003Cstrong>石井\u003C/strong>\u003Cbr>玄関からのアプローチとなる曲面壁には、\u003Cstrong>アーティスト \u003C/strong>\u003Ca href=\"http://mhak.jp/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>MAHK\u003C/strong>\u003C/a>\u003Cstrong> さんによるウォールアート\u003C/strong>が描かれたことで、自然と視線や身体が内部へと誘われます。\u003Cbr>続く来客エリアは、黒を基調とし彩度を抑えた空間です。その中心には緩やかなカーブを描いた脚と薄い天板を組み合わせたテーブルを設置。来訪者とゆっくり対話のできる場となっています。\u003Cbr>ここには、社員の皆さんが自己紹介代わりとなる一冊を、\u003Cstrong>書店 \u003C/strong>\u003Ca href=\"https://www.liebbooks.com/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>LIEB BOOKS\u003C/strong>\u003C/a>\u003Cstrong> さん\u003C/strong>に選んでもらい、作り付けの書棚に並べています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/da0738babea845fd8d53fa8575f9d896/office-1.jpg\" alt=\"本棚\" width=\"2000\" height=\"3000\">\u003C/figure>\u003Cp>\u003Cbr>執務エリアには、緑豊かな庭を望めるようデスクを窓側に寄せる一方で、背後が気にならないよう吸音パネル素材のシステムパーティションをリズム良く配置しました。作業スペースと動線を分けたことで、ブース席のように落ち着いて仕事ができます。ちなみに、このパーティションは\u003Ca href=\"https://www.cut-japan.com/zigzag.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">過去に私がデザインした製品\u003C/a>です。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/3cbe072076f64fcfa76b0be592867344/office-4.jpg\" alt=\"執務室\" width=\"3000\" height=\"2001\">\u003C/figure>\u003Cp>\u003Cbr>\u003Cbr>―― S2 ファクトリーからは「部屋ごとに雰囲気を変えたい」という思いを共有しました。\u003C/p>\u003Cp>\u003Cstrong>石井\u003C/strong>\u003Cbr>はい。乱雑な印象にならないよう、\u003Cstrong>色調や素材のトーンを少しずつ変えていくことで独立性と連続性のバランスに配慮\u003C/strong>しています。\u003Cbr>また、\u003Cstrong>各部屋にアイコンとなるような造作家具\u003C/strong>を置くことで特徴づけをはかっています。もともと床に据え付けられていた空調にはオリジナルのカバーをかけ、一見すると家具が置かれているに見えるようにしました。カバーをかけるだけなら原状回復にも影響しませんので。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/5e5959c8741b4b599c927a111d90fa87/office-5.jpg\" alt=\"造作家具\" width=\"3000\" height=\"2000\">\u003C/figure>\u003Cp>\u003Cbr>\u003Cbr>――　　2 階には休憩スペースとなる和室も設けたそうですね。\u003C/p>\u003Cp>\u003Cstrong>石井\u003C/strong>\u003Cbr>はい。床を上げ、あえて黒色の畳を用いることで、他のエリアと同じモノトーンを基調にしました。伝統的な和室にするのではなく、オフィス全体から見ても違和感のない親和性のある空間にしたいと思いました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1eb4acfcbdce4346b656e809ca97955d/office-4.jpg\" alt=\"2Fのリラックスルーム\" width=\"3000\" height=\"2001\">\u003C/figure>\u003Ch2 id=\"h7901bdc763\">デザイナーとしての腕が試される、やりがいのあるプロジェクト。\u003C/h2>\u003Cp>―― 元来この建物は住居だったようですが、仕事を進める上で支障はありませんでしたか？\u003C/p>\u003Cp>\u003Cstrong>石井\u003C/strong>\u003Cbr>もともと使われていた天井ボードの素材がオフィス用ではなかったので、音の反響が少し気になりました。そのあたりは、張りぐるみの家具や植栽などを配置することで軽減しています。\u003Cbr>あとは電気関係の配線です。一般的なオフィスビルのようには床が上がっておらず、カーペットをはがすとコンクリートスラブという状態。床下に配線スペースを取ることができず、昇降デスクを制作・設置する際は配線ルートに苦戦しました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/ba0527bae5fc4b8b8617e158720cae55/interview.png\" alt=\"インタビューの様子\" width=\"1200\" height=\"800\">\u003C/figure>\u003Cp>\u003Cbr>\u003C/p>\u003Cp>――　　\u003Cstrong>昇降デスク\u003C/strong>といえば本プロジェクトの目玉アイテムでしたね。\u003C/p>\u003Cp>\u003Cstrong>石井\u003C/strong>\u003Cbr>S2ファクトリーの皆さんからいただいたのは\u003Cstrong>「昇降デスクには見えないが、昇降デスクとしてしっかり機能するデザイン」\u003C/strong>というやや難しいオーダーでした（笑）。\u003Cbr>デスクの脚に配線を通せばすっきりした見た目にはなりますが、配線が上下できるスペースがないと昇降動作に影響します。その最適なバランスを見つけるために、実際に家具を制作する\u003Ca href=\"https://dalamokko.net/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>株式会社 DaLa 木工\u003C/strong>\u003C/a>\u003Cstrong>さん\u003C/strong>とともに CG とリアル、両方でのテストを何百回と繰り返しました。\u003Cstrong>デスクの昇降に関わらず配線が外から見えない形\u003C/strong>にたどり着けたのは、この粘りの賜物です。\u003Cbr>皆さんにもご満足いただけたようで正直ホッとしました。私としても、今回のプロジェクトの中でいちばん印象的な仕事のひとつです。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/467eecd4b1a8434c8e1a3b23a6ea09a2/office-6.jpg\" alt=\"\" width=\"3000\" height=\"2001\">\u003C/figure>\u003Cp>\u003Cbr>\u003Cbr>――　　プロジェクト全体を振り返ってみて、石井さんの感想を聞かせてください。\u003C/p>\u003Cp>\u003Cstrong>石井\u003C/strong>\u003Cbr>S2 ファクトリーさんからの要望のひとつに\u003Cstrong>「デザインをしている会社であることがわかるデザインにしたい」\u003C/strong>とありました。実際に私がやり取りをさせてもらった社員の皆さんはデザインへの理解度が高く、家具やインテリアへの造詣も深い。デザイナーとしての腕を試される緊張感のある仕事でした。\u003Cbr>\u003Cstrong>建物が持っている魅力を損なうことなく、社員さんはもちろん、外部から訪れた方にも「S2 ファクトリーらしさ」を感じてもらえる空間にできた\u003C/strong>と自負しています。\u003C/p>",[],{"contents":247,"totalCount":278,"offset":279,"limit":280},[248,258,268],{"id":249,"eyecatch":250,"publishedAt":254,"createdAt":255,"title":256,"is_html":14,"content2":257},"technical-writing",{"url":251,"height":252,"width":253},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/b24fb52fae254f2ea1239a69799e1ba1/TW.jpg",2384,4240,"2026-07-23T11:09:26.357Z","2026-07-22T04:53:11.568Z","テクニカルライティングとは？3 級試験の概要と文章作成の基本","\u003Cp>ジムに通い始めてから明らかに免疫力が低下しました。\u003C/p>\u003Cp>この記事は、社内イベント「\u003Ca href=\"https://www.s2factory.co.jp/blog/tea/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cu>お茶会\u003C/u>\u003C/a>」での発表内容をもとにまとめたものです。\u003Cbr>今回は、弊社の saiko が\u003Cstrong>「3級 テクニカルライティング試験」の勉強を通して学んだ、テクニカルライティングの基本\u003C/strong>について発表しました。\u003C/p>\u003Chr>\u003Cp style=\"text-align: start\">\u003Cbr>普段の業務では、Slack やメールでのやりとりや資料作成など、文章で何かを伝える機会が多くあります。内容を正確に伝えながら、読み手にとって理解しやすい文章を書くにはどうすればよいのか。あらためて学んでみたいと思い、\u003Cstrong>3 級 テクニカルライティング試験を受験\u003C/strong>することにしました。\u003C/p>\u003Cp>試験勉強を通して学んだ内容を振り返り、普段の文章作成に取り入れたい考え方を自分なりに整理してみました。\u003C/p>\u003Cp>\u003Cspan style=\"color: #7e7e7e\">※試験・受験対策セミナーに関する情報は、2026 年 7 月時点のものです。\u003C/span>\u003C/p>\u003Ch2 id=\"h8dce327997\">テクニカルライティングとは\u003C/h2>\u003Cp>テクニカルライティングは、\u003Cstrong>物事の説明や伝達を目的とした実用文を書くための技術\u003C/strong>です。\u003C/p>\u003Cp>実用文には説明する\u003Cstrong>対象と読み手\u003C/strong>が存在します。内容を簡潔かつ明快に示し、誤解なく理解してもらうことが重要です。情報を伝えるだけでなく、読み手に行動を促したり、文書そのものを成果物として仕上げたりする場合にも用いられます。\u003C/p>\u003Cp>その歴史は古く、\u003Cstrong>工業製品や科学技術の開発が複雑化した1950年代以降に広がり、製品の普及や法令・規格の整備、文書作成のデジタル化とともに発展\u003C/strong>してきました。\u003C/p>\u003Ch3 id=\"h81f4e2cd9a\">テクニカルライティングが有効な文書\u003C/h3>\u003Cp>テクニカルライティングは、次のような文書に適しています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/2e1dee6d909c4eaabb97364f70780da0/technical-writing-document-types-v3.png\" alt=\"案内・お知らせ、提案資料、記録・報告、ガイド、仕様書・ドキュメント、レポート、教材・解説資料\" width=\"1600\" height=\"700\">\u003C/figure>\u003Cp>\u003Cbr>一方、法令に沿った用語や表現が求められる法務文書や、印象に残る表現を重視する広告コピーには、そのまま適用しにくい場合があります。\u003C/p>\u003Ch2 id=\"h75504c6a7c\">TC 技術検定と 3 級 テクニカルライティング試験\u003C/h2>\u003Cp>こうしたテクニカルライティングの\u003Cstrong>基礎的な知識や文章表現の能力を問う試験の一つが、「3級 テクニカルライティング試験［TW］」\u003C/strong>です。\u003C/p>\u003Cp>\u003Ca href=\"https://jtca.org/\" target=\"_blank\" rel=\"noopener noreferrer\">一般財団法人テクニカルコミュニケーター協会\u003C/a>が実施する「テクニカルコミュニケーション技術検定試験（以下、TC技術検定）」の一つで、マニュアルなどの使用情報を作成する人に限らず、\u003Cstrong>実用文に役立つ日本語の文章表現技術を身につけたい人を対象\u003C/strong>としています。受験資格に制限はありません。\u003C/p>\u003Cp>試験範囲には、\u003Cstrong>文法や用字・用語、表記、読みやすく誤解されにくい文章表現のほか、表現設計、構造化、制作ツール、コンプライアンス\u003C/strong>なども含まれます。\u003C/p>\u003Cp>近年は、冬の 2 月頃と夏の 7 月頃に\u003Cstrong>年 2 回\u003C/strong>実施されています。主な試験内容は次のとおりです。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>選択式問題\u003C/strong>：50 分\u003C/li>\u003Cli>\u003Cstrong>記述式問題\u003C/strong>：50 分\u003C/li>\u003Cli>\u003Cstrong>受験料\u003C/strong>：TC 協会会員・学生は 11,000 円、非会員は 16,720 円\u003C/li>\u003Cli>\u003Cstrong>主な試験会場\u003C/strong>：東京、大阪、名古屋、福岡、広島、石川\u003C/li>\u003C/ul>\u003Cp>開催回によって変更される可能性があるため、詳しくは\u003Ca href=\"https://jtca.org/\" target=\"_blank\" rel=\"noopener noreferrer\">公式サイト\u003C/a>をご確認ください。\u003C/p>\u003Cp>試験後は合否通知が郵送され、合格者には合格証書が送付されます。合否通知には 100 点満点に換算した得点が記載されます。\u003Cbr>特定の業務に就くための必須資格ではありませんが、\u003Cstrong>実用文を書くための基礎を体系的に学び、その到達度を確認する目安\u003C/strong>になります。\u003C/p>\u003Ch3 id=\"h72252483b2\">TC 技術検定の等級\u003C/h3>\u003Cp>TC 技術検定には、\u003Cstrong>現在 3 級と 2 級があり\u003C/strong>、2 級は目的に応じて 2 種類に分かれています。1 級については、現時点で詳細を検討中のようです。\u003C/p>\u003Ctable>\u003Ctbody>\u003Ctr>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>等級\u003C/p>\u003C/th>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>試験\u003C/p>\u003C/th>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>主に扱う内容\u003C/p>\u003C/th>\u003C/tr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>3級\u003C/p>\u003C/td>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>テクニカルライティング試験［TW］\u003C/p>\u003C/td>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>実用文を書くための日本語表現とテクニカルライティングの基礎\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>2級\u003C/p>\u003C/td>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>使用情報制作ディレクション試験［DR］\u003C/p>\u003C/td>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>使用情報の企画、設計、制作管理\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>2級\u003C/p>\u003C/td>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>使用情報制作実務試験［MP］\u003C/p>\u003C/td>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>取扱説明書などの執筆、作図、制作実務\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>1級\u003C/p>\u003C/td>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>詳細検討中\u003C/p>\u003C/td>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>現時点では試験内容を検討中\u003C/p>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003Cp>2 級を受験するには、3 級に合格していなければいけません。\u003Cbr>3 級が文章作成の基礎を広く扱うのに対し、2 級は使用情報の制作に関する、より専門的な知識と能力を対象としています。\u003C/p>\u003Ch3 id=\"h66c36423ed\">参考書と受験対策セミナー\u003C/h3>\u003Cp>公式の参考書として案内されているのが『\u003Ca href=\"https://amzn.asia/d/0bC20uae\" target=\"_blank\" rel=\"noopener noreferrer\">日本語スタイルガイド（第3版）\u003C/a>』です。試験範囲となる知識を体系的に学べます。\u003C/p>\u003Cp>また、\u003Cstrong>希望者向けにオンラインでの受験対策セミナーも開催\u003C/strong>されています。開催概要は次のとおりです。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>受講時間\u003C/strong>：1 回 3 時間\u003C/li>\u003Cli>\u003Cstrong>受講料\u003C/strong>：TC 協会会員・学生は 4,400 円、非会員は 8,800 円\u003C/li>\u003C/ul>\u003Cp>セミナーでは、試験範囲や参考書の学習ポイント、例題を使った解答の考え方などが解説されます。\u003C/p>\u003Cp>ここからは、試験勉強を通して学んだ内容を、文章作成の流れに沿って自分なりに整理してみました。\u003C/p>\u003Ch2 id=\"h198dc7ef0c\">読み手に伝わる文章を書く4つのステップ\u003C/h2>\u003Cp>テクニカルライティングでは、文章表現だけでなく、その前提となる\u003Cstrong>人の認知と行動の特性\u003C/strong>も考慮します。\u003C/p>\u003Cp>目や耳から受け取った情報は一時的に保持され、これまでの知識や経験と照らし合わせながら処理されます。その結果、意思決定や行動につながり、必要な情報が記憶に残ります。\u003C/p>\u003Cp>また、人の行動は、目標を定め、実行し、その結果を評価する流れで進みます。文章でも、\u003Cstrong>読み手が目的を理解し、示された手順を実行したうえで、その結果を確認できるように組み立てる\u003C/strong>ことが大切です。\u003C/p>\u003Cp>こうした特徴を踏まえ、文章を作成する流れを4つのステップに分けて見ていきます。\u003C/p>\u003Ch3 id=\"hd38374898a\">1. 何のために、誰に伝えるのかを決める\u003C/h3>\u003Cp>最初に決めるのは、\u003Cstrong>何のために、誰に伝えるのか\u003C/strong>という点です。目的と読み手が変われば、\u003Cstrong>取り上げる情報や示す順序、適した表現\u003C/strong>も異なります。\u003C/p>\u003Cp>複数の目的がある場合は、中心となるものと、それに付随するものを分けます。たとえば、新しいツールの利用方法を案内する場合は、操作を迷わず進めてもらうことを主な目的とし、背景説明は必要な範囲に絞るという考え方です。\u003C/p>\u003Cp>読み手については、年齢や職業などの属性だけでなく、次の点も想定します。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>どの程度の知識を持っているか\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>何に関心を持っているか\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>どのような目的で文章を読むのか\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>読んだあと、どのような状態になってほしいか\u003C/strong>\u003C/li>\u003C/ul>\u003Cp>相手を具体的に思い浮かべることで、どこから説明すべきか、専門用語をどこまで使えるかを判断しやすくなります。\u003C/p>\u003Ch3 id=\"h40044cb1a7\">2. 必要な情報を選び、伝える順序を整える\u003C/h3>\u003Cp>書き始める前に、説明する対象について情報を集めます。どのようなものなのか、既存のものと何が違うのか、読み手にとってどのような意味があるのかを確認します。\u003C/p>\u003Cp>集めた情報をすべて文章に盛り込むわけではありません。\u003Cstrong>目的に応じたものを選び、時系列や重要度、関連性などを手がかりに分類\u003C/strong>します。この段階では文章の形を意識しすぎず、メモなど自分が扱いやすい方法でまとめても構いません。\u003C/p>\u003Cp>読み手が内容を理解しやすくなるように、次のような点も意識します。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>情報を意味のまとまりごとに分ける\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>全体から部分へ、概要から詳細へと進める\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>既に知っていることから説明を始める\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>必要に応じて具体例やたとえを用いる\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>作業の説明は実際の手順に沿って並べる\u003C/strong>\u003C/li>\u003C/ul>\u003Cp>一度に多くのことを伝えようとせず、\u003Cstrong>必要な情報を選んで順番に示す\u003C/strong>ことが大切です。\u003C/p>\u003Ch3 id=\"h11d461cc37\">3. 内容と見た目を設計する\u003C/h3>\u003Cp>伝える情報と順序が決まったら、\u003Cstrong>文章や図表、写真などをどのように配置するか\u003C/strong>を考えます。\u003C/p>\u003Cp>どれだけ大切なことを書いても、必要な情報を見つけにくければ十分に読んでもらえません。\u003Cstrong>目次や見出しを設け、書式に統一感を持たせる\u003C/strong>ことで、全体の構成や情報の位置を把握しやすくします。\u003C/p>\u003Cp>構造化では、見出しや本文などの\u003Cstrong>内容に関する情報\u003C/strong>と、書体や文字サイズなどの\u003Cstrong>見た目に関する情報\u003C/strong>を分けます。Web ページで考えると、内容や役割を記述する HTML と、デザインを指定する CSS の関係がわかりやすい例です。\u003C/p>\u003Cp>両者を分けることで、文章の役割や階層が明確になり、読み手が必要な場所へたどり着きやすくなるほか、作り手にとっても修正や再利用がしやすくなります。\u003C/p>\u003Ch3 id=\"hc6ad3cc717\">4. 読み返して修正する\u003C/h3>\u003Cp>書き終えたら、\u003Cstrong>推敲・リライト・全体確認\u003C/strong>の順に仕上げます。\u003C/p>\u003Cp>推敲では原稿を読み返し、単語や語句の使い方、文や段落のつながり、内容の正しさや一貫性を確認します。書き上げてから少し時間を置いたり、紙に印刷して読んだりすると、\u003Cstrong>執筆中には見落としていた違和感\u003C/strong>に気づきやすくなります。\u003C/p>\u003Cp>修正が必要な箇所は、情報の追加や削除、文章の書き換えを行います。変更した部分だけでなく、最後に全体を通して読み、前後のつながりに問題がないか確かめることも重要です。\u003C/p>\u003Ch2 id=\"hc09b760b56\">生成 AI 時代のテクニカルライティング\u003C/h2>\u003Cp>最近では、\u003Cstrong>生成 AI によって、文章の下書きや要約、書き換え\u003C/strong>などを行う場面が増えており、\u003Cstrong>技術文書の制作でも、表記の統一や構造化、コードサンプルの生成といった作業\u003C/strong>に使われ始めています。\u003C/p>\u003Cp>一方で、生成された内容が正確とは限らず、事実と異なる情報が含まれることも。\u003Cbr>AI を利用する際は、\u003Cstrong>出力の正確性だけでなく、入力する情報にプライバシーや知的財産上の問題がないかにも注意が不可欠\u003C/strong>です。\u003Cbr>\u003Cbr>テクニカルライティングの考え方は、\u003Cstrong>プロンプト\u003C/strong>を作る際にも役立ちます。\u003Cstrong>目的や前提、求める内容を整理して伝える\u003C/strong>ことで、意図に近い出力を得やすくなり、修正のためのやり取りやクレジットの消費を抑えることにもつながります。\u003C/p>\u003Cp>AI が文章作成の一部を担うようになっても、目的と読み手の設定、情報の整理、見せ方、推敲という考え方は変わりません。\u003Cbr>\u003Cstrong>AI へ適切な指示を出し、生成された文章を評価するうえでも、テクニカルライティングの知識は重要\u003C/strong>です。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/28a3ed54c9cf41129b34646b6d5a0c89/ai-document-workflow.png\" alt=\"\" width=\"1600\" height=\"600\">\u003C/figure>\u003Ch2 id=\"ha214098e44\">まとめ\u003C/h2>\u003Cp>受験勉強を進めるなかで、目的や読み手を決め、情報を整理して文章を組み立てる考え方は、普段の業務にも取り入れやすいと感じました。一方、言語表現や表記には細かな決まりがあり、\u003Cstrong>覚える項目の多さには苦労\u003C/strong>しています。\u003C/p>\u003Cp>試験では、『日本語スタイルガイド（第3版）』で扱われている表記や文章表現のルールを踏まえて解答しなければいけませんが、実際の文章では、すべてのルールをそのまま当てはめればよいとは限りません。Slack やメールでは、送信前に一度読み返す、一文に多くの内容を詰め込みすぎないなど、\u003Cstrong>目的や読み手に合った考え方を選んで取り入れることが大切\u003C/strong>です。\u003C/p>\u003Cp>今回学んだ内容を振り返りながら、日々の業務でも、読み手にとって理解しやすい文章を書くことを意識していきたいと思います。\u003Cbr>\u003Cbr>\u003Cbr>参考文献：一般財団法人テクニカルコミュニケーター協会編著『日本語スタイルガイド（第3版）』\u003C/p>",{"id":259,"eyecatch":260,"publishedAt":264,"createdAt":265,"title":266,"is_html":14,"content2":267},"shader-basics",{"url":261,"height":262,"width":263},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/3651571c58a740eaaa57321b312e1503/%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC.png",895,1444,"2026-07-07T10:13:33.054Z","2026-06-16T01:35:56.924Z","WebGLシェーダーの基本とテクスチャー表現","\u003Cp>月末にセールをするのはやめてほしいです。\u003C/p>\u003Cp>この記事は、社内イベント「\u003Ca href=\"https://www.s2factory.co.jp/blog/tea/\" target=\"_blank\" rel=\"noopener noreferrer\">お茶会\u003C/a>」での発表内容をもとにまとめたものです。\u003Cbr>今回は、弊社の morisaki が\u003Cstrong>「シェーダー」\u003C/strong>について発表しました。\u003C/p>\u003Chr>\u003Cp>\u003Cbr>フロントエンドの実装で使われる \u003Ca href=\"https://developer.mozilla.org/ja/docs/Web/API/WebGL_API\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>WebGL\u003C/strong>\u003C/a> や \u003Ca href=\"https://threejs.org/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Three.js\u003C/strong>\u003C/a> を例に、シェーダーがどのように\u003Cstrong>画面上の表現\u003C/strong>を作っているのか、基本的な仕組みから実演を交えて紹介したいと思います。\u003C/p>\u003Ch2 id=\"h4db06e3d9d\">シェーダーとは\u003C/h2>\u003Cp>シェーダーは、\u003Ca href=\"https://ja.wikipedia.org/wiki/GPU\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>GPU\u003C/strong>\u003C/a>\u003Cstrong> 上で動作する描画用のプログラム\u003C/strong>です。\u003C/p>\u003Cp>フロントエンドの実装で使う場合は、WebGL 上で動かすことが多く、\u003Ca href=\"https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>GLSL(OpenGL Shading Language)\u003C/strong>\u003C/a>\u003Cstrong>という言語で記述\u003C/strong>します。ほかにも、DirectX で使われる \u003Ca href=\"https://learn.microsoft.com/ja-jp/windows/win32/direct3dhlsl/dx-graphics-hlsl\" target=\"_blank\" rel=\"noopener noreferrer\">HLSL\u003C/a> や、\u003Ca href=\"https://developer.mozilla.org/ja/docs/Web/API/WebGPU_API\" target=\"_blank\" rel=\"noopener noreferrer\">WebGPU\u003C/a> で採用されている \u003Ca href=\"https://www.w3.org/TR/WGSL/\" target=\"_blank\" rel=\"noopener noreferrer\">WGSL\u003C/a> など、用途に応じたシェーディング言語があります。\u003C/p>\u003Cp>通常、コンピューターの処理は CPU が担当します。\u003Cbr>\u003Cstrong>CPU はひとつひとつの計算は得意\u003C/strong>ですが、大量の処理を同時に行うことにはあまり向いていません。\u003C/p>\u003Cp>一方で \u003Cstrong>GPU\u003C/strong> は、\u003Cstrong>たくさんの計算を並列で処理\u003C/strong>することに向いており、何千、何万というパーティクルを動かしたり、画面全体に複雑な表現を加えたりするような場合に力を発揮します。\u003C/p>\u003Cp>WebGLで使うシェーダーは、主に 2 種類です。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>Vertex Shader\u003C/strong>：ジオメトリの各頂点の位置を計算する。\u003C/li>\u003Cli>\u003Cstrong>Fragment Shader\u003C/strong>：各フラグメントの色を計算する。\u003C/li>\u003C/ul>\u003Cp>処理は、\u003Cstrong>Vertex Shader → Fragment Shader\u003C/strong> の順に実行されます。\u003Cbr>Vertex Shader\u003Cstrong> \u003C/strong>で計算した値を Fragment Shader へ渡すことはできますが、\u003Cstrong>逆方向には渡せません\u003C/strong>。\u003C/p>\u003Cp>シェーダーを使うことで、Three.js の組み込みマテリアルだけでは難しい質感や動き、細かなエフェクトも制御しやすくなります。\u003Cstrong>もともとは 3D オブジェクトの影や陰影を計算するためのもの\u003C/strong>でしたが、現在では Web 上のさまざまな表現に使われています。\u003C/p>\u003Ch3 id=\"hdc136c4370\">シェーダーで扱う値と関数\u003C/h3>\u003Cp>シェーダーでは、頂点の位置や色、時間、テクスチャーなどの値を受け取り、計算した結果を描画に反映していきます。\u003C/p>\u003Ch4 id=\"h16bf73988b\">\u003Cstrong>変数の種類(修飾子)\u003C/strong>\u003C/h4>\u003Cp>値の渡し方は、修飾子で指定します。代表的なものが、\u003Ccode>attribute\u003C/code>、\u003Ccode>uniform\u003C/code>、\u003Ccode>varying\u003C/code> です。\u003C/p>\u003Cul>\u003Cli>\u003Ccode>attribute\u003C/code>：頂点ごとに異なる値を渡すための変数。頂点の位置、法線、色、UV座標などに使われる。\u003C/li>\u003Cli>\u003Ccode>uniform\u003C/code>：オブジェクト全体で共通する値を渡すための変数。光の向き、カメラの視点、時間、変換行列などを扱う。\u003C/li>\u003Cli>\u003Ccode>varying\u003C/code>：Vertex Shader\u003Cstrong> \u003C/strong>で計算した値を、Fragment Shader へ渡すための変数。\u003C/li>\u003C/ul>\u003Ch4 id=\"h5af0eb155b\">\u003Cbr>\u003Cstrong>型\u003C/strong>\u003C/h4>\u003Cp>扱う値には型があります。数値、ベクトル、行列、テクスチャーなど、用途に応じて使いわけます。\u003C/p>\u003Cul>\u003Cli>\u003Ccode>float\u003C/code>：小数。\u003C/li>\u003Cli>\u003Ccode>int\u003C/code>：整数。\u003C/li>\u003Cli>\u003Ccode>bool\u003C/code>：真偽値。\u003C/li>\u003Cli>\u003Ccode>vec2\u003C/code>\u003Cstrong> / \u003C/strong>\u003Ccode>vec3\u003C/code>\u003Cstrong> / \u003C/strong>\u003Ccode>vec4\u003C/code>：2〜4次元のベクトル。\u003C/li>\u003Cli>\u003Ccode>mat2\u003C/code>\u003Cstrong> / \u003C/strong>\u003Ccode>mat3\u003C/code>\u003Cstrong> / \u003C/strong>\u003Ccode>mat4\u003C/code>：2〜4次の正方行列。\u003C/li>\u003Cli>\u003Ccode>sampler2D\u003C/code>：テクスチャー。\u003C/li>\u003Cli>\u003Ccode>void\u003C/code>：何も返さないことを示す型。\u003C/li>\u003C/ul>\u003Ch4 id=\"hd2f7ea18d2\">\u003Cbr>\u003Cstrong>組み込み変数\u003C/strong>\u003C/h4>\u003Cp>用途が決まっている組み込み変数もあります。\u003C/p>\u003Cul>\u003Cli>\u003Ccode>gl_Position\u003C/code>：Vertex Shader で使用。頂点の最終的な位置を指定する。\u003C/li>\u003Cli>\u003Ccode>gl_FragCoord\u003C/code>：Fragment Shader で使用。現在処理しているフラグメントの画面上の座標を取得する。\u003C/li>\u003Cli>\u003Ccode>gl_FragColor\u003C/code>：Fragment Shader で使用。出力する色を指定する。\u003C/li>\u003C/ul>\u003Ch4 id=\"hd56e4caf46\">\u003Cbr>\u003Cstrong>関数\u003C/strong>\u003C/h4>\u003Cp>GLSL でも、他のプログラミング言語と同じように関数を作成できます。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">float hoge() {\n  float a = 1.0;\n  float b = 2.0;\n  \n  return a + b;\n}\n\nfloat hogehoge(float a, float b) {\n  return a + b;\n}\u003C/code>\u003C/pre>\u003Cp>シェーダー内には \u003Ccode>main\u003C/code> \u003Cstrong>関数が必須\u003C/strong>で、この関数が自動的に呼び出されます。\u003Cbr>Vertex Shader では \u003Ccode>gl_Position\u003C/code> に頂点の位置を入れることで、描画に使う最終的な座標を決めます。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">attribute vec3 position;\n\nvoid main() {\n  gl_Position = vec4(position, 1.0);\n}\u003C/code>\u003C/pre>\u003Cp>また、\u003Ccode>sin\u003C/code>、\u003Ccode>cos\u003C/code>、\u003Ccode>max\u003C/code>、\u003Ccode>min\u003C/code>、\u003Ccode>pow\u003C/code>、\u003Ccode>exp\u003C/code>、\u003Ccode>mod\u003C/code>、\u003Ccode>clamp\u003C/code>、\u003Ccode>cross\u003C/code>、\u003Ccode>dot\u003C/code>、\u003Ccode>mix\u003C/code>、\u003Ccode>step\u003C/code>、\u003Ccode>smoothstep\u003C/code>、\u003Ccode>length\u003C/code>、\u003Ccode>distance\u003C/code>、\u003Ccode>reflect\u003C/code>、\u003Ccode>refract\u003C/code>、\u003Ccode>normalize\u003C/code> などの組み込み関数も用意されています。\u003C/p>\u003Ch2 id=\"h01aea3682e\">Vertex Shader の基本\u003C/h2>\u003Cp>Vertex Shader の役割は、\u003Cstrong>3D 空間にあるジオメトリの各頂点を、2D のキャンバス座標に変換すること\u003C/strong>です。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">uniform mat4 modelMatrix;\nuniform mat4 viewMatrix;\nuniform mat4 projectionMatrix;\n\nattribute vec3 position;\n\nvoid main() {\n  gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);\n}\u003C/code>\u003C/pre>\u003Cp>ここで使われている \u003Ccode>position\u003C/code> は、\u003Cstrong>ジオメトリが持つ頂点のローカル座標\u003C/strong>です。\u003Cbr>\u003Ccode>vec3\u003C/code> なので、値は \u003Ccode>x\u003C/code>、\u003Ccode>y\u003C/code>、\u003Ccode>z\u003C/code> の3つ。最終的に \u003Ccode>gl_Position\u003C/code> に入れるため、\u003Ccode>vec4(position, 1.0)\u003C/code> として4次元の値に変換します。\u003C/p>\u003Ch3 id=\"hcb28cbeadd\">座標変換の流れ\u003C/h3>\u003Cp>頂点の座標は、\u003Cstrong>行列を掛けることで段階的に変換\u003C/strong>されます。\u003C/p>\u003Cul>\u003Cli>\u003Ccode>modelMatrix\u003C/code>：ローカル座標を、ワールド座標に変換する。\u003C/li>\u003Cli>\u003Ccode>viewMatrix\u003C/code>：ワールド座標を、カメラから見たビュー座標に変換する。\u003C/li>\u003Cli>\u003Ccode>projectionMatrix\u003C/code>：ビュー座標を、画面に描画できるクリップ座標に変換する。\u003C/li>\u003C/ul>\u003Cp>つまり、\u003Cstrong>オブジェクト自身の中での位置を、3D空間全体の中での位置へ変換し、さらにカメラから見た位置へ移す。最後に、画面上に表示できる形へ投影\u003C/strong>していく流れです。\u003C/p>\u003Ch3 id=\"hf5da7b09f6\">3 つの空間\u003C/h3>\u003Cp>座標変換では、いくつかの空間を通ります。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>ワールド空間\u003C/strong>\u003Cbr>3D シーン全体の中で、オブジェクトがどこにあるかを表す空間。\u003C/li>\u003Cli>\u003Cstrong>ビュー空間\u003C/strong>\u003Cbr>カメラから見たときに、物体がどの方向にあり、どれくらい離れているかを扱う空間。\u003C/li>\u003Cli>\u003Cstrong>クリップ空間\u003C/strong>\u003Cbr>画面に映る範囲かどうかを判断するための空間。範囲外にあるものはクリッピングされ、描画対象から外れる。\u003C/li>\u003C/ul>\u003Cp>ビュー空間からクリップ空間への変換では、カメラから見た視錐台の空間を、GPU が扱いやすい立方体の空間へ変換します。文章だけだとイメージしづらい部分なので、図で整理すると次のようになります。\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/57a7a6e3905c463d8fdcd216fdd11da6/%E3%83%93%E3%83%A5%E3%83%BC%E7%A9%BA%E9%96%93%E3%81%8B%E3%82%89%E3%82%AF%E3%83%AA%E3%83%83%E3%83%97%E7%A9%BA%E9%96%93%E3%81%B8%E3%81%AE%E5%A4%89%E6%8F%9B%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8.png?w=585&h=780\" alt=\"ビュー空間からクリップ空間への変換イメージ\" width=\"585\" height=\"780\">\u003C/figure>\u003Cp>行列の中身まで細かく追うと難しくなりますが、まずは\u003Cstrong>「3D 空間の頂点を、画面に映すために段階的に変換している」\u003C/strong>と捉えておくとわかりやすいです。\u003C/p>\u003Ch3 id=\"h6c59ac702c\">行列をわける理由\u003C/h3>\u003Cp>\u003Ccode>modelMatrix\u003C/code>、\u003Ccode>viewMatrix\u003C/code>、\u003Ccode>projectionMatrix\u003C/code> がわかれているのは、\u003Cstrong>途中で制御を入れられるようにするため\u003C/strong>です。\u003Cbr>たとえば、\u003Ccode>modelMatrix\u003C/code> を掛けたあとの座標を \u003Ccode>modelPosition\u003C/code> として保持しておけば、その時点で頂点の位置を動かせます。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">uniform mat4 modelMatrix;\nuniform mat4 viewMatrix;\nuniform mat4 projectionMatrix;\n\nattribute vec3 position;\n\nvoid main() {\n  vec4 modelPosition = vec4(position, 1.0) * modelMatrix;\n  // 各頂点座標の移動などの操作はここで行う\n  modelPosition.x += 1.0; // オブジェクトを右に移動（各頂点の X 座標を 1.0 右に移動）\n  vec4 viewPosition = modelPosition * viewMatrix;\n  vec4 projectionPosition = viewPosition * projectionMatrix;\n  gl_Position = projectionPosition;\n}\n\u003C/code>\u003C/pre>\u003Cp>途中の座標を操作することで、オブジェクト全体を動かしたり、頂点ごとに位置を変えたりできます。\u003Cbr>次はこの考え方を使って、平面の頂点を動かしていきます。\u003C/p>\u003Ch2 id=\"h27b89f2a89\">Fragment Shader の基本\u003C/h2>\u003Cp>Vertex Shader が頂点の位置を計算するのに対して、\u003Cstrong>Fragment Shader は画面に描画される色を計算\u003C/strong>します。\u003C/p>\u003Cp>具体的には、\u003Cstrong>色、明るさ、透明度などをフラグメントごとに決定\u003C/strong>するものです。テクスチャーを貼り付けたり、光の反射を計算したり、画面全体にエフェクトをかけたりする処理にも使われます。\u003C/p>\u003Cp>基本形は以下です。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">precision mediump float;\n\nvoid main() {\n  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 不透明な赤\n}\u003C/code>\u003C/pre>\u003Ch3 id=\"h7ee14fb0cf\">precision mediump float;\u003C/h3>\u003Cp>\u003Ccode>float\u003C/code> 型の\u003Cstrong>計算精度を指定するための記述\u003C/strong>です。\u003C/p>\u003Cp>精度には、主に次の 3 種類があります。\u003C/p>\u003Cul>\u003Cli>\u003Ccode>highp\u003C/code>：最高精度。複雑な計算には向いているが、モバイル端末ではパフォーマンスに影響する場合も。\u003C/li>\u003Cli>\u003Ccode>mediump\u003C/code>：中精度。速度と画質のバランスがよく、通常はこれを使う。\u003C/li>\u003Cli>\u003Ccode>lowp\u003C/code>：低精度。一部のモバイル端末では高速に動作する場合があるが、見た目に違和感が出ることも。\u003C/li>\u003C/ul>\u003Cp>基本的には、\u003Cstrong>特別な理由がなければ \u003C/strong>\u003Ccode>mediump\u003C/code>\u003Cstrong> を使います。\u003C/strong>\u003C/p>\u003Ch3 id=\"ha26f547d90\">gl_FragColor\u003C/h3>\u003Cp>Fragment Shader から\u003Cstrong>出力する色を指定するための組み込み変数\u003C/strong>です。\u003C/p>\u003Cp>値は \u003Ccode>vec4\u003C/code> 型で、\u003Cspan style=\"color: #ff0000\">r\u003C/span>・\u003Cspan style=\"color: #69db00\">g\u003C/span>・\u003Cspan style=\"color: #0072ff\">b\u003C/span>・a(透明度) の 4 つの要素を持ちます。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\u003C/code>\u003C/pre>\u003Cp>この場合は、赤を最大、緑と青をゼロ、透明度を最大にしているため、不透明な赤になります。\u003C/p>\u003Cp>それぞれの値は、基本的に \u003Ccode>0.0\u003C/code> から \u003Ccode>1.0\u003C/code> の範囲で指定。\u003Cbr>たとえば \u003Ccode>vec4(1.0, 1.0, 1.0, 1.0)\u003C/code> なら不透明な白、\u003Ccode>vec4(0.0, 0.0, 0.0, 1.0)\u003C/code> なら不透明な黒になります。\u003C/p>\u003Cp>このように Fragment Shader では、各フラグメントに対してどの色を出力するかを計算します。\u003C/p>\u003Ch2 id=\"hf02f93e60a\">実演してみる\u003C/h2>\u003Ch3 id=\"hdd5d55e749\">Three.js で表示する準備\u003C/h3>\u003Cp>実演では、Three.js 上にオブジェクトを表示しながら、少しずつシェーダーを書き換えていきます。\u003Cbr>オブジェクトを作る基本は、次の 3 つです。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>Geometry\u003C/strong>：形を決めるもの。\u003C/li>\u003Cli>\u003Cstrong>Material\u003C/strong>：見た目を決めるもの。\u003C/li>\u003Cli>\u003Cstrong>Mesh\u003C/strong>：Geometry と Material を組み合わせたもの。\u003C/li>\u003C/ul>\u003Cpre>\u003Ccode class=\"language-typescript\">geometry = new PlaneGeometry(1, 1, 32, 32);\n\nmaterial = new RawShaderMaterial({\n  vertexShader,\n  fragmentShader,\n  transparent: true,\n  side: DoubleSide,\n});\n\nmesh = new Mesh(geometry, material);\n\nif (scene) {\n  scene.add(mesh);\n}\u003C/code>\u003C/pre>\u003Cp>ここでは、\u003Ccode>PlaneGeometry\u003C/code> で平面を作り、\u003Ccode>RawShaderMaterial\u003C/code> に Vertex Shader と Fragment Shader を指定。\u003Cbr>最後に Geometry と Material を組み合わせて Mesh を作り、Scene に追加します。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/0667dd478db145e19c2aee62c209979f/object-1.png?w=600&h=571\" alt=\"Geometry と Material を組み合わせて表示したオブジェクト\" width=\"600\" height=\"571\">\u003Cfigcaption>Geometry と Material を組み合わせて表示したオブジェクト\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>Material の設定を変えることで、色を変えたり、\u003Ccode>wireframe\u003C/code> で構成線を表示したり、\u003Ccode>map\u003C/code> で画像を貼り付けたりできます。\u003Cbr>また、表示したオブジェクトは、\u003Ccode>OrbitControls\u003C/code> を使ってマウス操作で回転・拡大縮小しながら確認することも可能です。\u003C/p>\u003Cp>\u003Cstrong>Geometry の分割数を増やすと頂点数が増える\u003C/strong>ため、変形したときの見た目は\u003Cstrong>なめらか\u003C/strong>になります。ただし、その分\u003Cstrong>処理は重くなる\u003C/strong>ので注意が必要です。\u003C/p>\u003Ch3 id=\"hb864bed67b\">頂点の座標を変更してみる\u003C/h3>\u003Cp>ここからは、Vertex Shader の中で頂点の座標を変更してみましょう。\u003C/p>\u003Cp>まず使うのは、\u003Ccode>modelMatrix\u003C/code> を掛けたあとの座標です。この座標を \u003Ccode>modelPosition\u003C/code> として変数に入れておくと、\u003Ccode>x\u003C/code>、\u003Ccode>y\u003C/code>、\u003Ccode>z\u003C/code> の値を変更できます。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">void main() {\n  vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n  modelPosition.y += 1.0;\n\n  vec4 viewPosition = viewMatrix * modelPosition;\n  vec4 projectionPosition = projectionMatrix * viewPosition;\n\n  gl_Position = projectionPosition;\n}\u003C/code>\u003C/pre>\u003Cp>この例では、\u003Ccode>modelPosition.y\u003C/code> に \u003Ccode>1.0\u003C/code> を足しています。\u003Ccode>y\u003C/code> は上下方向の座標なので、頂点は上方向へ移動します。\u003Cbr>\u003Cbr>ただし、Vertex Shader はオブジェクト全体に一度だけ実行されるものではありません。Geometry を構成する\u003Cstrong>各頂点ごとに実行\u003C/strong>されます。\u003Cbr>そのため、\u003Cstrong>すべての頂点に同じ処理がかかり、結果としてオブジェクト全体が上に移動する\u003C/strong>という仕組みです。\u003C/p>\u003Cp>次は、すべての頂点を同じ方向へ動かすのではなく、頂点ごとに移動量を変えてみます。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">void main() {\n  vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n  modelPosition.z += sin(modelPosition.x * 10.0) * 0.1;\n\n  vec4 viewPosition = viewMatrix * modelPosition;\n  vec4 projectionPosition = projectionMatrix * viewPosition;\n\n  gl_Position = projectionPosition;\n}\u003C/code>\u003C/pre>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/08133f5d602a43b49d2643d3970bc46f/object-2.png?w=600&h=638\" alt=\"sin を使って、頂点ごとに Z 座標の移動量を変えた状態\" width=\"600\" height=\"638\">\u003Cfigcaption>sin を使って、頂点ごとに Z 座標の移動量を変えた状態\u003C/figcaption>\u003C/figure>\u003Cp>\u003C/p>\u003Cp>\u003Ccode>modelPosition.x\u003C/code> は、各頂点が持っている X 座標です。左側の頂点と右側の頂点では X 座標が異なるため、\u003Ccode>sin\u003C/code> の計算結果も変わります。\u003Cbr>その結果、頂点ごとに Z 座標の移動量が変わり、\u003Cstrong>平面に波のような起伏\u003C/strong>が生まれます。\u003C/p>\u003Cp>\u003Ccode>modelPosition.x * 10.0\u003C/code> は、波の細かさを調整するための値です。\u003Cstrong>値を大きくすると波の間隔は細かくなり、小さくするとゆるやかな変化\u003C/strong>になります。\u003C/p>\u003Cp>最後の \u003Ccode>* 0.1\u003C/code> は、Z 方向への動きが大きくなりすぎないようにするための調整です。\u003Cbr>ここではまず、X 座標を使って Z 座標を変化させています。\u003C/p>\u003Ch3 id=\"hf4bfbf59d2\">uniform で値を渡して動かす\u003C/h3>\u003Cp>先ほどのコードでは、波の細かさを \u003Ccode>10.0\u003C/code> という固定値で指定していました。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">modelPosition.z += sin(modelPosition.x * 10.0) * 0.1;\u003C/code>\u003C/pre>\u003Cp>このままだと、波の細かさを変えるたびにシェーダーのコードを書き換える必要があります。\u003Cbr>そこで使うのが \u003Ccode>uniform\u003C/code> です。\u003C/p>\u003Cp>\u003Ccode>uniform\u003C/code> を使うと、JavaScript 側からシェーダーへ値を渡せます。\u003C/p>\u003Cpre>\u003Ccode class=\"language-ts\">material = new RawShaderMaterial({\n  vertexShader,\n  fragmentShader,\n  uniforms: {\n    uFrequency: new Uniform(new Vector2(10, 5)),\n  },\n});\u003C/code>\u003C/pre>\u003Cp>Vertex Shader 側では、渡された \u003Ccode>uFrequency\u003C/code> を使って計算します。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">uniform vec2 uFrequency;\n\nvoid main() {\n  vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n\n  modelPosition.z += sin(modelPosition.x * uFrequency.x) * 0.1;\n  modelPosition.z += sin(modelPosition.y * uFrequency.y) * 0.1;\n\n  vec4 viewPosition = viewMatrix * modelPosition;\n  vec4 projectionPosition = projectionMatrix * viewPosition;\n\n  gl_Position = projectionPosition;\n}\u003C/code>\u003C/pre>\u003Cp>\u003Ccode>uFrequency.x\u003C/code> は X 方向、\u003Ccode>uFrequency.y\u003C/code> は Y 方向の波の細かさを調整する値です。\u003Cbr>固定値を直接書くのではなく \u003Ccode>uniform\u003C/code> にしておくことで、\u003Cstrong>外側から値を変更\u003C/strong>できるようになります。\u003C/p>\u003Cp>値の調整には、\u003Cstrong>GUI のコントローラー\u003C/strong>も使えます。\u003C/p>\u003Cpre>\u003Ccode class=\"language-ts\">gui.add(material.uniforms.uFrequency.value, 'x')\n  .min(0)\n  .max(20)\n  .step(0.1)\n  .name('Frequency x');\n\ngui.add(material.uniforms.uFrequency.value, 'y')\n  .min(0)\n  .max(20)\n  .step(0.1)\n  .name('Frequency y');\u003C/code>\u003C/pre>\u003Cp>これにより、コードを書き換えなくても、画面上のコントローラーから波の細かさを調整できます。\u003C/p>\u003Ch3 id=\"h917ebd2821\">時間を渡してアニメーションさせる\u003C/h3>\u003Cp>ここまでの波は、あくまで「波打った形」になっているだけです。\u003Cbr>\u003Cstrong>時間に合わせて動かすには、経過時間をシェーダーに\u003C/strong>渡します。\u003C/p>\u003Cp>まず、\u003Ccode>uTime\u003C/code> を \u003Ccode>uniform\u003C/code> として追加します。\u003C/p>\u003Cpre>\u003Ccode class=\"language-ts\">material = new RawShaderMaterial({\n  vertexShader,\n  fragmentShader,\n  uniforms: {\n    uFrequency: new Uniform(new Vector2(10, 5)),\n    uTime: new Uniform(0),\n  },\n});\u003C/code>\u003C/pre>\u003Cp>Three.js 側では、\u003Ccode>Clock\u003C/code> を使って\u003Cstrong>経過時間を取得\u003C/strong>します。\u003Cbr>その値を描画ループの中で \u003Ccode>uTime\u003C/code> に入れることで、フレームごとに新しい時間をシェーダーへ渡せます。\u003C/p>\u003Cpre>\u003Ccode class=\"language-ts\">const elapsedTime = clock.getElapsedTime();\n\nif (material) {\n  material.uniforms.uTime.value = elapsedTime;\n}\u003C/code>\u003C/pre>\u003Cp>Vertex Shader 側では、\u003Ccode>sin\u003C/code> の計算に \u003Ccode>uTime\u003C/code> を加えます。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">uniform vec2 uFrequency;\nuniform float uTime;\n\nvoid main() {\n  vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n\n  modelPosition.z += sin(modelPosition.x * uFrequency.x + uTime) * 0.1;\n  modelPosition.z += sin(modelPosition.y * uFrequency.y + uTime) * 0.1;\n\n  vec4 viewPosition = viewMatrix * modelPosition;\n  vec4 projectionPosition = projectionMatrix * viewPosition;\n\n  gl_Position = projectionPosition;\n}\u003C/code>\u003C/pre>\u003Cp>\u003Ccode>uTime\u003C/code> の値が少しずつ変わることで、\u003Ccode>sin\u003C/code> の計算結果も変化します。\u003Cbr>その結果、平面が時間に合わせてゆらゆらと波打つように動きます。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https://www.youtube.com/embed/Io2uTgc4CNU?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\" referrerpolicy=\"strict-origin\">\u003C/iframe>\u003C/div>\u003Ch3 id=\"h57a861c8ea\">波の高さを色に使う\u003C/h3>\u003Cp>次に、\u003Cstrong>波の高さ\u003C/strong>を色の計算にも使ってみましょう。\u003C/p>\u003Cp>今は、\u003Ccode>sin\u003C/code> で計算した値をそのまま \u003Ccode>modelPosition.z\u003C/code> に足しています。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">modelPosition.z += sin(modelPosition.x * uFrequency.x + uTime) * 0.1;\nmodelPosition.z += sin(modelPosition.y * uFrequency.y + uTime) * 0.1;\u003C/code>\u003C/pre>\u003Cp>このままだと、波の高さは Vertex Shader の中だけで使われます。\u003Cbr>\u003Cstrong>Fragment Shader 側でも同じ値を使いたい\u003C/strong>ので、まずは高さの計算結果を \u003Ccode>elevation\u003C/code> という変数に切り出します。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">varying float vElevation;\n\nvoid main() {\n  vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n\n  float elevation = sin(modelPosition.x * uFrequency.x + uTime) * 0.1;\n  elevation += sin(modelPosition.y * uFrequency.y + uTime) * 0.1;\n\n  modelPosition.z += elevation;\n\n  vec4 viewPosition = viewMatrix * modelPosition;\n  vec4 projectionPosition = projectionMatrix * viewPosition;\n\n  gl_Position = projectionPosition;\n\n  vElevation = elevation;\n}\u003C/code>\u003C/pre>\u003Cp>\u003Ccode>elevation\u003C/code> に入れているのは、Z 座標を動かすために使っていた値です。\u003Cbr>この値を \u003Ccode>modelPosition.z\u003C/code> に足せば、これまでと同じように平面が波打ちます。\u003C/p>\u003Cp>さらに、\u003Ccode>vElevation\u003C/code> に代入することで、Vertex Shader で計算した高さを Fragment Shader に渡せるようになります。\u003C/p>\u003Cp>ここで使っている \u003Ccode>varying\u003C/code> は、\u003Cstrong>Vertex Shader から Fragment Shader へ値を渡すための変数\u003C/strong>です。Vertex Shader 側で代入し、Fragment Shader 側で同じ名前と型を宣言して受け取ります。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">precision mediump float;\n\nvarying float vElevation;\n\nvoid main() {\n  float red = vElevation + 0.5;\n  gl_FragColor = vec4(red, 0.0, 0.0, 1.0);\n}\u003C/code>\u003C/pre>\u003Cp>\u003Ccode>gl_FragColor\u003C/code> は、\u003Ccode>r\u003C/code>、\u003Ccode>g\u003C/code>、\u003Ccode>b\u003C/code>、\u003Ccode>a\u003C/code> の4つの値で色を指定します。\u003Cbr>ここでは、\u003Ccode>vElevation\u003C/code> を\u003Cstrong>赤の値\u003C/strong>に使っています。\u003C/p>\u003Cp>ただし、\u003Ccode>elevation\u003C/code> はマイナスの値になることもあります。色の値としてそのまま使うと暗くなりすぎるため、\u003Ccode>0.5\u003C/code> を足して、\u003Cstrong>色の変化\u003C/strong>が見えるようにしています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https://www.youtube.com/embed/ojY_FAOo3Ps?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\" referrerpolicy=\"strict-origin\">\u003C/iframe>\u003C/div>\u003Cp>\u003Cbr>これで、波の高い部分と低い部分で赤の強さが変わるようになります。\u003Cbr>頂点の位置を動かすだけでなく、その計算結果を色にも使うことで、\u003Cstrong>立体感のある表現\u003C/strong>につなげられます。\u003C/p>\u003Ch3 id=\"h8f7a0729da\">テクスチャーを貼る\u003C/h3>\u003Cp>次に、平面に画像を\u003Cstrong>テクスチャー\u003C/strong>として貼り付けてみます。\u003C/p>\u003Cp>まず、JavaScript 側で画像を読み込み、\u003Ccode>uTexture\u003C/code> という \u003Ccode>uniform\u003C/code> としてシェーダーに渡します。\u003C/p>\u003Cpre>\u003Ccode class=\"language-ts\">textureLoader = new TextureLoader();\nconst texture = textureLoader.load('/flag.jpg');\n\nmaterial = new RawShaderMaterial({\n  vertexShader,\n  fragmentShader,\n  uniforms: {\n    uFrequency: new Uniform(new Vector2(10, 5)),\n    uTime: new Uniform(0),\n    uTexture: new Uniform(texture),\n  },\n});\u003C/code>\u003C/pre>\u003Cp>\u003Ccode>uTexture\u003C/code> は、シェーダー内で使うテクスチャー画像です。\u003Cbr>ただし、画像を渡すだけでは、どの位置に画像のどの部分を貼ればよいかわかりません。\u003C/p>\u003Cp>そこで使うのが \u003Ccode>uv\u003C/code> です。\u003C/p>\u003Cp>\u003Ccode>uv\u003C/code> は、Geometry が持っている\u003Cstrong>テクスチャー用の座標\u003C/strong>です。\u003Cbr>各頂点に対して、画像のどの位置を対応させるかを表しています。\u003C/p>\u003Cp>Vertex Shader 側では、Geometry が持つ \u003Ccode>uv\u003C/code> を \u003Ccode>attribute\u003C/code> として受け取り、\u003Ccode>vUv\u003C/code> として Fragment Shader に渡します。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">attribute vec2 uv;\n\nvarying float vElevation;\nvarying vec2 vUv;\n\nvoid main() {\n  vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n\n  float elevation = sin(modelPosition.x * uFrequency.x + uTime) * 0.1;\n  elevation += sin(modelPosition.y * uFrequency.y + uTime) * 0.1;\n\n  modelPosition.z += elevation;\n\n  vec4 viewPosition = viewMatrix * modelPosition;\n  vec4 projectionPosition = projectionMatrix * viewPosition;\n\n  gl_Position = projectionPosition;\n\n  vElevation = elevation;\n  vUv = uv;\n}\u003C/code>\u003C/pre>\u003Cp>\u003Ccode>uv\u003C/code> は Vertex Shader では使えますが、そのまま Fragment Shader から参照することはできません。\u003Cbr>そのため、\u003Ccode>varying\u003C/code> の \u003Ccode>vUv\u003C/code> に代入して、\u003Cstrong>Fragment Shader 側へ渡します\u003C/strong>。\u003C/p>\u003Cp>Fragment Shader 側では、同じ \u003Ccode>vUv\u003C/code> を宣言して受け取ります。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">precision mediump float;\nuniform sampler2D uTexture;\nvarying vec2 vUv;\n\nvoid main() {\n  vec4 textureColor = texture2D(uTexture, vUv);\n  gl_FragColor = textureColor;\n}\u003C/code>\u003C/pre>\u003Cp>\u003Ccode>texture2D(uTexture, vUv)\u003C/code> は、\u003Ccode>uTexture\u003C/code> の中から \u003Ccode>vUv\u003C/code> の座標に対応する色を取得する処理です。\u003Cbr>取得した色を \u003Ccode>gl_FragColor\u003C/code> に入れることで、\u003Cstrong>平面に画像が表示されます\u003C/strong>。\u003C/p>\u003Cp>補足として、\u003Ccode>vUv\u003C/code> をそのまま \u003Ccode>gl_FragColor\u003C/code> に入れると、UV 座標の変化をグラデーションとして確認できます。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https://www.youtube.com/embed/zqOtYtCk-S0?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\" referrerpolicy=\"strict-origin\">\u003C/iframe>\u003C/div>\u003Cp>\u003Cbr>これで、Fragment Shader 側で画像の色を取得し、各フラグメントの色として出力できるようになります。\u003Cbr>次は、このテクスチャーの色に \u003Ccode>vElevation\u003C/code> を掛けて、\u003Cstrong>波の高さに応じた明暗\u003C/strong>を加えていきます。\u003C/p>\u003Ch3 id=\"hf29ce76e4e\">テクスチャーに明暗を加える\u003C/h3>\u003Cp>テクスチャーの色に \u003Ccode>vElevation\u003C/code> を反映して、波の高さに応じた\u003Cstrong>明暗\u003C/strong>を加えてみます。\u003C/p>\u003Cp>先ほどテクスチャーを貼ったときは、\u003Ccode>texture2D(uTexture, vUv)\u003C/code> で取得した色を、そのまま \u003Ccode>gl_FragColor\u003C/code> に渡していました。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">vec4 textureColor = texture2D(uTexture, vUv);\n\ngl_FragColor = textureColor;\n\u003C/code>\u003C/pre>\u003Cp>ここに、波の高さとして受け取っている \u003Ccode>vElevation\u003C/code> を掛けます。\u003C/p>\u003Cpre>\u003Ccode class=\"language-glsl\">precision mediump float;\nuniform sampler2D uTexture;\nvarying float vElevation;\nvarying vec2 vUv;\n\nvoid main() {\n  vec4 textureColor = texture2D(uTexture, vUv);\n  textureColor.rgb *= vElevation * 1.5 + 0.5;\n  gl_FragColor = textureColor;\n}\n\u003C/code>\u003C/pre>\u003Cp>\u003Ccode>textureColor.rgb\u003C/code> は、テクスチャーの \u003Ccode>r\u003C/code>、\u003Ccode>g\u003C/code>、\u003Ccode>b\u003C/code> の値です。\u003Cbr>ここに \u003Ccode>vElevation\u003C/code> を使った値を掛けることで、波の高い部分と低い部分で明るさが変わります。\u003C/p>\u003Cp>\u003Ccode>vElevation * 1.5 + 0.5\u003C/code> のうち、\u003Ccode>1.5\u003C/code> は\u003Cstrong>明暗の差を強めるための値\u003C/strong>です。\u003Cbr>\u003Ccode>0.5\u003C/code> は、\u003Cstrong>全体が暗くなりすぎないようにするための調整\u003C/strong>です。\u003C/p>\u003Cp>これで、ただ画像を貼るだけでなく、\u003Cstrong>波の動きに合わせてテクスチャーの見え方も変化\u003C/strong>するようになります。\u003Cbr>Vertex Shader で計算した高さを Fragment Shader の色計算にも使うことで、より立体感のある表現に近づけられます。\u003C/p>\u003Ch3 id=\"hbc3f367c71\">応用例：GPGPU と Flow Field\u003C/h3>\u003Cp>シェーダーを応用すると、大量のパーティクルを動かすような表現にもつなげられます。\u003Cbr>その一例が、\u003Ca href=\"https://ja.wikipedia.org/wiki/GPGPU\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>GPGPU\u003C/strong>\u003C/a> と \u003Cstrong>Flow Field\u003C/strong> を使った表現です。\u003C/p>\u003Cp>\u003Cstrong>GPGPU は、描画だけでなく計算処理にも GPU を活用する手法\u003C/strong>です。\u003Cbr>\u003Cstrong>Flow Field は、空間上に「どの方向へ進むか」という流れを作り、パーティクルをその流れに沿って動かす考え方\u003C/strong>です。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https://www.youtube.com/embed/4IZ-A3z9xZ4?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\" referrerpolicy=\"strict-origin\">\u003C/iframe>\u003C/div>\u003Cp>\u003Cbr>このようなパーティクル表現は、\u003Cstrong>以前ご紹介したピエール・エルメ・パリ「NOËL」特設サイトの演出\u003C/strong>にも使われています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/noel2025/\" data-iframely-url=\"https://iframely.net/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fnoel2025%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://iframely.net/embed.js\" charset=\"utf-8\">\u003C/script>\u003Ch2 id=\"ha214098e44\">まとめ\u003C/h2>\u003Cp>シェーダーを使うと、頂点の位置やフラグメントの色を自分で計算し、Three.js の標準 Material だけでは難しい表現を作ることができます。\u003C/p>\u003Cp>今回は、\u003Cstrong>Vertex Shader で平面の頂点を動かし、\u003C/strong>\u003Ccode>uniform\u003C/code>\u003Cstrong> で時間を渡してアニメーション\u003C/strong>させました。\u003Cbr>さらに、その高さ情報を Fragment Shader に渡すことで、\u003Cstrong>色やテクスチャーの見え方にも反映\u003C/strong>しています。\u003C/p>\u003Cp>GLSL の記述や座標変換など、最初は難しく感じる部分もあります。\u003Cbr>一方で、\u003Cstrong>少ないコードでも見た目に大きな変化を出せるのが、シェーダーの面白いところ\u003C/strong>です。\u003C/p>\u003Cp>さらに発展させると、今回最後に触れたような大量のパーティクル表現にもつながります。\u003Cbr>このあたりは奥が深いので、また別の機会に詳しく紹介できればと思います。\u003C/p>",{"id":269,"eyecatch":270,"publishedAt":274,"createdAt":275,"title":276,"is_html":14,"content2":277},"aws-saa-certification",{"url":271,"height":272,"width":273},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/981a7c52ce36479e8fdf6085a3443ad5/aws-saa-certification.png",909,1731,"2026-06-22T04:53:58.852Z","2026-06-19T04:35:15.826Z","AWS Certified Solutions Architect - Associate を受験した話","\u003Cp>悪夢しか見ないおかげで、悪夢についてのインタビューを受けました。\u003C/p>\u003Cp>この記事は、社内イベント「\u003Ca href=\"https://www.s2factory.co.jp/blog/tea/\" target=\"_blank\" rel=\"noopener noreferrer\">お茶会\u003C/a>」での発表内容をもとにまとめたものです。\u003Cbr>今回は、弊社の otsuka が\u003Cstrong>「AWS Certified Solutions Architect - Associate」\u003C/strong>の受験について話しました。\u003C/p>\u003Chr>\u003Cp>\u003Cbr>今年の 4 月に、\u003Ca href=\"https://aws.amazon.com/jp/\" target=\"_blank\" rel=\"noopener noreferrer\">AWS\u003C/a> 認定試験のひとつである\u003Cstrong>「\u003C/strong>\u003Ca href=\"https://aws.amazon.com/jp/certification/certified-solutions-architect-associate/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>AWS Certified Solutions Architect - Associate（SAA）\u003C/strong>\u003C/a>\u003Cstrong>」\u003C/strong>を受験しました。\u003Cbr>受験に向けてどのように勉強したのか、実際に受けてみてどうだったのかを振り返りたいと思います。\u003C/p>\u003Ch2 id=\"h66b306ae14\">試験について\u003C/h2>\u003Cp>AWS 認定試験には、いくつかの\u003Cstrong>レベル\u003C/strong>があります。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>Foundational\u003C/strong>：AWS 初心者向け\u003C/li>\u003Cli>\u003Cstrong>Associate\u003C/strong>：実務で AWS に触れている人向け\u003C/li>\u003Cli>\u003Cstrong>Professional\u003C/strong>：上級エンジニア・アーキテクト向け\u003C/li>\u003Cli>\u003Cstrong>Specialty\u003C/strong>：特定分野の専門家向け\u003C/li>\u003C/ul>\u003Cp>今回受験したのは、Associate レベルの \u003Cstrong>AWS Certified Solutions Architect - Associate(SAA)\u003C/strong> です。\u003C/p>\u003Cp>SAA では、AWS を使ったシステム設計を中心に、以下のような知識が問われます。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>高可用性\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>セキュリティ\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>コスト最適化\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>ネットワーク\u003C/strong>\u003C/li>\u003C/ul>\u003Cp>\u003Cstrong>試験時間は 130 分で、問題数は 65 問。1000 点満点のうち 720 点以上で合格\u003C/strong>です。\u003Cbr>ちなみに受験料は 22,000 円。申し込みには AWS のアカウントとは別のアカウントが必要で、少し手間取ったところもありました。\u003C/p>\u003Ch2 id=\"h89be2e6da8\">AWS認定試験を受けようと思った理由\u003C/h2>\u003Cp>受験前は、業務で AWS に触る機会はあるものの、\u003Cstrong>細かいオプションやサービスごとの使い分けまでは十分に理解できていない状態\u003C/strong>でした。\u003Cbr>なんとなく触っている状態から、\u003Cstrong>もう少し体系的に知識を身につけたい\u003C/strong>と思ったことが、受験しようと思ったきっかけです。\u003C/p>\u003Cp>また、S2ファクトリーには\u003Cstrong>社員のスキルアップを支援する資格試験支援制度\u003C/strong>があります。\u003Cstrong>試験費用のほか、勉強に必要な参考書や有料講座なども補助対象になる\u003C/strong>制度です。\u003C/p>\u003Cp>AWS 認定試験は受験料が決して安くないため、こうした制度があることで挑戦しやすくなったと感じています。\u003C/p>\u003Ch2 id=\"h59fab18ef3\">勉強方法\u003C/h2>\u003Cp>AWS 認定試験の体験談を見ていると、\u003Ca href=\"https://www.udemy.com/\" target=\"_blank\" rel=\"noopener noreferrer\">Udemy\u003C/a> を使って勉強している人が多い印象でした。\u003Cbr>ただ、動画で学ぶのがあまり得意ではなかったため、別の方法で勉強することに。\u003C/p>\u003Cp>最初に試したのは参考書です。見やすそうだと思って選んだものの、読んでいてもなかなか頭に入らず、思うように勉強が進みませんでした。\u003C/p>\u003Cp>そこで使い始めたのが、\u003Ca href=\"https://mondai.ping-t.com/g\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Ping-t \u003C/strong>\u003C/a>\u003Cstrong>という問題演習サイト\u003C/strong>です。AWS 認定試験の受験経験がある社内メンバーに教えてもらったサイトで、最終的にはこれを中心に勉強しました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/aws-certified/\" data-iframely-url=\"https://iframely.net/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Faws-certified%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://iframely.net/embed.js\" charset=\"utf-8\">\u003C/script>\u003Cp>\u003Cbr>自分の勉強スタイルとしては、こんな感じです。\u003C/p>\u003Cul>\u003Cli>Ping-t で問題を解く\u003C/li>\u003Cli>解説を読んで、分からなかった内容を確認する\u003C/li>\u003Cli>要点がまとまったページを iPad で書き写して暗記\u003C/li>\u003C/ul>\u003Cp>スマホで少しずつ進められるところが自分には合っていて、最終的には \u003Cstrong>800 問\u003C/strong>ほど解きました。\u003C/p>\u003Cp>Ping-t には無料で解ける問題もありますが、SAA の問題集をしっかり進めたかったので、\u003Cstrong>有料プランを利用\u003C/strong>しました。\u003Cbr>当初は 1 ヶ月で進めるつもりでしたが、途中で受験日を少し後ろにずらしたこともあり、結果的には 2 ヶ月ほど使っています。\u003C/p>\u003Ch2 id=\"haaf1d50dfc\">試験内容\u003C/h2>\u003Cp>試験では、サービス自体の知識をそのまま問うというより、\u003Cstrong>「こういう場面ではどのサービスを使うのがよいか」を考える問題\u003C/strong>が多い印象。\u003C/p>\u003Cp>実際には、このあたりの内容が出ました。\u003C/p>\u003Cul>\u003Cli>可用性・耐障害性\u003C/li>\u003Cli>ディザスタリカバリ\u003C/li>\u003Cli>コスト最適化\u003C/li>\u003Cli>セキュリティ（IAM / KMS / VPC）\u003C/li>\u003Cli>サーバーレス構成\u003C/li>\u003Cli>S3のストレージクラス\u003C/li>\u003Cli>SQS / SNS を使った構成\u003C/li>\u003Cli>S3 / EBS / EFS などのストレージ選択\u003C/li>\u003C/ul>\u003Cp>選択肢の中には「間違いではないけれど、そこまでしなくてもよさそう」と思うものもあり、問題文を読みながら、\u003Cstrong>要件に対して過不足のない答えを選んでいく\u003C/strong>イメージです。\u003C/p>\u003Cp>本番では、勉強した内容も多く出てきて安心した一方で、EventBridge のイベントバスなど、あまり触れていなかった内容もあり、まだまだ知らないことが多いと感じました。\u003C/p>\u003Ch2 id=\"hf980b243ef\">試験当日\u003C/h2>\u003Cp>認定試験は、\u003Ca href=\"https://aws.amazon.com/jp/certification/certification-prep/testing/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>テストセンターで受ける方法\u003C/strong>と、自宅やオフィスから\u003Cstrong>オンライン監督付きで受ける方法\u003C/strong>\u003C/a>があります。\u003Cbr>オンラインの場合は、画面共有と Web カメラを通じて試験監督員の確認を受けながら受験するそうです。\u003Cbr>\u003Cbr>私は、\u003Ca href=\"https://www.pearsonvue.com/jp/ja/test-takers.html\" target=\"_blank\" rel=\"noopener noreferrer\">ピアソンVUE\u003C/a>のテストセンターで受けることにしました。\u003Cbr>\u003Cstrong>テストセンターは池袋や新宿など都内にも複数\u003C/strong>ありますが、受けられる会場は試験日や空き状況によって変わります。予約時に検索して選ぶ形になるため、最終的には予約メールに書かれた住所を確認するのが確実です。\u003Cbr>\u003Cbr>今回、一番焦ったのがまさにその\u003Cstrong>会場確認\u003C/strong>でした。\u003Cbr>予約メールには「IKEBUKUROEKI NISHIGUCHI TEST CENTER」と書かれていて、以前に別の試験を受けた会場だと思い込んで向かったのですが、建物に入ると「ここは SAA の試験会場ではありません」という張り紙が。わざわざ張り紙があるということは、同じように間違える人が多いのかもしれません。\u003C/p>\u003Cp>改めてメールの住所を確認すると、実際の会場は別の場所。幸いにも 5 分ほどの距離だったため、小走りで移動し、無事に受験できました。\u003C/p>\u003Cp>会場では\u003Cstrong>顔写真の撮影や持ち物のチェック\u003C/strong>を済ませてから席につきます。\u003Cbr>試験の時間配分がわからなかったため、まずは全体を一周し、残った時間でもう一度見直す形で臨んだのですが、時間的にも余裕と、ある程度の手応えを持って終えることができたので良かったです。\u003C/p>\u003Ch2 id=\"hb6509f48bf\">結果\u003C/h2>\u003Cp>試験結果はその場ではわからず、後日メールで通知されます。\u003C/p>\u003Cp>\u003Cstrong>翌日の朝には、「合格バッジを獲得しました」というメール\u003C/strong>が届きました。合格したことはわかるのですが、正式な結果通知より先にバッジの案内が来たので、できれば順番は逆がよかったなと思いました。\u003C/p>\u003Cp>その後、試験結果の案内メールも届き、無事に合格していることを確認。\u003C/p>\u003Cp>スコアは 832 点。合格ラインは 720 点なので、\u003Cstrong>ある程度余裕を持って合格できたのは嬉しかった\u003C/strong>です。\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/fe14942ccf194884842f13dbfde09ae0/%E5%90%88%E6%A0%BC%E9%80%9A%E7%9F%A5.png?w=600&h=483\" alt=\"合格通知\" width=\"600\" height=\"483\">\u003C/figure>\u003Ch2 id=\"ha214098e44\">まとめ\u003C/h2>\u003Cp>受験してみて、AWS についてまだ知らないことがたくさんあるなと思いました。\u003C/p>\u003Cp>業務で使うことはあっても、サービスごとの違いや、どういう場面でどの構成を選ぶのかを改めて整理するきっかけは意外と少ないものです。試験勉強を通して、なんとなく触っていた部分を見直すよい機会になりました。\u003C/p>\u003Cp>ちなみに、AWS 認定試験は、合格すると次回以降の試験で使える\u003Cstrong>半額チケット\u003C/strong>がもらえるようです。Developer Associate や DevOps Engineer Professional、Solutions Architect Professional など、\u003Cstrong>実務に関わりそうな試験も気になっているので、今後また別の試験にも挑戦\u003C/strong>してみたいと思います。\u003C/p>",174,0,3,{"contents":282,"totalCount":486,"offset":279,"limit":487},[283,285,288,291,292,295,298,300,302,304,307,310,313,316,319,322,323,325,328,330,333,336,338,340,343,346,349,352,355,358,361,364,367,369,371,374,377,379,381,384,387,390,393,396,399,402,405,406,409,412,415,417,420,423,425,427,429,432,434,437,440,443,445,448,451,454,457,460,463,466,469,472,475,477,480,483],{"id":36,"name":284},"AI",{"id":286,"name":287},"workshop","ワークショップ",{"id":289,"name":290},"tool","ツール",{"id":11,"name":13},{"id":293,"name":294},"internal-project","社内案件",{"id":296,"name":297},"event","イベント",{"id":203,"name":299},"IoT",{"id":222,"name":301},"アート",{"id":168,"name":303},"引越し",{"id":305,"name":306},"picture","映像",{"id":308,"name":309},"plant","植物",{"id":311,"name":312},"company-trip","社員旅行",{"id":314,"name":315},"health","健康",{"id":317,"name":318},"exercise","運動",{"id":320,"name":321},"bicycle-club","自転車部",{"id":21,"name":25},{"id":164,"name":324},"Interview",{"id":326,"name":327},"recruiting","採用",{"id":80,"name":329},"お茶会",{"id":331,"name":332},"history","歴史",{"id":334,"name":335},"life","生活",{"id":145,"name":337},"部活動",{"id":183,"name":339},"キャラクター",{"id":341,"name":342},"food","食",{"id":344,"name":345},"math","数学",{"id":347,"name":348},"alcohol","酒",{"id":350,"name":351},"infrastructure","インフラ",{"id":353,"name":354},"application","アプリ",{"id":356,"name":357},"parenting","子育て",{"id":359,"name":360},"data","通信",{"id":362,"name":363},"migration","地方移住",{"id":365,"name":366},"security","セキュリティ",{"id":368,"name":368},"esports",{"id":109,"name":370},"振り返り",{"id":372,"name":373},"animal","動物",{"id":375,"name":376},"css","CSS",{"id":78,"name":378},"ゲーム",{"id":38,"name":380},"TypeScript",{"id":382,"name":383},"management","マネジメント",{"id":385,"name":386},"remote-work","リモートワーク",{"id":388,"name":389},"frame-work","フレームワーク",{"id":391,"name":392},"music","音楽",{"id":394,"name":395},"money","お金",{"id":397,"name":398},"covid-19","コロナ",{"id":400,"name":401},"railway","鉄道",{"id":403,"name":404},"agriculture","農業",{"id":16,"name":19},{"id":407,"name":408},"certification","資格",{"id":410,"name":411},"personal-computer","PC",{"id":413,"name":414},"welfare","福利厚生",{"id":42,"name":416},"技術",{"id":418,"name":419},"study","勉強",{"id":421,"name":422},"mental-health","メンタルヘルス",{"id":114,"name":424},"フロントエンド",{"id":143,"name":426},"ピラティス",{"id":40,"name":428},"バックエンド",{"id":430,"name":431},"tunnel","トンネル",{"id":112,"name":433},"デザイン",{"id":435,"name":436},"sports","スポーツ",{"id":438,"name":439},"online","オンライン",{"id":441,"name":442},"internship","インターンシップ",{"id":116,"name":444},"アニメーション",{"id":446,"name":447},"virtual-reality","VR",{"id":449,"name":450},"ssl","SSL",{"id":452,"name":453},"perl","Perl",{"id":455,"name":456},"operating-system","OS",{"id":458,"name":459},"ios","iOS",{"id":461,"name":462},"google","Google",{"id":464,"name":465},"deeplearning","DeepLearning",{"id":467,"name":468},"aws","AWS",{"id":470,"name":471},"apple","Apple",{"id":473,"name":474},"api","API",{"id":118,"name":476},"3D",{"id":478,"name":479},"school","学校",{"id":481,"name":482},"blender","Blender",{"id":484,"name":485},"android","Android",76,200,{"contents":489,"totalCount":280,"offset":279,"limit":280},[490,541,606],{"id":491,"createdAt":492,"updatedAt":493,"publishedAt":494,"revisedAt":493,"title":495,"category":496,"thumbnail":505,"image":508,"content":515,"keyword":516,"client":531,"team":532,"url":536,"release":537,"status":538,"top":14,"blog":26,"service":540},"phpj-noel-2025","2025-12-15T06:18:04.117Z","2026-06-17T08:10:29.660Z","2026-03-05T04:15:03.177Z","PIERRE HERMÉ PARIS | NOËL 2025",[497,502],{"id":498,"createdAt":499,"updatedAt":500,"publishedAt":499,"revisedAt":499,"name":501},"web","2024-03-22T05:33:05.262Z","2024-06-24T23:16:42.692Z","ウェブ制作",{"id":112,"createdAt":503,"updatedAt":503,"publishedAt":503,"revisedAt":503,"name":504},"2024-03-22T05:34:30.127Z","デザイン＆ディレクション",{"url":506,"height":507,"width":173},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/47e7b069013a45b8b6e931ec132bd272/thumb.png",900,[509,511,513],{"url":510,"height":122,"width":123},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/43a703ebe8d7467aac2c995378cb081e/1.png",{"url":512,"height":122,"width":123},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/6aed2d670822422696329a5cb3a6877f/2.png",{"url":514,"height":122,"width":123},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/b691d73151a94dcf9d60a6f8af436eac/3.png","\u003Cp>昨年に続き、ホリデーシーズン限定の『NOËL 2025』スペシャルサイトを、\u003Cstrong>デザインとフロントエンドで担当\u003C/strong>しました。\u003Cbr>\u003Cbr>\u003Cstrong>「深海(アビス)」をテーマ\u003C/strong>に、鮮やかな青から徐々に暗く沈んでいくグラデーションで、海の中を潜っていくような体験を表現。泡や珊瑚、砂などのモチーフを取り入れ、ページ全体で海中の世界を感じられる構成に仕上げました。\u003Cbr>\u003Cbr>砂や泡の表現にはWebGLとGPGPUを用い、数万単位のパーティクルをGPUで並列処理することで滑らかな動作を実現。一部テキストは3D描画で演出しながら、DOM上にも同内容を配置し、表現とSEOの両立を図りました。\u003Cbr>また、Safariなどブラウザ差異による負荷を考慮し、SVGからCanvasへ置き換えるなど最適化を実施。視覚的な印象を保ちながら、各環境で安定して動作するよう設計しています。\u003Cbr>\u003Cbr>\u003Cstrong>デザインと実装の両面から、制作の背景やポイントについてブログで詳しく解説\u003C/strong>しています。\u003C/p>",[517,521,526],{"id":518,"createdAt":519,"updatedAt":520,"publishedAt":519,"revisedAt":520,"name":424,"filter":26,"page":26},"ice0h9h9ap","2024-06-28T01:14:44.830Z","2025-01-15T07:40:01.729Z",{"id":522,"createdAt":523,"updatedAt":524,"publishedAt":523,"revisedAt":524,"name":525,"filter":26,"page":26},"6ncqc37v7nzq","2024-06-28T01:14:12.293Z","2025-01-15T07:39:08.437Z","デザインプロジェクト",{"id":527,"createdAt":528,"updatedAt":529,"publishedAt":528,"revisedAt":529,"name":530,"filter":26,"page":26},"ztrz9np70v","2024-06-28T01:14:41.050Z","2025-01-15T07:40:30.428Z","コンセプトメイキング"," PH PARIS JAPON 株式会社",[533],{"fieldId":534,"title":535},"teamField","S2ファクトリー","https://www.s2factory.co.jp/blog/noel2025/","2025.10.17",[539],"公開中",[],{"id":542,"createdAt":543,"updatedAt":544,"publishedAt":543,"revisedAt":544,"title":545,"category":546,"thumbnail":553,"image":557,"content":562,"keyword":563,"client":545,"team":578,"url":601,"release":602,"status":603,"statusText":604,"top":26,"blog":26,"service":605},"tamabi","2024-06-28T01:58:38.788Z","2025-05-27T03:25:42.261Z","多摩美術大学",[547,548],{"id":498,"createdAt":499,"updatedAt":500,"publishedAt":499,"revisedAt":499,"name":501},{"id":549,"createdAt":550,"updatedAt":551,"publishedAt":550,"revisedAt":550,"name":552},"system","2024-03-22T05:33:52.708Z","2024-06-24T23:16:53.739Z","システム開発",{"url":554,"height":555,"width":556},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/dea8e004e627415c80bf7b8d622bb4b9/tamabi-thumbnail-1.png",456,600,[558],{"url":559,"height":560,"width":561},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/a000f3cedf5d474d83c5b70e8c11db4e/tamabi-other-1.png",1305,1740,"\u003Cp>「多摩美術大学」ウェブサイトリニューアルのお手伝いをさせていただきました。\u003Cbr>\u003Cbr>サイトのコンテンツを大幅に整理し、運用効率を考慮した再利用しやすく組み合わせやすいUIコンポーネントを構築。また多くの方に利用していただけるようにアクセシビリティの向上にも注力しました。\u003Cbr>インフラは、従来のオンプレミスとクラウドが混在していた環境から、AWS への段階的な移行を進めており、今後の完全移行に向けた準備も進行中です。 \u003Cbr>\u003Cbr>弊社は、フロントエンドとバックエンドの実装、インフラ構築を担当しました。\u003C/p>",[564,568,572,577],{"id":565,"createdAt":566,"updatedAt":567,"publishedAt":566,"revisedAt":567,"name":468,"filter":26,"page":26},"uftrxsmd0v72","2024-06-28T01:14:13.671Z","2025-01-15T07:39:25.538Z",{"id":569,"createdAt":570,"updatedAt":570,"publishedAt":570,"revisedAt":570,"name":571,"filter":14,"page":14},"yctx9hzd4","2024-06-28T01:14:33.743Z","Lambda",{"id":573,"createdAt":574,"updatedAt":575,"publishedAt":574,"revisedAt":575,"name":576,"filter":26,"page":26},"u84cy0fbzno","2024-06-28T01:14:39.521Z","2025-01-15T07:40:41.433Z","Cloud",{"id":518,"createdAt":519,"updatedAt":520,"publishedAt":519,"revisedAt":520,"name":424,"filter":26,"page":26},[579,582,585,588,591,594,597,600],{"fieldId":534,"title":580,"link":581},"萩原 俊矢","https://shunyahagiwara.com/#/works",{"fieldId":534,"title":583,"link":584},"GrandBase Inc.","https://www.grandbase.jp/",{"fieldId":534,"title":586,"link":587},"DSCL Inc.","https://dscl.jp/",{"fieldId":534,"title":589,"link":590},"株式会社トラフィックス","https://traffics.jp/",{"fieldId":534,"title":592,"link":593},"株式会社カンバセーションズ","https://qonversations.jp/",{"fieldId":534,"title":595,"link":596},"Measurements Inc.","https://www.measurements.co.jp/",{"fieldId":534,"title":598,"link":599},"tha ltd.","https://tha.jp/",{"fieldId":534,"title":535},"https://www.tamabi.ac.jp/","2024.4.4",[539],null,[501],{"id":607,"createdAt":608,"updatedAt":609,"publishedAt":608,"revisedAt":609,"title":610,"category":611,"thumbnail":613,"image":615,"content":624,"keyword":625,"client":598,"team":641,"url":647,"release":648,"status":649,"statusText":604,"top":14,"blog":26,"service":650},"humanity","2024-06-28T01:56:51.507Z","2025-05-27T03:26:34.287Z","HUMANITY",[612],{"id":549,"createdAt":550,"updatedAt":551,"publishedAt":550,"revisedAt":550,"name":552},{"url":614,"height":555,"width":556},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/740adb4e02c54fee97d12025df5f16a0/humanity-thumbnail-1.png",[616,618,620,622],{"url":617,"height":560,"width":561},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/2a10b034854d40e789d38ac33e0a3c4e/humanity-other-1.png",{"url":619,"height":560,"width":561},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/1091c52a97f745e5a3fc105bd0e542dc/humanity-other-2.png",{"url":621,"height":560,"width":561},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/613c8c836fff40119e9f85097262399d/humanity-other-3.png",{"url":623,"height":560,"width":561},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/3a9dfb8cce0d4ec887ead3d3998be04c/humanity-other-4.png","\u003Cp>『HUMANITY』は、インターフェース／ビジュアルデザイナーの中村勇吾氏とゲームクリエイター水口哲也氏のタッグによって制作された PlayStation 5(PS VR2対応)、PlayStation 4(PS VR対応)、Steam(PC用VR対応)用アクションパズルゲームです。\u003Cbr>\u003Cbr>プレイヤーは柴犬を操作して、自我を失った人類を導きゴールを目指します。\u003Cbr>メインのストーリーモードには 90 以上のステージを収録。さらに「STAGE CREATOR」では、自分だけのオリジナルステージを作って全世界のプレイヤーにシェアが可能です。また「USER STAGES」では、他のプレイヤーがシェアしたステージが公開され、カスタムのプレイリストや、タグを使用して検索し、お気に入りのステージを発見・チャレンジできます。\u003Cbr>\u003Cbr>弊社はゲームのコミュニティ機能のバックエンドと管理ツールの作成、インフラを担当しました。\u003C/p>",[626,631,636,637],{"id":627,"createdAt":628,"updatedAt":629,"publishedAt":628,"revisedAt":629,"name":630,"filter":26,"page":26},"fg8e4c9nl","2024-06-28T01:14:04.517Z","2025-01-15T07:36:58.970Z","CMS",{"id":632,"createdAt":633,"updatedAt":634,"publishedAt":633,"revisedAt":634,"name":635,"filter":26,"page":26},"p6qgoo2k9vl9","2024-06-28T01:14:06.759Z","2025-01-15T07:37:22.466Z","大規模データ",{"id":573,"createdAt":574,"updatedAt":575,"publishedAt":574,"revisedAt":575,"name":576,"filter":26,"page":26},{"id":638,"createdAt":639,"updatedAt":640,"publishedAt":639,"revisedAt":640,"name":378,"filter":26,"page":26},"pxnv6cy2u","2024-06-28T01:14:45.570Z","2025-01-15T07:39:54.004Z",[642,645,646],{"fieldId":534,"title":643,"link":644},"Enhance","https://enhance-experience.com/ja/",{"fieldId":534,"title":598,"link":599},{"fieldId":534,"title":535},"https://humanity.game/ja/","2023.5.16",[539],[552],1785473189341]