画像リンクの動き
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
画像リンクの動き
カード型レイアウトが標準になった現在、画像リンクはWebで最もクリックされる部品のひとつです。このページでは、ホバー時に背景とテキストが現れる方向別パターン、X・Y・Z軸の回転、拡大・縮小・ぼかし・グラデーションまで、23種の演出を体系的に並べています。
目的はただひとつ、「この画像は押せる」を気持ちよく伝えること。演出の派手さではなく、リンクであることの伝わりやすさで選ぶのがコツです。
「画像リンクの動き」はクリックした先に関連するページがあることを明示する機能の役割も担っています。 サイトの印象にあわせた動きを取り入れてみましょう！
２３種類の「画像リンクの動き」を作ってみた
今回はシリーズ最多の２３種類になります。 後半から疲れて余白調整とか手抜きしちゃってます(^◇^;) あなたも途中から見るのが飽きてくるだろうと思ったので、ちょっと「ドキッ♡」とする画像を使ってます(о´∀`о) 最後までご覧になると、きっとうれしくなると思います！ お楽しみに！☆*:.｡. o(≧▽≦)o .｡.:*☆
よくある動作
背景が出現＋テキスト（下から）
背景が出現＋テキスト（上から）
背景が出現＋テキスト（左から）
背景が出現＋テキスト（右から）
背景が出現＋テキスト（中央から左右に）
背景が出現＋テキスト（中央から上下に）
回転＋テキスト（X軸）
回転＋テキスト（Y軸）
回転＋テキスト（Z軸1）
回転＋テキスト（Z軸2）
画像拡大（ぼかし）＋テキスト
画像縮小（ぼかし）＋テキスト
画像透過+ グラデーション＋テキスト
枠線＋テキスト
実務メモ（2026年追記）
実装の作法は3点。ホバー演出は@media (hover: hover)で限定し、タッチ端末で「1回目のタップが演出に食われて2回押す羽目になる」事故を防ぐこと。キーボード利用者のために:focus-visibleで同じ演出を返すこと。そして拡大系はscale(1.05)程度に抑え、外枠をoverflow: hiddenで固定してレイアウトを揺らさないこと。この3点で、当時の23種は現在でもそのまま使えます。
- カードは画像だけでなく領域全体をリンクにする（タップしやすさが段違い）
- 画像には
width/heightを指定してガタつき（CLS）を防ぐ - 一覧では全カード同じ演出に統一する（1枚ごとに変えない）
- 文字側の出現演出はテキストの動きと組み合わせて使います
次回の予定
見出しやキャッチフレーズといった
「伝えたい言葉」を印象付ける「テキストの動き」に挑戦してみます ＼＼\٩( ‘ω’ )و //／／ これはコピーライティング、セールスライティングと組み合わせると効果大です！
