Ryu Utsunomiya パートナー様向けポートフォリオ

第三者への共有はお控えください。

Profile

Tech Stack

WebGL(three.js) / GLSL / JavaScript / TypeScript / HTML / CSS(SCSS, SASS) / php(WordPress) / Liquid(Shopify) / Astro.js / Nuxt.js / Next.js / HeadelessCMS(microCMS, Contentful, etc.) / Cloudflare / Vercel / Netlify / Firebase , etc.

Client

3RD GEAR, Inc. / FunTech inc. / Harch Inc. / MEFILAS inc. / NOLL+= / REFLECTA, Inc. / monopo NYC inc. / monopo Tokyo inc. / reynato.tokyo , etc.

Media

WebGL 総本山 / S5-Style / SANKOU! / Good Web Design / RWD JP / BRIK GALLERY / 1GUU / Design bookmark / Brilliant Design Collect / LP ARCHIVE / MOBILE FIRST DESIGN GALLERY / cocotano! , etc.

Works

• NOCONTEXTANIMAS

  URL

  https://nocontextanimas.myshopify.com/

  スコープ

  Front-end / Back-end / Design

  技術スタック

  Liquid (Shopify)

  期間

  1.5ヶ月

  実装のポイント

  自主ファッションブランドのウェブストアです。ブランドの扱う問いを造花で表現しました。

• 塑tructure

  URL

  https://www.sotructure.com

  スコープ

  Front-end / Design

  技術スタック

  Astro.js / Cloudflare pages

  期間

  1.5ヶ月

  実装のポイント

  インタラクティブに変形するフレームによってスタジオのイデオロギーを表現しています。

• MIDW

  URL

  https://midw.jp

  スコープ

  Front-end / Back-end (CMS)

  技術スタック

  Astro.js / Newt / Cloudflare pages

  期間

  1.5ヶ月

  実装のポイント

  事務所名の基となる4つの表現形態（Model, Image, Drawing, Writing）それぞれに対して独立した構造のページを実装しています。加えてそのコンセプトが際立つよう、アニメーションなどの演出は最低限に抑えています。

• SXD Lab

  URL

  https://sxdl.jp

  スコープ

  Front-end

  技術スタック

  Astro.js / Cloudflare pages

  期間

  1ヶ月

  実装のポイント

  持続可能な社会の実現を目標とする団体のサイトのため、可能な限り閲覧中の電力消費量やCO2排出量を抑えることを目指しました。画像を多用するデザインでありながら、websitecarbon.comでAランク、EcograderでBランクを達成しました（2025年1月当時）。PJ期間中は、見た目を損なわないよう各画像ごとに異なる圧縮率での軽量化や、似たアセット同士を共通化し、それらが破綻なく繋がるよう実装上で工夫を加えるなど、いかにページ単位でのデータサイズを削減できるかという部分に工数を割きました。また、100%再生利用可能なエネルギーで稼働しているという理由で、ホスティングサーバーはCloudflare pagesをご提案しました。

• Instant Anima

  URL

  https://www.instantanima.com/

  スコープ

  Front-end / Back-end (CMS) / Design

  技術スタック

  Astro.js / Stripe / Cloudflare pages

  期間

  2ヶ月

  実装のポイント

  トップページの演出はコレクションのテーマである「即席」から発想しました。ランダムなパターンのロゴと画像が次々に生成されるシステムを考案しました。

• paradise

  URL

  https://paradisecreative.co.jp/

  スコープ

  Front-end / Back-end (CMS)

  技術スタック

  WebGL / Astro.js / contentful / Cloudflare pages

  期間

  1.5ヶ月

  実装のポイント

  メニュー画面などで表示しているグラデーションはユーザーがサイトを訪れた時間により変わります（空の色を表現しています）。

• オリエンタルモーター 採用サイト

  URL

  https://www.orientalmotor.co.jp/ja/recruit

  スコープ

  Front-end

  技術スタック

  Astro.js

  期間

  1.5ヶ月

  実装のポイント

  求職者が繰り返しサイトを訪れる状況を想定し、各種演出についてはシンプルなフェードインなどを用いて印象的でありつつも飽きのこないすっきりとしたバランスでまとめることを意識して設計しました。ローディングを除き、ユーザーが演出を「待つ」時間が発生しないようにしています。

• inbetween

  URL

  https://www.inbetween.jp

  スコープ

  Front-end

  技術スタック

  Astro.js

  期間

  1.5ヶ月

• RYU UTSUNOMIYA WORKS 2015-2019

  URL

  https://www.ryuutsunomiya.com

  スコープ

  Front-end / Design

  技術スタック

  WebGL / Astro.js / Cloudflare pages

  期間

  1ヶ月

  実装のポイント

  木のパネルの演出は、作家らしさの視覚化と同時に、WebGLを用いる中でいかにアクセシビリティを保つか、という問いから誕生しました。vertices（3D空間上に表示する面の頂点）とmeterial（その面の色）という、Three.jsのレンダリング時間に関わる構成要素それぞれの描画において、可能な限り軽微な処理で収まりかつデザインのテーマと合致するインタラクションとなる組み合わせを模索しました。採用案については、直方体を生成するための僅か8つのverticesと、テクスチャーの読み込みのみを行うmaterialの連続で構成されています。

  メディア掲載

  BRIK GALLERY
  me ki ki ki

