[{"data":1,"prerenderedAt":659},["ShallowReactive",2],{"detaildx-library-puzzle-game":3,"detail_related_dx-library-puzzle-game_game":237,"$fJgKQHRiZzR-mKMFEBPDVuXvokHALozOctA-4JAtPW00":252,"$f7OovQEBIkf3flPSO65XgVqn1FRUlN7OLmCu_FYFaAPE":278,"works":494},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":7,"revisedAt":7,"title":8,"tag":9,"recommended_articles":28,"eyecatch":132,"heading_list":22,"content2":136,"description":137,"related_articles":138,"recruit":15,"cta_title":235,"cta_text":236,"is_html":15,"is_migration":15},"dx-library-puzzle-game","2026-08-11T05:15:55.477Z","2026-08-13T05:50:02.923Z","2026-08-13T05:33:03.675Z","C++とDXライブラリで落ちものパズルゲームを作っている話",[10,16,23],{"id":11,"createdAt":12,"updatedAt":13,"publishedAt":12,"revisedAt":12,"name":14,"top":15},"game","2023-07-13T11:21:19.867Z","2023-08-09T06:19:06.321Z","ゲーム",false,{"id":17,"createdAt":18,"updatedAt":19,"publishedAt":20,"revisedAt":19,"name":21,"top":22},"tea","2023-06-01T09:41:19.770Z","2025-04-22T12:20:26.123Z","2023-07-28T06:30:00.000Z","お茶会",true,{"id":24,"createdAt":25,"updatedAt":26,"publishedAt":25,"revisedAt":25,"name":27,"top":15},"hobby","2023-06-01T09:42:38.855Z","2023-08-09T06:23:57.481Z","趣味",[29,63,104],{"id":30,"createdAt":31,"updatedAt":32,"publishedAt":33,"revisedAt":32,"title":34,"tag":35,"recommended_articles":43,"eyecatch":44,"heading_list":22,"content2":48,"description":49,"related_articles":50,"recruit":15,"is_html":15,"is_migration":15},"shader-basics","2026-06-16T01:35:56.924Z","2026-07-09T04:55:35.213Z","2026-07-07T10:13:33.054Z","WebGLシェーダーの基本とテクスチャー表現",[36,38,40,42],{"id":37},"frontend",{"id":39},"animation",{"id":41},"tech",{"id":17},[],{"url":45,"height":46,"width":47},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F3651571c58a740eaaa57321b312e1503\u002F%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC.png",895,1444,"\u003Cp>月末にセールをするのはやめてほしいです。\u003C\u002Fp>\u003Cp>この記事は、社内イベント「\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ftea\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">お茶会\u003C\u002Fa>」での発表内容をもとにまとめたものです。\u003Cbr>今回は、弊社の morisaki が\u003Cstrong>「シェーダー」\u003C\u002Fstrong>について発表しました。\u003C\u002Fp>\u003Chr>\u003Cp>\u003Cbr>フロントエンドの実装で使われる \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FAPI\u002FWebGL_API\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>WebGL\u003C\u002Fstrong>\u003C\u002Fa> や \u003Ca href=\"https:\u002F\u002Fthreejs.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Three.js\u003C\u002Fstrong>\u003C\u002Fa> を例に、シェーダーがどのように\u003Cstrong>画面上の表現\u003C\u002Fstrong>を作っているのか、基本的な仕組みから実演を交えて紹介したいと思います。\u003C\u002Fp>\u003Ch2 id=\"h4db06e3d9d\">シェーダーとは\u003C\u002Fh2>\u003Cp>シェーダーは、\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FGPU\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>GPU\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> 上で動作する描画用のプログラム\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>フロントエンドの実装で使う場合は、WebGL 上で動かすことが多く、\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FGames\u002FTechniques\u002F3D_on_the_web\u002FGLSL_Shaders\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>GLSL(OpenGL Shading Language)\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>という言語で記述\u003C\u002Fstrong>します。ほかにも、DirectX で使われる \u003Ca href=\"https:\u002F\u002Flearn.microsoft.com\u002Fja-jp\u002Fwindows\u002Fwin32\u002Fdirect3dhlsl\u002Fdx-graphics-hlsl\" target=\"_blank\" rel=\"noopener noreferrer\">HLSL\u003C\u002Fa> や、\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FAPI\u002FWebGPU_API\" target=\"_blank\" rel=\"noopener noreferrer\">WebGPU\u003C\u002Fa> で採用されている \u003Ca href=\"https:\u002F\u002Fwww.w3.org\u002FTR\u002FWGSL\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">WGSL\u003C\u002Fa> など、用途に応じたシェーディング言語があります。\u003C\u002Fp>\u003Cp>通常、コンピューターの処理は CPU が担当します。\u003Cbr>\u003Cstrong>CPU はひとつひとつの計算は得意\u003C\u002Fstrong>ですが、大量の処理を同時に行うことにはあまり向いていません。\u003C\u002Fp>\u003Cp>一方で \u003Cstrong>GPU\u003C\u002Fstrong> は、\u003Cstrong>たくさんの計算を並列で処理\u003C\u002Fstrong>することに向いており、何千、何万というパーティクルを動かしたり、画面全体に複雑な表現を加えたりするような場合に力を発揮します。\u003C\u002Fp>\u003Cp>WebGLで使うシェーダーは、主に 2 種類です。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Vertex Shader\u003C\u002Fstrong>：ジオメトリの各頂点の位置を計算する。\u003C\u002Fli>\u003Cli>\u003Cstrong>Fragment Shader\u003C\u002Fstrong>：各フラグメントの色を計算する。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>処理は、\u003Cstrong>Vertex Shader → Fragment Shader\u003C\u002Fstrong> の順に実行されます。\u003Cbr>Vertex Shader\u003Cstrong> \u003C\u002Fstrong>で計算した値を Fragment Shader へ渡すことはできますが、\u003Cstrong>逆方向には渡せません\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cp>シェーダーを使うことで、Three.js の組み込みマテリアルだけでは難しい質感や動き、細かなエフェクトも制御しやすくなります。\u003Cstrong>もともとは 3D オブジェクトの影や陰影を計算するためのもの\u003C\u002Fstrong>でしたが、現在では Web 上のさまざまな表現に使われています。\u003C\u002Fp>\u003Ch3 id=\"hdc136c4370\">シェーダーで扱う値と関数\u003C\u002Fh3>\u003Cp>シェーダーでは、頂点の位置や色、時間、テクスチャーなどの値を受け取り、計算した結果を描画に反映していきます。\u003C\u002Fp>\u003Ch4 id=\"h16bf73988b\">\u003Cstrong>変数の種類(修飾子)\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>値の渡し方は、修飾子で指定します。代表的なものが、\u003Ccode>attribute\u003C\u002Fcode>、\u003Ccode>uniform\u003C\u002Fcode>、\u003Ccode>varying\u003C\u002Fcode> です。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>attribute\u003C\u002Fcode>：頂点ごとに異なる値を渡すための変数。頂点の位置、法線、色、UV座標などに使われる。\u003C\u002Fli>\u003Cli>\u003Ccode>uniform\u003C\u002Fcode>：オブジェクト全体で共通する値を渡すための変数。光の向き、カメラの視点、時間、変換行列などを扱う。\u003C\u002Fli>\u003Cli>\u003Ccode>varying\u003C\u002Fcode>：Vertex Shader\u003Cstrong> \u003C\u002Fstrong>で計算した値を、Fragment Shader へ渡すための変数。\u003C\u002Fli>\u003C\u002Ful>\u003Ch4 id=\"h5af0eb155b\">\u003Cbr>\u003Cstrong>型\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>扱う値には型があります。数値、ベクトル、行列、テクスチャーなど、用途に応じて使いわけます。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>float\u003C\u002Fcode>：小数。\u003C\u002Fli>\u003Cli>\u003Ccode>int\u003C\u002Fcode>：整数。\u003C\u002Fli>\u003Cli>\u003Ccode>bool\u003C\u002Fcode>：真偽値。\u003C\u002Fli>\u003Cli>\u003Ccode>vec2\u003C\u002Fcode>\u003Cstrong> \u002F \u003C\u002Fstrong>\u003Ccode>vec3\u003C\u002Fcode>\u003Cstrong> \u002F \u003C\u002Fstrong>\u003Ccode>vec4\u003C\u002Fcode>：2〜4次元のベクトル。\u003C\u002Fli>\u003Cli>\u003Ccode>mat2\u003C\u002Fcode>\u003Cstrong> \u002F \u003C\u002Fstrong>\u003Ccode>mat3\u003C\u002Fcode>\u003Cstrong> \u002F \u003C\u002Fstrong>\u003Ccode>mat4\u003C\u002Fcode>：2〜4次の正方行列。\u003C\u002Fli>\u003Cli>\u003Ccode>sampler2D\u003C\u002Fcode>：テクスチャー。\u003C\u002Fli>\u003Cli>\u003Ccode>void\u003C\u002Fcode>：何も返さないことを示す型。\u003C\u002Fli>\u003C\u002Ful>\u003Ch4 id=\"hd2f7ea18d2\">\u003Cbr>\u003Cstrong>組み込み変数\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>用途が決まっている組み込み変数もあります。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>gl_Position\u003C\u002Fcode>：Vertex Shader で使用。頂点の最終的な位置を指定する。\u003C\u002Fli>\u003Cli>\u003Ccode>gl_FragCoord\u003C\u002Fcode>：Fragment Shader で使用。現在処理しているフラグメントの画面上の座標を取得する。\u003C\u002Fli>\u003Cli>\u003Ccode>gl_FragColor\u003C\u002Fcode>：Fragment Shader で使用。出力する色を指定する。\u003C\u002Fli>\u003C\u002Ful>\u003Ch4 id=\"hd56e4caf46\">\u003Cbr>\u003Cstrong>関数\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>GLSL でも、他のプログラミング言語と同じように関数を作成できます。\u003C\u002Fp>\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\u002Fcode>\u003C\u002Fpre>\u003Cp>シェーダー内には \u003Ccode>main\u003C\u002Fcode> \u003Cstrong>関数が必須\u003C\u002Fstrong>で、この関数が自動的に呼び出されます。\u003Cbr>Vertex Shader では \u003Ccode>gl_Position\u003C\u002Fcode> に頂点の位置を入れることで、描画に使う最終的な座標を決めます。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-glsl\">attribute vec3 position;\n\nvoid main() {\n  gl_Position = vec4(position, 1.0);\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>また、\u003Ccode>sin\u003C\u002Fcode>、\u003Ccode>cos\u003C\u002Fcode>、\u003Ccode>max\u003C\u002Fcode>、\u003Ccode>min\u003C\u002Fcode>、\u003Ccode>pow\u003C\u002Fcode>、\u003Ccode>exp\u003C\u002Fcode>、\u003Ccode>mod\u003C\u002Fcode>、\u003Ccode>clamp\u003C\u002Fcode>、\u003Ccode>cross\u003C\u002Fcode>、\u003Ccode>dot\u003C\u002Fcode>、\u003Ccode>mix\u003C\u002Fcode>、\u003Ccode>step\u003C\u002Fcode>、\u003Ccode>smoothstep\u003C\u002Fcode>、\u003Ccode>length\u003C\u002Fcode>、\u003Ccode>distance\u003C\u002Fcode>、\u003Ccode>reflect\u003C\u002Fcode>、\u003Ccode>refract\u003C\u002Fcode>、\u003Ccode>normalize\u003C\u002Fcode> などの組み込み関数も用意されています。\u003C\u002Fp>\u003Ch2 id=\"h01aea3682e\">Vertex Shader の基本\u003C\u002Fh2>\u003Cp>Vertex Shader の役割は、\u003Cstrong>3D 空間にあるジオメトリの各頂点を、2D のキャンバス座標に変換すること\u003C\u002Fstrong>です。\u003C\u002Fp>\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\u002Fcode>\u003C\u002Fpre>\u003Cp>ここで使われている \u003Ccode>position\u003C\u002Fcode> は、\u003Cstrong>ジオメトリが持つ頂点のローカル座標\u003C\u002Fstrong>です。\u003Cbr>\u003Ccode>vec3\u003C\u002Fcode> なので、値は \u003Ccode>x\u003C\u002Fcode>、\u003Ccode>y\u003C\u002Fcode>、\u003Ccode>z\u003C\u002Fcode> の3つ。最終的に \u003Ccode>gl_Position\u003C\u002Fcode> に入れるため、\u003Ccode>vec4(position, 1.0)\u003C\u002Fcode> として4次元の値に変換します。\u003C\u002Fp>\u003Ch3 id=\"hcb28cbeadd\">座標変換の流れ\u003C\u002Fh3>\u003Cp>頂点の座標は、\u003Cstrong>行列を掛けることで段階的に変換\u003C\u002Fstrong>されます。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>modelMatrix\u003C\u002Fcode>：ローカル座標を、ワールド座標に変換する。\u003C\u002Fli>\u003Cli>\u003Ccode>viewMatrix\u003C\u002Fcode>：ワールド座標を、カメラから見たビュー座標に変換する。\u003C\u002Fli>\u003Cli>\u003Ccode>projectionMatrix\u003C\u002Fcode>：ビュー座標を、画面に描画できるクリップ座標に変換する。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>つまり、\u003Cstrong>オブジェクト自身の中での位置を、3D空間全体の中での位置へ変換し、さらにカメラから見た位置へ移す。最後に、画面上に表示できる形へ投影\u003C\u002Fstrong>していく流れです。\u003C\u002Fp>\u003Ch3 id=\"hf5da7b09f6\">3 つの空間\u003C\u002Fh3>\u003Cp>座標変換では、いくつかの空間を通ります。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>ワールド空間\u003C\u002Fstrong>\u003Cbr>3D シーン全体の中で、オブジェクトがどこにあるかを表す空間。\u003C\u002Fli>\u003Cli>\u003Cstrong>ビュー空間\u003C\u002Fstrong>\u003Cbr>カメラから見たときに、物体がどの方向にあり、どれくらい離れているかを扱う空間。\u003C\u002Fli>\u003Cli>\u003Cstrong>クリップ空間\u003C\u002Fstrong>\u003Cbr>画面に映る範囲かどうかを判断するための空間。範囲外にあるものはクリッピングされ、描画対象から外れる。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>ビュー空間からクリップ空間への変換では、カメラから見た視錐台の空間を、GPU が扱いやすい立方体の空間へ変換します。文章だけだとイメージしづらい部分なので、図で整理すると次のようになります。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F57a7a6e3905c463d8fdcd216fdd11da6\u002F%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\u002Ffigure>\u003Cp>行列の中身まで細かく追うと難しくなりますが、まずは\u003Cstrong>「3D 空間の頂点を、画面に映すために段階的に変換している」\u003C\u002Fstrong>と捉えておくとわかりやすいです。\u003C\u002Fp>\u003Ch3 id=\"h6c59ac702c\">行列をわける理由\u003C\u002Fh3>\u003Cp>\u003Ccode>modelMatrix\u003C\u002Fcode>、\u003Ccode>viewMatrix\u003C\u002Fcode>、\u003Ccode>projectionMatrix\u003C\u002Fcode> がわかれているのは、\u003Cstrong>途中で制御を入れられるようにするため\u003C\u002Fstrong>です。\u003Cbr>たとえば、\u003Ccode>modelMatrix\u003C\u002Fcode> を掛けたあとの座標を \u003Ccode>modelPosition\u003C\u002Fcode> として保持しておけば、その時点で頂点の位置を動かせます。\u003C\u002Fp>\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  \u002F\u002F 各頂点座標の移動などの操作はここで行う\n  modelPosition.x += 1.0; \u002F\u002F オブジェクトを右に移動（各頂点の X 座標を 1.0 右に移動）\n  vec4 viewPosition = modelPosition * viewMatrix;\n  vec4 projectionPosition = viewPosition * projectionMatrix;\n  gl_Position = projectionPosition;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>途中の座標を操作することで、オブジェクト全体を動かしたり、頂点ごとに位置を変えたりできます。\u003Cbr>次はこの考え方を使って、平面の頂点を動かしていきます。\u003C\u002Fp>\u003Ch2 id=\"h27b89f2a89\">Fragment Shader の基本\u003C\u002Fh2>\u003Cp>Vertex Shader が頂点の位置を計算するのに対して、\u003Cstrong>Fragment Shader は画面に描画される色を計算\u003C\u002Fstrong>します。\u003C\u002Fp>\u003Cp>具体的には、\u003Cstrong>色、明るさ、透明度などをフラグメントごとに決定\u003C\u002Fstrong>するものです。テクスチャーを貼り付けたり、光の反射を計算したり、画面全体にエフェクトをかけたりする処理にも使われます。\u003C\u002Fp>\u003Cp>基本形は以下です。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-glsl\">precision mediump float;\n\nvoid main() {\n  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \u002F\u002F 不透明な赤\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3 id=\"h7ee14fb0cf\">precision mediump float;\u003C\u002Fh3>\u003Cp>\u003Ccode>float\u003C\u002Fcode> 型の\u003Cstrong>計算精度を指定するための記述\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>精度には、主に次の 3 種類があります。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>highp\u003C\u002Fcode>：最高精度。複雑な計算には向いているが、モバイル端末ではパフォーマンスに影響する場合も。\u003C\u002Fli>\u003Cli>\u003Ccode>mediump\u003C\u002Fcode>：中精度。速度と画質のバランスがよく、通常はこれを使う。\u003C\u002Fli>\u003Cli>\u003Ccode>lowp\u003C\u002Fcode>：低精度。一部のモバイル端末では高速に動作する場合があるが、見た目に違和感が出ることも。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>基本的には、\u003Cstrong>特別な理由がなければ \u003C\u002Fstrong>\u003Ccode>mediump\u003C\u002Fcode>\u003Cstrong> を使います。\u003C\u002Fstrong>\u003C\u002Fp>\u003Ch3 id=\"ha26f547d90\">gl_FragColor\u003C\u002Fh3>\u003Cp>Fragment Shader から\u003Cstrong>出力する色を指定するための組み込み変数\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>値は \u003Ccode>vec4\u003C\u002Fcode> 型で、\u003Cspan style=\"color: #ff0000\">r\u003C\u002Fspan>・\u003Cspan style=\"color: #69db00\">g\u003C\u002Fspan>・\u003Cspan style=\"color: #0072ff\">b\u003C\u002Fspan>・a(透明度) の 4 つの要素を持ちます。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-glsl\">gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>この場合は、赤を最大、緑と青をゼロ、透明度を最大にしているため、不透明な赤になります。\u003C\u002Fp>\u003Cp>それぞれの値は、基本的に \u003Ccode>0.0\u003C\u002Fcode> から \u003Ccode>1.0\u003C\u002Fcode> の範囲で指定。\u003Cbr>たとえば \u003Ccode>vec4(1.0, 1.0, 1.0, 1.0)\u003C\u002Fcode> なら不透明な白、\u003Ccode>vec4(0.0, 0.0, 0.0, 1.0)\u003C\u002Fcode> なら不透明な黒になります。\u003C\u002Fp>\u003Cp>このように Fragment Shader では、各フラグメントに対してどの色を出力するかを計算します。\u003C\u002Fp>\u003Ch2 id=\"hf02f93e60a\">実演してみる\u003C\u002Fh2>\u003Ch3 id=\"hdd5d55e749\">Three.js で表示する準備\u003C\u002Fh3>\u003Cp>実演では、Three.js 上にオブジェクトを表示しながら、少しずつシェーダーを書き換えていきます。\u003Cbr>オブジェクトを作る基本は、次の 3 つです。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Geometry\u003C\u002Fstrong>：形を決めるもの。\u003C\u002Fli>\u003Cli>\u003Cstrong>Material\u003C\u002Fstrong>：見た目を決めるもの。\u003C\u002Fli>\u003Cli>\u003Cstrong>Mesh\u003C\u002Fstrong>：Geometry と Material を組み合わせたもの。\u003C\u002Fli>\u003C\u002Ful>\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\u002Fcode>\u003C\u002Fpre>\u003Cp>ここでは、\u003Ccode>PlaneGeometry\u003C\u002Fcode> で平面を作り、\u003Ccode>RawShaderMaterial\u003C\u002Fcode> に Vertex Shader と Fragment Shader を指定。\u003Cbr>最後に Geometry と Material を組み合わせて Mesh を作り、Scene に追加します。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F0667dd478db145e19c2aee62c209979f\u002Fobject-1.png?w=600&h=571\" alt=\"Geometry と Material を組み合わせて表示したオブジェクト\" width=\"600\" height=\"571\">\u003Cfigcaption>Geometry と Material を組み合わせて表示したオブジェクト\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>Material の設定を変えることで、色を変えたり、\u003Ccode>wireframe\u003C\u002Fcode> で構成線を表示したり、\u003Ccode>map\u003C\u002Fcode> で画像を貼り付けたりできます。\u003Cbr>また、表示したオブジェクトは、\u003Ccode>OrbitControls\u003C\u002Fcode> を使ってマウス操作で回転・拡大縮小しながら確認することも可能です。\u003C\u002Fp>\u003Cp>\u003Cstrong>Geometry の分割数を増やすと頂点数が増える\u003C\u002Fstrong>ため、変形したときの見た目は\u003Cstrong>なめらか\u003C\u002Fstrong>になります。ただし、その分\u003Cstrong>処理は重くなる\u003C\u002Fstrong>ので注意が必要です。\u003C\u002Fp>\u003Ch3 id=\"hb864bed67b\">頂点の座標を変更してみる\u003C\u002Fh3>\u003Cp>ここからは、Vertex Shader の中で頂点の座標を変更してみましょう。\u003C\u002Fp>\u003Cp>まず使うのは、\u003Ccode>modelMatrix\u003C\u002Fcode> を掛けたあとの座標です。この座標を \u003Ccode>modelPosition\u003C\u002Fcode> として変数に入れておくと、\u003Ccode>x\u003C\u002Fcode>、\u003Ccode>y\u003C\u002Fcode>、\u003Ccode>z\u003C\u002Fcode> の値を変更できます。\u003C\u002Fp>\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\u002Fcode>\u003C\u002Fpre>\u003Cp>この例では、\u003Ccode>modelPosition.y\u003C\u002Fcode> に \u003Ccode>1.0\u003C\u002Fcode> を足しています。\u003Ccode>y\u003C\u002Fcode> は上下方向の座標なので、頂点は上方向へ移動します。\u003Cbr>\u003Cbr>ただし、Vertex Shader はオブジェクト全体に一度だけ実行されるものではありません。Geometry を構成する\u003Cstrong>各頂点ごとに実行\u003C\u002Fstrong>されます。\u003Cbr>そのため、\u003Cstrong>すべての頂点に同じ処理がかかり、結果としてオブジェクト全体が上に移動する\u003C\u002Fstrong>という仕組みです。\u003C\u002Fp>\u003Cp>次は、すべての頂点を同じ方向へ動かすのではなく、頂点ごとに移動量を変えてみます。\u003C\u002Fp>\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\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F08133f5d602a43b49d2643d3970bc46f\u002Fobject-2.png?w=600&h=638\" alt=\"sin を使って、頂点ごとに Z 座標の移動量を変えた状態\" width=\"600\" height=\"638\">\u003Cfigcaption>sin を使って、頂点ごとに Z 座標の移動量を変えた状態\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003C\u002Fp>\u003Cp>\u003Ccode>modelPosition.x\u003C\u002Fcode> は、各頂点が持っている X 座標です。左側の頂点と右側の頂点では X 座標が異なるため、\u003Ccode>sin\u003C\u002Fcode> の計算結果も変わります。\u003Cbr>その結果、頂点ごとに Z 座標の移動量が変わり、\u003Cstrong>平面に波のような起伏\u003C\u002Fstrong>が生まれます。\u003C\u002Fp>\u003Cp>\u003Ccode>modelPosition.x * 10.0\u003C\u002Fcode> は、波の細かさを調整するための値です。\u003Cstrong>値を大きくすると波の間隔は細かくなり、小さくするとゆるやかな変化\u003C\u002Fstrong>になります。\u003C\u002Fp>\u003Cp>最後の \u003Ccode>* 0.1\u003C\u002Fcode> は、Z 方向への動きが大きくなりすぎないようにするための調整です。\u003Cbr>ここではまず、X 座標を使って Z 座標を変化させています。\u003C\u002Fp>\u003Ch3 id=\"hf4bfbf59d2\">uniform で値を渡して動かす\u003C\u002Fh3>\u003Cp>先ほどのコードでは、波の細かさを \u003Ccode>10.0\u003C\u002Fcode> という固定値で指定していました。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-glsl\">modelPosition.z += sin(modelPosition.x * 10.0) * 0.1;\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>このままだと、波の細かさを変えるたびにシェーダーのコードを書き換える必要があります。\u003Cbr>そこで使うのが \u003Ccode>uniform\u003C\u002Fcode> です。\u003C\u002Fp>\u003Cp>\u003Ccode>uniform\u003C\u002Fcode> を使うと、JavaScript 側からシェーダーへ値を渡せます。\u003C\u002Fp>\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\u002Fcode>\u003C\u002Fpre>\u003Cp>Vertex Shader 側では、渡された \u003Ccode>uFrequency\u003C\u002Fcode> を使って計算します。\u003C\u002Fp>\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\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>uFrequency.x\u003C\u002Fcode> は X 方向、\u003Ccode>uFrequency.y\u003C\u002Fcode> は Y 方向の波の細かさを調整する値です。\u003Cbr>固定値を直接書くのではなく \u003Ccode>uniform\u003C\u002Fcode> にしておくことで、\u003Cstrong>外側から値を変更\u003C\u002Fstrong>できるようになります。\u003C\u002Fp>\u003Cp>値の調整には、\u003Cstrong>GUI のコントローラー\u003C\u002Fstrong>も使えます。\u003C\u002Fp>\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\u002Fcode>\u003C\u002Fpre>\u003Cp>これにより、コードを書き換えなくても、画面上のコントローラーから波の細かさを調整できます。\u003C\u002Fp>\u003Ch3 id=\"h917ebd2821\">時間を渡してアニメーションさせる\u003C\u002Fh3>\u003Cp>ここまでの波は、あくまで「波打った形」になっているだけです。\u003Cbr>\u003Cstrong>時間に合わせて動かすには、経過時間をシェーダーに\u003C\u002Fstrong>渡します。\u003C\u002Fp>\u003Cp>まず、\u003Ccode>uTime\u003C\u002Fcode> を \u003Ccode>uniform\u003C\u002Fcode> として追加します。\u003C\u002Fp>\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\u002Fcode>\u003C\u002Fpre>\u003Cp>Three.js 側では、\u003Ccode>Clock\u003C\u002Fcode> を使って\u003Cstrong>経過時間を取得\u003C\u002Fstrong>します。\u003Cbr>その値を描画ループの中で \u003Ccode>uTime\u003C\u002Fcode> に入れることで、フレームごとに新しい時間をシェーダーへ渡せます。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-ts\">const elapsedTime = clock.getElapsedTime();\n\nif (material) {\n  material.uniforms.uTime.value = elapsedTime;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Vertex Shader 側では、\u003Ccode>sin\u003C\u002Fcode> の計算に \u003Ccode>uTime\u003C\u002Fcode> を加えます。\u003C\u002Fp>\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\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>uTime\u003C\u002Fcode> の値が少しずつ変わることで、\u003Ccode>sin\u003C\u002Fcode> の計算結果も変化します。\u003Cbr>その結果、平面が時間に合わせてゆらゆらと波打つように動きます。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FIo2uTgc4CNU?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\" referrerpolicy=\"strict-origin\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch3 id=\"h57a861c8ea\">波の高さを色に使う\u003C\u002Fh3>\u003Cp>次に、\u003Cstrong>波の高さ\u003C\u002Fstrong>を色の計算にも使ってみましょう。\u003C\u002Fp>\u003Cp>今は、\u003Ccode>sin\u003C\u002Fcode> で計算した値をそのまま \u003Ccode>modelPosition.z\u003C\u002Fcode> に足しています。\u003C\u002Fp>\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\u002Fcode>\u003C\u002Fpre>\u003Cp>このままだと、波の高さは Vertex Shader の中だけで使われます。\u003Cbr>\u003Cstrong>Fragment Shader 側でも同じ値を使いたい\u003C\u002Fstrong>ので、まずは高さの計算結果を \u003Ccode>elevation\u003C\u002Fcode> という変数に切り出します。\u003C\u002Fp>\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\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>elevation\u003C\u002Fcode> に入れているのは、Z 座標を動かすために使っていた値です。\u003Cbr>この値を \u003Ccode>modelPosition.z\u003C\u002Fcode> に足せば、これまでと同じように平面が波打ちます。\u003C\u002Fp>\u003Cp>さらに、\u003Ccode>vElevation\u003C\u002Fcode> に代入することで、Vertex Shader で計算した高さを Fragment Shader に渡せるようになります。\u003C\u002Fp>\u003Cp>ここで使っている \u003Ccode>varying\u003C\u002Fcode> は、\u003Cstrong>Vertex Shader から Fragment Shader へ値を渡すための変数\u003C\u002Fstrong>です。Vertex Shader 側で代入し、Fragment Shader 側で同じ名前と型を宣言して受け取ります。\u003C\u002Fp>\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\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>gl_FragColor\u003C\u002Fcode> は、\u003Ccode>r\u003C\u002Fcode>、\u003Ccode>g\u003C\u002Fcode>、\u003Ccode>b\u003C\u002Fcode>、\u003Ccode>a\u003C\u002Fcode> の4つの値で色を指定します。\u003Cbr>ここでは、\u003Ccode>vElevation\u003C\u002Fcode> を\u003Cstrong>赤の値\u003C\u002Fstrong>に使っています。\u003C\u002Fp>\u003Cp>ただし、\u003Ccode>elevation\u003C\u002Fcode> はマイナスの値になることもあります。色の値としてそのまま使うと暗くなりすぎるため、\u003Ccode>0.5\u003C\u002Fcode> を足して、\u003Cstrong>色の変化\u003C\u002Fstrong>が見えるようにしています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FojY_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\u002Fiframe>\u003C\u002Fdiv>\u003Cp>\u003Cbr>これで、波の高い部分と低い部分で赤の強さが変わるようになります。\u003Cbr>頂点の位置を動かすだけでなく、その計算結果を色にも使うことで、\u003Cstrong>立体感のある表現\u003C\u002Fstrong>につなげられます。\u003C\u002Fp>\u003Ch3 id=\"h8f7a0729da\">テクスチャーを貼る\u003C\u002Fh3>\u003Cp>次に、平面に画像を\u003Cstrong>テクスチャー\u003C\u002Fstrong>として貼り付けてみます。\u003C\u002Fp>\u003Cp>まず、JavaScript 側で画像を読み込み、\u003Ccode>uTexture\u003C\u002Fcode> という \u003Ccode>uniform\u003C\u002Fcode> としてシェーダーに渡します。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-ts\">textureLoader = new TextureLoader();\nconst texture = textureLoader.load('\u002Fflag.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\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>uTexture\u003C\u002Fcode> は、シェーダー内で使うテクスチャー画像です。\u003Cbr>ただし、画像を渡すだけでは、どの位置に画像のどの部分を貼ればよいかわかりません。\u003C\u002Fp>\u003Cp>そこで使うのが \u003Ccode>uv\u003C\u002Fcode> です。\u003C\u002Fp>\u003Cp>\u003Ccode>uv\u003C\u002Fcode> は、Geometry が持っている\u003Cstrong>テクスチャー用の座標\u003C\u002Fstrong>です。\u003Cbr>各頂点に対して、画像のどの位置を対応させるかを表しています。\u003C\u002Fp>\u003Cp>Vertex Shader 側では、Geometry が持つ \u003Ccode>uv\u003C\u002Fcode> を \u003Ccode>attribute\u003C\u002Fcode> として受け取り、\u003Ccode>vUv\u003C\u002Fcode> として Fragment Shader に渡します。\u003C\u002Fp>\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\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>uv\u003C\u002Fcode> は Vertex Shader では使えますが、そのまま Fragment Shader から参照することはできません。\u003Cbr>そのため、\u003Ccode>varying\u003C\u002Fcode> の \u003Ccode>vUv\u003C\u002Fcode> に代入して、\u003Cstrong>Fragment Shader 側へ渡します\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cp>Fragment Shader 側では、同じ \u003Ccode>vUv\u003C\u002Fcode> を宣言して受け取ります。\u003C\u002Fp>\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\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>texture2D(uTexture, vUv)\u003C\u002Fcode> は、\u003Ccode>uTexture\u003C\u002Fcode> の中から \u003Ccode>vUv\u003C\u002Fcode> の座標に対応する色を取得する処理です。\u003Cbr>取得した色を \u003Ccode>gl_FragColor\u003C\u002Fcode> に入れることで、\u003Cstrong>平面に画像が表示されます\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cp>補足として、\u003Ccode>vUv\u003C\u002Fcode> をそのまま \u003Ccode>gl_FragColor\u003C\u002Fcode> に入れると、UV 座標の変化をグラデーションとして確認できます。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FzqOtYtCk-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\u002Fiframe>\u003C\u002Fdiv>\u003Cp>\u003Cbr>これで、Fragment Shader 側で画像の色を取得し、各フラグメントの色として出力できるようになります。\u003Cbr>次は、このテクスチャーの色に \u003Ccode>vElevation\u003C\u002Fcode> を掛けて、\u003Cstrong>波の高さに応じた明暗\u003C\u002Fstrong>を加えていきます。\u003C\u002Fp>\u003Ch3 id=\"hf29ce76e4e\">テクスチャーに明暗を加える\u003C\u002Fh3>\u003Cp>テクスチャーの色に \u003Ccode>vElevation\u003C\u002Fcode> を反映して、波の高さに応じた\u003Cstrong>明暗\u003C\u002Fstrong>を加えてみます。\u003C\u002Fp>\u003Cp>先ほどテクスチャーを貼ったときは、\u003Ccode>texture2D(uTexture, vUv)\u003C\u002Fcode> で取得した色を、そのまま \u003Ccode>gl_FragColor\u003C\u002Fcode> に渡していました。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-glsl\">vec4 textureColor = texture2D(uTexture, vUv);\n\ngl_FragColor = textureColor;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>ここに、波の高さとして受け取っている \u003Ccode>vElevation\u003C\u002Fcode> を掛けます。\u003C\u002Fp>\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\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>textureColor.rgb\u003C\u002Fcode> は、テクスチャーの \u003Ccode>r\u003C\u002Fcode>、\u003Ccode>g\u003C\u002Fcode>、\u003Ccode>b\u003C\u002Fcode> の値です。\u003Cbr>ここに \u003Ccode>vElevation\u003C\u002Fcode> を使った値を掛けることで、波の高い部分と低い部分で明るさが変わります。\u003C\u002Fp>\u003Cp>\u003Ccode>vElevation * 1.5 + 0.5\u003C\u002Fcode> のうち、\u003Ccode>1.5\u003C\u002Fcode> は\u003Cstrong>明暗の差を強めるための値\u003C\u002Fstrong>です。\u003Cbr>\u003Ccode>0.5\u003C\u002Fcode> は、\u003Cstrong>全体が暗くなりすぎないようにするための調整\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>これで、ただ画像を貼るだけでなく、\u003Cstrong>波の動きに合わせてテクスチャーの見え方も変化\u003C\u002Fstrong>するようになります。\u003Cbr>Vertex Shader で計算した高さを Fragment Shader の色計算にも使うことで、より立体感のある表現に近づけられます。\u003C\u002Fp>\u003Ch3 id=\"hbc3f367c71\">応用例：GPGPU と Flow Field\u003C\u002Fh3>\u003Cp>シェーダーを応用すると、大量のパーティクルを動かすような表現にもつなげられます。\u003Cbr>その一例が、\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FGPGPU\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>GPGPU\u003C\u002Fstrong>\u003C\u002Fa> と \u003Cstrong>Flow Field\u003C\u002Fstrong> を使った表現です。\u003C\u002Fp>\u003Cp>\u003Cstrong>GPGPU は、描画だけでなく計算処理にも GPU を活用する手法\u003C\u002Fstrong>です。\u003Cbr>\u003Cstrong>Flow Field は、空間上に「どの方向へ進むか」という流れを作り、パーティクルをその流れに沿って動かす考え方\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002F4IZ-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\u002Fiframe>\u003C\u002Fdiv>\u003Cp>\u003Cbr>このようなパーティクル表現は、\u003Cstrong>以前ご紹介したピエール・エルメ・パリ「NOËL」特設サイトの演出\u003C\u002Fstrong>にも使われています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fnoel2025\u002F\" data-iframely-url=\"https:\u002F\u002Fiframely.net\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fnoel2025%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fiframely.net\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>シェーダーを使うと、頂点の位置やフラグメントの色を自分で計算し、Three.js の標準 Material だけでは難しい表現を作ることができます。\u003C\u002Fp>\u003Cp>今回は、\u003Cstrong>Vertex Shader で平面の頂点を動かし、\u003C\u002Fstrong>\u003Ccode>uniform\u003C\u002Fcode>\u003Cstrong> で時間を渡してアニメーション\u003C\u002Fstrong>させました。\u003Cbr>さらに、その高さ情報を Fragment Shader に渡すことで、\u003Cstrong>色やテクスチャーの見え方にも反映\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Cp>GLSL の記述や座標変換など、最初は難しく感じる部分もあります。\u003Cbr>一方で、\u003Cstrong>少ないコードでも見た目に大きな変化を出せるのが、シェーダーの面白いところ\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>さらに発展させると、今回最後に触れたような大量のパーティクル表現にもつながります。\u003Cbr>このあたりは奥が深いので、また別の機会に詳しく紹介できればと思います。\u003C\u002Fp>","Vertex Shader と Fragment Shader の基本から、頂点の変形、色の制御、テクスチャー、GPGPU を使ったパーティクル表現まで、Three.js の実装例を通してシェーダーによるWeb表現の仕組みを紹介します。",[51,53,55,57,59,61],{"id":52},"noel2025",{"id":54},"visualizer",{"id":56},"svg-animation",{"id":58},"vite",{"id":60},"view-transition-api",{"id":62},"claude-code-perl-typescript-migration",{"id":62,"createdAt":64,"updatedAt":65,"publishedAt":66,"revisedAt":65,"title":67,"tag":68,"recommended_articles":78,"eyecatch":84,"heading_list":15,"content2":88,"description":89,"related_articles":90,"recruit":15,"cta_url":103,"is_html":15,"is_migration":15},"2026-05-29T08:21:55.189Z","2026-07-22T08:32:05.786Z","2026-06-02T01:45:24.758Z","テストがない 10 万行の Perl システムを、Claude Code で TypeScript へ書き換えた話",[69,71,73,75,76],{"id":70},"ai",{"id":72},"typescript",{"id":74},"backend",{"id":41},{"id":77},"promotion",[79,80,82],{"id":52},{"id":81},"design-project-1",{"id":83},"nazotoki",{"url":85,"height":86,"width":87},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1632b87e5aaa4944a854ccc430cdb89e\u002F%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81.png",941,1672,"\u003Ch2 id=\"h586b90d155\">「AI が書いたコード、読んでますか？」\u003C\u002Fh2>\u003Cp>最近よく見かけるこの議論に、正直に答えます。\u003C\u002Fp>\u003Cp>\u003Cstrong>全部は読んでいません。10 万行、読みきれません。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>これは無責任に聞こえるかもしれません。「AI が書いたコードの 80% は負債だ」という研究もありますし、「理解していないコードをリリースするな」という意見はもっともだと思います。\u003C\u002Fp>\u003Cp>ただ、10 万行のコードを1行ずつ目で追って品質を担保するのは、\u003Cstrong>現実的に難しい\u003C\u002Fstrong>ですよね。人間が書いたコードでも、全行レビューはしていないはずです。\u003C\u002Fp>\u003Cp>じゃあどうしたか。\u003C\u002Fp>\u003Cp>\u003Cstrong>読む代わりに、検証する仕組みを作りました。 AI に書かせたコードを、AIに検証させ続ける\u003C\u002Fstrong>。24 時間、何百ラウンドも、バグが出なくなるまで。読んで理解する代わりに、正しさを証明する。\u003C\u002Fp>\u003Cp>この記事は、その話です。\u003C\u002Fp>\u003Ch2 id=\"h90ca2bc41d\">前提：テストがほぼない\u003C\u002Fh2>\u003Cp>私が担当しているのは、ある企業の EC サイトのバックエンドです。\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.perl.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">Perl\u003C\u002Fa> で書かれていて、10 年以上動いています。認証、注文、決済、予約、LINE連携、クーポン。\u003Cstrong>API のエンドポイントは 133 個\u003C\u002Fstrong>あります。\u003C\u002Fp>\u003Cp>そしてこのコードベースには、\u003Cstrong>まともな自動テストがほぼありませんでした。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>初めてソースを開いたときのことは覚えています。10 年分のビジネスロジックがぎっしり詰まっていて、でもそれを検証する手段が何もない。仕様書もない。何かを変えたとき、壊れたかどうかを知る方法がない。よくこれで 10 年動いてきたなと、率直に思いました。\u003C\u002Fp>\u003Cp>\u003Cstrong>これを \u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.typescriptlang.org\u002Fja\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>TypeScript\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> に書き換えろ、というのが今回のミッション\u003C\u002Fstrong>でした。\u003C\u002Fp>\u003Ch2 id=\"h460484bf92\">普通にやったら詰みます\u003C\u002Fh2>\u003Cp>テストのないコードの移植は、ソフトウェアエンジニアリングでも最悪の部類に入る仕事です。\u003C\u002Fp>\u003Cp>教科書的にやるなら、まず既存の Perl コードにテストを書きます。挙動を固めてから、TypeScript で書き直す。でも 10 年分のコードにテストを書く工数は、移植そのものと同じかそれ以上かかります。しかも、Perl の挙動をちゃんと理解してテストに落とせる人材は限られています。\u003C\u002Fp>\u003Cp>詰んでます。\u003C\u002Fp>\u003Ch2 id=\"h4677704352\">Claude Code に「書かせる」のは1週間で終わりました\u003C\u002Fh2>\u003Cp>Claude Code には、\u003Cstrong>カスタムスラッシュコマンド\u003C\u002Fstrong>という機能があります。\u003Cstrong>自分でコマンドを定義して、繰り返し使える仕組み\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>私はまず \u003Ccode>\u002Fmigrate-endpoint\u003C\u002Fcode> というコマンドを作りました。\u003C\u002Fp>\u003Cp>Perl のコントローラのファイルパスを渡すと、Claude Code が関連するモデルやエンティティ、DB スキーマまで全部読みに行って、TypeScript の実装コードとテストを一気に生成してくれます。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F285f776615bd4583a5177b8d1c440a90\u002Fmigrate-endpoint-flow.png\" alt=\"\" width=\"1448\" height=\"1086\">\u003C\u002Ffigure>\u003Cp>\u003Cstrong>テストがないなら、テストごと作ればいい。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>この割り切りで、\u003Cstrong>移植前にテストを書くという工程を丸ごとスキップ\u003C\u002Fstrong>できました。\u003C\u002Fp>\u003Cp>133 エンドポイント、約 10 万行。実装が終わるまで、約 1 週間でした。最初のエンドポイントが動いたときは「本当にこれでいけるのか？」という気持ちが正直ありましたが、\u003Cstrong>2 つ目、3 つ目と進むうちに、コマンドの精度がどんどん上がっていく\u003C\u002Fstrong>のがわかりました。\u003C\u002Fp>\u003Ch2 id=\"h1a681fd8e2\">でも「書けた」は「正しい」じゃない\u003C\u002Fh2>\u003Cp>1 週間で 10 万行。数字だけ見ればすごいです。\u003C\u002Fp>\u003Cp>でも、テストのほぼない Perl から移植したコードです。\u003Cstrong>「動くけど微妙に違う」コードが量産されている可能性\u003C\u002Fstrong>は大いにあります。\u003C\u002Fp>\u003Cp>Perl は未定義値を空文字やゼロとして黙って処理します。TypeScript ではそうはいきません。タイムゾーンの扱いも違う。数値と文字列の暗黙変換もある。こういう差異は、普通のテストでは見つかりません。\u003C\u002Fp>\u003Cp>そこで、これも仕組みで解決することにしました。\u003C\u002Fp>\u003Ch2 id=\"h7480bb35d9\">パリティ監査という仕組みを作りました\u003C\u002Fh2>\u003Cp>もう 1 つのカスタムコマンド、\u003Ccode>\u002Fparity-audit\u003C\u002Fcode> を作りました。\u003C\u002Fp>\u003Cp>やることはシンプルです。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Perl のコードと TypeScript のコードを突き合わせて、挙動の差異を見つける\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>差異があればバグとして修正し、テストを追加する\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>このコマンドを実行すると、\u003Cstrong>1 ラウンドで 20 の AI エージェントが並列に起動\u003C\u002Fstrong>し、それぞれが違う切り口でコードを調べていきます。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fe1d8b1dc72f44fcf9f367d8dc3b852b9\u002Fparity-audit-flow.png\" alt=\"\" width=\"1447\" height=\"1087\">\u003C\u002Ffigure>\u003Cp>あるエージェントはエンドポイント単位で、リクエストからレスポンスまでのコードパスを 1 行ずつ比較しています。別のエージェントは DB アクセス層を見ていて、クエリの条件やソート順、NULL の扱いをチェックしています。\u003C\u002Fp>\u003Cp>決済まわりを専門で見るエージェントもいます。税計算、クーポン適用、支払いステータス。1 円でもズレたらアウトの領域です。認証・セッション管理を集中的に検証するエージェントもいて、ログインや SSO、MFA といったセキュリティに直結する処理を重点的に見ます。\u003C\u002Fp>\u003Cp>日時処理、暗号化、バーコード生成といった「言語が変わると挙動が変わりやすい」ユーティリティも、専用のエージェントが横断的にチェックしています。\u003C\u002Fp>\u003Cp>これだけの観点を人間が毎回カバーするのは、まず無理だと思います。\u003C\u002Fp>\u003Ch2 id=\"h9def901947\">「10回連続クリーン」になるまで止めません\u003C\u002Fh2>\u003Cp>パリティ監査には、1 つ\u003Cstrong>ルール\u003C\u002Fstrong>を課しました。\u003C\u002Fp>\u003Cp>\u003Cstrong>連続10回、差異ゼロが出るまで回し続ける。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>1ラウンドでもバグが見つかったら、カウンタはゼロに戻ります。修正して、また最初から。10 回連続でクリーンになって、初めて「OK」です。\u003C\u002Fp>\u003Cp>このコマンドを夜間も含めて走らせ続けました。\u003C\u002Fp>\u003Cp>\u003Cstrong>2.5 ヶ月間。\u003C\u002Fstrong>\u003C\u002Fp>\u003Ch2 id=\"h29bb0ce50d\">監査 379 ラウンド、800件以上のバグを修正\u003C\u002Fh2>\u003Cp>結果として、\u003Cstrong>379 ラウンドの監査を回し、800 件以上のバグ\u003C\u002Fstrong>を見つけて直しました。\u003C\u002Fp>\u003Cp>最初のほうはラウンドごとにバグが山のように出てきて、正直なところ気が遠くなりました。でも修正を重ねるうちに、だんだんクリーンなラウンドが増えてきます。連続クリーンが 5 回、6 回と伸びていくのを見ているときは、ちょっとした達成感がありました。\u003C\u002Fp>\u003Cp>中には、\u003Cstrong>移植元の Perl 側に何年も潜んでいたバグが見つかったケースも\u003C\u002Fstrong>ありました。テストがなかったから、誰も気づかなかったバグです。\u003Cstrong>パリティ監査がなければ、そのまま TypeScript 側にも引き継がれていた\u003C\u002Fstrong>でしょう。\u003C\u002Fp>\u003Ch2 id=\"h3884ede80a\">これで何が変わったか\u003C\u002Fh2>\u003Cp>移植前と移植後で、テストの状況は一変しました。\u003C\u002Fp>\u003Cp>\u003Cstrong>移植後のテストは 1,419 件。\u003C\u002Fstrong> しかも全部パスしています。移植プロジェクトとしてだけでなく、テスト資産の構築としても大きな成果だと思っています。\u003C\u002Fp>\u003Cp>そして、1,419 件のテストがあるということは、ここからのリファクタリングが容易になるということでもあります。\u003Cstrong>テストがなかった頃は怖くて触れなかったコードを、安心して改善できる。\u003C\u002Fstrong>移植がゴールではなく、ここからがスタートです。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ffaaa3c46c0cf4ac6b95524e19d81e50c\u002Fmigration-audit-results.png\" alt=\"\" width=\"1448\" height=\"1086\">\u003C\u002Ffigure>\u003Ch2 id=\"h49ccabfba5\">そして、人間の手で確かめました\u003C\u002Fh2>\u003Cp>\u003Cstrong>最後に、フロントエンドとつないで E2E テスト\u003C\u002Fstrong>をしました。\u003C\u002Fp>\u003Cp>これは人間が手で動かすテストです。実際のブラウザで、実際の画面を操作して、注文を入れて、決済して、予約して。AI ではなく、人間の目と手で確かめました。\u003C\u002Fp>\u003Cp>\u003Cstrong>不具合は見つかりませんでした。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>10 万行。テストがほぼない状態からの移植。AI が書いて、AI が検証して、最後に人間が触って、壊れていなかった。\u003C\u002Fp>\u003Cp>正直、自分でもちょっと信じられませんでした。\u003C\u002Fp>\u003Ch2 id=\"h42e2556fbc\">Claude Codeの使い方として伝えたいこと\u003C\u002Fh2>\u003Cp>この経験を通じて、Claude Code の使い方について 3 つのことがわかりました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>カスタムコマンドで「仕組み」にする\u003C\u002Fstrong>\u003Cul>\u003Cli>属人的な「上手いプロンプトの書き方」ではなく、誰でも実行できるコマンドとして定義します。これで品質が人に依存しなくなります。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Ca href=\"http:\u002F\u002FCLAUDE.md\">\u003Cstrong>CLAUDE.md\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> に知識を貯める\u003C\u002Fstrong>\u003Cul>\u003Cli>プロジェクト固有のルール（アーキテクチャ、命名規則、エラーコードなど）を CLAUDE.md ファイルに書いておきます。セッションが変わっても、Claude Code はこれを読んでくれます。移植が進むほどこのファイルが育ち、後半フェーズほど手戻りが減りました。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>品質保証を「計算資源」の問題にする\u003C\u002Fstrong>\u003Cul>\u003Cli>1 ラウンド 20 エージェント × 379 ラウンド。この物量の検証を人間がやるのは無理です。でもコマンドにして 24 時間回せば、品質保証は工数の問題ではなく計算資源の問題になります。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"h5b6299b788\">「読んでない」のその先へ\u003C\u002Fh2>\u003Cp>冒頭に戻ります。\u003C\u002Fp>\u003Cp>\u003Cstrong>AI が書いたコード、読んでますか？\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>私の答えは変わりません。全部は読んでいません。でも、全部検証しました。20 エージェント並列で、379 ラウンド、800 件のバグを潰して、最後に人間の手で E2E テストして、不具合ゼロ。\u003C\u002Fp>\u003Cp>もちろん、コードを読んで理解すること自体の価値を否定するつもりはありません。ただ、「読む」以外にも品質を担保する手段はあるはずです。\u003C\u002Fp>\u003Cp>\u003Cstrong>読むか読まないかではなく、正しさをどう証明するか。\u003C\u002Fstrong> その仕組みを設計できるかどうかが、AI 時代のエンジニアリングで問われることなんじゃないかと思っています。\u003C\u002Fp>\u003Ch2 id=\"hc96909f29a\">この 3 ヶ月は長いのか\u003C\u002Fh2>\u003Cp>AI コーディングの事例として、「数時間でアプリを作った」「週末で完成した」といった話をよく見かけます。それと比べると、3 ヶ月という数字は地味に映るかもしれません。\u003C\u002Fp>\u003Cp>でも、考えてみてください。\u003Cstrong>テストのほぼない 10 万行のプロダクションコードを、133 エンドポイントの挙動を 1 つも壊さずに別言語へ移植\u003C\u002Fstrong>する。普通にやったら 1 年はかかるプロジェクトです。見積もりの段階で「現実的じゃない」と却下されてもおかしくない。\u003C\u002Fp>\u003Cp>\u003Cstrong>それを 3 ヶ月で、しかも人間の E2E テストで不具合ゼロという品質で完遂\u003C\u002Fstrong>できました。\u003C\u002Fp>\u003Cp>同じような課題を抱えている方は、少なくないと思います。テストのないレガシーシステム、移植したいけど踏み切れない、人手も時間も足りない。今回のアプローチは、そうしたプロジェクトにも十分に適用できると考えています。\u003C\u002Fp>\u003Cp>\u003Cstrong>レガシーシステムの移行でお困りの方がいらっしゃれば、ぜひご相談ください。\u003C\u002Fstrong>\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Chr>\u003Cp>\u003Cspan style=\"color: #6c6c6c\">注記：本記事で紹介した \u003C\u002Fspan>\u003Ccode>\u002Fmigrate-endpoint\u003C\u002Fcode>\u003Cspan style=\"color: #6c6c6c\">、\u003C\u002Fspan>\u003Ccode>\u002Fparity-audit\u003C\u002Fcode>\u003Cspan style=\"color: #6c6c6c\"> は Claude Code のカスタムスラッシュコマンド機能で構築したものです。\u003C\u002Fspan>\u003C\u002Fp>","テストがほぼない10万行のPerl製ECバックエンドを、Claude Codeを使ってTypeScriptへ移植。カスタムコマンドによる実装生成とパリティ監査で、379ラウンドの検証、800件以上のバグ修正、1,419件のテスト構築まで行った取り組みを紹介します。",[91,93,95,97,99,101],{"id":92},"ai-generated-campaign-site",{"id":94},"event-ai-agent",{"id":96},"bird-classification-2",{"id":98},"edge-ai",{"id":100},"ux-certification-basics",{"id":102},"figma-plugin","https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fshader-basics\u002F",{"id":83,"createdAt":105,"updatedAt":106,"publishedAt":107,"revisedAt":106,"title":108,"tag":109,"recommended_articles":114,"eyecatch":115,"heading_list":22,"content2":119,"description":120,"related_articles":121,"recruit":15,"is_html":15,"is_migration":15},"2026-03-17T06:24:17.497Z","2026-05-14T08:26:35.257Z","2026-03-30T08:35:07.001Z","Web サイトを使った謎解きを作ってみた",[110,111,112,113],{"id":11},{"id":17},{"id":24},{"id":70},[],{"url":116,"height":117,"width":118},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1237f7caf6704f568fb90b1c3c65bcd3\u002Fs2-nazotoki.png",1201,1944,"\u003Cp>毎朝飲んでるトマトジュースがついに40円も値上げしてしまいました…。\u003C\u002Fp>\u003Cp style=\"text-align: start\">この記事は、社内イベント「\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ftea\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C\u002Fu>\u003C\u002Fa>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社の \u003Ca href=\"https:\u002F\u002Fx.com\u002Fs2_takano\" target=\"_blank\" rel=\"noopener noreferrer\">takano\u003C\u002Fa> が、\u003Cstrong>「謎解き」\u003C\u002Fstrong>をテーマに発表を行いました。\u003C\u002Fp>\u003Chr>\u003Cp>\u003Cbr>もともと謎解きが好きで、街歩き型のイベントや脱出ゲームなどにもよく参加しているほか、また最近では、自宅で遊べるキット型の謎解きなどにも手を出しています。\u003C\u002Fp>\u003Cp>その流れで、\u003Cstrong>今回自分でも謎解きを作ってみました。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>「謎解き」と言われても、あまり馴染みがないとイメージしづらいかもしれません。\u003Cbr>そもそも謎解きとはどういうものなのか。そこから説明したいと思います。\u003C\u002Fp>\u003Ch2 id=\"heb6bf4fdb1\">謎解きとは\u003C\u002Fh2>\u003Cp>まずはクイズとの違いから見てみます。\u003Cbr>たとえば、こんな問題です。\u003C\u002Fp>\u003Cblockquote>\u003Cp>\u003Cstrong>小田原北条氏の三代目は氏康ですが、その三男は北条氏照です。\u003Cbr>では、彼が築いた八王子にある山城といえば？\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp>答えは「\u003Cspan style=\"color: #ffffff\">八王子城\u003C\u002Fspan>」。\u003Cbr>\u003Cbr>この問題は、知識がないと解くことができません。\u003Cbr>一方で、謎解きは少し性質が異なります。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F01968bad337e4b32a6ea03bd0288fd8e\u002F%E8%AC%8E%E8%A7%A3%E3%81%8D%E8%BF%B7%E8%B7%AF.png?w=450&h=402\" alt=\"謎解き迷路\" width=\"450\" height=\"402\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>この問題を解くと、\u003Cspan style=\"color: #000000\">「\u003C\u002Fspan>\u003Cspan style=\"color: #ffffff\">ウジテル\u003C\u002Fspan>\u003Cspan style=\"color: #000000\">」\u003C\u002Fspan>という答えが出てきます。\u003Cbr>\u003Cbr>\u003Cstrong>クイズが知識を前提にしているのに対して、謎解きは問題の中にある法則やヒントに気づく(閃く)ことで、答えにたどり着きます。\u003C\u002Fstrong>北条氏照という人物を知らなくても解ける。これが、クイズと謎解きの大きな違いです。\u003C\u002Fp>\u003Cp>考えても分からない時間があって、\u003Cstrong>ふと気づく瞬間\u003C\u002Fstrong>がある。\u003Cstrong>その体験が、謎解きの面白さ\u003C\u002Fstrong>につながっています。\u003C\u002Fp>\u003Ch3 id=\"hd0bb2aed17\">謎解きの広がり\u003C\u002Fh3>\u003Cp>謎解きの起源については諸説ありますが、主な流れを整理すると以下の通りです。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>1997年頃：\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.scrapmagazine.com\u002Fcolumn\u002Fwakuwaku01\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>株式会社SCRAP代表が親戚の集まりで宝探しイベントを始める\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Cstrong>2001年：リアル宝探しの開始(タカラッシュ)\u003C\u002Fstrong>\u003Cul>\u003Cli>現実空間で楽しむ謎解きが登場。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>2004年：『\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E8%84%B3%E5%86%85%E3%82%A8%E3%82%B9%E3%83%86_IQ%E3%82%B5%E3%83%97%E3%83%AA\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>脳内エステ IQサプリ\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>』放送開始\u003C\u002Fstrong>\u003Cul>\u003Cli>テレビ放送としての謎解きの原点ともいえる存在です。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>2004年：『\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fy.honkakuha.success-games.net\u002Fgame\u002Fsu-56-crimsonroom\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>クリムゾン・ルーム\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>』公開\u003C\u002Fstrong>\u003Cul>\u003Cli>Flashゲームとして話題になり、脱出ゲームの原点のひとつとされています。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>2007年：リアル脱出ゲーム初開催(SCRAP)\u003C\u002Fstrong>\u003Cul>\u003Cli>体験型イベントとして一気に広がります。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>2012年：\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.newsweekjapan.jp\u002Fstories\u002Fbusiness\u002F2015\u002F06\u002Fpost-3675_3.php\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>海外展開\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>(サンフランシスコなど)\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>2017年：\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fcorp.eplus.jp\u002Fpress-release\u002Fdetail\u002F20171102.html\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>東京ミステリーサーカス オープン\u003C\u002Fstrong>\u003C\u002Fa>\u003Cul>\u003Cli>新宿歌舞伎町に脱出ゲームや謎解きが楽しめる常設施設が誕生。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>2019年：来場者100万人突破(東京ミステリーサーカス)\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>2019年：\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Friddler.co.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>RIDDLER株式会社\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>設立\u003C\u002Fstrong>\u003Cul>\u003Cli>謎解きを軸に、さまざまなメディアで体験を企画・制作するクリエイター集団。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>このように、謎解きは年々盛り上がりを見せており、現在では大きな\u003Cstrong>ブーム\u003C\u002Fstrong>となっています。\u003C\u002Fp>\u003Cp>たとえば、株式会社SCRAPが手がけるリアル脱出ゲームは累計参加者1,500万人を突破し、大規模な体験型イベントとして定着しました。\u003Cbr>また、「\u003Ca href=\"https:\u002F\u002Frealdgame.jp\u002Fs\u002Fchikanazo2025\u002F?link=enjoy\" target=\"_blank\" rel=\"noopener noreferrer\">地下謎への招待状\u003C\u002Fa>」のように、\u003Cstrong>鉄道や街全体を使った、日常の移動や街歩きそのものがゲームとなる企画も登場\u003C\u002Fstrong>し、多くの参加者を集めています。\u003C\u002Fp>\u003Cp>それだけでなく、\u003Cstrong>企業向けのチームビルディング研修\u003C\u002Fstrong>などにも取り入れられ、エンタメにとどまらない形でも活用されています。\u003C\u002Fp>\u003Ch2 id=\"h88ea32f50f\">実際に謎解きを作ってみた\u003C\u002Fh2>\u003Cp>謎解きにハマってからというもの、脱出ゲームや街歩き型の謎解き、キットを購入して遊ぶタイプのものなど、\u003Cstrong>いろいろと遊んできました\u003C\u002Fstrong>。そのうちに自分でも作ってみたくなり、実際に作ってみました。\u003Cbr>\u003Cbr>実は最近、トップページをリニューアルしたこともあり、せっかくならその内容も見てもらえるような形にできないかと思い、\u003Cstrong>Web サイトを見ながら進める謎解き\u003C\u002Fstrong>を作ってみることにしました。\u003C\u002Fp>\u003Ch3 id=\"h339271c395\">ストーリーとキーワードの設定\u003C\u002Fh3>\u003Cp>ストーリーについては、\u003Cstrong>「こういうことをやりたい」という方向性\u003C\u002Fstrong>を決めて、\u003Ca href=\"https:\u002F\u002Fgemini.google.com\u002Fapp?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer\">Gemini\u003C\u002Fa> に投げて考えてもらいました。\u003C\u002Fp>\u003Cp>あわせて、伝えたいキーワードも先に決め、それを最終的な答えとして設計しています。\u003Cbr>\u003Cstrong>どのように解くとその答えにたどり着くのか\u003C\u002Fstrong>という流れも、この段階で考えました。\u003C\u002Fp>\u003Cp>今回の謎解きページは、\u003Cstrong>Web サイトのログイン画面をイメージ\u003C\u002Fstrong>しています。\u003Cbr>各問題を解きながら情報を集め、最終的に導き出した答えをログイン用の\u003Cstrong>パスワード\u003C\u002Fstrong>として入力することでクリア！という構成にしています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1237f7caf6704f568fb90b1c3c65bcd3\u002Fs2-nazotoki.png\" alt=\"\" width=\"1944\" height=\"1201\">\u003C\u002Ffigure>\u003Ch3 id=\"ha572ddd150\">謎の設計\u003C\u002Fh3>\u003Cp>最終的な答えの文字数などから、\u003Cstrong>全体の STEP 数\u003C\u002Fstrong>を決めています。\u003C\u002Fp>\u003Cp>Webサイトを見てもらうことが目的だったため、\u003Cstrong>サイトを見ながら答えにたどり着くような問題\u003C\u002Fstrong>を中心にしたいと考えていました。ただ、実際に作ってみると難しく、途中でその方針を維持するのが難しくなり、\u003Cstrong>完全にはやりきれず…\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cp>ちなみにの話ですが、謎を作るうえで便利だったのが「\u003Ca href=\"https:\u002F\u002Fshiwehi.com\u002Ftools\u002Fwordsearch\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">謎解き単語検索β\u003C\u002Fa>」です。\u003Cbr>答えに「ネコ」を使いたいがそのまま見せたくない場合に、「?ねこ?」のように指定すると、前後に文字を加えた単語を辞書から探してくれます。\u003C\u002Fp>\u003Ch3 id=\"h922edff87b\">実装\u003C\u002Fh3>\u003Cp>\u003Cstrong>謎解きに使った画像は Google Slide で作成し、それをWebページに落とし込む作業は \u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fantigravity.google\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Antigravity\u003C\u002Fstrong>\u003C\u002Fa> で行いました。\u003C\u002Fp>\u003Cp>実装では、\u003Cstrong>ネタバレ防止\u003C\u002Fstrong>の工夫に特に気を使っています。\u003Cbr>ソースコードから答えが分かってしまわないように \u003Cstrong>Hash\u003C\u002Fstrong> を使うように指示したり、次のメッセージが先に見えてしまわないよう、\u003Cstrong>動的に JavaScript ファイルを読み込む仕組み\u003C\u002Fstrong>にしています。\u003C\u002Fp>\u003Cp>また、スクロールスピードや文字をタイプしているような演出についても細かく指示を出し、\u003Cstrong>体験として違和感が出ないように調整\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Ch3 id=\"h98ba4996ba\">デバッグ\u003C\u002Fh3>\u003Cp>まず、\u003Cstrong>脱出ゲームに慣れているスタッフにデバッグを依頼\u003C\u002Fstrong>しました。\u003Cbr>その中で、間違いや別解の発生、分かりづらい箇所などの指摘を受け、内容や画像を修正しています。\u003C\u002Fp>\u003Cp>その後、別のスタッフにも解いてもらい、さらに\u003Cstrong>ブラッシュアップ\u003C\u002Fstrong>を行いました。\u003Cbr>人によって詰まるポイントが異なる部分もあったため、\u003Cstrong>最終的には少し難易度を下げる方向で調整\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Ch3 id=\"h785b0e1177\">公開\u003C\u002Fh3>\u003Cp>\u003Cstrong>最終的にAnalyticsの設定やインフラの準備も行い、公開\u003C\u002Fstrong>しました。\u003C\u002Fp>\u003Ch2 id=\"h1331c56b22\">作ってみた感想\u003C\u002Fh2>\u003Cp>本来の仕事であるコーディングと近い部分もあり、普段とは違う形で頭を使うのが新鮮で楽しかったです。\u003C\u002Fp>\u003Cp>遊んでいる人の様子をリアルタイムで見られたら、どこで悩んでいるのか、どう進めているのかなども分かって面白かったのではないかと思います。\u003Cbr>今回はそこまで設計できていませんでしたが、\u003Cstrong>Analytics の取り方\u003C\u002Fstrong>を工夫すれば、どこで詰まっているのかといった\u003Cstrong>ユーザーの動きも可視化\u003C\u002Fstrong>できそうだと感じました。\u003C\u002Fp>\u003Cp>一方で、途中で力尽きてしまった部分もあり、当初考えていた\u003Cstrong>「Webサイトを見てもらいながら解いてもらう構成」を最後までやりきれなかった点は少し心残り\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>実際に作ってみて、これを仕事としてやっているプロの謎解きクリエイターのすごさを改めて実感しました。\u003Cbr>\u003Cbr>もしよければ、\u003Ca href=\"https:\u002F\u002Flab.s2factory.co.jp\u002Fnazo2026s\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>実際に遊んでみてもらえると\u003C\u002Fstrong>\u003C\u002Fa>幸いです。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Flab.s2factory.co.jp\u002Fnazo2026s\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?url=https%3A%2F%2Flab.s2factory.co.jp%2Fnazo2026s%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>","謎解きの基本から、Geminiを使ったストーリー設計やWebサイトを使った謎解きの制作プロセスまでを紹介。構成設計や実装、デバッグの工夫をまとめています。",[122,124,126,128,130,131],{"id":123},"vacation2024-missions",{"id":125},"office-humansensor",{"id":127},"toilet-sign",{"id":129},"game-development",{"id":98},{"id":94},{"url":133,"height":134,"width":135},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F8fe79ab758cb41b6871dee5591cfdbf5\u002Fdx-library-puzzle-game.jpg",1688,3000,"\u003Cp>ハーゲンダッツのCMに出たいです。\u003C\u002Fp>\u003Cp>この記事は、社内イベント「\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ftea\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">お茶会\u003C\u002Fa>」での発表内容をもとにまとめたものです。\u003Cbr>今回は、弊社の wataru が、\u003Cstrong>DXライブラリを使って作っている落ちものパズルゲーム\u003C\u002Fstrong>について発表しました。\u003C\u002Fp>\u003Chr>\u003Cp>\u003Cbr>普段はバックエンドのシステム開発をしているのですが、最近は息抜きに、普段あまり触れることのない UI やゲームの実装を試しながら、高校時代に作った落ちものパズルゲームを少しずつ作り直しています。\u003Cbr>というわけで今回は、\u003Cstrong>現在の実装状況をはじめ、DX ライブラリを使った描画・入力処理や、今後試してみたいこと\u003C\u002Fstrong>について紹介したいと思います。\u003C\u002Fp>\u003Ch2 id=\"h0574876bfe\">落ちものパズルゲームを作り直す\u003C\u002Fh2>\u003Cp>高校生の頃、コンピュータ部の出し物として文化祭に展示しようと、\u003Ca href=\"https:\u002F\u002Fja.cppreference.com\u002Fc\" target=\"_blank\" rel=\"noopener noreferrer\">C 言語\u003C\u002Fa>と \u003Ca href=\"https:\u002F\u002Fdxlib.xsrv.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>DX ライブラリ\u003C\u002Fstrong>\u003C\u002Fa>を使って\u003Cstrong>落ちものパズルゲーム\u003C\u002Fstrong>を作り始めました。\u003Cbr>文化祭には間に合わなかったものの、その後も少しずつコードを修正。最終的には、一通り遊べる状態まで完成させました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002Fik9MOwHc4VE?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\" referrerpolicy=\"strict-origin\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Cp>\u003Cbr>その後は長らく触っていませんでしたが、最近、\u003Cstrong>ブロックの形状や回転状態を以前より整理して定義\u003C\u002Fstrong>できそうだと思い、久しぶりに作り直してみることにしました。\u003Cbr>現在は当時のコードを改修するのではなく、一から書き直しています。\u003C\u002Fp>\u003Ch2 id=\"hb404b0ecc8\">DX ライブラリを使ったゲームの実装\u003C\u002Fh2>\u003Ch3 id=\"hb913cd443e\">現在の実装状況\u003C\u002Fh3>\u003Cp>現在は基本的な操作や処理を実装し、\u003Cstrong>ひとまず遊べる状態\u003C\u002Fstrong>まで進んでいます。\u003C\u002Fp>\u003Cp>実装できているのは、主に次の機能です。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>ピースの移動\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ピースの回転\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>落下と固定\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>次に出てくるピースの表示\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>まだ作り直し始めたばかりなので、\u003Cstrong>操作中のピースが意図しない形に変わったり、正しく回転しなかったりするバグ\u003C\u002Fstrong>も残っています。\u003Cbr>今は、こうしたバグを直しながら基本動作を整えているところです。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FfelBQ7YJbVc?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\" referrerpolicy=\"strict-origin\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch3 id=\"ha78b91dcfe\">DX ライブラリとは\u003C\u002Fh3>\u003Cp>\u003Ca href=\"https:\u002F\u002Fdxlib.xsrv.jp\u002F\">\u003Cstrong>DX ライブラリ\u003C\u002Fstrong>\u003C\u002Fa>は、\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FMicrosoft_DirectX\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>DirectX\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> や Windows に関する複雑な処理を、比較的簡単な関数で扱えるようにした \u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FC%2B%2B\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>C++\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> 用のゲームライブラリ\u003C\u002Fstrong>です。C++ 用ではありますが、C 言語の知識を使って開発できます。\u003C\u002Fp>\u003Cp>Windows には、画像や 3DCG、音声などを扱うための DirectX という API 群があります。DirectX の開発キットをそのまま使う場合、さまざまな設定や複雑なコードが必要です。DX ライブラリを利用することで、こうした処理を簡略化し、ゲーム本体の実装に集中しやすくなります。\u003C\u002Fp>\u003Cp>DX ライブラリは 2001 年に公開され、現在も更新が続いています。Windows のほか、Android・iOS 向けのライブラリも配布されており、Nintendo Switch、PlayStation 4、PlayStation Vita にも対応しています。\u003C\u002Fp>\u003Cp>\u003Cspan style=\"color: #838383\">※ 家庭用ゲーム機向けの利用には、各プラットフォームとの契約や「\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fplaydoujin.mediascape.co.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cspan style=\"color: #838383\">Play,Doujin!\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"color: #838383\">」への参加など所定の手続きが必要です。詳しくは、\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdxlib.xsrv.jp\u002Fdxswitch.html?utm_source=chatgpt.com\" target=\"_new\">\u003Cspan style=\"color: #838383\">こちら\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"color: #838383\">をご覧ください。\u003C\u002Fspan>\u003C\u002Fp>\u003Cp>扱える機能も幅広く、主なものだけでも次のような機能があります。\u003C\u002Fp>\u003Ctable>\u003Ctbody>\u003Ctr>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>分類\u003C\u002Fp>\u003C\u002Fth>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>主な機能\u003C\u002Fp>\u003C\u002Fth>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>描画\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>線や図形、画像、文字、3D モデルなどの表示\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>画面\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>解像度やウィンドウモード、描画先の設定\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>入力\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Ccode>GetJoypadInputState\u003C\u002Fcode>を使った、キーボードやゲームパッドの入力状態の取得\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>音声・動画\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>効果音や BGM、動画の再生\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>公式サイトには、各関数の使い方を確認できる\u003Ca href=\"https:\u002F\u002Fdxlib.xsrv.jp\u002Fdxfunc.html\" target=\"_blank\" rel=\"noopener noreferrer\">関数リファレンス\u003C\u002Fa>や\u003Ca href=\"https:\u002F\u002Fdxlib.xsrv.jp\u002Fdxprogram.html\" target=\"_blank\" rel=\"noopener noreferrer\">サンプルプログラム\u003C\u002Fa>も用意されています。\u003C\u002Fp>\u003Ch3 id=\"h41dffbbfc1\">今回のゲームでの実装\u003C\u002Fh3>\u003Cp>DX ライブラリには多くの機能がありますが、今回のゲームで主に使っているのは、\u003Cstrong>画面表示と入力\u003C\u002Fstrong>に関する機能です。\u003C\u002Fp>\u003Cp>主な処理は次のとおり。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>画面の設定：\u003C\u002Fstrong> \u003Ccode>SetGraphMode\u003C\u002Fcode>で解像度や色数を指定。あわせて、ウィンドウモードで起動するよう設定\u003C\u002Fli>\u003Cli>\u003Cstrong>入力の取得：\u003C\u002Fstrong> キーボードやゲームパッドの入力を受け取り、ピースの操作に利用\u003C\u002Fli>\u003Cli>\u003Cstrong>画像の読み込み：\u003C\u002Fstrong> \u003Ccode>LoadDivGraph\u003C\u002Fcode>で1枚の画像を複数に分割して読み込む\u003C\u002Fli>\u003Cli>\u003Cstrong>画面の更新：\u003C\u002Fstrong> 裏画面に描画した内容を\u003Ccode>ScreenFlip\u003C\u002Fcode>で表画面に反映\u003C\u002Fli>\u003C\u002Ful>\u003Ch4 id=\"h01e5d42029\">\u003Cbr>\u003Cstrong>ブロック画像の読み込みと描画\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>ブロックの描画には、\u003Ccode>LoadDivGraph\u003C\u002Fcode>を使用しています。これは、複数のブロックをまとめた1枚の画像を、指定したサイズと数に分割して読み込むための関数です。\u003C\u002Fp>\u003Cp>分割した画像は、それぞれ\u003Cstrong>グラフィックハンドルと呼ばれる識別子で管理\u003C\u002Fstrong>されます。描画時には現在のピースに対応する画像を指定し、形状データに沿って繰り返し表示することで、画面上にピースを描いています。画像を表示する処理は、各クラスから呼び出す構成です。\u003C\u002Fp>\u003Ch4 id=\"h284fed8d12\">\u003Cbr>\u003Cstrong>裏画面を使ってちらつきを防ぐ\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>画面の描画には、\u003Cstrong>ダブルバッファリング\u003C\u002Fstrong>という方法を使っています。\u003C\u002Fp>\u003Cp>まず、\u003Ccode>SetDrawScreen\u003C\u002Fcode>で描画先を裏画面に設定します。必要な描画が終わったところで\u003Ccode>ScreenFlip\u003C\u002Fcode>を実行し、\u003Cstrong>裏画面の内容を表画面へまとめて反映\u003C\u002Fstrong>します。\u003Cbr>この方法によって描画途中の状態が表示されることを防ぎ、画面のちらつきを抑えています。\u003C\u002Fp>\u003Ch3 id=\"h090ff28f5a\">作りながら見直していること\u003C\u002Fh3>\u003Cp>今回は、ピースやフィールドをクラスに分け、\u003Cstrong>データと処理の役割\u003C\u002Fstrong>を意識しながらコードを書いています。\u003Cbr>移動や回転までは比較的スムーズに進みましたが、落下や固定の処理を加えると、次のような部分が複雑になってきました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>状態判定に使うフラグ\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>クラス間で受け渡す配列データ\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ピースのデータを書き換えるタイミング\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>前述のバグも、配列に格納したピースのデータが、どこかで書き換わっていることが原因のようです。\u003Cbr>現在はバグの原因を追いながら、クラスの役割やデータの受け渡し方を少しずつ整理しています。今後の機能も追加しやすい形にしていくつもりです。\u003C\u002Fp>\u003Ch2 id=\"h88738c86b4\">これから追加してみたい機能\u003C\u002Fh2>\u003Cp>まずは、消したライン数に応じてレベルが上がり、落下速度も速くなっていく基本モードを完成させる予定です。\u003Cbr>\u003Cstrong>SE や BGM も追加\u003C\u002Fstrong>したいと考えています。\u003C\u002Fp>\u003Cp>その後は、\u003Cstrong>遊び方の異なる複数のモード\u003C\u002Fstrong>を実装したいと考えています。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>タイムアタック：\u003C\u002Fstrong> 一定のレベルへ到達するまでの時間を計測する\u003C\u002Fli>\u003Cli>\u003Cstrong>対戦：\u003C\u002Fstrong> 1 台の PC で 2 人が同時に遊び、消したラインを相手へ送り合う\u003C\u002Fli>\u003Cli>\u003Cstrong>レース：\u003C\u002Fstrong> 一定のレベルへ先に到達したプレイヤーが勝利する。LAP などのレース要素も検討中\u003C\u002Fli>\u003C\u002Ful>\u003Cp>いずれは\u003Cstrong>ネットワーク対戦\u003C\u002Fstrong>にも挑戦してみたいと思っています。リアルタイムで進行するゲームでは\u003Cstrong>通信の遅延が発生するため、それを目立たせない方法\u003C\u002Fstrong>も考えてみたいところです。\u003C\u002Fp>\u003Cp>さらに余裕があれば、\u003Cstrong>ブラウザや Linux でも動かせるように\u003C\u002Fstrong>してみたいです。別の環境へ展開するには、ゲームの進行を管理するロジックと、画面の描画や入力を処理する部分を分けておかなければなりません。\u003C\u002Fp>\u003Cp>まずは Windows 版を作りながら、ピースのデータ構造や状態の持たせ方を整理し、ほかの環境にも移しやすい形にしていく予定です。\u003C\u002Fp>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>今回は、空いた時間に少しずつ作っている落ちものパズルゲームの現在の様子を紹介しました。\u003C\u002Fp>\u003Cp>DX ライブラリを使って、描画や入力、ダブルバッファリングなどを自分で実装していくなかで、\u003Cstrong>ゲームが動くまでの流れ\u003C\u002Fstrong>もあらためて確認できました。\u003C\u002Fp>\u003Cp>まだ制作途中ですが、これからも息抜きとして少しずつ手を加え、まずは皆さんに遊んでもらえる状態まで仕上げたいと思っています。このゲームがひと段落したら、次はシューティングゲームにも挑戦してみたいです。\u003C\u002Fp>","C++とDXライブラリを使って、空いた時間に制作している落ちものパズルゲームを紹介。画像の読み込みや描画、入力処理、落下・固定を加えるなかで見直している状態管理についてまとめています。",[139,163,178,200,218],{"id":140,"createdAt":141,"updatedAt":142,"publishedAt":143,"revisedAt":142,"title":144,"tag":145,"recommended_articles":149,"eyecatch":150,"heading_list":22,"content2":154,"description":155,"related_articles":156,"recruit":15,"is_html":15,"is_migration":15},"tetris","2025-09-22T06:56:41.677Z","2026-05-14T08:29:32.271Z","2025-10-10T09:05:01.278Z","テトリスの歴史をたどる、誕生から現代まで",[146,147,148],{"id":11},{"id":24},{"id":17},[],{"url":151,"height":152,"width":153},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc66486127a0e45348714832529bed112\u002F%E3%83%86%E3%83%88%E3%83%AA%E3%82%B9.jpg",1200,1600,"\u003Cp>事前にシミュレーションした通りにいかないことがほとんどです。\u003C\u002Fp>\u003Cp>この記事は、社内イベント「\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ftea\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C\u002Fu>\u003C\u002Fa>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社の wataru が\u003Cstrong>「テトリスの誕生とその歴史」\u003C\u002Fstrong>について話しました。\u003C\u002Fp>\u003Chr>\u003Cp>\u003Cstrong>1980年代の旧ソ連で生まれたテトリス\u003C\u002Fstrong>が、どのようにして国境を越え、多くの企業を巻き込みながら世界的な人気作品になっていったのか。\u003Cbr>今回は、\u003Cstrong>テトリスがどのように世界中に広がり、今に至るのか\u003C\u002Fstrong>を、歴史的な側面から紹介したいと思います。\u003C\u002Fp>\u003Ch2 id=\"h5a5b36a973\">テトリスとは\u003C\u002Fh2>\u003Cp>テトリスは、\u003Cstrong>縦20マス×横10マスのフィールドに「テトリミノ」と呼ばれる 7 種類のブロックを落としていき、横一列を揃えて消していくパズルゲーム\u003C\u002Fstrong>です。\u003Cbr>シンプルなルールながら、ブロックの積み方や消し方によって状況が大きく変わる戦略性があり、つい夢中になってしまう魅力があります。\u003C\u002Fp>\u003Cp>そのゲーム性の高さから、さまざまなハードに移植されて世界中で大ヒット。\u003Cbr>後に登場する『\u003Ca href=\"https:\u002F\u002Fpuyo.sega.jp\u002Fportal\u002Findex.html\" target=\"_blank\" rel=\"noopener noreferrer\">ぷよぷよ\u003C\u002Fa>』『\u003Ca href=\"https:\u002F\u002Fwww.sega.jp\u002Fmdmini\u002Fsoft\u002Fcolumns.html\" target=\"_blank\" rel=\"noopener noreferrer\">コラムス\u003C\u002Fa>』『\u003Ca href=\"https:\u002F\u002Fwww.nintendo.com\u002Fjp\u002Ffamicom\u002Fsoftware\u002Fhvc-vu\u002Findex.html\" target=\"_blank\" rel=\"noopener noreferrer\">ドクターマリオ\u003C\u002Fa>』など、いわゆる\u003Cstrong>「落ちものパズルゲーム」の原点\u003C\u002Fstrong>ともなりました。\u003C\u002Fp>\u003Cp>現在は、テトリスに関するライセンスを一括して管理する\u003Cstrong>ザ・テトリス・カンパニー\u003C\u002Fstrong>が存在し、\u003Cstrong>正式なライセンスを受けた企業のみがゲームを提供できる仕組み\u003C\u002Fstrong>になっています。\u003Cbr>また、\u003Cstrong>プレイ体験を一定に保つための\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%83%86%E3%83%88%E3%83%AA%E3%82%B9#%E3%82%AC%E3%82%A4%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>ガイドライン\u003C\u002Fstrong>\u003C\u002Fa>も定められており、それに準拠した仕様でなければライセンスは許可されません。\u003Cbr>\u003C\u002Fp>\u003Cp>\u003Cstrong>主なガイドライン項目\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>7種類のテトリミノ\u003C\u002Fstrong>と\u003Cstrong>それぞれの色指定\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ホールド機能\u003C\u002Fstrong>(一度だけ他のミノと入れ替えが可能)\u003C\u002Fli>\u003Cli>\u003Cstrong>ゴースト表示\u003C\u002Fstrong>(落下位置の影を表示)\u003C\u002Fli>\u003Cli>\u003Cstrong>SRS(Super Rotation System)\u003C\u002Fstrong> による共通の回転ルール\u003C\u002Fli>\u003Cli>\u003Cstrong>Next表示\u003C\u002Fstrong>(次に落ちてくるミノを複数表示)\u003C\u002Fli>\u003Cli>\u003Cstrong>ソフトドロップ／ハードドロップ\u003C\u002Fstrong>の実装\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"heb5ea4fb53\">テトリスの歴史\u003C\u002Fh2>\u003Ch3 id=\"h1e93144d29\">誕生\u003C\u002Fh3>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4c8af8146f3f46768adf8be164aff23d\u002F%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%83%BC.jpg?w=650&h=433\" alt=\"コンピューター\" width=\"650\" height=\"433\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>1984年、旧ソ連。\u003Cbr>当時モスクワのソビエト科学アカデミーで働いていた\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%82%A2%E3%83%AC%E3%82%AF%E3%82%BB%E3%82%A4%E3%83%BB%E3%83%91%E3%82%B8%E3%83%88%E3%83%8E%E3%83%95\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>アレクセイ・パジトノフ\u003C\u002Fstrong>\u003C\u002Fa>は、仕事の合間に同僚たちとコンピュータで遊べるゲームを作って楽しんでいました。\u003Cbr>\u003Cbr>彼が目をつけたのは、子供のころ夢中になっていた\u003Cstrong>「ペントミノ」\u003C\u002Fstrong>というパズルゲーム。5 つの正方形でできた様々な形を組み合わせて遊ぶものでした。\u003C\u002Fp>\u003Cp>しかし、\u003Cstrong>ペントミノの形は複雑すぎてコンピュータ向きではなかった\u003C\u002Fstrong>ため、アレクセイはそれを簡略化し、\u003Cstrong>4 つのブロック(テトロミノ)に置き換え\u003C\u002Fstrong>ました。\u003Cbr>最初は、ただ画面上にブロックを組み合わせるだけのゲームでしたが、やがてそれが\u003Cstrong>「ピースを上から落とし、横一列に並ぶと消える」という今のテトリスの形に進化\u003C\u002Fstrong>していきます。\u003C\u002Fp>\u003Cp>そして、彼はこのゲームに、\u003Cstrong>ギリシャ語で“4”を意味する「テトラ」と、アレクセイが好きだったスポーツ「テニス」を掛け合わせて「テトリス」\u003C\u002Fstrong>と名付けました。\u003C\u002Fp>\u003Cp>完成した初期のテトリスは、シンプルなグラフィックながら中毒性があり、研究所内で瞬く間に広まりました。\u003Cbr>\u003Cstrong>実際に動作している様子は、現在も一部の記録映像が YouTube などで見られる\u003C\u002Fstrong>ので、気になる方はぜひ検索してみてください。\u003C\u002Fp>\u003Ch3 id=\"hbe112ad5b2\">国境を越えるテトリス\u003C\u002Fh3>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fbbc1ac26244b48a9bbc8b0262ca42d53\u002F%E5%9B%BD%E5%A2%83.jpg?w=650&h=433\" alt=\"国境\" width=\"650\" height=\"433\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>テトリスは、ソビエト科学アカデミーの中でブームを巻き起こしていました。\u003Cbr>開発者のアレクセイ・パジトノフは、\u003Cstrong>研究所の外でも多くの人に遊んでもらいたい\u003C\u002Fstrong>と考え始めます。\u003C\u002Fp>\u003Cp>当時のソ連では、まだコンピュータは研究機関などに限られていました。\u003Cbr>しかし、西側ではIBM PC互換機が急速に普及しており、その流れを受けて『テトリス』もIBM PC向けに移植されることになります。\u003Cbr>\u003Cbr>アレクセイはそれに目をつけ、\u003Cstrong>当時学生だったヴァディム・ゲラシモフに移植を依頼\u003C\u002Fstrong>。\u003Cbr>パスカルで書かれたコードはIBM PC向けに移し替えられ、\u003Cstrong>MS-DOS版のテトリス\u003C\u002Fstrong>が誕生しました。\u003C\u002Fp>\u003Cp>完成したテトリスはコピーによって瞬く間に広がり、研究所の仲間から仲間へ、さらにその先へと伝わっていきます。\u003Cbr>\u003Cstrong>やがてその波は国境を越え、ハンガリーのコンピュータ機関「SZKI」にまで\u003C\u002Fstrong>届きました。\u003Cbr>\u003Cbr>そして、このハンガリーでテトリスがある企業家の目に留まり、ついに世界へと広がっていくことになります。\u003C\u002Fp>\u003Ch3 id=\"h57812d9763\">ライセンスをめぐる混乱\u003C\u002Fh3>\u003Cp>ハンガリーの研究機関で見つかったテトリスは、イギリスでアンドロメダ・ソフトウェアを経営する\u003Cstrong>ロバート・スタイン\u003C\u002Fstrong>の目に留まります。\u003Cbr>彼はすぐにソビエト科学アカデミーに連絡を取り、ライセンスの取得を打診しました。数週間後、アレクセイから「取引の締結を望む」という返事が届きます。\u003C\u002Fp>\u003Cp>ところが、このやり取りは\u003Cstrong>「これから交渉を始めたい」\u003C\u002Fstrong>という意味に過ぎませんでした。\u003Cbr>しかし\u003Cstrong>スタインはこれを「すでに承認を得た」と早合点\u003C\u002Fstrong>し、\u003Cstrong>正式な契約を結ばないまま世界中の企業にライセンスを提供\u003C\u002Fstrong>し始めてしまいます。\u003C\u002Fp>\u003Cp>こうして、まだ誰も正式な権利を持たないまま、複数の会社が「自分たちがテトリスの権利者だ」と主張する状況が生まれていきました。\u003Cbr>この勘違いこそが、後に大きな混乱を呼ぶ火種となったのです。\u003C\u002Fp>\u003Ch3 id=\"he87a369f76\">商業版テトリスの登場\u003C\u002Fh3>\u003Cp>こうした混乱の中でも、いくつかの企業はテトリスを商品化へと進めます。\u003Cbr>そのひとつ、\u003Cstrong>アメリカのスペクトラム・ホロバイト社\u003C\u002Fstrong>は、\u003Cstrong>1987年にソ連を象徴する赤いパッケージを用いた商業版を発売\u003C\u002Fstrong>しました。このゲームは西側市場で注目を集め、PCを中心にさまざまなプラットフォームへ移植されていきます。\u003Cbr>\u003Cbr>ただし当時、\u003Cstrong>テトリスの正式な権利はソ連の国営機関「\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FElorg\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>ELORG(エロルグ)\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>」が握っており、アレクセイ個人には権利がなかった\u003C\u002Fstrong>ことは押さえておく必要があります。\u003Cbr>この構造が、後に大規模なライセンス争いを引き起こす要因となりました。\u003Cbr>\u003Cbr>そして、この商業版を手にした日本の\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%83%93%E3%83%BC%E3%83%94%E3%83%BC%E3%82%A8%E3%82%B9\" target=\"_blank\" rel=\"noopener noreferrer\">ゲーム会社 BPS\u003C\u002Fa> の \u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%83%98%E3%83%B3%E3%82%AF%E3%83%BB%E3%83%96%E3%83%A9%E3%82%A6%E3%82%A2%E3%83%BC%E3%83%BB%E3%83%AD%E3%82%B8%E3%83%A3%E3%83%BC%E3%82%B9\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>ヘンク・ロジャース\u003C\u002Fstrong>\u003C\u002Fa>は、テトリスに強く惹かれました。\u003Cbr>この出会いが、後に任天堂を巻き込み、世界的ブームの引き金となっていきます。\u003C\u002Fp>\u003Ch3 id=\"h5d66b86877\">ファミコン版テトリスと任天堂との接点\u003C\u002Fh3>\u003Cp>\u003Cstrong>1988年、テトリスは家庭用ゲーム機へと展開\u003C\u002Fstrong>されていきます。そのきっかけをつくったのが、日本で活動していたヘンク・ロジャースでした。\u003C\u002Fp>\u003Cp>彼はまず\u003Cstrong>日本向けのPC版テトリスの販売権を取得し、国内での発売を実現\u003C\u002Fstrong>します。さらに、アタリの子会社テンゲンが家庭用版を計画していたことから、\u003Ca href=\"https:\u002F\u002Fatari.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>アタリ\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>を通じてファミコン版のライセンスも手に入れることに成功\u003C\u002Fstrong>しました。\u003C\u002Fp>\u003Cp>こうして\u003Cstrong>1988年12月、ファミコン版テトリスが発売\u003C\u002Fstrong>されます。当初は 4 万本程度の出荷を見込んでいましたが、任天堂による販売支援もあり、\u003Cstrong>結果的に200万本を超える大ヒット\u003C\u002Fstrong>となりました。\u003C\u002Fp>\u003Ch3 id=\"hd3fceb60b3\">モスクワ交渉と携帯ゲーム機ライセンス\u003C\u002Fh3>\u003Cp>\u003Cstrong>1988年末のファミコン版『テトリス』発売時点\u003C\u002Fstrong>では、家庭用／携帯用の権利関係は未整理で、\u003Cstrong>任天堂自身は家庭用の権利を保有していませんでした\u003C\u002Fstrong>(BPS がテンゲン経由で得たライセンスに基づく発売で、任天堂は自社プラットフォームでの発売を許諾したのみ)。\u003C\u002Fp>\u003Cp>1989年、任天堂は新型携帯ゲーム機「\u003Cstrong>ゲームボーイ\u003C\u002Fstrong>」の発売を控え、\u003Cstrong>ヘンク・ロジャース\u003C\u002Fstrong>はテトリス同梱を実現するため、モスクワで国営機関 \u003Cstrong>ELORG エロルグのベリコフと直接交渉\u003C\u002Fstrong>に臨みます。\u003Cbr>交渉の過程で、\u003Cstrong>家庭用・携帯用・アーケード用のライセンスが曖昧なまま世界中に流通していた実態\u003C\u002Fstrong>が明らかになりました。\u003C\u002Fp>\u003Cp>最終的に、\u003Cstrong>任天堂は家庭用ゲーム機向けの独占ライセンスを正式に取得\u003C\u002Fstrong>。\u003Cbr>さらに、\u003Cstrong>携帯機向けについては BPS が仲介に入り、ELORG から権利を受け任天堂へ供与\u003C\u002Fstrong>されました。\u003Cbr>この結果、\u003Cstrong>ゲームボーイ版『テトリス』はBPS経由のライセンスで発売\u003C\u002Fstrong>されることになります。\u003Cbr>\u003Cbr>この契約が、後に起こる\u003Cstrong>テンゲンとの訴訟で任天堂が勝訴する決定的な根拠\u003C\u002Fstrong>となりました。\u003C\u002Fp>\u003Ch3 id=\"hefa06443c7\">ライセンス戦争 勃発\u003C\u002Fh3>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fee83233a9e4e40d4983fd1a2eaed6dec\u002Fnes.jpg\" alt=\"\" width=\"640\" height=\"427\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>同じ1989年、アメリカでは\u003Cstrong>任天堂も \u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FNintendo_Entertainment_System\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>NES(Nintendo Entertainment System)\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> 向けに『テトリス』を発売\u003C\u002Fstrong>しようとしていました。\u003Cbr>しかしここで問題となったのが、\u003Cstrong>アタリの子会社テンゲン\u003C\u002Fstrong>が任天堂の承認を得ないまま、独自に商品化を進めていたことです。\u003C\u002Fp>\u003Cp>テンゲンは「\u003Cstrong>自分たちこそ正当な権利者だ\u003C\u002Fstrong>」と主張し、\u003Cstrong>1989年に独自の NES 版『Tetris』を発売\u003C\u002Fstrong>しました。\u003Cbr>これに対して任天堂も、\u003Cstrong>モスクワで ELORG と正式契約を結んだライセンス\u003C\u002Fstrong>を根拠に公式版を投入。\u003Cbr>アメリカ市場には、ふたつの異なる「NES版テトリス」が並ぶという異常事態が発生します。\u003C\u002Fp>\u003Cp>この争いは裁判に発展し、最終的に\u003Cstrong>任天堂が ELORG との正式契約を証拠として勝訴\u003C\u002Fstrong>。\u003Cbr>テンゲン版は回収され、市場から姿を消しました。\u003Cbr>この結果、\u003Cstrong>任天堂が家庭用ゲーム機における正当なライセンス保有者であることが公式に確認\u003C\u002Fstrong>されました。\u003Cbr>\u003Cbr>なお、それまでテンゲン経由で販売されていたファミコン版の権利関係は、その後、\u003Cstrong>任天堂経由のライセンスへと整理されています\u003C\u002Fstrong>。\u003C\u002Fp>\u003Ch3 id=\"h987c05128a\">ゲームボーイと世界的ブーム\u003C\u002Fh3>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F354049b520a74d2f937058f77aa9a3de\u002F%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%9C%E3%83%BC%E3%82%A4.jpg?w=650&h=435\" alt=\"ゲームボーイ\" width=\"650\" height=\"435\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Cstrong>1989年、任天堂は携帯型ゲーム機「ゲームボーイ」を発売\u003C\u002Fstrong>しました。\u003Cbr>当初は『スーパーマリオ』など自社タイトルを同梱する案もありましたが、\u003Cstrong>ヘンク・ロジャース\u003C\u002Fstrong>は「\u003Cstrong>テトリスこそが大衆に広がるゲームだ\u003C\u002Fstrong>」と考え、\u003Cstrong>任天堂アメリカの荒川実社長\u003C\u002Fstrong>を説得します。\u003C\u002Fp>\u003Cp>その結果、\u003Cstrong>北米版ゲームボーイには『テトリス』が同梱\u003C\u002Fstrong>されました。\u003Cbr>この判断は\u003Cstrong>大成功\u003C\u002Fstrong>を収め、\u003Cstrong>数千万本規模の販売\u003C\u002Fstrong>を記録。通信ケーブルによる\u003Cstrong>対戦プレイ\u003C\u002Fstrong>も人気を集め、テトリスは\u003Cstrong>社会現象\u003C\u002Fstrong>にまで成長しました。\u003Cbr>ゲームボーイとテトリスは\u003Cstrong>切っても切れない存在\u003C\u002Fstrong>となり、この成功によって\u003Cstrong>任天堂は携帯ゲーム市場を独占する圧倒的な地位\u003C\u002Fstrong>を築いたのです。\u003C\u002Fp>\u003Ch3 id=\"h2037a3cacd\">ゲーム業界での広がり\u003C\u002Fh3>\u003Cp>家庭用ゲームで覇権を握った任天堂の陰で、割を食った企業もありました。\u003Cbr>アーケードで『テトリス』を人気作に育てていた\u003Cstrong>セガは、家庭用機メガドライブへの移植を計画しましたが、任天堂との契約に阻まれ発売を断念\u003C\u002Fstrong>せざるを得ませんでした。\u003C\u002Fp>\u003Cp>一方、日本の BPS は『テトリス2＋ボンブリス』を発売し、爆発的な連鎖消去を取り入れるなど独自の発展を遂げます。その後も『スーパーテトリス』シリーズへと進化し、多彩なバリエーションが生まれました。\u003C\u002Fp>\u003Cp>こうした企業間のせめぎ合いを経ながらも、テトリスはアーケードや家庭用、携帯機といった多様なプラットフォームに展開し、やがて\u003Cstrong>世界大会「\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fthectwc.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>CTWC(クラシック・テトリス・ワールド・チャンピオンシップ)\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>」\u003C\u002Fstrong>が開かれるなど、単なるゲームを超えた文化へと成長していきました。\u003C\u002Fp>\u003Ch3 id=\"hca9c504fac\">権利の整理と現在のテトリス\u003C\u002Fh3>\u003Cp>ソ連崩壊後も、国営機関 ELORG はテトリスの権利を主張し続けていました。\u003Cstrong>複雑に入り乱れたライセンス問題がようやく収束へと向かうのは、1996年になってから\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>ヘンク・ロジャースはアメリカに子会社を設立し、\u003Cstrong>「ザ・テトリス・カンパニー(The Tetris Company)」\u003C\u002Fstrong>を立ち上げました。ここで初めて、\u003Cstrong>テトリスのライセンス管理が一元化\u003C\u002Fstrong>されることになります。この時点でアレクセイ・パジトノフ自身も権利者となり、長年の苦労の末、正当な利益を受けられるようになりました。\u003C\u002Fp>\u003Cp>その後、ヘンクとアレクセイは「テトリス・ホールディング」を設立し、エロルグを買収。こうしてテトリスの権利は完全にふたりの手に渡ることになります。\u003C\u002Fp>\u003Cp>現在は、ヘンクの娘であるマヤ・ロジャースがアメリカ BPS の CEO を務め、2019年には社名を「\u003Ca href=\"https:\u002F\u002Ftetris.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">Tetris, Inc.\u003C\u002Fa>」へと改めました。\u003C\u002Fp>\u003Cp>さらに\u003Cstrong>ザ・テトリス・カンパニーは、プレイ体験を世界で統一するための「テトリス・ガイドライン」を策定\u003C\u002Fstrong>。これに\u003Cstrong>準拠したタイトルが「公式テトリス」\u003C\u002Fstrong>として認められるようになり、以降に登場した『テトリスワールド』を皮切りに、今日に至るまでそのルールが受け継がれています。\u003C\u002Fp>\u003Ch2 id=\"h827cca3434\">その後に登場したさまざまなテトリス\u003C\u002Fh2>\u003Cp>テトリスは時代とともに姿を変え、いまなお多様な形で遊ばれ続けています。ここでは代表的な作品をいくつか紹介します。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>ゲームボーイ版テトリス & テトリスDX\u003C\u002Fstrong>\u003Cul>\u003Cli>シンプルながら完成度の高い移植で、シリーズの原点を味わえる定番。Switch Online でプレイ可能。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.nintendo.com\u002Fjp\u002Fsoftware\u002Ffeature\u002Fnintendo-classics\u002Fd-8484_j\u002Findex.html\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.nintendo.com%2Fjp%2Fgames%2Ffeature%2Fnintendo-classics%2Fd-8484_j%2Findex.html&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.nintendo.com\u002Fjp\u002Fsoftware\u002Ffeature\u002Fnintendo-classics\u002Fc-2648_j\u002Findex.html\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.nintendo.com%2Fjp%2Fgames%2Ffeature%2Fnintendo-classics%2Fc-2648_j%2Findex.html&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cstrong>ぷよぷよテトリス2\u003C\u002Fstrong>\u003Cul>\u003Cli>セガが手がけた人気クロスオーバー。アドベンチャーモードや多彩なルールがあり、ぷよぷよとテトリスの両方を楽しめる。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fpuyo.sega.jp\u002Fpuyopuyotetris2\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fpuyo.sega.jp%2Fpuyopuyotetris2%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cstrong>TETRIS Forever\u003C\u002Fstrong>\u003Cul>\u003Cli>アレクセイの最初のバージョンから BPS 制作版まで収録した、資料館的タイトル。テトリスの歴史を辿りたい人におすすめ。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fstore-jp.nintendo.com\u002Fitem\u002Fsoftware\u002FD70010000085244\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fstore-jp.nintendo.com%2Fitem%2Fsoftware%2FD70010000085244%3Fsrsltid%3DAfmBOopVQAggBlwwXaS9L9JUbH1INIyBsd4Ii9MEPsDf0eHbD-7zwaeA&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cstrong>TETRIS 99\u003C\u002Fstrong>\u003Cul>\u003Cli>99人同時対戦の“テトリス版バトルロイヤル”。オンラインで世界中のプレイヤーと競える新しい遊び方。Switch Online 加入者は無料でプレイ可能。\u003Cbr>\u003Cbr>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.nintendo.com\u002Fjp\u002Fswitch\u002Farzna\u002Findex.html\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.nintendo.com%2Fjp%2Fswitch%2Farzna%2Findex.html%3Fsrsltid%3DAfmBOooTM1JftAnxvKVZOFtZOqjhysdI2vMDkxtpbksm4yiX-11jv8ui&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cstrong>TETRIS EFFECT\u003C\u002Fstrong>\u003Cul>\u003Cli>美しい映像とサウンドが融合した没入型テトリス。VR にも対応し、従来の枠を超えた体験を提供。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003C\u002Fp>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.tetriseffect.game\u002Fja\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.tetriseffect.game%2Fja%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cstrong>TETRIS THE GRANDMASTER 4\u003C\u002Fstrong>\u003Cul>\u003Cli>超高速・高難度のスピードテトリス。限界に挑む硬派な設計で、Steam で展開中。初心者向けモードも搭載。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fstore.steampowered.com\u002Fapp\u002F3328480\u002FTETRIS_THE_GRAND_MASTER_4_ABSOLUTE_EYE\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fstore.steampowered.com%2Fapp%2F3328480%2FTETRIS_THE_GRAND_MASTER_4_ABSOLUTE_EYE%2F%3Fl%3Djapanese&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>テトリスの歴史を振り返ると、ソ連の研究所から始まり、世界中の企業を巻き込んだライセンス争い、そして任天堂のゲームボーイでの大ヒットへと続いていきます。複雑な経緯を経ながらも、今もなお世界大会が開かれ、次々と新しいバージョンが生まれているのは、このゲームが持つ普遍的な魅力ゆえでしょう。\u003C\u002Fp>\u003Cp>ただ、その\u003Cstrong>「どこが面白いのか」を言葉で説明するのは意外と難しい\u003C\u002Fstrong>かもしれません。ルールは単純なのに、遊んでみると妙に集中してしまう。気づけば時間を忘れ、積み方ひとつで一喜一憂している。うまく 4 段消しが決まったときの爽快感は、他ではなかなか味わえない体験です。\u003C\u002Fp>\u003Cp>だからこそテトリスは、誕生から数十年を経てもなお、世界中で遊ばれ続けているのでしょう。\u003C\u002Fp>","ソ連で生まれた『テトリス』が、複雑なライセンス争いを経て世界的ブームへと広がるまでの歴史を整理。任天堂・テンゲン・ELORGを巡る交渉と裁判の流れをわかりやすく解説します。",[157,159,161],{"id":158},"fortnite-uefn",{"id":160},"esports-club-4",{"id":162},"breaking",{"id":83,"createdAt":105,"updatedAt":106,"publishedAt":107,"revisedAt":106,"title":108,"tag":164,"recommended_articles":169,"eyecatch":170,"heading_list":22,"content2":119,"description":120,"related_articles":171,"recruit":15,"is_html":15,"is_migration":15},[165,166,167,168],{"id":11},{"id":17},{"id":24},{"id":70},[],{"url":116,"height":117,"width":118},[172,173,174,175,176,177],{"id":123},{"id":125},{"id":127},{"id":129},{"id":98},{"id":94},{"id":179,"createdAt":180,"updatedAt":181,"publishedAt":180,"revisedAt":182,"title":183,"tag":184,"recommended_articles":192,"eyecatch":193,"heading_list":15,"related_articles":197,"recruit":22,"is_html":22,"html_contents":198,"is_migration":22,"migration_date":199},"esport-club-2","2023-06-02T08:49:42.220Z","2023-08-22T11:12:27.956Z","2023-08-09T08:14:22.641Z","esports 部のその後",[185,187,188,189,191],{"id":186},"esports",{"id":11},{"id":77},{"id":190},"club",{"id":17},[],{"url":194,"height":195,"width":196},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fed950e4139d54fc18bc7e809673df5ed\u002F2022-04-danny-howe-bn-D2bCvpik-unsplash.-scaled.jpg",1708,2560,[],"今回は私、西田が\u003Cstrong>「esports 部のその後」\u003C\u002Fstrong>について話しました。\n\n\u003Chr class=\"wp-block-separator\"\u002F>\n\n\u003Ca href=\"\u002Fblog\u002Fesports-club\" target=\"_blank\" rel=\"noreferrer noopener\">昨年の9月、社内に esports 部を発足しました。\u003C\u002Fa>\u003Cbr>活動から半年、その後の状況について紹介しようと思います。\u003Cbr>\u003Cbr>\n\n\u003Ch2>前回のおさらい\u003C\u002Fh2>\n\n\u003Ch3>Apex Legends\u003C\u002Fh3>\n\n\u003Cp id=\"66bfb1be-f548-4c46-8c00-57c2a69ea5aa\">\u003Cbr>冒頭に書いたように昨年の9月から活動を始めた弊社の esports 部。\u003Cbr>取り組んでいるゲームタイトルは\u003Cstrong>「\u003C\u002Fstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.ea.com\u002Fja-jp\u002Fgames\u002Fapex-legends\" target=\"_blank\">\u003Cstrong>Apex Legends\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>」\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>\u003C\u002Fp>\n\n\u003Cblockquote class=\"wp-block-quote\">\u003Cstrong>『エーペックスレジェンズ』\u003C\u002Fstrong>（Apex Legends） は、Respawn\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FRespawn_Entertainment\" target=\"_blank\"> \u003C\u002Fa>Entertainmentが開発し、エレクトロニック・アーツより2019年2月4日に配信を開始した基本プレイ無料のバトルロイヤルゲーム形式のファーストパーソン・シューティング。\u003C\u002Fp>\u003Ccite>出典：\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%82%A8%E3%83%BC%E3%83%9A%E3%83%83%E3%82%AF%E3%82%B9%E3%83%AC%E3%82%B8%E3%82%A7%E3%83%B3%E3%82%BA\" target=\"_blank\">「エーペックスレジェンズ」（2023年8月7日 (日) 13:36　UTCの版）『ウィキペディア日本語版』\n\u003C\u002Fa>\u003C\u002Fcite>\u003C\u002Fblockquote>\n\n\u003Cbr>ゲームのジャンルは FPS。PvP のバトルロイヤルで、3人1組の60チーム、計60人が 1 つのマップに降り立ち戦います。\u003Cbr>\u003Cstrong>様々なアビリティを持ったキャラクターがおり、それぞれ固有の戦術を駆使して戦う。\u003C\u002Fstrong>また、\u003Cstrong>チームプレイが前提となっているので、チャットなしでもコミュニケーションが円滑に取れるように工夫されている点が特徴\u003C\u002Fstrong>のゲームです。\n\nPS4, PS5, Xbox, PC , Switch版があり、\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%97%E3%83%A9%E3%83%83%E3%83%88%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0\" target=\"_blank\">クラスプラットフォーム\u003C\u002Fa>対応しています。\u003Cbr>\u003Cbr>\n\n\u003Ch3>活動状況\u003C\u002Fh3>\n\n\u003Cp id=\"129cf2d8-2ccd-4ee2-b862-a20c38736872\">\u003Cstrong>活動は週に一回\u003C\u002Fstrong>。\u003Cbr>三人一緒にゲームをプレイして、マッチ終了後に軽く振り返りを行っています。ちなみに\u003Cstrong>その様子は YouTube で社内にリアルタイム配信も。\u003C\u002Fstrong>配信した動画を後から見返して戦評を行うこともあります。\u003Cbr>\u003Cbr>あとは個人練習、たまに夜誰かがやっているのを見つけると一緒に遊んだりといった感じです。\u003Cbr>\n\n\u003Ch2>PrAha Cup\u003C\u002Fh2>\n\n\u003Cfigure class=\"wp-block-image\">\u003Ca href=\"https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1649378307025-5Dg0tIIHXD.jpg\">\u003Cimg src=\"https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1649378307025-5Dg0tIIHXD.jpg?width=800\" alt=\"画像\"\u002F>\u003C\u002Fa>\u003C\u002Ffigure>\n\n\u003Cp id=\"d0d3c383-ba1f-435f-8e42-9af616e258e8\">\u003Cbr>というような活動を半年ぐらい続けてみたのですが、\u003Cbr>\u003Cbr>\u003C\u002Fp>\n\n\u003Cul>\u003Cli>\u003Cstrong>そろそろ実績がほしい\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>対外的にアピールもしたい\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\n\n\u003Cp id=\"0f888d7f-5544-40c5-b257-a71d91f9ec43\">\u003Cbr>となってきました。\u003Cbr>\u003Cbr>自分たちのレベルを考えると、いきなり大きな大会やイベントに参加するのはかなり厳しそう。もうちょっと緩めのものがあれば…と探していた時に見つけたのが、\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.praha-inc.com\u002F\" target=\"_blank\">\u003Cstrong>株式会社プラハ\u003C\u002Fstrong>\u003C\u002Fa>さんが主催の１dayトーナメント\u003Cstrong>『PrAha Cup』\u003C\u002Fstrong>です。\u003C\u002Fp>\n\n\u003Ch3>概要\u003C\u002Fh3>\n概要に\u003Cstrong>「Apex Legendsが最も強い IT エンジニアを決める１dayトーナメント」\u003C\u002Fstrong>とあるように、\u003Cstrong>参加者うち1名は IT エンジニアであることが応募条件\u003C\u002Fstrong>となっており、申込時に GitHub アカウントやこれまでの開発実績など、エンジニアであることを証明できるものの提示を求められるという点がユニークで、出場の決め手になりました。\u003Cbr>\n\n\u003Ch3>交流戦に備えて\u003C\u002Fh3>\n\n\u003Cp id=\"d2ae4368-6388-4be1-8387-197c88930d1c\">参加について社内で相談したところ、なんと\u003Cstrong>社内でパブリックビューイング\u003C\u002Fstrong>をやることに。\u003Cbr>せっかく見てもらうのなら\u003Cstrong>あまりに情けない姿は見せられません。開始早々脱落するのは避けたいところ。\u003C\u002Fstrong>\u003Cbr>\u003Cbr>そんなわけでチームとしては、、、\u003Cbr>\u003Cstrong>\u003Cbr>\u003C\u002Fstrong>極力戦わない。無理はしない。\u003Cstrong>逃げる・隠れる・籠るに徹する。\u003Cbr>\u003C\u002Fstrong>狙えそうであれば漁夫の利を狙う。\u003Cbr>\u003Cbr>という\u003Cstrong>逃げ腰の作戦\u003C\u002Fstrong>でいくことに。\u003Cbr>作戦に合わせたキャラクターでチームを編成し、当日に向けて練習を重ねました。\u003C\u002Fp>\n\n\u003Ch3>結果\u003C\u002Fh3>\n\n\u003Ciframe width=\"560\" height=\"315\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002Fv5U5AlQYTxA\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\">\u003C\u002Fiframe>\n\n\u003Cp id=\"91109d5b-aa33-49cf-871d-9222a0f643e7\">\u003Cstrong>結果は16チーム中12位！\u003C\u002Fstrong>\u003Cbr>\u003Cbr>参加者の方々は強い人ばかりで、さらにやはり大会ということもあってかどのチームも様子見しつつ積極的には戦わない戦法を取っていたため、後半一気に大混戦になるといった感じでした。\u003C\u002Fp>\n\n\u003Cp id=\"9dc78f93-ca1e-4215-b5f7-d12b461d7fdf\">全 2 試合だったのですが、私たちのチームはというと、初戦は早い段階でチームの 2 人がやられてしまい残ったメンバーが最後まで隠れ回りなんとか8 位に。\u003Cbr>2 試合目はギリギリおこぼれで1キルを取れましたが、ポイントで見ると 1 試合目とほぼ変わらず。\u003Cbr>\u003Cbr>\u003Cstrong>正直、活躍する場面はほとんどありませんでした\u003C\u002Fstrong>が、隠れ回りながらのプレイは\u003Cstrong>「ハラハラ感が良くて手に汗握った」という感想もあり、社内での観戦はそれなりに盛り上がりました。\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp id=\"675dcb35-6fe8-4694-89b3-c684df5f9e41\">ただ、\u003Cbr>\u003C\u002Fp>\n\n\u003Cul>\u003Cli>\u003Cstrong>せっかく出場したのに会社公認のチームだとアピールしなかった。\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>SNSで告知すればよかった。\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>プレイが地味すぎて公式の実況ではほぼ取り上げられず。\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\n\n\u003Cp id=\"569601dc-4a12-48f6-af24-c8dd3236a15d\">\u003Cbr>といった点がちょっと心残りでしょうか。\u003Cbr>\u003Cbr>エントリー時点で「意気込み」や「一言」を入力する場面があったのに、\u003Cstrong>「会社公認のチームで参加します」\u003C\u002Fstrong>ということを書かなかったのはもったいなかったなと。チーム紹介のコーナーがあったのに。。。\u003Cbr>\u003Cbr>全体的に\u003Cstrong>うまくアピールできなかったのが反省\u003C\u002Fstrong>です。次はこの反省をしっかり生かそうと思います。\u003Cbr>\u003Cbr>対して良かった点は、こうして\u003Cstrong>交流戦に出た話を発信したり、人に話すことができる。さらには普段なかなか接点のない方たちとコミュニケーションできたこと\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>楽しかったし良い経験になったので、これからも機会があればこういった大会やイベントに出場できればと思っております。\u003Cbr>\u003C\u002Fp>\n\n\u003Ch2>e-sports 部を続けてみて\u003C\u002Fh2>\n\n\u003Cp id=\"7bb9ab4a-86b3-4080-b116-b71fc2261050\">チームとしては、それなりに形になってきたような気がしています。\u003Cbr>そしてやはり今回のように、何かイベントなどの目標があると気が引き締まりますし、ゆくゆくは弊社がホストになってイベントを企画するのも良いのでは？と考えるようになりました。\u003C\u002Fp>\n\n\u003Cp id=\"62a2d620-12f4-4059-a9f1-cb57c1dbe3d2\">とはいえそうなると、3人1組の計20チームでプレイするので、それなりに人を募る必要があるのが大変そうです。配信についても検討しないといけないため実況や解説をどうするとかそういった問題もあります。まあそれはおいおい。。\u003Cbr>\u003C\u002Fp>\n\n\u003Ch3>仕事に通じる\u003C\u002Fh3>\n\n\u003Cfigure class=\"wp-block-image\">\u003Ca href=\"https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1649378387220-WvG780lF7F.jpg\">\u003Cimg src=\"https:\u002F\u002Fassets.st-note.com\u002Fimg\u002F1649378387220-WvG780lF7F.jpg?width=800\" alt=\"画像\"\u002F>\u003C\u002Fa>\u003C\u002Ffigure>\n\n\u003Cp id=\"279a7f27-d36d-484d-ae0e-f3dfb0094836\">\u003Cbr>現在、私がチームリーダーとなって指示を出したりコーチング的なことをやったりと活動をまとめているのですが、やっていてとても仕事に近いなと感じることが多々あります。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>モチベーションの維持\u003C\u002Fstrong>\u003Cbr>\u003Cbr>普段、自分一人もしくは友人とやっている時にはそんな意識はなかったのですが、\u003Cstrong>会社のチームとしてプレイしていると何かが違う。\u003Cbr>\u003C\u002Fstrong>というのも、別にこのゲームが好きでやってくれているわけではないと思うので、まず\u003Cstrong>モチベーションを維持\u003C\u002Fstrong>してもらう必要があります。\u003Cbr>そのためには目標を立てたりとか、\u003Cstrong>やる気を失わないため\u003C\u002Fstrong>の方法を考えないといけません。\u003Cbr>\u003Cbr>そもそも社内の部活なので楽しんでもらうことが大前提なのですが、継続してもらいつつ、楽しめるポイントを見つけてもらうにはどうすれば良いのかと考えると結構考え方は仕事に近いのかなと思ったり。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>環境構築・改善\u003Cbr>\u003Cbr>\u003C\u002Fstrong>仕事環境を整えることは大切ですが、ゲームでもプレイ環境を整えることは大事。\u003Cstrong>プレイ環境(機材やゲーム設定の見直し、選定)がゲームの快適さに依存\u003C\u002Fstrong>します。\u003Cbr>\u003Cbr>遅延をなくそうと思うとネット環境を整えないといけないし、良いモニターを使うとかグラフィックボードを積むことでグラフィックやスピード感が変わってくるし、結果的に有利になります。\u003Cbr>さらに自分に合ったゲーム設定を見つけることも大切です。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>報連相\u003Cbr>\u003Cbr>\u003C\u002Fstrong>Apex Legends 自体がチームプレイを前提としたゲームなので、敵がいた・いるかも。とか、ここを攻める・防衛する。とか、逐次 VC やピンを打ったりで報連相するのは重要です。\u003Cbr>\u003Cbr>また、\u003Cstrong>自分だけではなくチームメンバーの状況、ひいてはマップ全体の状況を把握・予測、共有し、臨機応変に対応\u003C\u002Fstrong>しなければなりません。\u003Cbr>仕事においてもこれはそうで、プロジェクトを成功させるためには同じようなスキルというか習慣が必要に感じます。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>Keep・Problem・Try\u003Cbr>\u003Cbr>\u003C\u002Fstrong>活動後には、今後をよりよくするためにチームで振り返りを行い、KPIを設定、明らかにすることは肝要です。\u003Cbr>\u003Cbr>総合すると、\u003Cbr>\u003Cbr>\u003Cstrong>仕事とesportsは同じなのか！？\u003C\u002Fstrong>\u003Cbr>\u003Cbr>と感じているこの頃です。\u003Cbr>\u003Cbr>今後も頑張って活動していくつもりなので動向に注目してみてください。\u003C\u002Fp>","2022-04-27T19:07:22+09:00",{"id":201,"createdAt":202,"updatedAt":203,"publishedAt":202,"revisedAt":203,"title":204,"tag":205,"recommended_articles":211,"eyecatch":212,"heading_list":15,"related_articles":215,"recruit":22,"is_html":22,"html_contents":216,"is_migration":22,"migration_date":217},"esports-club","2023-06-02T08:49:25.501Z","2023-08-09T08:14:08.541Z","会社でesports を始めた(い)話",[206,207,208,209,210],{"id":186},{"id":11},{"id":190},{"id":77},{"id":17},[],{"url":213,"height":214,"width":196},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F17c084b4b58640f0822e69e5d468c77a\u002F2021-12-javier-martinez-hUD0PUczwJQ-unsplash-scaled.jpg",1706,[],"\u003Cmeta charset=\"utf-8\">もらった犬にメガサーモンと名付ける夢をみました。\u003Cbr>\u003Cbr>今回は私、西田が\u003Cstrong>「社内で e-sports 部を創設した」\u003C\u002Fstrong>話をしました。\n\n\u003Chr class=\"wp-block-separator\"\u002F>\n\n\u003Cbr>\u003Cstrong>会社で esports 部を作って活動を始めました。\u003Cbr>\u003C\u002Fstrong>なぜそうなったのか、どんな感じなのかを今回のお茶会では簡単に紹介できればと思います。\u003Cbr>\n\n\u003Ch2>esports とは\u003C\u002Fh2>\n\n\u003Cdiv class=\"wp-block-image\">\u003Cfigure class=\"aligncenter size-large is-resized\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F041c333c89bf4a3e9511b5ebd3c5139d\u002F2021-12-GFVL5358esports_TP_V.jpg\" alt=\"\" class=\"wp-image-13735\" width=\"614\" height=\"408\"\u002F>\u003C\u002Ffigure>\u003C\u002Fdiv>\n\n\u003Cbr>\u003Ca rel=\"noreferrer noopener\" href=\"\u002Fblog\u002Fesports-club\" target=\"_blank\">近年、格闘やパズルなどを扱った \u003Cstrong>ビデオゲームをスポーツ競技とする e-sports\u003C\u002Fstrong> が世界中で盛り上がりを見せています。\u003C\u002Fa>\u003Cbr>\u003Cbr>\n\n\u003Cblockquote class=\"wp-block-quote\">「eスポーツ(esports)」とは、「エレクトロニック・スポーツ」の略で、広義には、電子機器を用いて行う娯楽、競技、スポーツ全般を指す言葉であり、コンピューターゲーム、ビデオゲームを使った対戦をスポーツ競技として捉える際の名称。\u003C\u002Fp>\u003Ccite>\u003Cmeta charset=\"utf-8\">一般社団法人日本ｅスポーツ連合オフィシャルサイト「eスポーツとは」\u003Cbr>\u003Ca href=\"https:\u002F\u002Fjesu.or.jp\u002Fcontents\u002Fabout_esports\u002F\" target=\"_blank\" rel=\"noreferrer noopener\">https:\u002F\u002Fjesu.or.jp\u002Fcontents\u002Fabout_esports\u002F\u003C\u002Fa>\u003C\u002Fcite>\u003C\u002Fblockquote>\n\n\u003Cbr>\u003Cstrong>海外では「esports」を「スポーツ」として認め、\u003C\u002Fstrong>さらに\u003Cstrong>プロのゲーマーがスポーツ選手であることを認めている\u003C\u002Fstrong>国が増えてきているそうです。その\u003Cstrong>市場規模は約1100億円以上\u003C\u002Fstrong>とも言われています。\u003Cbr>\u003Cbr>一方で、日本はまだまだ esports の国内的な認知度が低く\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fprtimes.jp\u002Fmain\u002Fhtml\u002Frd\u002Fp\u002F000008428.000007006.html\" target=\"_blank\">市場規模も小さい\u003C\u002Fa>ため、\u003Cmeta charset=\"utf-8\">世界の中では \u003Cstrong>esports の後進国\u003C\u002Fstrong>と呼ばれているそうですが、2025年には国内市場 600~700億円、周辺産業などを含めると3000億円以上に成長するだろうという\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.meti.go.jp\u002Fpress\u002F2019\u002F03\u002F20200313003\u002F20200313003.html\" target=\"_blank\">報告書を経済産業省がまとめ\u003C\u002Fa>、国内での積極的な普及に乗り出しました。\u003Cbr>\u003Cbr>esports の普及によって、\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>大会開催\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>観戦・視聴\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>機器購入\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>会場への移動や宿泊施設\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\n\n\u003Cbr>などの経済効果が期待されており、\u003Cstrong>さらには若者の誘客や町おこし・地域活性化\u003C\u002Fstrong>などにも繋がるだろうと予想されています。\u003Cbr>地域活性化の一例として、秋田県で平均年齢65歳以上のシニア esports プロチーム「\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fmatagi-snps.com\u002F\" target=\"_blank\">マタギスナイパーズ\u003C\u002Fa>」が発足されたというニュースが話題になったのをご存知の方もいらっしゃるかもしれません。\u003Cbr>\u003Cbr>esports の大きな特徴として、\u003Cstrong>インターネットを利用したライブ配信に強い\u003C\u002Fstrong>という点が挙げられます。\u003Cbr>環境さえ整えれば選手同士が離れていてもオンラインで試合が開催できることから、コロナ対策にも適しています。\u003Cbr>\u003Cbr>\u003Cstrong>注目度の高い大会ともなると視聴者は数十万人以上。\u003C\u002Fstrong>\u003Cbr>esports を自社の新たな付加価値として、これまでリーチできなかった層への宣伝・拡散効果を期待し、年々 esports 事業を始める企業は増加傾向にあると言われています。\u003Cbr>\u003Cbr>\n\n\u003Ch3>企業の取り組み\u003C\u002Fh3>\n\n\u003Cdiv class=\"wp-block-image\">\u003Cfigure class=\"aligncenter size-large is-resized\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fcd87d29c1ab0478e8d5e4457505c8ecc\u002F2021-12-jinyun-xBuu23uxarU-unsplash-4-scaled.jpg\" alt=\"\" class=\"wp-image-13732\" width=\"617\" height=\"411\"\u002F>\u003C\u002Ffigure>\u003C\u002Fdiv>\n\n\u003Cbr>それでは企業はどんな取り組みを行っているのでしょうか。\u003Cbr>代表的なのは\u003Cstrong>スポンサー\u003C\u002Fstrong>でしょう。\u003Cbr>\u003Cbr>スポンサーと言っても、\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>チームに投資\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>プロチームと契約を結んでチームの運営資金や選手の給与などに投資\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>大会に投資\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>大会の開催資金や、出場者への賞金・賞品などを投資\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>施設に投資\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>大会が開催される会場やブース・店舗への投資\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>海外チーム・海外大会への投資\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>海外の大会やプロチームへの投資\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\n\n\u003Cbr>などなど色々なものがあります。\u003Cbr>\u003Cbr>\u003Cstrong>そこで本題です。\u003C\u002Fstrong>\n\n\u003Cp style=\"font-size:17px\">\u003Cbr>\u003Cstrong>\u003Cspan class=\"has-inline-color has-pale-pink-color\">なんとか S2 も esports に関われないだろうか？\u003C\u002Fspan>\u003C\u002Fstrong>\u003Cbr>\u003C\u002Fp>\n\nとはいえ、いきなり右も左もわからないところに入っていってなんとなくスポンサーをやっても仕方がありません。もう少し戦略的に考える必要があります。\u003Cbr>\u003Cbr>\n\n\u003Ch3>部活動\u003C\u002Fh3>\n\n実業団のように esports の\u003Cstrong>トッププレイヤーとしてではなく、普通の社員として普段の業務を行いながら会社公認で活動をする団体\u003C\u002Fstrong>、それが\u003Cstrong> e-sports 部やサークル\u003C\u002Fstrong>と呼ばれるものです。\u003Cbr>自社でオウンドチームを持ち、それを子会社や関連会社とすることでスポンサーになるとか、プロプレイヤーを雇用するのはハードルが高いですが、これだとそんなに難しくはありません。\u003Cbr>\u003Cbr>部活動の設立、活動の目的としては\u003Cstrong>社内コミュニケーションであったり、採用活動・福利厚生、働き方改革の一環\u003C\u002Fstrong>だと言われているそうです。\u003Cbr>さらに、大会や交流戦などに参加して社外、他業界との交流を増やし、商談の機会を得ることまでできれば、結果的に \u003Cstrong>e-sports を通して企業や業績に良い影響を与える\u003C\u002Fstrong>ことになります。\u003Cbr>\u003Cbr>調べてみると、大会や交流戦がちょこちょこ開かれているらしく、また企業内で組成したチームが対象のリーグなども発足されているようです。\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Ca href=\"https:\u002F\u002Fcogme.jp\u002Fevents\u002Fcogmecup\u002F1\u002F?f=10\" target=\"_blank\" rel=\"noreferrer noopener\">\u003Cstrong>cogme cup\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fa6l.jp\u002F\" target=\"_blank\" rel=\"noreferrer noopener\">\u003Cstrong>AFTER 6 LEAGUE\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fpassmarket.yahoo.co.jp\u002Fevent\u002Fshow\u002Fdetail\u002F01jrq21145vmi.html\" target=\"_blank\" rel=\"noreferrer noopener\">\u003Cstrong>eSPORTS TRINITY\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.ibaraki-esports.com\u002Freport\u002Fnews_2011_5.html\" target=\"_blank\" rel=\"noreferrer noopener\">\u003Cstrong>Ie リーグ\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.anime.ac.jp\u002Fcontents\u002Fteam-e-sports\u002Fesports\u002F%E3%80%8Ee%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%84%E4%BC%81%E6%A5%AD%E5%AF%BE%E6%8A%97%E6%88%A6%E3%80%8F%E4%BC%81%E6%A5%AD%E5%AF%BE%E6%8A%97%E3%81%AE%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3e-sports\u002F\" target=\"_blank\" rel=\"noreferrer noopener\">\u003Cstrong>eスポーツ企業対抗戦\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\n\n\u003Cbr>プロがやっているわけではないので\u003Cstrong>外部の視聴者が少なくファンを獲得しづらい\u003C\u002Fstrong>などの課題もあるそうですが、企業同士の交流が主目的であればそこに視聴者がいなくてもとりあえず別に問題はありません。\u003Cbr>\u003Cbr>それに、\u003Cstrong>チームS2ファクトリーとして\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fjesu.or.jp\u002Fcontents\u002Ftournament_events\u002F\" target=\"_blank\">一般の大会\u003C\u002Fa>に参加してもいいし。\u003C\u002Fstrong>\u003Cbr>\u003Cstrong>最悪、自分が頑張って活躍できるところまでいけば会社の宣伝にもなるのでは…。\u003Cbr>\u003C\u002Fstrong>\u003Cbr>と相談をして、\u003Cstrong>\u003Cspan class=\"has-inline-color has-pale-pink-color\">会社公認で esports 部を作ることになりました！\u003C\u002Fspan>\u003C\u002Fstrong>\u003Cbr>\u003Cbr>\n\n\u003Ch2>esports 部設立\u003C\u002Fh2>\n\n\u003Cdiv class=\"wp-block-image\">\u003Cfigure class=\"aligncenter size-large is-resized\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fe8d6fb3bbe354ec8891892d66fcdd5d7\u002F2021-12-ella-don-vb49017SQj8-unsplash-scaled.jpg\" alt=\"\" class=\"wp-image-13746\" width=\"659\" height=\"439\"\u002F>\u003C\u002Ffigure>\u003C\u002Fdiv>\n\n\u003Cbr>部を作ったのはいいけれど、\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>何のゲームをやる？\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>動作環境は？\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>いつ集まるの？\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\n\n\u003Cbr>など考えないといけないことは色々とあります。\u003Cbr>会社公認とはいえなんの実績もないので投資をお願いすることはできません。\u003Cbr>なので、部員のモチベーションのためにも\u003Cstrong>既にある環境で始められるもの、できればお金がかからないもの\u003C\u002Fstrong>というのが選択肢になります。\u003Cbr>\u003Cbr>最近流行りのゲームとしては、\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>TPS\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>Fortnite, PUBG, スプラトゥーン\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>FPS\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>Overwatch, VALORANT, APEX\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>格闘ゲーム\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>ストリートファイターⅤ, 鉄拳7, スマブラSP\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>MOBA\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>League of Legends, Dota 2, Brawl Stars\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>スポーツゲーム\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>ウイイレ, パワプロ, グランツーリスモSPORT\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>カードゲーム\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>Shadowverse, Hearthstone\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>パズルゲーム\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>ぷよぷよeスポーツ\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\n\n\u003Cbr>などなどたくさんあるようですが、何をやるにしても\u003Cstrong>練習は必須\u003C\u002Fstrong>です。\u003Cbr>となると、いろんなものに手を出すよりも、\u003Cstrong>どれかに絞って集中\u003C\u002Fstrong>した方が良さそう。\u003Cbr>マイナーなゲームを選んで強くなるのもいいけど、せっかくなら\u003Cstrong>人気があって\u003C\u002Fstrong>、\u003Cstrong>大会や交流会がよく開催されているタイトル\u003C\u002Fstrong>の方が良い。\u003Cbr>\u003Cbr>というようなことを考えまして、結局\u003Cstrong>「\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.ea.com\u002Fja-jp\u002Fgames\u002Fapex-legends\u002Fnews\" target=\"_blank\">Apex Legends\u003C\u002Fa>」\u003C\u002Fstrong>をやることになりました。\u003Cbr>選んだ理由としては、\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>人気\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>話題性がある\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>大会や交流戦でもよく扱われているタイトル\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>クロスプラットフォーム対応\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>基本無料\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\n\n\u003Cbr>などですが\u003Cstrong>「自分が趣味でやっていて勝手がわかる」というのが本音\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>\n\n\u003Ch3>Apex ってどんなゲーム？\u003C\u002Fh3>\n\n\u003Ciframe width=\"560\" height=\"315\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FA_GUBourLrc\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\">\u003C\u002Fiframe>\n\n\u003Cmeta charset=\"utf-8\">\u003Cbr>\u003Cbr>FIFAやバトルフィールドシリーズで有名な\u003Ca href=\"https:\u002F\u002Fwww.ea.com\u002Fja-jp\" target=\"_blank\" rel=\"noreferrer noopener\">エレクトロニック・アーツ\u003C\u002Fa>より2019年2月4日に配信が開始された FPS です。\u003Cbr>全世界に 1 億人以上のユーザーがいると言われています。\u003Cbr>\u003Cbr>基本的なモードは、60人のプレイヤーが三人一組のチームに分かれて戦うPvPのバトルロイヤルで、最後まで生き残ったチームがチャンピオンになります。\u003Cbr>様々なアビリティを持ったキャラクターがいて、ただ撃ち合うだけでなく戦術を駆使して戦う。また、\u003Cstrong>チームプレイが前提となっているので、チャットなしでもコミュニケーションが円滑に取れるように工夫\u003C\u002Fstrong>されている点が特徴です。\u003Cbr>\u003Cbr>\u003Cspan style=\"font-size: revert; color: initial; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;\">上にも書きましたが、PC, PS4, PS5, Switch版があり、クラスプラットフォーム\u003C\u002Fspan>に対応しています。\u003Cbr>\u003Cbr>\n\n\u003Ch3>活動内容と今後\u003C\u002Fh3>\n\n\u003Cdiv class=\"wp-block-image\">\u003Cfigure class=\"aligncenter size-large is-resized\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1a0e6b92225144c0af49a6752861bf8e\u002F2021-12-ralston-smith-sEgodrJdMGw-unsplash-scaled.jpg\" alt=\"\" class=\"wp-image-13743\" width=\"657\" height=\"438\"\u002F>\u003C\u002Ffigure>\u003C\u002Fdiv>\n\n\u003Cbr>なんとか二人集めて\u003Cstrong>\u003Cspan class=\"has-inline-color has-pale-pink-color\">チーム S2ファクトリーを結成\u003C\u002Fspan>\u003C\u002Fstrong>しました。\u003Cbr>なので\u003Cstrong>今のところメンバーは私を含め三人\u003C\u002Fstrong>です。\u003Cbr>私以外はプレイ経験がないので、なんとなく私がコーチングをしながら週に一度活動しています。\u003Cbr>\u003Cbr>週に一度の活動では三人一緒にゲームをプレイする。その様子を撮影し、私が戦評をやってみるといった具合です。\u003Cbr>ほとんどのスタッフが現在でもリモートワークを続けているので、特に活動に支障はなく、活動がある日は自宅から Discord を繋いだりしながらやっています。\u003Cbr>\u003Cbr>基本的には活動時間外の個人練習が主ですが、\u003Cstrong>slackチャンネルでは盛んに意見交換が行われています！\u003C\u002Fstrong>\u003Cbr>最近は YouTube を使って\u003Cstrong>プレイ映像をリアルタイムで配信し社内に共有\u003C\u002Fstrong>してみたりも。\u003Cbr>\u003Cbr>始めてから二ヶ月しか経っていないので、まだまだ感は否めませんが、\u003Cstrong>ゆくゆくは大会や交流戦に出られれば良いなと考えています。ぜひお誘いください。\u003C\u002Fstrong>\u003Cbr>また今後は \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fnote.com\u002Fs2factory\" target=\"_blank\">note\u003C\u002Fa> の方で状況報告できればと思っているので、よかったらチェックしてみてください。","2021-12-03T18:35:58+09:00",{"id":129,"createdAt":219,"updatedAt":220,"publishedAt":221,"revisedAt":220,"title":222,"tag":223,"recommended_articles":228,"eyecatch":229,"heading_list":22,"content2":233,"related_articles":234,"recruit":15,"is_html":15,"is_migration":15},"2025-01-24T06:02:13.130Z","2025-08-21T01:33:55.089Z","2025-02-26T06:16:13.376Z","趣味から始めたゲーム開発",[224,225,226,227],{"id":17},{"id":11},{"id":24},{"id":41},[],{"url":230,"height":231,"width":232},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F7053fbc5279d4284a0b4ae62e6d62f9c\u002Forva-studio-XC3fq-ffXRI-unsplash.jpg",3456,5184,"\u003Cp>イルカを助けて仲良くなりたいです。\u003C\u002Fp>\u003Cp>\u003Cbr>この記事は、社内イベント「\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ftea\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">お茶会\u003C\u002Fa>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社のnakanoが\u003Cstrong>「趣味で行っているゲーム開発」\u003C\u002Fstrong>について話しました。\u003Cbr>\u003C\u002Fp>\u003Cp>\u003Cspan style=\"color: #bcb8b8\">ゲーム開発関連の記事\u003C\u002Fspan>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ffortnite-uefn\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Ffortnite-uefn%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Chr>\u003Cp>\u003Cbr>趣味でゲームを作っています。\u003Cbr>今回は、\u003Cstrong>どのようにしてゲーム開発に興味を持ち、どんな経験を積んできたのか\u003C\u002Fstrong>をお話ししたいと思います。\u003C\u002Fp>\u003Ch2 id=\"h16f2c89ea6\">ゲーム開発に興味を持ったきっかけ\u003C\u002Fh2>\u003Cp>元々は映像制作の分野にいたのですが、台湾で働いていた時、ある新卒の学生を面接する機会がありました。\u003Cbr>その会社は主に映像CGを制作しており、応募してくる人のポートフォリオもほとんどが映像作品や静止画。しかし、その中に\u003Cstrong>ゲームの作品をポートフォリオに入れている学生がいました。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>当時、ゲーム開発にはまったく関わったことがなく、作り方もわかりませんでした。それでも、\u003Cstrong>ゲームの作品を持ってきたことに強く感銘\u003C\u002Fstrong>を受け、ゲーム開発に興味を持つように。\u003C\u002Fp>\u003Cp>その後、ゲーム業界に進む学生が多い学校で非常勤の講師をすることになりました。ここでゲーム開発に関わるようになり、実際に制作を行うことになります。\u003C\u002Fp>\u003Ch2 id=\"h08dede0cd0\">専門学校でのゲーム開発プロジェクト\u003C\u002Fh2>\u003Cp>非常勤講師として授業を受け持つことになった学校では、\u003Cstrong>卒業生の約 8 割がゲーム業界に進むにもかかわらず、ゲーム開発の授業がありませんでした\u003C\u002Fstrong>。\u003Cbr>\u003Cbr>\u003Cstrong>実践経験なしでゲーム業界に入るのは厳しいのではないか？\u003C\u002Fstrong> と思い、私が担当していたポートフォリオの授業内で、実際に\u003Cstrong>ゲームを開発するプロジェクトを立ち上げる\u003C\u002Fstrong>ことに。\u003Cbr>\u003Cbr>本来この授業では、就職活動で企業に提出する作品のブラッシュアップや面接の練習などを行っていましたが、早く就職が決まった学生はやることがなくなり、授業の時間を持て余していました。せっかくの機会なので、\u003Cstrong>実践的なことをさせたいと考えたのも理由のひとつ\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>ゲームプログラミングの学科はあったものの、\u003Cstrong>学科間の連携がなく、このプロジェクトにはプログラマーがいませんでした\u003C\u002Fstrong>。そこで、自分もやってみたかったので、\u003Cstrong>プログラムを担当\u003C\u002Fstrong>することに。\u003Cbr>\u003Cbr>学校にはゲーム開発の授業がなく、授業内でゲームを作るのは異例でした。それでも進めていくうちに形になり、成果を評価され、最終的には卒業制作として認められました。\u003Cbr>学校のイベントで展示され、翌年度からはゲームプログラミングの学生も加わり、学科のつながりも広がっていくことになります。\u003C\u002Fp>\u003Ch3 id=\"h1670d20bf2\">開発の進行とスケジュール\u003C\u002Fh3>\u003Cp>ゲーム開発プロジェクトは、\u003Cstrong>9 月にスタートし、2 月の学校イベントでの展示を目標\u003C\u002Fstrong>に進めました。\u003Cbr>\u003Cbr>全員がゲーム開発未経験(ゲームエンジンを使った授業は一部で受けていたものの、チームでゲームを作った経験はほぼありませんでした)。\u003Cbr>デザインアセットの取りまとめや、ゲームエンジンへの実装は私の担当です。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>プログラマー:\u003C\u002Fstrong> 自分\u003C\u002Fli>\u003Cli>\u003Cstrong>デザイナー:\u003C\u002Fstrong> \u003Cul>\u003Cli>\u003Cstrong>背景モデラー・エフェクト:\u003C\u002Fstrong> Oさん\u003C\u002Fli>\u003Cli>\u003Cstrong>キャラクターイラスト・UI・キャラモデラー・テクスチャー:\u003C\u002Fstrong> Kさん\u003C\u002Fli>\u003Cli>\u003Cstrong>アニメーション:\u003C\u002Fstrong> Tさん(台湾からリモートで参加)\u003C\u002Fli>\u003Cli>\u003Cstrong>3Dキャラデザイン:\u003C\u002Fstrong> Nさん\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cbr>開発の経験が少ないため、スケジュールを立てることや計画通りに作業を進めることに苦戦し、進捗が遅れる場面もありました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>9月:\u003C\u002Fstrong> プロジェクト開始(何を作るか、担当をどうするかを決定)\u003C\u002Fli>\u003Cli>\u003Cstrong>12月:\u003C\u002Fstrong> ひとまず形にし、残りの期間をデバッグや調整に充てる予定だった\u003C\u002Fli>\u003Cli>\u003Cstrong>年末:\u003C\u002Fstrong> プログラムの実装が追いつかず開発を継続\u003C\u002Fli>\u003Cli>\u003Cstrong>2月:\u003C\u002Fstrong> なんとか完成し、学校イベントで展示\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"hb4431f018b\">開発中の出来事\u003C\u002Fh3>\u003Cp>開発が進む中で、\u003Cstrong>学生から様々な要望も出てきました\u003C\u002Fstrong>。特に印象的だったのは、\u003Cstrong>ランキングシステムの実装\u003C\u002Fstrong>を求められたことです。\u003Cbr>\u003Cbr>\u003Cstrong>「サーバーを立ててスコアを記録したい」\u003C\u002Fstrong>とのことでしたが、その当時はまだサーバーについて何の知識もありません。\u003Cbr>\u003Cbr>そもそも学校の展示環境ではネットワーク接続ができず、ゲームは順番に体験する形式だったため、\u003Cstrong>スコアをローカルストレージに保存\u003C\u002Fstrong>する方法で対応することに。結果として、それで十分に機能しました。\u003C\u002Fp>\u003Cp>この提案をした学生は開発にも積極的に関わり、現在はエフェクトアーティストとして活躍しています。\u003C\u002Fp>\u003Ch2 id=\"h258b2cd678\">開発したゲームの紹介\u003C\u002Fh2>\u003Cp>専門学校でのプロジェクトを通じて、\u003Cstrong>学生とともに試行錯誤しながらゲームを開発しました\u003C\u002Fstrong>。\u003Cbr>全員が初めてのゲーム制作という状況の中、半年間の取り組みの末、形にすることができたのが\u003Cstrong>「リトと荒野の宝物」\u003C\u002Fstrong> です。\u003C\u002Fp>\u003Cp>また、\u003Cstrong>個人開発\u003C\u002Fstrong>として制作し、リリースまでこぎつけたモバイルゲーム「\u003Cstrong>Crazy Chicken Curve\u003C\u002Fstrong>」もあります。\u003Cbr>ここでは、\u003Cstrong>それぞれのゲームの内容と開発背景\u003C\u002Fstrong>を紹介します。\u003C\u002Fp>\u003Ch3 id=\"h091cb89a6f\">①リトと荒野の宝物\u003C\u002Fh3>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FktESLD0Rxp8?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Cp>\u003Cbr>\u003Cstrong>ジャンル\u003C\u002Fstrong>：3Dアクションゲーム\u003Cbr>\u003Cstrong>開発期間\u003C\u002Fstrong>：2020 年 9 月〜2021 年 2 月\u003Cbr>\u003Cstrong>プラットフォーム\u003C\u002Fstrong>：Windows\u003Cbr>\u003Cstrong>使用エンジン\u003C\u002Fstrong>：Unreal Engine 4\u003Cbr>\u003Cbr>\u003Cbr>半年にわたる専門学校でのプロジェクトの結果、無事に完成、公開できました(学校のイベントで展示されましたが、一般公開はしていません)。\u003C\u002Fp>\u003Cp>剣による攻撃と盾による防御、さらにローリングによる回避を駆使しながら、\u003Cstrong>3Dのマップを敵を倒しながら進んでいくシンプルなアクションゲーム\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>ボス戦では、体力が半分以下になるとボスが赤くなる演出を入れ、戦闘の盛り上がりを演出。プレイ動画を見てもわかりにくいかもしれませんが、実はキャラクターの表情も状況に合わせて変化します。\u003C\u002Fp>\u003Cp>\u003Cstrong>開発には Unreal Engine 4 を使用\u003C\u002Fstrong>。学生と共同で制作し、自分はプログラムを担当しました。\u003C\u002Fp>\u003Ch3 id=\"h5e069fe238\">②Crazy Chicken Curve\u003C\u002Fh3>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FG0Vuzpi9iF8?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Cp>\u003Cbr>\u003Cstrong>ジャンル\u003C\u002Fstrong>：飛行シミュレーター（モバイルゲーム）\u003Cbr>\u003Cstrong>開発期間\u003C\u002Fstrong>：2021 年 3 月～ 5 月\u003Cbr>\u003Cstrong>プラットフォーム\u003C\u002Fstrong>：iOS（現在はストア非公開）\u003Cbr>\u003Cstrong>使用エンジン\u003C\u002Fstrong>：Unreal Engine 4\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>鳥が燃料を切らさないように空を飛びながら、球を避ける\u003C\u002Fstrong>シンプルなゲームです。\u003Cbr>高校生の頃にガラケーで遊んでいたゲームをベースに開発しました。\u003Cbr>\u003Cbr>プロトタイプは数年前に完成しており、この期間では主にアセットの作成を進めていました。トレンドに合わせて、\u003Cstrong>着せ替え要素\u003C\u002Fstrong>を豊富にしてあります。\u003Cbr>\u003Cbr>\u003Cstrong>iOS 向けにリリース\u003C\u002Fstrong>しましたが、現在は Apple の開発者アカウントの更新をしていないため、ストアでは公開されていません。Android 版も公開を試みましたが、うまくいかず断念しました。\u003C\u002Fp>\u003Cp>これまでに様々なゲームを開発してきましたが、\u003Cstrong>実際に完成まで持っていくのはとても難しいこと\u003C\u002Fstrong>でした。アイデアを形にするだけでなく、テストや調整を重ね、最終的に公開できた作品はほんのわずかです。\u003C\u002Fp>\u003Ch2 id=\"ha75526732a\">UNREAL ENGINE 4 とは\u003C\u002Fh2>\u003Cp>現在では \u003Ca href=\"https:\u002F\u002Fwww.unrealengine.com\u002Fja\u002Funreal-engine-5\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>UNREAL ENGINE 5\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> \u003C\u002Fstrong>が主流になっていますが、私がこれらのゲームを開発していた当時は \u003Cstrong>UNREAL ENGINE 4 \u003C\u002Fstrong>を使っていました。\u003Cbr>そもそも \u003Cstrong>UNREAL ENGINE とは、「ゲーム開発に使われる統合ソフトウェア(ゲームエンジン)」\u003C\u002Fstrong>のことです。\u003Cbr>\u003Cbr>主なゲームエンジンには、以下のようなものがあります。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Unreal Engine\u003C\u002Fstrong>\u003Cul>\u003Cli>リアル系グラフィックに強い統合ソフトウェア\u003C\u002Fli>\u003Cli>ノードベースのプログラミングシステム\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>Unity\u003C\u002Fstrong>\u003Cul>\u003Cli>初心者、プロ問わず長年親しまれておりユーザー数が一番多い\u003C\u002Fli>\u003Cli>アセットストアが豊富\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>Godot\u003C\u002Fstrong>\u003Cul>\u003Cli>軽量で2Dゲーム開発に強い\u003C\u002Fli>\u003Cli>完全無料のオープンソース\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>CryEngine\u003C\u002Fstrong>\u003Cul>\u003Cli>フォトリアルなグラフィック向き\u003C\u002Fli>\u003Cli>FPSやオープンワールドに最適\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>私が Unreal Engine を使っていた理由は、\u003Cstrong>「\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fdev.epicgames.com\u002Fdocumentation\u002Fja-jp\u002Funreal-engine\u002Fintroduction-to-blueprints?application_version=4.27\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Blueprint(BP)\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>」というノードベースのプログラミングシステム\u003C\u002Fstrong>があったからです。 BP を使えば、\u003Ca href=\"https:\u002F\u002Fisocpp.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">C++\u003C\u002Fa> を書かなくても本格的なプログラムを組むことができました。さらに、機能がノード単位でまとまっているため、タイプミスが発生しないというメリットもあります。\u003C\u002Fp>\u003Cp>当時、私はデザイナーとして働いており、コードを書くことに抵抗があったのですが、BP のおかげで少しずつプログラミングの基礎を学ぶことができ、ゲームの仕組みを理解する手助けになりました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FY1iWAxoSWLg?rel=0&start=489\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch2 id=\"h0fb270674a\">Unreal Engine から Godot へ\u003C\u002Fh2>\u003Cp>Unreal Engine 4 で多くのことを学び、とても感謝しているソフトウェアではありますが、\u003Cstrong>個人開発を考えたときにいくつかの課題\u003C\u002Fstrong>がありました。\u003C\u002Fp>\u003Cp>Unreal Engine は非常に高機能なエンジンですが、\u003Cstrong>個人開発ではオーバースペックになりやすく、扱いづらい場面が多い\u003C\u002Fstrong>ことが問題でした。\u003C\u002Fp>\u003Cp>特に \u003Cstrong>2D ゲームの開発があまり得意ではない\u003C\u002Fstrong> という点も移行を考えた理由の一つです。\u003Cbr>Unreal Engine でも 2D ゲームは作れますが、\u003Cstrong>2D 開発向けのツールやワークフローが整備されておらず、外部プラグインに頼る場面が多い\u003C\u002Fstrong>という課題があります。\u003Cbr>また、3D ベースのエンジンであるため、\u003Cstrong>2D の処理が過剰になり、動作が重くなりがち\u003C\u002Fstrong> という点も気になっていました。\u003C\u002Fp>\u003Cp>趣味としてゲーム開発を続ける中で、より軽量でシンプルなゲームエンジンが必要になり、新しい選択肢を探すことに。\u003C\u002Fp>\u003Ch3 id=\"h1e40e0ef18\">移行の基準\u003C\u002Fh3>\u003Cp>選ぶ際の基準として重視したのは、次のようなポイントです。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>完全無料で使えること\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>軽量で動作が快適なこと\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>2Dゲームの開発に適していること\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>シンプルで扱いやすいこと\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>この条件に合うものを探していく中で見つけたのが、\u003Ca href=\"https:\u002F\u002Fgodotengine.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Godot Engine\u003C\u002Fstrong>\u003C\u002Fa>。\u003Cbr>Godot 自体は以前から存在していましたが、\u003Cstrong>エンジンが大幅に書き直され、より使いやすくなった\u003C\u002Fstrong>という話を聞き、試してみることにしました。\u003C\u002Fp>\u003Ch3 id=\"hb8abfe2042\">Godot Engine とは？\u003C\u002Fh3>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fgodotengine.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F3c5cbed118714bff9ed6eb37b5f2bdce\u002Fgodot.png?w=650&h=262\" alt=\"godot\" width=\"650\" height=\"262\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>Godot は、\u003Cstrong>完全無料・オープンソースのゲームエンジン\u003C\u002Fstrong>で、シンプルな設計が特徴です。\u003Cbr>\u003C\u002Fp>\u003Cp>主な特徴として、以下のような点が挙げられます。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>GDScript\u003C\u002Fstrong> は \u003Cstrong>Python に似た独自言語\u003C\u002Fstrong>で、初心者でも扱いやすい\u003C\u002Fli>\u003Cli>\u003Cstrong>C# も使用可能\u003C\u002Fstrong> で、柔軟な開発ができる\u003C\u002Fli>\u003Cli>\u003Cstrong>Windows、Mac、Linux、iOS、Android、Web などに対応\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>軽量で、シンプルな UI を持ち、直感的な操作が可能\u003C\u002Fli>\u003Cli>\u003Cstrong>VSCode などの外部エディタとも連携可能\u003C\u002Fstrong>(ただし一部不具合あり)\u003C\u002Fli>\u003C\u002Ful>\u003Cp>特に \u003Cstrong>2D 開発のしやすさ\u003C\u002Fstrong>が魅力でした。\u003Cbr>Unreal Engine では 2D ゲームを作るのに苦労しましたが、Godot は最初から 2D 向けの機能が整っており、スムーズに開発できます。\u003C\u002Fp>\u003Cp>とはいえ、Godot はまだ使い始めたばかりで、本格的な開発はこれからです。\u003Cbr>機能がシンプルである分、Unreal Engine とは違った考え方を求められる場面もあり、\u003Cstrong>実際にどう使いこなせるかを試行錯誤している最中です。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>今後、Godot を実際に使ってみた感想や、開発の流れについてお話しできればと思います。\u003C\u002Fp>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>ここまで、\u003Cstrong>ゲーム開発を始めたきっかけや、専門学校でのプロジェクト、個人開発の経験\u003C\u002Fstrong>についてお話ししました。\u003C\u002Fp>\u003Cp>ゲームを形にするのは簡単ではなく、途中で行き詰まることもあります。\u003Cbr>\u003Cstrong>最後まで完成させ、公開までこぎつけた作品はほんのわずか\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>それでも、開発を続ける中で得られる経験や学びは大きく、手を動かしながら工夫を重ねていくことが何よりも大切だと感じています。\u003C\u002Fp>\u003Cp>この発表が、ゲーム開発に興味がある方や、これから挑戦してみようと思っている方にとって、少しでも参考になれば幸いです。\u003C\u002Fp>",[],"ゲームに関わる開発のご相談も承ります。","S2ファクトリーでは、ゲームに関わるコンテンツやシステムの開発にも携わっています。\nフロントエンドからバックエンド、インフラまで、内容に応じて必要な範囲をご相談いただけます。",{"contents":238,"totalCount":249,"offset":250,"limit":251},[239],{"id":240,"eyecatch":241,"publishedAt":245,"createdAt":246,"title":247,"is_html":15,"content2":248},"relax-room",{"url":242,"height":243,"width":244},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ffbabfbf964e44fa5bf8aa73af67e358f\u002Foffice-3.jpg",434,650,"2025-06-13T07:12:42.700Z","2025-03-18T01:43:49.576Z","昼寝から推し活まで。オフィスのリラックスルームの話","\u003Cp>オフィスの2階にある\u003Cstrong>「リラックスルーム」\u003C\u002Fstrong>は、スタッフが自由に過ごせる多目的なスペースです。\u003Cbr>畳が敷かれ、靴を脱いでリラックスできるこの部屋は、オフィスにいながら少し気持ちを切り替えられる場所として、多くのスタッフに親しまれています。\u003C\u002Fp>\u003Cp>壁にはアーティストの \u003Ca href=\"http:\u002F\u002Fmhak.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>MHAK\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> \u003C\u002Fstrong>によるペインティングとサインが描かれており、1 階エントランスやミーティングルームと並んで、会社の空間づくりに一貫した世界観を与えています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F3fc236bd9219457b9df2232abf757f7d\u002Fwall-7.jpg?w=650&h=433\" alt=\"MHAKのペインティング\" width=\"650\" height=\"433\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fmoving2023-interview-2\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fmoving2023-interview-2%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch3 id=\"hdb26563bbb\">「余白」から始まる、コミュニケーション\u003C\u002Fh3>\u003Cp>このリラックスルームは、ただの休憩所ではありません。\u003Cbr>構想の段階から大切にしていたのは、\u003Cstrong>「気分を切り替えたり、雑談したり、ちょっと立ち止まれる空間があること」\u003C\u002Fstrong>。\u003Cbr>それは仕事の効率だけでなく、人間関係やチームワーク、発想の広がりにもつながっていくと考えたからです。\u003C\u002Fp>\u003Cp>象徴的なのが、\u003Cstrong>漫画本の棚\u003C\u002Fstrong>。\u003Cbr>ここに並んでいるのは、ただ集められたものではなく、\u003Cstrong>社員に「会社に置きたい漫画」を募って購入したもの\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>自分が読みたい作品、誰かに勧めたい作品。「この本、誰が選んだんだろう？」そんな会話がふと生まれることもあります。本棚そのものが、ゆるやかなコミュニケーションのきっかけとなっているのです。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F42011e7a3d604a178d257a0438dca19b\u002Fmanga-1.jpg?w=650&h=487\" alt=\"漫画棚\" width=\"650\" height=\"487\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F22e32c0cc426476697fd8a8cee262b5c\u002Fmanga-2.jpg?w=650&h=487\" alt=\"漫画棚\" width=\"650\" height=\"487\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ffb31f1d2a3754b9cb83852f36d62101e\u002Fmanga-3.jpg?w=650&h=487\" alt=\"漫画棚\" width=\"650\" height=\"487\">\u003C\u002Ffigure>\u003Ch3 id=\"hfb47a22993\">自然と広がる、使い方のバリエーション\u003C\u002Fh3>\u003Cp>設置当初の想定を超えて、使い方の幅もどんどん広がっています。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>昼休みに仮眠をとる\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>気分を変えてデスクワークやオンラインミーティングを行う\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>プロジェクターを使って映画やライブ映像を楽しむ推し活\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ボードゲームを囲んで交流する\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>備え付けのPS5を使って、社内からesports部の活動に参加\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>会社の福利厚生として\u003Cstrong>毎週火曜の昼休みに実施しているオンラインピラティス\u003C\u002Fstrong>も、出社しているスタッフたちがこの部屋に集まり、画面を見ながら一緒に体を動かしています。\u003Cbr>畳の上で、ちょっとしたストレッチやリフレッシュをするのにもぴったりな場所です。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F6ba735b391f04f0cb449ca75cfaeb363\u002Frelaxroom-1.png?w=650&h=481\" alt=\"映画鑑賞会の様子\" width=\"650\" height=\"481\">\u003Cfigcaption>プロジェクターを使って映画鑑賞会や推し活などのイベントが行われることも。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F119493275edd473085c60d296b80f68d\u002Frelaxroom-2.jpg?w=650&h=365\" alt=\"esportsをやってる様子\" width=\"650\" height=\"365\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fpilates\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fpilates%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>誰かが静かに仕事をしていたり、昼寝をしていたり、同じ趣味の話で盛り上がっていたり。リラックスルームは、そんなふうに自然体で過ごせる場所として、少しずつ定着してきました。\u003C\u002Fp>\u003Cp>特別な目的がなくても立ち寄れる、気軽に使える場所がオフィスの中にあることで、業務の効率だけでなく、ちょっとしたリズムの変化や、会話のきっかけが生まれやすくなります。\u003C\u002Fp>\u003Cp>オフィスにお越しの際は、ぜひお気軽にお立ち寄りください。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cspan style=\"color: #b2b2b2\">下の特設サイトにオフィスに関する記事がまとめてありますので、良かったらそちらも合わせてご覧になってみてください。\u003C\u002Fspan>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fmoving2023\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fmoving2023%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>",10,0,1,{"contents":253,"totalCount":276,"offset":250,"limit":277},[254,264,274],{"id":255,"eyecatch":256,"publishedAt":260,"createdAt":261,"title":262,"is_html":15,"content2":263},"office-bookshelf",{"url":257,"height":258,"width":259},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc265bf88145b4209b9b9b3e05d5ce1f9\u002Fbookshelf-1.jpg",3024,4032,"2026-07-31T04:43:21.182Z","2025-04-30T16:13:56.191Z","スタッフのおすすめでつくる、オフィスの漫画本棚","\u003Cp>オフィスの 2 階にあるリラックスルームには、\u003Cstrong>スタッフが推薦した漫画を集めた本棚\u003C\u002Fstrong>があります。\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Frelax-room\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">以前の記事\u003C\u002Fa>でも紹介したとおり、この部屋は昼寝やミーティング、ピラティス、ゲーム、推し活、上映会など、さまざまな用途で使われている空間です。その一角に、技術書や業務に関する書籍とは別に、漫画を自由に読める棚を設けています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Faed6b5618b2b4fd59dc16c4ee9a3babe\u002Fbookshelf-2.jpg\" alt=\"休憩室\" width=\"4032\" height=\"3024\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>スタッフのおすすめを持ち寄ることで、\u003Cstrong>普段は自分で選ばない作品を知ったり、漫画をきっかけに会話が生まれたりする場所\u003C\u002Fstrong>を目指しています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Frelax-room\u002F\" data-iframely-url=\"https:\u002F\u002Fiframely.net\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Frelax-room%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fiframely.net\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch2 id=\"h76e75bd31d\">漫画を選んだ理由\u003C\u002Fh2>\u003Cp>弊社では、メディアやコンテンツに関わるプロジェクトも多く、\u003Cstrong>日頃から幅広い物語や表現に触れることが、制作物への理解や提案の幅を広げる\u003C\u002Fstrong>ことにもつながると考えています。\u003C\u002Fp>\u003Cp>その中でも漫画は、誰でも気軽に手に取りやすい媒体です。休憩時間に少しだけ読んだり、気になった作品を自分のペースで読み進めたりできます。\u003C\u002Fp>\u003Cp>こうした仕事との接点と親しみやすさから、まずは漫画を中心にそろえていくことになりました。\u003C\u002Fp>\u003Ch2 id=\"h163b8534fc\">作品の選び方\u003C\u002Fh2>\u003Cp>本棚に追加する作品は、\u003Cstrong>スタッフからの推薦と投票\u003C\u002Fstrong>で決めています。\u003Cbr>候補はスプレッドシートで管理しており、推薦するスタッフが次の情報を記入します。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>タイトル\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>作者\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>現在の巻数\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>完結しているかどうか\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>推薦コメント\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>推薦コメントには、あらすじだけでなく、どこがおもしろかったのか、なぜほかのスタッフにも読んでほしいのかといった、おすすめの理由が添えられます。\u003C\u002Fp>\u003Cp>投票は現在、不定期に実施しています。事前に Slack で開催を知らせ、候補の中から読みたい漫画にリアクションで投票。\u003Cstrong>得票数の多い作品から順に、票数に応じて購入\u003C\u002Fstrong>する巻数を決め、予算の範囲内で購入されるシステムです。\u003C\u002Fp>\u003Cp>締切が近づくと、漫画用の Slack チャンネルで\u003Cstrong>推薦者による選挙活動\u003C\u002Fstrong>が始まることもあります。推している作品の魅力を紹介したり、ほかのスタッフから質問が寄せられたりと、\u003Cstrong>投票前からちょっとした盛り上がり\u003C\u002Fstrong>を見せることも。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F246d8519f8814b44924ab1dec72f2f3a\u002Fbookshelf-3.jpg?w=716&h=800\" alt=\"漫画棚\" width=\"716\" height=\"800\">\u003C\u002Ffigure>\u003Ch2 id=\"h7a10f09440\">本棚の管理もシステム化へ\u003C\u002Fh2>\u003Cp>冊数が増えてきたことから、今後は\u003Cstrong>本棚を管理する仕組み\u003C\u002Fstrong>も検討しています。\u003C\u002Fp>\u003Cp>現在考えているのは、\u003Cstrong>どのような本があり、どこに置かれているのか、貸し出し中の場合は誰が持っているのか\u003C\u002Fstrong>を確認できるシンプルなシステムです。バーコードを読み取ると、書籍情報のAPIからタイトルや表紙画像などを取得し、自動で登録できる形を想定しています。\u003C\u002Fp>\u003Cp>まずは技術書の本棚での導入を検討しており、仕組みが整えば漫画の管理にも活用する予定です。さらに、どこまで読んだかを記録したり、漫画本棚の「制覇率」を表示したりと、読むこと自体を楽しめる機能もアイデアとして挙がっています。\u003C\u002Fp>\u003Ch2 id=\"h4737611bc7\">これからのこと\u003C\u002Fh2>\u003Cp>この本棚は、スタッフの提案から始まり、推薦や投票を取り入れながら現在の形になりました。目論見通り、漫画が増えるにつれて感想を交わしたり、次に読みたい作品を勧め合ったりする\u003Cstrong>コミュニケーション\u003C\u002Fstrong>も新たに生まれています。\u003C\u002Fp>\u003Cp>今後は、冊数に合わせた整理や保管、作品の追加・入れ替え、リモート勤務のスタッフも参加しやすい方法などを見直していく予定です。本棚に限らず、日々の中で出てきたアイデアを取り入れながら、スタッフが過ごしやすい環境を少しずつ整えていきます。\u003C\u002Fp>\u003Cp>本棚に限らず、身近なアイデアをまず試し、使いながらよりよい形にしていく。そんな柔軟さを大切にしながら、これからも\u003Cstrong>スタッフが気持ちよく過ごせる環境\u003C\u002Fstrong>をつくっていきます。\u003C\u002Fp>",{"id":265,"eyecatch":266,"publishedAt":270,"createdAt":271,"title":272,"is_html":15,"content2":273},"technical-writing",{"url":267,"height":268,"width":269},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fb24fb52fae254f2ea1239a69799e1ba1\u002FTW.jpg",2384,4240,"2026-07-23T11:09:26.357Z","2026-07-22T04:53:11.568Z","テクニカルライティングとは？3 級試験の概要と文章作成の基本","\u003Cp>ジムに通い始めてから明らかに免疫力が低下しました。\u003C\u002Fp>\u003Cp>この記事は、社内イベント「\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ftea\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cu>お茶会\u003C\u002Fu>\u003C\u002Fa>」での発表内容をもとにまとめたものです。\u003Cbr>今回は、弊社の saiko が\u003Cstrong>「3級 テクニカルライティング試験」の勉強を通して学んだ、テクニカルライティングの基本\u003C\u002Fstrong>について発表しました。\u003C\u002Fp>\u003Chr>\u003Cp style=\"text-align: start\">\u003Cbr>普段の業務では、Slack やメールでのやりとりや資料作成など、文章で何かを伝える機会が多くあります。内容を正確に伝えながら、読み手にとって理解しやすい文章を書くにはどうすればよいのか。あらためて学んでみたいと思い、\u003Cstrong>3 級 テクニカルライティング試験を受験\u003C\u002Fstrong>することにしました。\u003C\u002Fp>\u003Cp>試験勉強を通して学んだ内容を振り返り、普段の文章作成に取り入れたい考え方を自分なりに整理してみました。\u003C\u002Fp>\u003Cp>\u003Cspan style=\"color: #7e7e7e\">※試験・受験対策セミナーに関する情報は、2026 年 7 月時点のものです。\u003C\u002Fspan>\u003C\u002Fp>\u003Ch2 id=\"h8dce327997\">テクニカルライティングとは\u003C\u002Fh2>\u003Cp>テクニカルライティングは、\u003Cstrong>物事の説明や伝達を目的とした実用文を書くための技術\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>実用文には説明する\u003Cstrong>対象と読み手\u003C\u002Fstrong>が存在します。内容を簡潔かつ明快に示し、誤解なく理解してもらうことが重要です。情報を伝えるだけでなく、読み手に行動を促したり、文書そのものを成果物として仕上げたりする場合にも用いられます。\u003C\u002Fp>\u003Cp>その歴史は古く、\u003Cstrong>工業製品や科学技術の開発が複雑化した1950年代以降に広がり、製品の普及や法令・規格の整備、文書作成のデジタル化とともに発展\u003C\u002Fstrong>してきました。\u003C\u002Fp>\u003Ch3 id=\"h81f4e2cd9a\">テクニカルライティングが有効な文書\u003C\u002Fh3>\u003Cp>テクニカルライティングは、次のような文書に適しています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F2e1dee6d909c4eaabb97364f70780da0\u002Ftechnical-writing-document-types-v3.png\" alt=\"案内・お知らせ、提案資料、記録・報告、ガイド、仕様書・ドキュメント、レポート、教材・解説資料\" width=\"1600\" height=\"700\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>一方、法令に沿った用語や表現が求められる法務文書や、印象に残る表現を重視する広告コピーには、そのまま適用しにくい場合があります。\u003C\u002Fp>\u003Ch2 id=\"h75504c6a7c\">TC 技術検定と 3 級 テクニカルライティング試験\u003C\u002Fh2>\u003Cp>こうしたテクニカルライティングの\u003Cstrong>基礎的な知識や文章表現の能力を問う試験の一つが、「3級 テクニカルライティング試験［TW］」\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fjtca.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">一般財団法人テクニカルコミュニケーター協会\u003C\u002Fa>が実施する「テクニカルコミュニケーション技術検定試験（以下、TC技術検定）」の一つで、マニュアルなどの使用情報を作成する人に限らず、\u003Cstrong>実用文に役立つ日本語の文章表現技術を身につけたい人を対象\u003C\u002Fstrong>としています。受験資格に制限はありません。\u003C\u002Fp>\u003Cp>試験範囲には、\u003Cstrong>文法や用字・用語、表記、読みやすく誤解されにくい文章表現のほか、表現設計、構造化、制作ツール、コンプライアンス\u003C\u002Fstrong>なども含まれます。\u003C\u002Fp>\u003Cp>近年は、冬の 2 月頃と夏の 7 月頃に\u003Cstrong>年 2 回\u003C\u002Fstrong>実施されています。主な試験内容は次のとおりです。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>選択式問題\u003C\u002Fstrong>：50 分\u003C\u002Fli>\u003Cli>\u003Cstrong>記述式問題\u003C\u002Fstrong>：50 分\u003C\u002Fli>\u003Cli>\u003Cstrong>受験料\u003C\u002Fstrong>：TC 協会会員・学生は 11,000 円、非会員は 16,720 円\u003C\u002Fli>\u003Cli>\u003Cstrong>主な試験会場\u003C\u002Fstrong>：東京、大阪、名古屋、福岡、広島、石川\u003C\u002Fli>\u003C\u002Ful>\u003Cp>開催回によって変更される可能性があるため、詳しくは\u003Ca href=\"https:\u002F\u002Fjtca.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">公式サイト\u003C\u002Fa>をご確認ください。\u003C\u002Fp>\u003Cp>試験後は合否通知が郵送され、合格者には合格証書が送付されます。合否通知には 100 点満点に換算した得点が記載されます。\u003Cbr>特定の業務に就くための必須資格ではありませんが、\u003Cstrong>実用文を書くための基礎を体系的に学び、その到達度を確認する目安\u003C\u002Fstrong>になります。\u003C\u002Fp>\u003Ch3 id=\"h72252483b2\">TC 技術検定の等級\u003C\u002Fh3>\u003Cp>TC 技術検定には、\u003Cstrong>現在 3 級と 2 級があり\u003C\u002Fstrong>、2 級は目的に応じて 2 種類に分かれています。1 級については、現時点で詳細を検討中のようです。\u003C\u002Fp>\u003Ctable>\u003Ctbody>\u003Ctr>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>等級\u003C\u002Fp>\u003C\u002Fth>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>試験\u003C\u002Fp>\u003C\u002Fth>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>主に扱う内容\u003C\u002Fp>\u003C\u002Fth>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>3級\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>テクニカルライティング試験［TW］\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>実用文を書くための日本語表現とテクニカルライティングの基礎\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>2級\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>使用情報制作ディレクション試験［DR］\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>使用情報の企画、設計、制作管理\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>2級\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>使用情報制作実務試験［MP］\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>取扱説明書などの執筆、作図、制作実務\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>1級\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>詳細検討中\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>現時点では試験内容を検討中\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>2 級を受験するには、3 級に合格していなければいけません。\u003Cbr>3 級が文章作成の基礎を広く扱うのに対し、2 級は使用情報の制作に関する、より専門的な知識と能力を対象としています。\u003C\u002Fp>\u003Ch3 id=\"h66c36423ed\">参考書と受験対策セミナー\u003C\u002Fh3>\u003Cp>公式の参考書として案内されているのが『\u003Ca href=\"https:\u002F\u002Famzn.asia\u002Fd\u002F0bC20uae\" target=\"_blank\" rel=\"noopener noreferrer\">日本語スタイルガイド（第3版）\u003C\u002Fa>』です。試験範囲となる知識を体系的に学べます。\u003C\u002Fp>\u003Cp>また、\u003Cstrong>希望者向けにオンラインでの受験対策セミナーも開催\u003C\u002Fstrong>されています。開催概要は次のとおりです。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>受講時間\u003C\u002Fstrong>：1 回 3 時間\u003C\u002Fli>\u003Cli>\u003Cstrong>受講料\u003C\u002Fstrong>：TC 協会会員・学生は 4,400 円、非会員は 8,800 円\u003C\u002Fli>\u003C\u002Ful>\u003Cp>セミナーでは、試験範囲や参考書の学習ポイント、例題を使った解答の考え方などが解説されます。\u003C\u002Fp>\u003Cp>ここからは、試験勉強を通して学んだ内容を、文章作成の流れに沿って自分なりに整理してみました。\u003C\u002Fp>\u003Ch2 id=\"h198dc7ef0c\">読み手に伝わる文章を書く4つのステップ\u003C\u002Fh2>\u003Cp>テクニカルライティングでは、文章表現だけでなく、その前提となる\u003Cstrong>人の認知と行動の特性\u003C\u002Fstrong>も考慮します。\u003C\u002Fp>\u003Cp>目や耳から受け取った情報は一時的に保持され、これまでの知識や経験と照らし合わせながら処理されます。その結果、意思決定や行動につながり、必要な情報が記憶に残ります。\u003C\u002Fp>\u003Cp>また、人の行動は、目標を定め、実行し、その結果を評価する流れで進みます。文章でも、\u003Cstrong>読み手が目的を理解し、示された手順を実行したうえで、その結果を確認できるように組み立てる\u003C\u002Fstrong>ことが大切です。\u003C\u002Fp>\u003Cp>こうした特徴を踏まえ、文章を作成する流れを4つのステップに分けて見ていきます。\u003C\u002Fp>\u003Ch3 id=\"hd38374898a\">1. 何のために、誰に伝えるのかを決める\u003C\u002Fh3>\u003Cp>最初に決めるのは、\u003Cstrong>何のために、誰に伝えるのか\u003C\u002Fstrong>という点です。目的と読み手が変われば、\u003Cstrong>取り上げる情報や示す順序、適した表現\u003C\u002Fstrong>も異なります。\u003C\u002Fp>\u003Cp>複数の目的がある場合は、中心となるものと、それに付随するものを分けます。たとえば、新しいツールの利用方法を案内する場合は、操作を迷わず進めてもらうことを主な目的とし、背景説明は必要な範囲に絞るという考え方です。\u003C\u002Fp>\u003Cp>読み手については、年齢や職業などの属性だけでなく、次の点も想定します。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>どの程度の知識を持っているか\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>何に関心を持っているか\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>どのような目的で文章を読むのか\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>読んだあと、どのような状態になってほしいか\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>相手を具体的に思い浮かべることで、どこから説明すべきか、専門用語をどこまで使えるかを判断しやすくなります。\u003C\u002Fp>\u003Ch3 id=\"h40044cb1a7\">2. 必要な情報を選び、伝える順序を整える\u003C\u002Fh3>\u003Cp>書き始める前に、説明する対象について情報を集めます。どのようなものなのか、既存のものと何が違うのか、読み手にとってどのような意味があるのかを確認します。\u003C\u002Fp>\u003Cp>集めた情報をすべて文章に盛り込むわけではありません。\u003Cstrong>目的に応じたものを選び、時系列や重要度、関連性などを手がかりに分類\u003C\u002Fstrong>します。この段階では文章の形を意識しすぎず、メモなど自分が扱いやすい方法でまとめても構いません。\u003C\u002Fp>\u003Cp>読み手が内容を理解しやすくなるように、次のような点も意識します。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>情報を意味のまとまりごとに分ける\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>全体から部分へ、概要から詳細へと進める\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>既に知っていることから説明を始める\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>必要に応じて具体例やたとえを用いる\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>作業の説明は実際の手順に沿って並べる\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>一度に多くのことを伝えようとせず、\u003Cstrong>必要な情報を選んで順番に示す\u003C\u002Fstrong>ことが大切です。\u003C\u002Fp>\u003Ch3 id=\"h11d461cc37\">3. 内容と見た目を設計する\u003C\u002Fh3>\u003Cp>伝える情報と順序が決まったら、\u003Cstrong>文章や図表、写真などをどのように配置するか\u003C\u002Fstrong>を考えます。\u003C\u002Fp>\u003Cp>どれだけ大切なことを書いても、必要な情報を見つけにくければ十分に読んでもらえません。\u003Cstrong>目次や見出しを設け、書式に統一感を持たせる\u003C\u002Fstrong>ことで、全体の構成や情報の位置を把握しやすくします。\u003C\u002Fp>\u003Cp>構造化では、見出しや本文などの\u003Cstrong>内容に関する情報\u003C\u002Fstrong>と、書体や文字サイズなどの\u003Cstrong>見た目に関する情報\u003C\u002Fstrong>を分けます。Web ページで考えると、内容や役割を記述する HTML と、デザインを指定する CSS の関係がわかりやすい例です。\u003C\u002Fp>\u003Cp>両者を分けることで、文章の役割や階層が明確になり、読み手が必要な場所へたどり着きやすくなるほか、作り手にとっても修正や再利用がしやすくなります。\u003C\u002Fp>\u003Ch3 id=\"hc6ad3cc717\">4. 読み返して修正する\u003C\u002Fh3>\u003Cp>書き終えたら、\u003Cstrong>推敲・リライト・全体確認\u003C\u002Fstrong>の順に仕上げます。\u003C\u002Fp>\u003Cp>推敲では原稿を読み返し、単語や語句の使い方、文や段落のつながり、内容の正しさや一貫性を確認します。書き上げてから少し時間を置いたり、紙に印刷して読んだりすると、\u003Cstrong>執筆中には見落としていた違和感\u003C\u002Fstrong>に気づきやすくなります。\u003C\u002Fp>\u003Cp>修正が必要な箇所は、情報の追加や削除、文章の書き換えを行います。変更した部分だけでなく、最後に全体を通して読み、前後のつながりに問題がないか確かめることも重要です。\u003C\u002Fp>\u003Ch2 id=\"hc09b760b56\">生成 AI 時代のテクニカルライティング\u003C\u002Fh2>\u003Cp>最近では、\u003Cstrong>生成 AI によって、文章の下書きや要約、書き換え\u003C\u002Fstrong>などを行う場面が増えており、\u003Cstrong>技術文書の制作でも、表記の統一や構造化、コードサンプルの生成といった作業\u003C\u002Fstrong>に使われ始めています。\u003C\u002Fp>\u003Cp>一方で、生成された内容が正確とは限らず、事実と異なる情報が含まれることも。\u003Cbr>AI を利用する際は、\u003Cstrong>出力の正確性だけでなく、入力する情報にプライバシーや知的財産上の問題がないかにも注意が不可欠\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>テクニカルライティングの考え方は、\u003Cstrong>プロンプト\u003C\u002Fstrong>を作る際にも役立ちます。\u003Cstrong>目的や前提、求める内容を整理して伝える\u003C\u002Fstrong>ことで、意図に近い出力を得やすくなり、修正のためのやり取りやクレジットの消費を抑えることにもつながります。\u003C\u002Fp>\u003Cp>AI が文章作成の一部を担うようになっても、目的と読み手の設定、情報の整理、見せ方、推敲という考え方は変わりません。\u003Cbr>\u003Cstrong>AI へ適切な指示を出し、生成された文章を評価するうえでも、テクニカルライティングの知識は重要\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F28a3ed54c9cf41129b34646b6d5a0c89\u002Fai-document-workflow.png\" alt=\"\" width=\"1600\" height=\"600\">\u003C\u002Ffigure>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>受験勉強を進めるなかで、目的や読み手を決め、情報を整理して文章を組み立てる考え方は、普段の業務にも取り入れやすいと感じました。一方、言語表現や表記には細かな決まりがあり、\u003Cstrong>覚える項目の多さには苦労\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Cp>試験では、『日本語スタイルガイド（第3版）』で扱われている表記や文章表現のルールを踏まえて解答しなければいけませんが、実際の文章では、すべてのルールをそのまま当てはめればよいとは限りません。Slack やメールでは、送信前に一度読み返す、一文に多くの内容を詰め込みすぎないなど、\u003Cstrong>目的や読み手に合った考え方を選んで取り入れることが大切\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>今回学んだ内容を振り返りながら、日々の業務でも、読み手にとって理解しやすい文章を書くことを意識していきたいと思います。\u003Cbr>\u003Cbr>\u003Cbr>参考文献：一般財団法人テクニカルコミュニケーター協会編著『日本語スタイルガイド（第3版）』\u003C\u002Fp>",{"id":30,"eyecatch":275,"publishedAt":33,"createdAt":31,"title":34,"is_html":15,"content2":48},{"url":45,"height":46,"width":47},175,3,{"contents":279,"totalCount":492,"offset":250,"limit":493},[280,282,285,288,291,294,297,300,303,306,309,312,315,318,321,324,326,329,332,333,336,339,341,344,347,350,353,356,359,362,365,368,371,372,375,378,381,382,384,387,390,393,396,399,402,405,408,409,412,415,418,420,423,426,428,431,433,436,439,442,445,448,450,453,456,459,462,465,468,471,474,477,480,483,486,489],{"id":70,"name":281},"AI",{"id":283,"name":284},"workshop","ワークショップ",{"id":286,"name":287},"tool","ツール",{"id":289,"name":290},"office","オフィス",{"id":292,"name":293},"internal-project","社内案件",{"id":295,"name":296},"event","イベント",{"id":298,"name":299},"iot","IoT",{"id":301,"name":302},"art","アート",{"id":304,"name":305},"moving","引越し",{"id":307,"name":308},"picture","映像",{"id":310,"name":311},"plant","植物",{"id":313,"name":314},"company-trip","社員旅行",{"id":316,"name":317},"health","健康",{"id":319,"name":320},"exercise","運動",{"id":322,"name":323},"bicycle-club","自転車部",{"id":77,"name":325},"PR",{"id":327,"name":328},"interview","Interview",{"id":330,"name":331},"recruiting","採用",{"id":17,"name":21},{"id":334,"name":335},"history","歴史",{"id":337,"name":338},"life","生活",{"id":190,"name":340},"部活動",{"id":342,"name":343},"character","キャラクター",{"id":345,"name":346},"food","食",{"id":348,"name":349},"math","数学",{"id":351,"name":352},"alcohol","酒",{"id":354,"name":355},"infrastructure","インフラ",{"id":357,"name":358},"application","アプリ",{"id":360,"name":361},"parenting","子育て",{"id":363,"name":364},"data","通信",{"id":366,"name":367},"migration","地方移住",{"id":369,"name":370},"security","セキュリティ",{"id":186,"name":186},{"id":373,"name":374},"look-back","振り返り",{"id":376,"name":377},"animal","動物",{"id":379,"name":380},"css","CSS",{"id":11,"name":14},{"id":72,"name":383},"TypeScript",{"id":385,"name":386},"management","マネジメント",{"id":388,"name":389},"remote-work","リモートワーク",{"id":391,"name":392},"frame-work","フレームワーク",{"id":394,"name":395},"music","音楽",{"id":397,"name":398},"money","お金",{"id":400,"name":401},"covid-19","コロナ",{"id":403,"name":404},"railway","鉄道",{"id":406,"name":407},"agriculture","農業",{"id":24,"name":27},{"id":410,"name":411},"certification","資格",{"id":413,"name":414},"personal-computer","PC",{"id":416,"name":417},"welfare","福利厚生",{"id":41,"name":419},"技術",{"id":421,"name":422},"study","勉強",{"id":424,"name":425},"mental-health","メンタルヘルス",{"id":37,"name":427},"フロントエンド",{"id":429,"name":430},"pilates","ピラティス",{"id":74,"name":432},"バックエンド",{"id":434,"name":435},"tunnel","トンネル",{"id":437,"name":438},"design","デザイン",{"id":440,"name":441},"sports","スポーツ",{"id":443,"name":444},"online","オンライン",{"id":446,"name":447},"internship","インターンシップ",{"id":39,"name":449},"アニメーション",{"id":451,"name":452},"virtual-reality","VR",{"id":454,"name":455},"ssl","SSL",{"id":457,"name":458},"perl","Perl",{"id":460,"name":461},"operating-system","OS",{"id":463,"name":464},"ios","iOS",{"id":466,"name":467},"google","Google",{"id":469,"name":470},"deeplearning","DeepLearning",{"id":472,"name":473},"aws","AWS",{"id":475,"name":476},"apple","Apple",{"id":478,"name":479},"api","API",{"id":481,"name":482},"3-d","3D",{"id":484,"name":485},"school","学校",{"id":487,"name":488},"blender","Blender",{"id":490,"name":491},"android","Android",76,200,{"contents":495,"totalCount":277,"offset":250,"limit":277},[496,549,614],{"id":497,"createdAt":498,"updatedAt":499,"publishedAt":500,"revisedAt":499,"title":501,"category":502,"thumbnail":511,"image":514,"content":523,"keyword":524,"client":539,"team":540,"url":544,"release":545,"status":546,"top":15,"blog":22,"service":548},"phpj-noel-2025","2025-12-15T06:18:04.117Z","2026-08-04T09:31:48.003Z","2026-03-05T04:15:03.177Z","PIERRE HERMÉ PARIS | NOËL 2025",[503,508],{"id":504,"createdAt":505,"updatedAt":506,"publishedAt":505,"revisedAt":505,"name":507},"web","2024-03-22T05:33:05.262Z","2024-06-24T23:16:42.692Z","ウェブ制作",{"id":437,"createdAt":509,"updatedAt":509,"publishedAt":509,"revisedAt":509,"name":510},"2024-03-22T05:34:30.127Z","デザイン＆ディレクション",{"url":512,"height":513,"width":152},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F47e7b069013a45b8b6e931ec132bd272\u002Fthumb.png",900,[515,519,521],{"url":516,"height":517,"width":518},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F43a703ebe8d7467aac2c995378cb081e\u002F1.png",1800,2400,{"url":520,"height":517,"width":518},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F6aed2d670822422696329a5cb3a6877f\u002F2.png",{"url":522,"height":517,"width":518},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002Fb691d73151a94dcf9d60a6f8af436eac\u002F3.png","\u003Cp>昨年に続き、ホリデーシーズン限定の『NOËL 2025』スペシャルサイトを、\u003Cstrong>デザインとフロントエンドで担当\u003C\u002Fstrong>しました。\u003Cbr>\u003Cbr>\u003Cstrong>「深海(アビス)」をテーマ\u003C\u002Fstrong>に、鮮やかな青から徐々に暗く沈んでいくグラデーションで、海の中を潜っていくような体験を表現。泡や珊瑚、砂などのモチーフを取り入れ、ページ全体で海中の世界を感じられる構成に仕上げました。\u003Cbr>\u003Cbr>砂や泡の表現にはWebGLとGPGPUを用い、数万単位のパーティクルをGPUで並列処理することで滑らかな動作を実現。一部テキストは3D描画で演出しながら、DOM上にも同内容を配置し、表現とSEOの両立を図りました。\u003Cbr>また、Safariなどブラウザ差異による負荷を考慮し、SVGからCanvasへ置き換えるなど最適化を実施。視覚的な印象を保ちながら、各環境で安定して動作するよう設計しています。\u003Cbr>\u003Cbr>\u003Cstrong>デザインと実装の両面から、制作の背景やポイントについてブログで詳しく解説\u003C\u002Fstrong>しています。\u003C\u002Fp>",[525,529,534],{"id":526,"createdAt":527,"updatedAt":528,"publishedAt":527,"revisedAt":528,"name":427,"filter":22,"page":22},"ice0h9h9ap","2024-06-28T01:14:44.830Z","2025-01-15T07:40:01.729Z",{"id":530,"createdAt":531,"updatedAt":532,"publishedAt":531,"revisedAt":532,"name":533,"filter":22,"page":22},"6ncqc37v7nzq","2024-06-28T01:14:12.293Z","2025-01-15T07:39:08.437Z","デザインプロジェクト",{"id":535,"createdAt":536,"updatedAt":537,"publishedAt":536,"revisedAt":537,"name":538,"filter":22,"page":22},"ztrz9np70v","2024-06-28T01:14:41.050Z","2025-01-15T07:40:30.428Z","コンセプトメイキング"," PH PARIS JAPON 株式会社",[541],{"fieldId":542,"title":543},"teamField","S2ファクトリー","https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fnoel2025\u002F","2025.10.17",[547],"公開中",[438],{"id":550,"createdAt":551,"updatedAt":552,"publishedAt":551,"revisedAt":552,"title":553,"category":554,"thumbnail":561,"image":565,"content":570,"keyword":571,"client":553,"team":586,"url":609,"release":610,"status":611,"statusText":612,"top":22,"blog":22,"service":613},"tamabi","2024-06-28T01:58:38.788Z","2025-05-27T03:25:42.261Z","多摩美術大学",[555,556],{"id":504,"createdAt":505,"updatedAt":506,"publishedAt":505,"revisedAt":505,"name":507},{"id":557,"createdAt":558,"updatedAt":559,"publishedAt":558,"revisedAt":558,"name":560},"system","2024-03-22T05:33:52.708Z","2024-06-24T23:16:53.739Z","システム開発",{"url":562,"height":563,"width":564},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002Fdea8e004e627415c80bf7b8d622bb4b9\u002Ftamabi-thumbnail-1.png",456,600,[566],{"url":567,"height":568,"width":569},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002Fa000f3cedf5d474d83c5b70e8c11db4e\u002Ftamabi-other-1.png",1305,1740,"\u003Cp>「多摩美術大学」ウェブサイトリニューアルのお手伝いをさせていただきました。\u003Cbr>\u003Cbr>サイトのコンテンツを大幅に整理し、運用効率を考慮した再利用しやすく組み合わせやすいUIコンポーネントを構築。また多くの方に利用していただけるようにアクセシビリティの向上にも注力しました。\u003Cbr>インフラは、従来のオンプレミスとクラウドが混在していた環境から、AWS への段階的な移行を進めており、今後の完全移行に向けた準備も進行中です。 \u003Cbr>\u003Cbr>弊社は、フロントエンドとバックエンドの実装、インフラ構築を担当しました。\u003C\u002Fp>",[572,576,580,585],{"id":573,"createdAt":574,"updatedAt":575,"publishedAt":574,"revisedAt":575,"name":473,"filter":22,"page":22},"uftrxsmd0v72","2024-06-28T01:14:13.671Z","2025-01-15T07:39:25.538Z",{"id":577,"createdAt":578,"updatedAt":578,"publishedAt":578,"revisedAt":578,"name":579,"filter":15,"page":15},"yctx9hzd4","2024-06-28T01:14:33.743Z","Lambda",{"id":581,"createdAt":582,"updatedAt":583,"publishedAt":582,"revisedAt":583,"name":584,"filter":22,"page":22},"u84cy0fbzno","2024-06-28T01:14:39.521Z","2025-01-15T07:40:41.433Z","Cloud",{"id":526,"createdAt":527,"updatedAt":528,"publishedAt":527,"revisedAt":528,"name":427,"filter":22,"page":22},[587,590,593,596,599,602,605,608],{"fieldId":542,"title":588,"link":589},"萩原 俊矢","https:\u002F\u002Fshunyahagiwara.com\u002F#\u002Fworks",{"fieldId":542,"title":591,"link":592},"GrandBase Inc.","https:\u002F\u002Fwww.grandbase.jp\u002F",{"fieldId":542,"title":594,"link":595},"DSCL Inc.","https:\u002F\u002Fdscl.jp\u002F",{"fieldId":542,"title":597,"link":598},"株式会社トラフィックス","https:\u002F\u002Ftraffics.jp\u002F",{"fieldId":542,"title":600,"link":601},"株式会社カンバセーションズ","https:\u002F\u002Fqonversations.jp\u002F",{"fieldId":542,"title":603,"link":604},"Measurements Inc.","https:\u002F\u002Fwww.measurements.co.jp\u002F",{"fieldId":542,"title":606,"link":607},"tha ltd.","https:\u002F\u002Ftha.jp\u002F",{"fieldId":542,"title":543},"https:\u002F\u002Fwww.tamabi.ac.jp\u002F","2024.4.4",[547],null,[507],{"id":615,"createdAt":616,"updatedAt":617,"publishedAt":616,"revisedAt":617,"title":618,"category":619,"thumbnail":621,"image":623,"content":632,"keyword":633,"client":606,"team":649,"url":655,"release":656,"status":657,"statusText":612,"top":15,"blog":22,"service":658},"humanity","2024-06-28T01:56:51.507Z","2025-05-27T03:26:34.287Z","HUMANITY",[620],{"id":557,"createdAt":558,"updatedAt":559,"publishedAt":558,"revisedAt":558,"name":560},{"url":622,"height":563,"width":564},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F740adb4e02c54fee97d12025df5f16a0\u002Fhumanity-thumbnail-1.png",[624,626,628,630],{"url":625,"height":568,"width":569},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F2a10b034854d40e789d38ac33e0a3c4e\u002Fhumanity-other-1.png",{"url":627,"height":568,"width":569},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F1091c52a97f745e5a3fc105bd0e542dc\u002Fhumanity-other-2.png",{"url":629,"height":568,"width":569},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F613c8c836fff40119e9f85097262399d\u002Fhumanity-other-3.png",{"url":631,"height":568,"width":569},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002Fd6dcb8ec530642e7a9b0d0c0a93bf874\u002F3a9dfb8cce0d4ec887ead3d3998be04c\u002Fhumanity-other-4.png","\u003Cp>『HUMANITY』は、インターフェース／ビジュアルデザイナーの中村勇吾氏とゲームクリエイター水口哲也氏のタッグによって制作された PlayStation 5(PS VR2対応)、PlayStation 4(PS VR対応)、Steam(PC用VR対応)用アクションパズルゲームです。\u003Cbr>\u003Cbr>プレイヤーは柴犬を操作して、自我を失った人類を導きゴールを目指します。\u003Cbr>メインのストーリーモードには 90 以上のステージを収録。さらに「STAGE CREATOR」では、自分だけのオリジナルステージを作って全世界のプレイヤーにシェアが可能です。また「USER STAGES」では、他のプレイヤーがシェアしたステージが公開され、カスタムのプレイリストや、タグを使用して検索し、お気に入りのステージを発見・チャレンジできます。\u003Cbr>\u003Cbr>弊社はゲームのコミュニティ機能のバックエンドと管理ツールの作成、インフラを担当しました。\u003C\u002Fp>",[634,639,644,645],{"id":635,"createdAt":636,"updatedAt":637,"publishedAt":636,"revisedAt":637,"name":638,"filter":22,"page":22},"fg8e4c9nl","2024-06-28T01:14:04.517Z","2025-01-15T07:36:58.970Z","CMS",{"id":640,"createdAt":641,"updatedAt":642,"publishedAt":641,"revisedAt":642,"name":643,"filter":22,"page":22},"p6qgoo2k9vl9","2024-06-28T01:14:06.759Z","2025-01-15T07:37:22.466Z","大規模データ",{"id":581,"createdAt":582,"updatedAt":583,"publishedAt":582,"revisedAt":583,"name":584,"filter":22,"page":22},{"id":646,"createdAt":647,"updatedAt":648,"publishedAt":647,"revisedAt":648,"name":14,"filter":22,"page":22},"pxnv6cy2u","2024-06-28T01:14:45.570Z","2025-01-15T07:39:54.004Z",[650,653,654],{"fieldId":542,"title":651,"link":652},"Enhance","https:\u002F\u002Fenhance-experience.com\u002Fja\u002F",{"fieldId":542,"title":606,"link":607},{"fieldId":542,"title":543},"https:\u002F\u002Fhumanity.game\u002Fja\u002F","2023.5.16",[547],[560],1786934188629]