小室斗南 (Tonami Komuro)┇Web Creative Developer┇お仕事のご相談はDMまたは [email protected] まで
札幌
Joined February 2023
- Tweets2.3K
- Following870
- Followers1.5K
- Likes48.2K
とな┇Web Creator ⧉ retweeted
こういうの大好き過ぎる…！楽しくて全盛りにしてしまった🤣
となさん、いつも素敵な遊び心ある作品ありがとうございます～！
ハッピーハロウィーン！🎃🎉
Halloween 2026🎃
Jack-o'-Mine を公開しました！
▸ jack-o-mine.tonami-komuro.co…
自分だけのカボチャを彫ってカードにできます！
動画では、金ピカかぼちゃをホログラムカードにしています✨
顔や言葉を自由に彫って
帽子や飾りをつけたり質感を変えたり
色々カスタマイズして、
自分だけのカボチャを作ってみてください！
(X にもシェアしてくれたら喜びます🙌)
#ハロウィン #Halloween2026
とな┇Web Creator ⧉ retweeted
Site of the Day 15 Oct
Tonami & Ayano Wedding Invitation
By: Tonami Komuro (Japan)
csswinner.com/details/tonami…
とな┇Web Creator ⧉ retweeted
(News)
4WIDEサイトをリニューアルしました。
.
今回のリニューアルでは、大切にしている考え方や、ものづくりに向き合う姿勢を、自分自身の言葉でしっかりと伝えることを重視しています。
背景にある思想なども言語化し、より深く知っていただけるサイトを目指しました。
4wide.jp/
とな┇Web Creator ⧉ retweeted
超個人的な制作なのですが…
11月に結婚式を挙げる予定で、結婚式の招待状サイトを #Studio で制作しました。
妻の専門であり、二人の出会いのきっかけにもなった「建築」をテーマに、建築的なアプローチをレスポンシブやアニメーションなどのWeb表現に取り入れてみました。💭
とな┇Web Creator ⧉ retweeted
結婚式 Web招待状サイト を公開しました！
↪︎ wedding.tonami-komuro.com/
本年12月に挙げる自身の結婚式のために
制作しました🕊️
夫婦でコンセプトを決め、
デザイン～実装までやり切りました！
自分の写真が多く載っているので
恥ずかしさもありますが、
ぜひ見て感想をいただけたら嬉しいです！
とな┇Web Creator ⧉ retweeted
フロントエンド実装を担当させていただきました。素敵なサイトなのでぜひご覧ください！
とな┇Web Creator ⧉ retweeted
[自主制作] Motion Pieces - 009
Keyframe Lost
動画のキーフレームが失われた時のデータモッシュでサイトを「崩す→修復する」デモです。
カーソルで画素を引きずれます。
(WebGL2 / GLSL / TypeScript)
▸ motion-pieces.pages.dev/keyf…
とな┇Web Creator ⧉ retweeted
[自主制作] Motion Pieces - 010
Sapporo
東京から地元札幌に戻って一年の記念に、Web 作品を作りました
札幌の実際の地理データを元に建物 52,634 棟が、音楽に合わせて文字になります
ぜひ、音ありで見てみてください！
(WebGL / three.js / GLSL / Web Audio / 3D Tiles / TypeScript)
▸ motion-pieces.pages.dev/sapp…
とな┇Web Creator ⧉ retweeted
[自主制作] Motion Pieces - 007
Drumtype
ドラムマシンとリズムに合わせたモーションを作ってみました🥁
リズムは4パターン用意しており、自分で打ち込みもできます。
ぜひ音ありでどうぞ！
(DOM / Variable Font / Web Audio / TypeScript)
▸ motion-pieces.pages.dev/drum…
とな┇Web Creator ⧉ retweeted
Music + Motion Sync
[自主制作] Motion Pieces - 007
Drumtype
ドラムマシンとリズムに合わせたモーションを作ってみました🥁
リズムは4パターン用意しており、自分で打ち込みもできます。
ぜひ音ありでどうぞ！
(DOM / Variable Font / Web Audio / TypeScript)
▸ motion-pieces.pages.dev/drum…
とな┇Web Creator ⧉ retweeted
[自主制作] Motion Pieces - 001
Dekoboko
布の下に敷かれた物体により凸凹ができるデモを作りました。
マウス操作やテキストの変更もできるので遊んでみてください！
(WebGL / three.js / GLSL)
▸ motion-pieces.pages.dev/deko…
とな┇Web Creator ⧉ retweeted
自主制作サイト『Petrichor』
▸ studies.tonami-komuro.com/pe…
今回は少し変わったサイトを作ってみました。
"petrichor" (ペトリコール）の意味は
「雨が降った時の匂い」です。
この面白い英単語から制作を思いたち、
コンセプトの検討からはじめ、実装まで行いました。
---
Vite + TypeScript / CSS のみで、
WebGLは使用せずに制作しました。
紙の繊維やインクの掠れは、canvas で一度だけ焼いて CSS のマスクにしています。
とな┇Web Creator ⧉ retweeted
【インスタアカウント開設&UdemyベストセラーReact講座、無料プレゼント企画】
くるしばのインスタアカウントができたのでその告知と、受講者評価4.96/5.00のUdemyベストセラー講座の無料クーポンプレゼント！
（12/17 23:59まで）
受け取り方法など詳しくは👇から
この度、くるしばのインスタアカウントができました！
Twitterよりも画像をたくさん載せられたりするので、より詳しい内容だったり、インスタ限定の情報などものせています。
そしてこちらのアカウントの開設を記念して、僕が作成した講座の中でもトップクラスに評価が高い
「ドラッグ&ドロップで要素を並び替えるTrelloクローンを作ってReact+Typescriptをマスターしよう！」
の無料クーポンを配布します。
Reactを勉強したての人向けに、人気TodoアプリのTrelloのクローンを作る内容です。
作るサービスの難易度としては比較的簡単なので、Progateの次に何をやるか迷ってる人に最適な内容となっています。
初心者向けではありますが、ドラッグ＆ドロップでの並び替え機能をはじめとした本格的な機能を、こちらで用意した外部APIと連携する形で作成していく、実践的な内容となっています。
こちら通常価格が19,800円の講座なので、無料のこの機会にぜひ受講してみてください！
一緒に受けるとよりReactへの理解が深まる他講座の最安クーポンもついてくるかも？
【受け取り期限】
・12/17 23:59まで
・期限前でも、一定以上の受け取り数を超えた場合途中で配布を中止する可能性があります
【注意事項】
・受け取り数が増えて期限前に配布を中止する可能性があるので、お早めに申し込みください
・👇の受け取り方法を守らないと受け取りできません。必ずこちらを守って申し込みください
・その上で受け取れないという方は遠慮なくDMでご連絡ください
とな┇Web Creator ⧉ retweeted
for(float i,g,e,s;++i<99.;o.rgb+=.01-hsv(.1,g*.016-e*.3,s/2e2)){vec3 p=vec3((FC.xy-.5*r)/r.y*5.+vec2(0,9),g)*rotate3D(-1.1-cos(t*.15)*.1,vec3(1,11.+sin(t)*.15,-1.5));s=2.;for(int i;i++<19;p=vec3(.08,4,-1)-abs(abs(p)*e-vec3(3,4,3)))s*=e=7.1/dot(p,p*.51);g+=p.y/s;s=log2(s)/exp(e);}
とな┇Web Creator ⧉ retweeted
自主制作サイト
『Anamnesis』を公開しました！
▸ studies.tonami-komuro.com/an…
光と水、そこから立ち上がる “記憶” をそっとたどる、小さなギャラリーサイトです。
トランジションやエフェクトの質感にこだわっていて、PCではスクロール、SPではスワイプで作品が切り替わります。
ぜひ実際に触ってもらえたら嬉しいです。
---
今回は裏テーマとして「AIを使い倒す」というチャレンジもしていて、コードの8〜9割はAIに書いてもらい、画像もすべて Nano Banana Pro で生成しました。
デザインとコンセプトの方向性さえ明確にできれば、AIでここまで作れるのか、という驚きと、実装過程での発見がたくさんありました。
#webgl #glsl #threejs #AIart
とな┇Web Creator ⧉ retweeted
シンプルで深みがあってすてきです。
自主制作サイト
『Anamnesis』を公開しました！
▸ studies.tonami-komuro.com/an…
光と水、そこから立ち上がる “記憶” をそっとたどる、小さなギャラリーサイトです。
トランジションやエフェクトの質感にこだわっていて、PCではスクロール、SPではスワイプで作品が切り替わります。
ぜひ実際に触ってもらえたら嬉しいです。
---
今回は裏テーマとして「AIを使い倒す」というチャレンジもしていて、コードの8〜9割はAIに書いてもらい、画像もすべて Nano Banana Pro で生成しました。
デザインとコンセプトの方向性さえ明確にできれば、AIでここまで作れるのか、という驚きと、実装過程での発見がたくさんありました。
#webgl #glsl #threejs #AIart
とな┇Web Creator ⧉ retweeted
ほんとこの人すごすぎる👏👏👏
もう僕はすごいしか出てこない笑
自主制作サイト
『Anamnesis』を公開しました！
▸ studies.tonami-komuro.com/an…
光と水、そこから立ち上がる “記憶” をそっとたどる、小さなギャラリーサイトです。
トランジションやエフェクトの質感にこだわっていて、PCではスクロール、SPではスワイプで作品が切り替わります。
ぜひ実際に触ってもらえたら嬉しいです。
---
今回は裏テーマとして「AIを使い倒す」というチャレンジもしていて、コードの8〜9割はAIに書いてもらい、画像もすべて Nano Banana Pro で生成しました。
デザインとコンセプトの方向性さえ明確にできれば、AIでここまで作れるのか、という驚きと、実装過程での発見がたくさんありました。
#webgl #glsl #threejs #AIart