[{"data":1,"prerenderedAt":660},["ShallowReactive",2],{"detailtechnical-writing":3,"$flzXJYsoS3_BGvaiKo_d3bEXPs9un4tG1YevtABx0bII":271,"$fS4sOnCUpoF-wMfw16HWwnBnngwddN9OaX5p2KHuFyVA":290,"works":496},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":6,"revisedAt":6,"title":7,"tag":8,"recommended_articles":31,"eyecatch":131,"heading_list":30,"summary":135,"content2":136,"description":137,"related_articles":138,"recruit":14,"is_html":14,"is_migration":14},"technical-writing","2026-07-22T04:53:11.568Z","2026-07-23T11:09:26.357Z","テクニカルライティングとは？3 級試験の概要と文章作成の基本",[9,15,19,24],{"id":10,"createdAt":11,"updatedAt":12,"publishedAt":11,"revisedAt":11,"name":13,"top":14},"certification","2023-06-01T09:42:37.764Z","2023-08-09T06:25:23.276Z","資格",false,{"id":16,"createdAt":17,"updatedAt":17,"publishedAt":17,"revisedAt":17,"name":18,"top":14},"ai","2025-10-20T05:29:45.387Z","AI",{"id":20,"createdAt":21,"updatedAt":22,"publishedAt":21,"revisedAt":21,"name":23,"top":14},"study","2023-06-01T09:41:55.178Z","2023-08-09T06:31:18.978Z","勉強",{"id":25,"createdAt":26,"updatedAt":27,"publishedAt":28,"revisedAt":27,"name":29,"top":30},"tea","2023-06-01T09:41:19.770Z","2025-04-22T12:20:26.123Z","2023-07-28T06:30:00.000Z","お茶会",true,[32,75,105],{"id":33,"createdAt":34,"updatedAt":35,"publishedAt":36,"revisedAt":35,"title":37,"tag":38,"recommended_articles":48,"eyecatch":55,"heading_list":14,"content2":59,"description":60,"related_articles":61,"recruit":14,"cta_url":74,"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 へ書き換えた話",[39,40,42,44,46],{"id":16},{"id":41},"typescript",{"id":43},"backend",{"id":45},"tech",{"id":47},"promotion",[49,51,53],{"id":50},"noel2025",{"id":52},"design-project-1",{"id":54},"nazotoki",{"url":56,"height":57,"width":58},"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件のテスト構築まで行った取り組みを紹介します。",[62,64,66,68,70,72],{"id":63},"ai-generated-campaign-site",{"id":65},"event-ai-agent",{"id":67},"bird-classification-2",{"id":69},"edge-ai",{"id":71},"ux-certification-basics",{"id":73},"figma-plugin","https://www.s2factory.co.jp/blog/shader-basics/",{"id":54,"createdAt":76,"updatedAt":77,"publishedAt":78,"revisedAt":77,"title":79,"tag":80,"recommended_articles":87,"eyecatch":88,"heading_list":30,"content2":92,"description":93,"related_articles":94,"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 サイトを使った謎解きを作ってみた",[81,83,84,86],{"id":82},"game",{"id":25},{"id":85},"hobby",{"id":16},[],{"url":89,"height":90,"width":91},"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サイトを使った謎解きの制作プロセスまでを紹介。構成設計や実装、デバッグの工夫をまとめています。",[95,97,99,101,103,104],{"id":96},"vacation2024-missions",{"id":98},"office-humansensor",{"id":100},"toilet-sign",{"id":102},"game-development",{"id":69},{"id":65},{"id":50,"createdAt":106,"updatedAt":107,"publishedAt":108,"revisedAt":107,"title":109,"tag":110,"recommended_articles":123,"eyecatch":124,"heading_list":14,"content2":128,"description":129,"related_articles":130,"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 特設サイト 制作振り返り",[111,112,114,115,117,119,121],{"id":47},{"id":113},"look-back",{"id":45},{"id":116},"design",{"id":118},"frontend",{"id":120},"animation",{"id":122},"3-d",[],{"url":125,"height":126,"width":127},"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":132,"height":133,"width":134},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/b24fb52fae254f2ea1239a69799e1ba1/TW.jpg",2384,4240,"\u003Cul>\u003Cli>\u003Cstrong>テクニカルライティングの基本\u003C/strong>と、どのような文書に適しているのか\u003C/li>\u003Cli>\u003Cstrong>3 級 テクニカルライティング試験\u003C/strong>の出題範囲、試験形式、受験料、参考書\u003C/li>\u003Cli>\u003Cstrong>読み手に伝わる文章を組み立てる 4 つのステップ\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>生成 AI を使った文章作成\u003C/strong>で意識したいこと\u003C/li>\u003C/ul>","\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>","3級 テクニカルライティング試験の概要と、試験勉強を通して学んだ文章作成の基本を紹介します。目的と読み手の設定、情報整理、表現設計、推敲まで、読み手に伝わる文章を組み立てる流れや、生成AIを使う際に意識したいことをまとめました。",[139,158,192,218,235,251],{"id":140,"createdAt":141,"updatedAt":142,"publishedAt":141,"revisedAt":142,"title":143,"tag":144,"recommended_articles":150,"eyecatch":151,"heading_list":14,"related_articles":155,"recruit":14,"is_html":30,"html_contents":156,"is_migration":30,"migration_date":157},"tech-writing","2023-06-02T08:48:38.896Z","2023-08-09T09:02:51.599Z","Google のテクニカルライティング講座を読む",[145,146,148,149],{"id":25},{"id":147},"google",{"id":45},{"id":20},[],{"url":152,"height":153,"width":154},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/7687cdc16d9d4618a7185420c26695cc/2020-11-person-1990906_1280.jpg",853,1280,[],"不要不急の外出を避けて暮らしていたら体重がすごく増えていました。\u003Cbr>とてもショックだったので、頑張って元の体重に戻そうと思います。\u003Cbr>\u003Cbr>今回は弊社のとある社員が\u003Cstrong>「Google のテクニカルライティング講座を読む」\u003C/strong>というテーマで話しました。\n\n\u003Chr class=\"wp-block-separator\"/>\n\n\u003Cbr>最近、文章を書く機会が少なくなったなーと思っていました。\u003Cbr>\u003Ca rel=\"noreferrer noopener\" href=\"https://slack.com/intl/ja-jp/\" target=\"_blank\">Slack\u003C/a> や \u003Ca rel=\"noreferrer noopener\" href=\"https://twitter.com/home\" target=\"_blank\">Twitter\u003C/a> なんかにちょっとした呟きをすることはあっても、長文はまず書きません。\u003Cbr>いざそういう業務が舞い込んできても対応できそうにない。\u003Cbr>\u003Cbr>そんなことを考えていたときに\u003Ca rel=\"noreferrer noopener\" href=\"https://qiita.com/yasuoyasuo/items/c43783316a4d141a140f\" target=\"_blank\">こちら\u003C/a>の記事を見かけ、\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://developers.google.com/tech-writing\" target=\"_blank\">Google のテクニカルライティング講座\u003C/a>\u003C/strong>の存在を知り興味を持ちました。\u003Cbr>ソフトウェアエンジニア、情報科学専攻の学生、プロダクトマネージャー向けの講座で、S2にとってはお誂え向きかなと思い読んでみたら面白かったので、少し内容を紹介しようと思います。\u003Cbr>\n\n\u003Cp class=\"has-vivid-red-color has-text-color\" style=\"font-size:15px\">\u003Cbr>※全編英語で書かれたもののため、日本語では説明しづらい・取り入れづらい箇所もあります。\u003Cbr>\u003Cbr>\u003C/p>\n\n\u003Ch2>\u003Ca href=\"https://developers.google.com/tech-writing/one/words\" target=\"_blank\" rel=\"noreferrer noopener\">用語\u003C/a>\u003C/h2>\n\n初めの章は\u003Cstrong>用語\u003C/strong>についてです。\u003Cbr>\u003Cbr>用語を使うときは、よく知られている用語を既存の説明にリンクし、初めて導入する用語の定義をしましょう。\u003Cbr>また、\u003Cstrong>略語\u003C/strong>を使うことでテキストの文字数を減らせますが、読み手の頭の中では元の言葉が何度も展開されてしまうため、あまり有効ではありません。\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>略語によって著しく文字数を減らせるとき\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>文章の中に何度も出てくるとき\u003C/strong>\u003C/li>\u003C/ul>\n\n\u003Cbr>この\u003Cstrong>両方の条件を満たすときだけ略語を使う\u003C/strong>のが推奨されています。\u003Cbr>\u003Cbr>\n\n\u003Ch2>\u003Ca href=\"https://developers.google.com/tech-writing/one/active-voice\" target=\"_blank\" rel=\"noreferrer noopener\">受動態と能動態\u003C/a>\u003C/h2>\n\n\u003Cstrong>ほとんどの文章は能動態で書きましょう\u003C/strong>。\u003Cbr>読者は受動態を見ると、頭の中で能動態に書き換えてしまいがちです。さらに、受動態は間接的で、書き手の意図をぼやかしてしまうという側面があります。\u003Cbr>そもそも能動態の方が大抵の場合、文章を短く書けるそうなので、そういった面でも能動態で書く方が良いらしいです。\u003Cbr>主語を省略した、動詞から始まる文章を書くときにも、読者を主語に据えた表現をするように心がけましょう。\u003Cbr>\u003Cbr>とはいえ、何もかも能動態にすればいいというわけでもなく、参考までに確認した日本語版のスタイルガイドによると、\u003Cstrong>利用者が行った操作の結果や、利用者から見て自動的に行われる動作は受動態で表現する\u003C/strong>のが良いと書かれていました。\u003Cbr>\u003Cbr>\n\n\u003Ch2>\u003Ca rel=\"noreferrer noopener\" href=\"https://developers.google.com/tech-writing/one/clear-sentences\" target=\"_blank\">明解な文章\u003C/a>\u003C/h2>\n\nホラー作家が人を怖がらせるような文章を求められているように、コメディ作家には面白い文章が求められます。同様に、テクニカルライターに求められるのは\u003Cstrong>明解な文章\u003C/strong>です。\u003Cbr>そして、\u003Cstrong>明解さを表現するには強い動詞を使う\u003C/strong>のが有効的です。\u003Cbr>\u003Cbr>強い動詞とは、、、説明によると、\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>be 動詞や occur, happen などの受け身な感じのする動詞を弱い動詞\u003C/li>\u003Cli>ensure, trigger, generate などの能動的な感じのする動詞を強い動詞\u003C/li>\u003C/ul>\n\n\u003Cbr>とありました。\u003Cbr>先ほどの章でもあったように、\u003Cstrong>能動的な文章の方が理解しやすい\u003C/strong>という考え方が元になっているみたいです。\u003Cbr>\u003Cbr>もう一点、\u003Cstrong>\u003Ccode>there is / are\u003C/code>\u003C/strong> という表現を減らすのも効果的だと言っています。\u003Cbr>何かものがあるとき、それに注意を向けるために使われるのが \u003Cstrong>\u003Ccode>there is / are\u003C/code>\u003C/strong> なのですが、\u003Cstrong>真の主語と動詞を見つけ出し文頭に置く\u003C/strong>訓練をすることで、意味が通りやすく明解な文章を作成できるようになります。\u003Cbr>\u003Cbr>こちらは例文ですが、\u003Cbr>\u003Cbr>\n\n\u003Cp class=\"has-vivid-cyan-blue-color has-text-color has-background\" style=\"background-color:#eeeeee\">\u003Cem>There is a variable called met_trick that stores the current accuracy.\u003C/em>\u003C/p>\n\n\u003Cp class=\"has-vivid-cyan-blue-color has-text-color has-background\" style=\"background-color:#eeeeee\">\u003Cem>The met_trick variable stores the current accuracy.\u003C/em>\u003C/p>\n\n二つの文章は \u003Ccode>There is\u003C/code> を使っているかいないかだけで意味は同じです。テキストにするなら下のように短く書くようにしましょう。\u003Cbr>\u003Cbr>\n\n\u003Ch2>\u003Ca href=\"https://developers.google.com/tech-writing/one/short-sentences\" target=\"_blank\" rel=\"noreferrer noopener\">文は短くする\u003C/a>\u003C/h2>\n\n短いコードは読みやすく、メンテナンスもしやすい、そしてバグを招きにくい。\u003Cbr>文章にも同じことが言えます。\u003Cstrong>文章は簡潔に\u003C/strong>。一つの文には一つだけ意図を持たせるようにし、複数の意図を含む、もしくは、文章が長くなってしまうときには文を分けたり、\u003Cstrong>リスト\u003C/strong>にするのが良いでしょう。\u003Cbr>\u003Cbr>余計な表現を使わないことも大切です。\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cem>at this point in time → now\u003C/em>\u003C/li>\u003Cli>\u003Cem>determine the location of → find\u003C/em>\u003C/li>\u003Cli>\u003Cem>is able to → can\u003C/em>\u003C/li>\u003C/ul>\n\n\u003Cbr>英語の例ですが、意味が通るのであればこのように短い表現を使いましょう。\u003Cbr>\u003Cbr>\n\n\u003Ch2>\u003Ca href=\"https://developers.google.com/tech-writing/one/lists-and-tables\" target=\"_blank\" rel=\"noreferrer noopener\">リストと表\u003C/a>\u003C/h2>\n\n先ほどリストの話がチラッと出ましたが、\u003Cbr>リストには、\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>箇条書き\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>番号付き\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>埋め込み\u003C/strong>\u003C/li>\u003C/ul>\n\n\u003Cbr>の三つがあります。\u003Cbr>箇条書きはリストの内容が順番を問わないとき、番号付きは順番を考慮する必要があるときに使います。\u003Cbr>埋め込みリストというのは、文章中でカンマ区切りに並べるような書き方のことですが、テクニカルライティングの場合、情報を提示するのに不十分なのでやめた方が良いと言われています。\u003Cbr>\u003Cbr>リストを使用する際は、\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>文法\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>論理的カテゴリー\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>大文字小文字\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>句読点\u003C/strong>\u003C/li>\u003C/ul>\n\n\u003Cbr>を揃えるようにしましょう。\u003Cbr>\u003Cbr>\n\n\u003Ch2>\u003Ca href=\"https://developers.google.com/tech-writing/one/paragraphs\" target=\"_blank\" rel=\"noreferrer noopener\">段落\u003C/a>\u003C/h2>\n\n段落において最も重要なのは、\u003Cstrong>書き出し\u003C/strong>です\u003Cstrong>。\u003C/strong>\u003Cbr>多くの人は二つ目の文を読み飛ばしてしまうので、一文目で読者の関心を引かなればなりません。\u003Cbr>\u003Cbr>\u003Cstrong>一つの段落には一つの主題を\u003C/strong>。主題を外れる文章は削ったり他の段落へ移すように。さらに、段落は短すぎても長すぎてもいけません。３〜５の文から構成するのがベターです。\u003Cbr>\u003Cbr>また、良い段落というのは、読者に対して下の問いに答える段落を言います。\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>読者に伝えたいことは何か\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>読者がそれを知ることはなぜ重要なのか\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>読者はどのようにそれを使えるか、読者はどのようにそれを真だとわかるか\u003C/strong>\u003C/li>\u003C/ul>\n\n\u003Cbr>これらの問いに答えられるような段落構成を目指しましょう。\u003Cbr>\u003Cbr>\n\n\u003Ch2>\u003Ca href=\"https://developers.google.com/tech-writing/one/audience\" target=\"_blank\" rel=\"noreferrer noopener\">読者のことを考える\u003C/a>\u003C/h2>\n\n文章、段落と続いて今度は文章全体の構成についての話です。\u003Cbr>\u003Cbr>良い文章というのは、\u003Cstrong>読むのに必要な知識とスキルから読者の今の知識とスキルを引いたもの\u003C/strong>だと言われています。言い換えると、\u003Cstrong>読者が必要とする情報の中でまだ持っていない物を提供できる文章\u003C/strong>のことです。\u003Cbr>\u003Cbr>つまり、読者の今の知識とスキルを把握していなければ、良い文章が書けません。文章を書く前に、\u003Cstrong>読者を定義\u003C/strong>しましょう。\u003Cbr>\u003Cbr>まず、どのような役割(ソフトウェアエンジニア、科学者、マネージャーなど)を持った人向けなのか。役割を定義することで、持っているスキルや知っている情報の範囲が想像できます。その際、どれぐらいの年月そのスキルを学んでいるかを考慮することも重要です。\u003Cbr>\u003Cbr>続いて、\u003Cstrong>読者が何を学ばないといけないのか\u003C/strong>をリスト化します。\u003Cbr>\u003Cbr>そこまで考えてから文章を書くようにしましょう。\u003Cbr>書くうえで気をつけないといけないのは、\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>読者の好奇心を満たすように書く\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>読者のボキャブラリーに合わせる\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>簡単な言葉を使う\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>熟語・慣用表現に気を付ける(別に国では通じないかもしれない)\u003C/strong>\u003C/li>\u003C/ul>\n\n\u003Cbr>以上の点です。\u003Cbr>書き手の独りよがりな文章にならないよう、読者に向けて書くということを意識してください。\u003Cbr>\u003Cbr>\n\n\u003Ch2>\u003Ca href=\"https://developers.google.com/tech-writing/one/documents\" target=\"_blank\" rel=\"noreferrer noopener\">文書\u003C/a>\u003C/h2>\n\n最後は文書(ドキュメント)についてです。\u003Cbr>文書を書き始めるときは、1ページ目に一番労力を割くこと。\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>何について書かれているのか\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>想定されている読者について\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>読者が既に知っていることは何か(読むための前提条件)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>これを読んで読者は何を得るのか\u003C/strong>\u003C/li>\u003C/ul>\n\n\u003Cbr>これらを初めにちゃんと書いておかなければいけません。\u003Cbr>\u003Cbr>それができたら、プログラミングでクラスやメソッドを分けるように、文書を節に分けてください。大きな要素を先に、続いて細かい要素を足していきます。\u003Cbr>そうしたら改めて声に出してみるなどして文章全体を読み直し、初めに書いた目的が達成できているかどうかしっかり確認しましょう。\u003Cbr>\u003Cbr>\n\n\u003Ch2>さらに学ぶには\u003C/h2>\n\n以上が\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://developers.google.com/tech-writing/one\" target=\"_blank\">テクニカルライティング講座１\u003C/a>\u003C/strong>の内容でした。\u003Cbr>もう一つ、\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://developers.google.com/tech-writing/two\" target=\"_blank\">テクニカルライティング講座２\u003C/a>\u003C/strong>があるので、興味がある人はこちらも受講してみてください。\u003Cbr>ちなみに２では、自分で文章を校正するときのやり方や、文章を構造化する方法、図示やサンプルコードの作り方などについて紹介されています。\u003Cbr>\u003Cbr>\u003Ca rel=\"noreferrer noopener\" href=\"https://developers.google.com/style\" target=\"_blank\">Googleのスタイルガイド\u003C/a>を読むのも勉強になるのでおすすめです。\u003Cbr>\u003Ca rel=\"noreferrer noopener\" href=\"https://linecorp.com/ja/\" target=\"_blank\">LINE株式会社\u003C/a>が出している日本語で書かれた\u003Ca rel=\"noreferrer noopener\" href=\"https://engineering.linecorp.com/ja/blog/line-technical-writing-course/\" target=\"_blank\">テクニカルライティング講座\u003C/a>もあるので、よかったらそちらも読んでみてください。","2020-11-12T18:00:18+09:00",{"id":159,"createdAt":160,"updatedAt":161,"publishedAt":162,"revisedAt":161,"title":163,"tag":164,"recommended_articles":174,"eyecatch":175,"heading_list":30,"content2":179,"description":180,"related_articles":181,"recruit":14,"is_html":14,"is_migration":14},"aws-saa-certification","2026-06-19T04:35:15.826Z","2026-06-22T04:55:47.068Z","2026-06-22T04:53:58.852Z","AWS Certified Solutions Architect - Associate を受験した話",[165,167,168,170,172,173],{"id":166},"aws",{"id":10},{"id":169},"security",{"id":171},"welfare",{"id":20},{"id":25},[],{"url":176,"height":177,"width":178},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/981a7c52ce36479e8fdf6085a3443ad5/aws-saa-certification.png",909,1731,"\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>","AWS Certified Solutions Architect - Associate（SAA）の受験について、勉強方法や試験当日の様子、受けてみて感じたことをまとめました。",[182,184,186,187,189,191],{"id":183},"aws-certified",{"id":185},"dynamodb",{"id":71},{"id":188},"security-advisory-cve",{"id":190},"electrician",{"id":98},{"id":71,"createdAt":193,"updatedAt":194,"publishedAt":195,"revisedAt":194,"title":196,"tag":197,"recommended_articles":201,"eyecatch":202,"heading_list":30,"content2":206,"description":207,"related_articles":208,"recruit":14,"is_html":14,"is_migration":14},"2026-04-03T06:01:36.737Z","2026-05-14T08:24:58.578Z","2026-04-16T07:06:01.302Z","UX 検定をきっかけに、UX の考え方を整理してみた",[198,199,200],{"id":116},{"id":20},{"id":25},[],{"url":203,"height":204,"width":205},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/81c9f7a9fe274d6191ae67e096f7daf2/UX.jpg",2819,4229,"\u003Cp>春は無闇に落ち込みます。\u003C/p>\u003Cp style=\"text-align: start\">この記事は、社内イベント「\u003Ca href=\"https://www.s2factory.co.jp/blog/tea/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C/u>\u003C/a>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社の yamada が、\u003Cstrong>UX 検定の受験をきっかけに、UX や人間中心設計\u003C/strong>について発表しました。\u003C/p>\u003Chr>\u003Cp style=\"text-align: start\">\u003Cbr>昨年の11月末に、\u003Cstrong>UX 検定(基礎)を受験\u003C/strong>しました。\u003C/p>\u003Cp>名刺の肩書きに UI デザイナーと書いていることもあり、今後この分野でやっていく以上、\u003Cstrong>UX についての知識はきちんと押さえておきたい\u003C/strong>と思い、その手始めとして受けてみました。\u003Cbr>\u003Cbr>今回は UX 検定の内容をもとに、人間中心設計(HCD)や UX の考え方について整理していきます。\u003C/p>\u003Ch2 id=\"h13d8bb8d79\">UX 検定とは\u003C/h2>\u003Cp>\u003Ca href=\"https://www.uxia.or.jp/certification/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>UX 検定\u003C/strong>\u003C/a>\u003Cstrong>は2022年にスタートした比較的新しい資格\u003C/strong>で、\u003Cstrong>UX や人間中心設計(HCD)の知識を体系的に学ぶ\u003C/strong>ことを前提としたものです。 \u003Cbr>\u003Cbr>今回受けた「基礎」は、UX や HCD の考え方を一通り理解しているかを見る位置づけの試験。 \u003Cbr>基礎については試験単体で受験できますが、\u003Cstrong>上位の「応用」は研修の受講が前提\u003C/strong>となっており、試験だけで進めるものではありません。\u003Cbr>\u003Cbr>また、UX 検定とは別に、\u003Cstrong>人間中心設計に関する資格として「専門家」「スペシャリスト」\u003C/strong>といった認定もありますが、こちらは\u003Cstrong>レポート提出や実務での改善実績\u003C/strong>が求められるなど、より実践寄りの内容になっています。現段階ではまだ難しそうだったので今回は見送りました。\u003Cbr>\u003Cbr>なお、\u003Cstrong>UX 検定と人間中心設計に関する資格は、それぞれ別の団体が運営\u003C/strong>しています。 \u003C/p>\u003Ch3 id=\"h0cf6273d17\">試験に向けて\u003C/h3>\u003Cp>試験に向けては、学習推薦図書 4 冊のうち下の 2 冊を読んで臨みました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.amazon.co.jp/%E3%82%A2%E3%83%95%E3%82%BF%E3%83%BC%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB2-UX%E3%81%A8%E8%87%AA%E7%94%B1-%E8%97%A4%E4%BA%95-%E4%BF%9D%E6%96%87/dp/4296106317\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&media=0&url=https%3A%2F%2Famzn.asia%2Fd%2F07NFcB6F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.amazon.co.jp/%E4%BA%BA%E9%96%93%E4%B8%AD%E5%BF%83%E8%A8%AD%E8%A8%88%E5%85%A5%E9%96%80-HCD%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%83%BC-%E5%B1%B1%E5%B4%8E-%E5%92%8C%E5%BD%A6/dp/476490506X\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Famzn.asia%2Fd%2F0fd0PoCb&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Cp>\u003Cbr>過去問や十分な練習問題は公開されておらず、公式サイトに掲載されているのも問題例が数問ある程度です。 \u003Cbr>そのため、出題形式のイメージを掴みつつ、\u003Cstrong>受験者が作成した予想問題\u003C/strong>も購入して何度か解いて対策。\u003Cbr>\u003Cbr>シラバスも公開されているため、それをもとに AI で内容を整理しながら、全体像を掴むことを意識して進めました。\u003C/p>\u003Ch3 id=\"h25cf28808d\">試験を受けてみて\u003C/h3>\u003Cp>今回はオンラインで自宅から受験しました。\u003Cbr>\u003Cbr>試験自体は、UX や人間中心設計に関する基礎知識が幅広く問われる内容で、特定の分野に偏るというよりも、\u003Cstrong>全体をバランスよく理解しているかを見る印象\u003C/strong>でした。\u003Cbr>\u003Cbr>実際に受けてみると、学習推薦図書からの出題が多かったように思います。\u003Cbr>事前に解いていた予想問題も再現度が高く、個人的にはかなり参考になりました。\u003Cbr>\u003Cbr>\u003Cstrong>結果は項目ごとの得点が表示される形式\u003C/strong>で、どの分野ができていたかは分かる一方で、どこをどう間違えたのかまでは確認できませんでした。 \u003Cbr>無事に合格はできたものの、振り返りのしづらさは少し気になるポイントです。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/2cceb7c904a74dccbb44f00ac01f3678/%E8%A9%A6%E9%A8%93%E7%B5%90%E6%9E%9C.png?w=650&h=581\" alt=\"試験結果\" width=\"650\" height=\"581\">\u003C/figure>\u003Cp>\u003Cbr>\u003Cstrong>合格すると、証書やロゴをダウンロード\u003C/strong>でき、名刺などに掲載することもできます。\u003Cbr>ただ、基礎だと少し物足りなさもあるので、応用に合格した際には使ってみてもいいかもしれません。\u003C/p>\u003Ch2 id=\"h9152cc286e\">UXと人間中心設計について\u003C/h2>\u003Cp>せっかくなので、UX(ユーザーエクスペリエンス)の考え方の土台となる人間中心設計(HCD)についても基本的な考え方を整理しておきます。\u003Cbr>\u003Cbr>UX は\u003Cstrong>「ユーザーがどんな体験をしたか」\u003C/strong>という全体の話で、単に使いやすいかどうかだけではなく、\u003Cstrong>その体験が良かったかどうか\u003C/strong>まで含めて考えます。\u003Cbr>\u003Cstrong>ユーザビリティ(使いやすさ)\u003C/strong>やユーザー視点で課題解決を考える\u003Cstrong>デザイン思考\u003C/strong>といった考え方も含め、その\u003Cstrong>ベースにあるのが人間中心設計(HCD)\u003C/strong>です。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/70d85d9a84f14358a785504abb03148f/UX%E3%81%A8%E4%BA%BA%E9%96%93%E4%B8%AD%E5%BF%83%E8%A8%AD%E8%A8%88%E3%81%AE%E9%96%A2%E4%BF%82%E5%9B%B3.png?w=750&h=409\" alt=\"UXと人間中心設計について\" width=\"750\" height=\"409\">\u003C/figure>\u003Cp>\u003Cbr>人間中心設計は、ユーザーを中心に考えて設計を進めるための考え方やプロセスのことを指します。\u003C/p>\u003Ch3 id=\"h4139147f5a\">HCDサイクルとは\u003C/h3>\u003Cp>人間中心設計には「HCD サイクル」と呼ばれる考え方があります。\u003Cbr>\u003Cbr>これは、\u003Cstrong>使いやすさや体験の質を継続的に改善していくためのプロセス\u003C/strong>です。 \u003Cbr>PDCA サイクルに近い考え方ですが、よりユーザー視点に寄せたものになっています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/d36a72888d7c4b879b66dc5710b34fe5/Gemini_Generated_Image_cr5u3jcr5u3jcr5u%20(2).png?w=750&h=409\" alt=\"HCDサイクルとは\" width=\"750\" height=\"409\">\u003C/figure>\u003Cp>\u003Cbr>流れとしては、以下のステップを繰り返していきます。\u003C/p>\u003Col>\u003Cli>\u003Cstrong>状況を把握する(ユーザー調査や観察)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>要求を整理する(要件定義やペルソナ設計)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>設計して解決案を作る\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>評価する(テストや検証)\u003C/strong>\u003C/li>\u003C/ol>\u003Cp>これを繰り返していくことで、プロダクトを改善していきます。\u003C/p>\u003Cp>こうした改善を進めるうえでは、ユーザビリティをはじめとして、UX に関するさまざまな考え方やモデルを整理して捉えておくことも重要です。ここからは、それらの基本的な概念について順に見ていきます。\u003C/p>\u003Ch3 id=\"hb9c3f7e049\">ユーザビリティ\u003C/h3>\u003Cp>人間中心設計を考えるうえで重要な要素のひとつが「ユーザビリティ」です。\u003Cbr>\u003Cbr>ユーザビリティは、\u003Cstrong>製品やサービスの「使いやすさ」を測るための指標\u003C/strong>で、主に次の3つの観点で捉えられます。\u003C/p>\u003Cul>\u003Cli>有効さ：目的を正しく達成できるか\u003C/li>\u003Cli>効率：少ない手間や時間で達成できるか\u003C/li>\u003Cli>満足度：使っていて不快でないか、納得感があるか\u003C/li>\u003C/ul>\u003Cp>この考え方は、\u003Cstrong>ISO 9241-11 で定義\u003C/strong>されており、ユーザビリティは\u003Cstrong>「特定の利用者が、特定の目的を達成するにあたり、特定の状況で、どれだけ有効・効率的かつ満足できるかの度合い」\u003C/strong>とされています。\u003Cbr>\u003Cbr>このユーザビリティの考え方は1990年代から整理されてきたもので、1998年の ISO 9241-11 をベースに現在の UX の考え方へと発展してきました。\u003C/p>\u003Ch3 id=\"h3fc3754f44\">ユーザーエクスペリエンス\u003C/h3>\u003Cp>\u003Cstrong>ユーザビリティが「ユーザーが目的を達成できたかどうか」を重視\u003C/strong>するのに対し、\u003Cstrong>UX は「その体験が良いものだったかどうか」を重視\u003C/strong>します。\u003Cbr>サービスやプロダクトを認知してから、実際に体験し、その後に振り返るまでの一連の流れすべてがUXに含まれます。\u003Cbr>\u003Cbr>UX にはさまざまな考え方やモデルがありますが、ここではいくつか代表的なものを見てみましょう。\u003Cbr>\u003Cbr>\u003C/p>\u003Ch4 id=\"h381e44aade\">\u003Cstrong>UX のハニカム構造\u003C/strong>\u003C/h4>\u003Cp>\u003Cstrong>UX を構成する要素を 7 つに分けたモデル\u003C/strong>です。\u003Cbr>\u003Cstrong>使いやすさだけでなく、有用性や信頼性、魅力といった観点\u003C/strong>も含まれています。\u003Cbr>\u003Cbr>体験に当てはめると一見当たり前に見えますが、すべてを満たすのは意外と難しく、\u003Cstrong>良い体験を考えるうえで欠かせない基準\u003C/strong>になります。\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/f3167ef6f73a4ab48c0c580a3481a708/%E3%83%8F%E3%83%8B%E3%82%AB%E3%83%A0%E6%A7%8B%E9%80%A0.png\" alt=\"\" width=\"1408\" height=\"768\">\u003C/figure>\u003Cp>\u003C/p>\u003Ch4 id=\"h4416745511\">\u003Cbr>\u003Cstrong>UXの 5 階層モデル\u003C/strong>\u003C/h4>\u003Cp>\u003Cstrong>UXの構成要素を 5 つの層で整理したモデル\u003C/strong>です。\u003C/p>\u003Cul>\u003Cli>戦略：ユーザーのニーズとビジネスの目的 \u003C/li>\u003Cli>要件：必要な機能やコンテンツ \u003C/li>\u003Cli>構造：情報設計や導線 \u003C/li>\u003Cli>骨格：レイアウトやインターフェース \u003C/li>\u003Cli>表層：ビジュアルデザイン\u003C/li>\u003C/ul>\u003Cp>\u003Cstrong>ウェブ構築では、表層のビジュアルだけでなく、その下にある構造や要件まで含めて設計\u003C/strong>する必要があります。\u003Cbr>\u003Cbr>デザイナーは結果としての体験そのものを直接つくることはできませんが、その体験が良くなるように設計することはできます。 つまり、\u003Cstrong>結果ではなく、その手前の設計によってUXを形づくっていくという考え方\u003C/strong>になります。\u003Cbr>\u003Cbr>\u003C/p>\u003Ch4 id=\"he4c02a1baa\">ハッセンツァール\u003Cstrong>モデル\u003C/strong>\u003C/h4>\u003Cp>\u003Cstrong>デザイナー視点とユーザー視点の流れを整理したモデル\u003C/strong>です。\u003Cbr>\u003Cbr>\u003Cstrong>デザイナーは、機能や表現、インタラクションといった「意図された性質」を設計\u003C/strong>します。 \u003Cbr>一方で\u003Cstrong>ユーザーは、それをもとに体験をし、「魅力」や「満足」といった結果\u003C/strong>を受け取ります。\u003Cbr>\u003Cbr>つまり、デザイナーとユーザーでは見ているものが異なります。\u003Cbr>\u003Cbr>デザイナーが直接つくれるのは体験そのものではなく、その手前にある設計の部分です。 \u003Cbr>結果としての体験はユーザー側で生まれるものですが、そこにつながるように設計することはできます。\u003Cbr>\u003Cbr>\u003C/p>\u003Ch4 id=\"h9644a53fee\">\u003Cstrong>UXを時間で捉える(UX白書)\u003C/strong>\u003C/h4>\u003Cp>UX は時間の流れの中でも変化します。\u003C/p>\u003Cul>\u003Cli>予期的 UX：サービスを知ったときに抱く印象や期待 \u003C/li>\u003Cli>一時的 UX：利用しているときの体験 \u003C/li>\u003Cli>エピソード的 UX：利用後の振り返り \u003C/li>\u003Cli>累積的 UX：全体を通して形成される印象 \u003C/li>\u003C/ul>\u003Cp>例えば飲食店であれば、来店前の期待、食事中の体験、帰宅後の満足感まで含めてUXといえます。\u003Cbr>このように、\u003Cstrong>UX は単一の瞬間ではなく、要素・構造・時間の積み重ね\u003C/strong>によって成り立ってるのです。\u003C/p>\u003Ch3 id=\"h0ae0492e09\">デザイン思考\u003C/h3>\u003Cp>いろんな企業や自治体で「デザイン思考」という言葉が使われるようになって久しいですが、これはデザイナーだけのものではなく、さまざまな場面で活用される考え方です。\u003Cbr>デザイン思考では、\u003Cstrong>最初から答えを出そうとするのではなく、課題を探しながら解決していくプロセスを重視\u003C/strong>します。\u003C/p>\u003Cp>代表的なモデルのひとつに「\u003Cstrong>ダブルダイヤモンドモデル\u003C/strong>」があります。\u003Cbr>これは、まずアイデアを広く出して課題を見つけ(発散)、そこから重要な問題に絞り込む(収束)。  \u003Cbr>次に、その問題に対する解決案を再び広げ(発散)、最適な案に絞る(収束)という流れで進めていくものです。\u003C/p>\u003Cp>また、デザイン思考は次のようなプロセスとして整理されることもあります。\u003C/p>\u003Col>\u003Cli>理解：インタビューや観察を通してユーザーを知る  \u003C/li>\u003Cli>定義：どこに問題があるのかを整理する  \u003C/li>\u003Cli>発想：ブレストなどでアイデアを広げる  \u003C/li>\u003Cli>試作：アイデアを形にする  \u003C/li>\u003Cli>テスト：ユーザーの反応を見て検証する  \u003C/li>\u003C/ol>\u003Cp>これらを一度で終わらせるのではなく、\u003Cstrong>繰り返しながら精度を高めていくことが重要\u003C/strong>です。\u003C/p>\u003Ch2 id=\"ha214098e44\">まとめ\u003C/h2>\u003Cp>UX にはさまざまなモデルやフレームワークがあり、どれが正解というよりも、\u003Cstrong>状況に応じて使い分けながら試していくことが大切\u003C/strong>だと感じました。\u003Cbr>\u003Cbr>今回あらためて整理してみて、UX やデザイン思考に共通しているのは、\u003Cstrong>「調査 → 要件定義 → アイデア出し → 試作 → テスト」といったプロセスを、一度で終わらせるのではなく、行き来しながら繰り返していくという姿勢\u003C/strong>だと実感しています。\u003Cbr>とにかく一度つくって終わりではなく、プロセスを回し続けて改善していくこと。その考え方が根底にあるのが UX なのだと思います。\u003Cbr>\u003Cbr>まだ知識として学んでいる段階で、自分の中で体系立てて整理しきれていない部分も多いですが、実務の中で使いながら理解を深めていきたいです。\u003Cbr>\u003Cbr>\u003Cstrong>ちょうど現在、UX 検定の申込受付期間(試験は7月)\u003C/strong>でもあるので、興味がある方はこのタイミングで受けてみるのも良いかもしれません。\u003C/p>","UX検定（基礎）の受験をきっかけに、UXや人間中心設計（HCD）について整理しました。受験までの流れや学習内容に加え、ユーザビリティ、UX、デザイン思考などの基本的な考え方についてまとめています。",[209,210,211,213,214,216],{"id":50},{"id":73},{"id":212},"studio-design-gallery",{"id":96},{"id":215},"moving2023-specialsite",{"id":217},"newyear2025",{"id":183,"createdAt":219,"updatedAt":220,"publishedAt":219,"revisedAt":220,"title":221,"tag":222,"recommended_articles":227,"eyecatch":228,"heading_list":14,"related_articles":232,"recruit":14,"is_html":30,"html_contents":233,"is_migration":30,"migration_date":234},"2023-06-02T08:50:09.984Z","2023-08-07T04:05:38.318Z","AWS 認定受験記",[223,224,225,226],{"id":166},{"id":45},{"id":10},{"id":25},[],{"url":229,"height":230,"width":231},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/343924326e7e4236bda613e6950845c0/2023-02-f41782c1dc3bffb43df989b5f2ae0728.png",1006,1956,[],"今回は弊社の小林が昨年の8月に受けた\u003Cstrong>「AWS 認定受験」\u003C/strong>について話しました。\u003Cbr>\n\n\u003Cp style=\"font-size:16px\">\u003Cmark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">※情報は2022年8月頃のものです。現在の状況とは異なる場合があります。\u003C/mark>\u003C/p>\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"/>\n\n\n\u003Cbr>昨年 AWS の認定試験を受験しました。\u003Cbr>今回は AWS 認定試験について、どういう勉強をしたのか、どんな試験内容だったのかを簡単に紹介できればと思います。\u003Cbr>\u003Cbr>\n\n\u003Ch2>AWS 認定試験について\u003Cbr>\u003Cbr>\u003C/h2>\n\n\u003Cblockquote class=\"wp-block-quote\">\nAWS 認定はクラウドの専門知識を検証することで、専門家は需要の高いスキルを示し、組織は AWS を使ったクラウドイニシアチブにおいて効率的かつ革新的なチームを構築するのに役立ちます。個人やチームが独自の目標を達成できるように、役割と専門分野ごとに設計したさまざまな認定試験から選択します。\u003Cbr>\u003Cbr>\n\u003Ccite>出典：\u003Ca rel=\"noreferrer noopener\" href=\"https://aws.amazon.com/jp/certification/?th=sec&sec=certified\" target=\"_blank\">AWS 認定\u003C/a>\u003C/cite>\u003C/blockquote>\n\n\u003Cbr>AWS 認定試験は、\u003Cstrong>AWS により実施されているベンダー試験\u003C/strong>です。合格することで資格が取得でき、AWS 上でアプリケーションやサービスの開発を行うための知識やスキルを持っていることが証明できます。\u003Cbr>\u003Cbr>認定資格には、\u003Cbr>\u003Cbr>\n\n\u003Cul>\n\u003Cli>\u003Cstrong>FOUNDATION\u003C/strong>AL\u003C/li>\n\n\u003Cli>\u003Cstrong>ASSOCIATE\u003C/strong>\u003C/li>\n\n\u003Cli>\u003Cstrong>プロフェッショナル\u003C/strong>\u003C/li>\n\n\u003Cli>\u003Cstrong>専門知識\u003C/strong>\u003C/li>\n\u003C/ul>\n\n\u003Cbr>の 4 つのレベルがあって、それぞれの\u003Cstrong>レベルと分野別に 12 種類の資格\u003C/strong>を取得可能です。\u003Cbr>\u003Cbr>このような IT 試験には IPA のように国が実施しているものや、\u003Ca rel=\"noreferrer noopener\" href=\"https://www.oracle.com/jp/\" target=\"_blank\">Oracle\u003C/a> や \u003Ca rel=\"noreferrer noopener\" href=\"https://www.cisco.com/c/ja_jp/training-events/training-certifications/exams.html\" target=\"_blank\">CCNA\u003C/a> などの企業系のものがありますが、\u003Cstrong>企業系のものは大体受験料が高い\u003C/strong>です。AWS もその例に漏れず…。\u003Cbr>\u003Cbr>ちなみに\u003Cstrong>有効期間は 3 年\u003C/strong>なので、3 年以内に同じ科目を再受験するか、更に上位の資格を取得しなければ失効します。\u003Cbr>\u003Cstrong>受験は基本的にオンライン\u003C/strong>です。が、試験会場を選択して受験することもできます。調べてみたところ、テストセンターというものが各地にあるようでした。ちなみに私は自宅からオンラインで受けました。\u003Cbr>\u003Cbr>\n\n\u003Ch2>受験準備\u003C/h2>\n今回、私が受験したのは \u003Cstrong>「\u003Ca rel=\"noreferrer noopener\" href=\"https://aws.amazon.com/jp/certification/certified-solutions-architect-associate/?ch=sec&sec=rmg&d=1\" target=\"_blank\">Solutions Architect\u003C/a>」\u003C/strong>という資格です。\u003Cbr>流れとしては、2 週間ほど勉強した時点で申込みをして、その 2 週間後に受験したといった感じです。\u003Cbr>\u003Cbr>\n\n\u003Ch3>学習のために使ったもの\u003C/h3>\n\nこれらを学習に使用しました。\u003Cbr>\u003Cbr>\n\n\u003Cul>\n\u003Cli>\u003Ca rel=\"noreferrer noopener\" href=\"https://www.amazon.co.jp/AWS%E8%AA%8D%E5%AE%9A%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88-AWS%E8%AA%8D%E5%AE%9A-%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%88-%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%82%A4%E3%83%88-NRI%E3%83%8D%E3%83%83%E3%83%88%E3%82%B3%E3%83%A0%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE/dp/479739739X\" target=\"_blank\">\u003Cstrong>AWS認定資格試験テキスト AWS認定 ソリューションアーキテクスト-アソシエイト\u003C/strong>\u003C/a>\n\u003Cul>\n\u003Cli>書籍。 2 週間ほどで読み終えた。大まかに試験内容を予習するのには役立った。\u003C/li>\n\u003C/ul>\n\u003C/li>\n\n\u003Cli>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://aws.amazon.com/jp/training/digital/\" target=\"_blank\">AWS Skill Builder\u003C/a>\u003C/strong>\n\u003Cul>\n\u003Cli>AWS が自前で用意している学習サイト。一部が無料で学習できる。\u003C/li>\n\u003C/ul>\n\u003C/li>\n\n\u003Cli>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://ping-t.com/\" target=\"_blank\">Ping-t\u003C/a>\u003C/strong>\n\u003Cul>\n\u003Cli>IT 試験対策サイト。\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\n\u003Cbr>初めに書籍を購入して勉強したのですが、それだけでは不安だったので学習サイトも利用しました。\u003Cbr>特によかったのは Ping-t です。ログインすれば、SAA なら無料で400問の模擬試験が受けられます。本には書いていないような最近の機能やニッチなところまで網羅されていたのでずっとこれをやってました。\u003Cbr>\u003Cbr>\n\n\u003Ch3>申込み\u003C/h3>\n\n\u003Ca rel=\"noreferrer noopener\" href=\"https://www.aws.training/Certification/\" target=\"_blank\">認定サイト\u003C/a>にログインして受験の申込みを行いました。\u003Cbr>Amazon のアカウントに紐付けてログインできます。\u003Cbr>\u003Cbr>\n\n\u003Cfigure class=\"wp-block-image aligncenter size-large is-resized\">\u003Ca href=\"https://www.aws.training/Certification/\">\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/3e2f534e71ac427d8795b4c3b30b1416/2023-02-d9a9dc2d845e798eed5aa2aeca79a734.png\" alt=\"\" class=\"wp-image-16004\" width=\"415\" height=\"401\"/>\u003C/a>\u003C/figure>\n\n\u003Cbr>サインインすると、受験日時の選択と、\u003Cstrong>PSI とピアソンの 2 種類の試験サービスからどちらかを選ばせられます。\u003C/strong>ちなみに平日日中のみしか日時は選べません。\u003Cbr>\u003Cbr>\n\n\u003Cul>\n\u003Cli>\u003Cstrong>PSI\u003C/strong>\n\u003Cul>\n\u003Cli>\u003Cstrong>案内が全て英語のみ。試験は日本語選択可能。\u003C/strong>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\n\u003Cli>\u003Cstrong>ピアソン\u003C/strong>\n\u003Cul>\n\u003Cli>\u003Cstrong>案内も試験も日本語選択可能。\u003C/strong>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\n\u003Ch2>試験当日\u003C/h2>\n\n試験 15 分前から試験サイトにアクセスできます(試験サイトには AWS 認定サイトの管理画面から遷移)。\u003Cbr>\u003Cbr>事前に \u003Cstrong>PC のカメラやマイクなどの動作確認\u003C/strong>をやります。そうしたらサイトに表示されている QR コードを読み込んでそこから\u003Cstrong>スマートフォンで身分証や試験会場の周囲の写真を送る\u003C/strong>ようにという指示が出ます。\u003Cbr>\u003Cbr>試験会場周囲の写真ですが、自宅だったので PC 周りを撮影して送りました。この時に、使わないディスプレイは机の上に置かないようにという注意がありました。なので頑張って外したのですが、もしかしたら上から布を被せておくとかでもよかったのかもしれません。。\u003Cbr>\u003Cbr>ここまでのチェックが完了すると、\u003Cstrong>チャット画面\u003C/strong>が開きます。\u003Cbr>「試験官から書き込みがあるまで待機してください」というような表示が出ているので待機するのですが、同じ時間帯に受験している人が多いからなのか順番に一人ずつ案内していく形式だったのか待ちの時間が長かったです。\u003Cbr>\u003Cbr>チャット画面では、\u003Cbr>\u003Cbr>\n\n\u003Cul>\n\u003Cli>\u003Cstrong>試験開始後にカメラから外れたら強制終了\u003C/strong>\u003C/li>\n\n\u003Cli>\u003Cstrong>試験開始後にカメラに無関係の人が映ったら強制終了\u003C/strong>\u003C/li>\n\n\u003Cli>\u003Cstrong>理解できたらカメラに向かって両手で○をつくれ\u003C/strong>\u003C/li>\n\n\u003Cli>\u003Cstrong>カメラを移動させて机を全部見せろ\u003C/strong>\u003C/li>\n\u003C/ul>\n\n\u003Cbr>などの案内や質問をされました。確認項目の度に○をつくらされるのですが、反応が遅いので○のポーズのまま待機する時間が多かったように思います。\u003Cbr>\u003Cbr>大体ここまでで待機時間抜きで20分程度かかりました。\u003Cbr>\u003Cbr>\n\n\u003Ch2>試験内容について\u003C/h2>\n\n\u003Cstrong>問題は 4~6 択の中から一つ以上を選ぶ選択式で65問\u003C/strong>あります。\u003Cbr>\u003Cbr>書籍で学んで出てきたことは 3~4 割ぐらいでした。一方で学習サイトで勉強したことは約 4 割程度。\u003Cbr>学習サイトも利用していてよかったです。\u003Cbr>\u003Cbr>問題としては、ネットワークのセキュリティグループの組み合わせを作らせる問題が多かったように思います。あとは \u003Ca rel=\"noreferrer noopener\" href=\"https://ja.wikipedia.org/wiki/Kubernetes\" target=\"_blank\">Kubernetes\u003C/a> 関係の話もよく出てきました。\u003Cbr>\u003Cbr>\u003Cstrong>回答が終了すると最後のページに振り返り画面があるのですが、問題文が書いていない\u003C/strong>のでどこに戻ればいいのかがわかりません。。\u003Cbr>一応問題を解いている最中に「後で解く」ボタンが設置されていたので、それにチェックを入れておけばよかったのかもしれません。これから受験を考えている人は是非有効活用してみてください。\u003Cbr>\u003Cbr>\n\n\u003Ch3>試験終了後\u003C/h3>\n\n試験を終了して提出すると、\u003Cstrong>即時結果が発表\u003C/strong>されます。無事合格できていました。\u003Cbr>\u003Cbr>\n\n\u003Cfigure class=\"wp-block-image aligncenter size-large is-resized\">\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/343924326e7e4236bda613e6950845c0/2023-02-f41782c1dc3bffb43df989b5f2ae0728.png\" alt=\"\" class=\"wp-image-16047\" width=\"606\" height=\"312\"/>\u003C/figure>\n\n\u003Cbr>合格すると 3 年間、SAA 合格者であることが名乗れます。\u003Cbr>さらに、認定バッチが確認できるようになり、\u003Cstrong>次回の試験が 50%OFF で受けられる\u003C/strong>とか、\u003Cstrong>AWS 認定グッズが購入できる\u003C/strong>ようになったり、\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://aws.amazon.com/jp/summits/japan/\" target=\"_blank\">AWS SUMMIT\u003C/a> などのイベントで AWS 認定者専用ラウンジに入れるよう\u003C/strong>になるなどの特典が受けられます。\u003Cstrong>合格しないとグッズは買えない\u003C/strong>みたいです。\u003Cbr>\u003Cbr>\n\n\u003Cfigure class=\"wp-block-image aligncenter size-large is-resized\">\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/04355fa5313a48ec8cf32bc661c6ce7b/2023-02-ab662c6d4cab15780a947080fcaea656.png\" alt=\"\" class=\"wp-image-16054\" width=\"504\" height=\"394\"/>\u003C/figure>\n\n\u003Cbr>不合格の場合でも、2 週間後から試験が受けられるようです。\u003Cbr>\u003Cbr>\n\n\u003Ch2>今後について\u003C/h2>\n\nせっかく一つ資格が取れたので、プロフェッショナル資格についても挑戦しようと思っています。なのでもうちょっと踏み込んで勉強していくつもりです。\u003Cbr>\u003Cbr>また、AWS とは別で \u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://www.hashicorp.com/certification/terraform-associate\" target=\"_blank\">Terraform Associate\u003C/a> というTerraform がやっている認定資格\u003C/strong>もあるので、そちらも取りたいなと思っています。AWS 認定資格に比べて半額程度で受験できるのですが、その分 2 年で失効してしまいます。\u003Cbr>\u003Cstrong>案内も問題も全て英語\u003C/strong>な上、合格記を読む限りでは\u003Cstrong>試験官と英語で口頭のやりとり\u003C/strong>も行わなければいけない、加えて実技もあるそうなので少し大変そうです。\u003Cbr>\u003Cbr>今後も折を見て資格取得に励んでいこうと思います。","2023-02-28T18:28:22+09:00",{"id":190,"createdAt":236,"updatedAt":237,"publishedAt":236,"revisedAt":237,"title":238,"tag":239,"recommended_articles":245,"eyecatch":246,"heading_list":14,"related_articles":248,"recruit":14,"is_html":30,"html_contents":249,"is_migration":30,"migration_date":250},"2023-06-02T08:49:04.959Z","2023-08-07T17:18:33.513Z","電気工事士の話",[240,241,242,243,244],{"id":25},{"id":45},{"id":85},{"id":20},{"id":10},[],{"url":247,"height":153,"width":154},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/2a6fe8d38412480b97d88b425c7e61f6/2021-05-electricity-3962788_1280.jpg",[],"今回は弊社の工藤が\u003Cstrong>「電気工事士」\u003C/strong>について話しました。\n\n\u003Chr class=\"wp-block-separator\"/>\n\n\n\u003Cbr>私は第二種電気工事士の資格を持っているのですが、今度社内でも受験を考えている人がいるという話があったので、今回は電気工事士について一体どういう資格なのか、第二種電気工事士を中心に紹介したいと思います。\u003Cbr>\u003Cbr>\n\n\u003Ch2>電気工事士とは\u003C/h2>\n\nまず始めに電気工事士とは。\u003Cbr>\u003Cbr>\n\n\u003Cp class=\"ticss-151099ca has-vivid-red-color has-text-color has-background\" style=\"background-color:#eeeeee\">\u003Cbr>電気工事の作業に従事するために電気工作物の工事に関する専門的な知識と技能を有する者に与えられる国家資格であり、またその免状を都道府県知事により交付されている者である。電気工事士には第一種電気工事士と第二種電気工事士とがある。\u003Cbr>\u003Cbr>\u003C/p>\n\n\u003Cp class=\"has-text-align-center\" style=\"font-size:14px\">出典：\u003Ca href=\"https://ja.wikipedia.org/wiki/%E9%9B%BB%E6%B0%97%E5%B7%A5%E4%BA%8B%E5%A3%AB\" target=\"_blank\" rel=\"noreferrer noopener\">電気工事士\u003C/a>\u003C/p>\n\n\u003Cbr>皆様が普段住んでいる家や利用しているオフィスのコンセントや壁の中の配線、道路のあちこちに立っている電柱にかかっている電線を工事するのが大まかな仕事です。\u003Cstrong>電力を必要とする施設のほとんどを電気工事士が施工\u003C/strong>しています。\u003Cbr>\u003Cbr>\n\n\u003Ch2>電気工事士ができること\u003C/h2>\n先ほどの引用内にもあったように\u003Cstrong>「電気工事士には第一種電気工事士と第二種電気工事士」\u003C/strong>とがあり、\u003Cbr>それぞれの資格に応じて施行できる範囲が異なります。\u003Cbr>\u003Cbr>ざっとした説明になりますが、\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>第二種\u003C/strong>\u003Cbr>\u003Cbr>一般用電気工作物と呼ばれる、一般家屋や小規模な商店、600V以下で受電する電気設備などを対象に、例えば、コンセントや引掛シーリングとその周り(リビングの天井についているシーリングライトなど)、ケーブルやブレーカーの交換などが可能。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>第一種\u003C/strong>\u003Cbr>\u003Cbr>600V以下で使用する500kW未満の自家用電気工作物(中小規模の工場、ビル、高圧受電の商業施設など)と600V以下で受電する電気設備等が対象です。例えば、\u003Ca rel=\"noreferrer noopener\" href=\"https://cubicle-hoan.jp/about_cubicle.html\" target=\"_blank\">キュービクル\u003C/a>と呼ばれる変電設備を持つコンビニエンスストア内の照明やコンセントなどの電気工作物が施工できます。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>ネオン設備や\u003Ca rel=\"noreferrer noopener\" href=\"https://www.denyo.co.jp/products/generator/emergency/\" target=\"_blank\">非常用発電設備\u003C/a>の施工には特殊電気工事資格が別に必要になります。\u003C/strong>\u003Cbr>詳しくは\u003Ca rel=\"noreferrer noopener\" href=\"https://hamanotechnicalworks.com/electrical-work-scope.php\" target=\"_blank\">こちら\u003C/a>をご覧になってみてください。\u003Cbr>\u003Cbr>これらの資格を持っていると、持ち家でDIYの一つとしてコンセントを増設したり、電球や蛍光灯の数を増やしたり、やろうと思えばそういったことができるので便利かもしれません。\u003Cbr>さらに、電気工事士の資格を持っていると、消防設備士の資格など、他の資格を受けるときに若干免除してもらえる場合があったりします。\u003Cbr>\u003Cbr>\n\n\u003Ch2>取得するには\u003C/h2>\n\n取得するには\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https://www.shiken.or.jp/index.html\" target=\"_blank\">電気技術者試験センター\u003C/a>\u003C/strong>によって第一種なら年一回、第二種なら年に二回、上期と下期に分けて行われている\u003Cstrong>試験に合格\u003C/strong>しなければなりません。両方とも\u003Cstrong>筆記と技能\u003C/strong>の試験があります。\u003Cbr>\u003Cbr>\n\n\u003Ch3>第二種試験について\u003C/h3>\n\n\u003Ch4>筆記試験\u003C/h4>マークシート方式で「\u003Cstrong>イ・ロ・ハ・ニ」の四択\u003C/strong>です。\u003Cbr>\u003Cstrong>電気基礎や法令、施工に用いる工具、電気器具の名称、配線図などの問題\u003C/strong>が出題されます。\u003Cbr>\u003Cbr>\u003Ca rel=\"noreferrer noopener\" href=\"https://www.shiken.or.jp/answer/index_list.php?exam_type=50\" target=\"_blank\">過去問\u003C/a>は公式から一般公開されているので気になる方、受験を考えている方はそちらをご覧になってみてください。\u003Cbr>筆記試験用の\u003Ca rel=\"noreferrer noopener\" href=\"https://www.amazon.co.jp/s?k=%E9%9B%BB%E6%B0%97%E5%B7%A5%E4%BA%8B%E5%A3%AB&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&ref=nb_sb_noss_1\" target=\"_blank\">参考書など\u003C/a>も色々販売されています。\u003Cbr>\u003Cbr>\n\u003Ch4>技能試験\u003C/h4>\n筆記試験に合格したら次は技能試験です。\u003Cbr>試験会場で\u003Cstrong>配られる部品と配線図で、実際に電気工作物を施工\u003C/strong>します。完成したらそれを提出してすぐさま退出です。\u003Cbr>作業結果しか見られないので、どうやって施工するかは各々の自由です。\u003Cbr>\u003Cbr>そして実は、技能試験は\u003Cstrong>出題される問題が事前に公表\u003C/strong>されます。\u003Cbr>例えば\u003Ca rel=\"noreferrer noopener\" href=\"https://www.shiken.or.jp/ginouanswerK/ginou20201212.html\" target=\"_blank\">これ\u003C/a>は昨年のものですが、このように試験問題があらかじめ公開され、当日その中から1問が出題されます。\u003Cbr>今のところ毎回そういう仕組みで実施されているので、どうしても受かりたいという人は全部の問題をしっかりと予習しておけばいいと思います。\u003Cbr>\u003Cbr>ちなみに、\u003Cstrong>\u003Cspan class=\"has-inline-color has-vivid-red-color\">技能試験では自分で工具を持参\u003C/span>\u003C/strong>しなければいけません。\u003Cbr>最低限これは持ってきてくださいといったアナウンスが事前にあるので、買い揃えるようにしておきましょう。\u003Cbr>Amazonなどで「\u003Ca rel=\"noreferrer noopener\" href=\"https://www.amazon.co.jp/s?k=2%E7%A8%AE%E9%9B%BB%E6%B0%97%E5%B7%A5%E4%BA%8B%E5%A3%AB+%E5%AE%9F%E6%8A%80&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=D9S6KCM7P43F&sprefix=2%E7%A8%AE%E9%9B%BB%E6%B0%97%2Caps%2C249&ref=nb_sb_ss_ts-doa-p_1_4\" target=\"_blank\">\u003Cstrong>2種電気工事士 実技\u003C/strong>\u003C/a>」とか検索すれば試験用にセットになった工具が出てくるので、それを買えばいいと思います。\u003Cbr>意外と値段は張りますが、練習用のセットも余分についてくるので、まあ買って損はないかと。\u003Cbr>\u003Cbr>試験当日は失敗しても大丈夫なよう少し余分に部品はもらえますが、\u003Cstrong>慌てず焦らず、適切な工具と部品を選び集中して作業するように\u003C/strong>しましょう。試験に限った話ではありませんが。\u003Cbr>\u003Cbr>\u003Cbr>簡単に説明しましたが以上になります。\u003Cbr>電気工事士の資格がないと基本的に電気周りの修理や改造は行ってはいけません。違反すると罰金や懲役の対象になるそうです。特に持ち家のある人はこの資格を持っておくと自分で簡単な工事ができたり色々と便利だと思うので、取得を考えてみてはいかがでしょうか。","2021-05-27T11:34:52+09:00",{"id":252,"createdAt":253,"updatedAt":254,"publishedAt":253,"revisedAt":254,"title":255,"tag":256,"recommended_articles":263,"eyecatch":264,"heading_list":14,"related_articles":268,"recruit":14,"is_html":30,"html_contents":269,"is_migration":30,"migration_date":270},"hunting","2023-06-02T08:49:44.981Z","2023-08-07T04:32:07.806Z","狩猟を始めてみたけど始まってない話",[257,259,260,261],{"id":258},"life",{"id":25},{"id":85},{"id":262},"animal",[],{"url":265,"height":266,"width":267},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/796c61546d794bd8a6dfa6afb107ed43/2022-05-sebastian-pociecha-rpz2I7UGtVM-unsplash-scaled.jpg",1707,2560,[],"今回は弊社の小林が\u003Cstrong>「狩猟の話」\u003C/strong>をしました。\n\n\u003Chr class=\"wp-block-separator\"/>\n\n\u003Cbr>三年ほど前から\u003Cstrong>狩猟に興味を持ち始めました。\u003C/strong>\u003Cbr>\u003Cbr>というのも、実家が山の麓にあるのですが、家のすぐそばまで猿や鹿などの大型獣が出没するようになり、農作物を荒らされ作物が全然収穫できなくなっていまいました。\u003Cbr>それまでは近所に住んでいた方が猟友会に所属し害獣駆除を行っていたのですが、その方は引退されてしまい。いつの間にかそのような状態になっていたようです。\u003Cbr>\u003Cbr>\u003Cstrong>誰かがやらなければ。\u003C/strong>\u003Cbr>\u003Cbr>ということで、狩猟を始めてみることにしました。\u003Cbr>\u003Cbr>\n\n\u003Ch2>必要な資格\u003C/h2>\n\n\u003Cdiv class=\"wp-block-image\">\u003Cfigure class=\"aligncenter size-full\">\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/fe5b6ca2a8c5443f9d9b8cc6d4c4d06f/2022-05-identification-card-gdcb618f8c_640.png\" alt=\"\" class=\"wp-image-14723\"/>\u003C/figure>\u003C/div>\n\n\u003Cbr>狩猟をするにはまず\u003Cstrong>免許\u003C/strong>を取らなければいけません。\u003Cbr>日本国内で取得可能な免許は、\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>網猟\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>わな猟\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>装薬銃による狩猟\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>空気銃による狩猟\u003C/strong>\u003C/li>\u003C/ul>\n\n\u003Cbr>の 4 つ。これ以外の方法で鳥獣を獲ると鳥獣保護法違反になります。\u003Cbr>この中でも細かい決まりがたくさんあって、とにかく\u003Cstrong>勝手に猟をしてはいけない\u003C/strong>わけです。\u003Cbr>\u003Cbr>免許は環境省の管轄で国によって発行されており、一度取得すると \u003Cstrong>3 年間の有効期限\u003C/strong>があります。\u003Cbr>ただし、免許を取ったから猟ができるということでもなくて、それとは別に各都道府県の窓口で\u003Cstrong>狩猟者登録(有料)\u003C/strong>を行わなければいけません。その際にもらえる\u003Cstrong>狩猟者記章(バッジ)と狩猟者登録票\u003C/strong>を携帯すれば禁猟区以外での狩猟が可能です。\u003Cbr>\u003Cbr>\u003Cstrong>猟銃を扱う場合は、さらに鉄砲所持免許証\u003C/strong>を取得しなければいけません。\u003Cbr>これは各都道府県ごとの警察の管轄になっていて、\u003Cstrong>猟銃一丁ずつに必要\u003C/strong>です。クレーン射撃などのスポーツを行う際にも必要になります。\u003Cbr>\u003Cbr>ちなみに狩猟にはシーズンがあり、\u003Cstrong>大体11月15日〜2月15日の冬の間しか猟をやってはいけない決まり\u003C/strong>になっています。先述の狩猟者登録は\u003Cstrong>狩猟を行うシーズン毎に必要\u003C/strong>です。ただ、都道府県によってルールが違う場合もあり、例えば北海道だともう少し期間を伸ばしてもいいなどいくつか例外はあります。\u003Cbr>\u003Cbr>網猟は主に鳥を獲るのに使われる狩猟だということだったので、今回はターゲットである鹿や猿を狩猟するため罠猟と装薬銃による狩猟の免許を取得することにしました。\u003Cbr>\u003Cbr>\n\n\u003Ch3>狩猟免許取得\u003C/h3>\n\n\u003Cdiv class=\"wp-block-image\">\u003Cfigure class=\"aligncenter size-full\">\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/e5b5225b742b48ad90509674997b176a/2022-05-man-ge629fea0d_640.jpg\" alt=\"\" class=\"wp-image-14747\"/>\u003C/figure>\u003C/div>\n\n\u003Cbr>\u003Ca rel=\"noreferrer noopener\" href=\"http://www.env.go.jp/nature/choju/effort/effort8/hunter/license.html\" target=\"_blank\">環境省のホームページ\u003C/a>にある通り、年に数回行われる都道府県別の資格試験に合格すれば狩猟免許は取得できます。\u003Cbr>試験は一日がかかりで行われ、\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>午前：筆記試験\u003C/strong>\u003Cul>\u003Cli>\u003Cstrong>法律、猟具に関する知識、設置方法・使い方\u003C/strong>\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>午後：実技試験\u003C/strong>\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>\u003C/li>\u003C/ul>\n\n\u003Cbr>ということを自分の時にはやりました。\u003Cbr>午前中の試験の合格者だけが午後の試験を受けられます。\u003Cbr>\u003Cbr>ある程度は覚えればなんとかなるようなものが多いのですが、「\u003Cstrong>銃の分解・点検・結合、鳥獣識別\u003C/strong>」が個人的にすごく難しかったです。\u003Cbr>\u003Cbr>銃の分解・点検・結合はほとんど感覚的な作業なので、感覚が掴めないと一向にうまくいきません。しかし一度できるようになると次からは簡単にできるようになります。\u003Cbr>\u003Cbr>鳥獣識別は試験官と一対一で行い、フリップになっている絵や写真の生き物は獲っていいのかダメなのか、獲っていいのであれば生き物の名前は何かを瞬時（ちょっと詰まっても2,3秒以内）に回答します。10問から20問ぐらいの出題で、間違えていいのは2, 3問だけ。特に鳥類は似たような柄が多いのでしっかり勉強しておかないと痛い目にあいます。\u003Cbr>\u003Cbr>試験自体は受付と受験料を収めれば誰でも受けられますが、試験の一週間前に開催される、\u003Cstrong>猟友会による講習会への参加はほぼ必須\u003C/strong>と言っていいでしょう。\u003Cbr>2 万円程度かかりますが、参加すると狩猟教本という教科書みたいなものがもらえて、その中に筆記試験や実技試験の内容について書かれています。さらに講習会では実技の練習もできるので、これから受験を考えている方はぜひ参加を検討してみてください。\u003Cbr>\n\n試験に合格すれば、晴れて狩猟免許を交付されます。\u003Cbr>\n\n\u003Ch3>銃砲所持許可証取得\u003C/h3>\n\n\u003Cdiv class=\"wp-block-image\">\u003Cfigure class=\"aligncenter size-full\">\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/8026334722804c06a1e8a7e095602790/2022-05-shooter-g526369b2a_640.jpg\" alt=\"\" class=\"wp-image-14745\"/>\u003C/figure>\u003C/div>\n\n\u003Cbr>まず初めに月 1 回か 2ヶ月に 1 回程度行われている「初心者講習」の受講依頼を最寄りの警察署の生活安全課にします。\u003Cbr>初心者講習を受講したら筆記試験が。合格したらまた生活安全課に教習資格認定の申請を行います。そうすると警察から\u003Cstrong>「身辺調査を行いますね」\u003C/strong>というような連絡があり、何も問題なければ射撃教習に進めます。\u003Cbr>\u003Cbr>射撃教習はいわゆるクレーン射撃場のような場所で行われるのですが、月 1 回程度、関東圏内のどこかで実施されているぐらいの少なさでした。\u003Cbr>教習ではもちろん実弾を扱うのですが、\u003Cstrong>銃弾を扱うにも申請が必要\u003C/strong>なので、教習を受ける前にその申請を警察署しなければいけません。\u003Cbr>\u003Cbr>ここまでして射撃教習で合格をもらえたら、やっと銃砲店で購入ができるようになります。ですが、購入手続きをしたらしたでそれももちろん警察に報告しないといけません。\u003Cbr>\u003Cbr>そうすると「どこでそれらを管理するんだ」と警察が自宅まで来て\u003Cstrong>ガンロッカーの立ち入り検査\u003C/strong>を行います。許可が出ればようやく銃砲店から猟銃を受け取ることができて、それをまた警察に届け出るとついに\u003Cstrong>鉄砲所持許可証がその銃に交付\u003C/strong>されます。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>銃砲所持許可証取得の流れ\u003C/strong>\n\n\u003Col>\u003Cli>\u003Cstrong>初心者講習\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>教習資格認定の申請\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>警察による身辺調査\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>射撃教習申請\u003C/strong>\u003C/li>\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>\u003Cli>\u003Cstrong>所持申請\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>鉄砲所持免許証交付\u003C/strong>\u003C/li>\u003C/ol>\n\n\u003Cbr>\u003Cstrong>とにかくすごく大変\u003C/strong>で何度も警察署に出向くことになります。\u003Cbr>ちょうど\u003Cstrong>コロナ禍\u003C/strong>に入ってすぐの頃だったので、講習自体が行われていなかったり人数制限も厳しくて\u003Cstrong>初心者講習を受けるまでに一年かかりました。\u003C/strong>\u003Cbr>\u003Cbr>余談ですが、\u003Cstrong>日本では猟銃というとショットガンかライフルのことを指します。ハンドガンのような小さくて携帯性に優れる銃は法律的に持ってはいけない\u003C/strong>ことになっています。\u003Cbr>また、ライフルは非常に殺傷能力が高いため、ショットガンを10年以上扱った人でないと使用するための試験を受けさせてもらえません。\u003Cbr>\u003Cbr>\n\n\u003Ch2>現状\u003C/h2>\n\n\u003Cdiv class=\"wp-block-image\">\u003Cfigure class=\"aligncenter size-full\">\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/0e023d0c36914148b29e357a63f60d79/2022-05-animal-geeec4b9f1_640.jpg\" alt=\"\" class=\"wp-image-14742\"/>\u003C/figure>\u003C/div>\n\n\u003Cbr>とまあ狩猟は始めるまでが大変なんですが、私の現状はと言いますと、\u003Cstrong>狩猟免許（わな・装薬銃）は取得しましたが鉄砲所持許可証は途中で断念\u003C/strong>してしまいました。\u003Cbr>\u003Cbr>いくつか理由はありますが、一番大きな理由としては実家近所で資格を取った若人が出てきて猟を始めた、さらに地域ぐるみで電気柵を使って街を丸ごと囲うという一大プロジェクトが動いているという話もあって、\u003Cstrong>緊急性が薄くなった\u003C/strong>ことが挙げれます。\u003Cbr>\u003Cbr>もう一つの理由としては、\u003Cstrong>銃の購入費や維持費が高い。\u003C/strong>\u003Cbr>銃本体だけでも新品を買うと30万円から。中古でも10万円程度かかります。ちなみに海外ブランド物になると100万円以上するものもあります。\u003Cbr>さらに 3 年ごとに受けなければいけない講習費用やその他の雑費や管理費、弾丸費用など。またガンロッカーや弾丸ロッカーの設置にもお金がかかります。\u003Cbr>\u003Cbr>それらのコストを考えたら、とりあえず罠猟はできるわけだし、銃まではいらないかな。という結論に至った次第です。\u003Cbr>\u003Cbr>とはいえまだ罠猟にも挑戦できておらず…。\u003Cbr>次回は実際にやってみた話ができればと思うので続報をお待ちください。","2022-05-13T15:40:40+09:00",{"contents":272,"totalCount":287,"offset":288,"limit":289},[273,283,285],{"id":274,"eyecatch":275,"publishedAt":279,"createdAt":280,"title":281,"is_html":14,"content2":282},"shader-basics",{"url":276,"height":277,"width":278},"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":159,"eyecatch":284,"publishedAt":162,"createdAt":160,"title":163,"is_html":14,"content2":179},{"url":176,"height":177,"width":178},{"id":33,"eyecatch":286,"publishedAt":36,"createdAt":34,"title":37,"is_html":14,"content2":59},{"url":56,"height":57,"width":58},173,0,3,{"contents":291,"totalCount":494,"offset":288,"limit":495},[292,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,337,340,343,344,347,349,352,355,358,361,364,367,370,373,376,379,381,383,385,387,390,392,394,397,400,403,406,409,412,415,418,420,421,424,426,428,429,432,434,437,439,442,444,447,450,453,455,458,461,464,467,470,472,475,477,480,483,485,488,491],{"id":16,"name":18},{"id":294,"name":295},"workshop","ワークショップ",{"id":297,"name":298},"tool","ツール",{"id":300,"name":301},"office","オフィス",{"id":303,"name":304},"internal-project","社内案件",{"id":306,"name":307},"event","イベント",{"id":309,"name":310},"iot","IoT",{"id":312,"name":313},"art","アート",{"id":315,"name":316},"moving","引越し",{"id":318,"name":319},"picture","映像",{"id":321,"name":322},"plant","植物",{"id":324,"name":325},"company-trip","社員旅行",{"id":327,"name":328},"health","健康",{"id":330,"name":331},"exercise","運動",{"id":333,"name":334},"bicycle-club","自転車部",{"id":47,"name":336},"PR",{"id":338,"name":339},"interview","Interview",{"id":341,"name":342},"recruiting","採用",{"id":25,"name":29},{"id":345,"name":346},"history","歴史",{"id":258,"name":348},"生活",{"id":350,"name":351},"club","部活動",{"id":353,"name":354},"character","キャラクター",{"id":356,"name":357},"food","食",{"id":359,"name":360},"math","数学",{"id":362,"name":363},"alcohol","酒",{"id":365,"name":366},"infrastructure","インフラ",{"id":368,"name":369},"application","アプリ",{"id":371,"name":372},"parenting","子育て",{"id":374,"name":375},"data","通信",{"id":377,"name":378},"migration","地方移住",{"id":169,"name":380},"セキュリティ",{"id":382,"name":382},"esports",{"id":113,"name":384},"振り返り",{"id":262,"name":386},"動物",{"id":388,"name":389},"css","CSS",{"id":82,"name":391},"ゲーム",{"id":41,"name":393},"TypeScript",{"id":395,"name":396},"management","マネジメント",{"id":398,"name":399},"remote-work","リモートワーク",{"id":401,"name":402},"frame-work","フレームワーク",{"id":404,"name":405},"music","音楽",{"id":407,"name":408},"money","お金",{"id":410,"name":411},"covid-19","コロナ",{"id":413,"name":414},"railway","鉄道",{"id":416,"name":417},"agriculture","農業",{"id":85,"name":419},"趣味",{"id":10,"name":13},{"id":422,"name":423},"personal-computer","PC",{"id":171,"name":425},"福利厚生",{"id":45,"name":427},"技術",{"id":20,"name":23},{"id":430,"name":431},"mental-health","メンタルヘルス",{"id":118,"name":433},"フロントエンド",{"id":435,"name":436},"pilates","ピラティス",{"id":43,"name":438},"バックエンド",{"id":440,"name":441},"tunnel","トンネル",{"id":116,"name":443},"デザイン",{"id":445,"name":446},"sports","スポーツ",{"id":448,"name":449},"online","オンライン",{"id":451,"name":452},"internship","インターンシップ",{"id":120,"name":454},"アニメーション",{"id":456,"name":457},"virtual-reality","VR",{"id":459,"name":460},"ssl","SSL",{"id":462,"name":463},"perl","Perl",{"id":465,"name":466},"operating-system","OS",{"id":468,"name":469},"ios","iOS",{"id":147,"name":471},"Google",{"id":473,"name":474},"deeplearning","DeepLearning",{"id":166,"name":476},"AWS",{"id":478,"name":479},"apple","Apple",{"id":481,"name":482},"api","API",{"id":122,"name":484},"3D",{"id":486,"name":487},"school","学校",{"id":489,"name":490},"blender","Blender",{"id":492,"name":493},"android","Android",76,200,{"contents":497,"totalCount":289,"offset":288,"limit":289},[498,550,615],{"id":499,"createdAt":500,"updatedAt":501,"publishedAt":502,"revisedAt":501,"title":503,"category":504,"thumbnail":513,"image":517,"content":524,"keyword":525,"client":540,"team":541,"url":545,"release":546,"status":547,"top":14,"blog":30,"service":549},"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",[505,510],{"id":506,"createdAt":507,"updatedAt":508,"publishedAt":507,"revisedAt":507,"name":509},"web","2024-03-22T05:33:05.262Z","2024-06-24T23:16:42.692Z","ウェブ制作",{"id":116,"createdAt":511,"updatedAt":511,"publishedAt":511,"revisedAt":511,"name":512},"2024-03-22T05:34:30.127Z","デザイン＆ディレクション",{"url":514,"height":515,"width":516},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/47e7b069013a45b8b6e931ec132bd272/thumb.png",900,1200,[518,520,522],{"url":519,"height":126,"width":127},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/43a703ebe8d7467aac2c995378cb081e/1.png",{"url":521,"height":126,"width":127},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/6aed2d670822422696329a5cb3a6877f/2.png",{"url":523,"height":126,"width":127},"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>",[526,530,535],{"id":527,"createdAt":528,"updatedAt":529,"publishedAt":528,"revisedAt":529,"name":433,"filter":30,"page":30},"ice0h9h9ap","2024-06-28T01:14:44.830Z","2025-01-15T07:40:01.729Z",{"id":531,"createdAt":532,"updatedAt":533,"publishedAt":532,"revisedAt":533,"name":534,"filter":30,"page":30},"6ncqc37v7nzq","2024-06-28T01:14:12.293Z","2025-01-15T07:39:08.437Z","デザインプロジェクト",{"id":536,"createdAt":537,"updatedAt":538,"publishedAt":537,"revisedAt":538,"name":539,"filter":30,"page":30},"ztrz9np70v","2024-06-28T01:14:41.050Z","2025-01-15T07:40:30.428Z","コンセプトメイキング"," PH PARIS JAPON 株式会社",[542],{"fieldId":543,"title":544},"teamField","S2ファクトリー","https://www.s2factory.co.jp/blog/noel2025/","2025.10.17",[548],"公開中",[],{"id":551,"createdAt":552,"updatedAt":553,"publishedAt":552,"revisedAt":553,"title":554,"category":555,"thumbnail":562,"image":566,"content":571,"keyword":572,"client":554,"team":587,"url":610,"release":611,"status":612,"statusText":613,"top":30,"blog":30,"service":614},"tamabi","2024-06-28T01:58:38.788Z","2025-05-27T03:25:42.261Z","多摩美術大学",[556,557],{"id":506,"createdAt":507,"updatedAt":508,"publishedAt":507,"revisedAt":507,"name":509},{"id":558,"createdAt":559,"updatedAt":560,"publishedAt":559,"revisedAt":559,"name":561},"system","2024-03-22T05:33:52.708Z","2024-06-24T23:16:53.739Z","システム開発",{"url":563,"height":564,"width":565},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/dea8e004e627415c80bf7b8d622bb4b9/tamabi-thumbnail-1.png",456,600,[567],{"url":568,"height":569,"width":570},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/a000f3cedf5d474d83c5b70e8c11db4e/tamabi-other-1.png",1305,1740,"\u003Cp>「多摩美術大学」ウェブサイトリニューアルのお手伝いをさせていただきました。\u003Cbr>\u003Cbr>サイトのコンテンツを大幅に整理し、運用効率を考慮した再利用しやすく組み合わせやすいUIコンポーネントを構築。また多くの方に利用していただけるようにアクセシビリティの向上にも注力しました。\u003Cbr>インフラは、従来のオンプレミスとクラウドが混在していた環境から、AWS への段階的な移行を進めており、今後の完全移行に向けた準備も進行中です。 \u003Cbr>\u003Cbr>弊社は、フロントエンドとバックエンドの実装、インフラ構築を担当しました。\u003C/p>",[573,577,581,586],{"id":574,"createdAt":575,"updatedAt":576,"publishedAt":575,"revisedAt":576,"name":476,"filter":30,"page":30},"uftrxsmd0v72","2024-06-28T01:14:13.671Z","2025-01-15T07:39:25.538Z",{"id":578,"createdAt":579,"updatedAt":579,"publishedAt":579,"revisedAt":579,"name":580,"filter":14,"page":14},"yctx9hzd4","2024-06-28T01:14:33.743Z","Lambda",{"id":582,"createdAt":583,"updatedAt":584,"publishedAt":583,"revisedAt":584,"name":585,"filter":30,"page":30},"u84cy0fbzno","2024-06-28T01:14:39.521Z","2025-01-15T07:40:41.433Z","Cloud",{"id":527,"createdAt":528,"updatedAt":529,"publishedAt":528,"revisedAt":529,"name":433,"filter":30,"page":30},[588,591,594,597,600,603,606,609],{"fieldId":543,"title":589,"link":590},"萩原 俊矢","https://shunyahagiwara.com/#/works",{"fieldId":543,"title":592,"link":593},"GrandBase Inc.","https://www.grandbase.jp/",{"fieldId":543,"title":595,"link":596},"DSCL Inc.","https://dscl.jp/",{"fieldId":543,"title":598,"link":599},"株式会社トラフィックス","https://traffics.jp/",{"fieldId":543,"title":601,"link":602},"株式会社カンバセーションズ","https://qonversations.jp/",{"fieldId":543,"title":604,"link":605},"Measurements Inc.","https://www.measurements.co.jp/",{"fieldId":543,"title":607,"link":608},"tha ltd.","https://tha.jp/",{"fieldId":543,"title":544},"https://www.tamabi.ac.jp/","2024.4.4",[548],null,[509],{"id":616,"createdAt":617,"updatedAt":618,"publishedAt":617,"revisedAt":618,"title":619,"category":620,"thumbnail":622,"image":624,"content":633,"keyword":634,"client":607,"team":650,"url":656,"release":657,"status":658,"statusText":613,"top":14,"blog":30,"service":659},"humanity","2024-06-28T01:56:51.507Z","2025-05-27T03:26:34.287Z","HUMANITY",[621],{"id":558,"createdAt":559,"updatedAt":560,"publishedAt":559,"revisedAt":559,"name":561},{"url":623,"height":564,"width":565},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/740adb4e02c54fee97d12025df5f16a0/humanity-thumbnail-1.png",[625,627,629,631],{"url":626,"height":569,"width":570},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/2a10b034854d40e789d38ac33e0a3c4e/humanity-other-1.png",{"url":628,"height":569,"width":570},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/1091c52a97f745e5a3fc105bd0e542dc/humanity-other-2.png",{"url":630,"height":569,"width":570},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/613c8c836fff40119e9f85097262399d/humanity-other-3.png",{"url":632,"height":569,"width":570},"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>",[635,640,645,646],{"id":636,"createdAt":637,"updatedAt":638,"publishedAt":637,"revisedAt":638,"name":639,"filter":30,"page":30},"fg8e4c9nl","2024-06-28T01:14:04.517Z","2025-01-15T07:36:58.970Z","CMS",{"id":641,"createdAt":642,"updatedAt":643,"publishedAt":642,"revisedAt":643,"name":644,"filter":30,"page":30},"p6qgoo2k9vl9","2024-06-28T01:14:06.759Z","2025-01-15T07:37:22.466Z","大規模データ",{"id":582,"createdAt":583,"updatedAt":584,"publishedAt":583,"revisedAt":584,"name":585,"filter":30,"page":30},{"id":647,"createdAt":648,"updatedAt":649,"publishedAt":648,"revisedAt":649,"name":391,"filter":30,"page":30},"pxnv6cy2u","2024-06-28T01:14:45.570Z","2025-01-15T07:39:54.004Z",[651,654,655],{"fieldId":543,"title":652,"link":653},"Enhance","https://enhance-experience.com/ja/",{"fieldId":543,"title":607,"link":608},{"fieldId":543,"title":544},"https://humanity.game/ja/","2023.5.16",[548],[561],1784805015949]