Claude Codeを追うなら、次に見るべきは「見た目」ではなく「動き」です。
今回のX投稿で大事なのは、ボタンに触れた瞬間だけ反応するhoverから、近づいた時点で反応するUIへ意識が移っている点です。
この変化は、デザイナーにもフロントエンドにも関係があります。
コードを全部覚えるより、まず「どんな動きが気持ちいいのか」を言葉にできるようになるほうが大事です。
近づいた時点で反応するUIが増えている
元投稿では、カーソル位置と要素の中心距離を使ったUIが紹介されていました。
- カーソルの位置を取る
- ボタンやアイコンの中心位置を取る
- 距離が近いほど大きくする
- hoverのON/OFFではなく、連続的に変化させる
これだけ聞くと難しく見えます。
でも考え方はシンプルです。
「触れたら変わる」ではなく、「近づいたら少しずつ変わる」。
この差で、画面の感じ方が変わります。
ただのリンクやボタンではなく、そこに物が置いてあるように見えます。
実装の中心はpointermoveとgetBoundingClientRect
元投稿のコードは、ざっくり言うと次の流れです。
onpointermove = (e) => {
document.querySelectorAll(".dock > *").forEach((el) => {
const r = el.getBoundingClientRect();
const t = Math.max(
0,
1 - Math.abs(e.clientX - r.x - r.width / 2) / 120
);
el.style.scale = 1 + t * 0.5;
});
};ここで見たいのは、コードの暗記ではありません。
pointermove は、ポインターが動いたときに発火するイベントです。 getBoundingClientRect() は、要素の位置とサイズを取るメソッドです。
CSSの scale は、要素を拡大縮小するプロパティです。
つまり、やっていることは3つです。
- カーソルが動いた
- 要素との距離を計算した
- 近ければ少し大きくした
この3つを理解できると、Design Engineeringの入口に立てます。
hoverだけでは気持ちよさを作りにくい
hoverは便利です。
でもhoverは基本的に「入った」「出た」の切り替えです。
一方で、距離を使うUIは中間があります。
- 遠い
- 少し近い
- かなり近い
- 真上にいる
この段階を作れると、UIに手触りが出ます。
Vercel、Linear、Arc系のUIが気持ちよく見える理由も、こういう小さな反応の積み重ねにあります。
Opus 4.8で変わるのはコードより学び方
Anthropicは2026年5月28日にClaude Opus 4.8を発表しました。
公式発表では、Opus 4.8はコーディング、エージェント作業、実務タスクで改善されたと説明されています。
ただし、ここで大事なのは「Opus 4.8がDesign Engineeringという公式機能を出した」という話ではありません。
むしろ、こういう細かいUI実装を、デザイナーや非エンジニア寄りの人でも試しやすくなったことです。
以前なら、距離計算、イベント処理、CSS変形を自分でつなぐ必要がありました。
今はClaude Codeにこう頼めます。
アイコンがカーソルに近づいたら、距離に応じて少し大きくなるdock UIを作って。
pointermoveとgetBoundingClientRectを使って、仕組みが分かるように短くコメントも入れて。この頼み方なら、完成物だけでなく学習にも使えます。
Claude Code更新は全部追わなくていい
元投稿では、Claude Codeの変化として次の話題も挙げられていました。
/simplifyから/code-reviewへの流れ- Plugins
- 権限管理
- レビュー設計
- Hooks
- Subagents
全部を深く追う必要はありません。
最初は3つで十分です。
- 権限管理: Claude Codeに何を許すか決める
- Hooks: 実行前後にチェックを挟む
- Subagents: 役割ごとに作業を分ける
Anthropic公式ドキュメントでも、Claude Codeには細かい権限設定、Hooks、Plugins、Subagentsの仕組みが用意されています。
ここを押さえると、ただコードを書かせる使い方から、作業の流れごと設計する使い方に変わります。
読み直すときは3つだけ見る
この記事を読み直すときは、次の3つだけ見れば大丈夫です。
1つ目。
Design Engineeringは、見た目だけでなく動きも設計すること。
2つ目。
近づいたら反応するUIは、pointermove、getBoundingClientRect()、scale で考えられること。
3つ目。
Claude Codeは、コード生成ツールではなく、作業の流れを作る道具として見たほうが学びやすいこと。
今日試すならこの1問でいい
Claude Codeにこう聞いてください。
hoverではなく、カーソルとの距離で反応するボタンを1つ作って。
初心者が読めるように、pointermove、getBoundingClientRect、scaleの役割をコメントで説明して。
最後に、hover実装との違いを3行で説明して。これを1回動かすだけで、今回の話はかなり理解できます。
読むだけより、10分触ったほうが早いです。
関連記事
- Claude Codeに高いお金を払う前に、最初に決めておきたい5つのこと
- Claude Codeのプロジェクト設定、ちゃんとやってますか？.claude/フォルダの使い方
- Claude Codeのsubagents入門。初心者が今日1体作って動かす最短ガイド
- Claude Opus 4.8でオーケストレーションが上手になった。では実際どう使うのか