• SNDO

  URL

  https://sndo.jp

  スコープ

  Front-end / Back-end (CMS)

  技術スタック

  Astro.js / WebGL / Newt / Cloudflare pages

  期間

  1ヶ月

  実装のポイント

  SNDOのクリエイティブソースである「日本的美意識」の視覚化に挑戦しました。

• ヨッキューくん ギャラリー

  URL

  https://yokkyukungallery.com

  スコープ

  Front-end / Back-end (CMS)

  技術スタック

  Next.js / WebGL / microCMS / Shopify Storefront API Client / Cloudflare pages

  期間

  2ヶ月

  実装のポイント

  漫画に登場するキャラクターのアートパネルが購入できるバーチャルストアです。3DCGを活用することで、実際のギャラリーで作品を購入するような体験を生み出せないかという考えから生まれました。パネルの隣にある本をクリックすると該当のキャラクターが登場する話が読めるようになっています。

  メディア掲載

  WebGL 総本山 | アートパネルの展示に加え実物を購入することも可能！ ヨッキューくん ギャラリー がおもしろい
  BRIK GALLERY
  me ki ki ki
  microCMS

• 小笠原海洋センターさんと考えるウミガメの未来 │ フェリシモ

  URL

  https://www.felissimo.co.jp/gopeace/ogasawara/

  スコープ

  Front-end

  技術スタック

  Astro.js

  期間

  2週間

  実装のポイント

  背景のウミガメはランダムなスピードや出現位置になるようにコードで出力しています。

  メディア掲載

  SANKOU!
  LP ARCHIVE
  MOBILE FIRST DESIGN GALLERY
  cocotano!
  MIX

• VOOKMARK

  URL

  https://vookmark.io/

  スコープ

  Front-end

  技術スタック

  Astro.js

  期間

  2週間

• amifa purpose

  URL

  https://www.amifa.co.jp/purpose

  スコープ

  Front-end

  技術スタック

  Astro.js

  期間

  1ヶ月

• MATTER

  URL

  https://mattertokyo.jp/

  スコープ

  Front-end

  技術スタック

  WebGL / Astro.js

  期間

  2週間（私の担当パートのみ）

  実装のポイント

  WebGL部分の実装を担当しました。CMSにより入稿された画像に対し、出現前のグラデーションと網点のエフェクトを生成しています。紙媒体の作品を多く扱う本スペースの特徴に倣った、シルクスクリーン印刷風の表現です。グラデーションはインクの滲みがモチーフです。網点はCMYK風にしました。

  メディア掲載

  瞬間に垣間見える面白さをあなたは感じ取れるか！？ アートスペース MATTER のウェブサイト | WebGL 総本山
  BRIK GALLERY

• SMARG Wealth

  URL

  https://wealth.smarg.jp/

  スコープ

  Front-end

  技術スタック

  Nuxt.js

  期間

  2ヶ月

• ヨッキューくん 公式サイト

  URL

  https://yokkyukun.com

  スコープ

  Front-end / Back-end (CMS)

  技術スタック

  Next.js / WebGL / microCMS / Cloudflare pages

  期間

  1.5ヶ月

  実装のポイント

  漫画の雰囲気と融和する演出、インタラクションの設計を目標にしました。

  メディア掲載

  S5-Style
  Good Web Design
  BRIK GALLERY
  1GUU
  Design bookmark

• npu

  URL

  https://neplusultra.jp

  スコープ

  Front-end / Back-end (CMS)

  技術スタック

  Next.js / WebGL / microCMS / Cloudflare pages

  期間

  1.5ヶ月

  実装のポイント

  npu様の長年の活動を「膨大な知の集積」と見立て、書籍の世界に誘うような演出を実装しました。演出のトンマナについては会社名の基となった"ne plus ultra"（極致）に倣い、ミニマルにまとめました。

  メディア掲載

  WebGL 総本山 | 紙の本の質感をウェブ上に再現しつつコンテンツにもその文脈を落とし込んだ npu のウェブサイト
  me ki ki ki
  RWD JP
  Good Web Design
  Brilliant Design Collect

• PSG JAPAN TOUR 2023

  スコープ

  Front-end

  技術スタック

  Next.js

  期間

  1.5ヶ月

  実装のポイント

  「世界の傑物、東京で激突。」のコピーに倣い、超常的な存在同士のぶつかり合い、またそれに伴う会場の熱気を予見させる意図で演出を設計しました。

• Dr.TRAINING

  スコープ

  Front-end

  技術スタック

  HTML(pug) / SASS / JavaScript

  期間

  1.5ヶ月

  メディア掲載

  SANKOU!