アーカイブ
-
Three.jsの基本3要素|Scene・Camera・Rendererを図で理解する
みなさんこんにちは。フロントエンドエンジニアのしゅん(@shun_webdesign)です。 前回のThree.jsの環境構築|Vite + npmで最速セットアップで、色のついた箱がくるくる回るところまでやりました。コ …
-
Three.jsの環境構築|Vite + npmで最速セットアップ
みなさんこんにちは。フロントエンドエンジニアのしゅん(@shun_webdesign)です。 Three.js入門ガイドで「Three.jsって手軽に3Dが作れて面白い」という話をしました。この記事はその続きで、実際に手 …
-
GLSL入門|Three.jsのShaderMaterialで自作シェーダーを書く
みなさんこんにちは。フロントエンドエンジニアのしゅん(@shun_webdesign)です。 僕はXでThree.jsのシェーダー作品をちょこちょこ投稿しているんですが、その多くの土台になっているのが「GLSL」です。 …
-
Three.jsでWebGPUを使う|WebGPURendererへの移行ガイド
みなさんこんにちは。フロントエンドエンジニアのしゅん(@shun_webdesign)です。 前回、TSLとは?WebGPU時代の新しいシェーダーの書き方という記事で「これからはWebGPUの時代だよ」という話をしました …
-
TSLとは?WebGPU時代の新しいシェーダーの書き方
みなさんこんにちは。フロントエンドエンジニアのしゅん(@shun_webdesign)です。 最近、僕はXでThree.jsのシェーダー作品をちょこちょこ投稿しているんですが、その多くを「TSL」というもので書いています …
-
Three.js入門|ブラウザで動く3D表現を作る完全ガイド
みなさんこんにちは。フロントエンドエンジニアのしゅん(@shun_webdesign)です。 僕は普段、Three.jsを使ってブラウザで動く3D表現を作っていて、その作品をXでも発信しています。最初は「3Dってなんか難 …
-
ブログをリニューアル。Astro + WordPress headlessに移行した理由と技術スタック紹介
はじめに このたびブログ「ShunNote」をリニューアルしました。 見た目のデザインを一新しただけでなく、裏側のシステム構成も大きく変えています。以前はWordPressをそのまま使っていましたが、今回は Astro …
-
【完全ガイド】Webデザインのアイデアを収集する方法【2026年版】
みなさんこんにちは。フロントエンドエンジニアのしゅん(@shun_webdesign)です。 「良いデザインが作れる人」と「そうでない人」の差は、センスよりもインプットの量と仕組みにあると僕は思っています。引き出しが多け …
-
Lottieでグラデーションを使ってアニメーションを作る裏技2つ
みなさんこんにちは。しゅん(@shun_webdesign)です。 皆さんはLottieをご存知でしょうか?なめらかなアニメーションをサイトに実装でき、手軽にリッチな表現を取り入れることができます。 LottieはAft …
-
【インタビュー】フロントエンドエンジニアのリアルな実情を聞いてみた
みなさんこんにちは。しゅん(@shun_webdesign)です。 今回はフロントエンドエンジニアのyukiさんにこれまでのキャリアやお仕事などのお話をお伺いしました。 Web3大アワードと言われるFWAを受賞しているエ …