[{"data":1,"prerenderedAt":477},["ShallowReactive",2],{"detailux-certification-basics":3,"detail_relatedux-certification-basicsdesign":26,"$ffgrZ3BKCrGjHqI09zIEABOY5G7ELv9_4MS5Sd9NJXDo":61,"$fS4sOnCUpoF-wMfw16HWwnBnngwddN9OaX5p2KHuFyVA":86,"works":313},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":6,"revisedAt":6,"title":7,"content2":8,"eyecatch":9,"tag":13,"heading_list":25,"recruit":19,"is_html":19,"is_migration":19},"ux-certification-basics","2026-04-03T06:01:36.737Z","2026-04-16T07:06:01.302Z","UX 検定をきっかけに、UX の考え方を整理してみた","\u003Cp>春は無闇に落ち込みます。\u003C/p>\u003Cp style=\"text-align: start\">この記事は、社内イベント「\u003Ca href=\"https://www.s2factory.co.jp/blog/tea/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C/u>\u003C/a>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社の yamada が、\u003Cstrong>UX 検定の受験をきっかけに、UX や人間中心設計\u003C/strong>について発表しました。\u003C/p>\u003Chr>\u003Cp style=\"text-align: start\">\u003Cbr>昨年の11月末に、\u003Cstrong>UX 検定(基礎)を受験\u003C/strong>しました。\u003C/p>\u003Cp>名刺の肩書きに UI デザイナーと書いていることもあり、今後この分野でやっていく以上、\u003Cstrong>UX についての知識はきちんと押さえておきたい\u003C/strong>と思い、その手始めとして受けてみました。\u003Cbr>\u003Cbr>今回は UX 検定の内容をもとに、人間中心設計(HCD)や UX の考え方について整理していきます。\u003C/p>\u003Ch2 id=\"h13d8bb8d79\">UX 検定とは\u003C/h2>\u003Cp>\u003Ca href=\"https://www.uxia.or.jp/certification/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>UX 検定\u003C/strong>\u003C/a>\u003Cstrong>は2022年にスタートした比較的新しい資格\u003C/strong>で、\u003Cstrong>UX や人間中心設計(HCD)の知識を体系的に学ぶ\u003C/strong>ことを前提としたものです。 \u003Cbr>\u003Cbr>今回受けた「基礎」は、UX や HCD の考え方を一通り理解しているかを見る位置づけの試験。 \u003Cbr>基礎については試験単体で受験できますが、\u003Cstrong>上位の「応用」は研修の受講が前提\u003C/strong>となっており、試験だけで進めるものではありません。\u003Cbr>\u003Cbr>また、UX 検定とは別に、\u003Cstrong>人間中心設計に関する資格として「専門家」「スペシャリスト」\u003C/strong>といった認定もありますが、こちらは\u003Cstrong>レポート提出や実務での改善実績\u003C/strong>が求められるなど、より実践寄りの内容になっています。現段階ではまだ難しそうだったので今回は見送りました。\u003Cbr>\u003Cbr>なお、\u003Cstrong>UX 検定と人間中心設計に関する資格は、それぞれ別の団体が運営\u003C/strong>しています。 \u003C/p>\u003Ch3 id=\"h0cf6273d17\">試験に向けて\u003C/h3>\u003Cp>試験に向けては、学習推薦図書 4 冊のうち下の 2 冊を読んで臨みました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.amazon.co.jp/%E3%82%A2%E3%83%95%E3%82%BF%E3%83%BC%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB2-UX%E3%81%A8%E8%87%AA%E7%94%B1-%E8%97%A4%E4%BA%95-%E4%BF%9D%E6%96%87/dp/4296106317\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&media=0&url=https%3A%2F%2Famzn.asia%2Fd%2F07NFcB6F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.amazon.co.jp/%E4%BA%BA%E9%96%93%E4%B8%AD%E5%BF%83%E8%A8%AD%E8%A8%88%E5%85%A5%E9%96%80-HCD%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%83%BC-%E5%B1%B1%E5%B4%8E-%E5%92%8C%E5%BD%A6/dp/476490506X\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Famzn.asia%2Fd%2F0fd0PoCb&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Cp>\u003Cbr>過去問や十分な練習問題は公開されておらず、公式サイトに掲載されているのも問題例が数問ある程度です。 \u003Cbr>そのため、出題形式のイメージを掴みつつ、\u003Cstrong>受験者が作成した予想問題\u003C/strong>も購入して何度か解いて対策。\u003Cbr>\u003Cbr>シラバスも公開されているため、それをもとに AI で内容を整理しながら、全体像を掴むことを意識して進めました。\u003C/p>\u003Ch3 id=\"h25cf28808d\">試験を受けてみて\u003C/h3>\u003Cp>今回はオンラインで自宅から受験しました。\u003Cbr>\u003Cbr>試験自体は、UX や人間中心設計に関する基礎知識が幅広く問われる内容で、特定の分野に偏るというよりも、\u003Cstrong>全体をバランスよく理解しているかを見る印象\u003C/strong>でした。\u003Cbr>\u003Cbr>実際に受けてみると、学習推薦図書からの出題が多かったように思います。\u003Cbr>事前に解いていた予想問題も再現度が高く、個人的にはかなり参考になりました。\u003Cbr>\u003Cbr>\u003Cstrong>結果は項目ごとの得点が表示される形式\u003C/strong>で、どの分野ができていたかは分かる一方で、どこをどう間違えたのかまでは確認できませんでした。 \u003Cbr>無事に合格はできたものの、振り返りのしづらさは少し気になるポイントです。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/2cceb7c904a74dccbb44f00ac01f3678/%E8%A9%A6%E9%A8%93%E7%B5%90%E6%9E%9C.png?w=650&h=581\" alt=\"試験結果\" width=\"650\" height=\"581\">\u003C/figure>\u003Cp>\u003Cbr>\u003Cstrong>合格すると、証書やロゴをダウンロード\u003C/strong>でき、名刺などに掲載することもできます。\u003Cbr>ただ、基礎だと少し物足りなさもあるので、応用に合格した際には使ってみてもいいかもしれません。\u003C/p>\u003Ch2 id=\"h9152cc286e\">UXと人間中心設計について\u003C/h2>\u003Cp>せっかくなので、UX(ユーザーエクスペリエンス)の考え方の土台となる人間中心設計(HCD)についても基本的な考え方を整理しておきます。\u003Cbr>\u003Cbr>UX は\u003Cstrong>「ユーザーがどんな体験をしたか」\u003C/strong>という全体の話で、単に使いやすいかどうかだけではなく、\u003Cstrong>その体験が良かったかどうか\u003C/strong>まで含めて考えます。\u003Cbr>\u003Cstrong>ユーザビリティ(使いやすさ)\u003C/strong>やユーザー視点で課題解決を考える\u003Cstrong>デザイン思考\u003C/strong>といった考え方も含め、その\u003Cstrong>ベースにあるのが人間中心設計(HCD)\u003C/strong>です。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/70d85d9a84f14358a785504abb03148f/UX%E3%81%A8%E4%BA%BA%E9%96%93%E4%B8%AD%E5%BF%83%E8%A8%AD%E8%A8%88%E3%81%AE%E9%96%A2%E4%BF%82%E5%9B%B3.png?w=750&h=409\" alt=\"UXと人間中心設計について\" width=\"750\" height=\"409\">\u003C/figure>\u003Cp>\u003Cbr>人間中心設計は、ユーザーを中心に考えて設計を進めるための考え方やプロセスのことを指します。\u003C/p>\u003Ch3 id=\"h4139147f5a\">HCDサイクルとは\u003C/h3>\u003Cp>人間中心設計には「HCD サイクル」と呼ばれる考え方があります。\u003Cbr>\u003Cbr>これは、\u003Cstrong>使いやすさや体験の質を継続的に改善していくためのプロセス\u003C/strong>です。 \u003Cbr>PDCA サイクルに近い考え方ですが、よりユーザー視点に寄せたものになっています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/d36a72888d7c4b879b66dc5710b34fe5/Gemini_Generated_Image_cr5u3jcr5u3jcr5u%20(2).png?w=750&h=409\" alt=\"HCDサイクルとは\" width=\"750\" height=\"409\">\u003C/figure>\u003Cp>\u003Cbr>流れとしては、以下のステップを繰り返していきます。\u003C/p>\u003Col>\u003Cli>\u003Cstrong>状況を把握する(ユーザー調査や観察)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>要求を整理する(要件定義やペルソナ設計)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>設計して解決案を作る\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>評価する(テストや検証)\u003C/strong>\u003C/li>\u003C/ol>\u003Cp>これを繰り返していくことで、プロダクトを改善していきます。\u003C/p>\u003Cp>こうした改善を進めるうえでは、ユーザビリティをはじめとして、UX に関するさまざまな考え方やモデルを整理して捉えておくことも重要です。ここからは、それらの基本的な概念について順に見ていきます。\u003C/p>\u003Ch3 id=\"hb9c3f7e049\">ユーザビリティ\u003C/h3>\u003Cp>人間中心設計を考えるうえで重要な要素のひとつが「ユーザビリティ」です。\u003Cbr>\u003Cbr>ユーザビリティは、\u003Cstrong>製品やサービスの「使いやすさ」を測るための指標\u003C/strong>で、主に次の3つの観点で捉えられます。\u003C/p>\u003Cul>\u003Cli>有効さ：目的を正しく達成できるか\u003C/li>\u003Cli>効率：少ない手間や時間で達成できるか\u003C/li>\u003Cli>満足度：使っていて不快でないか、納得感があるか\u003C/li>\u003C/ul>\u003Cp>この考え方は、\u003Cstrong>ISO 9241-11 で定義\u003C/strong>されており、ユーザビリティは\u003Cstrong>「特定の利用者が、特定の目的を達成するにあたり、特定の状況で、どれだけ有効・効率的かつ満足できるかの度合い」\u003C/strong>とされています。\u003Cbr>\u003Cbr>このユーザビリティの考え方は1990年代から整理されてきたもので、1998年の ISO 9241-11 をベースに現在の UX の考え方へと発展してきました。\u003C/p>\u003Ch3 id=\"h3fc3754f44\">ユーザーエクスペリエンス\u003C/h3>\u003Cp>\u003Cstrong>ユーザビリティが「ユーザーが目的を達成できたかどうか」を重視\u003C/strong>するのに対し、\u003Cstrong>UX は「その体験が良いものだったかどうか」を重視\u003C/strong>します。\u003Cbr>サービスやプロダクトを認知してから、実際に体験し、その後に振り返るまでの一連の流れすべてがUXに含まれます。\u003Cbr>\u003Cbr>UX にはさまざまな考え方やモデルがありますが、ここではいくつか代表的なものを見てみましょう。\u003Cbr>\u003Cbr>\u003C/p>\u003Ch4 id=\"h381e44aade\">\u003Cstrong>UX のハニカム構造\u003C/strong>\u003C/h4>\u003Cp>\u003Cstrong>UX を構成する要素を 7 つに分けたモデル\u003C/strong>です。\u003Cbr>\u003Cstrong>使いやすさだけでなく、有用性や信頼性、魅力といった観点\u003C/strong>も含まれています。\u003Cbr>\u003Cbr>体験に当てはめると一見当たり前に見えますが、すべてを満たすのは意外と難しく、\u003Cstrong>良い体験を考えるうえで欠かせない基準\u003C/strong>になります。\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/f3167ef6f73a4ab48c0c580a3481a708/%E3%83%8F%E3%83%8B%E3%82%AB%E3%83%A0%E6%A7%8B%E9%80%A0.png\" alt=\"\" width=\"1408\" height=\"768\">\u003C/figure>\u003Cp>\u003C/p>\u003Ch4 id=\"h4416745511\">\u003Cbr>\u003Cstrong>UXの 5 階層モデル\u003C/strong>\u003C/h4>\u003Cp>\u003Cstrong>UXの構成要素を 5 つの層で整理したモデル\u003C/strong>です。\u003C/p>\u003Cul>\u003Cli>戦略：ユーザーのニーズとビジネスの目的 \u003C/li>\u003Cli>要件：必要な機能やコンテンツ \u003C/li>\u003Cli>構造：情報設計や導線 \u003C/li>\u003Cli>骨格：レイアウトやインターフェース \u003C/li>\u003Cli>表層：ビジュアルデザイン\u003C/li>\u003C/ul>\u003Cp>\u003Cstrong>ウェブ構築では、表層のビジュアルだけでなく、その下にある構造や要件まで含めて設計\u003C/strong>する必要があります。\u003Cbr>\u003Cbr>デザイナーは結果としての体験そのものを直接つくることはできませんが、その体験が良くなるように設計することはできます。 つまり、\u003Cstrong>結果ではなく、その手前の設計によってUXを形づくっていくという考え方\u003C/strong>になります。\u003Cbr>\u003Cbr>\u003C/p>\u003Ch4 id=\"he4c02a1baa\">ハッセンツァール\u003Cstrong>モデル\u003C/strong>\u003C/h4>\u003Cp>\u003Cstrong>デザイナー視点とユーザー視点の流れを整理したモデル\u003C/strong>です。\u003Cbr>\u003Cbr>\u003Cstrong>デザイナーは、機能や表現、インタラクションといった「意図された性質」を設計\u003C/strong>します。 \u003Cbr>一方で\u003Cstrong>ユーザーは、それをもとに体験をし、「魅力」や「満足」といった結果\u003C/strong>を受け取ります。\u003Cbr>\u003Cbr>つまり、デザイナーとユーザーでは見ているものが異なります。\u003Cbr>\u003Cbr>デザイナーが直接つくれるのは体験そのものではなく、その手前にある設計の部分です。 \u003Cbr>結果としての体験はユーザー側で生まれるものですが、そこにつながるように設計することはできます。\u003Cbr>\u003Cbr>\u003C/p>\u003Ch4 id=\"h9644a53fee\">\u003Cstrong>UXを時間で捉える(UX白書)\u003C/strong>\u003C/h4>\u003Cp>UX は時間の流れの中でも変化します。\u003C/p>\u003Cul>\u003Cli>予期的 UX：サービスを知ったときに抱く印象や期待 \u003C/li>\u003Cli>一時的 UX：利用しているときの体験 \u003C/li>\u003Cli>エピソード的 UX：利用後の振り返り \u003C/li>\u003Cli>累積的 UX：全体を通して形成される印象 \u003C/li>\u003C/ul>\u003Cp>例えば飲食店であれば、来店前の期待、食事中の体験、帰宅後の満足感まで含めてUXといえます。\u003Cbr>このように、\u003Cstrong>UX は単一の瞬間ではなく、要素・構造・時間の積み重ね\u003C/strong>によって成り立ってるのです。\u003C/p>\u003Ch3 id=\"h0ae0492e09\">デザイン思考\u003C/h3>\u003Cp>いろんな企業や自治体で「デザイン思考」という言葉が使われるようになって久しいですが、これはデザイナーだけのものではなく、さまざまな場面で活用される考え方です。\u003Cbr>デザイン思考では、\u003Cstrong>最初から答えを出そうとするのではなく、課題を探しながら解決していくプロセスを重視\u003C/strong>します。\u003C/p>\u003Cp>代表的なモデルのひとつに「\u003Cstrong>ダブルダイヤモンドモデル\u003C/strong>」があります。\u003Cbr>これは、まずアイデアを広く出して課題を見つけ(発散)、そこから重要な問題に絞り込む(収束)。  \u003Cbr>次に、その問題に対する解決案を再び広げ(発散)、最適な案に絞る(収束)という流れで進めていくものです。\u003C/p>\u003Cp>また、デザイン思考は次のようなプロセスとして整理されることもあります。\u003C/p>\u003Col>\u003Cli>理解：インタビューや観察を通してユーザーを知る  \u003C/li>\u003Cli>定義：どこに問題があるのかを整理する  \u003C/li>\u003Cli>発想：ブレストなどでアイデアを広げる  \u003C/li>\u003Cli>試作：アイデアを形にする  \u003C/li>\u003Cli>テスト：ユーザーの反応を見て検証する  \u003C/li>\u003C/ol>\u003Cp>これらを一度で終わらせるのではなく、\u003Cstrong>繰り返しながら精度を高めていくことが重要\u003C/strong>です。\u003C/p>\u003Ch2 id=\"ha214098e44\">まとめ\u003C/h2>\u003Cp>UX にはさまざまなモデルやフレームワークがあり、どれが正解というよりも、\u003Cstrong>状況に応じて使い分けながら試していくことが大切\u003C/strong>だと感じました。\u003Cbr>\u003Cbr>今回あらためて整理してみて、UX やデザイン思考に共通しているのは、\u003Cstrong>「調査 → 要件定義 → アイデア出し → 試作 → テスト」といったプロセスを、一度で終わらせるのではなく、行き来しながら繰り返していくという姿勢\u003C/strong>だと実感しています。\u003Cbr>とにかく一度つくって終わりではなく、プロセスを回し続けて改善していくこと。その考え方が根底にあるのが UX なのだと思います。\u003Cbr>\u003Cbr>まだ知識として学んでいる段階で、自分の中で体系立てて整理しきれていない部分も多いですが、実務の中で使いながら理解を深めていきたいです。\u003Cbr>\u003Cbr>\u003Cstrong>ちょうど現在、UX 検定の申込受付期間(試験は7月)\u003C/strong>でもあるので、興味がある方はこのタイミングで受けてみるのも良いかもしれません。\u003C/p>",{"url":10,"height":11,"width":12},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/81c9f7a9fe274d6191ae67e096f7daf2/UX.jpg",2819,4229,[14,20],{"id":15,"createdAt":16,"updatedAt":17,"publishedAt":16,"revisedAt":16,"name":18,"top":19},"design","2023-06-01T09:41:33.897Z","2023-08-09T06:37:55.089Z","デザイン",false,{"id":21,"createdAt":22,"updatedAt":23,"publishedAt":22,"revisedAt":22,"name":24,"top":19},"study","2023-06-01T09:41:55.178Z","2023-08-09T06:31:18.978Z","勉強",true,{"contents":27,"totalCount":58,"offset":59,"limit":60},[28,38,48],{"id":29,"eyecatch":30,"publishedAt":34,"createdAt":35,"title":36,"is_html":19,"content2":37},"figma-plugin",{"url":31,"height":32,"width":33},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/4eb2c2eb6cf4470b9b0ef247889fd582/figma.jpg",2784,4096,"2026-04-02T01:54:21.369Z","2026-03-31T03:52:33.440Z","Figma の作業を効率化するプラグインを作ってみた","\u003Cp>\u003Cstrong>デザインの現場では、画面の命名やフレームの作成、整列、スタイルの整理といった細かい作業が発生\u003C/strong>します。\u003Cbr>一つひとつは単純ですが、積み重なると時間を奪い、\u003Cstrong>ミスやストレスの原因\u003C/strong>にもなります。\u003C/p>\u003Cp>こうした作業を減らすために、\u003Ca href=\"https://www.s2factory.co.jp/blog/event-ai-agent/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>社内での AI エージェント検証\u003C/strong>\u003C/a>をきっかけに、\u003Ca href=\"https://code.claude.com/docs/ja/overview\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Claude Code\u003C/strong>\u003C/a>\u003Cstrong> を使って\u003C/strong>\u003Ca href=\"https://www.figma.com/ja-jp/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Figma\u003C/strong>\u003C/a>\u003Cstrong> 上の作業を効率化するプラグイン\u003C/strong>をいくつか作り始めました。\u003C/p>\u003Cp>というわけでこの記事では、\u003Cstrong>作ったプラグインを紹介\u003C/strong>していきたいと思います。\u003Cbr>\u003Cbr>AI エージェント検証についての記事はこちらです。\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/event-ai-agent/\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fevent-ai-agent%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Ch2 id=\"hf9f18e5bd9\">Frame Bulk Generator\u003C/h2>\u003Cp>\u003Cstrong>画面一覧をもとに、画面名とサイズをまとめて反映できるプラグイン\u003C/strong>です。\u003C/p>\u003Cp>あらかじめ画面一覧がある場合でも、Figma 上では名前の貼り付けとサイズ設定を一つずつ行う必要があり、手間がかかっていました。数が増えると、コピペミスも起きやすくなります。\u003Cbr>この作業をまとめて済ませられるようになったことで、初期構成の準備を短時間で進められるようになりました。\u003Cbr>\u003C/p>\u003Cp>\u003Cstrong>使い方\u003C/strong>\u003C/p>\u003Col>\u003Cli>\u003Cstrong>スプレッドシートなどから画面一覧をコピー\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>プラグインに貼り付け\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>画面サイズを指定して実行\u003C/strong>\u003C/li>\u003C/ol>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/2bc2442126414af2b324590d29942a1a/Frame%20Bulk%20Generator.png?w=498&h=600\" alt=\"\" width=\"498\" height=\"600\">\u003C/figure>\u003Ch2 id=\"h54553cec90\">Frame Labeler\u003C/h2>\u003Cp>オートレイアウトで整理した画面でも、\u003Cstrong>フレーム名を見える形で管理できるプラグイン\u003C/strong>です。\u003Cbr>\u003Cbr>オートレイアウトで画面をまとめるとフレーム名が表示されなくなり、どの画面なのか分かりづらくなります。せっかく付けた名前も活かせず、確認や共有の手間が増えていました。\u003Cbr>そこで、フレーム名をラベルとして画面上に配置し、\u003Cstrong>ラベルと画面をオートレイアウトでまとめる\u003C/strong>ことで、見た目を崩さずに名前を表示できるようにしました。フレーム名を変更すれば\u003Cstrong>ラベルや構造にも反映される\u003C/strong>ため、個別に修正する必要もありません。\u003C/p>\u003Cp>\u003Cstrong>使い方\u003C/strong>\u003C/p>\u003Col>\u003Cli>\u003Cstrong>ラベルを付与したいフレームを選択(複数可)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>プラグインを実行\u003C/strong>\u003C/li>\u003C/ol>\u003Cp>\u003Cspan style=\"color: #999999\">※フレーム名を変更した場合は再実行するとラベルにも反映されます\u003C/span>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1106f8a898dd4dfd9e8aa2e917ab1f00/Frame%20Labeler.png\" alt=\"Frame Labeler\" width=\"2300\" height=\"1388\">\u003C/figure>\u003Ch2 id=\"h30d8b8ca78\">Variable Exporter\u003C/h2>\u003Cp>Variables の情報をもとに、\u003Cstrong>スタイルシートをそのまま書き出せるプラグイン\u003C/strong>です。\u003Cbr>\u003Cbr>Variablesでデザインを管理していても、最終的にはスタイルガイドを別途整える必要があり、同じ内容を作り直す手間が発生していました。\u003Cbr>そこで、Variablesの内容をそのままスタイルとして書き出すことで、\u003Cstrong>デザインと資料を分けずに管理\u003C/strong>できるようにしました。スタイルシート作成にかかる時間も短縮されています。\u003C/p>\u003Cp>\u003Cspan style=\"color: #999999\">※テキストサイズの反映についてはまだ調整中です\u003C/span>\u003C/p>\u003Ch2 id=\"ha214098e44\">まとめ\u003C/h2>\u003Cp>今回紹介したプラグインは、どれも大きな機能ではありませんが、\u003Cstrong>日々の細かい作業を確実に減らしてくれるもの\u003C/strong>です。\u003Cbr>画面の準備や整理、スタイルの書き出しといった工程をまとめて効率化することで、手を動かす時間を減らし、\u003Cstrong>設計や検討に集中できる状態\u003C/strong>をつくっています。\u003C/p>\u003Cp>社内で進めているAIエージェントの検証も含め、こうした取り組みを通して、これまで手作業で行っていた部分を少しずつ置き換えられるようになってきました。結果として、作業負担の軽減だけでなく、ミスの削減にもつながっています。\u003C/p>\u003Cp>今回紹介したもの以外にも、まだ試している段階のものや、これから改善していくものもあります。\u003Cstrong>今後も新しく作ったプラグインや運用の変化があれば、この記事に追記していく予定\u003C/strong>です。\u003C/p>\u003Cp>引き続き、デザイン業務の中で「減らせる作業」を見つけながら、より効率的に進められる方法を探っていきます。\u003C/p>",{"id":39,"eyecatch":40,"publishedAt":44,"createdAt":45,"title":46,"is_html":19,"content2":47},"noel2025",{"url":41,"height":42,"width":43},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/e5ab4815df3942ccbfa7bd994c2233e3/1.png",1800,2400,"2026-03-10T00:38:35.975Z","2026-01-08T07:37:35.535Z","NOËL 2025 特設サイト 制作振り返り","\u003Cp>弊社は、これまで\u003Ca href=\"https://www.pierreherme.co.jp/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>ピエール・エルメ\u003C/strong>\u003C/a>の Web サイト制作に、デザインと実装の両面から継続的に携わってきました。\u003Cbr>年末に公開される「NOËL」のマカロンのサイトは、その中でも毎年スペシャルサイトとして制作しているページです。\u003C/p>\u003Cp>2025年も過去の延長ではなく、あらためて表現や体験の設計から考え直し、新たに制作しました。\u003Cbr>\u003Cstrong>深海をモチーフにした世界観\u003C/strong>や、\u003Cstrong>サイト全体を通して展開される演出\u003C/strong>など、細かな検討を重ねながら形にしています。\u003C/p>\u003Cp>本記事では、NOËL 2025 特設サイトの制作を振り返りつつ、\u003Cstrong>デザインと実装の両面から、表現や実装をどのように組み立てていったのか\u003C/strong>を紹介したいと思います。\u003Cbr>\u003Cbr>実際のサイトはこちらです。\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.pierreherme.co.jp/feature/noel-2025/\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.pierreherme.co.jp%2Ffeature%2Fnoel-2025%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Ch2 id=\"h3bba4f50d6\">テーマと表現\u003C/h2>\u003Cp>今回制作した NOËL 2025 特設サイトは、年末に公開されるコンテンツとして、例年と同様に力を入れて制作したページです。\u003C/p>\u003Cp>テーマとして提示されていたのは、\u003Cstrong>「深海(アビス)」をモチーフにした世界観\u003C/strong>。\u003Cbr>\u003Cstrong>冒頭は、海面からマカロンが海底に向かって落ちていくアニメーション\u003C/strong>から始まります。そこから\u003Cstrong>スクロールに合わせて、背景のグラデーションや泡の演出が少しずつ変化\u003C/strong>していきます。\u003Cbr>\u003Cbr>要素を場面ごとに切り替えるのではなく、\u003Cstrong>同じ要素の状態を変えていく\u003C/strong>ことで、ページ全体が徐々に沈んでいく印象をつくりました。スクロール量がそのまま深さに対応する構成です。\u003Cbr>\u003Cbr>当初は逆方向の流れも想定していましたが、体験としての自然さを優先し、現在のものに落ち着きました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 75%;\">\u003Ciframe src=\"https://www.youtube.com/embed/0CUs99XDKqI?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\" referrerpolicy=\"strict-origin\">\u003C/iframe>\u003C/div>\u003Cp>\u003Cbr>商品情報のエリアでも、背景の泡や揺らぎはそのまま残しながら、商品画像の周囲に泡のフレームを重ねています。視線を商品に集めると同時に、海の中の要素としての泡もそこで見せ続けることで、流れを断ち切らず、世界観の中でフォーカスをつくっています。\u003Cbr>\u003Cbr>また、\u003Cstrong>パッケージにも使われているサンゴのイラストが持つきらめきや質感を、Web 上でも表現できないか\u003C/strong>という要望があり、制作の中でも表現として工夫したポイントの一つです。\u003C/p>\u003Ch2 id=\"ha2fbbc5f62\">実装について\u003C/h2>\u003Cp>今回のサイトでは、砂や泡の表現を画面全体で動かしています。そのため、処理負荷を前提に実装を組み立てました。\u003C/p>\u003Cp>\u003Cstrong>砂は WebGL のシェーダーを使用し、パーティクルで構成\u003C/strong>しています。数が数万個に及ぶため、CPU では負荷が高くなり重くなってしまうため、GPU で並列処理できるように \u003Cstrong>GPGPU という技術を採用\u003C/strong>し実装しました。描画や動きの計算を GPU で処理することで、数万個のパーティクルが滑らかに動くように実装しています。\u003C/p>\u003Cp>通常のテキスト要素では、砂のアニメーションを表現できないため、\u003Cstrong>一部のテキストを 3D モデルとして作成し、WebGL で描画・配置\u003C/strong>。ただし、そのままでは検索やテキスト選択ができなくなってしまうため、\u003Cstrong>SEO 的観点\u003C/strong>からも \u003Cstrong>DOM 上には同内容のテキストも配置\u003C/strong>し、表現と情報の両立を図りました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/34caffde445d451ca19cdef83760216e/%E7%A0%82%E3%81%AE%E8%A1%A8%E7%8F%BE.png\" alt=\"砂の表現\" width=\"1887\" height=\"1044\">\u003Cfigcaption>テキストは 3D で作成。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>背景では、泡が画面下部から上部へと浮かび続けています。\u003Cbr>初めは画面全体に満遍なく漂っていますが、スクロールが進みサンゴのイラストの位置に達すると、左右へと散るようにしています。中央から泡が減ることで、自然にコンテンツへ視線が向かうようにしています。\u003C/p>\u003Cp>この泡も砂と同じく \u003Cstrong>WebGL のシェーダーで制御\u003C/strong>し、\u003Cstrong>ノイズ関数を用いて形状を変化させ、水中らしい速度や揺れ幅になるよう調整\u003C/strong>しました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cdiv style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 75%;\">\u003Ciframe src=\"https://www.youtube.com/embed/oSIIvT5jZ-0?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\" referrerpolicy=\"strict-origin\">\u003C/iframe>\u003C/div>\u003Cp>\u003Cbr>一方で、\u003Cstrong>商品情報エリアで商品画像を囲む泡\u003C/strong>は、別のアプローチを取っています。こちらは以前ブログで解説した \u003Cstrong>SVG の円アニメーションを応用\u003C/strong>したものです。\u003Cbr>視線を集めるフレームとして機能させながら、水中の揺らぎとしても違和感が出ないよう、動きや歪みを調整しています。\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://www.s2factory.co.jp/blog/svg-animation/\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fwww.s2factory.co.jp%2Fblog%2Fsvg-animation%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/dbf4059fd28646b7887aff54eb237ec5/awa.png\" alt=\"限定のテキスト\" width=\"1754\" height=\"1037\">\u003Cfigcaption>右下の限定のテキストは海藻をイメージした動きに。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cstrong>サンゴのイラストに使われている箔押しの質感を、Web上でもどう再現するか\u003C/strong>も今回のテーマでした。スクロール位置に応じて色味や干渉の見え方が変化するようにし、きらめきがわずかに揺らぐ印象をつくっています。\u003C/p>\u003Cp>この表現はサンゴのイラストだけでなく、一部のテキストにも展開しています。強いエフェクトではなく、あくまで質感として馴染ませることで、全体の世界観に統一感を持たせました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/4685154937f147cc81fb4b135aa6b471/%E3%82%B5%E3%83%B3%E3%82%B4.png\" alt=\"サンゴのイラスト\" width=\"2204\" height=\"1704\">\u003Cfigcaption>スクロール位置によって色味が変わる。\u003C/figcaption>\u003C/figure>\u003Ch3 id=\"h20a7e56e9b\">ブラウザ差への対応\u003C/h3>\u003Cp>ブラウザごとの差も、実装を進める中で意識していた点のひとつです。\u003Cbr>SVG で表現していた部分が Safari では重くなることが判明したため、その箇所は Canvas に置き換えて、サイトのパフォーマンスが落ちないように調整しました。\u003C/p>\u003Cp>Chrome で問題なく動いていても、Safari やスマートフォンで成立しない表現は採用していません。\u003Cbr>見た目や動きの印象を変えずに、\u003Cstrong>さまざまな環境で無理なく動作\u003C/strong>するようにしています。\u003C/p>\u003Ch2 id=\"h70d3b5ba0f\">デザイナーとエンジニアの連携\u003C/h2>\u003Cp>今回の制作では、\u003Cstrong>早い段階で動きを確認できるモックを用意\u003C/strong>しました。砂や泡、揺らぎといった表現は静止画では判断できないため、密度や速度、スクロール時の変化量を実際に動かしながら決めていく必要があったからです。\u003Cbr>\u003Cbr>制作チーム内でも、完成デザインを渡してから実装するという流れではなく、\u003Cstrong>動く状態を前提\u003C/strong>に進めています。砂や泡の密度、揺らぎの強さ、スクロール時の変化量などは、実際に動かした状態で確認しながら決めていきました。静止画で固めてから実装するのではなく、挙動を見ながら細部を詰めていく進め方です。(正しいか確認取りたい)\u003C/p>\u003Cp>このモックは制作チーム内の検証だけでなく、ピエール・エルメの本社がフランスにあるため、本国側との共有にも使っています。完成形を言葉で説明するのではなく、実際の動きを見せながら認識を揃えていきました。\u003C/p>\u003Ch3 id=\"hbc6a78803c\">動きの強さのバランス\u003C/h3>\u003Cp>調整の中で、結果的に\u003Cstrong>採用しなかった表現\u003C/strong>もあります。\u003Cbr>たとえば、商品周りの揺らぎや動きについては、当初はもっと強くかけることも可能でした。\u003Cbr>\u003Cbr>ただ、動きを強めすぎると視線が演出に引っ張られ、商品そのものが見えづらくなります。そのため、動きをなくすのではなく、意識しない程度に抑えています。\u003Cbr>結果として、表現を足していくというよりも、\u003Cstrong>「どこで止めるか」を決めていく作業が多かった\u003C/strong>、という印象です。\u003C/p>\u003Ch2 id=\"ha214098e44\">まとめ\u003C/h2>\u003Cp>弊社では、社内の\u003Cstrong>デザイナーとエンジニア\u003C/strong>が普段から一緒にプロジェクトに関わり、\u003Cstrong>それぞれの視点や知見を共有\u003C/strong>しながら制作を進めています。\u003Cbr>職種は違いますが、お互いの領域を理解しているからこそ、\u003Cstrong>表現と実装を分けずに扱う\u003C/strong>ことが可能です。\u003Cbr>\u003Cbr>また、エンジニアもヒアリングの段階から直接やり取りに入り、技術的な可能性や制約を共有しながら、\u003Cstrong>「どうすれば実現できるか」\u003C/strong>を具体化できることも S2 の特長です。\u003Cbr>というのも、日々新しい技術に触れ、表現の幅を広げている土台があるからです。今回の砂や泡の表現も、その積み重ねの一つ。\u003C/p>\u003Cp>NOËL 2025 の制作も、こうした関わりの中で形になりました。\u003Cbr>\u003Cstrong>対話を重ねながら、デザインと技術の両面から最適な形を探る。\u003C/strong>それが私たちの進め方です。\u003Cbr>\u003Cbr>Web サイトの制作やリニューアルをご検討の際は、ぜひお気軽にご相談ください。\u003C/p>",{"id":49,"eyecatch":50,"publishedAt":54,"createdAt":55,"title":56,"is_html":19,"content2":57},"nenga2026",{"url":51,"height":52,"width":53},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/64225b146a794e1780f16b130860ed11/Group%203.jpg",640,852,"2026-02-17T09:09:40.261Z","2026-01-30T01:53:10.354Z","2026年の年賀状ができるまでの話","\u003Cp>どうも \u003Cstrong>S2 のフロントエンジニア及び雑用係こと 小泉(masa)\u003C/strong>です。\u003C/p>\u003Cp>無事 2026 年を迎えたと思ったら、\u003Cbr>\u003Cbr>「あっ！」\u003Cbr>\u003Cbr>と言う間に 1 月も終わり、正月のことなどは遥か昔の記憶として過ごされているかと思いますが、今回は新年の話題に大きく戻って\u003Cstrong>年賀状\u003C/strong>についてのお話です。\u003C/p>\u003Ch2 id=\"hd7ebd98e1d\">企画の経緯\u003C/h2>\u003Cp>うちらは\u003Cstrong>年賀状または新年用の特設サイト\u003C/strong>などを毎年作っているのですが、特に誰がやるとは決まっておらず、\u003C/p>\u003Cp>「今年はどうしようかね〜」\u003C/p>\u003Cp>と話題に出すと誰かが手を挙げてやってくれたり、最近は社内の何人かで年賀チームを作って企画・制作をしたりと毎年様々なのですが、今年度の年賀は\u003Cbr>\u003Cbr>「\u003Cstrong>紙モノ\u003C/strong>やりたいよなぁ、来年の年賀をやらしてもらうか！」\u003C/p>\u003Cp>などと昨年自分と\u003Ca href=\"https://www.s2factory.co.jp/blog/interview-4/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>アートディレクターの根岸(negi)\u003C/strong>\u003C/a>とで飲みに行ってる時に意気投合し、社内のみんなからも了承をもらえたので企画が動き始めました。\u003C/p>\u003Ch2 id=\"h3b31f1549c\">テーマとデザイン\u003C/h2>\u003Cp>\u003Cstrong>コロナもあり急速に減り続けてる年賀状文化を再度楽しんでやってみたい\u003C/strong>という動機もあり、飲んで話していた時にテーマ的なのはほぼほぼ決まっていて、\u003C/p>\u003Cp>\u003Cstrong>「年賀状としての原点回帰しつつ自分たちが好きなものを作る」\u003C/strong>\u003C/p>\u003Cp>それを軸として、おじさん 2 人で仕事の合間を縫いつつ、午年にちなんでとか、おめでたいものをモチーフにとか、なんやかんやと相談しながら内容を練っていったわけですが、\u003Cstrong>最終的にデザインの主軸としたのは年度\u003C/strong>。\u003C/p>\u003Cp>\u003Cstrong>「２０２６」\u003C/strong>\u003C/p>\u003Cp>モチーフが決まったので次は方向性ですが、会社の年賀ではあるものの\u003Cstrong>自分たちの企画ならではの独自性\u003C/strong>を出したいのもあり、\u003Cstrong>negi のプライベートワークの抽象化したテキスタイルとスケートボードの作品を作っている ARAWARU のデザインを年賀に落とし込んでいく\u003C/strong>ことにしました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/afd65628a1c2470fbb6d3e311a0e8ef4/Group%204.jpg\" alt=\" ARAWARU のこれまでの作品\" width=\"2762\" height=\"1280\">\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/ac29f3672e404a5194f1f7fbc2ac6664/Group%205.jpg\" alt=\" ARAWARU のこれまでの作品\" width=\"2564\" height=\"1282\">\u003Cfigcaption>店舗のディスプレイなどにも使用されている ARAWARU のこれまでの作品など。\u003C/figcaption>\u003C/figure>\u003Cp>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/b9fd0315f4ea4da986f9a4f8e2b86f69/Group%206.png\" alt=\"デザイン案\" width=\"1255\" height=\"752\">\u003Cfigcaption>文字を様々な形で分解再構築。\u003C/figcaption>\u003C/figure>\u003Cp>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/2f3c3f75dd4b4e9f9993d31da9b4b971/Group%207.png\" alt=\"デザイン案\" width=\"1255\" height=\"752\">\u003Cfigcaption>最終的な形を定めて掘り起こす。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>これに \u003Cstrong>ARAWARU の特徴の一つであるギザギザ模様\u003C/strong>で、「S2」の文字を組み込みました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/b6a0e3d5825441bdaab617c05834828e/%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%202026-01-30%2011.56.42.png\" alt=\"デザイン案\" width=\"3172\" height=\"2130\">\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/2542167dc3f946db93f75bdac250d34e/Group%208.png\" alt=\"デザイン案\" width=\"1255\" height=\"752\">\u003Cfigcaption>気付かれた方は数少ないと思いますが、年賀状が手元にある方は改めてじっくり見てみてください。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>次に、\u003Cstrong>二〇二六の四文字を「海」「山」「太陽」「空」と見立てて色を適用\u003C/strong>、その要素を\u003Cstrong>スケートボードの形の窓枠から観ているというイメージ\u003C/strong>でデザインを組み立てています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/792d4e00f12a4dbf855359897c1ed23c/Group%2010.png\" alt=\"デザイン案\" width=\"1321\" height=\"792\">\u003Cfigcaption>negi / masa ともに海の近くに住んでるので、見慣れた景色構成だったのもある。\u003C/figcaption>\u003C/figure>\u003Cp>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/4c4f4a7d8cb94bd19c5716781759c11c/window%203.png\" alt=\"デザイン案\" width=\"1340\" height=\"824\">\u003Cfigcaption>様々なシェイプで検討。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>これで\u003Cstrong>デザインは完成\u003C/strong>。\u003C/p>\u003Ch2 id=\"h0a19314a63\">印刷から仕上げまで\u003C/h2>\u003Cp>次は\u003Cstrong>印刷\u003C/strong>です。\u003Cbr>ネットで調べてデータ入稿した方が効率的ではあるのですが、negi とは常々\u003Cstrong>小規模でも面白いことやってる印刷会社とかが少なくなってきて寂しい、もっと印刷をしなくては！\u003C/strong>って話していたのもあり、\u003Cstrong>印刷してもらうところも今回新規開拓\u003C/strong>してみようと。\u003C/p>\u003Cp>そこでたどり着いたのが、\u003Cstrong>都立大駅で実験的な活版印刷をしている \u003C/strong>\u003Ca href=\"https://www.albatro.jp/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>ALBATRO DESIGN\u003C/strong>\u003C/a>\u003Cstrong> が運営する \u003C/strong>\u003Ca href=\"https://print-plant.com/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>PRINT+PLANT\u003C/strong>\u003C/a>です。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/f279d33dd6ec4029a832b96fd6747009/%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%202026-01-30%2012.17.18.png\" alt=\"印刷所\" width=\"3266\" height=\"2284\">\u003Cfigcaption>年代物の印刷機器が印象的。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>印刷所自体が個人的に好きそうな場所だったのと、カフェ併設ということもあり、メールでアポを取る前にまずは店舗の方に直接行ってみました。\u003Cbr>その場で快く相談にも乗っていただき、納期も問題ないということだったのでお願いすることに。(実は結構年末ギリギリになっていたので、納期的にお願いできるかが一番ネックでした...)\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/d907fb8a19ab408e841e6c4a4cf48e61/IMG_0040.jpeg\" alt=\"活版印刷用の金属活字\" width=\"4032\" height=\"3024\">\u003Cfigcaption>印刷所には活版印刷用の金属活字も綺麗に並べられている。\u003C/figcaption>\u003C/figure>\u003Cp>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/3076810476914d3fa0c40595d5cc4997/IMG_0041.jpeg\" alt=\"紙見本\" width=\"4032\" height=\"3024\">\u003Cfigcaption>紙見本。紙を選ぶのも楽しい。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>印刷方法をどうするかもフリースタイルというか丸腰というか、ある程度は考えていたもののどうするかは相談してから決めようとしていたので、まずは現地で色々と印刷サンプルを見させてもらいました。\u003Cbr>\u003Cbr>結果、\u003Ca href=\"https://ja.wikipedia.org/wiki/%E3%83%AA%E3%82%BD%E3%82%B0%E3%83%A9%E3%83%95\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>リソグラフ\u003C/strong>\u003C/a>\u003Cstrong>特有のカスレやズレ、混色などのアナログな質感に魅了、さらにビジュアルとの相性もよさそうだと思ったので、リソグラフでやることに決定。\u003C/strong>\u003Cspan style=\"color: #727272\">\u003Cbr>\u003C/span>\u003Cbr>\u003Cstrong>リソグラフは版画のように 1 色ずつ重ね刷り\u003C/strong>するため、入稿データをモノクロ、またはグレースケールにしなければいけません。そのため、入稿用にデータを再調整する必要があります。\u003Cbr>\u003Cspan style=\"color: #727272\">(リソグラフの孔版印刷についての詳しい話は\u003C/span>\u003Ca href=\"https://www.riso.co.jp/product/risograph/feature/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">こちら\u003C/a>\u003Cspan style=\"color: #727272\">をご覧ください。)\u003C/span>\u003Cbr>\u003Cbr>慣れてくるとある程度仕上がりが予測できるようになるので、必須ではないみたいですが、ズレや混色などがイメージ通りに仕上がるかを実際に刷りながら確認し、その場でデータの微調整を行うことも可能とのこと。我々は初めてだったのと、そもそもどうやって印刷してるのか直接見てみたいという好奇心もあり、当然の如く\u003Cstrong>立ち合い\u003C/strong>を選択しました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/837d6f10bd134afaa9abf7ce9da2f60b/IMG_0057.jpeg\" alt=\"印刷確認\" width=\"5712\" height=\"4284\">\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/7e10049cf29b4211a85a07c9f8c694cc/IMG_0059.jpeg\" alt=\"1 版で 2 色を刷れるのでそれを薄い色から順に重ね刷りしていく\" width=\"5712\" height=\"4284\">\u003Cfigcaption>1 版で 2 色を刷れるのでそれを薄い色から順に重ね刷りしていく。\u003C/figcaption>\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/7dd39026622949e5922b64fb9c0285fe/IMG_0037.jpeg\" alt=\"グラデーションや版の型などその場でデータを調整\" width=\"5712\" height=\"4284\">\u003Cfigcaption>グラデーションや版の型などその場でデータを調整。\u003C/figcaption>\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/29b695815f6744a29046eb5440d9511f/IMG_0043.jpeg\" alt=\"データ調整したものはすぐに反映可能\" width=\"5712\" height=\"4284\">\u003Cfigcaption>データ調整したものはすぐに反映可能。\u003C/figcaption>\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/e57d9c4ca1d4499e82dfa40422083505/IMG_0055.jpeg\" alt=\"印刷の確認\" width=\"5712\" height=\"4284\">\u003Cfigcaption>インクが乾くと発色も少し変化するので、調整前のものも時間が経過したら再度確認。\u003C/figcaption>\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/f8dc09ff03aa49819b8e2864129232bb/IMG_0062.jpeg\" alt=\"見比べる\" width=\"5712\" height=\"4284\">\u003Cfigcaption>色々と見比べる。\u003C/figcaption>\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/3cce63b3e04f410f915b336d8cb010f2/IMG_0067.jpeg\" alt=\"印刷の様子\" width=\"5712\" height=\"4284\">\u003Cfigcaption>このドラム一個で一版になるので、版を変えるたびにドラムごと差し替える。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>案の定、一回目の印刷ではイメージとは少し違ったものになっていたので、\u003Cstrong>その場でデータを調整しては刷ってみてを何度も繰り返します\u003C/strong>。リソグラフはデータ調整後すぐに版を出力することができるため、5 回ほど修正しましたが 3 時間かからない程度で完成しました。\u003Cbr>\u003Cbr>通常の年賀状の場合、これに住所ラベルを貼りつけたものを郵送すれば完了なのですが、\u003Cstrong>リソグラフの場合はインクが完全に紙に定着しないという特徴\u003C/strong>があります(特に濃度が高い部分は色移りがしやすく触ったり重ねたりすると手や紙についたり)。\u003Cbr>\u003Cbr>今回のデザインだと、金のベタ部分が特に危なそうだったので、封筒に入れて送ろうということにして、\u003Cstrong>封筒も同時進行で制作\u003C/strong>していました。\u003C/p>\u003Cp>\u003Cstrong>封筒は中に年賀が入っていることが一目でわかるものにしたかった\u003C/strong>ので、何かいいものはないかと探したところ、\u003Cstrong>トレーシングペーパーを使って半透明な封筒\u003C/strong>をつくれるとのことで、大阪の\u003Ca href=\"https://fuutouya.com/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>封筒屋どっとこむ\u003C/strong>\u003C/a>にお願いしました。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/2c1e34a9dc4c477d87f0afaa8e883f3e/IMG_0388.jpeg\" alt=\"封筒\" width=\"4032\" height=\"3024\">\u003Cfigcaption>長 3 カマス 特色 2 色で制作。QR はうちのサイトに飛びます。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>無事に封筒も完成しましたが、カードと封筒を別々で作ったので、ここから手仕事で\u003Cstrong>封筒に入れてラベルを貼る作業\u003C/strong>をします。昔はこの年賀状にみんなでラベルを貼って、打ち合わせ部屋にズラッと年賀が並んでるのが\u003Cstrong>年末の風物詩\u003C/strong>だったので、個人的に懐かしい作業でした。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/5ee34e17d30240c6889f82368d7df006/IMG_0156.jpeg\" alt=\"内職作業\" width=\"5712\" height=\"4284\">\u003Cfigcaption>社内で少し気分転換したい人を集めて内職作業。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>\u003Cstrong>住所ラベルは内製の取引先管理ツール\u003C/strong>からCSVでデータ書き出して、イラレで作ったラベルデータに JSX で作ったスクリプトを実行して自動面付けさせてデータを作り、社内で印刷したものをペタペタと貼っていきます。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/c3143c574a59421f8d64be96b59f4fb9/address.png\" alt=\"取引先管理ツール\" width=\"2192\" height=\"1712\">\u003Cfigcaption>営業管理ツールは自分たちで作ることが多い。\u003C/figcaption>\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/5ffc30ea38054b4c917ca987ad8e1d5b/address2.png\" alt=\"ラベル作成\" width=\"2678\" height=\"2366\">\u003Cfigcaption>CSVを流し込んでイラレで面付けした状態。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>そうして完成した年賀状を皆様にお送りさせていただきました。\u003Cbr>\u003Cbr>そんなわけで、\u003Cstrong>今回は年賀状制作に関するお話\u003C/strong>でした。\u003Cbr>改めてではありますが本年もよろしくお願いたします。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/9f47b95239044256af2c923bb934d9da/IMG_3117%201.png\" alt=\"完成品\" width=\"968\" height=\"1280\">\u003Cfigcaption>飾ったり。\u003C/figcaption>\u003C/figure>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/cefde1429186405b8c0b61e7545fa06e/IMG_3118%201.png\" alt=\"完成品\" width=\"960\" height=\"1280\">\u003Cfigcaption>置いたり。\u003C/figcaption>\u003C/figure>\u003Cp>\u003Cbr>印刷見本としても手元に保管していただけたら幸いです。\u003Cbr>\u003Cbr>\u003C/p>\u003Ch4 id=\"h1d8714f8ae\">\u003Cstrong>印刷仕様\u003C/strong>\u003C/h4>\u003Cp>\u003Cstrong># 年賀カード\u003C/strong>\u003Cbr>紙 : NT ラシャ（無垢）210 ㎏\u003Cbr>色 : 表 - gold / red / blue / fl-blue / fl-green / fl-orange 裏 - gold\u003Cbr>版 : 表 - 3 版 裏 - 1版\u003Cbr>サイズ：112mm x 224mm\u003Cbr>\u003Cbr>\u003Cstrong># 封筒\u003C/strong>\u003Cbr>仕様 : 長 3 カマス\u003Cbr>紙 : トレーシング 105g 白（半透明）\u003Cbr>サイズ : 235mm × 120mm\u003C/p>\u003Cp>\u003Cbr>今回印刷をお願いした PRINT+PLANT はこちら。\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://print-plant.com/\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?card=small&url=https%3A%2F%2Fprint-plant.com%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>\u003Cp>〒152-0022 東京都目黒区柿の木坂1丁目32-17 PRINT+PLANT\u003Cbr>Instagram：\u003Ca href=\"https://www.instagram.com/printplant_official/\">https://www.instagram.com/printplant_official/\u003C/a>\u003C/p>",18,0,3,{"contents":62,"totalCount":85,"offset":59,"limit":60},[63,65,75],{"id":29,"eyecatch":64,"publishedAt":34,"createdAt":35,"title":36,"is_html":19,"content2":37},{"url":31,"height":32,"width":33},{"id":66,"eyecatch":67,"publishedAt":71,"createdAt":72,"title":73,"is_html":19,"content2":74},"nazotoki",{"url":68,"height":69,"width":70},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1237f7caf6704f568fb90b1c3c65bcd3/s2-nazotoki.png",1201,1944,"2026-03-30T08:35:07.001Z","2026-03-17T06:24:17.497Z","Web サイトを使った謎解きを作ってみた","\u003Cp>毎朝飲んでるトマトジュースがついに40円も値上げしてしまいました…。\u003C/p>\u003Cp style=\"text-align: start\">この記事は、社内イベント「\u003Ca href=\"https://www.s2factory.co.jp/blog/tea/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C/u>\u003C/a>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社の \u003Ca href=\"https://x.com/s2_takano\" target=\"_blank\" rel=\"noopener noreferrer\">takano\u003C/a> が、\u003Cstrong>「謎解き」\u003C/strong>をテーマに発表を行いました。\u003C/p>\u003Chr>\u003Cp>\u003Cbr>もともと謎解きが好きで、街歩き型のイベントや脱出ゲームなどにもよく参加しているほか、また最近では、自宅で遊べるキット型の謎解きなどにも手を出しています。\u003C/p>\u003Cp>その流れで、\u003Cstrong>今回自分でも謎解きを作ってみました。\u003C/strong>\u003C/p>\u003Cp>「謎解き」と言われても、あまり馴染みがないとイメージしづらいかもしれません。\u003Cbr>そもそも謎解きとはどういうものなのか。そこから説明したいと思います。\u003C/p>\u003Ch2 id=\"heb6bf4fdb1\">謎解きとは\u003C/h2>\u003Cp>まずはクイズとの違いから見てみます。\u003Cbr>たとえば、こんな問題です。\u003C/p>\u003Cblockquote>\u003Cp>\u003Cstrong>小田原北条氏の三代目は氏康ですが、その三男は北条氏照です。\u003Cbr>では、彼が築いた八王子にある山城といえば？\u003C/strong>\u003C/p>\u003C/blockquote>\u003Cp>答えは「\u003Cspan style=\"color: #ffffff\">八王子城\u003C/span>」。\u003Cbr>\u003Cbr>この問題は、知識がないと解くことができません。\u003Cbr>一方で、謎解きは少し性質が異なります。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/01968bad337e4b32a6ea03bd0288fd8e/%E8%AC%8E%E8%A7%A3%E3%81%8D%E8%BF%B7%E8%B7%AF.png?w=450&h=402\" alt=\"謎解き迷路\" width=\"450\" height=\"402\">\u003C/figure>\u003Cp>\u003Cbr>この問題を解くと、\u003Cspan style=\"color: #000000\">「\u003C/span>\u003Cspan style=\"color: #ffffff\">ウジテル\u003C/span>\u003Cspan style=\"color: #000000\">」\u003C/span>という答えが出てきます。\u003Cbr>\u003Cbr>\u003Cstrong>クイズが知識を前提にしているのに対して、謎解きは問題の中にある法則やヒントに気づく(閃く)ことで、答えにたどり着きます。\u003C/strong>北条氏照という人物を知らなくても解ける。これが、クイズと謎解きの大きな違いです。\u003C/p>\u003Cp>考えても分からない時間があって、\u003Cstrong>ふと気づく瞬間\u003C/strong>がある。\u003Cstrong>その体験が、謎解きの面白さ\u003C/strong>につながっています。\u003C/p>\u003Ch3 id=\"hd0bb2aed17\">謎解きの広がり\u003C/h3>\u003Cp>謎解きの起源については諸説ありますが、主な流れを整理すると以下の通りです。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>1997年頃：\u003C/strong>\u003Ca href=\"https://www.scrapmagazine.com/column/wakuwaku01/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>株式会社SCRAP代表が親戚の集まりで宝探しイベントを始める\u003C/strong>\u003C/a>\u003C/li>\u003Cli>\u003Cstrong>2001年：リアル宝探しの開始(タカラッシュ)\u003C/strong>\u003Cul>\u003Cli>現実空間で楽しむ謎解きが登場。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>2004年：『\u003C/strong>\u003Ca href=\"https://ja.wikipedia.org/wiki/%E8%84%B3%E5%86%85%E3%82%A8%E3%82%B9%E3%83%86_IQ%E3%82%B5%E3%83%97%E3%83%AA\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>脳内エステ IQサプリ\u003C/strong>\u003C/a>\u003Cstrong>』放送開始\u003C/strong>\u003Cul>\u003Cli>テレビ放送としての謎解きの原点ともいえる存在です。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>2004年：『\u003C/strong>\u003Ca href=\"https://y.honkakuha.success-games.net/game/su-56-crimsonroom/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>クリムゾン・ルーム\u003C/strong>\u003C/a>\u003Cstrong>』公開\u003C/strong>\u003Cul>\u003Cli>Flashゲームとして話題になり、脱出ゲームの原点のひとつとされています。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>2007年：リアル脱出ゲーム初開催(SCRAP)\u003C/strong>\u003Cul>\u003Cli>体験型イベントとして一気に広がります。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>2012年：\u003C/strong>\u003Ca href=\"https://www.newsweekjapan.jp/stories/business/2015/06/post-3675_3.php\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>海外展開\u003C/strong>\u003C/a>\u003Cstrong>(サンフランシスコなど)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>2017年：\u003C/strong>\u003Ca href=\"https://corp.eplus.jp/press-release/detail/20171102.html\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>東京ミステリーサーカス オープン\u003C/strong>\u003C/a>\u003Cul>\u003Cli>新宿歌舞伎町に脱出ゲームや謎解きが楽しめる常設施設が誕生。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>2019年：来場者100万人突破(東京ミステリーサーカス)\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>2019年：\u003C/strong>\u003Ca href=\"https://riddler.co.jp/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>RIDDLER株式会社\u003C/strong>\u003C/a>\u003Cstrong>設立\u003C/strong>\u003Cul>\u003Cli>謎解きを軸に、さまざまなメディアで体験を企画・制作するクリエイター集団。\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\u003Cp>このように、謎解きは年々盛り上がりを見せており、現在では大きな\u003Cstrong>ブーム\u003C/strong>となっています。\u003C/p>\u003Cp>たとえば、株式会社SCRAPが手がけるリアル脱出ゲームは累計参加者1,500万人を突破し、大規模な体験型イベントとして定着しました。\u003Cbr>また、「\u003Ca href=\"https://realdgame.jp/s/chikanazo2025/?link=enjoy\" target=\"_blank\" rel=\"noopener noreferrer\">地下謎への招待状\u003C/a>」のように、\u003Cstrong>鉄道や街全体を使った、日常の移動や街歩きそのものがゲームとなる企画も登場\u003C/strong>し、多くの参加者を集めています。\u003C/p>\u003Cp>それだけでなく、\u003Cstrong>企業向けのチームビルディング研修\u003C/strong>などにも取り入れられ、エンタメにとどまらない形でも活用されています。\u003C/p>\u003Ch2 id=\"h88ea32f50f\">実際に謎解きを作ってみた\u003C/h2>\u003Cp>謎解きにハマってからというもの、脱出ゲームや街歩き型の謎解き、キットを購入して遊ぶタイプのものなど、\u003Cstrong>いろいろと遊んできました\u003C/strong>。そのうちに自分でも作ってみたくなり、実際に作ってみました。\u003Cbr>\u003Cbr>実は最近、トップページをリニューアルしたこともあり、せっかくならその内容も見てもらえるような形にできないかと思い、\u003Cstrong>Web サイトを見ながら進める謎解き\u003C/strong>を作ってみることにしました。\u003C/p>\u003Ch3 id=\"h339271c395\">ストーリーとキーワードの設定\u003C/h3>\u003Cp>ストーリーについては、\u003Cstrong>「こういうことをやりたい」という方向性\u003C/strong>を決めて、\u003Ca href=\"https://gemini.google.com/app?hl=ja\" target=\"_blank\" rel=\"noopener noreferrer\">Gemini\u003C/a> に投げて考えてもらいました。\u003C/p>\u003Cp>あわせて、伝えたいキーワードも先に決め、それを最終的な答えとして設計しています。\u003Cbr>\u003Cstrong>どのように解くとその答えにたどり着くのか\u003C/strong>という流れも、この段階で考えました。\u003C/p>\u003Cp>今回の謎解きページは、\u003Cstrong>Web サイトのログイン画面をイメージ\u003C/strong>しています。\u003Cbr>各問題を解きながら情報を集め、最終的に導き出した答えをログイン用の\u003Cstrong>パスワード\u003C/strong>として入力することでクリア！という構成にしています。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/1237f7caf6704f568fb90b1c3c65bcd3/s2-nazotoki.png\" alt=\"\" width=\"1944\" height=\"1201\">\u003C/figure>\u003Ch3 id=\"ha572ddd150\">謎の設計\u003C/h3>\u003Cp>最終的な答えの文字数などから、\u003Cstrong>全体の STEP 数\u003C/strong>を決めています。\u003C/p>\u003Cp>Webサイトを見てもらうことが目的だったため、\u003Cstrong>サイトを見ながら答えにたどり着くような問題\u003C/strong>を中心にしたいと考えていました。ただ、実際に作ってみると難しく、途中でその方針を維持するのが難しくなり、\u003Cstrong>完全にはやりきれず…\u003C/strong>。\u003C/p>\u003Cp>ちなみにの話ですが、謎を作るうえで便利だったのが「\u003Ca href=\"https://shiwehi.com/tools/wordsearch/\" target=\"_blank\" rel=\"noopener noreferrer\">謎解き単語検索β\u003C/a>」です。\u003Cbr>答えに「ネコ」を使いたいがそのまま見せたくない場合に、「?ねこ?」のように指定すると、前後に文字を加えた単語を辞書から探してくれます。\u003C/p>\u003Ch3 id=\"h922edff87b\">実装\u003C/h3>\u003Cp>\u003Cstrong>謎解きに使った画像は Google Slide で作成し、それをWebページに落とし込む作業は \u003C/strong>\u003Ca href=\"https://antigravity.google/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>Antigravity\u003C/strong>\u003C/a> で行いました。\u003C/p>\u003Cp>実装では、\u003Cstrong>ネタバレ防止\u003C/strong>の工夫に特に気を使っています。\u003Cbr>ソースコードから答えが分かってしまわないように \u003Cstrong>Hash\u003C/strong> を使うように指示したり、次のメッセージが先に見えてしまわないよう、\u003Cstrong>動的に JavaScript ファイルを読み込む仕組み\u003C/strong>にしています。\u003C/p>\u003Cp>また、スクロールスピードや文字をタイプしているような演出についても細かく指示を出し、\u003Cstrong>体験として違和感が出ないように調整\u003C/strong>しています。\u003C/p>\u003Ch3 id=\"h98ba4996ba\">デバッグ\u003C/h3>\u003Cp>まず、\u003Cstrong>脱出ゲームに慣れているスタッフにデバッグを依頼\u003C/strong>しました。\u003Cbr>その中で、間違いや別解の発生、分かりづらい箇所などの指摘を受け、内容や画像を修正しています。\u003C/p>\u003Cp>その後、別のスタッフにも解いてもらい、さらに\u003Cstrong>ブラッシュアップ\u003C/strong>を行いました。\u003Cbr>人によって詰まるポイントが異なる部分もあったため、\u003Cstrong>最終的には少し難易度を下げる方向で調整\u003C/strong>しています。\u003C/p>\u003Ch3 id=\"h785b0e1177\">公開\u003C/h3>\u003Cp>\u003Cstrong>最終的にAnalyticsの設定やインフラの準備も行い、公開\u003C/strong>しました。\u003C/p>\u003Ch2 id=\"h1331c56b22\">作ってみた感想\u003C/h2>\u003Cp>本来の仕事であるコーディングと近い部分もあり、普段とは違う形で頭を使うのが新鮮で楽しかったです。\u003C/p>\u003Cp>遊んでいる人の様子をリアルタイムで見られたら、どこで悩んでいるのか、どう進めているのかなども分かって面白かったのではないかと思います。\u003Cbr>今回はそこまで設計できていませんでしたが、\u003Cstrong>Analytics の取り方\u003C/strong>を工夫すれば、どこで詰まっているのかといった\u003Cstrong>ユーザーの動きも可視化\u003C/strong>できそうだと感じました。\u003C/p>\u003Cp>一方で、途中で力尽きてしまった部分もあり、当初考えていた\u003Cstrong>「Webサイトを見てもらいながら解いてもらう構成」を最後までやりきれなかった点は少し心残り\u003C/strong>です。\u003C/p>\u003Cp>実際に作ってみて、これを仕事としてやっているプロの謎解きクリエイターのすごさを改めて実感しました。\u003Cbr>\u003Cbr>もしよければ、\u003Ca href=\"https://lab.s2factory.co.jp/nazo2026s/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cstrong>実際に遊んでみてもらえると\u003C/strong>\u003C/a>幸いです。\u003C/p>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https://lab.s2factory.co.jp/nazo2026s/\" data-iframely-url=\"https://cdn.iframe.ly/api/iframe?url=https%3A%2F%2Flab.s2factory.co.jp%2Fnazo2026s%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C/a>\u003C/div>\u003C/div>\u003Cscript async src=\"https://cdn.iframe.ly/embed.js\" charset=\"utf-8\">\u003C/script>",{"id":76,"eyecatch":77,"publishedAt":81,"createdAt":82,"title":83,"is_html":19,"content2":84},"invoice",{"url":78,"height":79,"width":80},"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/6f7012cefad04c358a66cfbd2efd65b0/invoice.jpg",4000,6000,"2026-03-19T07:59:57.931Z","2026-03-11T05:47:41.110Z","インボイス制度の基本と確認しておきたいポイント","\u003Cp>健康診断前なのに誘惑が多いです。\u003C/p>\u003Cp>この記事は、社内イベント「\u003Ca href=\"https://www.s2factory.co.jp/blog/tea/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cu>お茶会\u003C/u>\u003C/a>」での発表内容をもとにまとめたものです。\u003Cbr>今回は弊社の kaiden が、\u003Cstrong>「インボイス制度」\u003C/strong>について話しました。\u003C/p>\u003Chr>\u003Cp>\u003Cbr>日々の業務の中では、\u003Cstrong>取引を行ったり、経費を立て替えたりする場面\u003C/strong>が多々あります。\u003Cbr>そうした場面で戸惑うことがないよう、今回のお茶会では\u003Cstrong>インボイス制度について改めて整理\u003C/strong>してみました。\u003C/p>\u003Cp>\u003Cspan style=\"color: #a1a1a1\">※なお、本記事は2025年11月28日に行われた社内発表の内容をもとにまとめています。\u003C/span>\u003C/p>\u003Ch2 id=\"h0bcb04a00f\">インボイス制度とは\u003C/h2>\u003Cp>\u003Cspan style=\"color: #e94d4d\">※本記事では、適格請求書を「インボイス」と表記します。\u003C/span>\u003C/p>\u003Cp>\u003Cstrong>消費税には、10％と8％(軽減税率)という複数の税率\u003C/strong>があります。\u003Cbr>こうした複数税率のもとで、取引ごとの消費税額を正確に把握するために導入されたのが\u003Cstrong>インボイス制度(適格請求書等保存方式)\u003C/strong>です。\u003C/p>\u003Cp>インボイス制度が始まる以前は\u003Cstrong>区分記載請求書等保存方式\u003C/strong>が使われていました。\u003C/p>\u003Cp>この方式では、請求書には主に次のような内容が記載されていれば問題ありませんでした。\u003C/p>\u003Cul>\u003Cli>請求書発行者の氏名または名称\u003C/li>\u003Cli>取引年月日\u003C/li>\u003Cli>取引内容(軽減税率の対象品目である旨)\u003C/li>\u003Cli>税率ごとに区分して合計した税込対価の額\u003C/li>\u003Cli>請求書受領者の氏名または名称\u003C/li>\u003C/ul>\u003Cp>なお、小売業や飲食店、タクシー業など、不特定多数の人と取引する業種では、宛名の記載は省略できるとされていました。\u003C/p>\u003Cp>しかし、インボイス制度の導入によって、請求書に求められる情報は次のように変わりました。\u003C/p>\u003Cul>\u003Cli>適格請求書発行事業者の氏名または名称\u003Cstrong>および登録番号\u003C/strong>\u003C/li>\u003Cli>取引年月日\u003C/li>\u003Cli>取引内容(軽減税率の対象品目である旨)\u003C/li>\u003Cli>税率ごとに区分して合計した対価の額(税抜または税込)\u003Cstrong>および適用税率\u003C/strong>\u003C/li>\u003Cli>税率ごとに区分した消費税額等\u003C/li>\u003Cli>書類の交付を受ける事業者の氏名または名称\u003C/li>\u003C/ul>\u003Cp>このように、インボイス制度では\u003Cstrong>登録番号や税率ごとの消費税額など、より詳細な情報の記載が必要になりました。\u003C/strong>\u003Cbr>つまり、これまでよりも取引ごとの消費税の内容を明確に確認できる形式の請求書が求められるようになったということです。\u003C/p>\u003Ch3 id=\"h04ffc1ee17\">インボイス対応書類の記載事項\u003C/h3>\u003Cp>\u003Cstrong>インボイス(適格請求書)とは、取引の内容や消費税額などが一定の形式で記載された書類\u003C/strong>のことです。\u003Cbr>具体的には、次のような項目が記載されている必要があります。\u003C/p>\u003Cul>\u003Cli>発行者の氏名または名称\u003C/li>\u003Cli>登録番号\u003C/li>\u003Cli>取引年月日\u003C/li>\u003Cli>取引の内容(軽減税率対象の場合はその旨)\u003C/li>\u003Cli>税抜または税込価額の合計額(税率ごと)\u003C/li>\u003Cli>適用税率(10％または8％)\u003C/li>\u003Cli>消費税額等(税率ごと)\u003C/li>\u003Cli>宛名\u003C/li>\u003C/ul>\u003Cp>この8つの項目が記載されている書類が、いわゆる「インボイス(適格請求書)」です。\u003Cbr>\u003Cbr>なお、書類の名称は必ずしも「インボイス」や「適格請求書」である必要はありません。\u003Cbr>必要な記載事項がそろっていれば、\u003Cstrong>領収書・納品書・請求書などの形式\u003C/strong>であっても適格請求書として扱われます。\u003C/p>\u003Cp>また、業種によっては\u003Cstrong>簡易インボイス\u003C/strong>と呼ばれる形式での発行も認められています。\u003Cbr>簡易インボイスの場合は、通常のインボイスと比べて記載事項が一部簡略化されており、\u003Cstrong>宛名の記載は必須ではありません。\u003C/strong>そのため、宛名が「上様」や空欄でも問題ないケースがあります。\u003C/p>\u003Cp>さらに、\u003Cstrong>適用税率が記載されている場合は、消費税額の記載が省略できる\u003C/strong>こともあります。\u003C/p>\u003Cp>法令上の必須項目ではありませんが、「簡易インボイス対象である旨」を記載しておくと、取引先から「記載不備ではないか」と確認を受けることを避けられる場合もあるようです。\u003C/p>\u003Ch2 id=\"hf4b3a6025d\">仕入税額控除\u003C/h2>\u003Cp>インボイス制度は、そもそも\u003Cstrong>消費税の仕組みに関わる制度\u003C/strong>です。\u003Cbr>消費税は、国内で商品の販売やサービスの提供などの取引に対して課税され、その取引で\u003Cstrong>消費者から預かった税額を事業者が納付\u003C/strong>しています。\u003C/p>\u003Cp>ただし、事業者自身も仕入れや外注などで商品やサービスを購入するときに、すでに消費税を支払っています。\u003Cbr>\u003Cbr>そのため、\u003Cstrong>受け取った消費税額から支払った消費税額を差し引いて納税額が計算\u003C/strong>されます。この差し引きを\u003Cstrong>仕入税額控除\u003C/strong>と呼びます。\u003C/p>\u003Cp>具体的な取引の例で、仕入税額控除の計算を見てみましょう。\u003Cbr>\u003Cbr>\u003C/p>\u003Cfigure>\u003Cimg src=\"https://images.microcms-assets.io/assets/0eb919b93c74437dbd287ab903d9ea2c/07c29c133bc54d8092d20e1c3e131cdb/%E5%85%B7%E4%BD%93%E4%BE%8B.png\" alt=\"\" width=\"842\" height=\"1264\">\u003C/figure>\u003Cp>このように、\u003Cstrong>商品やサービスの提供で受け取った消費税額から、支払った消費税額を差し引いて納税額が計算\u003C/strong>されます。\u003Cbr>そして、この仕入税額控除を行う際に、仕入れの取引内容や消費税額を確認するための書類として必要になるのが\u003Cstrong>インボイス(適格請求書)\u003C/strong>です。\u003C/p>\u003Cp>なお、\u003Cstrong>インボイスを発行できるのは課税事業者のみ\u003C/strong>とされています。\u003C/p>\u003Ch2 id=\"h1384803387\">課税事業者とは\u003C/h2>\u003Cp>インボイス制度では、適格請求書(インボイス)を発行できるのは課税事業者のみです。\u003Cbr>免税事業者であっても、適格請求書発行事業者の登録を受けた場合は課税事業者となります。\u003C/p>\u003Cp>課税事業者とは、\u003Cstrong>消費税を納める義務がある事業者\u003C/strong>のことです。\u003Cbr>主に次のいずれかに該当する場合、課税事業者になります。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>適格請求書発行事業者の登録を受けている事業者\u003C/strong>\u003Cul>\u003Cli>インボイス発行事業者として登録すると、登録番号が付与されます。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>基準期間の課税売上高が1,000万円を超える事業者\u003C/strong>\u003Cul>\u003Cli>基準期間とは、課税事業者かどうかを判断する際に用いられる期間のことです(具体的な期間は事業形態によって異なります)。\u003C/li>\u003C/ul>\u003C/li>\u003Cli>\u003Cstrong>「消費税課税事業者選択届出書」を提出して課税事業者を選択している事業者\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>新設法人または特定新規設立法人に該当する事業者\u003C/strong>\u003Cul>\u003Cli>例えば、事業年度開始時点で資本金が1,000万円以上の会社などが該当します。\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>\u003Ch2 id=\"h178226bfff\">消費税の課税区分\u003C/h2>\u003Cp>ここまでは「事業者」に対して課税か免税かという話でしたが、\u003Cstrong>消費税は取引の内容によっても扱いが変わります。\u003C/strong>\u003Cbr>つまり、同じ事業者であっても、取引の種類によって消費税の課税区分が異なります。\u003C/p>\u003Cp>消費税の取扱いは、大きく次の 4 つです。\u003C/p>\u003Ch3 id=\"hf84c068c0b\">課税取引\u003C/h3>\u003Cp>消費税がかかる取引。税率は \u003Cstrong>10% または 8% \u003C/strong>です。\u003Cbr>課税取引になるためには、次の 4 つの要件をすべて満たす必要があります。\u003C/p>\u003Cul>\u003Cli>国内で行われる取引である\u003C/li>\u003Cli>事業者が事業として行う取引である\u003C/li>\u003Cli>対価を得て行う取引である\u003C/li>\u003Cli>資産の譲渡・貸付、または役務の提供である\u003C/li>\u003C/ul>\u003Cp>基本的には、多くの取引がこの\u003Cstrong>課税取引\u003C/strong>に該当します。\u003Cbr>そのため、課税区分を考える際は\u003Cstrong>「課税ではない取引」を確認していく方が理解しやすい\u003C/strong>かもしれません。\u003C/p>\u003Ch3 id=\"hed4ff9b5a3\">非課税取引\u003C/h3>\u003Cp>法律で\u003Cstrong>消費税を課さない\u003C/strong>と定められている取引です。\u003C/p>\u003Cp>例えば\u003C/p>\u003Cul>\u003Cli>切手\u003C/li>\u003Cli>土地取引\u003C/li>\u003Cli>医療費\u003C/li>\u003C/ul>\u003Cp>などが該当します。\u003C/p>\u003Cp>例えば切手の場合、購入した段階では消費税はかかりません。\u003Cbr>ただし郵送サービスとして利用する際には消費税が関係する場合もあり、少し分かりにくいケースもあります。\u003C/p>\u003Cp>また、医療費などは非課税取引のため、インボイスのように税率が記載されることはありません。\u003C/p>\u003Ch3 id=\"h18933d3dff\">不課税取引\u003C/h3>\u003Cp>そもそも \u003Cstrong>消費税の対象ではない取引\u003C/strong>です。\u003C/p>\u003Cul>\u003Cli>給与\u003C/li>\u003Cli>寄付金\u003C/li>\u003Cli>無償提供\u003C/li>\u003Cli>国外取引\u003C/li>\u003C/ul>\u003Cp>などが該当します。\u003C/p>\u003Cp>また、日本法人を設立して日本国内取引として扱う形をとるサービスもあります。\u003C/p>\u003Ch3 id=\"hbdef6ab563\">免税取引\u003C/h3>\u003Cp>本来は課税対象ですが、政策的に\u003Cstrong>消費税が免除されている取引\u003C/strong>です。\u003C/p>\u003Cul>\u003Cli>輸出取引\u003C/li>\u003Cli>国際輸送\u003C/li>\u003C/ul>\u003Cp>などが該当します。\u003C/p>\u003Ch1 id=\"ha214098e44\">まとめ\u003C/h1>\u003Cp>ここまで、インボイス制度の基本的な考え方と、確認しておきたいポイントについて見てきました。\u003C/p>\u003Cp>インボイス制度は、消費税の\u003Cstrong>仕入税額控除\u003C/strong>と深く関係しており、仕入れに関する消費税を控除するためには、取引内容や税額が記載された \u003Cstrong>インボイス(適格請求書)\u003C/strong> が必要になります。\u003C/p>\u003Cp>また、インボイスを発行できるのは\u003Cstrong>課税事業者として登録された事業者のみ\u003C/strong>です。\u003Cbr>そのため、領収書や請求書を受け取る際には、登録番号の有無などを確認することが重要になります。\u003C/p>\u003Cp>取引によっては\u003C/p>\u003Cul>\u003Cli>非課税取引\u003C/li>\u003Cli>不課税取引\u003C/li>\u003Cli>免税取引\u003C/li>\u003C/ul>\u003Cp>など、消費税の扱いが異なるケースもあるため、取引内容に応じて区分を確認する必要があります。\u003C/p>\u003Cp>なお、インボイス発行事業者かどうかは、次のサイトで確認することができます。\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>適格請求書発行事業者公表サイト\u003C/strong>\u003C/li>\u003Cli>\u003Cstrong>法人番号公表サイト\u003C/strong>\u003C/li>\u003C/ul>\u003Cp>また、PDFなど電子データで発行された請求書や領収書は、\u003Cstrong>電子帳簿保存法\u003C/strong>により電子データのまま保存することが原則となっています。印刷して保存するのではなく、受け取ったデータのまま保管するようにしましょう。\u003C/p>\u003Cp>インボイス制度は少し複雑に感じる部分もありますが、基本的なポイントを理解しておくことで、受け取った書類がインボイスとして適切かどうかを判断しやすくなります。\u003C/p>\u003Cp>日常の取引や経費精算の場面で、インボイスの内容を確認できるようになれば幸いです。\u003C/p>\u003Ch2 id=\"h3de35099b3\">参考\u003C/h2>\u003Cp>インボイス制度や消費税の仕組みについては、国税庁の資料を参考にしています。\u003C/p>\u003Cul>\u003Cli>インボイス制度について｜国税庁\u003Cul>\u003Cli>\u003Ca href=\"https://www.nta.go.jp/taxes/shiraberu/zeimokubetsu/shohi/keigenzeiritsu/invoice_about.htm\">https://www.nta.go.jp/taxes/shiraberu/zeimokubetsu/shohi/keigenzeiritsu/invoice_about.htm\u003C/a>\u003C/li>\u003C/ul>\u003C/li>\u003Cli>消費税｜国税庁 \u003Cul>\u003Cli>\u003Ca href=\"https://www.nta.go.jp/taxes/shiraberu/zeimokubetsu/shohi.htm\">https://www.nta.go.jp/taxes/shiraberu/zeimokubetsu/shohi.htm\u003C/a>\u003C/li>\u003C/ul>\u003C/li>\u003Cli>消費税のあらまし（令和7年度）｜国税庁  \u003Cul>\u003Cli>\u003Ca href=\"https://www.nta.go.jp/publication/pamph/shohi/aramashi/pdf/001_r07.pdf\">https://www.nta.go.jp/publication/pamph/shohi/aramashi/pdf/001_r07.pdf\u003C/a>\u003C/li>\u003C/ul>\u003C/li>\u003C/ul>",166,{"contents":87,"totalCount":311,"offset":59,"limit":312},[88,91,94,97,100,103,106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,241,244,247,250,253,256,257,260,263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308],{"id":89,"name":90},"ai","AI",{"id":92,"name":93},"workshop","ワークショップ",{"id":95,"name":96},"tool","ツール",{"id":98,"name":99},"office","オフィス",{"id":101,"name":102},"internal-project","社内案件",{"id":104,"name":105},"event","イベント",{"id":107,"name":108},"iot","IoT",{"id":110,"name":111},"art","アート",{"id":113,"name":114},"moving","引越し",{"id":116,"name":117},"picture","映像",{"id":119,"name":120},"plant","植物",{"id":122,"name":123},"company-trip","社員旅行",{"id":125,"name":126},"health","健康",{"id":128,"name":129},"exercise","運動",{"id":131,"name":132},"bicycle-club","自転車部",{"id":134,"name":135},"promotion","PR",{"id":137,"name":138},"interview","Interview",{"id":140,"name":141},"recruiting","採用",{"id":143,"name":144},"tea","お茶会",{"id":146,"name":147},"history","歴史",{"id":149,"name":150},"life","生活",{"id":152,"name":153},"club","部活動",{"id":155,"name":156},"character","キャラクター",{"id":158,"name":159},"food","食",{"id":161,"name":162},"math","数学",{"id":164,"name":165},"alcohol","酒",{"id":167,"name":168},"infrastructure","インフラ",{"id":170,"name":171},"application","アプリ",{"id":173,"name":174},"parenting","子育て",{"id":176,"name":177},"data","通信",{"id":179,"name":180},"migration","地方移住",{"id":182,"name":183},"security","セキュリティ",{"id":185,"name":185},"esports",{"id":187,"name":188},"look-back","振り返り",{"id":190,"name":191},"animal","動物",{"id":193,"name":194},"css","CSS",{"id":196,"name":197},"game","ゲーム",{"id":199,"name":200},"typescript","TypeScript",{"id":202,"name":203},"management","マネジメント",{"id":205,"name":206},"remote-work","リモートワーク",{"id":208,"name":209},"frame-work","フレームワーク",{"id":211,"name":212},"music","音楽",{"id":214,"name":215},"money","お金",{"id":217,"name":218},"covid-19","コロナ",{"id":220,"name":221},"railway","鉄道",{"id":223,"name":224},"agriculture","農業",{"id":226,"name":227},"hobby","趣味",{"id":229,"name":230},"certification","資格",{"id":232,"name":233},"personal-computer","PC",{"id":235,"name":236},"welfare","福利厚生",{"id":238,"name":239},"tech","技術",{"id":21,"name":24},{"id":242,"name":243},"mental-health","メンタルヘルス",{"id":245,"name":246},"frontend","フロントエンド",{"id":248,"name":249},"pilates","ピラティス",{"id":251,"name":252},"backend","バックエンド",{"id":254,"name":255},"tunnel","トンネル",{"id":15,"name":18},{"id":258,"name":259},"sports","スポーツ",{"id":261,"name":262},"online","オンライン",{"id":264,"name":265},"internship","インターンシップ",{"id":267,"name":268},"animation","アニメーション",{"id":270,"name":271},"virtual-reality","VR",{"id":273,"name":274},"ssl","SSL",{"id":276,"name":277},"perl","Perl",{"id":279,"name":280},"operating-system","OS",{"id":282,"name":283},"ios","iOS",{"id":285,"name":286},"google","Google",{"id":288,"name":289},"deeplearning","DeepLearning",{"id":291,"name":292},"aws","AWS",{"id":294,"name":295},"apple","Apple",{"id":297,"name":298},"api","API",{"id":300,"name":301},"3-d","3D",{"id":303,"name":304},"school","学校",{"id":306,"name":307},"blender","Blender",{"id":309,"name":310},"android","Android",76,200,{"contents":314,"totalCount":60,"offset":59,"limit":60},[315,367,432],{"id":316,"createdAt":317,"updatedAt":318,"publishedAt":319,"revisedAt":318,"title":320,"category":321,"thumbnail":330,"image":334,"content":341,"keyword":342,"client":357,"team":358,"url":362,"release":363,"status":364,"top":19,"blog":25,"service":366},"phpj-noel-2025","2025-12-15T06:18:04.117Z","2026-03-10T03:11:10.799Z","2026-03-05T04:15:03.177Z","PIERRE HERMÉ PARIS | NOËL 2025",[322,327],{"id":323,"createdAt":324,"updatedAt":325,"publishedAt":324,"revisedAt":324,"name":326},"web","2024-03-22T05:33:05.262Z","2024-06-24T23:16:42.692Z","ウェブ制作",{"id":15,"createdAt":328,"updatedAt":328,"publishedAt":328,"revisedAt":328,"name":329},"2024-03-22T05:34:30.127Z","デザイン＆ディレクション",{"url":331,"height":332,"width":333},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/47e7b069013a45b8b6e931ec132bd272/thumb.png",900,1200,[335,337,339],{"url":336,"height":42,"width":43},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/43a703ebe8d7467aac2c995378cb081e/1.png",{"url":338,"height":42,"width":43},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/6aed2d670822422696329a5cb3a6877f/2.png",{"url":340,"height":42,"width":43},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/b691d73151a94dcf9d60a6f8af436eac/3.png","\u003Cp>昨年に続き、ホリデーシーズン限定の『NOËL 2025』スペシャルサイトを、デザインとフロントエンドで担当しました。\u003Cbr>\u003Cbr>「深海(アビス)」をテーマに、鮮やかな青から徐々に暗く沈んでいくグラデーションで、海の中を潜っていくような体験を表現。泡や珊瑚、砂などのモチーフを取り入れ、ページ全体で海中の世界を感じられる構成に仕上げました。\u003Cbr>\u003Cbr>砂や泡の表現にはWebGLとGPGPUを用い、数万単位のパーティクルをGPUで並列処理することで滑らかな動作を実現。一部テキストは3D描画で演出しながら、DOM上にも同内容を配置し、表現とSEOの両立を図りました。\u003Cbr>また、Safariなどブラウザ差異による負荷を考慮し、SVGからCanvasへ置き換えるなど最適化を実施。視覚的な印象を保ちながら、各環境で安定して動作するよう設計しています。\u003Cbr>\u003Cbr>デザインと実装の両面から、制作の背景やポイントについてブログで詳しく解説しています。\u003C/p>",[343,347,352],{"id":344,"createdAt":345,"updatedAt":346,"publishedAt":345,"revisedAt":346,"name":246,"filter":25,"page":25},"ice0h9h9ap","2024-06-28T01:14:44.830Z","2025-01-15T07:40:01.729Z",{"id":348,"createdAt":349,"updatedAt":350,"publishedAt":349,"revisedAt":350,"name":351,"filter":25,"page":25},"6ncqc37v7nzq","2024-06-28T01:14:12.293Z","2025-01-15T07:39:08.437Z","デザインプロジェクト",{"id":353,"createdAt":354,"updatedAt":355,"publishedAt":354,"revisedAt":355,"name":356,"filter":25,"page":25},"ztrz9np70v","2024-06-28T01:14:41.050Z","2025-01-15T07:40:30.428Z","コンセプトメイキング"," PH PARIS JAPON 株式会社",[359],{"fieldId":360,"title":361},"teamField","S2ファクトリー","https://www.s2factory.co.jp/blog/noel2025/","2025.10.17",[365],"公開中",[],{"id":368,"createdAt":369,"updatedAt":370,"publishedAt":369,"revisedAt":370,"title":371,"category":372,"thumbnail":379,"image":383,"content":388,"keyword":389,"client":371,"team":404,"url":427,"release":428,"status":429,"statusText":430,"top":25,"blog":25,"service":431},"tamabi","2024-06-28T01:58:38.788Z","2025-05-27T03:25:42.261Z","多摩美術大学",[373,374],{"id":323,"createdAt":324,"updatedAt":325,"publishedAt":324,"revisedAt":324,"name":326},{"id":375,"createdAt":376,"updatedAt":377,"publishedAt":376,"revisedAt":376,"name":378},"system","2024-03-22T05:33:52.708Z","2024-06-24T23:16:53.739Z","システム開発",{"url":380,"height":381,"width":382},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/dea8e004e627415c80bf7b8d622bb4b9/tamabi-thumbnail-1.png",456,600,[384],{"url":385,"height":386,"width":387},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/a000f3cedf5d474d83c5b70e8c11db4e/tamabi-other-1.png",1305,1740,"\u003Cp>「多摩美術大学」ウェブサイトリニューアルのお手伝いをさせていただきました。\u003Cbr>\u003Cbr>サイトのコンテンツを大幅に整理し、運用効率を考慮した再利用しやすく組み合わせやすいUIコンポーネントを構築。また多くの方に利用していただけるようにアクセシビリティの向上にも注力しました。\u003Cbr>インフラは、従来のオンプレミスとクラウドが混在していた環境から、AWS への段階的な移行を進めており、今後の完全移行に向けた準備も進行中です。 \u003Cbr>\u003Cbr>弊社は、フロントエンドとバックエンドの実装、インフラ構築を担当しました。\u003C/p>",[390,394,398,403],{"id":391,"createdAt":392,"updatedAt":393,"publishedAt":392,"revisedAt":393,"name":292,"filter":25,"page":25},"uftrxsmd0v72","2024-06-28T01:14:13.671Z","2025-01-15T07:39:25.538Z",{"id":395,"createdAt":396,"updatedAt":396,"publishedAt":396,"revisedAt":396,"name":397,"filter":19,"page":19},"yctx9hzd4","2024-06-28T01:14:33.743Z","Lambda",{"id":399,"createdAt":400,"updatedAt":401,"publishedAt":400,"revisedAt":401,"name":402,"filter":25,"page":25},"u84cy0fbzno","2024-06-28T01:14:39.521Z","2025-01-15T07:40:41.433Z","Cloud",{"id":344,"createdAt":345,"updatedAt":346,"publishedAt":345,"revisedAt":346,"name":246,"filter":25,"page":25},[405,408,411,414,417,420,423,426],{"fieldId":360,"title":406,"link":407},"萩原 俊矢","https://shunyahagiwara.com/#/works",{"fieldId":360,"title":409,"link":410},"GrandBase Inc.","https://www.grandbase.jp/",{"fieldId":360,"title":412,"link":413},"DSCL Inc.","https://dscl.jp/",{"fieldId":360,"title":415,"link":416},"株式会社トラフィックス","https://traffics.jp/",{"fieldId":360,"title":418,"link":419},"株式会社カンバセーションズ","https://qonversations.jp/",{"fieldId":360,"title":421,"link":422},"Measurements Inc.","https://www.measurements.co.jp/",{"fieldId":360,"title":424,"link":425},"tha ltd.","https://tha.jp/",{"fieldId":360,"title":361},"https://www.tamabi.ac.jp/","2024.4.4",[365],null,[326],{"id":433,"createdAt":434,"updatedAt":435,"publishedAt":434,"revisedAt":435,"title":436,"category":437,"thumbnail":439,"image":441,"content":450,"keyword":451,"client":424,"team":467,"url":473,"release":474,"status":475,"statusText":430,"top":19,"blog":25,"service":476},"humanity","2024-06-28T01:56:51.507Z","2025-05-27T03:26:34.287Z","HUMANITY",[438],{"id":375,"createdAt":376,"updatedAt":377,"publishedAt":376,"revisedAt":376,"name":378},{"url":440,"height":381,"width":382},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/740adb4e02c54fee97d12025df5f16a0/humanity-thumbnail-1.png",[442,444,446,448],{"url":443,"height":386,"width":387},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/2a10b034854d40e789d38ac33e0a3c4e/humanity-other-1.png",{"url":445,"height":386,"width":387},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/1091c52a97f745e5a3fc105bd0e542dc/humanity-other-2.png",{"url":447,"height":386,"width":387},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/613c8c836fff40119e9f85097262399d/humanity-other-3.png",{"url":449,"height":386,"width":387},"https://images.microcms-assets.io/assets/d6dcb8ec530642e7a9b0d0c0a93bf874/3a9dfb8cce0d4ec887ead3d3998be04c/humanity-other-4.png","\u003Cp>『HUMANITY』は、インターフェース／ビジュアルデザイナーの中村勇吾氏とゲームクリエイター水口哲也氏のタッグによって制作された PlayStation 5(PS VR2対応)、PlayStation 4(PS VR対応)、Steam(PC用VR対応)用アクションパズルゲームです。\u003Cbr>\u003Cbr>プレイヤーは柴犬を操作して、自我を失った人類を導きゴールを目指します。\u003Cbr>メインのストーリーモードには 90 以上のステージを収録。さらに「STAGE CREATOR」では、自分だけのオリジナルステージを作って全世界のプレイヤーにシェアが可能です。また「USER STAGES」では、他のプレイヤーがシェアしたステージが公開され、カスタムのプレイリストや、タグを使用して検索し、お気に入りのステージを発見・チャレンジできます。\u003Cbr>\u003Cbr>弊社はゲームのコミュニティ機能のバックエンドと管理ツールの作成、インフラを担当しました。\u003C/p>",[452,457,462,463],{"id":453,"createdAt":454,"updatedAt":455,"publishedAt":454,"revisedAt":455,"name":456,"filter":25,"page":25},"fg8e4c9nl","2024-06-28T01:14:04.517Z","2025-01-15T07:36:58.970Z","CMS",{"id":458,"createdAt":459,"updatedAt":460,"publishedAt":459,"revisedAt":460,"name":461,"filter":25,"page":25},"p6qgoo2k9vl9","2024-06-28T01:14:06.759Z","2025-01-15T07:37:22.466Z","大規模データ",{"id":399,"createdAt":400,"updatedAt":401,"publishedAt":400,"revisedAt":401,"name":402,"filter":25,"page":25},{"id":464,"createdAt":465,"updatedAt":466,"publishedAt":465,"revisedAt":466,"name":197,"filter":25,"page":25},"pxnv6cy2u","2024-06-28T01:14:45.570Z","2025-01-15T07:39:54.004Z",[468,471,472],{"fieldId":360,"title":469,"link":470},"Enhance","https://enhance-experience.com/ja/",{"fieldId":360,"title":424,"link":425},{"fieldId":360,"title":361},"https://humanity.game/ja/","2023.5.16",[365],[378],1776323225808]