ウェブ制作会社ICS代表。筑波大学非常勤講師。HTML/CSS/JavaScriptを用いたユーザビリティーを意識したUI構築が専門で、3D表現・クリエイティブコーディングが得意。著書『フロントエンドの知識地図』など技術書14冊を執筆。趣味でタイムラプス撮影。
東京都品川区
Based in Japan
- Tweets 31,777
- Following 1,016
- Followers 31,666
- Likes 26,096
モンサンミッシェル到着時は豪雨でしたが、屋内観光後に天気が急に回復。
風速30km/時の強風で、いっきに雲が流れたおかげです。それもあり、雲が流れるタイムラプスを撮影できました。
二枚目の場所にでて撮影。干潟は短時間に潮が満ちるので、気をつけながらの撮影でした。
日本では平安時代ごろに、フランスではこんな立派な教会を建てており、東西文化の進化の違いに想いを馳せていまし
た。
1
8
995
最近リリースされたReact 19.3で
<ViewTransition>コンポーネントが正式搭載。
画面間を連続的につなげた演出に役立ちます。
CSSとJSXで宣言的に書けるので、
生JavaScriptより簡単。
1
8
100
7,187
フロントエンドカンファレンス関西で登壇することになりました！
・10月12日 (月・祝)
・場所：グラングリーン大阪
私は「HTML-in-Canvas」をテーマに話します。
関西での登壇は久しぶり🐙
ぜひお申し込みくださいませ。
公式サイト→ 2026.frontend-conf.osaka.jp/
1
13
71
7,005
Three.jsカンファレンスの興奮も覚めやらぬうちに東京に戻ってきました。
多くの世界中のクリエイターとお話し刺激をもらったことを、明日からの日々の仕事に活かしていこうと思います。
#threejsconf #threejsparis
3
3
69
4,030
Three.js conf、セッション終わり！
クリエイティブ系のサイトが数多く、技術と創作を学べる素敵なカンファレンスでした！
#threejsconf #threejsparis
69
2,458
Three.js Journeyの
Bruno Simonさんの発表。
かつてのFlashサイトを紹介する文脈で城戸さん作のサイトが一瞬紹介されていました。
#threejsconf #threejsparis
3
847
JavaScriptライブラリー「math」、
良さそう！
・カメラをなめらかに追従させる
・地形の凹凸を作る
・計算速度も速い
React Three Fiberの人たちが作っている。
npm i mathでインストール可能。
#threejsconf #threejsparis
6
70
5,572
二日目、Renaud Rohlingerさんの発表「Performance and Tricks」が次元が高過ぎてヤバい感じでした。
パリまできた価値がありました…!!
#threejsconf #threejsparis
2
5
1,223
エッフェル塔とセーヌ川。
パリの夜景が美しすぎて、タイムラプス撮影が楽しいです！
カメラ：LUMIX S1R2
#threejsconf #threejsparis
2
50
2,815
mrdoob氏の発表は、開発の根底にあるようなお話しでした。デジタルとの関わりの始まりや、AIの急速な進化でできるようになったことなど。
深いインスピレーションを得ました。
#threejsconf #threejsparis
1
3
1,153
Anime.js の作者も登壇。
タイムライン編集でAnime.jsのコードを生成。
タイムラインのスタッガー（バラつき）指定もユニーク。
このツール、かなり良さそう！
#threejsconf #threejsparis
1
14
146
7,197
Chrome プロダクトマネージャー
のトーマス・ナッテスタッドが登壇。
HTML in canvasの話。
いま、ウェブで最も革新的で注目的な技術ですね。
#threejsconf #threejsparis
1
2
1,040
エンジニアのカンファレンスで、ヒップホップダンスが始まるというサプライズ！
（凄腕登壇者のクリエイティブの文脈で）
#threejsconf
1
5
760
Three.jsカンファレンスにて、
アニメーションライブラリの
GSAP 4が発表されました！
☑️前バージョンに対して性能向上
☑️スプリングの位置モーションを搭
☑️Web Animations APIプラグイン
☑️Threeプラグイン
GSAPの利用は指数関数的に伸びているそう。これは熱いですね！
#threejsconf
3
56
430
23,500
私の作例サイトをリニューアルしました！
ウェブ技術で作ったデモを掲載しています。
・2008年からの18年分のデモを掲載
・HTML, CSS, JS, WebGPU, WebGL等
・旧Flash作品は移植やエミュレーターで再生可能に
・ホバーで作例をプレビュー
・Angular→React + Next.js構成に
ぜひご覧ください！
1
10
109
6,339
ICS MEDIAでは2016年に記事を公開していましたが、今回表現をブラッシュアップ（私がリライトしました）。
←2016年 2026年→
技術の進化と、誰が作るかでこんなに変わるという例です！
1
2
978
パリにきたので、エッフェル塔の夕暮れをタイムラプス撮影してきました。
「鉄の貴婦人」と言われますが、緻密ながら壮大なスケールで圧倒されました。
カメラ：LUMIX S1R2
レンズ：LUMIX 14-28mm
1
64
4,338
ChatGPTのGPT-6 Astraで作ったThree.jsのデモ。
東京→パリの飛行機以内で、スマホから指示を出して作りました。座席のスカイマップみたいなデモです。
JavaScript・CSSとか良い感じ。Astra凄い！
4
25
260
25,627
Three.js Conference Parisに行くいい機会なので、太平洋フライト中の飛行機から、デモを作って公開を目指してみます。
リリースされたばかりのChatGPT 6 Atrasを使って、どこまでできるか挑戦。
#threejsconf
1
29
5,610
SIGMA 135mm f1.4 DGという超デカレンズで撮った都内の夜景。
気持ちいいぐらいパキッと撮れて、楽しいです。
カメラ：LUMIX S1R2
※ハイレゾショット（1.7億画素）
#SIGMAお試し
1
3
35
3,366
JavaScriptでの物理演算。
大量の粒子が滑らかに動くと楽しいものです。
技術として、WebGPU（canvasタグ）とWebAssemblyを使っています。
10
118
1,348
321,261
CSSのスクロール・トリガー・アニメーション。
フワッと出現する演出が、CSSだけで簡単に作れます。
Chrome・Edge 146（2026年3月リリース）以上で利用可能。
2
14
162
10,609
今日、Firefox 154がリリース。
待望のCSSに対応。
①sibling-index()・sibling-count()：バラバラっと出現させたり
②text-box ： ボタン等でテキストの天地中央配置に役立つ
これで全ブラウザで利用可能になりました。
2
37
190
14,310
