Ryu Utsunomiya パートナー様向けポートフォリオ
第三者への共有はお控えください。
Profile
フリーランスのウェブデザイナー/エンジニアです。
- IG:
- @ryu_utsunomiya
- X:
- @ryuU213
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!