[{"data":1,"prerenderedAt":758},["ShallowReactive",2],{"list_taggame1":3,"$fdqqPkIJs8vUdRkdwH5e8YccH6Oq3WUztyd_qif-msNo":757},{"contents":4,"totalCount":754,"offset":755,"limit":756},[5,249,424,523,551,562,577,590,626,644,654,664,685,705,726],{"id":6,"createdAt":7,"updatedAt":8,"publishedAt":9,"revisedAt":8,"title":10,"tag":11,"recommended_articles":30,"eyecatch":137,"heading_list":24,"content2":141,"description":142,"related_articles":143,"recruit":17,"cta_title":247,"cta_text":248,"is_html":17,"is_migration":17},"dx-library-puzzle-game","2026-08-11T05:15:55.477Z","2026-09-01T05:36:42.493Z","2026-08-13T05:33:03.675Z","C++とDXライブラリで落ちものパズルゲームを作っている話",[12,18,25],{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":14,"name":16,"top":17},"game","2023-07-13T11:21:19.867Z","2023-08-09T06:19:06.321Z","ゲーム",false,{"id":19,"createdAt":20,"updatedAt":21,"publishedAt":22,"revisedAt":21,"name":23,"top":24},"tea","2023-06-01T09:41:19.770Z","2025-04-22T12:20:26.123Z","2023-07-28T06:30:00.000Z","お茶会",true,{"id":26,"createdAt":27,"updatedAt":28,"publishedAt":27,"revisedAt":27,"name":29,"top":17},"hobby","2023-06-01T09:42:38.855Z","2023-08-09T06:23:57.481Z","趣味",[31,65,105],{"id":32,"createdAt":33,"updatedAt":34,"publishedAt":35,"revisedAt":34,"title":36,"tag":37,"recommended_articles":45,"eyecatch":46,"heading_list":24,"content2":50,"description":51,"related_articles":52,"recruit":17,"is_html":17,"is_migration":17},"shader-basics","2026-06-16T01:35:56.924Z","2026-07-09T04:55:35.213Z","2026-07-07T10:13:33.054Z","WebGLシェーダーの基本とテクスチャー表現",[38,40,42,44],{"id":39},"frontend",{"id":41},"animation",{"id":43},"tech",{"id":19},[],{"url":47,"height":48,"width":49},"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表現の仕組みを紹介します。",[53,55,57,59,61,63],{"id":54},"noel2025",{"id":56},"visualizer",{"id":58},"svg-animation",{"id":60},"vite",{"id":62},"view-transition-api",{"id":64},"claude-code-perl-typescript-migration",{"id":64,"createdAt":66,"updatedAt":67,"publishedAt":68,"revisedAt":67,"title":69,"tag":70,"recommended_articles":80,"eyecatch":87,"heading_list":17,"content2":91,"description":92,"related_articles":93,"recruit":17,"cta_url":104,"is_html":17,"is_migration":17},"2026-05-29T08:21:55.189Z","2026-09-01T05:43:45.290Z","2026-06-02T01:45:24.758Z","テストがない 10 万行の Perl システムを、Claude Code で TypeScript へ書き換えた話",[71,73,75,77,78],{"id":72},"ai",{"id":74},"typescript",{"id":76},"backend",{"id":43},{"id":79},"promotion",[81,83,85],{"id":82},"design-project-1",{"id":84},"ai-generated-campaign-site",{"id":86},"bird-classification-2",{"url":88,"height":89,"width":90},"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件のテスト構築まで行った取り組みを紹介します。",[94,95,97,98,100,102],{"id":84},{"id":96},"event-ai-agent",{"id":86},{"id":99},"edge-ai",{"id":101},"ux-certification-basics",{"id":103},"figma-plugin","https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fshader-basics\u002F",{"id":106,"createdAt":107,"updatedAt":108,"publishedAt":109,"revisedAt":108,"title":110,"tag":111,"recommended_articles":116,"eyecatch":120,"heading_list":24,"content2":124,"description":125,"related_articles":126,"recruit":17,"is_html":17,"is_migration":17},"nazotoki","2026-03-17T06:24:17.497Z","2026-09-01T05:27:11.471Z","2026-03-30T08:35:07.001Z","Web サイトを使った謎解きを作ってみた",[112,113,114,115],{"id":13},{"id":19},{"id":26},{"id":72},[117,118,119],{"id":64},{"id":82},{"id":84},{"url":121,"height":122,"width":123},"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サイトを使った謎解きの制作プロセスまでを紹介。構成設計や実装、デバッグの工夫をまとめています。",[127,129,131,133,135,136],{"id":128},"vacation2024-missions",{"id":130},"office-humansensor",{"id":132},"toilet-sign",{"id":134},"game-development",{"id":99},{"id":96},{"url":138,"height":139,"width":140},"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ライブラリを使って、空いた時間に制作している落ちものパズルゲームを紹介。画像の読み込みや描画、入力処理、落下・固定を加えるなかで見直している状態管理についてまとめています。",[144,172,190,212,230],{"id":145,"createdAt":146,"updatedAt":147,"publishedAt":148,"revisedAt":147,"title":149,"tag":150,"recommended_articles":154,"eyecatch":158,"heading_list":24,"summary":162,"content2":163,"description":164,"related_articles":165,"recruit":17,"is_html":17,"is_migration":17},"tetris","2025-09-22T06:56:41.677Z","2026-09-01T05:35:20.146Z","2025-10-10T09:05:01.278Z","テトリスの歴史をたどる、誕生から現代まで",[151,152,153],{"id":13},{"id":26},{"id":19},[155,156,157],{"id":64},{"id":84},{"id":82},{"url":159,"height":160,"width":161},"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,"\u003Cul>\u003Cli>\u003Cstrong>ソ連で『テトリス』が誕生し、世界へ広がっていった経緯\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ELORGやBPS、任天堂、テンゲンなどが関わった複雑なライセンス争い\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ゲームボーイでの大ヒットから現在まで続くテトリスの歴史と魅力\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>","\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を巡る交渉と裁判の流れをわかりやすく解説します。",[166,168,170],{"id":167},"fortnite-uefn",{"id":169},"esports-club-4",{"id":171},"breaking",{"id":106,"createdAt":107,"updatedAt":108,"publishedAt":109,"revisedAt":108,"title":110,"tag":173,"recommended_articles":178,"eyecatch":182,"heading_list":24,"content2":124,"description":125,"related_articles":183,"recruit":17,"is_html":17,"is_migration":17},[174,175,176,177],{"id":13},{"id":19},{"id":26},{"id":72},[179,180,181],{"id":64},{"id":82},{"id":84},{"url":121,"height":122,"width":123},[184,185,186,187,188,189],{"id":128},{"id":130},{"id":132},{"id":134},{"id":99},{"id":96},{"id":191,"createdAt":192,"updatedAt":193,"publishedAt":192,"revisedAt":194,"title":195,"tag":196,"recommended_articles":204,"eyecatch":205,"heading_list":17,"related_articles":209,"recruit":24,"is_html":24,"html_contents":210,"is_migration":24,"migration_date":211},"esport-club-2","2023-06-02T08:49:42.220Z","2023-08-22T11:12:27.956Z","2023-08-09T08:14:22.641Z","esports 部のその後",[197,199,200,201,203],{"id":198},"esports",{"id":13},{"id":79},{"id":202},"club",{"id":19},[],{"url":206,"height":207,"width":208},"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":213,"createdAt":214,"updatedAt":215,"publishedAt":214,"revisedAt":215,"title":216,"tag":217,"recommended_articles":223,"eyecatch":224,"heading_list":17,"related_articles":227,"recruit":24,"is_html":24,"html_contents":228,"is_migration":24,"migration_date":229},"esports-club","2023-06-02T08:49:25.501Z","2023-08-09T08:14:08.541Z","会社でesports を始めた(い)話",[218,219,220,221,222],{"id":198},{"id":13},{"id":202},{"id":79},{"id":19},[],{"url":225,"height":226,"width":208},"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":134,"createdAt":231,"updatedAt":232,"publishedAt":233,"revisedAt":232,"title":234,"tag":235,"recommended_articles":240,"eyecatch":241,"heading_list":24,"content2":245,"related_articles":246,"recruit":17,"is_html":17,"is_migration":17},"2025-01-24T06:02:13.130Z","2025-08-21T01:33:55.089Z","2025-02-26T06:16:13.376Z","趣味から始めたゲーム開発",[236,237,238,239],{"id":19},{"id":13},{"id":26},{"id":43},[],{"url":242,"height":243,"width":244},"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フロントエンドからバックエンド、インフラまで、内容に応じて必要な範囲をご相談いただけます。",{"id":106,"createdAt":107,"updatedAt":108,"publishedAt":109,"revisedAt":108,"title":110,"tag":250,"recommended_articles":257,"eyecatch":316,"heading_list":24,"content2":124,"description":125,"related_articles":317,"recruit":17,"is_html":17,"is_migration":17},[251,252,253,254],{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":14,"name":16,"top":17},{"id":19,"createdAt":20,"updatedAt":21,"publishedAt":22,"revisedAt":21,"name":23,"top":24},{"id":26,"createdAt":27,"updatedAt":28,"publishedAt":27,"revisedAt":27,"name":29,"top":17},{"id":72,"createdAt":255,"updatedAt":255,"publishedAt":255,"revisedAt":255,"name":256,"top":17},"2025-10-20T05:29:45.387Z","AI",[258,277,296],{"id":64,"createdAt":66,"updatedAt":67,"publishedAt":68,"revisedAt":67,"title":69,"tag":259,"recommended_articles":265,"eyecatch":269,"heading_list":17,"content2":91,"description":92,"related_articles":270,"recruit":17,"cta_url":104,"is_html":17,"is_migration":17},[260,261,262,263,264],{"id":72},{"id":74},{"id":76},{"id":43},{"id":79},[266,267,268],{"id":82},{"id":84},{"id":86},{"url":88,"height":89,"width":90},[271,272,273,274,275,276],{"id":84},{"id":96},{"id":86},{"id":99},{"id":101},{"id":103},{"id":82,"createdAt":278,"updatedAt":279,"publishedAt":280,"revisedAt":279,"title":281,"tag":282,"recommended_articles":286,"eyecatch":290,"heading_list":24,"content2":294,"related_articles":295,"recruit":17,"is_html":17,"is_migration":17},"2025-04-13T17:40:59.995Z","2026-09-01T05:28:42.103Z","2025-09-19T06:39:31.919Z","企業やサービスの“らしさ”を伝える、デザイン実績 4 選",[283,285],{"id":284},"design",{"id":79},[287,288,289],{"id":64},{"id":84},{"id":82},{"url":291,"height":292,"width":293},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F806d7f3174a948a684ee38c45effa8b7\u002Feyecatch.png",1000,1680,"\u003Cp>\u003Cstrong>企業やサービスの「らしさ」を、伝わるかたちに。\u003C\u002Fstrong>\u003Cbr>私たちは、見た目だけでなく、使いやすさや体験の質までを含めて設計することで、その価値がきちんと届くデザインを目指しています。\u003C\u002Fp>\u003Cp>本ページでは、\u003Cstrong>ブランディング、企業サイト、BtoB、EC、キャンペーンページなど\u003C\u002Fstrong>、ジャンルも目的も異なる複数の事例を紹介しています。\u003Cbr>それぞれの案件にどのように向き合い、どう形にしていったのかを通して、S2ファクトリーのアプローチの一端をご覧いただければ幸いです。\u003C\u002Fp>\u003Ch2 id=\"hb685e3bedc\">実績\u003C\u002Fh2>\u003Ch3 id=\"h5dda7c7cea\">PIERRE HERMÉ PARIS 2024｜特集ページ制作\u003C\u002Fh3>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1960cec08b674c23b172b27b540f12c7\u002Fthumb.png\" alt=\"phpj2024\" width=\"2000\" height=\"1500\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Cstrong>PIERRE HERMÉ PARIS \u003C\u002Fstrong>の2024年〜2025年シーズン特集ページにて、\u003Cstrong>デザインとフロントエンド実装を担当\u003C\u002Fstrong>しました。母の日やホワイトデーなど、季節ごとに展開される限定ラインアップを、ブランドの世界観に合わせてビジュアルで表現しています。\u003C\u002Fp>\u003Cp>特集ページでは、キャンペーンのテーマやメインビジュアルにあわせて、\u003Cstrong>配色や余白、タイポグラフィのバランスまで細かく調整\u003C\u002Fstrong>。商品をただ並べるのではなく、\u003Cstrong>“ギフトを選ぶ体験そのものが心地よく感じられる”構成\u003C\u002Fstrong>を意識しました。\u003C\u002Fp>\u003Cp>ブランドが持つ華やかさと上質さを崩さず、見る人の期待感を高めるような UI・演出設計を行い、スマートフォンからの閲覧でも\u003Cstrong>美しく・迷わず・気持ちよく操作できるデザイン\u003C\u002Fstrong>を目指しています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F6456e65e51ce473a9fa2979ee36cd87b\u002Fphpj-md2024.png\" alt=\"phpj2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F2bfa2d0970de457692c7c1c93d04f148\u002Fphpj-sg2024.png\" alt=\"\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F7544c02db66a47f2871d5243a5a5b626\u002Fphpj-wg2025.png\" alt=\"phpj2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F5b5bd7e7053f46729cf6494be5a0baad\u002Fphpj-osechi2025.png\" alt=\"phpj2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F9fcb63a51968429abf38ba408ce7b890\u002Fphpj-sv2025.png\" alt=\"phpj2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F0dc55ffd0a734d6a810507be51e1beb7\u002Fphpj-wd2025.png\" alt=\"phpj2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Ch3 id=\"hd8f2ea7def\">PIERRE HERMÉ PARIS NOËL 2024 | 特集ページ制作\u003C\u002Fh3>\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.pierreherme.co.jp\u002Ffeature\u002Fnoel-2024\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">https:\u002F\u002Fwww.pierreherme.co.jp\u002Ffeature\u002Fnoel-2024\u002F\u003C\u002Fa>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-noel2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fdcccd7d4ddf344f4bf08803b84d431fd\u002F1.png\" alt=\"phpj-noel2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>ホリデーシーズン限定で公開された『NOËL 2024』特集ページの\u003Cstrong>デザインとフロントエンド開発を担当\u003C\u002Fstrong>しました。\u003C\u002Fp>\u003Cp>鉱石をモチーフにした幻想的な世界観に合わせ、\u003Cstrong>画面に奥行きをもたせるアニメーションや視差効果\u003C\u002Fstrong>を実装。ユーザーの操作に呼応する演出で、自然と画面の奥へ引き込まれる体験を目指しました。\u003Cbr>\u003Cbr>ブランドの魅力を保ちながら、落ち着いたトーンで季節感や特別感を伝える構成としています。\u003Cbr>また、PC・スマートフォンいずれの環境でも世界観が崩れないよう、\u003Cstrong>レスポンシブ設計やアニメーションのパフォーマンス最適化\u003C\u002Fstrong>を行いました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-noel2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F587a11839a214e35953ac1bd30bc5ef3\u002F2.png\" alt=\"phpj-noel2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fwork\u002Fdetail\u002Fphpj-noel2024\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F9a81a389e2f846aba878a40a7a29b2bc\u002F3.png\" alt=\"phpj-noel2024\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Ch3 id=\"h135cfb2d1b\">三鷹光器株式会社｜コーポレートサイトリニューアル\u003C\u002Fh3>\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.mitakakohki.co.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">https:\u002F\u002Fwww.mitakakohki.co.jp\u002F\u003C\u002Fa>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.mitakakohki.co.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F487e7ac3ec444f5aa868d2aa1aca71d9\u002F1.png\" alt=\"三鷹光器\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>三鷹光器株式会社のWebサイトを\u003Cstrong>リニューアル\u003C\u002Fstrong>しました。\u003Cbr>\u003Cstrong>ディレクション、アートディレクション、デザイン、フロントエンド実装、CMS 構築を担当\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Cp>精密機器メーカーとしての信頼性や技術力を正しく伝えるため、\u003Cstrong>情報の構造整理からビジュアル表現まで、全体のトーンを丁寧に設計\u003C\u002Fstrong>。\u003Cbr>色数を抑えた落ち着いた配色や、視線誘導を意識した余白設計により、読みやすく品位のある印象に仕上げました。\u003C\u002Fp>\u003Cp>\u003Cstrong>スマートフォンやタブレットにも最適化されたレスポンシブ設計\u003C\u002Fstrong>で、あらゆる端末での閲覧体験を向上。\u003Cbr>また、CMS の導入により、製品情報の更新やコンテンツの拡充にも柔軟に対応できるサイト構成としています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.mitakakohki.co.jp\u002F\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fcb5cbeea243a48d2a844914766ceee11\u002F2.png\" alt=\"三鷹光器\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fwww.mitakakohki.co.jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc1a4ecbf7ed84faea821876418bde083\u002F5.png\" alt=\"三鷹光器\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Ch3 id=\"h9767f0dba2\">新建築データ｜ウェブサイトリニューアル\u003C\u002Fh3>\u003Cp>\u003Ca href=\"https:\u002F\u002Fdata.shinkenchiku.online\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">https:\u002F\u002Fdata.shinkenchiku.online\u002F\u003C\u002Fa>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fdata.shinkenchiku.online\u002F\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4093f71e20ef472986651a5ac076161d\u002F1.png\" alt=\"新建築データ\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>『新建築』『住宅特集』などに掲載された建築プロジェクトを、オンラインで検索・閲覧できるサービス「新建築データ」の Web サイトを\u003Cstrong>リニューアル\u003C\u002Fstrong>しました。\u003Cbr>弊社は、\u003Cstrong>構成設計、アートディレクション、デザイン、コンセプト設計\u003C\u002Fstrong>を担当しています。\u003C\u002Fp>\u003Cp>建築専門誌が持つ膨大で貴重なアーカイブを、誰でも迷わずアクセスできるように、\u003Cstrong>検索導線や画面構成を再設計\u003C\u002Fstrong>。専門性の高い情報を扱いつつも、\u003Cstrong>直感的に操作できるシンプルな UI \u003C\u002Fstrong>と、内容をしっかりと伝える情報設計を両立させました。\u003C\u002Fp>\u003Cp>また、写真や図面などのコンテンツが際立つよう、\u003Cstrong>余白・配色・タイポグラフィを丁寧に整え、世界観を保ちながら整理されたデザイン\u003C\u002Fstrong>に落とし込んでいます。\u003Cbr>\u003Cstrong>メディアとしての信頼感と、デジタルサービスとしての使いやすさを併せ持った事例\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fdata.shinkenchiku.online\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F65f0cb6bb0d346a68f9ca860ddd6b0df\u002F2.png?w=3500&h=2625\" alt=\"新建築データ\" width=\"3500\" height=\"2625\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fdata.shinkenchiku.online\u002F\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ffbd75973e67b4ddfb1cf1df6343abed4\u002F3.png?w=3500&h=2625\" alt=\"新建築データ\" width=\"3500\" height=\"2625\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fdata.shinkenchiku.online\u002F\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F54e105686386465b9e1d65935437ac96\u002F4.png\" alt=\"新建築データ\" width=\"2400\" height=\"1800\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Ch2 id=\"h13e0232e10\">お問い合わせ\u003C\u002Fh2>\u003Cp>\u003Cstrong>S2ファクトリーでは、プロジェクトの規模やジャンルを問わず、その企業やサービスの「らしさ」をかたちにするためのデザインをお手伝いしています。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>今回ご紹介したような \u003Cstrong>Web 制作をはじめ、ロゴや印刷物、展示会まわり、サービス設計など、多様な領域でのご相談に対応\u003C\u002Fstrong>しています。\u003Cbr>「こういうこと、お願いできるかな？」という段階からでも、お気軽にご相談ください。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fcontact&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>",[],{"id":84,"createdAt":297,"updatedAt":298,"publishedAt":299,"revisedAt":298,"title":300,"tag":301,"recommended_articles":305,"eyecatch":310,"heading_list":24,"content2":314,"related_articles":315,"recruit":17,"is_html":17,"is_migration":17},"2025-12-18T04:44:24.111Z","2026-09-01T05:32:07.516Z","2026-01-14T08:48:50.112Z","生成 AI を活用したコンテンツ生成キャンペーンサイトの制作事例",[302,303,304],{"id":79},{"id":72},{"id":43},[306,307,309],{"id":64},{"id":308},"birdwatch-camera",{"id":82},{"url":311,"height":312,"width":313},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F127f63b9fa8b47eb93d3f6d7c53fe605\u002Fwebsite.png",2000,4000,"\u003Cp>近年、広告・キャンペーン領域では、生成 AI を活用したユーザー参加型コンテンツが増えています。\u003Cbr>\u003Cstrong>ユーザーの入力をもとにコンテンツを生成し、その結果を画像として保存したり、SNS でシェアしたりできる仕組み\u003C\u002Fstrong>は、体験性と拡散性の両面を備えた手法です。\u003C\u002Fp>\u003Cp>具体的な案件名は出しませんが、今回は弊社で制作した\u003Cstrong>「生成 AI を利用したコンテンツ生成キャンペーンサイト」\u003C\u002Fstrong>について、どのような構成で、どんな実装を行ったのかを紹介したいと思います。\u003C\u002Fp>\u003Ch2 id=\"h9707d3a59a\">概要\u003C\u002Fh2>\u003Cp>今回紹介するのは、生成 AI を活用したコンテンツ生成型のキャンペーンサイトです。\u003Cbr>ユーザーが任意の文章を入力すると、その内容をもとに\u003Cstrong>架空の四字熟語を生成し、さらにその四字熟語を配置したデザイン画像を自動で生成\u003C\u002Fstrong>します。\u003C\u002Fp>\u003Cp>生成された画像は、サイト上でそのまま閲覧できるだけでなく、SNS へのシェアや、ユーザーの端末への保存にも対応しています。\u003Cbr>診断コンテンツのように気軽に参加でき、生成結果をそのままアウトプットとして扱える構成です。\u003C\u002Fp>\u003Col>\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\u002Fol>\u003Ch2 id=\"hb8b4f4df49\">生成 AI による四字熟語生成とチェック機構\u003C\u002Fh2>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fda95ca0e974c4a9ebd9a5692781467ac\u002Fcheck.png\" alt=\"\" width=\"1024\" height=\"595\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>ユーザーが入力した文章をもとに、\u003Cstrong>架空の四字熟語を生成する部分には、生成 AI の API を利用\u003C\u002Fstrong>しています。入力されたテキストの内容を踏まえ、意味的に成立する四字熟語が生成されます。\u003C\u002Fp>\u003Cp>ただし、キャンペーン用途として公開する以上、生成結果をそのまま無条件に表示するわけにはいきません。なので、生成結果に対していくつかの\u003Cstrong>チェック機構\u003C\u002Fstrong>を実装しています。\u003C\u002Fp>\u003Cp>具体的には、\u003Cstrong>プロンプトによる制御\u003C\u002Fstrong>に加え、あらかじめ用意した \u003Cstrong>NG 漢字リストを用いたチェック\u003C\u002Fstrong>を行っています。\u003Cbr>生成された四字熟語にネガティブな意味合いを持つ漢字や、不適切と判断される文字が含まれていた場合は、その結果を採用せず、\u003Cstrong>再度生成処理を行う\u003C\u002Fstrong>仕組みです。\u003C\u002Fp>\u003Cp>\u003Cstrong>プロンプトにすべてを依存せず、後段でチェックを行う構成とすることで、実運用を想定した安定した生成フローを実現\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Ch2 id=\"h05a3315797\">四字熟語を使った画像生成\u003C\u002Fh2>\u003Cp>生成された四字熟語は、そのままテキストとして表示するのではなく、\u003Cstrong>あらかじめ用意したデザインをもとに、画像として出力\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Cp>\u003Cstrong>画像生成にあたっては、いわゆる生成 AI による画像生成は使用していません。\u003C\u002Fstrong>\u003Cbr>文字の配置やサイズ、色、背景とのバランスなどは、事前に設計したデザインルールをもとに、\u003Cstrong>画像編集ライブラリを用いて動的に生成\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Cp>四字熟語は内容によって文字の印象やバランスが変わるため、単純に文字を載せるだけでは、見た目にばらつきが出てしまいます。\u003Cbr>そこで文字数や構成を考慮しながら、配置やスタイルを調整する処理を行い、\u003Cstrong>どの生成結果でも一定のビジュアルクオリティを保てるように\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Cp>\u003Cstrong>生成 AI は四字熟語を作る部分にのみ使用し、画像表現そのものは、これまでの Web 制作やビジュアル制作で培ってきた手法を用いて制御\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Ch2 id=\"h543fa3266b\">キャンペーン用途を想定したインフラ設計と安定稼働\u003C\u002Fh2>\u003Cp>本コンテンツでは、生成AIによる処理や画像生成を行うため、ユーザーの操作に対して即時に結果を返すことが難しい場面があります。\u003Cbr>さらに\u003Cstrong>キャンペーンサイトの場合、SNS での拡散などをきっかけに、短時間でアクセスが集中するケース\u003C\u002Fstrong>も想定されます。\u003C\u002Fp>\u003Cp>そのため、生成処理を含むバックエンドを \u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Fpm\u002Flambda\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>AWS Lambda\u003C\u002Fstrong>\u003C\u002Fa> 上に構築し、同時アクセスが発生しても処理が滞りにくい構成を採用しました。\u003Cbr>アクセス数の増減に応じて自動的にスケールすることで、キャンペーン期間中も安定した動作を維持できるようにしています。\u003C\u002Fp>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>今回は、「生成AIを利用したコンテンツ生成キャンペーンサイト」の一例を紹介しました。\u003Cbr>\u003Cbr>ユーザー参加型のコンテンツでは、\u003Cstrong>生成 AI の使いどころと制御、そして安定して運用できる構成が重要\u003C\u002Fstrong>になります。\u003Cbr>弊社では、こうした点を踏まえた制作をこれまで複数手がけてきました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>毎ドラ部 AI ソングメーカー\u003C\u002Fstrong>\u003Cbr>ユーザーが撮影した写真をアップロードすると、AI により歌詞が自動生成され、\u003Cbr>オリジナルのテーマソングとして楽しめるコンテンツです。\u003Cbr>同時に、写真からジャケットイラストも自動生成されます。\u003Cbr>（弊社は Web システム開発・インフラ構築を担当）\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\u002Fwork\u002Fdetail\u002Fgeorgia-song-maker\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fwork%2Fdetail%2Fgeorgia-song-maker&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>毎ドラ部 AI イラストメーカー\u003C\u002Fstrong>\u003Cbr>ユーザーが撮影した写真を人気イラストレーター風のタッチに AI で変換し、生成されたイラストを日本全国のマップ上に投稿・共有できるキャンペーンサイトです。\u003Cbr>（弊社はテクニカルディレクション、Web 制作、システム開発、インフラ構築を担当）\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\u002Fwork\u002Fdetail\u002Fgeorgia\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fwork%2Fdetail%2Fgeorgia&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>\u003Cp>\u003Cbr>\u003Cstrong>「生成AIを活用したコンテンツ制作」\u003C\u002Fstrong>についてご相談があれば、ぜひお気軽にお問い合わせください。\u003Cbr>これまでの知見をもとに、企画段階からの設計・制作・安定稼働までお手伝いします。\u003C\u002Fp>",[],{"url":121,"height":122,"width":123},[318,340,359,377,386,403],{"id":128,"createdAt":319,"updatedAt":320,"publishedAt":321,"revisedAt":320,"title":322,"tag":323,"recommended_articles":333,"eyecatch":334,"heading_list":24,"content2":338,"related_articles":339,"recruit":17,"is_html":17,"is_migration":17},"2024-10-30T17:05:37.788Z","2025-06-12T07:40:58.029Z","2024-11-27T07:40:58.000Z","社員旅行向けの Web アプリを開発してみた",[324,326,327,328,329,330,331],{"id":325},"company-trip",{"id":79},{"id":43},{"id":76},{"id":39},{"id":284},{"id":332},"internal-project",[],{"url":335,"height":336,"width":337},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Faac0d1a67524433c8a5670d06077cc7d\u002F%E4%B8%80%E8%A6%A7.png",768,1366,"\u003Ch2 id=\"hd2c91c24e4\">経緯\u003C\u002Fh2>\u003Cp>\u003Cstrong>2024年7月、社員旅行が実施\u003C\u002Fstrong>されることになり、せっかくの機会を\u003Cstrong>広報として活用できないか\u003C\u002Fstrong>と議論を重ねました。\u003C\u002Fp>\u003Ch2 id=\"h0b0d08b338\">企画\u003C\u002Fh2>\u003Cp>真っ先に\u003Cstrong>「何かシステムを作ってみようか？」\u003C\u002Fstrong>という案が浮上。\u003C\u002Fp>\u003Cp>「社員旅行のためだけにシステムを作るなんて大変では？」と思われるかもしれませんが、\u003Cstrong>システム開発は弊社の得意分野\u003C\u002Fstrong>です。\u003Cbr>だからこそイメージも付きやすく、また、利用するユーザー規模が少ないので、いくらでも楽のできる方法も思いつきます\u003Cstrong>。\u003C\u002Fstrong>実は意外と手軽な選択肢でした。\u003C\u002Fp>\u003Cp>システムの方向性を考えた際には、次の点を念頭に置きました。\u003C\u002Fp>\u003Cul>\u003Cli>旅程的に自由時間も多く、ある程度のグループはあるものの基本的にはバラバラに動くこともあり、何もないと社員旅行感が生まれないかも\u003C\u002Fli>\u003Cli>家族参加されるスタッフも多いことから、幅広い年齢層が楽しめる内容が良い\u003C\u002Fli>\u003C\u002Ful>\u003Cp>こうした要素を踏まえて、\u003Cstrong>写真投稿でミッションを達成していく「スタンプラリー」型のSNS\u003C\u002Fstrong>を作成することに決定。\u003Cstrong>2 泊 3 日の社員旅行のためだけに、フルスクラッチでSNSを構築する\u003C\u002Fstrong>ことになりました。\u003C\u002Fp>\u003Ch2 id=\"h4db3ec6501\">設計\u003C\u002Fh2>\u003Ch3 id=\"ha8f355181f\">画面をざっくり洗い出す\u003C\u002Fh3>\u003Cp>言い出しっぺでもある、\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Finterview-3\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>テクニカルディレクターの takano\u003C\u002Fstrong>\u003C\u002Fa> がざっと洗い出しました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Finterview-3\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Finterview-3%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>\u003Cstrong>以下は実際のメモ内容です\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>タイムライン\u003C\u002Fstrong>\u003Cul>\u003Cli>インスタっぽく？TikTokっぽく？\u003C\u002Fli>\u003Cli>「これ以降は既読」が欲しい\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>ミッションリスト\u003C\u002Fstrong>\u003Cul>\u003Cli>すべて\u003C\u002Fli>\u003Cli>達成済み\u003C\u002Fli>\u003Cli>未達成\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>ミッション詳細\u003C\u002Fstrong>\u003Cul>\u003Cli>登録ボタン\u003Cul>\u003Cli>新規\u003C\u002Fli>\u003Cli>追加\u003C\u002Fli>\u003Cli>変更\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>他の人の状況と登録写真\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>メンバーリスト\u003C\u002Fstrong>\u003Cul>\u003Cli>アイコン\u003C\u002Fli>\u003Cli>アカウント名\u003C\u002Fli>\u003Cli>スコア\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>メンバー詳細\u003C\u002Fstrong>\u003Cul>\u003Cli>スコア\u003C\u002Fli>\u003Cli>ミッションの状況と登録写真\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>既視感のあるシステムなので、メモ程度の簡単な整理でも頭の中で全体のイメージができあがりました。\u003Cbr>ここから具体的にシステム設計に進みます。\u003C\u002Fp>\u003Ch3 id=\"h82b60cc132\">実装方針\u003C\u002Fh3>\u003Cp>システムの設計に取り掛かる前に、まずは全体の方向性や構成を考えることから始めました。\u003C\u002Fp>\u003Cp>今回のプロジェクトでは、基本的に takano が一人で全て作り切ることを前提に進めることにしました。\u003Cbr>普段はバックエンドエンジニアとしての業務が中心ですが、Android のネイティブアプリや Flutter を使ったハイブリッドアプリの開発経験もあるため、選択肢は少ないながらもいくつか考えられます。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"h5dc0967264\">\u003Cstrong>フロントエンド\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>\u003Cstrong>ネイティブアプリでは、スタッフにアプリをインストールしてもらう手間が発生\u003C\u002Fstrong>し、手軽に利用してもらえないと判断したため、選択肢から外しました。\u003Cbr>そこで、\u003Cstrong>Webアプリケーションとして開発\u003C\u002Fstrong>する方向に決め、以下の選択肢を検討しました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca href=\"https:\u002F\u002Fja.react.dev\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>React\u003C\u002Fstrong>\u003C\u002Fa>  \u003Cul>\u003Cli>社内のフロントエンドエンジニアが主に使用しているため、習得すれば今後の業務にも役立つ可能性が高い\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.jetbrains.com\u002Fja-jp\u002Fkotlin-multiplatform\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Kotlin Multiplatform \u003C\u002Fstrong>\u003C\u002Fa>\u003Cul>\u003Cli>Android開発者として馴染みがあり、個人的に興味もある分野\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fflutter.dev\u002Fmulti-platform\u002Fweb\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Flutter on the Web \u003C\u002Fstrong>\u003C\u002Fa>\u003Cul>\u003Cli>これまでネイティブアプリ開発で使ってきた経験があり、Flutter そのものへの好感度が高い\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>ただし、今回のプロジェクトは短期間での完成が求められるため、React の習得には十分な時間が確保できないと判断。また、Kotlin Multiplatform は現時点ではまだ時期尚早だと考え、消去法で \u003Cstrong>Flutter を選択\u003C\u002Fstrong>しました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fflutter.dev\u002Fmulti-platform\u002Fweb\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fflutter.dev%2Fmulti-platform%2Fweb&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Ch4 id=\"ha2cc149486\">\u003Cbr>\u003Cstrong>バックエンド\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>フロントエンドで Flutter を使おうと考えた時点で、バックエンドには自然と \u003Ca href=\"https:\u002F\u002Ffirebase.google.com\u002F?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Firebase\u003C\u002Fstrong>\u003C\u002Fa> を使おうと考えていました。\u003Cbr>\u003Cbr>フロントエンドの実装に注力したかったこともあり、バックエンドの構築に時間をかけられないと判断。また、以前からしっかり Firestore を利用したサービスを作ってみたいという思いもあり、Firebase を採用することにしました(普段は \u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">AWS\u003C\u002Fa> を使用しているため、\u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Flambda\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Lambda\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Fdynamodb\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">DynamoDB\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Fs3\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">S3\u003C\u002Fa> でも同様に迅速に作成可能だったとは思いますが、今回はあえて Firebase を選びました)。\u003C\u002Fp>\u003Cp>写真投稿機能を提供するにあたり、認証は必須だと考え、\u003Ca href=\"https:\u002F\u002Ffirebase.google.com\u002Fdocs\u002Fauth?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Firebase Authentication\u003C\u002Fstrong>\u003C\u002Fa> を採用。\u003Cbr>データストアには \u003Ca href=\"https:\u002F\u002Ffirebase.google.com\u002Fdocs\u002Ffirestore?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Cloud Firestore\u003C\u002Fstrong>\u003C\u002Fa> を使用し、データベース設計もメモ書き程度にまとめて構想しました。\u003C\u002Fp>\u003Cp>こちらが実際のメモ内容です。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>ミッション\u003C\u002Fstrong>\u003Cul>\u003Cli>ID\u003C\u002Fli>\u003Cli>タイトル\u003C\u002Fli>\u003Cli>説明文\u003C\u002Fli>\u003Cli>ポイント\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>メンバー\u003C\u002Fstrong>\u003Cul>\u003Cli>ID\u003C\u002Fli>\u003Cli>ステータスとかいる？\u003C\u002Fli>\u003Cli>アカウント名\u003C\u002Fli>\u003Cli>合計ポイント\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>ポスト\u003C\u002Fstrong>\u003Cul>\u003Cli>ID\u003C\u002Fli>\u003Cli>時間\u003C\u002Fli>\u003Cli>メンバーID\u003C\u002Fli>\u003Cli>ミッションID\u003C\u002Fli>\u003Cli>画像 base64 ？ cloud storage 使ってみる？\u003C\u002Fli>\u003Cli>写真コメント\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>洗い出してみることで、データの持ち方が次第にイメージできるようになります。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"he949583e15\">\u003Cstrong>コメント機能の検討\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>\u003Cstrong>「他者の投稿にコメントできた方が良いだろう」「リアクションしたくなる場面があるだろう」\u003C\u002Fstrong>との考えから、コメント機能の実装を検討。しかし、長年の経験から「そこまで手を広げると間に合わないのでは？」という警告が頭をよぎり、\u003Cstrong>既存のシステムを活用する方針\u003C\u002Fstrong>に。\u003C\u002Fp>\u003Cp>弊社では日頃から\u003Cstrong>コミュニケーションツールとして Slack を利用\u003C\u002Fstrong>しており、\u003Cstrong>社員旅行中の連絡にも Slack が想定\u003C\u002Fstrong>されていました。\u003Cbr>\u003Cbr>そこで、\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>写真を投稿すると、 Bot 経由で Slack にも投稿される仕組みを導入し、これを通知機能として活用\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>Slack 上の投稿に対して、リアクションやコメントをつけることで、コメント機能の代替とする\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>これにより、システムの開発範囲を抑えつつ、必要な機能を補完する形で Slack を活用することを決定しました。\u003C\u002Fp>\u003Ch3 id=\"h46fc9b640d\">プロトタイプ開発\u003C\u002Fh3>\u003Cp>概ねの設計が終わったところで、まずはざっとプロトタイプを作成します。\u003C\u002Fp>\u003Cp>今回、このタイミングでプロトタイプを作成した目的は\u003Cstrong>「デザイナーに機能を伝えるため」\u003C\u002Fstrong>でした。\u003Cbr>慣れないワイヤーフレームを書くより、実際に動く形で見せる方が早いと判断したからです。\u003Cbr>\u003Cbr>このタイミングでプロトタイプをなんとなくでも作成しておくことで、以下のようなポイントを洗い出すことができました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>残りの作業量の把握\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>実現が難しい機能の別案検討\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>本実装前に調査が必要な事項の明確化\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>これにより、今後の作業に対する見通しが立ち、安心感を持って進めることができるようになりました。\u003Cbr>\u003Cbr>プロトタイプの仕様としては、UI は Flutter の Widget をそのまま使用し、装飾は一切なし。\u003Cbr>バックエンドはしっかり構築し、 \u003Ca href=\"https:\u002F\u002Friverpod.dev\u002Fja\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Riverpod\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> を使って状態管理を行いながら Firebase と接続\u003C\u002Fstrong>。モックではなく、\u003Cstrong>データ連携が可能な状態になっており、写真の投稿も\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fcloud.google.com\u002Fstorage?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Cloud Storage\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> に保存して閲覧できるところまでは実装\u003C\u002Fstrong>しました。\u003Cbr>\u003Cbr>このプロトタイプを基に、次にデザインを社内のデザイナーに依頼します。\u003Cbr>ただし、相手も他の案件を抱えており、どの程度の時間がかかるかわからなかったので、ここまではかなり駆け足で進めました。\u003Cstrong>企画立案からプロトタイプ開発完了まで約 2 週間\u003C\u002Fstrong>ほどです。\u003C\u002Fp>\u003Ch3 id=\"hb570a6676d\">デザイン\u003C\u002Fh3>\u003Cp>アプリのデザインは、\u003Cstrong>社内デザイナーの \u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Finterview-5\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>matsue\u003C\u002Fstrong>\u003C\u002Fa> が手掛けました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Finterview-5\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Finterview-5%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>社内案件ならではの自由度を活かし、プロトタイプを通じて実際に触れながら、細部まで丁寧に作り上げていきました。デザインには多くの工夫と遊び心が盛り込まれています。\u003Cbr>ここでは、\u003Cstrong>社員旅行アプリに込めた意図やデザインのポイント\u003C\u002Fstrong>についてご紹介します。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"hfa14ac7259\">\u003Cstrong>テーマ\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>\u003Cstrong>今回のテーマは「シンプルで見やすく、そして楽しく！」\u003C\u002Fstrong>。\u003Cbr>\u003Cbr>\u003Cstrong>配色は北海道の自然をイメージ\u003C\u002Fstrong>しました。広がる青空を彷彿とさせる彩度の高い青をメインに、草原を思わせる緑をアクセントカラーに採用。これにより、清々しく爽やかな雰囲気をデザインに取り入れています。\u003Cbr>\u003Cstrong>S2 のブランドカラー(ピンク、黄色、紺、黄緑)では普段使用しない色味をあえて採用し、旅行らしい新鮮さと特別感を演出\u003C\u002Fstrong>しました。\u003Cbr>\u003Cbr>\u003Cstrong>フォント\u003C\u002Fstrong>についても\u003Cstrong>テーマに合わせて選定\u003C\u002Fstrong>しています。\u003Cbr>スケジュール画面では、丸みがあり視認性の高い \u003Ca href=\"https:\u002F\u002Ffonts.google.com\u002Fspecimen\u002FZen+Maru+Gothic\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Zen Maru Gothic\u003C\u002Fstrong>\u003C\u002Fa> を採用し、読みやすさを重視。\u003Cbr>一方で、ミッション画面には遊び心を取り入れるため、ゲームらしい雰囲気が漂う \u003Ca href=\"https:\u002F\u002Ffonts.google.com\u002Fspecimen\u002FDela+Gothic+One\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Dela Gothic One\u003C\u002Fstrong>\u003C\u002Fa> を使用しました。いずれも日本語対応フォントの中から、テーマに合うユニークな書体を選びました。\u003C\u002Fp>\u003Cp>また、デザインのアクセントとして、\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fs2-character\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>S2 のオリジナルキャラクター\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>を随所に大胆に使用\u003C\u002Fstrong>しています。社員旅行という遊び心あふれるテーマに合わせ、親しみやすく楽しい雰囲気を感じられる仕上がりになりました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"h6936b451cc\">\u003Cstrong>スケジュール機能\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>当初の構成にはなかった\u003Cstrong>「スケジュール」機能\u003C\u002Fstrong>をデザインに加えました。\u003Cbr>\u003Cbr>北海道出身の社員から目的地や北海道に関する情報を聞き、注意事項や各スポットでできるアクティビティ、場所の簡単な説明などを写真付きで記載しました。次の目的地をイメージしやすいよう構成を工夫しています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"hfce69b5a73\">\u003Cstrong>ミッション画面\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>社員旅行アプリの\u003Cstrong>目玉の一つが「ミッション機能」\u003C\u002Fstrong>。\u003Cbr>この機能は、\u003Cstrong>参加者が旅行中に様々なアクティビティを楽しみながら写真を投稿し、ミッションを達成することでポイントを獲得できる仕組み\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>ミッションの目的は、\u003Cstrong>「全員が共有できる体験」を作り出すこと\u003C\u002Fstrong>。例えば、2日目は丸一日自由時間、初日の夜もそれぞれが自由に過ごせる時間があり、個人で行動する場面が多くなる状況でした。そんな中、ミッションを通じて共通の話題や目標を持つことで、一体感を生み出す狙いがあります。\u003Cbr>\u003Cbr>ミッションは、社員旅行前にチームでアイデアを出し合って決定。\u003Cbr>例えば「〇〇の写真を撮る」「地元の名物を食べる」といった課題に加え、社員の写真を撮影するというミッションも加えました。これにより、ポイント獲得だけでなく、\u003Cstrong>自然と社員同士の交流が生まれ、思い出として写真に残る仕組み\u003C\u002Fstrong>を意識しました。\u003Cbr>\u003Cbr>さらに、ポイントを獲得するだけではなく、何度も投稿したくなるよう、投稿そのものが楽しめるデザインを目指しています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4d1420c6286c498a85b2cc0e6dc734ce\u002F%E5%AE%8C%E6%88%90-3.png?w=450&h=975\" alt=\"ミッション画面\" width=\"450\" height=\"975\">\u003C\u002Ffigure>\u003Ch2 id=\"h04aefaf859\">開発\u003C\u002Fh2>\u003Ch3 id=\"h5c4db552d5\">UI 開発\u003C\u002Fh3>\u003Cp>デザインも決まったので本格的に実装を進めていきます。\u003Cbr>\u003Cstrong>今回の開発では「デザイナーにあまり負担をかけたくない」という方針を大前提\u003C\u002Fstrong>とし、できるだけ実装側で解決できるよう工夫しました。これにより、デザインの修正や調整にかかる手間を減らしつつ、スムーズな開発を目指しました。\u003C\u002Fp>\u003Cp>基本的には淡々と実装していくのみですが、特に工夫した点や注力した箇所についていくつかご紹介します。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"h8cd10f94c9\">\u003Cstrong>地味に面倒なヘッダー、フッターのカーブ\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc5adbcc7a69a45ed8c4653019731091e\u002F%E3%82%AB%E3%83%BC%E3%83%96.png?w=250&h=543\" alt=\"カーブ\" width=\"250\" height=\"543\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Cbr>Figma では Rectangle と Elipse を重ねて書いたようで、私には上手く扱うスキルがありません。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fae6e440113ac487080be4b20c1b3283e\u002F%E9%96%8B%E7%99%BA%E7%94%BB%E9%9D%A2.png?w=650&h=239\" alt=\"開発画面\" width=\"650\" height=\"239\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003C\u002Fp>\u003Cp>「別の方法で描いてもらう」「SVG で書き出してもらう」といった選択肢もありましたが、\u003Cstrong>実装してみること自体が経験になるし、楽しめそう\u003C\u002Fstrong>だと思ったので、コードで書いてみることにしました。\u003C\u002Fp>\u003Cp>\u003Cstrong>ヘッダー\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-dart\">AppBar(\n    shape: const HeaderAppBarShape(),\n    :\n);\n\nclass HeaderAppBarShape extends ContinuousRectangleBorder {\n  const HeaderAppBarShape();\n  final bottomPadding = 12.0;\n\n  @override\n  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {\n    var path = Path();\n    path.moveTo(0, 0);\n    path.lineTo(0, rect.height - bottomPadding);\n\n    path.quadraticBezierTo(\n        rect.width \u002F 2,\n        rect.height - 50,\n        rect.width,\n        rect.height - bottomPadding\n    );\n    path.lineTo(rect.width, 0);\n    path.lineTo(0, 0);\n    path.close();\n\n    return path;\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cbr>\u003Cstrong>フッター\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-dart\">ClipPath(\n    clipper: BottomNavigationBackgroundClipper(),\n    :\n);\n\nclass BottomNavigationBackgroundClipper extends CustomClipper<Path> {\n  final topPadding = 12.0;\n\n  @override\n  getClip(Size size) {\n    var path = Path();\n    path.moveTo(0, topPadding);\n    path.quadraticBezierTo(size.width \u002F 2, 60, size.width, topPadding);\n\n    path.lineTo(size.width, size.height);\n    path.lineTo(0, size.height);\n    path.lineTo(0, topPadding);\n    path.close();\n    return path;\n  }\n\n  @override\n  bool shouldReclip(BottomNavigationBackgroundClipper oldClipper) => false;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>改めて見るとかなり雑ですが、これで実現できました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"hc55027b20a\">\u003Cstrong>スケジュール表記\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>よく見かけるタイプのUIですが、いざ実装となるとどう組み立てるか一瞬考えさせられます。\u003Cbr>さらに、スケジュールはギリギリまで変更が入る可能性があるため、\u003Cstrong>変更に対応しやすい形で設計\u003C\u002Fstrong>する必要がありました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F9e133d2e6f544563b1b60581406d639b\u002F%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB.png?w=350&h=458\" alt=\"スケジュール\" width=\"350\" height=\"458\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>よく見ると 9:20～9:30 の間隔と 9:30～10:00 の間隔が違うのでこれも考慮しつつ、MEMO のように長文が入る場合は、デバイスの幅によって高さ(行数)が変化するため、左に走る縦線も右側の要素の高さに合わせて自動で伸びるようにしたいと考えました。\u003C\u002Fp>\u003Cp>こうした点を踏まえ、基本的には \u003Cstrong>Table\u003C\u002Fstrong> を活用しつつ、各パーツを関数化して編集が容易な形で実装を進めました。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-dart\">Table(\n    defaultColumnWidth: const IntrinsicColumnWidth(),\n    columnWidths: const {\n      2: FlexColumnWidth(1),\n    },\n    children: [\n      scheduleTimeStart("9:20", "ホテルのロビーに集合"),\n      scheduleSpacer(24),\n      scheduleTime("9:30", "ホテル出発"),\n      scheduleSpacer(40),\n      scheduleTime("10:00 - 11:00", "観光２"),\n      scheduleSpacer(24),\n      scheduleContents([\n        scheduleContentTitleWithLink("場外市場", "https:\u002F\u002Fwww.jyogaishijyo.com\u002F"),\n        const SizedBox(height: 16),\n        Text("個性いっぱいの60店舗！", style: CustomTextStyles.scheduleBody),\n        const SizedBox(height: 32),\n        const ScheduleTag(title: "MEMO"),\n        const SizedBox(height: 16),\n        Text(\n            """ツアーというほど時間もないですが海産物を買い漁ったりしてみてください\n食事を狙うのもあり（混み具合をよく見てね）（あとすぐ昼食だよ）""",\n            style: CustomTextStyles.scheduleBody,\n        ),\n      ]),\n      scheduleSpacer(40),\n      scheduleTime("11:30 - 13:15", "お昼と観光３"),\n      :\n    ],\n);\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cbr>関数の中身は例えばこんな感じです。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-dart\">TableRow scheduleTime(String time, String title, {RichText? richText}) {\n  return TableRow(\n    children: [\n      TableCell(\n        verticalAlignment: TableCellVerticalAlignment.fill,\n        child: Stack(\n          alignment: Alignment.center,\n          children: [\n            Positioned(\n              top: 0,\n              bottom: 0,\n              child: Container(\n                width: 4,\n                color: CustomColors.scheduleBar,\n              ),\n            ),\n            Positioned(\n              top: 4,\n              child: Container(\n                width: 16,\n                height: 16,\n                decoration: const ShapeDecoration(\n                  color: CustomColors.scheduleDot,\n                  shape: OvalBorder(),\n                ),\n              ),\n            ),\n          ],\n        ),\n      ),\n      const SizedBox(width: 8),\n      Row(\n        crossAxisAlignment: CrossAxisAlignment.start,\n        children: [\n          Text(time, style: CustomTextStyles.scheduleTime),\n          const SizedBox(width: 16),\n          richText ?? Text(title, style: CustomTextStyles.scheduleTimeTitle),\n        ],\n      ),\n    ],\n  );\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3 id=\"hb7426e2514\">システム開発\u003C\u002Fh3>\u003Ch4 id=\"hc3bd5f627a\">\u003Cstrong>Firestore\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>最終的に、以下のような形で \u003Cstrong>Entity\u003C\u002Fstrong> を定義し、Firestore に保存しています。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-dart\">\u002F\u002F ミッション情報\nclass Mission {\n  final String id;\n  final String title;    \u002F\u002F 撮影するお題\n  final String category; \u002F\u002F カテゴリー名("FOOD", "PLACE" など)\n  final int point;       \u002F\u002F 達成時の獲得ポイント数\n  final int sortKey;     \u002F\u002F 並び替え用のキー\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre>\u003Ccode class=\"language-dart\">\u002F\u002F メンバー情報\nclass Member {\n  final String id;\n  final String accountName;             \u002F\u002F アカウント名(表示名)\n  final int totalPoint;                 \u002F\u002F 総獲得ポイント数\n  final Map<String, int> categoryPoint; \u002F\u002F 各カテゴリーごとの獲得ポイント数\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>ユーザーアクションによってのみポイントが変動するため、都度集計するのではなく、増減値を直接保持する形にしました。\u003Cbr>\u003Cbr>各カテゴリーごとにランキングを集計して表示するために、\u003Ccode>categoryPoint\u003C\u002Fcode> を設けています。\u003Cbr>\u003Ccode>totalPoint\u003C\u002Fcode> の増減に合わせて \u003Ccode>categoryPoint\u003C\u002Fcode> も編集する設計にしました(後から考えると \u003Ccode>categoryPoint\u003C\u002Fcode> だけで全体のポイントも表現できるため、\u003Ccode>totalPoint\u003C\u002Fcode> は不要だったかもしれません)。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-dart\">\u002F\u002F メンバーごとのミッション達成状況\ntypedef MemberMission = Map<String, int?>;\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>投稿の削除が可能であり、同じミッションに複数回投稿できる仕様のため、以下の設計を採用しています。\u003C\u002Fp>\u003Cul>\u003Cli>各メンバーごとに、そのミッションに対して\u003Cstrong>何回投稿しているか\u003C\u002Fstrong>をカウント\u003C\u002Fli>\u003Cli>カウントの変化に応じてポイントを増減\u003Cul>\u003Cli>\u003Cstrong>0 ⇨ 1\u003C\u002Fstrong> に変化した際：ポイントを増加\u003C\u002Fli>\u003Cli>\u003Cstrong>1 ⇨ 0\u003C\u002Fstrong> に変化した際：ポイントを減少\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>このカウントは、ミッションの達成状況（フラグ）としても利用\u003C\u002Fli>\u003C\u002Ful>\u003Cpre>\u003Ccode class=\"language-dart\">\u002F\u002F 投稿情報\nclass Post {\n  final String id;\n\n  final String memberId;        \u002F\u002F 投稿したメンバーのID\n  final String accountName;     \u002F\u002F 投稿したメンバーの表示名\n\n  final String missionId;       \u002F\u002F 投稿対象のミッションID\n  final String title;           \u002F\u002F 投稿対象のミッションのお題名\n  final String category;        \u002F\u002F 投稿対象のミッションのカテゴリー名\n  final int point;              \u002F\u002F 投稿対象のミッションの達成時の獲得ポイント\n\n  final DateTime createdAt;     \u002F\u002F 投稿日時（タイムラインでのソートキーになる）\n  final List<PostImage> images; \u002F\u002F 画像の情報\n  final String comment;         \u002F\u002F 画像に対する投稿者のコメント\n  final String? slackTs;        \u002F\u002F 紐づいた Slack の timestamp\n}\n\n\u002F\u002F 投稿画像情報\nclass PostImage {\n  final String mainUrl;         \u002F\u002F メイン画像の公開URL\n  final String thumbnailUrl;    \u002F\u002F サムネイル画像の公開URL\n  final String path;            \u002F\u002F Cloud Storage のパス\n  final int width;              \u002F\u002F 画像の幅\n  final int height;             \u002F\u002F 画像の高さ\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>前半はすべて Mission と Member の値をコピーしています。\u003C\u002Fp>\u003Cp>今回のシステムでは、利用開始後にアカウント名やミッション情報が編集されることはありません。そのため、投稿情報を表示するたびに他のコレクションを参照するよりも、\u003Cstrong>必要なデータをコピーして保持する方が、高速かつシンプル\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>画像データは \u003Cstrong>Cloud Storage\u003C\u002Fstrong> に保存し、以下の工夫を取り入れました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>パフォーマンス最適化\u003C\u002Fstrong>\u003Cbr>ダウンロード用の URL を発行し、投稿データに格納することで、画像取得を効率化\u003C\u002Fli>\u003Cli>\u003Cstrong>認証への配慮\u003C\u002Fstrong>\u003Cbr>認証機能を利用していますが、発行される URL は推測が難しい形式のため、セキュリティ面も問題ないと判断\u003C\u002Fli>\u003C\u002Ful>\u003Cp>さらに、投稿データには \u003Cstrong>width\u003C\u002Fstrong> と \u003Cstrong>height\u003C\u002Fstrong> を保持する設計に。\u003Cbr>画像のアスペクト比を元に、読み込み中のプレースホルダー表示で正確なサイズを確保できます。これにより、画面がガタガタすることなく、スムーズなレイアウトが実現します。\u003C\u002Fp>\u003Cp>\u003Ccode>slackTs\u003C\u002Fcode> は、うっかり投稿すべきでない写真を選択してしまった場合、投稿後に削除しても Slack 上に残る問題が発生する可能性がありました。\u003Cbr>そこで、Slack の投稿時に得られるタイムスタンプを記録し、\u003Cstrong>投稿が削除された際には Slack 上の投稿も連動して削除\u003C\u002Fstrong>するように実装しました。\u003Cbr>\u003Cbr>これらの設計により、投稿の表示速度、画像の読み込み体験、そして Slack 連携の安全性と利便性を高めることができました。\u003C\u002Fp>\u003Cp>ちなみにルールは想像の通りですが、\u003C\u002Fp>\u003Cp>\u003Cstrong>Firestore\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-javascript\">rules_version = '2';\n\nservice cloud.firestore {\n  match \u002Fdatabases\u002F{database}\u002Fdocuments {\n  \tfunction requireS2FDomain() {\n  \t\treturn request.auth != null && request.auth.token.email.matches('.*@s2factory[.]co[.]jp$');\n    }\n    \n    match \u002Fmember_mission\u002F{userId} {\n      allow write: if requireS2FDomain() && request.auth.uid == userId;\n      allow read: if requireS2FDomain();\n    }\n    match \u002Fmembers\u002F{userId} {\n      allow write: if requireS2FDomain() && request.auth.uid == userId;\n      allow read: if requireS2FDomain();\n    }\n    match \u002Fmissions\u002F{document=**} {\n      allow write: if false;\n      allow read: if requireS2FDomain();\n    }\n    match \u002Fposts\u002F{document=**} {\n      allow update, delete: if requireS2FDomain() && resource.data.memberId == request.auth.uid;\n      allow read, create: if requireS2FDomain();\n    }\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cbr>\u003Cstrong>Storage\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-javascript\">rules_version = '2';\n\nservice firebase.storage {\n  match \u002Fb\u002F{bucket}\u002Fo {\n  \tfunction requireS2FDomain() {\n  \t\treturn request.auth != null && request.auth.token.email.matches('.*@s2factory[.]co[.]jp$');\n    }\n    \n    match \u002F{userId}\u002F{allPaths=**} {\n      allow write: if requireS2FDomain() && request.auth.uid == userId;\n      allow read: if requireS2FDomain();\n    }\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>requireS2FDomain\u003C\u002Fcode> によって、\u003Cstrong>特定ドメインのメールアドレスを持つ認証済みアカウントのみアクセスを許可\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fworkspace.google.com\u002Fintl\u002Fja\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Google Workspace\u003C\u002Fa> を利用して特定のドメインで絞り込む方法も考えられますが、今回は Workspace を使っていない組織でも同様のことが実現できるか試す意図もあり、別の形で実装しました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"h5052bae7d3\">\u003Cstrong>投稿時の処理フロー\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>最も肝となる投稿時の流れは以下の通りです。\u003C\u002Fp>\u003Col>\u003Cli>ログイン状態のチェック\u003C\u002Fli>\u003Cli>写真のアップロード(複数)\u003Col>\u003Cli>画像の幅と高さを取得\u003C\u002Fli>\u003Cli>メインサイズとサムネイルサイズに縮小\u003C\u002Fli>\u003Cli>それぞれ Cloud Storage へアップロード\u003C\u002Fli>\u003Cli>ダウンロードURLの取得\u003C\u002Fli>\u003C\u002Fol>\u003C\u002Fli>\u003Cli>MemberMission を取得し投稿済みかどうかをチェック\u003C\u002Fli>\u003Cli>未投稿であれば Member の totalPoint と categoryPoint を加算\u003C\u002Fli>\u003Cli>MemberMission を更新\u003C\u002Fli>\u003Cli>Post を作成\u003C\u002Fli>\u003C\u002Fol>\u003Cp>処理が重くなりがちな部分には \u003Ccode>Future\u003C\u002Fcode> を使用し、並列化して処理時間を短縮。ユーザーが待てる範囲の速度を維持しました。\u003Cbr>3～6 の Firestore への書き込みはトランザクション処理を利用して一貫性を確保。初めての利用でしたが、実装がシンプルで非常に使いやすいと感じました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch4 id=\"h2e856c9f6a\">\u003Cstrong>Slack への投稿\u003C\u002Fstrong>\u003C\u002Fh4>\u003Cp>Slack への投稿はそれほど難しくありませんが、アクセストークンを付与したリクエストを行う必要があります。\u003Cbr>社内で使うものなので、フロントエンドにアクセストークンを持たせても問題ないのですが、\u003Cstrong>普段からセキュリティには注意を払っているため、たとえ社内向けのアプリでもそれは気持ち悪く感じてしまいます。\u003C\u002Fstrong>\u003Cbr>\u003Cbr>しかし、\u003Cstrong>バックエンドを実装しないというポリシーで開発を進めてきた\u003C\u002Fstrong>ため、アクセストークンをどこに隠蔽するかを検討。\u003Cbr>考えた末、以下のようにプロキシを利用することにしました。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-shell\"># Slack API\nSetEnvIf Request_URI "^\u002Fslack-notification\u002F" IS_SLACK\nRequestHeader SET host "slack.com" env=IS_SLACK\nRequestHeader SET authorization "Bearer xoxb-*******" env=IS_SLACK\nRewriteRule ^slack-notification\u002F(.*) https:\u002F\u002Fslack.com\u002Fapi\u002F$1 [P,L]\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>社内の認証で保護されたサーバー上で運用しているため、不正なアクセスができない構造になっています。\u003Cbr>この方法でアクセストークンを安全に隠蔽しつつ、Slack への投稿機能を実現しました。\u003C\u002Fp>\u003Ch2 id=\"hde965b176a\">完成\u003C\u002Fh2>\u003Cp>完成したものがこちらです。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fc7b9740bfa854cbdb96fe92a8779cf50\u002F%E5%AE%8C%E6%88%90-1.png?w=450&h=975\" alt=\"スケジュール画面\" width=\"450\" height=\"975\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F4d1420c6286c498a85b2cc0e6dc734ce\u002F%E5%AE%8C%E6%88%90-3.png?w=450&h=975\" alt=\"ミッション\" width=\"450\" height=\"975\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fa4d91f5859e44699b470d67def9420f5\u002F%E5%AE%8C%E6%88%90-4.png?w=450&h=975\" alt=\"ミッション\" width=\"450\" height=\"975\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F448baf19bffb4b59bcc68698921bdea5\u002F%E5%AE%8C%E6%88%90-2.png?w=450&h=975\" alt=\"タイムライン\" width=\"450\" height=\"975\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F71b1da2da1614a95a6ae46c0d4a0c09e\u002F%E5%AE%8C%E6%88%90-5.png?w=450&h=975\" alt=\"メンバー\" width=\"450\" height=\"975\">\u003C\u002Ffigure>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>みんな楽しんでくれたようで、\u003Cstrong>評判は上々\u003C\u002Fstrong>でした。 \u003Cbr>\u003Cbr>最終日には、ミッションの獲得ポイントを集計し、\u003Cstrong>上位3名を表彰\u003C\u002Fstrong>。\u003Cstrong>カテゴリーごとのランキングトップと総合得点トップの参加者に景品を授与\u003C\u002Fstrong>し、社員旅行を締めくくりました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ffec90573c3104638ba5a8a3cf930a1bb\u002F%E6%9C%A8%E5%BD%AB%E3%82%8A%E3%81%AE%E7%86%8A.jpeg?w=650&h=447\" alt=\"賞品の木彫りの熊\" width=\"650\" height=\"447\">\u003Cfigcaption>賞品の木彫りの熊\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>\u003Cbr>サービスは旅行後も残しておき、参加者からは\u003Cstrong>「思い出を振り返ったり、家族に旅行の話をするときに便利だった」\u003C\u002Fstrong>といった声も寄せられました。\u003C\u002Fp>\u003Cp>普段の業務では、利用者の顔が直接見えない場面での開発が多い中、今回は\u003Cstrong>「自分が作ったものを便利に楽しく使ってもらう」というモノづくりの醍醐味を久しぶりに実感\u003C\u002Fstrong>でき、やってよかったと感じています。\u003C\u002Fp>\u003Cp>ちなみに、\u003Cstrong>Google Cloud のインフラ費用は、開発・テスト期間も含めて税込 15 円\u003C\u002Fstrong>(工夫の甲斐あってか、想像以上に安く済みました)。\u003Cbr>一方で、バックエンドを実装しない方針にこだわりすぎた結果、無理をした部分もあり、その影響でいくつかのバグが発生してしまいました。次回は方針を少し緩め、バックエンドを取り入れることも検討しようと思います。\u003Cbr>\u003Cbr>また、自分も参加者として旅行に参加する中で、出先での改修が難しい場面も多く、変更が発生しそうな部分については、\u003Cstrong>あらかじめ CMS を用意しておくべきだったというのが反省\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>今回は、開発スピードを重視し、デザイン以外は一人で手掛けるという制約のもとで進めたため、内容的にはプロダクト品質には程遠いものでしたが、それでも何かの参考になれば幸いです。\u003Cbr>\u003Cbr>\u003Cstrong>また、こうしたアプリの開発に興味がある方やご相談をご希望の方は、ぜひお気軽に\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fcontact\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>\u003Cu>お問い合わせ\u003C\u002Fu>\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>ください。私たちが全力でサポートいたします。\u003C\u002Fstrong>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fcontact&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>",[],{"id":130,"createdAt":341,"updatedAt":342,"publishedAt":343,"revisedAt":342,"title":344,"tag":345,"recommended_articles":352,"eyecatch":353,"heading_list":24,"content2":357,"related_articles":358,"recruit":17,"is_html":17,"is_migration":17},"2024-12-04T06:19:37.810Z","2025-03-12T02:45:26.137Z","2025-03-11T08:29:32.360Z","座席の利用状況を可視化するシステムを作った話",[346,348,349,350],{"id":347},"moving",{"id":79},{"id":43},{"id":351},"iot",[],{"url":354,"height":355,"width":356},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fa654f9d5a3eb41cfaae1464bfb4a8517\u002Fraspberry%20pi%20pico%20w.jpg",2976,4925,"\u003Cp>弊社では、\u003Cstrong>よく出社する一部の社員を除き、座席を固定していません\u003C\u002Fstrong>。\u003Cbr>2023年6月のオフィス移転時に、「\u003Cstrong>フリーアドレスな座席の利用状況を見て、使用頻度の低い座席を把握したい\u003C\u002Fstrong>」という要望が寄せられました。\u003C\u002Fp>\u003Cp>そこで、\u003Cstrong>座席にセンサーを設置\u003C\u002Fstrong>し、利用状況を集計。最終的に、\u003Cstrong>どの座席がどれくらい使われているかを視覚化する画面を作成\u003C\u002Fstrong>しました。\u003Cbr>\u003Cbr>現在、このシステムでは\u003Cstrong>以下の 2 つをヒートマップで表示\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>座席ごとの利用状況\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>全座席の利用頻度\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1f60e01ce9334bd58ebc5962df1a1623\u002Ffront1.jpg?w=450&h=745\" alt=\"ヒートマップ\" width=\"450\" height=\"745\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>ただし、検証段階のため、センサーが設置されているのは 3 席のみです。\u003Cbr>\u003Cbr>ヒートマップでは、\u003Cstrong>未計測の日付はグレー\u003C\u002Fstrong>、\u003Cstrong>使用頻度が高まるにつれて色が濃く\u003C\u002Fstrong>なります。\u003Cbr>例えば、C-7 は最もよく使われており、C-5 と C-6 も最近頻繁に利用されるようになってきました。\u003Cbr>\u003Cbr>もっとセンサーが増えてデータが充実すれば、「\u003Cstrong>季節や気温による座席使用状況の違い\u003C\u002Fstrong>」が見えるようになるかもしれません。そうすると、寒すぎる席や暑すぎる席への対策も可能になります。\u003C\u002Fp>\u003Cp>以下は全デバイスのところを拡大した画像です。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F67e7ee22c56e454587ca2eef1f306614\u002Ffront2.jpg\" alt=\"\" width=\"1664\" height=\"772\">\u003C\u002Ffigure>\u003Ch2 id=\"h265bff37a3\">AWSを活用した構成\u003C\u002Fh2>\u003Cp>このシステムは、AWS上で構築されています。全体の構成は以下の通りです。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F5dd1f5bf5f8543d9982f0a2e6ef1d3e3\u002Faws.jpg?w=650&h=446\" alt=\"AWS上での構成\" width=\"650\" height=\"446\">\u003C\u002Ffigure>\u003Col>\u003Cli>\u003Cstrong>データ収集\u003C\u002Fstrong>\u003Cbr>センサーからの計測データを \u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Fiot-core\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">AWS IoT Core\u003C\u002Fa> で受信し、加工した後に \u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Fdynamodb\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">DynamoDB\u003C\u002Fa> へ保存します。\u003C\u002Fli>\u003Cli>\u003Cstrong>データの集計\u003C\u002Fstrong>\u003Cbr>DynamoDB に保存されたデータは、1日1度、\u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Flambda\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Lambda\u003C\u002Fa> 関数によって集計されます。その結果は JSON 形式のファイルとして \u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Fs3\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">S3\u003C\u002Fa> に保存され、フロントエンドで利用されます。\u003C\u002Fli>\u003Cli>\u003Cstrong>フロントエンド\u003C\u002Fstrong>\u003Cbr>ヒートマップを表示する画面は、S3 に保存された JSON データを利用しています。\u003C\u002Fli>\u003C\u002Fol>\u003Cp>このようなセンサーからのデータを集計して視覚化する場合、様々な実現方法がありますが、今回は社内での検証ということもあり\u003Cstrong>「コストをかけず、できるだけ安く！」という方針\u003C\u002Fstrong>で構成を決定しました。\u003C\u002Fp>\u003Cp>\u003Cstrong>データの集計処理は以下の2種類を実行\u003C\u002Fstrong>しています。\u003C\u002Fp>\u003Col>\u003Cli>\u003Cstrong>1 日単位でファイルを作成し、その日のデバイスごとの集計値を保存する\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>デバイス単位でファイルを作成し、1 ヶ月分の集計値を保存する\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>これらを一つの Lambda 関数でまとめる方法もありましたが、\u003Cstrong>柔軟性を考慮し、それぞれの集計処理を別の Lambda 関数に担当\u003C\u002Fstrong>させました。これにより、将来的にどちらか一方が不要になったり修正が必要になった場合でも、簡単に対処できる構成になっています。\u003C\u002Fp>\u003Cp>1 の集計処理が終了したら 2 の集計処理を開始するよう、\u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Fstep-functions\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Step Functions\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> でステートマシンを設定\u003C\u002Fstrong>しています。\u003Cbr>また、これらの処理が毎日決まった時間に実行されるよう、\u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Feventbridge\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>EventBridge\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> にルールを作成\u003C\u002Fstrong>しました。\u003Cbr>\u003Cbr>このルールにより、毎日指定した時間に Step Functions が起動し、設定された Lambda 関数が処理を実行。最終的に S3 へ集計ファイルが保存される仕組みになっています。\u003C\u002Fp>\u003Cp>AWS のリソース設定は、\u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Fconsole\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">AWS Management Console\u003C\u002Fa> で手動設定することも可能ですが、今回は \u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Fcdk\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>AWS CDK\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> を使用\u003C\u002Fstrong>しました。これにより、\u003Cstrong>設定内容をコードで管理でき、サービス構築から時間が経っても容易に内容を振り返ることが可能\u003C\u002Fstrong>です。CDK を使ったおかげで、こうしてブログを書く際にも思い出しやすくなっています。\u003C\u002Fp>\u003Ch2 id=\"he9c5c84dc2\">センサー部分\u003C\u002Fh2>\u003Cp>最終的に全座席へのセンサー設置を目指し、コストを抑えつつ、AWS IoT Core を試す目的で連携部分を自作できる「\u003Cstrong>赤外線センサー」と「\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.raspberrypi.com\u002Fproducts\u002Fraspberry-pi-pico\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Raspberry Pi Pico W\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>」を採用\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cp>以前にも、Raspberry Pi を利用した DIY センシング行ったことがあったので慣れているつもりでしたが、Pico W は従来の Raspberry Pi とは仕様が異なり、購入後に事前調査の不足を痛感しました。それでも、\u003Ca href=\"https:\u002F\u002Fmicropython.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">MicroPython\u003C\u002Fa> を使用すれば問題を解決できると判断し、以下の処理を実装。\u003C\u002Fp>\u003Col>\u003Cli>\u003Cstrong>WiFi に接続\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>センサーの値を ADC（アナログ-デジタル変換）で読み取り\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>一定の閾値を超える変化があれば、\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Fwhat-is\u002Fmqtt\u002F#:~:text=MQTT%20%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%81%AF%E3%80%81%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%8B%E3%82%89,%E8%80%85%E3%81%A8%E3%81%97%E3%81%A6%E6%A9%9F%E8%83%BD%E3%81%97%E3%81%BE%E3%81%99%E3%80%82\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>MQTTClient\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> を利用して IoT Core にデータを送信\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>1 秒スリープ後、再び計測\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>IoT Core へデータ送信するには、\u003Cstrong>デバイスに証明書をインストールする\u003C\u002Fstrong>必要があります。この手順は AWS 公式チュートリアルに従い、ポリシー設定や証明書の作成を進めました。\u003Cbr>この証明書をRaspberry Pi Pico に書き込み、ファイルに普通にアクセスできる形で保存してあります。\u003Cbr>\u003Cbr>例えば、\u003Ccode>\u002Fcerts\u002Fprivate.der\u003C\u002Fcode>として参照し、接続時にオプションで指定することで、IoT Core にスムーズにメッセージを送信できるようにしました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fa654f9d5a3eb41cfaae1464bfb4a8517\u002Fraspberry%20pi%20pico%20w.jpg?w=650&h=392\" alt=\"raspberry pi pico w\" width=\"650\" height=\"392\">\u003Cfigcaption>各テーブルの裏側に設置してあります。\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch2 id=\"h83ee18d802\">IoT Core設定\u003C\u002Fh2>\u003Cp>\u003Cstrong>IoT Core の「メッセージのルーティング」機能を利用\u003C\u002Fstrong>し、\u003Cstrong>センサーから取得した値を DynamoDB に保存する仕組みを構築\u003C\u002Fstrong>しました。これを実現するために、まずどのような形式でデータを保持するのが良いかを検討し、DynamoDBのスキーマを以下のように決めました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>パーティションキー\u003C\u002Fstrong>: センサーを特定する情報(部屋\u002Fデバイス番号)\u003C\u002Fli>\u003Cli>\u003Cstrong>ソートキー\u003C\u002Fstrong>: タイムスタンプ\u003C\u002Fli>\u003C\u002Ful>\u003Cp>今回は、集計処理が「センサーごと」で、単位は「1日分」です。そのため、集計処理では「センサー」をキーに検索し、タイムスタンプで絞り込む形が適していると判断しました。\u003C\u002Fp>\u003Cp>IoT Coreのルーティングルールでは、以下の項目を設定しました。\u003C\u002Fp>\u003Col>\u003Cli>\u003Cstrong>どの DynamoDB テーブルに保存するか\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>パーティションキーにどのデータを入れるか\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ソートキーにどのデータを入れるか\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>センサーから取得したデータを入れる列名\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Fol>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fcfd726c7d649464aad6259b6d6c68111\u002Frules.jpg?w=650&h=409\" alt=\"構造\" width=\"650\" height=\"409\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>これらの設定に基づき、ルールクエリでフィルタリングされたセンサーのデータが、\u003Cstrong>DynamoDB の value カラムに自動的に保存\u003C\u002Fstrong>されるようになりました。\u003C\u002Fp>\u003Ch2 id=\"h282144c8ac\">集計\u003C\u002Fh2>\u003Cp>センサーのデータは、DynamoDB に保存された後、\u003Cstrong>毎日決まった時間に集計処理\u003C\u002Fstrong>が行われます。\u003Cbr>この処理は \u003Cstrong>Step Functions \u003C\u002Fstrong>を利用して 2 つの Lambda 関数で実行され、結果は S3 に保存されます。\u003C\u002Fp>\u003Col>\u003Cli>\u003Cstrong>1 日単位の集計\u003C\u002Fstrong>\u003Cul>\u003Cli>その日のデバイスごとの利用状況を集計し、\u003Cstrong>日付をファイル名\u003C\u002Fstrong>として保存。\u003C\u002Fli>\u003Cli>保存されるデータ形式は、\u003Ccode>{device_id: string, time: long}\u003C\u002Fcode>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>デバイス単位の集計\u003C\u002Fstrong>\u003Cul>\u003Cli>1ヶ月分のデバイスごとの利用状況を集計し、\u003Cstrong>デバイス名をファイル名\u003C\u002Fstrong>として保存。フロントエンドのヒートマップでは、このデータを基に利用状況を可視化しています。\u003C\u002Fli>\u003Cli>保存されるデータ形式は、\u003Ccode>{date: string, time: long}\u003C\u002Fcode>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>1 つ目の Lambda で保存される日単位のデータは、現時点では使用されていませんが、他の表示形式で活用できる可能性があります。\u003Cbr>今後も利用の見込みがない場合は、この処理を変更または停止する予定です。\u003C\u002Fp>\u003Cp>Lambda関数を分割しているため、不要な処理の停止や変更が柔軟に対応できる構成になっています。\u003C\u002Fp>\u003Ch2 id=\"h5dc0967264\">フロントエンド\u003C\u002Fh2>\u003Cp>\u003Cstrong>フロントエンドは React で作成し、S3 でホスティング\u003C\u002Fstrong>しています(構成図には含まれていません)。\u003Cbr>S3 に保存された集計ファイルを取得し、計測開始から現在までのデータを表示する仕組みになっています。\u003C\u002Fp>\u003Cp>ヒートマップ表示には、\u003Ccode>react-calendar-heatmap\u003C\u002Fcode> を採用しました。\u003Cbr>開発当時「使ってみた」系の記事をよく見かけたというのが採用理由の一つですが、普段バックエンドばかりでフロントエンドは滅多に触る機会がない私でも容易に導入できました。\u003C\u002Fp>\u003Cp>現在、計測期間が長くなってきたため、ヒートマップで表示する期間を指定する機能を追加する必要が出てきています。\u003C\u002Fp>\u003Ch2 id=\"hcbec2bf0d9\">終わりに\u003C\u002Fh2>\u003Cp>普段から AWS を活用してシステムを構築していますが、まだ触れていないサービスも多くあります。\u003Cbr>今回は、社内で生まれた課題に対して \u003Cstrong>IoT Core \u003C\u002Fstrong>を起点に \u003Cstrong>EventBridge \u003C\u002Fstrong>や \u003Cstrong>Step Functions \u003C\u002Fstrong>を組み合わせたシステムを構築することで、\u003Cstrong>課題解決とともに新たな知見を得ることができました\u003C\u002Fstrong>。\u003C\u002Fp>\u003Cp>特に、デバイスから取得したセンシングデータを弊社の主戦場である AWS に統合するノウハウを得たことで、\u003Cstrong>IoT 関連のシステム開発においても守備範囲を広げられた\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>\u003C\u002Ful>\u003Cp>具体的な実現イメージがある場合はもちろん、初期段階のご相談からでもお力になります。\u003C\u002Fp>\u003Cp>私たちは、お客様の課題を解決し、\u003Cstrong>新たな可能性を見つけるお手伝い\u003C\u002Fstrong>をさせていただきます。\u003Cbr>お気軽にお問い合わせください。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fcontact&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>",[],{"id":132,"createdAt":360,"updatedAt":361,"publishedAt":362,"revisedAt":361,"title":363,"tag":364,"recommended_articles":370,"eyecatch":371,"heading_list":17,"content2":375,"related_articles":376,"recruit":17,"is_html":17,"is_migration":17},"2025-04-13T16:52:56.932Z","2025-04-18T05:27:52.091Z","2025-04-18T04:48:06.935Z","3DフィギュアでトイレのサインをDIYした話",[365,367,368],{"id":366},"character",{"id":79},{"id":369},"office",[],{"url":372,"height":373,"width":374},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fbda65e5231a8401aa5734251ef0fa395\u002FS2character-6.jpg",1455,2001,"\u003Cp>少し前のことになりますが、\u003Cstrong>弊社オフィスのトイレサインをオリジナルで制作・設置\u003C\u002Fstrong>しました。\u003Cbr>使用したのは、\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fs2-character\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>弊社マスコットキャラクター「Sくん」と「2さん」\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>の3Dフィギュア\u003C\u002Fstrong>。\u003Cbr>\u003Cbr>このサインは既製品ではなく、社内でのちょっとした発案から始まり、スタッフの手によって DIY で仕上げられたものです。\u003Cbr>日頃から社内でも親しまれているキャラクターを活かし、オフィス内のサインにも\u003Cstrong>“らしさ”\u003C\u002Fstrong>を取り入れた事例として、ここでご紹介します。\u003C\u002Fp>\u003Ch2 id=\"h6987f006c6\">トイレサインを S2 らしいものにしたい\u003C\u002Fh2>\u003Cp>1 階の 2 つのトイレは、もともと男女別に分かれてはいましたが、視覚的に明示されたサインはありませんでした。\u003Cbr>来訪者にもわかりやすく、かつ自分たちらしいサインを取り付けられないか——そんな声がきっかけで、この取り組みが始まりました。\u003C\u002Fp>\u003Cp>そこで目をつけたのが、過去に制作していた \u003Cstrong>S くんと 2 さんの3Dフィギュア\u003C\u002Fstrong>です。\u003Cbr>このフィギュアは、マスコットキャラクターを用いたグッズ制作の一環として作られたもので、その制作経緯については\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fs2character-print\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">こちらのブログ記事\u003C\u002Fa>でもご紹介しています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fs2character-print\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fs2character-print%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=\"h4e84fdd5ec\">フィギュアの加工とサインの設置\u003C\u002Fh3>\u003Cp>今回の制作は、弊社デザイナーの \u003Ca href=\"https:\u002F\u002Fx.com\u002Fyamadas2fa\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">yamada\u003C\u002Fa>\u003Cstrong> \u003C\u002Fstrong>を中心に、\u003Ca href=\"https:\u002F\u002Fx.com\u002Fs2_negi\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">negi\u003C\u002Fa>\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\u002Finterview-5\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Finterview-5%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Finterview-4\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Finterview-4%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>まず、S くんと 2 さんのフィギュアに取り付けられていた台座を取り外すところから。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ffc4b9a37462a458d9f1c9f6e4a8c9456\u002FS2character-1.jpg?w=510&h=450\" alt=\"台座から取り外したフィギュア\" width=\"510\" height=\"450\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>そのままでは足元に塗装の剥がれた白地が見えてしまうため、\u003Cstrong>元の色味に合わせてアクリル絵の具で再塗装\u003C\u002Fstrong>が行われました。\u003Cbr>塗料の選定や仕上げの質感にもこだわりながら、見た目にも自然に馴染むように細かな調整が加えられています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F9ab67032a9ac4c06893a1531c73ca994\u002FS2character-2.jpg?w=625&h=450\" alt=\"塗装後\" width=\"625\" height=\"450\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>続いて、フィギュアの背中に\u003Cstrong>ドリルで小さな穴を開け、ネオジム磁石を埋め込む加工\u003C\u002Fstrong>を実施。\u003Cbr>磁石のサイズや深さを調整し、しっかりと安定して壁に取り付けられるよう、試行錯誤を重ねながら仕上げていきました。\u003Cbr>当初は固定方法についても検討がありましたが、着脱のしやすさを考慮して磁石方式が採用されています。\u003Cbr>\u003Cbr>設置場所のトイレのひとつには、すでにアールのついたアクリル板状の装飾があったため、それに合わせて\u003Cstrong>東急ハンズで金属板をカット加工\u003C\u002Fstrong>し、フィットするサイズで調整。\u003Cbr>最後に強力な粘着テープで金属板を取り付け、そこに加工済みのSくんと2さんのフィギュアを装着して、サインが完成しました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F18e1681ab7d24eaaac9b8a7633ed8417\u002FS2character-4.jpg?w=650&h=974\" alt=\"男子トイレのサイン\" width=\"650\" height=\"974\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F41d00f254f474942b435b420ee2dc057\u002FS2character-3.jpg?w=650&h=974\" alt=\"女子トイレのサイン\" width=\"650\" height=\"974\">\u003C\u002Ffigure>\u003Ch2 id=\"hcbec2bf0d9\">終わりに\u003C\u002Fh2>\u003Cp>この取り組みは、社内にある素材やアイデアを活かして、空間にわかりやすさと少しの\u003Cstrong>“S2らしさ”\u003C\u002Fstrong>を加えた、キャラクター活用の一例です。\u003Cbr>S くん、2 さん、そして最近加わった F ちゃんをはじめ、これまでにも\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\u002Fgoods\u002F\" data-iframely-url=\"\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fgoods%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>\u003Cbr>ただ、それだけでなく、\u003Cstrong>「やってみたい」と思ったことを、自分たちの手で実際に形にできる環境\u003C\u002Fstrong>があることも、弊社の大きな特徴です。\u003C\u002Fp>\u003Cp>必要なものを、自分たちで工夫してつくる。働きやすくするために、少しずつ整えていく。\u003Cbr>そうした動きが、社内のあちこちで自然と根づいています。\u003C\u002Fp>\u003Cp>小さな工夫やものづくりの積み重ねが、S2ファクトリーらしい空気をつくっているのかもしれません。\u003Cbr>普段の仕事でも、そんな「らしさ」を大切にしながら、かたちにしていくことを続けています。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cspan style=\"color: #bababa\">下の特設サイトにオフィスに関する記事がまとめてありますので、良かったらそちらも合わせてご覧になってみてください。\u003C\u002Fspan>\u003C\u002Fp>\u003Cp>\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\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>",[],{"id":134,"createdAt":231,"updatedAt":232,"publishedAt":233,"revisedAt":232,"title":234,"tag":378,"recommended_articles":383,"eyecatch":384,"heading_list":24,"content2":245,"related_articles":385,"recruit":17,"is_html":17,"is_migration":17},[379,380,381,382],{"id":19},{"id":13},{"id":26},{"id":43},[],{"url":242,"height":243,"width":244},[],{"id":99,"createdAt":387,"updatedAt":388,"publishedAt":388,"revisedAt":388,"title":389,"tag":390,"recommended_articles":396,"eyecatch":397,"heading_list":24,"content2":401,"related_articles":402,"recruit":17,"is_html":17,"is_migration":17},"2025-10-20T05:28:48.102Z","2025-11-18T08:07:56.805Z","クラウドに頼らないAI ― エッジAIを試してみた",[391,392,393,394],{"id":19},{"id":72},{"id":43},{"id":395},"study",[],{"url":398,"height":399,"width":400},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F6b31f88cd3094105a3aee9ff9cff3f0e\u002FAI.jpg",2880,5120,"\u003Cp>温泉で滑って転んで怪我をしました。\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>「エッジ AI」\u003C\u002Fstrong>について話しました。\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Finterview-3\u002F\" data-iframely-url=\"https:\u002F\u002Fcdn.iframe.ly\u002Fapi\u002Fiframe?card=small&url=http%3A%2F%2Fs2factory.co.jp%2Fblog%2Finterview-3%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fcdn.iframe.ly\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Chr>\u003Cp>\u003Cbr>この数年で、\u003Cstrong>画像生成や文章生成をはじめとする AI 技術\u003C\u002Fstrong>が急速に広がり、Web サービスやアプリにも活用されるようになってきました。\u003Cbr>しかし、実際に AI を導入しようとすると次のような課題があるように思います。\u003C\u002Fp>\u003Cp>\u003Cstrong>AI の処理には GPU を搭載した高性能なマシンが必要\u003C\u002Fstrong>で、基本的には 1 台(1 GPU)につき 1 処理ずつしか実行できません。そのため、Web サービスのように複数のユーザーがアクセスする環境では、次のような問題が発生します。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>処理中のユーザーに待ってもらう必要がある(遅延)\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>サーバーの台数を増やして対応する必要がある(コスト増)\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>また、\u003Cstrong>外部の AI サービスを API 経由で利用する方法\u003C\u002Fstrong>も一般的になっていますが、これにも別の問題が。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>データを外部に送信する必要があり、プライバシー面での懸念がある\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>リクエストごとに費用が発生するため、アクセス量によってコストが変動する\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>自分でトレーニングしたモデルを使いづらい\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>特に、\u003Cstrong>アクセス数が読みにくいサービスではコスト見積もりが難しく\u003C\u002Fstrong>、運用面での負担をどう抑えるかが検討課題です。\u003C\u002Fp>\u003Cp>そうした状況の中で、\u003Cstrong>「ユーザーの手元の端末で処理してしまえばいいのでは」\u003C\u002Fstrong>という発想が生まれました。\u003Cbr>近年は PC やスマートフォンの性能が大きく向上し、もはやちょっとしたサーバー並みです。\u003Cbr>\u003Cbr>そこで注目されるようになったのが、\u003Cstrong>エッジAI\u003C\u002Fstrong> です。\u003C\u002Fp>\u003Ch2 id=\"hfe9b4b1d71\">エッジ AI とは\u003C\u002Fh2>\u003Cp>エッジAI とは、\u003Cstrong>AI の処理をクラウド上ではなくユーザーの手元にあるデバイス(PC・スマートフォン・IoT 機器など)で実行する技術\u003C\u002Fstrong>のことです。\u003Cbr>\u003Cbr>その一例が、\u003Cstrong>ブラウザ上で JavaScript などを使って AI を動かす仕組み\u003C\u002Fstrong>。\u003Cbr>ブラウザの中で AI モデルを読み込み、端末の CPU や GPU を使って推論を行います。\u003Cbr>\u003Cbr>クラウドを経由しないため、次のような\u003Cstrong>メリット\u003C\u002Fstrong>があります。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>インフラコストがかからない\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ローカル完結でユーザーのデータは外部に送られないためプライバシーが守られる\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>低遅延での応答が可能\u003C\u002Fstrong>(個人の端末性能に依存するが、今後さらに高性能になっていくと考えられる)\u003C\u002Fli>\u003C\u002Ful>\u003Cp>一方で、\u003Cstrong>デメリット\u003C\u002Fstrong>も存在します。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>バッテリー消費や発熱の増加\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>モデルのダウンロードによる通信負荷\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>AI モデルやコードをユーザー側に読み込ませる必要があり、その中身を確認できてしまう\u003C\u002Fstrong>(一般的なフロントエンドの課題でもあるが、同じものが作れてしまう)\u003C\u002Fli>\u003C\u002Ful>\u003Cp>その中でも、個人的に特に大きいと感じているのがモデルのダウンロードの問題です。\u003Cbr>ここからは、その点について少し掘り下げてみます。\u003C\u002Fp>\u003Ch3 id=\"h609c402fc0\">モデルのダウンロード問題\u003C\u002Fh3>\u003Cp>\u003Cstrong>AI を端末側で動かすためには、学習済みモデルをユーザーの環境に読み込ませる\u003C\u002Fstrong>必要があります。\u003C\u002Fp>\u003Cp>しかしこのモデルファイルが非常に大きく、それなりに良い LLM のもので \u003Cstrong>4GB 規模\u003C\u002Fstrong>になることもあります。\u003Cbr>\u003Cstrong>モデルを端末に転送するだけで負荷が大きく、通信量も無視できません。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>さらに、Web のキャッシュは\u003Cstrong>サイト単位で管理される\u003C\u002Fstrong>ため、同じモデルを使っていても\u003Cstrong>サイトが違えば再度ダウンロード\u003C\u002Fstrong>が発生します。\u003Cbr>複数サイトで展開する場合や、性能の低い端末では現実的ではありません。\u003C\u002Fp>\u003Cp>加えて、\u003Cstrong>配信元のサーバーでも転送料金が膨大になる\u003C\u002Fstrong>可能性があります。\u003Cbr>\u003Cstrong>「どこにモデルを置き、どのように配信するのか」\u003C\u002Fstrong>これがエッジAIを運用する上で避けて通れない問題です。\u003C\u002Fp>\u003Ch3 id=\"h554478e0cf\">解決に向けて\u003C\u002Fh3>\u003Cp>通信量の課題を根本的に解決する方法は、まだ確立されていません。\u003Cbr>ただし、いくつか\u003Cstrong>現実的なアプローチ\u003C\u002Fstrong>が考えられます。\u003Cbr>\u003Cbr>たとえば、\u003Cstrong>Web ではなくネイティブアプリとして提供する方法\u003C\u002Fstrong>です。\u003Cbr>最近のゲームアプリのように大容量データが当たり前になっていることを考えると、数 GB のモデルでも受け入れられるかもしれません。\u003Cbr>\u003Cbr>また、管理画面など特定のユーザーが使う場面では、\u003Cstrong>ローカルにモデルをダウンロードしてもらい、利用のたびにそれを利用してもらう運用\u003C\u002Fstrong>も考えられます。\u003Cbr>ただし、利用頻度が限られている場合は、\u003Cstrong>サーバー側で処理した方が合理的\u003C\u002Fstrong>かもしれません。\u003C\u002Fp>\u003Cp>また今後、\u003Cstrong>Android や iOS に AI モデルがプリインストール\u003C\u002Fstrong>され、それを呼び出す API が標準化されることがあれば、大きなブレイクスルーになるでしょう。\u003Cbr>\u003Cbr>IoT のように端末内部にモデルを組み込める環境では、すでにエッジAIと相性が良く、\u003Cstrong>Raspberry Pi などの小型デバイス\u003C\u002Fstrong>でも AI を動かすことができます。\u003Cbr>このような構成を活かせば、IoT デモやおもちゃのような試作も手軽に行えるでしょう。\u003C\u002Fp>\u003Ch2 id=\"hb6a0beb984\">Google AI Edge\u003C\u002Fh2>\u003Cfigure>\u003Ca href=\"https:\u002F\u002Fai.google.dev\u002Fedge?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F62f25705c74b45ca86b111298900c573\u002Fgoogle_ai_edge.png\" alt=\"Google AI Edgeロゴ\" width=\"1595\" height=\"754\">\u003C\u002Fa>\u003C\u002Ffigure>\u003Cp>\u003Cbr>\u003Cbr>Google はクラウド上の AI サービスだけでなく、\u003Cstrong>デバイス上で AI を動かすためのプラットフォーム「\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fai.google.dev\u002Fedge?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Google AI Edge\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>」も提供しています。\u003Cbr>その中でも特に今回紹介したいのが、\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fai.google.dev\u002Fedge\u002Flitert?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>LiteRT\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> と \u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fai.google.dev\u002Fedge\u002Fmediapipe\u002Fsolutions\u002Fguide?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>MediaPipe\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> \u003C\u002Fstrong>という 2 つのランタイムです。\u003C\u002Fp>\u003Ch3 id=\"h9b1b0e2e79\">LiteRT\u003C\u002Fh3>\u003Cp>LiteRT は、\u003Cstrong>一般的な AI モデルを軽量化し、ブラウザやスマートフォン上で動作させるための仕組み\u003C\u002Fstrong>です。\u003Cbr>既存の優秀な学習済みモデルを変換して利用できるため、\u003Cstrong>特別な環境構築をしなくても、端末上で AI を実行できる\u003C\u002Fstrong>のが特徴です。\u003C\u002Fp>\u003Cp>また、\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FLoRA\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>LoRA(Low-Rank Adaptation)\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>にも対応\u003C\u002Fstrong>しています。\u003Cbr>これは\u003Cstrong>「既存モデルに追加の重みを足すことで、学習済みモデルを簡単にカスタマイズできる」\u003C\u002Fstrong>アプローチで、製品説明の自動生成など、特定タスクに合わせた出力を調整する際に便利です。\u003Cbr>LoRA を使えば、モデル全体を再学習させなくても、必要な部分だけを差し替えて使うことができます。\u003C\u002Fp>\u003Ch3 id=\"h6fdeebb4fe\">MediaPipe\u003C\u002Fh3>\u003Cp>もう一つの MediaPipe は、\u003Cstrong>ウェブカメラなどを通じて映像から人の動きや物体を検出できるライブラリ\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>手や顔の動きの認識だけでなく、\u003Cstrong>LLM の推論やマルチモーダル処理\u003C\u002Fstrong>にも対応しています。\u003Cstrong>「マルチモーダル」とは、音声・映像・テキストなど異なる種類の情報を同時に扱う技術\u003C\u002Fstrong>のこと。\u003Cbr>これまでクラウドでしか実現できなかった高度な処理を、\u003Cstrong>ブラウザ上で動かせる\u003C\u002Fstrong>のが大きな特徴です。\u003C\u002Fp>\u003Cp>Google はこれらの機能を体験できる \u003Ca href=\"https:\u002F\u002Fmediapipe-studio.webapps.google.com\u002Fhome\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>MediaPipe Studio\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> \u003C\u002Fstrong>というデモサイトも公開しており、簡単に試せるようになっています。ぜひ遊んでみてください。\u003C\u002Fp>\u003Ch2 id=\"h16488962fd\">自作デモ\u003C\u002Fh2>\u003Cp>自分で簡単なデモも作ってみました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ffa2aed28987e49cb8871459d27df31b5\u002F%E3%83%87%E3%83%A2.png?w=400&h=536\" alt=\"demo\" width=\"400\" height=\"536\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>今回は約 4GB のモデルをブラウザに読み込ませて動作を確認しました。\u003Cbr>都度ダウンロードするのは現実的ではないため、ローカルに置いたファイルを読み込んでいます。\u003Cbr>読み込みに少し時間はかかりましたが、完了後はすぐに動作しました。\u003C\u002Fp>\u003Cp>上部のテキストボックスに指示を入力します。試しに今日の天気を聞いてみたところ、すぐに回答が返ってきました。\u003C\u002Fp>\u003Cp>\u003C\u002Fp>\u003Cdiv style=\"max-width: 56vh;\">\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 177.7778%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FRfJ0TyvyVqs?rel=0&cc_load_policy=1\" 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>\u003C\u002Fdiv>\u003Cp>\u003Cbr>次に、下のみかんの画像を渡して画像認識をやってみます。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F6c8742dbc75741e5a71942991972e6f0\u002F%E3%81%BF%E3%81%8B%E3%82%93.jpg\" alt=\"\" width=\"800\" height=\"533\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>入力した内容は以下の通りです。\u003C\u002Fp>\u003Cpre>\u003Ccode>あなたは画像認識APIです。  \n次の形式でレスポンスしてください。  \n\n{\n  "result": true,\n  "score": 95\n}\n\n次の画像にミカンが写っていれば true を、写っていなければ false を返してください。  \nミカンが写っていた場合は、写り方を 100 点満点で採点し、score として返してください。  \n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cdiv style=\"max-width: 56vh;\">\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 177.7778%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002Fx4BBhaQSa60?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>\u003C\u002Fdiv>\u003Cp>\u003C\u002Fp>\u003Cp>\u003Cstrong>ミカンが写っていると正しく判定\u003C\u002Fstrong>され、スコアも返ってきましたね。\u003Cbr>\u003Cbr>続いてレモンの画像を渡して、「\u003Ccode>false\u003C\u002Fcode> の場合は理由も返すように」と条件を加えてみました。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cdiv style=\"max-width: 56vh;\">\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 177.7778%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FU-kIYmroG8E?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>\u003C\u002Fdiv>\u003Cp>\u003Cbr>正しく判定できているようです。\u003C\u002Fp>\u003Cp>他にも、画像にテキストが含まれている場合でも、それをしっかりと認識し、内容を抽出することができます。\u003Cbr>さらに、画像の中の色を識別してカラーコードを判定することも可能でした。\u003C\u002Fp>\u003Cp>このように、\u003Cstrong>フロントエンド上だけでも想像以上に多くの処理が行える\u003C\u002Fstrong>ことがわかります。\u003C\u002Fp>\u003Ch2 id=\"hf604d5817f\">LiteRTとONNX\u003C\u002Fh2>\u003Cp>LiteRT に変換することで、自分で作成したモデルもブラウザ上で動かせます。\u003Cbr>一方で、\u003Ca href=\"https:\u002F\u002Fonnx.ai\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>ONNX(Open Neural Network Exchange)\u003C\u002Fstrong>\u003C\u002Fa>というオープンな活動もあり、\u003Cbr>さまざまな形式のモデルを共通仕様で扱えるようにする取り組みが進んでいます。\u003C\u002Fp>\u003Cp>ONNXに変換すると、\u003Cstrong>JavaScript上でそのままモデルを動かすことが可能\u003C\u002Fstrong>です。\u003Cbr>システムとしては \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWebAssembly#:~:text=WebAssembly%20%E3%81%AF%E7%8F%BE%E4%BB%A3%E3%81%AE%E3%82%A6%E3%82%A7%E3%83%96,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82\" target=\"_blank\" rel=\"noopener noreferrer\">WebAssembly \u003C\u002Fa>を利用しており、ブラウザ内で推論処理を実行できます。\u003Cbr>\u003Cbr>つまり、トレーニング済みのモデルを変換して読み込むだけで、フロントエンドから AI を呼び出せるようになるということです。\u003C\u002Fp>\u003Cp>自分でトレーニングしたモデルを使うこともできますが、MediaPipe のように使いやすいインターフェースは提供されていないため、ある程度の知識や環境構築が必要になります。\u003C\u002Fp>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>エッジ AI にはまだ課題もありますが、管理画面などで AI を組み込んでみたいときに便利です。\u003C\u002Fp>\u003Cp>\u003Cstrong>MediaPipe などの機能は手軽に扱える\u003C\u002Fstrong>ので、積極的に使っていける段階にあります。\u003Cbr>まずは触ってみて、どんなことができるのかを確かめてみましょう。\u003C\u002Fp>\u003Cp>AI を導入するときは、「サーバーで処理する」だけでなく、\u003Cstrong>フロントエンドで実装する\u003C\u002Fstrong>という選択肢も見えてきました。\u003C\u002Fp>\u003Cp>ディレクションや設計の立場の方も、「この機能はフロントでエッジAIを使ったほうが早いかも」と判断できるくらいの理解を持っておくと、幅が広がると思います。\u003C\u002Fp>\u003Cp>エッジ AI は知っておくだけでも、\u003Cstrong>設計や提案の考え方を変えてくれる技術\u003C\u002Fstrong>です。\u003Cbr>まずは身近な場面から取り入れて、その可能性を試してみてください。\u003C\u002Fp>",[],{"id":96,"createdAt":404,"updatedAt":405,"publishedAt":406,"revisedAt":405,"title":407,"tag":408,"recommended_articles":417,"eyecatch":418,"heading_list":24,"content2":421,"description":422,"related_articles":423,"recruit":17,"is_html":17,"is_migration":17},"2026-01-16T04:00:35.807Z","2026-05-11T08:28:29.550Z","2026-01-28T07:13:03.163Z","AI エージェントを社内で試して見えてきたこと",[409,410,412,414,415,416],{"id":72},{"id":411},"workshop",{"id":413},"event",{"id":43},{"id":395},{"id":19},[],{"url":419,"height":313,"width":420},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1f7ae268ef684c979b3aef3b51d183a4\u002Fevent.jpg",6000,"\u003Cp>2 年間ほぼ毎日同じ時間に同じチョコザップに通い続けているのですが、いろんな人が来なくなりました。\u003C\u002Fp>\u003Cp>この記事は、社内イベント「\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Ftea\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C\u002Fu>\u003C\u002Fa>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社の maya が、\u003Cstrong>社内で実施した「event-ai-agent」\u003C\u002Fstrong>の取り組みをもとに、\u003Cstrong>「AI エージェント」\u003C\u002Fstrong>について話しました。\u003C\u002Fp>\u003Chr>\u003Cp>\u003Cbr>最近、AI の話題の中で\u003Cstrong>「AI エージェント」\u003C\u002Fstrong>という言葉を目にする機会が増えてきました。\u003Cbr>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ffeatures\u002Fcopilot?locale=ja\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub Copilot\u003C\u002Fa> のような補完型 AI や \u003Ca href=\"https:\u002F\u002Fchatgpt.com\u002Fja-JP\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">ChatGPT\u003C\u002Fa> のようなチャット型 AI とは異なり、\u003Cstrong>指示を与えると自律的にコードを書き、タスクを進めていくタイプの AI\u003C\u002Fstrong> で、\u003Ca href=\"https:\u002F\u002Fdevin.ai\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">Devin\u003C\u002Fa> や \u003Ca href=\"https:\u002F\u002Fclaude.com\u002Fproduct\u002Foverview\" target=\"_blank\" rel=\"noopener noreferrer\">Claude Code\u003C\u002Fa> などが有名です。\u003C\u002Fp>\u003Cp>こうした AI は、便利そうに感じる一方で、実際にどこまで任せられるのか、どんな場面で使えるのかは、触ってみないと分からない部分が多いのも事実です。\u003C\u002Fp>\u003Cp>S2 には、コードを書くこと自体が好きだったり、自分でやったほうが速いと感じる人が多くいます。また、自社に権利のないデータや取り扱いに注意が必要な情報を扱う仕事が多いこともあり、\u003Cstrong>AI に任せることに対して慎重な感覚\u003C\u002Fstrong>を持っている人も少なくありません。\u003Cbr>\u003Cbr>それでも今後、エージェント型 AI は広まっていくと考えられ、うまく使えれば作業の工数を抑えられる可能性もあります。そこで\u003Cstrong>「社内で AI エージェントをちゃんと使ってみる時間を作れないか」\u003C\u002Fstrong>という話が社内で持ち上がりました。\u003C\u002Fp>\u003Cp>こうして立ち上がったのが、\u003Cstrong>1 か月間にわたって取り組んだ社内企画「event-ai-agent」\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Ch2 id=\"he4fe40370a\">AI エージェントとは\u003C\u002Fh2>\u003Cp>まずは、今回の企画の前提となる AI エージェントについて整理しておきます。\u003Cbr>\u003Cbr>ChatGPT のようなチャット型 AI は、チャットでやり取りした内容に対して、その場で回答を返す AI です。質問に答えたり、相談に応じたりといった使い方が中心になります。\u003C\u002Fp>\u003Cp>対して AI エージェントは、\u003Cstrong>目標を与えると、その達成に向けて自律的に行動する AI \u003C\u002Fstrong>です。人が細かく手順を指示しなくても、状況を判断しながら処理を進め、コードを書いたりシステムに手を入れたりしながら、\u003Cstrong>複数の工程を含むタスクを一連の流れとして完了\u003C\u002Fstrong>させます。\u003C\u002Fp>\u003Cp>AI エージェントの主な特徴は、次のとおりです。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>自律性(Autonomy)\u003C\u002Fstrong>\u003Cbr>人の指示を逐一待たずに、自分で判断して行動できる\u003C\u002Fli>\u003Cli>\u003Cstrong>目標指向(Goal-oriented)\u003C\u002Fstrong>\u003Cbr>与えられた目標を達成するために計画を立てる\u003C\u002Fli>\u003Cli>\u003Cstrong>環境認識(Perception)\u003C\u002Fstrong>\u003Cbr>周囲の状況やデータを認識・理解する\u003C\u002Fli>\u003Cli>\u003Cstrong>行動実行(Action)\u003C\u002Fstrong>\u003Cbr>ツールや API を使って実際に作業を行う\u003C\u002Fli>\u003Cli>\u003Cstrong>学習能力(Learning)\u003C\u002Fstrong>\u003Cbr>経験から学び、振る舞いを改善していく\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"h0c83bdc0b0\">AI エージェントができること\u003C\u002Fh3>\u003Cp>AI エージェントは、さまざまな役割を担うことができます。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>カスタマーサポートエージェント\u003C\u002Fstrong>\u003Cbr>顧客の質問に対応し、問題解決までを行う\u003C\u002Fli>\u003Cli>\u003Cstrong>データ分析エージェント\u003C\u002Fstrong>\u003Cbr>データを収集・分析し、レポートを作成する\u003C\u002Fli>\u003Cli>\u003Cstrong>コーディングエージェント\u003C\u002Fstrong>\u003Cbr>プログラムを書いたり、バグを修正したりする\u003C\u002Fli>\u003Cli>\u003Cstrong>タスク管理エージェント\u003C\u002Fstrong>\u003Cbr>スケジュールを管理し、リマインダーを送る\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>MCP(Model Context Protocol)\u003C\u002Fstrong> を利用することで、\u003Cstrong>外部のツールやサービスと連携した処理も可能\u003C\u002Fstrong>です。\u003Cbr>例えば、\u003Ca href=\"https:\u002F\u002Fwww.figma.com\u002Fja-jp\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">Figma\u003C\u002Fa> の MCP を読み込ませてデザインデータを参照したり、Gmail と連携してメールを送信したりといったこともできます。\u003C\u002Fp>\u003Ch2 id=\"h7907b76c82\">event-ai-agent\u003C\u002Fh2>\u003Cp>event-ai-agent は、\u003Cstrong>社内で AI エージェントを一定期間実際に使い、その使いどころや制約を確認するために行った取り組み\u003C\u002Fstrong>です。\u003Cbr>個人で断続的に試すのではなく、\u003Cstrong>期間を区切り、参加者同士で状況を共有\u003C\u002Fstrong>しながら進める形にしました。参加は希望制とし、関心のあるメンバーがそれぞれのペースで取り組めるようにしています。\u003C\u002Fp>\u003Cp>概要は以下のとおりです。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>実施期間\u003C\u002Fstrong>：約 1 か月\u003C\u002Fli>\u003Cli>\u003Cstrong>使用ツール\u003C\u002Fstrong>：\u003Ca href=\"https:\u002F\u002Fclaude.ai\u002Flogin\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Claude Code\u003C\u002Fstrong>\u003C\u002Fa>\u003Cul>\u003Cli>検証は、社内で用意したサンドボックス環境(EC2)上で実施\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>進め方\u003C\u002Fstrong>\u003Cul>\u003Cli>期間中、各自で AI エージェントを使った検証を実施\u003C\u002Fli>\u003Cli>Slack 上の専用チャンネルで、検証内容や気づいたことを随時共有\u003C\u002Fli>\u003Cli>\u003Cstrong>週 1 回・30 分の共有会をオンラインで開催\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>期間内に 1 日、オフラインで集まり集中的に検証\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>オフラインでの集中検証日には、次のレギュレーション\u003C\u002Fstrong>を設けました。\u003C\u002Fp>\u003Cul>\u003Cli>人が行うのは AI エージェントへの指示出しのみ\u003C\u002Fli>\u003Cli>ソースコードを人が直接書くことは禁止\u003C\u002Fli>\u003Cli>指示用のテキストファイル作成は可\u003C\u002Fli>\u003C\u002Ful>\u003Cp>また、本企画で設定していた\u003Cstrong>目的\u003C\u002Fstrong>は次の 3 点です。\u003C\u002Fp>\u003Cul>\u003Cli>エージェント型 AI にふれるきっかけを作る\u003C\u002Fli>\u003Cli>できること・できないことを経験として知る\u003C\u002Fli>\u003Cli>今後の案件に活用できそうな可能性を探る\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"h55d45458f2\">事例紹介\u003C\u002Fh2>\u003Cp>それでは、期間中に参加者が試してみた事例について紹介します。\u003C\u002Fp>\u003Ch3 id=\"h3b8cb5ca5b\">事例 1：API 仕様書を渡してフロントエンドを作らせてみる\u003C\u002Fh3>\u003Cp>この事例では、\u003Cstrong>AI エージェントにどのような情報を渡せば、どこまでアウトプットできるのか\u003C\u002Fstrong>を意識して試してみました。\u003C\u002Fp>\u003Cp>API 仕様書を入力として渡し、「この仕様をもとにフロントエンドを作ってほしい」と指示しました。AI エージェントに依頼した内容は次のとおりです。\u003C\u002Fp>\u003Cul>\u003Cli>作業用のブランチを作成する  \u003C\u002Fli>\u003Cli>簡単な API を実装する  \u003C\u002Fli>\u003Cli>実装後に動作確認を行う  \u003C\u002Fli>\u003Cli>README を作成する  \u003C\u002Fli>\u003Cli>.gitignore を設定する  \u003C\u002Fli>\u003Cli>成果物を commit し、リポジトリに push する  \u003C\u002Fli>\u003C\u002Ful>\u003Cp>実装手順の分解や、Git 操作を含めた作業はすべて AI エージェントが行っています。\u003Cbr>その結果、生成されたのが下のアプリケーションです。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F706b8cb607f84b058316d5782a0b380b\u002F%E4%BA%8B%E4%BE%8B-1.png?w=1000&h=639\" alt=\"生成されたフロントエンド\" width=\"1000\" height=\"639\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>仕様書という限られた情報からでも、フロントエンドの形を容易に作れることがわかります。\u003C\u002Fp>\u003Ch3 id=\"h1f5ee5b46a\">事例 2：Auth0 のエクスポートデータを変換するプログラム\u003C\u002Fh3>\u003Cp>\u003Cstrong>Auth0 からエクスポートしたデータを ion 形式に変換するプログラム\u003C\u002Fstrong>の作成を AI エージェントに任せました。\u003Cbr>変換処理の実装に加えて、\u003Cstrong>テストデータの作成までまとめて行ってくれた\u003C\u002Fstrong>点は便利に感じられました。\u003Cbr>\u003Cbr>一方で、最初に生成されたプログラムではパフォーマンス面に問題があり、特に処理の中で \u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FJq_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E)\" target=\"_blank\" rel=\"noopener noreferrer\">jq\u003C\u002Fa> の呼び出し回数が非常に多い点が気になりました。\u003C\u002Fp>\u003Cp>改善方法を指示することで、より良いプログラムにはなりましたが、\u003Cstrong>現状のまま実案件で使うのは難しそう\u003C\u002Fstrong>に感じてしまいました。\u003C\u002Fp>\u003Ch3 id=\"h69e5e36448\">事例 3：古いメモデータの移行を手伝ってもらう\u003C\u002Fh3>\u003Cp>業務とは直接関係ないものの、日常的に発生しがちな作業として、古いメモデータの移行を AI エージェントに任せてみた事例です。\u003C\u002Fp>\u003Cp>\u003Cstrong>かんたん Markdown 形式で保存していたメモデータを、Markdown ファイルとして整理・変換する作業\u003C\u002Fstrong>を行っています。変換処理はまとめて AI エージェントに指示しました。\u003C\u002Fp>\u003Cp>その結果、\u003Cstrong>全体の大部分は問題なく変換\u003C\u002Fstrong>され、実用上は十分な精度で移行できました。特に、\u003Cstrong>ファイル名の正規化(NFD から NFC への変換)についても、指示だけで対応できた点は印象的\u003C\u002Fstrong>でした。正規化の考え方自体も、この過程で把握することができています。\u003C\u002Fp>\u003Cp>しかし、\u003Cstrong>画像の埋め込み部分については正しくパースできないケース\u003C\u002Fstrong>があり、いくつかのファイルは手動での確認が必要でした。\u003C\u002Fp>\u003Ch3 id=\"h8158e69e7a\">事例 4：積読管理\u003C\u002Fh3>\u003Cp>積読本を管理するための簡単な Web アプリ。\u003Cbr>\u003Cstrong>本棚のように本が並ぶ UI\u003C\u002Fstrong> にしたい、という指示を出したところ、\u003Cstrong>レイアウトや見た目も含めて実装\u003C\u002Fstrong>されています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F85cc7f4396fd4e29b5c69939d3218942\u002F%E7%A9%8D%E8%AA%AD%E7%AE%A1%E7%90%86.png?w=1000&h=808\" alt=\"積読管理\" width=\"1000\" height=\"808\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>途中一度動かなくなってしまい、その際、AI エージェントがかなりの勢いでソースコード全体を確認し始めたため少し不安になりましたが、2 回ほど修正を重ねることで最終的には正常に動作する状態になりました。\u003C\u002Fp>\u003Ch3 id=\"hab78e183bc\">事例 5：競馬レース予想アプリ\u003C\u002Fh3>\u003Cp>競馬のレース条件を入力すると、AI が予想結果を生成するアプリです。\u003C\u002Fp>\u003Cp>レースの種類や距離、出走頭数を入力し、あわせて各馬の名前を登録したうえで「レースを登録」すると、\u003Cstrong>AI が予想\u003C\u002Fstrong>を行います。\u003Cbr>単勝・複勝といった基本的な馬券に加え、三連単や三連複など、頭数や順序によって成立条件が変わる馬券についても、\u003Cstrong>あらかじめルールを伝えたうえで結果を出す構成\u003C\u002Fstrong>になっています。\u003C\u002Fp>\u003Cp>予想を実行すると、\u003Cstrong>UI 上で馬が走る簡単なアニメーションが表示\u003C\u002Fstrong>され、その後に予想結果が表示されます。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ff43390b16e574027a75bf6ab2d8c2646\u002F%E4%BA%88%E6%83%B3%E7%94%BB%E9%9D%A2.png?w=1000&h=809\" alt=\"入力と結果画面\" width=\"1000\" height=\"809\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1a2c9e8778004d0fb0b7f57fe5995b2e\u002F%E3%83%AC%E3%83%BC%E3%82%B9%E4%B8%AD.png?w=1000&h=655\" alt=\"レース中\" width=\"1000\" height=\"655\">\u003C\u002Ffigure>\u003Ch2 id=\"h450f1919de\">オフライン会について\u003C\u002Fh2>\u003Cp>オフライン会では、\u003Cstrong>X を模倣したアプリ\u003C\u002Fstrong>を作る取り組みを行いました。\u003Cbr>やっていいのは \u003Cstrong>AI エージェントへの指示出しのみ\u003C\u002Fstrong>とし、フロントエンド・バックエンドを含むコードはすべて Claude Code に書かせる、というレギュレーションを設けています。\u003C\u002Fp>\u003Cp>参加者それぞれが自分の環境で AI エージェントに指示を出し、完成したものを持ち寄って見せ合いました。\u003Cstrong>一発の指示でどこまで書かせられるかが重要なポイントとなり、細かい修正を重ねるのは難しい\u003C\u002Fstrong>と感じる場面もありました。\u003C\u002Fp>\u003Cp>私が作ったものはこちら。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fe95d1594116a43b6b2d76a0a56c62312\u002F%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E7%94%BB%E9%9D%A2.png?w=1000&h=659\" alt=\"ログイン画面\" width=\"1000\" height=\"659\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F390ced090a264df1b98fecdaa62d38bd\u002F%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%A9%E3%82%A4%E3%83%B3.png?w=1000&h=665\" alt=\"タイムライン\" width=\"1000\" height=\"665\">\u003C\u002Ffigure>\u003Cp>\u003Cbr>ファンタジーなデザインで、と伝えたところ、この見た目になりました。\u003Cbr>投稿や削除に加えて、フォロー・アンフォロー、プロフィール編集、検索機能まで、\u003Cstrong>必要な機能は一通りちゃんと実装\u003C\u002Fstrong>されています。\u003C\u002Fp>\u003Ch2 id=\"h40eb6b6976\">AI エージェントと S2 の今後\u003C\u002Fh2>\u003Cp>今回利用していた \u003Ca href=\"https:\u002F\u002Fclaude.com\u002Fja-jp\u002Fpricing\" target=\"_blank\" rel=\"noopener noreferrer\">Clauded の Max プラン\u003C\u002Fa>については、上限まで使い切る参加者はいませんでした。\u003Cbr>今後は、\u003Cstrong>API キーを各人に発行し、使用量を把握しながら運用していく\u003C\u002Fstrong>つもりです。従量課金ではありますが、事前チャージ制のため、コスト面では比較的管理しやすいと考えています。\u003C\u002Fp>\u003Cp>また、全体向けに AI エージェント利用時の\u003Cstrong>ガイドラインを作成\u003C\u002Fstrong>し、\u003Cstrong>セキュリティや取り扱いのルールを整理\u003C\u002Fstrong>していこうと思っています。\u003C\u002Fp>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>event-ai-agent を通して、AI エージェントを実務に近い形で試すことができました。\u003C\u002Fp>\u003Cp>当初は\u003Cstrong>「まずは触ってみるきっかけを作る」ことを主な目的\u003C\u002Fstrong>としていましたが、実際に使ってみる中で、\u003Cstrong>想像以上に実用的\u003C\u002Fstrong>だと感じました。\u003Cbr>\u003Cstrong>定例や共有の場を設けたことで、「どう使っていけそうか」を継続的に話せた点も良かった\u003C\u002Fstrong>と思います。週 1 回の定例後に、Slack チャンネルでのやり取りが活発になる様子も見られました。\u003C\u002Fp>\u003Cp>ですが、できるだけセキュアに使うための環境づくりやガイドライン整備については、思っていた以上に手間がかかることもわかりました。\u003C\u002Fp>\u003Cp>\u003Cstrong>自分でコードを書かなくても、フロントエンドからバックエンドまで含めて、実際に動くものが一通りそろうのは大きな利点\u003C\u002Fstrong>だと感じています。ただし、まったく新しい仕組みを一から作るのは難しそうで、一般的によくある構成やパターンを持つものほど相性が良い、という印象もあります。\u003C\u002Fp>\u003Cp>今回の参加者は普段からプログラミングを書いている人ばかりでしたが、必ずしもそうでない人でも、日本語で指示を整理して伝えることで、さまざまなものが作れる可能性を感じました。\u003C\u002Fp>\u003Cp>今後は、社内でより多くの立場の人にも実際に使ってみてほしいと思っています。\u003C\u002Fp>","AIエージェントを社内で1か月検証した取り組み「event-ai-agent」をもとに、実際に試した事例や、使ってみて見えてきたことをまとめています。",[],{"id":145,"createdAt":146,"updatedAt":147,"publishedAt":148,"revisedAt":147,"title":149,"tag":425,"recommended_articles":429,"eyecatch":470,"heading_list":24,"summary":162,"content2":163,"description":164,"related_articles":471,"recruit":17,"is_html":17,"is_migration":17},[426,427,428],{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":14,"name":16,"top":17},{"id":26,"createdAt":27,"updatedAt":28,"publishedAt":27,"revisedAt":27,"name":29,"top":17},{"id":19,"createdAt":20,"updatedAt":21,"publishedAt":22,"revisedAt":21,"name":23,"top":24},[430,449,460],{"id":64,"createdAt":66,"updatedAt":67,"publishedAt":68,"revisedAt":67,"title":69,"tag":431,"recommended_articles":437,"eyecatch":441,"heading_list":17,"content2":91,"description":92,"related_articles":442,"recruit":17,"cta_url":104,"is_html":17,"is_migration":17},[432,433,434,435,436],{"id":72},{"id":74},{"id":76},{"id":43},{"id":79},[438,439,440],{"id":82},{"id":84},{"id":86},{"url":88,"height":89,"width":90},[443,444,445,446,447,448],{"id":84},{"id":96},{"id":86},{"id":99},{"id":101},{"id":103},{"id":84,"createdAt":297,"updatedAt":298,"publishedAt":299,"revisedAt":298,"title":300,"tag":450,"recommended_articles":454,"eyecatch":458,"heading_list":24,"content2":314,"related_articles":459,"recruit":17,"is_html":17,"is_migration":17},[451,452,453],{"id":79},{"id":72},{"id":43},[455,456,457],{"id":64},{"id":308},{"id":82},{"url":311,"height":312,"width":313},[],{"id":82,"createdAt":278,"updatedAt":279,"publishedAt":280,"revisedAt":279,"title":281,"tag":461,"recommended_articles":464,"eyecatch":468,"heading_list":24,"content2":294,"related_articles":469,"recruit":17,"is_html":17,"is_migration":17},[462,463],{"id":284},{"id":79},[465,466,467],{"id":64},{"id":84},{"id":82},{"url":291,"height":292,"width":293},[],{"url":159,"height":160,"width":161},[472,490,505],{"id":167,"createdAt":473,"updatedAt":474,"publishedAt":475,"revisedAt":474,"title":476,"tag":477,"recommended_articles":483,"eyecatch":484,"heading_list":24,"content2":488,"related_articles":489,"recruit":17,"is_html":17,"is_migration":17},"2023-12-13T05:47:42.131Z","2024-11-26T00:41:18.536Z","2023-12-27T08:08:52.930Z","Fortnite にハマってみた話",[478,479,480,481,482],{"id":19},{"id":198},{"id":13},{"id":26},{"id":366},[],{"url":485,"height":486,"width":487},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fe9ca707842d349518dcb9af85aa07734\u002Ffortnite.png",392,650,"\u003Cp>ついにヤクルト1000を手に入れました。\u003Cbr>\u003Cbr>今回は弊社の高野が\u003Cstrong>「Fortnite」\u003C\u002Fstrong>とそのクリエイティブツール\u003Cstrong>「UEFN(Unreal Editor for Fortenite)」\u003C\u002Fstrong>について話しました。\u003C\u002Fp>\u003Chr>\u003Cp>\u003Cbr>Fortniteというゲームがあります。\u003Cbr>今回は自分が Fortnite を始めてから体験した話をしたいと思います。\u003C\u002Fp>\u003Ch2 id=\"h839eb2a153\">Fortniteとは\u003C\u002Fh2>\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.fortnite.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>\u003Cu>Fortnite\u003C\u002Fu>\u003C\u002Fstrong>\u003C\u002Fa> は、Epic Games によって開発された\u003Cstrong>基本プレイ無料のオンラインゲーム\u003C\u002Fstrong>です。2017年にリリースされました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>バトルロイヤル\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ゼロビルド\u003C\u002Fstrong>\u003Cul>\u003Cli>建築要素無し\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>クリエイティブ\u003C\u002Fstrong>\u003Cul>\u003Cli>自分だけの島やゲームを制作してオンライン上で公開できる他、人が作ったゲームを遊んだりもできる\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>などの異なるゲームモードがプレイでき、中でも特に\u003Cstrong>「バトルロイヤル」モードが人気\u003C\u002Fstrong>を集めています。\u003Cbr>このモードでは、最大100人のプレイヤーが島に降り立ち、最後の一人または最後のチームが残るまで戦います。プレイヤーは武器や資源を集め、他のプレイヤーと戦いながら、\u003Cstrong>プレイエリアが縮小していくマップで生き残りを目指します。\u003C\u002Fstrong>\u003Cbr>\u003Cbr>基本的には \u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fesport-club-2\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">esports 部でやっていた Apex\u003C\u002Fa> と同じようなバトルロイヤルゲームですが、\u003Cstrong>建築要素(戦闘をしながら防壁を築いたりできる)\u003C\u002Fstrong>、さらに定期的なアップデートとイベントで知られており、幅広い年齢層のプレイヤーに受け入れられています。\u003Cbr>\u003Cbr>\u003Cstrong>結構な頻度で\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.fortnite.com\u002Fcompetitive\u002Fnews\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>公式大会が開催\u003C\u002Fstrong>\u003C\u002Fa>されているようで、調べてみると賞金の出る大会もチラホラあるみたいです。\u003C\u002Fp>\u003Ch3 id=\"hc04b44d611\">プレイ環境\u003C\u002Fh3>\u003Cp>クロスプラットフォームに対応しており、PC、コンソール、モバイルデバイスなど、多くのプラットフォームで利用可能です。\u003C\u002Fp>\u003Cul>\u003Cli>PlayStation\u003C\u002Fli>\u003Cli>Xbox\u003C\u002Fli>\u003Cli>Nintendo Switch\u003C\u002Fli>\u003Cli>Windows\u003C\u002Fli>\u003Cli>Android\u003C\u002Fli>\u003C\u002Ful>\u003Cp>ちなみに、Epic は Apple\u002FGoogle と裁判で戦っているため、iOS や Mac OS、Android では公式ストアを介してはプレイできません。詳しくは\u003Ca href=\"https:\u002F\u002Fwww.epicgames.com\u002Fsite\u002Fen-US\u002Ffree-fortnite-faq\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">こちら\u003C\u002Fa>を。\u003C\u002Fp>\u003Ch2 id=\"h7b4bbea61b\">始めてみた\u003C\u002Fh2>\u003Ch3 id=\"hd92040d0df\">きっかけ\u003C\u002Fh3>\u003Cp>子供がやりたいと言うので、Switch にインストールしてアカウントを作ってあげたのが最初です(アカウントを作る時、子供用のアカウントで作成するとペアレンタルコントロールの設定があるので安心)。\u003Cbr>\u003Cbr>始めは子供が友達とボイチャしながらプレイしているのを「難しそうだなー」と思いながら眺めている程度だったのですが、\u003Cstrong>「PC でもできるから一緒にやろう」と誘われたのをきっかけ\u003C\u002Fstrong>に始めてみることにしました。\u003C\u002Fp>\u003Ch3 id=\"h209c41eb37\">ハマり始める\u003C\u002Fh3>\u003Cp>\u003Cstrong>最初はとりあえずスマホで\u003C\u002Fstrong>やってみることに。\u003Cbr>動作がかなりカクカクするのですが、その分エイムアシストが強めに設定されているらしく、適当に撃っていてもそこそこ他のプレイヤーを倒せます。\u003Cbr>\u003Cbr>続けているうちに楽しくなってきて、もっと大きな画面でサクサクやりたいと思うようになりました。\u003Cbr>ということでPCへ移行します。\u003Cbr>\u003Cbr>ちなみに、\u003Cstrong>同じ屋根の下にいながら子供はリビングのテレビで、私は仕事部屋のPCを使ってLINEで通話しながらやっています。\u003C\u002Fstrong>\u003Cbr>\u003Cbr>ハマったとは言いつつ、基本的には週末子供とやる程度です。 \u003Cbr>なのでたいして上達もせず。子供に怒られたりしながらプレイしています。\u003C\u002Fp>\u003Ch3 id=\"hb9e70ff600\">親子大会\u003C\u002Fh3>\u003Cp>そして今年の夏、\u003Ca href=\"https:\u002F\u002Fwww.oyakoduo.jp\u002Ftm2023\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>東京メトロ主催の親子大会\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>に出場\u003C\u002Fstrong>しました。\u003Cbr>\u003Cbr>\u003Cstrong>名だたる企業が協賛\u003C\u002Fstrong>しており、\u003Cstrong>入賞すると賞品\u003C\u002Fstrong>がもらえる他、\u003Cstrong>YouTube で中継\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\u002FW-YGlFyLN5Y\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"encrypted-media;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch2 id=\"h9286a878ec\">島クリエイト\u003C\u002Fh2>\u003Cp>初めに少し触れましたが、\u003Cstrong>クリエイティブモードでは独自にフォートナイトの世界(島)を作る\u003C\u002Fstrong>ことができます。\u003Cbr>\u003Cstrong>多少のプログラミング要素\u003C\u002Fstrong>もあり、さらにゲームルールなども設定できるため、\u003Cstrong>ゲーム内にゲームを作るような使い方\u003C\u002Fstrong>もされています。\u003Cbr>\u003Cbr> 子供はどうぶつの森や Minecraft の延長で家を作っていたりしますが、世の中のクリエイターはホラーゲームやパズルゲームのようなものまで色々なものを作っています。\u003C\u002Fp>\u003Cp>ゲーム中の島クリエイトで実際に作れるのかどうかはわかりませんが、公式でも様々なタイプの島が作成されており、例えば\u003Cstrong>「星野源のライブ映像を見る島」\u003C\u002Fstrong>や\u003Cstrong>「\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.fortnite.com\u002F@3dlab\u002F7374-8187-1871?lang=ja\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>実写版ワンピースとコラボした島\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>」\u003C\u002Fstrong>といった島が作られています。\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FvHBPscTsLGE?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>\u003Cstrong>ここまでが前置き\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Ch2 id=\"h64a8bd78b0\">メタバース\u003C\u002Fh2>\u003Cp>実は、\u003Cstrong>大昔からメタバースに憧れがありました。\u003C\u002Fstrong> \u003Cbr>いつかは自分もメタバースの開発に携わりたいと思いながら、調べたり何かを作ってみようとしていたのですが、いまいちピンとくるものがなく…。\u003C\u002Fp>\u003Cul>\u003Cli>セカンドライフは体験する前に廃れていくのを横目に見ていた\u003C\u002Fli>\u003Cli>VRChat は VR ゴーグルがハードル高い\u003C\u002Fli>\u003Cli>Minecraft はメタバースという感覚が薄い\u003C\u002Fli>\u003Cli>Roblox は作り方がよくわからないし、世界観があまり好みではない\u003C\u002Fli>\u003Cli>Horizon Worlds(meta) も VR ゴーグルがハードル高い\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Fortnite も良い感じだなーとは思ったものの、島クリエイトをゲーム中で行うのがすごく大変そうだったので、作ってみたいという気持ちにはなれず。\u003Cbr>\u003Cbr>しかし\u003Cstrong>そんな時に登場したのが Unreal Editor for Fortenite (UEFN)\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Ch3 id=\"h49fb55c56c\">UEFN とは\u003C\u002Fh3>\u003Cp>\u003Cstrong>EPIC が開発している \u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.unrealengine.com\u002Fja\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Unreal Engine(UE)\u003C\u002Fstrong>\u003C\u002Fa> というゲームエンジンおよび IDE がありますが、\u003Cstrong>それを Fortnite の島を作るためにアレンジしたもの\u003C\u002Fstrong>というふうに私は理解しています。 \u003Ca href=\"https:\u002F\u002Fdev.epicgames.com\u002Fdocumentation\u002Fja-jp\u002Fuefn\u002Funreal-editor-for-fortnite-vs-unreal-engine\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">UE との違いの詳細はこちら\u003C\u002Fa>。\u003Cbr>\u003Cbr>「\u003Cstrong>プログラミングでゲームを作れる環境なら自分にも何か作れるんじゃないか\u003C\u002Fstrong>」と考えたわけです。\u003Cbr>\u003Cbr>魅力に感じたポイントは以下。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Verse という言語でプログラミングが可能\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>オリジナルのアセットを読み込むことが可能\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>マルチプラットフォームに提供できる\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>簡単にマルチプレイゲームが作れるし、ホスティングも考えないで良い\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fcreate.fortnite.com\u002Fisland-creator\u002Foverview\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>収益化もできる\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>提供開始からもう9ヶ月経っている(2023年12月末時点)ので新しいわけではありませんが、まだ遅いということは無いはず？です。\u003Ca href=\"https:\u002F\u002Fprtimes.jp\u002Fmain\u002Fhtml\u002Frd\u002Fp\u002F000000058.000106964.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">参入を表明している企業\u003C\u002Fa>もチラホラいます。\u003Cbr>\u003Cbr>\u003Cstrong>でもゲーム専門の会社じゃないと何もできなくない？\u003C\u002Fstrong>\u003Cbr>\u003Cbr>と皆様思われるかもしれません。ところが\u003Cstrong>アイデアと技術でバズっている\u003C\u002Fstrong>人たちはいます\u003Cstrong>。\u003C\u002Fstrong>\u003C\u002Fp>\u003Cblockquote class=\"twitter-tweet\" data-dnt=\"true\" align=\"center\">\u003Cp lang=\"ja\" dir=\"ltr\">衛星データからAIに生成させたバーチャル新宿を、フォートナイト向けに調整して遊べるようにしました✨\u003Cbr>\u003Cbr>🏝️コード：2559-7059-6968\u003Cbr>\u003Cbr>デモなので建築・バトル・ドライブを楽しんでください（グラフィック設定は最大を推奨）\u003Cbr>\u003Cbr>バーチャル新宿マップ \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fhashtag\u002FUEFN?src=hash&ref_src=twsrc%5Etfw\">#UEFN\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fhashtag\u002FFortnite?src=hash&ref_src=twsrc%5Etfw\">#Fortnite\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Ft.co\u002FRydzfl8qoa\">https:\u002F\u002Ft.co\u002FRydzfl8qoa\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Ft.co\u002FOfkjcmFimg\">pic.twitter.com\u002FOfkjcmFimg\u003C\u002Fa>\u003C\u002Fp>— 佐藤航陽（さとうかつあき） (@ka2aki86) \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fka2aki86\u002Fstatus\u002F1691659363075899674?ref_src=twsrc%5Etfw\">August 16, 2023\u003C\u002Fa>\u003C\u002Fblockquote>\n\u003Cscript async src=\"https:\u002F\u002Fplatform.twitter.com\u002Fwidgets.js\" charset=\"utf-8\">\u003C\u002Fscript>\n\n\u003Ch3 id=\"hab5a83591c\">触ってみた\u003C\u002Fh3>\u003Cp>アセットが大量にある上サイズが大きい(おそらくこれまで Fortnite で使われたことがあるものが全部入っている？)ので、動かすにはそれなりのマシンで動かしてみてください。ちなみに\u003Cstrong>デバッグは Fortnite 上で実行される\u003C\u002Fstrong>ため、Fortnite もインストールしておく必要があります。\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\u002FoAMC6G373Xo?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>もちろん \u003Cstrong>UEFN 上で verse のファイルを作成しそこに直接コードを書いて仕掛けや動作を作ることもできます。\u003C\u002Fstrong>\u003Cbr>\u003Ca href=\"https:\u002F\u002Fdev.epicgames.com\u002Fdocumentation\u002Fja-jp\u002Fuefn\u002Funreal-editor-for-fortnite-documentation\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">公式のドキュメント\u003C\u002Fa>があるので、詳しくはそちらをご覧ください。\u003Cbr>\u003Cbr>アップロードもしてみました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F308c31f66e5e42d580cdca0535915722\u002Ffortnite.png?w=650&h=567\" alt=\"Fortniteプロジェクト\" width=\"650\" height=\"567\">\u003C\u002Ffigure>\u003Cp>これで実際に起動させながら\u003Cstrong>メモリチェック\u003C\u002Fstrong>というのを実施しないといけません。\u003Cbr>\u003Cstrong>全てのデバイスで動くことが保証されると公開\u003C\u002Fstrong>できます。\u003Cbr>\u003Cbr>ということでメモリチェックも無事済んだので公開してみようとしたところ、この時点でまだ UEFN を触り始めて 7 日経過していなかったので公開できませんでした。。\u003C\u002Fp>\u003Cblockquote>\u003Cp>作成から30日以上が経過し、過去30日のうち7日以上は、フォートナイト クリエイティブ、Unreal Editor for Fortnite(UEFN)、および\u002FまたはUnreal Engineでの島の作成にあてた日を含んでいること。\u003Cbr>または、過去90日のうちにフォートナイトのゲーム内製品に対して75ドル(米ドル価格に基づく)以上を消費・引き換えていること。この条件にギフトカードは適用されません。\u003Cbr>　\u003Cbr>\u003Ca href=\"https:\u002F\u002Fcreate.fortnite.com\u002Fisland-creator\u002Foverview\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">島クリエイタープログラム\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fblockquote>\u003Ch2 id=\"ha214098e44\">まとめ\u003C\u002Fh2>\u003Cp>Fortnite は楽しいし、\u003Cstrong>メタバースとしての可能性\u003C\u002Fstrong>を感じています。\u003Cbr>今のところ個人でゲームを作る気力まではありませんが、\u003Cstrong>仕事で関わってみたい！\u003C\u002Fstrong>とは強く思っています。\u003Cbr>\u003Cbr>ということで\u003Cstrong>プロモーションも兼ねまして、手始めに S2 島を作って公開しようと画策中\u003C\u002Fstrong>です。\u003Cbr>発表時点ではまだ外部通信ができないようでしたが、いつかできるようになった暁には\u003Cstrong>いよいよ弊社の出番\u003C\u002Fstrong>だと思いますので、その日を待ちつつ\u003Cstrong>面白いアイデアを皆様と一緒に実現\u003C\u002Fstrong>できればと願っております。\u003Cstrong>その時は、\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fcontact\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>ぜひ弊社までご依頼・ご相談ください。\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>",[],{"id":169,"createdAt":491,"updatedAt":492,"publishedAt":492,"revisedAt":492,"title":493,"tag":494,"recommended_articles":499,"eyecatch":500,"heading_list":24,"content2":503,"related_articles":504,"recruit":24,"is_html":17,"is_migration":17},"2023-11-26T04:27:55.579Z","2023-12-05T07:37:08.731Z","esports 部活動報告③ 〜Fortnite 企業対抗戦出場〜",[495,496,497,498],{"id":202},{"id":198},{"id":13},{"id":79},[],{"url":501,"height":502,"width":487},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fa2491225cb34407b96d2143d015d173e\u002Fepic.png",366,"\u003Cp>クリスマスのイルミネーションが華やかに街を彩る季節となりました。\u003Cbr>何かと気忙しい時期かと存じますが、体調を崩さぬよう、どうぞご自愛ください。\u003Cbr>\u003Cbr>\u003Cbr>さて、不定期に行われてる\u003Cstrong> esports 部活動報告第 3 回\u003C\u002Fstrong>です(\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fesport-club-2\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">第 1 回\u003C\u002Fa>と\u003Ca href=\"https:\u002F\u002Fwww.s2factory.co.jp\u002Fblog\u002Fesports-club-3\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">第 2 回\u003C\u002Fa>)。\u003Cbr>\u003Cbr>今回は近況に加え、\u003Cstrong>11月25日に行われた \u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fgents-esports.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>gents\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> 様主催の Fortnite 企業対抗戦に出場\u003C\u002Fstrong>した結果の報告を行いたいと思います。\u003C\u002Fp>\u003Ch2 id=\"h54369cf3c0\">活動状況\u003C\u002Fh2>\u003Cp>弊社の esports 部は長らく 3 人で細々と活動していたのですが、\u003Cstrong>メンバーがどんどん増えて\u003C\u002Fstrong>、今では\u003Cstrong>レギュラー・準レギュラー合わせて 8 人前後が活動\u003C\u002Fstrong>しています。\u003Cbr>\u003Cbr>これもひとえに\u003Cstrong>スプラトゥーンのおかげ\u003C\u002Fstrong>です。\u003Cbr>\u003Cstrong>ついに社内で 4 対 4 に分かれて練習試合が行えるように\u003C\u002Fstrong>なりました。\u003Cbr>\u003Cbr>この前、出場した\u003Ca href=\"https:\u002F\u002Fwww.nintendo.com\u002Fjp\u002Fsplatoon\u002Fkoshien2023\u002Findex.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">スプラトゥーン甲子園\u003C\u002Fa>の予選は残念な結果に終わってしまいましたが、今後も積極的にイベントがあれば挑戦していこうと思っております。\u003Cbr>\u003Cbr>そして \u003Cstrong>S2 キャラの esports 部イラストも完成！\u003C\u002Fstrong>\u003Cbr>(他の部活のイラストもあるので、どこかの機会で紹介するつもりです。)\u003Cbr>\u003Cbr>いずれは\u003Cstrong>チームの公式Tシャツ\u003C\u002Fstrong>などを作ってイベントに出られればと考えています。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F1ebe852cdf8742d0b29ed974a660cd3c\u002FBukatsu_e3.png?w=650&h=619\" alt=\"esports部イラスト\" width=\"650\" height=\"619\">\u003C\u002Ffigure>\u003Ch2 id=\"hf867fdb983\">企業対抗戦\u003C\u002Fh2>\u003Cp>というわけで、最近はもっぱらスプラトゥーンしかやっていないのですが、\u003Cstrong>今回 \u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fgents-esports.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>gents\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> 様から Fortnite の企業対抗戦を行うということでお誘いいただきまして\u003C\u002Fstrong>、急遽部内で \u003Cstrong>Fortnite チームを結成\u003C\u002Fstrong>。\u003Cbr>\u003Cbr>幸いイベントまで一ヶ月程度期間があったので、初心者揃いではありますが\u003Cstrong>「なんとか少しでも勝負になるように」\u003C\u002Fstrong>と普段の部活動の時間や休日に集まって練習に励みました。\u003C\u002Fp>\u003Ch3 id=\"hd47831851c\">Fortnite とは\u003C\u002Fh3>\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.fortnite.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Fortnite\u003C\u002Fstrong>\u003C\u002Fa> は、Epic Games によって開発された\u003Cstrong>基本プレイ無料のオンラインゲーム\u003C\u002Fstrong>です。2017年にリリースされました。\u003Cbr>3 つの異なるゲームモードがプレイでき、その中でも特に「バトルロイヤル」モードが人気を集めています。\u003Cbr>このモードでは、最大100人のプレイヤーが島に降り立ち、最後の一人または最後のチームが残るまで戦います。プレイヤーは武器や資源を集め、他のプレイヤーと戦いながら、\u003Cstrong>プレイエリアが縮小していくマップで生き残りを目指します。\u003C\u002Fstrong>\u003Cbr>\u003Cbr>フォートナイトはそのカラフルなグラフィック、\u003Cstrong>独特な建築要素(プレイヤーが構造物を建築できる)\u003C\u002Fstrong>、さらに定期的なアップデートとイベントで知られており、幅広い年齢層のプレイヤーに受け入れられています。\u003Cbr>クロスプラットフォームプレイが可能で、PC、コンソール、モバイルデバイスなど、多くのプラットフォームで利用できます。\u003C\u002Fp>\u003Ch3 id=\"hf16cd7877e\">対抗戦のルール\u003C\u002Fh3>\u003Cp>ルールは下の通り。\u003C\u002Fp>\u003Cul>\u003Cli>モード：バトルロイヤル\u003C\u002Fli>\u003Cli>試合形式：通常の建築有りが 2 戦と建築無しのゼロビルドが 2 戦\u003Cul>\u003Cli>\u003Cstrong>計 4 戦の順位が高かったチームが優勝\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>人数：デュオ(2人チーム)\u003Cul>\u003Cli>チームメンバーは2~4人登録できて、試合ごとに自由にメンバーを変更可能\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>弊社からは 3 人が出場、試合ごとにメンバーを入れ替える形で参加しました。\u003C\u002Fp>\u003Ch3 id=\"h784d1bfa6d\">試合当日\u003C\u002Fh3>\u003Cp>当日は17時スタートだったので、その前に集まってウォーミングアップをしつつ、例のごとく社内配信のためのセットアップを行っていました。\u003Cbr>\u003Cbr>\u003Cstrong>公式の YouTube 配信\u003C\u002Fstrong>もありまして、\u003Cstrong>参加企業の紹介や試合の実況などがリアルタイムで\u003C\u002Fstrong>行われていました。\u003Cbr>アーカイブが残っているようなので、良かったらご覧になってみてください。\u003Cbr>\u003Cbr>サプリメントの製造を行っている企業や芸能プロダクション、はたまた市役所のesportsチームなど、多種多様な企業が参加していて面白い大会でした。\u003Cbr>どの企業のチームも強かったのですが、世界大会で成績を残しているプレイヤーのチームなどもあって、\u003Cstrong>思っていたよりもレベルが全然高かった\u003C\u002Fstrong>です。\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\u002FIJHgMvhQ5jQ\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"encrypted-media;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Ch3 id=\"hb52624300b\">試合結果\u003C\u002Fh3>\u003Cp>今回の対抗戦は、キル数はポイントにならないので\u003Cstrong>長く生き残ることが重要\u003C\u002Fstrong>でした。\u003Cbr>なので\u003Cstrong>「戦闘は避けつつ、いのちだいじに」が作戦\u003C\u002Fstrong>ではあったのですが、1 戦目は秒殺。2 戦目こそ少しは健闘したものの、3 戦目、4 戦目も振るわず。\u003Cbr>\u003Cbr>結果としましては、\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>1戦目：17位\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>2戦目：9位\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>3戦目：15位\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>4戦目：15位\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>の芳しくない結果に終わってしまいました。。。\u003Cbr>\u003Cstrong>言い訳をしますと、やはり付け焼き刃ではいけませんね。\u003C\u002Fstrong>\u003Cbr>\u003Cbr>どのチームもすごく強くて圧倒されっぱなしの 3 時間でした。\u003Cbr>とはいえこういうイベントに出るのはとても刺激になりますし、ワクワクします。楽しい時間でした。\u003Cstrong>\u003Cbr>次回もあればぜひ参加したい\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Ch2 id=\"h197f9f6541\">今後の話\u003C\u002Fh2>\u003Cp>\u003Cstrong>今後も機会があれば積極的にいろんなイベントに参加していきたい\u003C\u002Fstrong>と思っています。\u003Cbr>また、メンバーも増えたので他のゲームに挑戦してみるのもいいのかなと考えたり。班を分けてみるのもいいですし。\u003Cbr>\u003Cbr>そして今回イラストの紹介をしましたが、いずれは\u003Cstrong>チームの公式Tシャツなどのグッズも作って展開\u003C\u002Fstrong>できればと考えております。\u003Cbr>ますます活発に活動して、活動報告も続けて行っていくつもりなので、たまにはブログを覗いてみてください。\u003Cbr>そして\u003Cstrong>交流戦などあれば是非お誘いください。\u003C\u002Fstrong>\u003Cbr>\u003C\u002Fp>",[],{"id":171,"createdAt":506,"updatedAt":507,"publishedAt":508,"revisedAt":507,"title":509,"tag":510,"recommended_articles":515,"eyecatch":516,"heading_list":24,"content2":520,"related_articles":521,"recruit":17,"is_html":17,"is_migration":24,"migration_date":522},"2023-06-02T08:50:19.556Z","2024-08-09T18:46:02.249Z","2023-06-16T04:36:42.113Z","ブレイキンの文化と歴史",[511,512,514],{"id":26},{"id":513},"sports",{"id":19},[],{"url":517,"height":518,"width":519},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F88c8b4be8ece4fe8959a5e5823991b39\u002Fmichael-afonso-z8Tul255kGg-unsplash-1536x1025.jpg",1025,1536,"\u003Cp>日清から出たオーベルジーヌのカレーメシがとても美味しかったので、カレーメシでこんなに美味しいんなら本物のオーベルジーヌ食べたらどうなっちゃうんだ？？と思って出前したのですが、個人的にはカレーメシの方が好きでした。\u003Cbr>\u003Cbr>今回は弊社の森崎が\u003Cstrong>「ブレイキン」\u003C\u002Fstrong>について話しました。\u003C\u002Fp>\u003Chr>\u003Cp>\u003Cbr>最近見るのにハマっている「ブレイキン」について紹介したいと思います。\u003C\u002Fp>\u003Ch2 id=\"h779eada046\">ブレイキンとは\u003C\u002Fh2>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F6de47d893ee440028bf913a9fb6693f0\u002Filja-tulit-ucAMMD36Si0-unsplash.jpg\" alt=\"ダンス\" width=\"640\" height=\"427\">\u003C\u002Ffigure>\u003Cp>ブレイキンとは、\u003Cstrong>音楽に乗せて身体のあらゆる部分を使って、回ったり、跳ねたりとアクロバティックな動きを取り入れたダンス\u003C\u002Fstrong>です。\u003Cbr>\u003Cstrong>1970年代にニューヨークのサウスブロンクス地区のアフリカ系アメリカ人やラテンアメリカ人の若者たちによって発展したストリートダンスのスタイル\u003C\u002Fstrong>だと言われています(諸説あります)。\u003Cbr>\u003Cbr>当時のサウスブロンクスには貧困層の人々が数多く暮らしており、様々な犯罪が横行していました。生き延びるためには自分もギャングになるしかない、荒れた地域だったそうです。そしてギャング間の抗争によって多くの若者が命を落としていました。\u003Cbr>\u003Cbr>そんな状況を嘆いた\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%82%A2%E3%83%95%E3%83%AA%E3%82%AB%E3%83%BB%E3%83%90%E3%83%B3%E3%83%90%E3%83%BC%E3%82%BF\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>アフリカ・バンバータ\u003C\u002Fstrong>\u003C\u002Fa>は、サウスブロンクスの秩序を保つために自らギャング団を設立し、\u003Cstrong>治安向上を目指します。\u003C\u002Fstrong>\u003Cbr>彼は抗争をまとめるために、\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%83%92%E3%83%83%E3%83%97%E3%83%9B%E3%83%83%E3%83%97\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>ヒップホップ\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>の四大要素\u003C\u002Fstrong>となった\u003Cstrong>ラップ・DJ・ブレイキン・グラフィティ\u003C\u002Fstrong>などのストリートバトルで競い合うように取り組みを行いました。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>ヒップホップの四大要素\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>DJ : 音楽\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>B-Boying : ダンス\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>Graffity : グラフィックアート\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>MC : ラップ\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cbr>ブレイキンという名前から、「壊す」という意味の「Break」と誤解されることがありますが、実際は曲と曲の合間、\u003Cstrong>「間奏」\u003C\u002Fstrong>のことを指すそうです(諸説あります)。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch3 id=\"h12aef90bc6\">誕生の経緯と発案者\u003C\u002Fh3>\u003Cp>1970年代のニューヨークでは、\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%83%91%E3%83%BC%E3%83%86%E3%82%A3\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>ブロックパーティー\u003C\u002Fstrong>\u003C\u002Fa>という道端で音楽をかけて踊ったりする祭りが日常的に行われていました。\u003Cbr>\u003Cbr>ブロックパーティーの最中、 ヒップホップ界のゴッドファーザーとも呼ばれるジャマイカ出身の DJ \u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%82%AF%E3%83%BC%E3%83%AB%E3%83%BB%E3%83%8F%E3%83%BC%E3%82%AF\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>クール・ハーク\u003C\u002Fstrong>\u003C\u002Fa>は、DJ 中に\u003Cstrong>歌のパートよりも間奏の時に踊りが激しくなったり盛り上がっている\u003C\u002Fstrong>ことに気付きます。\u003Cbr>そこで彼は、それまで一つのターンテーブルで曲をかけていたのを、二台のターンテーブルを使って\u003Cstrong>曲の間奏だけを次々と流し、ダンスする時間を引き伸ばしました\u003C\u002Fstrong>。そうして生まれたのがブレイキンです。\u003Cbr>\u003Cbr>そのように\u003Cstrong>間奏ばかりを流す音楽を\u003C\u002Fstrong> \u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%83%96%E3%83%AC%E3%82%A4%E3%82%AF%E3%83%93%E3%83%BC%E3%83%84\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Break Beats\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>、Break Beats で踊るダンスはブレイキン、踊る人を \u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FB%E3%83%9C%E3%83%BC%E3%82%A4\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Break Boy(B-Boy)\u003C\u002Fstrong>\u003C\u002Fa>、または\u003Cstrong> Break Girl(B-Girl)\u003C\u002Fstrong>と言います。\u003Cbr>ブレイクダンスという名前で知られていますが、\u003Cstrong>正式名称はブレイキン(Breakin’, Breaking)\u003C\u002Fstrong>で、\u003Cstrong>ブレイクダンスはメディアが誤って広めた呼び方\u003C\u002Fstrong>だそうです。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>HipHop 黎明期の三大 DJ\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%82%AF%E3%83%BC%E3%83%AB%E3%83%BB%E3%83%8F%E3%83%BC%E3%82%AF\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>クールハーク\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> → ブレイクビーツを発明\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%82%B0%E3%83%A9%E3%83%B3%E3%83%89%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%BB%E3%83%95%E3%83%A9%E3%83%83%E3%82%B7%E3%83%A5\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>グランドマスター・フラッシュ\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> → スクラッチを始めとするテクニックの普及\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%82%A2%E3%83%95%E3%83%AA%E3%82%AB%E3%83%BB%E3%83%90%E3%83%B3%E3%83%90%E3%83%BC%E3%82%BF\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>アフリカ・バンバータ\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>→ HipHop の名付け親\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"hc694cf1c18\">ダンススタイル\u003C\u002Fh2>\u003Cp>ブレイキンには\u003Cstrong>起承転結の流れ\u003C\u002Fstrong>があり、次のような順番でダンスが展開されていきます。\u003C\u002Fp>\u003Ch3 id=\"ha08a88466e\">(起)トップロック\u003C\u002Fh3>\u003Cp>\u003Cstrong>フロア(床)へ入る前に立って踊るダンス\u003C\u002Fstrong>です。\u003Cbr>ほとんどのラウンドでトップロックからムーブ(演技)が始まり、別のスタイルへと派生していきます。\u003Cbr>\u003Cbr>\u003Cstrong>ブレイキンでは、一つのラウンドの中で 2 〜 3 ムーブを交互に踊っていく\u003C\u002Fstrong>のですが、曲がかかり始めたらまずどちらが先に踊るのかといった駆け引きがあり、最初にトップロックを始めた方から踊りに入っていくという流れになります。\u003Cbr>\u003Cbr>\u003Cstrong>それぞれの動きには意味や解釈を保有しているものもあり、組み合わせることで表現やアピールとなる\u003C\u002Fstrong>そうです。\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\u002FCKXmpqk0I-Y?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>\u003Ch3 id=\"h2d0fa3986d\">(承)フットワーク\u003C\u002Fh3>\u003Cp>トップロックから派生するのがフットワーク。\u003Cbr>\u003Cstrong>しゃがんだ状態で地面に手をつき、素早く動く足さばきやステップ\u003C\u002Fstrong>などのことを指します。\u003Cbr>\u003Cbr>フットワークにはいくつかのパターンがあり、ステップのパターンの組み合わせや変形を加えることでオリジナリティを出します。\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FpgF0wD7yOCE?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>\u003C\u002Fp>\u003Ch3 id=\"h2e3a346b0c\">(転)パワームーブ\u003C\u002Fh3>\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\u002FBnIhD8HzkRU?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>\u003C\u002Fp>\u003Ch3 id=\"haaacfe0aea\">(結)フリーズ\u003C\u002Fh3>\u003Cp>トップロック、フットワーク、パワームーブなどの一連の流れから、\u003Cstrong>音に合わせて身体や動きを固めて止めることをフリーズ\u003C\u002Fstrong>と言います。\u003Cbr>これが\u003Cstrong>ダンスのキメの部分\u003C\u002Fstrong>です。ダンスの最後というだけあってここが一番盛り上がるところでしょうか。\u003Cbr>\u003Cbr>この動きには、バランス・パワー・柔軟性が必要で、止まる際の身体の形や止まり方で個性を表すそうです。\u003Cbr>\u003Cstrong>椅子に座っているように見える「チェア・フリーズ」が有名\u003C\u002Fstrong>で、低い位置や高い位置で止まるなど、色々な種類があります。\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FGOCt2920we8?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003Cp>\u003Cbr>技の種類もたくさんあって、それぞれ見ているだけでも面白いです。\u003Cbr>\u003Cbr>参考：\u003Ca href=\"https:\u002F\u002Fdews365.com\u002Farchives\u002F144664.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">ブレイクダンスの技一覧！全58種類を難易度別に解説！\u003C\u002Fa>\u003Cbr>\u003C\u002Fp>\u003Ch2 id=\"hff3082eaca\">バトル文化\u003C\u002Fh2>\u003Cp>ブレイキンは、ギャングの抗争を喧嘩や暴力ではなくダンスで決着をつけようと若者に働きかけたところから始まりました。\u003Cbr>そのため\u003Cstrong>他のストリートダンスとは違い、ショーとして魅せるよりも、バトルで戦うという文化が形成\u003C\u002Fstrong>されていきます。先ほど紹介したダンススタイルにもその文化が色濃く表れています。\u003C\u002Fp>\u003Col>\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\u002Fol>\u003Cp>ダンスを通して\u003Cstrong>相手よりもいかにオーディエンスを沸かすことができるか\u003C\u002Fstrong>、それで\u003Cstrong>勝敗を決めていました。\u003C\u002Fstrong>\u003Cbr>これが現代のダンスバトルにも受け継がれています。\u003Cbr>\u003C\u002Fp>\u003Ch3 id=\"hbfab4e43a8\">ダンスバトル\u003C\u002Fh3>\u003Cp>\u003Cstrong>1ON1 やチーム戦など様々なバトル形態\u003C\u002Fstrong>がありますが、\u003Cstrong>基本的には一人、一対一で踊ります\u003C\u002Fstrong>。チームバトルになると、ルーティンと言って全員で練習した技を出すことも。\u003Cbr>\u003Cstrong>一つのバトルで 2 〜 3 ムーブを披露する\u003C\u002Fstrong>のが一般的です(3 回交互に踊る)。\u003Cbr>\u003Cbr>DJが即興で音楽をかけて、それに合わせてダンサーも即興で踊ります。\u003Cstrong>ジャッジが 3 人 or 5 人\u003C\u002Fstrong>いて、\u003Cstrong>それぞれが心に響いた方に手を上げて勝敗を決めます。\u003C\u002Fstrong>\u003Cbr>\u003Cbr>しかし、それだと公平性に疑問が生じることがあり、過去には\u003Cstrong>疑惑付きのジャッジ\u003C\u002Fstrong>もあったそうです。\u003Cbr>そのため近年では\u003Cstrong>明確な採点基準が導入\u003C\u002Fstrong>されるようになり、クリアなジャッジが広がっています。\u003Cbr>\u003Cbr>\u003Cstrong>世界一のダンスバトル「\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.redbull.com\u002Fint-en\u002Fevents\u002Fred-bull-bc-one-world-final-paris\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>RedBull BC One\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>」\u003C\u002Fstrong>では下記の \u003Ca href=\"https:\u002F\u002Fwww.redbull.com\u002Fjp-ja\u002Fjudges-criteria-breaking-competitions\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>8 つの採点基準\u003C\u002Fstrong>\u003C\u002Fa>が設けられています。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>音楽性\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>基礎\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ムーブの難易度\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>キャラクター \u002F 個性\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>スタイル\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>精度\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>オリジナリティ \u002F 創造性\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ラウンドの構成\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>即興なので、同じ型をずっと練習してそれを披露するというわけにはいきません。\u003Cbr>ダンステクニックはもちろん、音楽の知識、会場の雰囲気などを汲み取って自分を表現しなければならず、高度なテクニックが要求されます。\u003Cbr>\u003Cbr>個人的に一番盛り上がると思っているのは\u003Cstrong>「音ハメ」\u003C\u002Fstrong>と呼ばれる、\u003Cstrong>ビートに合わせて動きをはめ込んでいく\u003C\u002Fstrong>テクニックです。\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FhgTGGzsa_ew?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>\u003C\u002Fp>\u003Ch2 id=\"h37183b8ab7\">スポーツへ\u003C\u002Fh2>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F039c3355b7494589816ff466d1b26e6f\u002Fblue-g9da288a69_640.jpg\" alt=\"五輪\" width=\"640\" height=\"452\">\u003C\u002Ffigure>\u003Cp>ブレイキンは近年とても盛り上がりを見せており、\u003Cstrong>2018年に開催されたブエノスアイレスユースオリンピックで初めて競技として採用\u003C\u002Fstrong>された他、\u003Cstrong>2024年のパリオリンピックでも正式種目として採用が決定\u003C\u002Fstrong>しています。\u003Cbr>\u003C\u002Fp>\u003Ch3 id=\"ha5c0ce23d9\">パリオリンピック(2024年)\u003C\u002Fh3>\u003Cp>パリオリンピックで採用された理由としては、\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>開催国であるフランスで人気\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>オリンピックへの関心が薄い、若い世代を呼び込むため\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>世界各地でダンス大会が開催されており、数あるダンスの中でも知名度と人気がある\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>競技人口が世界で 1 億人以上(サッカー：2 億 5000 万人、野球：3500 万人)\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>2018年のブエノスアイレスユースオリンピックの正式な競技種目として採用され、観客の集客実績が評価\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>平和を目指すHIPHOP精神と、国の経済力は関係なくできる競技であることから、オリンピックの精神に沿っている\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>というようなことが言われています。\u003Cbr>\u003C\u002Fp>\u003Ch3 id=\"hd6e910010f\">ブエノスアイレスユースオリンピック(2018年)\u003C\u002Fh3>\u003Cp>2018年のブエノスアイレスユースオリンピックでは、\u003Cstrong>B-Boys(男子個人戦)、B-Girls(女子個人戦)、Breaking Mixed Team(男女 2 人のミックスチーム)の 3 種目\u003C\u002Fstrong>が競われました。\u003Cbr>\u003Cbr>この大会で、\u003Ca href=\"https:\u002F\u002Fbboyshigekix.com\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>\u003Cem>Shigekix\u003C\u002Fem>\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>(半井重幸)さん が B-Boys 個人で銅メダル\u003C\u002Fstrong>、 \u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E6%B2%B3%E5%90%88%E6%9D%A5%E5%A4%A2\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>\u003Cem>Ram\u003C\u002Fem>\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>(河合来夢)さんが、B-Girls 個人とミックスで金メダルを獲得\u003C\u002Fstrong>しています。\u003Cbr>\u003Cbr>というように\u003Cstrong>日本は強豪国\u003C\u002Fstrong>の一つで、他にはアメリカ・韓国・フランス・ロシアなどが強いと言われています。\u003Cbr>\u003C\u002Fp>\u003Ch3 id=\"hc86826a721\">従来のオリンピック競技との大きな違い\u003C\u002Fh3>\u003Cp>オリンピックで競われるスポーツとなったブレイキンですが、その特性上、やはり他の競技と比べ大きな違いがいくつかあります。下にまとめてみました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>即興性\u003C\u002Fstrong>\u003Cul>\u003Cli>ブレイキンのダンスバトルは\u003Cstrong>DJが会場の雰囲気や流行の音楽を選び即興でプレイ\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>振りを用意したりすることは難しく、その場で即興で踊らなくてはいけない\u003C\u002Fstrong>\u003Cul>\u003Cli>ある程度パターン(セット)は持っているらしく、即興でどのパターンを出すかを決めている？\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>技が凄くても勝てない\u003C\u002Fstrong>\u003Cul>\u003Cli>スケボーやハーフパイプなどのストリート系のスポーツがオリンピック競技に次々と選出され盛り上がりを見せているが、それらは基本的に技の難易度を競っている\u003C\u002Fli>\u003Cli>\u003Cstrong>ダンスバトルで最も重要視されているのが、技の難易度ではなく音楽との調和\u003C\u002Fstrong>\u003Cul>\u003Cli>元々ダンスは音楽あってのパフォーマンスなので、\u003Cstrong>凄い技を繰り広げても音楽に合っていなければただの技とみなされる\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>ダンス以外の知識が必要\u003C\u002Fstrong>\u003Cul>\u003Cli>HipHop の歴史や、音楽に関する知識が必要\u003Cul>\u003Cli>\u003Cstrong>ストリートダンスのステップには名前と意味があり、曲にマッチしない踊りをしても評価はイマイチ\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>ただダンスが上手いだけではない。ダンスバトルという歴史がオリンピック競技にも反映されているんですね。\u003Cbr>\u003C\u002Fp>\u003Ch2 id=\"hdee32c71d1\">Red Bull BC One\u003C\u002Fh2>\u003Cp>オリンピックとは別に、\u003Cstrong>1ON1 で世界最強のソロ B-Boy を決定する最もメジャーなブレイキンの世界大会\u003C\u002Fstrong>が\u003Cstrong>「\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.redbull.com\u002Fint-en\u002Fevents\u002Fred-bull-bc-one-world-final-paris\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Red Bull BC One\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>」\u003C\u002Fstrong>です。2004年から毎年、開催国を変えながら全世界を股に掛けて開催されています。\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002F9pRlxKvRwEA?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>2018年には B-Girl 部門も設立\u003C\u002Fstrong>され、その大会では\u003Cstrong>日本人の \u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E6%B9%AF%E6%B5%85%E4%BA%9C%E5%AE%9F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>\u003Cem>AMI\u003C\u002Fem>\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> (湯浅亜実)さんが初代チャンピオン\u003C\u002Fstrong>となりました。ブエノスアイレスユースオリンピックで銅メダルを取った \u003Cstrong>\u003Cem>Shigekix\u003C\u002Fem> さんも2020年に最年少で B-boy 部門で優勝\u003C\u002Fstrong>。\u003Cbr>日本人は 3 度(B-Boy 2回、B-Girl 1回)チャンピオンになっています。\u003Cbr>\u003Cbr>\u003Cstrong>大会の出場枠は 16人\u003C\u002Fstrong>。各エリアの代表 or シード権を獲得した人が出場できます。\u003Cbr>たった 16人しか出場できないため、\u003Cstrong>「勝つ事よりも、出場するだけで名誉なこと」\u003C\u002Fstrong>と世界中の B-boy から言われているそうです。\u003Cbr>\u003Cbr>2022 年はアメリカのニューヨークで開催されました。その時の決勝大会の映像がこちら。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>B-Boy : VICTOR(アメリカ)\u003Cbr>2022 Red Bull BC One Final(vs. B-Boy Lee)\u003C\u002Fstrong>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002F9CWzXWW1Q-s?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>B-Girl : INDIA(オランダ)\u003Cbr>2022 Red Bull BC One Final(vs. B-Girl Logistx)\u003C\u002Fstrong>\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002Fgq27dTJUkKE?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>Red Bull BC One で好成績を収めると、\u003Ca href=\"https:\u002F\u002Fwww.redbull.com\u002Fjp-ja\u002Fevent-series\u002Fbc-one\u002Fbc-one-all-stars\">\u003Cstrong>Red Bull BC One All Stars\u003C\u002Fstrong>\u003C\u002Fa> という特別なダンスチームのクルーに選ばれます。\u003Cbr>All Stars のメンバーは、Redbull が公式スポンサーとして契約し、世界中のダンスイベントの参加、ダンスバトルのジャッジなどを行いブレイキンや、\u003Cstrong>HipHop文化普及の為に活躍\u003C\u002Fstrong>しています。\u003Cbr>\u003Cbr>\u003Cbr>ブレイキンはとても奥の深いダンスですが、用意するものは特にないし、誰でも始められるのかなと思います。\u003Cbr>日本人の選手も多く活躍しているので、気になった方は YouTube などで動画を見てみてください。\u003C\u002Fp>",[],"2023-05-01T12:56:21+09:00",{"id":524,"createdAt":525,"updatedAt":526,"publishedAt":527,"revisedAt":526,"title":528,"tag":529,"recommended_articles":545,"eyecatch":546,"heading_list":17,"content2":549,"related_articles":550,"recruit":17,"is_html":17,"is_migration":17},"relax-room","2025-03-18T01:43:49.576Z","2026-05-14T08:30:18.520Z","2025-06-13T07:12:42.700Z","昼寝から推し活まで。オフィスのリラックスルームの話",[530,533,538,543,544],{"id":369,"createdAt":531,"updatedAt":531,"publishedAt":531,"revisedAt":531,"name":532,"top":17},"2025-03-18T01:44:26.211Z","オフィス",{"id":534,"createdAt":535,"updatedAt":536,"publishedAt":535,"revisedAt":535,"name":537,"top":17},"pilates","2023-06-01T09:41:40.903Z","2023-08-09T06:32:27.862Z","ピラティス",{"id":202,"createdAt":539,"updatedAt":540,"publishedAt":539,"revisedAt":541,"name":542,"top":17},"2023-06-01T09:42:41.123Z","2023-08-09T06:11:27.220Z","2023-08-04T03:38:17.292Z","部活動",{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":14,"name":16,"top":17},{"id":26,"createdAt":27,"updatedAt":28,"publishedAt":27,"revisedAt":27,"name":29,"top":17},[],{"url":547,"height":548,"width":487},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ffbabfbf964e44fa5bf8aa73af67e358f\u002Foffice-3.jpg",434,"\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>",[],{"id":134,"createdAt":231,"updatedAt":232,"publishedAt":233,"revisedAt":232,"title":234,"tag":552,"recommended_articles":559,"eyecatch":560,"heading_list":24,"content2":245,"related_articles":561,"recruit":17,"is_html":17,"is_migration":17},[553,554,555,556],{"id":19,"createdAt":20,"updatedAt":21,"publishedAt":22,"revisedAt":21,"name":23,"top":24},{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":14,"name":16,"top":17},{"id":26,"createdAt":27,"updatedAt":28,"publishedAt":27,"revisedAt":27,"name":29,"top":17},{"id":43,"createdAt":557,"updatedAt":557,"publishedAt":557,"revisedAt":557,"name":558,"top":17},"2023-06-01T09:42:09.082Z","技術",[],{"url":242,"height":243,"width":244},[],{"id":167,"createdAt":473,"updatedAt":474,"publishedAt":475,"revisedAt":474,"title":476,"tag":563,"recommended_articles":574,"eyecatch":575,"heading_list":24,"content2":488,"related_articles":576,"recruit":17,"is_html":17,"is_migration":17},[564,565,569,570,571],{"id":19,"createdAt":20,"updatedAt":21,"publishedAt":22,"revisedAt":21,"name":23,"top":24},{"id":198,"createdAt":566,"updatedAt":567,"publishedAt":566,"revisedAt":568,"name":198,"top":17},"2023-06-01T09:40:46.672Z","2023-08-07T09:00:11.065Z","2023-08-07T08:58:07.961Z",{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":14,"name":16,"top":17},{"id":26,"createdAt":27,"updatedAt":28,"publishedAt":27,"revisedAt":27,"name":29,"top":17},{"id":366,"createdAt":572,"updatedAt":572,"publishedAt":572,"revisedAt":572,"name":573,"top":17},"2023-08-08T03:46:58.542Z","キャラクター",[],{"url":485,"height":486,"width":487},[],{"id":169,"createdAt":491,"updatedAt":492,"publishedAt":492,"revisedAt":492,"title":493,"tag":578,"recommended_articles":587,"eyecatch":588,"heading_list":24,"content2":503,"related_articles":589,"recruit":24,"is_html":17,"is_migration":17},[579,580,581,582],{"id":202,"createdAt":539,"updatedAt":540,"publishedAt":539,"revisedAt":541,"name":542,"top":17},{"id":198,"createdAt":566,"updatedAt":567,"publishedAt":566,"revisedAt":568,"name":198,"top":17},{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":14,"name":16,"top":17},{"id":79,"createdAt":583,"updatedAt":584,"publishedAt":583,"revisedAt":585,"name":586,"top":24},"2023-07-13T11:19:32.620Z","2023-08-09T08:38:30.413Z","2023-08-09T07:10:47.562Z","PR",[],{"url":501,"height":502,"width":487},[],{"id":591,"createdAt":592,"updatedAt":593,"publishedAt":594,"revisedAt":593,"title":595,"tag":596,"recommended_articles":619,"eyecatch":620,"heading_list":24,"content2":624,"related_articles":625,"recruit":17,"is_html":17,"is_migration":17},"stationary-bike","2023-11-15T07:19:34.095Z","2024-01-26T06:52:05.288Z","2023-11-28T07:07:19.544Z","運動不足を解消したくてエアロバイクに辿り着くまでの話",[597,598,603,607,612,618],{"id":19,"createdAt":20,"updatedAt":21,"publishedAt":22,"revisedAt":21,"name":23,"top":24},{"id":599,"createdAt":600,"updatedAt":601,"publishedAt":600,"revisedAt":600,"name":602,"top":17},"remote-work","2023-07-13T11:13:07.166Z","2023-08-09T06:21:04.659Z","リモートワーク",{"id":604,"createdAt":605,"updatedAt":605,"publishedAt":605,"revisedAt":605,"name":606,"top":17},"health","2023-11-26T04:22:15.013Z","健康",{"id":608,"createdAt":609,"updatedAt":610,"publishedAt":609,"revisedAt":609,"name":611,"top":17},"exercise","2023-11-26T04:21:19.515Z","2023-11-26T04:21:42.229Z","運動",{"id":613,"createdAt":614,"updatedAt":615,"publishedAt":614,"revisedAt":616,"name":617,"top":17},"application","2023-08-07T11:29:15.622Z","2023-08-09T06:12:16.747Z","2023-08-07T11:29:21.036Z","アプリ",{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":14,"name":16,"top":17},[],{"url":621,"height":622,"width":623},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F6e1d6896733f4cf59a1c5649cf576448\u002Fintenza-fitness-Xlp338P79do-unsplash.jpg",4076,6114,"\u003Cp>不況の波を乗り切るためにテルミンを買いました。\u003Cbr>\u003Cbr>今回は弊社の鈴木が\u003Cstrong>「運動不足解消」\u003C\u002Fstrong>をテーマに話しました。\u003C\u002Fp>\u003Chr>\u003Cp>\u003Cbr>\u003Cstrong>コロナ禍以降、リモートワークをずっと続けている\u003C\u002Fstrong>のですが、そうなると\u003Cstrong>気になるのが運動不足\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>出社すれば7,000歩ぐらいは歩くことになるので、それなりに運動にはなっていると思うのですが、在宅の日の歩数は200歩程度。どうにか運動しないといけないなとは思いつつ、\u003Cstrong>今更毎日出社するのは大変\u003C\u002Fstrong>。なかなか腰が重く実行に移せないでいました。\u003Cbr>\u003Cbr>\u003Cstrong>まだ体調に影響は出ていませんが、対策しておかないと将来が不安\u003C\u002Fstrong>です。\u003Cbr>\u003Cstrong>今のうちに運動習慣を身につけておきたい\u003C\u002Fstrong>ということで、運動不足解消のために試したことを今回は話したいと思います。\u003C\u002Fp>\u003Ch2 id=\"h98327a3a6d\">過去に試してみたこと\u003C\u002Fh2>\u003Cp>過去に色々と挑戦してはみたのですが、どれも続かず…。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>リングフィットアドベンチャー\u003C\u002Fstrong>\u003Cul>\u003Cli>毎回コントローラーをリングフィット用のものにセッティングするのが面倒。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>フィットボクシング\u003C\u002Fstrong>\u003Cul>\u003Cli>ちゃんとやっているのに感度が悪くて良い点数が取れない。結果やる気をなくす。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>腹筋ローラー\u003C\u002Fstrong>\u003Cul>\u003Cli>飽きた、達成感がない。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>散歩\u003C\u002Fstrong>\u003Cul>\u003Cli>冬はいいけど夏は暑くて外に出たくない。夏場もできることがいい。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>youtubeの運動動画\u003C\u002Fstrong>\u003Cul>\u003Cli>運動するスペースを作るのが面倒。\u003C\u002Fli>\u003Cli>騒音が不安。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>これまでの反省を踏まえて、\u003Cstrong>続けられそうな運動の条件\u003C\u002Fstrong>を考えました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>部屋でできる\u003C\u002Fstrong>\u003Cul>\u003Cli>外に出るために着替えるのは面倒。\u003C\u002Fli>\u003Cli>夏は外に出たくない。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>近隣に騒音で迷惑をかけたくない\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>準備に手間がかからない\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>ゲーム性があるといいかも\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Ca href=\"https:\u002F\u002Fpikminbloom.com\u002Fja\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Pikmin Bloom\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> \u003C\u002Fstrong>にハマって遠回りしたり歩き回ることが増えた。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>この条件に当てはまりそうなものを探して実践してみることにします。\u003C\u002Fp>\u003Ch2 id=\"h7381e452d5\">新たにやってみたこと\u003C\u002Fh2>\u003Ch3 id=\"h71ad38cd88\">\u003Ca href=\"https:\u002F\u002Famzn.asia\u002Fd\u002FgvizRHP\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">トランポリンクッション\u003C\u002Fa>\u003C\u002Fh3>\u003Cp>一つ目はトランポリンクッションです。\u003C\u002Fp>\u003Cp>見た目はクッションなので、インテリアにもなります。\u003Cbr>トランポリンほど反発はせず、硬めのクッションという感じです。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>良い点\u003C\u002Fstrong>\u003Cul>\u003Cli>楽しい。\u003C\u002Fli>\u003Cli>手軽。\u003C\u002Fli>\u003Cli>\u003Cstrong>使わないときはクッションとして使える。\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>テレビを見ながらできる。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>悪い点\u003C\u002Fstrong>\u003Cul>\u003Cli>下の部屋にドンドン聞こえているのではないかという不安。\u003C\u002Fli>\u003Cli>少し使っただけでへたってきた。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>一応商品の説明には\u003Cstrong>「静音設計」\u003C\u002Fstrong>だとか\u003Cstrong>「マンションや集合住宅に住む人も利用でき、騒音で階下に迷惑をかける心配も全くありません」\u003C\u002Fstrong>というようなことが書いてありましたが、実際に使ってみると不安が勝ってしまい続きませんでした。\u003Cbr>\u003Cbr>一軒家なら続けられたかもしれませんが、マンションだとちょっと…。\u003C\u002Fp>\u003Ch3 id=\"h2e4cbb679d\">\u003Ca href=\"https:\u002F\u002Famzn.asia\u002Fd\u002Fg59u2rH\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">フラフープ\u003C\u002Fa>\u003C\u002Fh3>\u003Cp>次に試したのがフラフープです。\u003C\u002Fp>\u003Cp>\u003Cstrong>素材が柔らかい\u003C\u002Fstrong>ので使っていて痛くありません。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>良い点\u003C\u002Fstrong>\u003Cul>\u003Cli>子供のころを思い出して楽しい。\u003C\u002Fli>\u003Cli>手軽。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>悪い点\u003C\u002Fstrong>\u003Cul>\u003Cli>物にぶつかる。\u003C\u002Fli>\u003Cli>始める前に片付けないといけない。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>始めるのにある程度スペースを確保しないといけないと思うと結局面倒になってしまい、今は分解してしまってあります。\u003C\u002Fp>\u003Ch3 id=\"h67307efd4e\">\u003Ca href=\"https:\u002F\u002Fwww.mtgec.jp\u002Fwellness\u002Fsixpad\u002Fproducts\u002Fpowersuit\u002Fabs.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">シックスパッド\u003C\u002Fa>\u003C\u002Fh3>\u003Cp>運動ではありませんが、\u003Cstrong>ふるさと納税で見つけた\u003C\u002Fstrong>ので物は試しだと買ってみました。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>良い点\u003C\u002Fstrong>\u003Cul>\u003Cli>家事をしながら、テレビを見ながらできる。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cstrong>悪い点\u003C\u002Fstrong>\u003Cul>\u003Cli>\u003Cstrong>全く効果を感じない。\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>充電、使用前に濡らす、洗濯が若干面倒。\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>3 ヶ月ほぼ毎日使ったのですが、何も変わらないし全く効果も感じません。\u003Cbr>腹筋以外の箇所につけて使ってみたらなんとなく疲れた感じはする。おそらく自分には腹筋がちゃんとあるから効かないのかもしれません。謎です。\u003Cbr>\u003Cbr>そういうわけでこれも使わなくなってしまいます…。\u003Cbr>やっぱりちゃんと自分で動いたほうがいいんだなと学びました。\u003C\u002Fp>\u003Cp>と色々やってきた結果、\u003Cstrong>本題のエアロバイク\u003C\u002Fstrong>にたどり着きます。\u003C\u002Fp>\u003Ch2 id=\"h7878eacde0\">エアロバイク\u003C\u002Fh2>\u003Cp>多分置物になるだろうな。という気が初めからしていたので当初候補にはなかったのですが、\u003Ca href=\"https:\u002F\u002Fwww.zwift.com\u002Fja\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>zwift\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> というアプリ\u003C\u002Fstrong>の存在を知り、俄然興味が湧いてきます。\u003Cbr>\u003Cbr>zwift は、\u003Cstrong>バーチャル空間を自転車や徒歩で走行できるアプリ\u003C\u002Fstrong>です。\u003Cbr>\u003Cstrong>月額1,650円(2023年11月時点)\u003C\u002Fstrong>で利用でき、バーチャル空間で景色を楽しむだけでなく、\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\u002Fzours77W8K8?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>\u003Cstrong>日本・フランス・ロンドンなどの様々なワールド、街中や田舎道、渓谷などいろんなコースが用意\u003C\u002Fstrong>されており、その日の気分で選択することができます。\u003Cbr>\u003Cbr>基本的には zwift に対応しているスマートバイクを使ってプレイするのですが、普通の自転車をローラー台に固定し、Bluetooth 対応のスピードセンサーでアプリに走行速度を送信することでも利用できるようです。\u003Cbr>\u003Cbr>参考：\u003Ca href=\"https:\u002F\u002Fmarkmag.jp\u002F2020\u002F05\u002Fzwift02\u002F125328\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">安く始めるか思い切って投資をするか？　Zwiftはじめました\u003C\u002Fa>\u003Cbr>\u003Cbr>\u003Cbr>これなら楽しく続けられそうだと思ったのですが、zwift を起動するのに必要な機能を網羅している\u003Cstrong>スマートバイクは10万円近く\u003C\u002Fstrong>するものばかり。\u003Cbr>さすがに買えない…と悩んでいたところ、なんと\u003Ca href=\"https:\u002F\u002Fwww.makuake.com\u002Fproject\u002Fmerach\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>クラウドファンディングで zwift が動かせるエアロバイクが安くで出る\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong>という情報を発見\u003C\u002Fstrong>。\u003Cstrong>購入\u003C\u002Fstrong>することにしました。\u003Cbr>\u003Cbr>こちらが購入したエアロバイクです。ハンドルのところに iPad mini を装着してアプリを使用しています。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ff75e8ec1a89e43f69e43ab01e14bde6f\u002F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-20%2018.44.13.png?w=650&h=481\" alt=\"エアロバイク\" width=\"650\" height=\"481\">\u003C\u002Ffigure>\u003Cp>写真のようにスペースは取りますが、\u003Cstrong>音は静か\u003C\u002Fstrong>ですし、始めたい時に気軽に始められます。\u003Cbr>\u003Cbr>走行中のアプリの画面はこんな感じです。\u003Cstrong>映像が綺麗\u003C\u002Fstrong>で爽快感があります。\u003C\u002Fp>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002F182mzzqcKCo?rel=0&start=329\" 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>\u003Ch3 id=\"h8d78e14043\">感想\u003C\u002Fh3>\u003Cp>ただ走っているだけでも、\u003Cstrong>道の様子や坂などでペダルの重さが勝手に変わる\u003C\u002Fstrong>ので、本当に走っているような感覚があって気持ちいいです。走っている道によって負荷が変わる方が\u003Cstrong>没入感があって飽きがこなさそう\u003C\u002Fstrong>だと思ったので、実は選ぶ時に重視したポイントだったりします。\u003Cbr>\u003Cbr>\u003Cstrong>同じコースを走っている他のユーザー\u003C\u002Fstrong>を抜かしたり抜かされたり、\u003Cstrong>競い合えるのもモチベーション\u003C\u002Fstrong>に繋がりますし、一人でテレビを見ながらゆっくり走っても着替えなどのアイテムが手に入るのでやりがいがあります。\u003Cbr>\u003Cbr>また、\u003Cstrong>外で走るのと違って風がない分すごく汗をかく\u003C\u002Fstrong>ので、\u003Cstrong>ちゃんと運動できているような気になる\u003C\u002Fstrong>のも良かったです。\u003Cbr>\u003Cbr>月額が少し高いのが難点ですが、\u003Cstrong>今のところ半年以上続けられている\u003C\u002Fstrong>ので、今までで一番自分に合ったものを見つけられたなと。今後も自分のペースで長く続けていきたいと思います。興味を持たれた方は、ぜひ調べてみてください。\u003Cbr>\u003C\u002Fp>",[],{"id":627,"createdAt":628,"updatedAt":629,"publishedAt":630,"revisedAt":631,"title":632,"tag":633,"recommended_articles":637,"eyecatch":638,"heading_list":17,"content2":642,"related_articles":643,"recruit":24,"is_html":17,"is_migration":17},"esports-club-3","2023-08-18T07:52:34.190Z","2023-08-22T11:12:41.480Z","2023-08-08T07:53:16.000Z","2023-08-18T07:56:10.246Z","esports 部活動報告と YouTube 開設",[634,635,636],{"id":79,"createdAt":583,"updatedAt":584,"publishedAt":583,"revisedAt":585,"name":586,"top":24},{"id":198,"createdAt":566,"updatedAt":567,"publishedAt":566,"revisedAt":568,"name":198,"top":17},{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":14,"name":16,"top":17},[],{"url":639,"height":640,"width":641},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fce122c3bfb0e4c86ac6741c2f5a8f7eb\u002Fella-don-sRQxXA5QqtE-unsplash%20(1).jpg",1281,1920,"\u003Cp>今年は\u003Ca href=\"https:\u002F\u002Folympics.com\u002Fja\u002Fesports\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>オリンピック e スポーツシリーズ 2023\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> が 6 月22日～25日にシンガポールで初開催\u003C\u002Fstrong>され、\u003Cstrong>世界中でますます盛り上がりを見せるesports\u003C\u002Fstrong>、\u003Cstrong>弊社の esports 部も相変わらず活動を続けております\u003C\u002Fstrong>。\u003Cbr>\u003Cbr>今日は esports 部の近況について久々に報告したいと思います。\u003C\u002Fp>\u003Ch2 id=\"hfed93b2148\">最近のesports部\u003C\u002Fh2>\u003Cp>これまでは \u003Ca href=\"https:\u002F\u002Fwww.ea.com\u002Fja-jp\u002Fgames\u002Fapex-legends\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>Apex Legends\u003C\u002Fstrong>\u003C\u002Fa> 一本に絞って活動していた弊社 esports 部ですが、\u003Cbr>\u003Cstrong>最近は主に\u003C\u002Fstrong>\u003Ca href=\"https:\u002F\u002Fwww.nintendo.co.jp\u002Fswitch\u002Fav5ja\u002Findex.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>スプラトゥーン 3\u003C\u002Fstrong>\u003C\u002Fa> をプレイしています。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch3 id=\"hd24f02b43f\">スプラトゥーン 3 とは\u003C\u002Fh3>\u003Cp>スプラトゥーン 3 は昨年の 9 月 9 日に発売された\u003Cstrong> Nintendo Switch 用アクションシューティングゲーム\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>プレイヤーはヒトの姿に変身できるイカ(もしくはタコ)を操作し、様々なブキを使ってインクを塗り合い、塗ったインクの中をイカやタコの姿で泳いで、4 対 4 に分かれて対戦する、というのが基本的なゲームシステム。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch3 id=\"h54369cf3c0\">活動状況\u003C\u002Fh3>\u003Cp>\u003Cstrong>スプラトゥーン 3\u003C\u002Fstrong> は、\u003Cstrong>世界合計で販売本数 1330 万本\u003C\u002Fstrong>とも言われているメガヒットゲーム、老若男女問わず多くの人がプレイしています。おかげで\u003Cstrong>部員も増えました。\u003C\u002Fstrong>\u003Cbr>\u003Cbr>現在は毎週 4 人が固定メンバーで活動中。\u003Cbr>時には 6 人以上で集まり\u003Cstrong>社内で練習試合\u003C\u002Fstrong>もできるようになりました。\u003Cbr>\u003Cbr>Apex をそのまま続けていても良かったのですが、同じ業界でもスプラトゥーンをやっている方は多いみたいで、ゲームの幅を広げて交流のきっかけになればいいなという思惑もあり、スプラトゥーンをやってみることにしました。\u003Cbr>\u003Cbr>と言いながら、Apex をやっていた時は他社が開催した交流戦やネットで募集しているイベントに出場していたのですが、スプラトゥーンになってからはそういった活動は残念ながらできておりません。\u003Cbr>サーチ不足なのかもしれませんが、探してみると\u003Cstrong>Apex に比べて企業対抗戦などのイベントが意外と少ない\u003C\u002Fstrong>。\u003Cbr>\u003Cbr>\u003Ca href=\"https:\u002F\u002Fwww.nintendo.co.jp\u002Fsplatoon\u002Fkoshien2023\u002Findex.html\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>スプラトゥーン甲子園\u003C\u002Fstrong>\u003C\u002Fa>という公式全国大会にエントリーしてみたものの抽選に外れてしまったので、今度また開催される公式のオンライン大会に応募してみるつもりです。\u003Cbr>\u003Cbr>\u003C\u002Fp>\u003Ch3 id=\"h3561b6091c\">YouTube 開設\u003C\u002Fh3>\u003Cp>これまでも、毎週リアルタイムで社内向けに Twitch での配信は行っていたのですが、もうちょっと\u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCUiOP3ZdetqPRfJs51vik2Q\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>活動を多くの人に知ってもらえればなという理由でYouTube を始めてみました\u003C\u002Fstrong>。\u003C\u002Fa>主にショート動画をアップしています。\u003Cbr>\u003Cbr>まだ試行錯誤の最中ではありますが、できる限り頑張って動画を上げていければと思っておりますので、\u003Ca href=\"http:\u002F\u002Fwww.youtube.com\u002Fchannel\u002Fs2factory?sub_confirmation=1\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>是非チャンネル登録お願いします。\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cdiv style=\"max-width: 56vh;\">\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 177.7778%;\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FM4GR0CMsUsM\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"encrypted-media;\">\u003C\u002Fiframe>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Ch2 id=\"h197f9f6541\">今後の話\u003C\u002Fh2>\u003Cp>今後も変わらず交流戦などがあれば参加していくつもりです。その際に、S2 のことがもっとアピールできるように \u003Cstrong>S2 公式キャラクターを用いた esports 部グッズを制作\u003C\u002Fstrong>しようと計画しています。\u003Cbr>\u003Cbr>\u003Cstrong>S2 には esports 部以外にも自転車部やコーヒー部、園芸部、ボードゲーム部、ピラティス部などいろんな部活がある\u003C\u002Fstrong>のですが、\u003Cstrong>各部活のグッズも制作予定\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>他の部活についてもブログで紹介したいと思っておりますので、たまにはブログを覗いてみてください。そして交流戦などあれば是非お誘いください。\u003C\u002Fp>",[],{"id":191,"createdAt":192,"updatedAt":193,"publishedAt":192,"revisedAt":194,"title":195,"tag":645,"recommended_articles":651,"eyecatch":652,"heading_list":17,"related_articles":653,"recruit":24,"is_html":24,"html_contents":210,"is_migration":24,"migration_date":211},[646,647,648,649,650],{"id":198,"createdAt":566,"updatedAt":567,"publishedAt":566,"revisedAt":568,"name":198,"top":17},{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":14,"name":16,"top":17},{"id":79,"createdAt":583,"updatedAt":584,"publishedAt":583,"revisedAt":585,"name":586,"top":24},{"id":202,"createdAt":539,"updatedAt":540,"publishedAt":539,"revisedAt":541,"name":542,"top":17},{"id":19,"createdAt":20,"updatedAt":21,"publishedAt":22,"revisedAt":21,"name":23,"top":24},[],{"url":206,"height":207,"width":208},[],{"id":213,"createdAt":214,"updatedAt":215,"publishedAt":214,"revisedAt":215,"title":216,"tag":655,"recommended_articles":661,"eyecatch":662,"heading_list":17,"related_articles":663,"recruit":24,"is_html":24,"html_contents":228,"is_migration":24,"migration_date":229},[656,657,658,659,660],{"id":198,"createdAt":566,"updatedAt":567,"publishedAt":566,"revisedAt":568,"name":198,"top":17},{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":14,"name":16,"top":17},{"id":202,"createdAt":539,"updatedAt":540,"publishedAt":539,"revisedAt":541,"name":542,"top":17},{"id":79,"createdAt":583,"updatedAt":584,"publishedAt":583,"revisedAt":585,"name":586,"top":24},{"id":19,"createdAt":20,"updatedAt":21,"publishedAt":22,"revisedAt":21,"name":23,"top":24},[],{"url":225,"height":226,"width":208},[],{"id":665,"createdAt":666,"updatedAt":667,"publishedAt":666,"revisedAt":667,"title":668,"tag":669,"recommended_articles":678,"eyecatch":679,"heading_list":17,"related_articles":682,"recruit":24,"is_html":24,"html_contents":683,"is_migration":24,"migration_date":684},"game-lunch","2023-06-02T08:49:01.396Z","2023-08-09T08:50:02.003Z","ゲームランチ",[670,671,672,673],{"id":79,"createdAt":583,"updatedAt":584,"publishedAt":583,"revisedAt":585,"name":586,"top":24},{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":14,"name":16,"top":17},{"id":202,"createdAt":539,"updatedAt":540,"publishedAt":539,"revisedAt":541,"name":542,"top":17},{"id":674,"createdAt":675,"updatedAt":676,"publishedAt":675,"revisedAt":675,"name":677,"top":17},"online","2023-06-01T09:41:18.718Z","2023-08-09T06:38:43.363Z","オンライン",[],{"url":680,"height":681,"width":641},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F19a6b24e6bec4a3ba08a8a9a1ffd34bf\u002F2021-04-not-ludo-1745964_1920.jpg",1076,[],"長らく続いた緊急事態宣言が解除されました。\u003Cbr>と思ったら今度は「まん延防止等重点措置」が実施。\u003Cbr>依然、新型コロナウイルスは世界中で猛威を奮っています。\u003Cbr>そんなわけで、緊急事態宣言下と変わらずまだしばらく弊社ではリモートワーク中心の体制が続きそうです。\u003Cbr>\u003Cbr>いい加減、うんざりしてきた今日この頃だとは思いますが、\u003Cbr>なんとかコロナ疲れに負けず楽しく過ごしたいものですね。\u003Cbr>\u003Cbr>ということで今日は、弊社で行われているレクリエーション\u003Cstrong>\u003Cspan class=\"has-inline-color has-pale-pink-color\">「ゲームランチ」\u003C\u002Fspan>\u003C\u002Fstrong>について紹介しようと思います。\u003Cbr>\u003Cbr>\n\n\u003Ch2>ゲームランチとは\u003C\u002Fh2>\n\n週に一度、参加者を募って開催されている\u003Cstrong>\u003Cspan class=\"has-inline-color has-pale-pink-color\">レクリエーション\u003C\u002Fspan>\u003C\u002Fstrong>です。\u003Cbr>名前の通り\u003Cstrong>\u003Cspan class=\"has-inline-color has-pale-pink-color\">「ランチを食べながらゲーム」\u003C\u002Fspan>\u003C\u002Fstrong>をやります。\u003Cbr>時間は 1 時間。参加者は平均して4〜6人ぐらい。\u003Cbr>主にやるのはボードゲームで、それぐらいの人数で遊べるものを月毎に選んで遊んでいます。\u003Cbr>\u003Cbr>そんなゲームランチですが、新型コロナウイルスの影響をもろに受けております。\u003Cbr>\u003Cbr>\n\n\u003Ch3>コロナ禍前\u003C\u002Fh3>\n\nコロナウイルスが発生する前は、オフィス内で集まってランチを食べながら行われていました。\u003Cbr>実は\u003Cstrong>弊社オフィスにはたくさんのボードゲームが所蔵されています。\u003C\u002Fstrong>\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwww.amazon.co.jp\u002F%E3%82%AB%E3%83%AB%E3%82%AB%E3%82%BD%E3%83%B3%E3%83%8C-Carcassonne-%E3%83%9C%E3%83%BC%E3%83%89%E3%82%B2%E3%83%BC%E3%83%A0\u002Fdp\u002FB002QE643A\" target=\"_blank\" rel=\"noreferrer noopener\">カルカソンヌ\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwww.amazon.co.jp\u002F%E3%83%90%E3%83%88%E3%83%AB%E3%83%A9%E3%82%A4%E3%83%B3-Battle-Line-%E6%97%A5%E6%9C%AC%E8%AA%9E%E7%89%882016-%E3%82%AB%E3%83%BC%E3%83%89%E3%82%B2%E3%83%BC%E3%83%A0\u002Fdp\u002FB01DDDQJAK\u002Fref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=%E3%83%90%E3%83%88%E3%83%AB%E3%83%A9%E3%82%A4%E3%83%B3&qid=1618392306&s=toys&sr=1-1\" target=\"_blank\" rel=\"noreferrer noopener\">バトルライン\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwww.amazon.co.jp\u002F%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%BA%E3%82%AA%E3%83%BC%E3%83%80%E3%83%BC-New-Games-Order-Pingu-Party\u002Fdp\u002FB00Z5W9H0W\u002Fref=sr_1_4?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=%E3%83%9A%E3%83%B3%E3%82%AE%E3%83%B3%E3%83%91%E3%83%BC%E3%83%86%E3%82%A3%E3%83%BC&qid=1618392325&s=toys&sr=1-4\" target=\"_blank\" rel=\"noreferrer noopener\">ペンギンパーティー\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwww.amazon.co.jp\u002F%E3%82%AE%E3%82%AC%E3%83%9F%E3%83%83%E3%82%AF-Gigamic-%E3%82%B3%E3%83%AA%E3%83%89%E3%83%BC%E3%83%AB-Quoridor-%E3%83%9C%E3%83%BC%E3%83%89%E3%82%B2%E3%83%BC%E3%83%A0\u002Fdp\u002FB00001NTXN\" target=\"_blank\" rel=\"noreferrer noopener\">コリドール\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwww.amazon.co.jp\u002F%E3%83%A1%E3%83%93%E3%82%A6%E3%82%B9-%E3%82%AC%E3%82%A4%E3%82%B9%E3%82%BF%E3%83%BC-Geister-%E3%83%9C%E3%83%BC%E3%83%89%E3%82%B2%E3%83%BC%E3%83%A0\u002Fdp\u002FB0078WZSK0\" target=\"_blank\" rel=\"noreferrer noopener\">ガイスター\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwww.amazon.co.jp\u002F%E4%B8%96%E7%95%8C%E3%81%AE%E4%B8%83%E4%B8%8D%E6%80%9D%E8%AD%B0-7-Wonders-%E6%97%A5%E6%9C%AC%E8%AA%9E%E7%89%88-%E3%83%9C%E3%83%BC%E3%83%89%E3%82%B2%E3%83%BC%E3%83%A0\u002Fdp\u002FB005BPALJ4\u002Fref=sr_1_8?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=%E4%B8%96%E7%95%8C%E3%81%AE%E4%B8%83%E4%B8%8D%E6%80%9D%E8%AD%B0&qid=1618392381&s=toys&sr=1-8\" target=\"_blank\" rel=\"noreferrer noopener\">世界の七不思議\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\n\n\u003Cbr>などなど。まだまだあるのですが、\u003Cbr>それらの中から毎月遊ぶゲームを選んでいました。\u003Cbr>\u003Cbr>ボードゲーム好きのスタッフが多いということもあって、\u003Cbr>\u003Cstrong>自宅からボードゲームを持参、そして半ば会社に寄贈\u003C\u002Fstrong>する社員がいたり。\u003Cbr>このゲームが面白そうだと買ってやってみたり。\u003Cbr>ワイワイと対面で、いろんなゲームを遊びました。\u003Cbr>今や遠い昔のことのようです。\u003Cbr>\u003Cbr>\n\n\u003Cfigure class=\"wp-block-image size-large\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fb9c7853cb73d448792041ccc2df23559\u002F2021-04-DSC_7432_00049-1.jpg\" alt=\"\" class=\"wp-image-11264\"\u002F>\u003C\u002Ffigure>\n\n\u003Ch3>現在\u003C\u002Fh3>\n\nそして世界はコロナ禍へ突入。\u003Cbr>いろんなことが今まで通りというわけにはいかなくなりました。\u003Cbr>ゲームランチも例外ではありません。\u003Cbr>\u003Cbr>このご時世に、\u003Cstrong>一所に集まって会食しながらボードゲームをする\u003C\u002Fstrong>のはさすがに厳しい。\u003Cbr>そもそもスタッフの半数以上がリモートワークをしているのでオフィスに人がいません。\u003Cbr>\u003Cbr>\u003Cstrong>コロナが収束するまではゲームランチも自粛か\u003C\u002Fstrong>…\u003Cbr>\u003Cbr>そんな時、\u003Cbr>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fja.boardgamearena.com\u002F\" target=\"_blank\">ボードゲームアリーナ\u003C\u002Fa>\u003C\u002Fstrong>というサイトを使えば「\u003Cstrong>オンラインでも無料でボードゲームが遊べる\u003C\u002Fstrong>」ことが判明します。\u003Cbr>\u003Cbr>というわけで、そちらのサイトと Zoom を併用しながら\u003Ca rel=\"noreferrer noopener\" href=\"\u002Fblog\u002Ftea\" target=\"_blank\">お茶会\u003C\u002Fa>同様、\u003Cbr>ゲームランチも\u003Cstrong>\u003Cspan class=\"has-inline-color has-pale-pink-color\">オンラインで開催\u003C\u002Fspan>\u003C\u002Fstrong>されるようになりました。\u003Cbr>\u003Cbr>やっぱり顔を合わせて実際に手を動かしながらやるのとは違いますが、それでも十分楽しめます。\u003Cbr>ちなみにボードゲームアリーナではなんと現時点で312種類のゲームがプレイできるそうです。\u003Cbr>中には有料会員にならないと選べないものもありますが、、\u003Cbr>\u003Cbr>\u003Cbr>当分の間は難しそうですが、\u003Cbr>いつかまたオフィスで集まれる日を信じて、これからもオンラインで続けていくつもりです。\u003Cbr>\u003Cbr>このような時間が週に一度あることで\u003Cstrong>曜日感覚を意識\u003C\u002Fstrong>でき、\u003Cbr>ちょっとした\u003Cstrong>息抜きや頭の体操、コミュニケーション\u003C\u002Fstrong>にもなります。\u003Cbr>ボードゲーム自体面白いものがたくさんあるので、\u003Cbr>家での時間に遊んでみるのも、はたまた社内レクリエーションとして取り入れてみるのはいかがでしょうか。\u003Cbr>\u003Cbr>以上、レクリエーションの紹介でした！","2021-04-15T17:23:25+09:00",{"id":686,"createdAt":687,"updatedAt":688,"publishedAt":687,"revisedAt":688,"title":689,"tag":690,"recommended_articles":698,"eyecatch":699,"heading_list":17,"related_articles":702,"recruit":17,"is_html":24,"html_contents":703,"is_migration":24,"migration_date":704},"watching-esports","2023-06-02T08:48:56.717Z","2023-08-08T03:06:31.004Z","esports \u002F ゲーム配信を見る",[691,692,693,694],{"id":198,"createdAt":566,"updatedAt":567,"publishedAt":566,"revisedAt":568,"name":198,"top":17},{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":14,"name":16,"top":17},{"id":26,"createdAt":27,"updatedAt":28,"publishedAt":27,"revisedAt":27,"name":29,"top":17},{"id":513,"createdAt":695,"updatedAt":696,"publishedAt":695,"revisedAt":695,"name":697,"top":17},"2023-06-01T09:41:27.865Z","2023-08-09T06:38:21.302Z","スポーツ",[],{"url":700,"height":701,"width":161},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F29aa076f1a8443e3ae2bfc81ea46003a\u002F2021-03-458A2594esports_TP_V.jpg",1066,[],"今回は弊社の高野が\u003Cstrong>「esports \u002F ゲーム配信を見る」\u003C\u002Fstrong>というテーマで話しました。\n\n\u003Chr class=\"wp-block-separator\"\u002F>\n\n\u003Cbr>近年、格闘やパズルなどを扱った\u003Cstrong>ビデオゲームをスポーツ競技とする esports\u003C\u002Fstrong> が世界中で盛り上がりを見せています。\u003Cbr>\u003Cbr>\n\n\u003Cp class=\"ticss-a38cdffd has-vivid-red-color has-text-color has-background\" style=\"background-color:#eeeeee\">\u003Cbr>eスポーツ（イースポーツ、英: esports）は、コンピュータゲーム（ビデオゲーム）をスポーツ競技として捉える際の名称である。エレクトロニック・スポーツ(electronic sports) の略称であり、eSports、e-Sports、電⼦競技（でんしきょうぎ）などとも表記される。\u003Cbr>\u003Cbr>\u003C\u002Fp>\n\n\u003Cp class=\"has-text-align-center\" style=\"font-size:14px\">出典：\u003Ca href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FE%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%84\">eスポーツ\u003C\u002Fa>\u003C\u002Fp>\n\nもしかしたらテレビやネットで大会の様子が放送されているのを見たことがある人もいるかもしれません。\u003Cbr>かく言う私も最近になって見始めた口なのですが、今日はそんな\u003Cstrong>「esports」\u003C\u002Fstrong>について、興味を持ったきっかけなどを交えながらどんなものなのか少し紹介したいと思います。\u003Cbr>\n\n\u003Ch2>ゲーム配信を見る\u003C\u002Fh2>\n\n\u003Ch3>昔の esports\u003C\u002Fh3>\n\n私が esports と聞いて一番に思い出すのは『\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FGAME_KING_%E9%AB%98%E6%A9%8B%E5%90%8D%E4%BA%BAVS%E6%AF%9B%E5%88%A9%E5%90%8D%E4%BA%BA_%E6%BF%80%E7%AA%81!%E5%A4%A7%E6%B1%BA%E6%88%A6\" target=\"_blank\">GAME KING 高橋名人VS毛利名人 激突!大決戦\u003C\u002Fa>』です。\u003Cbr>1986年に公開された映画で、二人がまるでロボットの操縦席のようなセットに座り、ビデオゲーム5本勝負を行うといった内容なのですが、これぐらいの時代から「\u003Cstrong>人がビデオゲームで対戦している様子を見るという文化\u003C\u002Fstrong>」はどうやら日本にあったようです。\u003Cbr>\u003Cbr>次に思い出すのは、テレビ東京系列局で放送されていたテレビゲーム情報番組『\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%82%B2%E3%83%BC%E3%83%A0%E7%8E%8B%E5%9B%BD#%E5%8F%82%E5%8A%A0%E3%82%B5%E3%83%BC%E3%83%89%E3%83%91%E3%83%BC%E3%83%86%E3%82%A3%E3%83%BC\" target=\"_blank\">ゲーム王国\u003C\u002Fa>』。\u003Cbr>番組中に、客席にいる子供達の中から選ばれた子供同士が対戦し、勝った方はゲーム機などの賞品がもらえるというコーナーがあって、子供心にいつか自分も参加したいと思ったものです。\u003Cbr>\u003Cbr>これらを esports と分類するのは違うかもしれませんが、以上が私と esports 的なものとのファーストコンタクトになります。\u003Cbr>\u003Cbr>\n\n\u003Ch3>興味を持ったきっかけ\u003C\u002Fh3>\n\nそれから月日は流れて私も大人になりました。\u003Cbr>元々は自分も結構ゲームをやる人だったのですが、大人になって忙しくなり、時間もあまりないという理由で、もう何年もゲームから遠ざかっていました。\u003Cbr>そんな折、YouTubeでたまたまゲームプレイ動画を見たのがきっかけで、\u003Cstrong>見ているだけでもゲームは楽しい\u003C\u002Fstrong>ということに気がつき\u003Cstrong>ゲーム配信に興味を持つように\u003C\u002Fstrong>なります。\u003Cbr>少し紹介を。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCd9bYxSyl6O-PhdoN8EaKcQ\" target=\"_blank\">EricNicolasLand\u003C\u002Fa>\u003C\u002Fstrong>\u003Cbr>\u003Cbr>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F0.03%E7%A7%92_(%E3%81%8A%E7%AC%91%E3%81%84%E3%83%88%E3%83%AA%E3%82%AA)\" target=\"_blank\">元芸人\u003C\u002Fa>、現ゲーマータレントの\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Ftwitter.com\u002FLuna_E_Nicolas?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor\" target=\"_blank\">エリック・ニコラス\u003C\u002Fa>さんの動画配信チャンネル。\u003Cbr>ゲーム配信に興味を持ったのは\u003Cstrong>この人の動画がきっかけ\u003C\u002Fstrong>です。\u003Cbr>『\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Flp.pso2.jp\u002F?utm_source=google&utm_medium=cpc&utm_campaign=other&utm_content=8093925109_85200945740_487544444607&utm_term=e_pso2&gclid=CjwKCAjw9MuCBhBUEiwAbDZ-7icjRaSCkZs7d_6DqPLPbf5F-CrfrvkbOoXtKOU-lP5XivLkm7yUOxoCCOEQAvD_BwE\" target=\"_blank\">PSO2\u003C\u002Fa>』 という \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FMMORPG\" target=\"_blank\">MMORPG\u003C\u002Fa> のプレイ動画を多くアップロードしているのですが、私も昔そのゲームをやっていたということもあって、見ているうちにすっかりハマってしまいました。\u003Cbr>ちなみに PSO2 も esports 競技として\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Falienwarezone.jp\u002Fpost\u002F444\" target=\"_blank\">過去にエキシビションが行われています。\u003C\u002Fa>\u003Cbr>\u003Cstrong>\u003Cbr>\u003C\u002Fstrong>\u003Cbr>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCpZwrtcPizMdC4rlbGDZOKg\" target=\"_blank\">ゴマキのギルド\u003C\u002Fa>\u003Cbr>\u003C\u002Fstrong>\u003Cbr>元\u003Ca rel=\"noreferrer noopener\" href=\"http:\u002F\u002Fwww.helloproject.com\u002Fmorningmusume\u002F\" target=\"_blank\" data-type=\"URL\" data-id=\"http:\u002F\u002Fwww.helloproject.com\u002Fmorningmusume\u002F\">モーニング娘。\u003C\u002Fa>の\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Ftwitter.com\u002Fgotomaki923\" target=\"_blank\">後藤真希\u003C\u002Fa>さんがやっている動画配信チャンネル。\u003Cbr>主に『\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.capcom.co.jp\u002Fmonsterhunter\u002Fworld\u002F\" target=\"_blank\">モンスターハンター：ワールド\u003C\u002Fa>』のプレイ動画を更新しています。\u003Cbr>私自身、ゲーム配信を流しながら作業することが割とあるのですが、流し見していても\u003Cstrong>なんとなく情報が入ってきてなんとなくわかる\u003C\u002Fstrong>のが楽です。\u003Cbr>毎日更新してくれるのもありがたい。日課になります。\u003Cbr>\u003Cbr>\u003Cbr>こうやって毎日いろんな配信動画を見ているうちに、ゲームを見ることにどんどんハマっていきました。\u003Cbr>\u003Cbr>\n\n\u003Ch2>esports\u003C\u002Fh2>\n\nゲーム配信を見ているうちに自然と esports の方へと興味も向いていき、大会の動画などを見るように。\u003Cbr>\u003Cbr>esports には、\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>\u003Cstrong>格闘ゲーム\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>パズルゲーム\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>FPS\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>レーシングゲーム\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>スポーツゲーム\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\n\n\u003Cbr>などなど様々なジャンルがあるのですが、今回は格闘ゲームを中心に話をしていこうと思います。\u003Cbr>\u003Cbr>\n\n\u003Ch3>大会\u003C\u002Fh3>\n\n色々な大会がありますが、その中でも有名なものに \u003Ca rel=\"noreferrer noopener\" href=\"http:\u002F\u002Fevo.shoryuken.com\u002F\" target=\"_blank\">EVO(Evolution Championship Series)\u003C\u002Fa>があります。\u003Cbr>1995年より開催されている\u003Cstrong>アメリカ最大級の格闘ゲーム大会\u003C\u002Fstrong>です。\u003Cbr>サイトのドメインが \u003Ccode>evo.shoryuken.com\u003C\u002Fcode> となっているのがいいですね。\u003Cbr>\u003Cbr>格闘ゲームのトーナメントを見ていく中で説明しておかないといけないのが、\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%83%88%E3%83%BC%E3%83%8A%E3%83%A1%E3%83%B3%E3%83%88%E6%96%B9%E5%BC%8F#%E3%83%80%E3%83%96%E3%83%AB%E3%82%A4%E3%83%AA%E3%83%9F%E3%83%8D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E6%96%B9%E5%BC%8F\" target=\"_blank\">ダブルイリミネーション方式\u003C\u002Fa>\u003C\u002Fstrong>についてです。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>ダブルイリミネーション方式\u003C\u002Fstrong>\u003Cbr>\u003Cbr>一回戦で負けた人同士で別にルーザーズのトーナメントが作成され、それを勝ち上がった人が今度は本トーナメントの二回戦で負けた人と戦うというふうにどんどん進んでいき、表だと最終的にウィナーズトーナメントの勝者(G)とルーザーズトーナメントの勝者(E)が戦うんですが、ここで G が負けた場合、G はルーザーズのトーナメントに移され再度 E と戦い優勝を決めるという方式になります。下の表を見ながらイメージしていただけますと。\u003Cbr>\u003Cbr>\u003Cbr>\n\n\u003Cfigure class=\"wp-block-image size-large\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Ff31bf5efd60b485f8dbf4e2d0800fb39\u002F2021-03-1702-1.png\" alt=\"\" class=\"wp-image-11052\"\u002F>\u003C\u002Ffigure>\n\n\u003Cbr>\u003Cbr>表を見ると、8人のトーナメントでもこれだけ試合が行われるので見るのに\u003Cstrong>かなり時間がかかります\u003C\u002Fstrong>。\u003Cbr>今年は新型コロナウイルスの影響で、ほとんどの大会がオンラインで行われたらしく、結構配信で見れたりするので、興味のある方は時間に余裕がある時に見てみてください。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>賞金\u003C\u002Fstrong>\u003Cbr>\u003Cbr>それでは優勝すると一体どれぐらい賞金がもらえるのでしょうか。\u003Cbr>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.esportsearnings.com\u002Fgames\" target=\"_blank\">こちらのサイト\u003C\u002Fa>によれば、\u003Cstrong>世界規模の大会ともなると多いものでなんと数十億円以上\u003C\u002Fstrong>の賞金が出るそうです。\u003Cbr>日本では法律の問題などもあって、海外と比べるとそれほど高額な賞金の出る大会は開催されていないような印象なんですが、 『\u003Ca rel=\"noreferrer noopener\" href=\"http:\u002F\u002Fpubg.dmm.com\u002F\" target=\"_blank\">PUBG\u003C\u002Fa>』 だと\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.anime.ac.jp\u002Fcontents\u002Fteam-e-sports\u002Fesports\u002F%E3%80%8Epubg-mobile-japan-league-season-1%E3%80%8F%E8%B3%9E%E9%87%91%E7%B7%8F%E9%A1%8D3%E5%84%84%E5%86%86%E3%80%81ntt%E3%83%89%E3%82%B3%E3%83%A2%E4%B8%BB%E5%82%AC%E3%81%AEe-sports%E3%83%AA%E3%83%BC\u002F\" target=\"_blank\">賞金総額3億円\u003C\u002Fa>とか、『\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fshadowverse.jp\u002F\" target=\"_blank\">Shadowverse\u003C\u002Fa>』 が1億円とか、\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fesports-doga.com\u002Fmoney_esports\u002F\" target=\"_blank\">色々と条件を満たすことでそれも可能\u003C\u002Fa>みたいです。\u003Cbr>\u003Cbr>ちなみに、日本人で一番獲得賞金が多いのは\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Ftwitter.com\u002Ffeeeeeeeeeg\" target=\"_blank\">ふぇぐ\u003C\u002Fa>さんという方で、Shadowverseの大会2つで優勝し、\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fesports-plus.jp\u002Fgame-title\u002Ftop-games-awarding-prize-money\u002F\" target=\"_blank\">約1億800万円の賞金を獲得\u003C\u002Fa>しています。賞金もすごいですが、有名になるとさらにスポンサーがつくので、そうなるとゲームをやって食べていける。ということが現実に。字面だけ見ると夢がある話ですが、実際ちょっと考えられないぐらい大変なんでしょうね。。\u003Cbr>\u003Cbr>大小様々な規模の大会が開かれています。挑戦してみたい方は\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fjesu.or.jp\u002F\" target=\"_blank\">こちらのサイト\u003C\u002Fa>に大会開催情報がまとめてあるようなので、参考にしてみてはいかがでしょうか。\u003Cbr>\u003Cbr>\n\n\u003Ch3>ストリートファイターV\u003C\u002Fh3>\n\n現在私が\u003Cstrong>どハマりして見ているのが『\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.capcom.co.jp\u002Fsfv\u002F\" target=\"_blank\">ストリートファイターV\u003C\u002Fa>』の動画\u003C\u002Fstrong>です。\u003Cbr>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.capcom.co.jp\u002Fstreetfighter\u002F\" target=\"_blank\">ストリートファイター\u003C\u002Fa>とは、カプコンより販売されている対戦型格闘ゲームで、もう30年以上もの歴史があります。\u003Cbr>\u003Cbr>esports では、予選大会を勝ち上がったプレイヤーたちがチームを組んでリーグ戦に挑む \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fsf.esports.capcom.com\u002F\" target=\"_blank\">SFL(STREET FIGHTER LEAGUE)\u003C\u002Fa> というものが有名です。\u003Cbr>4人1組のチームの中から毎回3人が選出され、10回の大会を戦い、成績上位3チームが本選に進み優勝を決めます。\u003Cbr>\u003Cbr>これまでスポーツ観戦には興味がなかったのですが、SFLを見て「\u003Cstrong>スポーツにはドラマがある\u003C\u002Fstrong>」ということを実感、初めて\u003Cstrong>スポーツ観戦の面白さを知りました。\u003C\u002Fstrong>\u003Cbr>\u003Cbr>下の動画を見てもらうとわかるように、\u003Cspan class=\"has-inline-color has-vivid-red-color\">\u003Cstrong>実況や解説が熱い\u003C\u002Fstrong>\u003C\u002Fspan>です。おかげで臨場感や場の盛り上がりがさらに感じられます。知識がなくても、それを聞きながら見るだけで、自分も十分に盛り上がれるので、もし見られるなら是非とも実況解説付きのものを見てほしいです。\u003Cbr>\u003Cbr>\u003Cbr>\n\n\u003Ciframe width=\"560\" height=\"315\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FvRqt0k6crZc\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\">\u003C\u002Fiframe>\n\n\u003Ch2>オススメ番組\u003C\u002Fh2>\n\nそれでは最後におすすめの番組をいくつか紹介して終わりにしようと思います。\u003Cbr>\u003Cbr>\u003Cbr>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCeqsiUADFPnth5sL49D-Thw\" target=\"_blank\">\u003Cstrong>格ゲー喫茶ハメじゅん\u003Cbr>\u003C\u002Fstrong>\u003C\u002Fa>\u003Cbr>TOKYO MXで毎週金曜23:30~24:00に放送されている、プロゲーマーの人たちをゲストに呼んでトークしてゲームする格闘ゲーム専門番組です。\u003Cbr>ゴールデンボンバーの\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.instagram.com\u002Futa830jun\u002F?hl=ja\" target=\"_blank\">歌広場淳\u003C\u002Fa>さんや格闘ゲーム実況解説者の\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Ftwitter.com\u002Fhameko?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor\" target=\"_blank\">ハメコ。\u003C\u002Fa>さんなどが出演しています。\u003Cbr>この番組を見ていると、プロゲーマーはゲームが上手いだけじゃなくて喋りも上手いんだなと思います。\u003Cbr>\u003Cbr>\u003Cbr>\u003Cstrong>\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.tv-tokyo.co.jp\u002Fariyoshieeeee\u002F\" target=\"_blank\">有吉ぃぃeeeee！\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fstrong>\u003Cbr>\u003Cbr>テレビ東京系列で、毎週日曜 22:00~22:48に放送されているゲーム・情報バラエティ番組です。\u003Cbr>MCの\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Ftwitter.com\u002Fariyoshihiroiki?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor\" target=\"_blank\">有吉弘行\u003C\u002Fa>さんがいろんな芸能人と一緒にゲームをします。\u003Cbr>最近見たもので、『\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.ea.com\u002Fja-jp\u002Fgames\u002Ffifa\u002Ffifa-21\" target=\"_blank\">FIFA 21\u003C\u002Fa>』 というサッカーゲームがあるのですが、人数分のゲーム機とソフトを揃えれば11人でそれぞれの選手を操作しながらプレイできるという機能があって、それを実際にやっていた回が見応えありました。\u003Cbr>\u003Cbr>\n\n\u003Cbr>以上で今日のお話は終わりです。\u003Cbr>これを機に、少しでもゲーム配信や esports に興味を持っていただければ幸いです。","2021-03-22T18:10:49+09:00",{"id":706,"createdAt":707,"updatedAt":708,"publishedAt":707,"revisedAt":708,"title":709,"tag":710,"recommended_articles":718,"eyecatch":719,"heading_list":17,"related_articles":723,"recruit":17,"is_html":24,"html_contents":724,"is_migration":24,"migration_date":725},"playstation5","2023-06-02T08:48:49.480Z","2023-08-08T03:20:05.871Z","PS5 騒動",[711,712,713],{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":14,"name":16,"top":17},{"id":19,"createdAt":20,"updatedAt":21,"publishedAt":22,"revisedAt":21,"name":23,"top":24},{"id":714,"createdAt":715,"updatedAt":716,"publishedAt":715,"revisedAt":715,"name":717,"top":17},"money","2023-07-13T01:35:18.003Z","2023-08-09T06:21:43.560Z","お金",[],{"url":720,"height":721,"width":722},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002F9c6cccda0e3346e282c86ef69c2affa3\u002F2021-01-shopping_tenbai.png",658,800,[],"家が狭いからリモート環境整えるのは無理だろうなと諦めて特に何もやっていなかったのですが、さすがに何とかしたいと思い始めました。\u003Cbr>\u003Cbr>今回は弊社のある社員が、最近話題の\u003Cstrong>「PS5 の転売」\u003C\u002Fstrong>について話しました。\n\n\u003Chr class=\"wp-block-separator\"\u002F>\n\n\u003Cbr>2020年11月12日、 SONYの次世代ゲーム機\u003Cstrong>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.playstation.com\u002Fja-jp\u002Fps5\u002F\" target=\"_blank\"> PlayStation 5\u003C\u002Fa>\u003C\u002Fstrong> が発売されました。\u003Cbr>発売に先行し、様々な販売店で予約抽選が行われたのですが、なんとか当選して発売日に購入することができました。\u003Cbr>多くの人が抽選に外れ購入できなかったのですが、発売から一ヶ月が経つ現在でも品薄の状態が続いています。そうなると転売が横行、問題になるのが最近の流れです。今回はそんな \u003Cstrong>PS5 の転売騒動\u003C\u002Fstrong>についてお話ししようと思います。\u003Cbr>\n\n\u003Cp class=\"has-vivid-red-color has-text-color\" style=\"font-size:15px\">\u003Cbr>※今回の話は2020年12月11日時点の話です。\u003Cbr>\u003Cbr>\u003C\u002Fp>\n\n\u003Ch2>過去の話\u003C\u002Fh2>\n\n2006年11月11日、 PlayStation 3  が発売された時にも同じような混乱が起きました。\u003Cbr>PS3 を購入するために、東京都千代田区有楽町のビックカメラ有楽町店に朝から並んでいた男性が、そのあまりの混雑具合に\u003Cstrong>「物売るってレベルじゃねーぞ」\u003C\u002Fstrong>と声を上げた映像がニュースで流れ、ある種のネットミームになった話は知っている人も多いかもしれません。\u003Cbr>\u003Cbr>この時のような買占め・品薄の前例があったので、次世代機の PlayStation 4 発売の際には、先だって米国で2013年11月15日に、日本では約3か月遅れの2014年2月22日に発売するように、発売日をずらすことで生産数をある程度確保。そのおかげで購買が分散し、極端な品薄状態を回避することに成功しました。\u003Cbr>\u003Cbr>\n\n\u003Ch2>PS5 の人気\u003C\u002Fh2>\n\nもちろん、今回の PS5 発売にあたって何の対策も講じられなかったわけではありません。それなりに在庫も確保した上で販売をスタートしたそうです。\u003Cbr>それでは何故このような状態が続いているのかですが、それは PS5 の\u003Cstrong>圧倒的なコストパフォーマンスからくる人気\u003C\u002Fstrong>にあります。\u003Cbr>\u003Cbr>こちらの表は PS5 のスペックをまとめたものです。\u003Cbr>\n\n\u003Cp class=\"has-vivid-red-color has-text-color\" style=\"font-size:15px\">\u003Cbr>※色々な情報を参考にまとめたものなので正確性に欠ける可能性があります。\u003Cbr>\u003C\u002Fp>\n\n\u003Cfigure class=\"wp-block-table\">\n\n\u003Ctable>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cstrong>CPU\u003C\u002Fstrong>\u003C\u002Ftd>\u003Ctd>AMD Zen 2\u003Cbr>8コア\u002F16スレッド\u003Cbr>最大3.5GHz\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cstrong>GPU\u003C\u002Fstrong>\u003C\u002Ftd>\u003Ctd>最大10.28 TFLOPs\u002F2.23GHz\u003Cbr>36ブロック(コンビュートユニット)\u003Cbr>メモリはシステムと共有\u003Cbr>レイ・トレーシング対応\u003Cbr>Custom RDNA 2 アーキテクチャ\u003Cbr>※RDNA 2 とは別物\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cstrong>メモリ\u003C\u002Fstrong>\u003C\u002Ftd>\u003Ctd>16GB GDDR6\u003Cbr>448GB\u002Fs\u003Cbr>システム\u002Fグラフィック供用\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cstrong>SSD\u003C\u002Fstrong>\u003C\u002Ftd>\u003Ctd>825GB\u003Cbr>転送速度 5.58GB\u002F秒\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cstrong>ストレージ拡張\u003C\u002Fstrong>\u003C\u002Ftd>\u003Ctd>NVMe SSD スロット\u003Cbr>おそらくPCI Express 4.0 x 4\u003Cbr>※PS4ゲームに限り、USBセツゾクデノカクチョウHHDにも対応\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cstrong>光学ドライブ\u003C\u002Fstrong>\u003C\u002Ftd>\u003Ctd>Ultra HD Blu-ray (66G\u002F100G) ~10xCAV\u003Cbr>BD-ROM (25G\u002F50G) ~8xCAV\u003Cbr>BD-R\u002FRE (25G\u002F50G) ~8xCAV\u003Cbr>DVD ~3.2xCLV\u003Cbr>※ドライブ搭載モデルのみ\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Cstrong>お値段\u003C\u002Fstrong>\u003C\u002Ftd>\u003Ctd>【光学ドライブあり】 49,980円\u003Cbr>【光学ドライブなし】 39,980円\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\n\n\u003C\u002Ffigure>\n\n\u003Cbr>CPUは \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.amd.com\u002Fja\u002Fproducts\u002Fcpu\u002Famd-ryzen-7-3700x\" target=\"_blank\">Ryzen 7 3700X\u003C\u002Fa> 、GPUは \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.nvidia.com\u002Fja-jp\u002Fgeforce\u002Fgraphics-cards\u002Frtx-2080\u002F\" target=\"_blank\">RTX2080\u003C\u002Fa> に相当します。これをそれぞれ市場価格で購入すると 約 4 万円と約 7 万円。さらにSSDだと約 2 万円に相当、メモリやその他のパーツは合わせて約 2 〜 3 万円。\u003Cstrong>同じようなゲーミングPCを組もうと思ったら合計15万円ぐらいかかるのが、PS5 だと約 5 万円で購入できてしまう\u003C\u002Fstrong>のです。\u003Cbr>\u003Cbr>スペックだけでなく色々と機能も追加されています。\u003Cbr>単純にグラフィックが綺麗になって\u003Cstrong>4K出力にネイティブに対応\u003C\u002Fstrong>するようになったり。\u003Cbr>また、\u003Cstrong>トリガーエフェクト\u003C\u002Fstrong>という、ゲームの状況に合わせてコントローラーのボタンから\u003Cstrong>反発力や張力が体感できる機能\u003C\u002Fstrong>が追加されていて、この機能によってよりゲームをリアルに感じられるようになりました。個人的には操作しづらかったので使っていませんが…。\u003Cbr>\u003Cbr>\n\n\u003Ch2>転売屋の台頭\u003C\u002Fh2>\n\nこんなに高スペックなゲーム機が 5 万円で買えてしまう！ということで一気に人気が高まってしまった PS5。争奪戦は避けられないだろうと、ビックカメラ、ヨドバシカメラなどの大手店舗は予約段階から予約抽選販売を開始しています。\u003Cstrong>倍率は50倍\u003C\u002Fstrong>にもなったそうです。\u003Cbr>それに対して Amazon や楽天は先着販売を決行、その結果、世間の顰蹙を買うことに。。。\u003Cbr>\u003Cbr>今年はマスクやmiro、ガンプラなどの転売が問題になりましたが、PS5の人気に注目した業者や個人が転売目的で商品を予約購入したためますます争奪戦は加速していきました。\u003Cbr>\u003Cbr>PS5 を抽選で手に入れた転売屋が Amazon マーケットプレイスに 398,000円 や 498,000 円などの高額で商品を出品し、桁を見間違えて購入したユーザーが購入キャンセルできず Amazon に訴え、\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fgame.watch.impress.co.jp\u002Fdocs\u002Fnews\u002F1278146.html\" target=\"_blank\">Amazonが PS5 の高額転売を一律停止にする\u003C\u002Fa>事態に発展。\u003Cbr>\u003Cbr>そして発売されるやすぐに、メルカリやヤフオクでも一斉に転売がスタート。事前に SIE(ソニー・インタラクティブエンターテイメント) がメルカリ社に対して高額転売問題についての意見申し入れを行っていたにもかかわらず、野放しの状態が続いています。\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.bcnretail.com\u002Fmarket\u002Fdetail\u002F20201112_199808.html\" target=\"_blank\">価格の倍以上で出品されている PS5 の多くは SOLD の状態になっている\u003C\u002Fa>そうです。\u003Cbr>さらに\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fjp.ign.com\u002Fps5\u002F48780\u002Fnews\u002Fps5\" target=\"_blank\">海外では PS5 を輸送中のトラックが襲われ強奪される事件\u003C\u002Fa>までもが発生しているとか。\u003Cbr>\u003Cbr>\n\n\u003Ch2>転売対策\u003C\u002Fh2>\n\nこうなることを予想して一応転売対策もされていました。\u003Cbr>\u003Cbr>例えばアメリカでは、\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.famitsu.com\u002Fnews\u002F202008\u002F27204699.html\" target=\"_blank\">PS5 の事前登録購入制\u003C\u002Fa>といって、PS をネットワークに接続して使うのに必要な個別の ID(\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.jp.playstation.com\u002Fpsn\u002Faccount\u002F\" target=\"_blank\">PSN ID\u003C\u002Fa>) というのが公式にあるのですが、ID のアクティビティ状態をチェックして転売目的ではない優良なアカウントのみを予約事前登録サイトに招待し、PS5 の予約をできるようにする取り組みが行われたそうです。\u003Cbr>日本でもやった方がいいという声は多かったのですが、何故か行われませんでした。\u003Cbr>\u003Cbr>日本の話だと、家電量販店の\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.nojima.co.jp\u002F\" target=\"_blank\">ノジマ\u003C\u002Fa>が、抽選をやったところで大量に転売屋が申し込みをしてきてキリがないので、\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.itmedia.co.jp\u002Fnews\u002Farticles\u002F2012\u002F09\u002Fnews095.html\" target=\"_blank\">申込12万件を目視で転売屋かどうか判定する\u003C\u002Fa>ということを行ったそうです。一体どういう判断で転売屋かどうかを見極めているのかどうかわかりませんが、途方もない話だと思いました。\u003Cbr>小売としては誰に売れようが売れればいいだけの話なのにこんなにも真摯に対応してくれるのか、とノジマの評判が上がったそうです。\u003Cbr>\u003Cbr>また、本体には保証書を付けず、買った際のレシートを保証書がわりにするということもやっていて、それが転売の抑止力になっているという話もあります。\u003Cbr>\u003Cbr>\u003Cbr>色々な話がありますが、一番の問題は大量に商品を買い占めて転売することだと思うので、それを防ぎつつ、欲しい人の手にちゃんと商品が渡るようになってくれればと思います。","2021-01-21T11:25:36+09:00",{"id":727,"createdAt":728,"updatedAt":729,"publishedAt":728,"revisedAt":729,"title":730,"tag":731,"recommended_articles":746,"eyecatch":747,"heading_list":17,"related_articles":751,"recruit":17,"is_html":24,"html_contents":752,"is_migration":24,"migration_date":753},"karaoke","2023-06-02T08:48:11.620Z","2023-08-09T09:43:52.434Z","お家でカラオケ",[732,733,739,740,741],{"id":19,"createdAt":20,"updatedAt":21,"publishedAt":22,"revisedAt":21,"name":23,"top":24},{"id":734,"createdAt":735,"updatedAt":736,"publishedAt":737,"revisedAt":737,"name":738,"top":17},"covid-19","2023-07-13T01:34:15.223Z","2023-08-09T06:22:12.114Z","2023-07-13T01:34:20.698Z","コロナ",{"id":26,"createdAt":27,"updatedAt":28,"publishedAt":27,"revisedAt":27,"name":29,"top":17},{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":14,"name":16,"top":17},{"id":742,"createdAt":743,"updatedAt":744,"publishedAt":743,"revisedAt":743,"name":745,"top":17},"music","2023-07-13T01:36:25.040Z","2023-08-09T06:21:33.752Z","音楽",[],{"url":748,"height":749,"width":750},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fd4cbc92d7ee9403fb47d5f0fe0e028fc\u002F2020-05-ebc886c8e8582e8d673ba245d5e60fdb.png",980,1309,[],"気づいたら夏になっていました。\u003Cbr>\n\n\u003Cbr>今回は弊社のある社員が「自宅でカラオケを楽しむ方法」について話しました。\n\n\u003Chr class=\"wp-block-separator\"\u002F>\n\n\u003Cbr>緊急事態宣言下、ストレス解消にカラオケをやりたいのですが、\u003Cbr>\u003Cstrong>\u003Cspan class=\"has-inline-color has-vivid-red-color\">外出自粛と3密\u003C\u002Fspan>\u003C\u002Fstrong>を避けるため、カラオケボックスに行くことはできません。\u003Cbr>そこで、自宅でカラオケができるようにしようと思いました。\u003Cbr>ということで、自宅でカラオケができるまでに何をやったか話そうと思います。\u003Cbr>\u003Cbr>\n\n\u003Ch2>家でカラオケといえば\u003C\u002Fh2>\n\n昔から家でカラオケを楽しむ方法はありました。\u003Cbr>私の家では、レーザーディスクカラオケプレーヤーや\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fsega.jp\u002F\" target=\"_blank\">セガ\u003C\u002Fa>から発売されていた家庭用ゲーム機「\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fsega.jp\u002Fhistory\u002Fhard\u002Fdreamcast\u002F\" target=\"_blank\">ドリームキャスト\u003C\u002Fa>」のインターネットカラオケ配信サービス「セガカラ」を使って自宅でカラオケをしていました。\u003Cbr>\u003Cbr>\n\n\u003Ch3>レーザーディスクカラオケプレーヤー\u003C\u002Fh3>\n直径30cmのディスクに両面で最大2時間映像を記録できる光ディスク規格のレーザーディスクを利用したカラオケ。\u003Cbr>カラオケのテロップや背景画像も現在のカラオケと同様に表示された。\u003Cbr>1枚のディスクに大体5～13曲が収録されている。\u003Cbr>\u003Cbr>\n\n\u003Ch3>セガカラ\u003C\u002Fh3>\n家庭用ゲーム機『ドリームキャスト』のユーザーを対象にしたインターネットカラオケ配信サービス。\u003Cbr>サービスを利用するにはドリームキャスト本体の他に、採点機能や音声エフェクト(エコー\u002Fボイスチェンジ\u002Fハモリなど)を搭載した『ドリームキャスト・カラオケ』が必要。\u003Cbr>2006年4月30日をもってサービス終了。\n\nとはいえ、これらを今使うわけにもいきません。\u003Cbr>もっと\u003Cstrong>手軽\u003C\u002Fstrong>に、そして\u003Cstrong>安価\u003C\u002Fstrong>で、\u003Cstrong>ストレスフリー\u003C\u002Fstrong>に歌えるのが理想です。\u003Cbr>そんなわけで候補を探してみました。\u003Cbr>\u003Cbr>\n\n\u003Ch2>候補\u003C\u002Fh2>\n\n家でカラオケ、といっても事態が収束したらおそらく使わなくなるでしょう。\u003Cbr>なので、\u003Cstrong>できる限り簡単なもの\u003C\u002Fstrong>にしておきたい。だけど\u003Cstrong>ある程度カラオケで歌っているような雰囲気\u003C\u002Fstrong>は味わいたい。というのが要件となります。\u003Cbr>そこで考えた候補がこの三つです。\u003Cbr>\u003Cbr>\n\n\u003Ch3>カラオケ機能付きマイク\u003C\u002Fh3>\n\n本体価格は20,000~30,000円。\u003Cbr>マイク本体にある程度曲が内蔵されていて、テレビに繋げば背景画像と歌詞が曲に合わせて流れるようになっています。\u003Cbr>曲はダウンロードで購入することができ、購入した曲をSDカードなどに保存してマスクに接続することで、利用することが可能です。\u003Cbr>しかし、メーカーが独自にサービスを展開している場合がほとんどのため、曲数が少なかったり、値段が高かったり、既に配信が終了されている曲があったりします。\u003Cbr>また、曲を選ぶにはマイク本体についているボタンを直接操作する必要があり、操作性に難が。\u003Cbr>\u003Cbr>\n\n\u003Ch3>スマホカラオケ\u003C\u002Fh3>\n\n用意するのはマイク付きのイヤホンとスマートフォンだけ。\u003Cbr>あとはカラオケのアプリをインストールして課金すれば、すぐに始められます。\u003Cbr>曲の種類は豊富で、検索もスマホのタッチパネルでできるのでスムーズです。\u003Cbr>ただカラオケをしている感があるかというと微妙。\u003Cbr>スマホの画面をテレビに映せばもう少し雰囲気が出そうですが、それだと歌声と映像の間に遅延が発生してしまうため、あまりおすすめはできません。\u003Cbr>\u003Cbr>\n\n\u003Ch3>ゲーム機カラオケ\u003C\u002Fh3>\n\n最後はゲーム機によるカラオケです。\u003Cbr>それぞれのゲーム機でカラオケ専用のアプリが提供されています。\u003Cbr>別途マイクを買って接続すれば、24時間300円~500円。1ヶ月1,000円~1,500円で歌い放題。\u003Cbr>1~2世代前から現行のゲーム機はほぼすべて対応しています。\u003Cbr>普通のカラオケと同じように、全国採点など各機能を使うことができます。\u003Cbr>\u003Cbr>\n\n\u003Cbr>以上、この3つの中から要件を満たしているものを考えた結果、\n\n\u003Cp class=\"has-pale-pink-color has-text-color\" style=\"font-size:18px\">\u003Cbr>\u003Cstrong>ゲーム機カラオケに決定！\u003C\u002Fstrong>\u003C\u002Fp>\n\n早速準備を始めました。\u003Cbr>\u003Cbr>\n\n\u003Ch2>準備\u003C\u002Fh2>\n\n用意したのはこちら。\u003Cbr>\u003Cbr>\n\n\u003Cul>\u003Cli>ゲーム機 \u003Ca href=\"https:\u002F\u002Fwww.nintendo.co.jp\u002Fsoftware\u002Fwiiu\u002Findex.html\" target=\"_blank\" rel=\"noreferrer noopener\">Wii U\u003C\u002Fa>\u003C\u002Fli>\u003Cli>スピーカー\u003C\u002Fli>\u003Cli>テレビ\u003C\u002Fli>\u003Cli>マイク \u003Ca href=\"https:\u002F\u002Fwww.sony.jp\u002Fmicrophone\u002Fproducts\u002FECM-PCV80U\u002F\" target=\"_blank\" rel=\"noreferrer noopener\">SONY ECM-PCV80U\u003C\u002Fa>\u003C\u002Fli>\u003Cli>AVケーブル\u002F3.5φ変換アダプタ\u003C\u002Fli>\u003Cli>カラオケ \u003Ca href=\"https:\u002F\u002Fwww.nintendo.co.jp\u002Fwiiu\u002Fkaraoke\u002F\" target=\"_blank\" rel=\"noreferrer noopener\">JOYSOUND for Wii U\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\n\n\u003Cbr>買い足したのはマイクと変換アダプタ、あとはカラオケアプリぐらい。\u003Cbr>\u003Cstrong>ゲーム機はWii Uを選びました。\u003C\u002Fstrong>\u003Cbr>元々家にあったのも選んだ理由の一つですが、他にも理由があります。\u003Cbr>まず、カラオケにある操作端末と似た形状をしており、さらにその操作もほとんど変わりがないので馴染みがあって使いやすい。\u003Cbr>そしてもう一つが\u003Cstrong>歌声の遅延対策\u003C\u002Fstrong>です。\u003Cbr>\u003Cbr>\n\n\u003Ch3>遅延対策\u003C\u002Fh3>\n\nゲーム機をケーブルでテレビに繋ぐと、デジタル処理が間に入るため、コンマ数秒音声に遅延が発生してしまい、自分の歌声と画面に表示される歌詞がずれてしまって気持ち悪いという\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fsupport.nintendo.co.jp\u002Fapp\u002Fanswers\u002Fdetail\u002Fa_id\u002F32338\" target=\"_blank\">問題\u003C\u002Fa>が。\u003Cbr>\n\n\u003Cbr>これの対策として、カラオケアプリには音声だけを外部で出力するように切り替える機能があらかじめ用意されています。\u003Cbr>それを使って映像はWii Uからテレビに出力し、音声はアナログでスピーカーから出力することで、音声と映像の間の遅延をなくすことができます。\u003Cbr>そのためにAVケーブルが必要でした。\u003Cbr>\u003Cbr>アナログで音声を出力できるのが、PS3とWii UしかなかったのもWii Uを選んだ理由です。\u003Cbr>\u003Cbr>\n\n\u003Ch2>完成\u003C\u002Fh2>\n\n無事問題も解決、\u003Cstrong>家でカラオケができるようになりました！\u003C\u002Fstrong>\u003Cbr>\u003Cbr>\n\n\u003Cfigure class=\"wp-block-image size-large\">\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F0eb919b93c74437dbd287ab903d9ea2c\u002Fd4cbc92d7ee9403fb47d5f0fe0e028fc\u002F2020-05-ebc886c8e8582e8d673ba245d5e60fdb.png\" alt=\"\" class=\"wp-image-3787\"\u002F>\u003C\u002Ffigure>\n\n\u003Cbr>まだ続きそうな自粛期間、自宅でカラオケをやってみるのもいいのではないでしょうか。\u003Cbr>よかったら参考にしてみてください。","2020-05-15T11:45:00+09:00",16,0,15,{"name":16},1788753751647]