Web Magazine
ツタワルの技術＆運用コラム
「伝わる」を裏支えするUI/UX実装から、長く安全に運用するための防衛術まで。
現場で役立つ実践的なノウハウを連載企画でお届けします。
連載 第1弾
「伝わる」を裏支えする モダンUI実装ノウハウ
01
CSS実装
【コピペOK】心地よいCSSマイクロインタラクションの実装例5選
ボタンホバー、いいねアニメーション、トグルスイッチなど5つの実例。
02
アニメーション
スクロールに合わせてフワッと出現。自然で滑らかなアニメーション実装術
Intersection Observer APIとCSSを組み合わせたスクロール連動アニメーション。
03
UX
待ち時間を感じさせない、おしゃれなローディング画面の作り方
スケルトンスクリーン、プログレスバー、パルスアニメーションの実装。
04
レスポンシブ
スマホ表示でも崩れない、美しいレスポンシブメニューの作り方
ハンバーガー、ドロワー、ボトムナビの3パターン。
05
レイアウト
CSS Grid&Subgridで実現する、雑誌のようなリッチレイアウト
マガジングリッド、auto-fillカード、Holy Grailの3パターン。
06
CSS設計
CSSだけで実装するダークモード切り替え。完全ガイド
CSS変数、prefers-color-scheme、トグルUIの実装。
07
UX
離脱率を下げるフォームUX。バリデーションと入力補助のCSS実装
フロートラベル、リアルタイムバリデーション、ステップ表示、パスワード強度メーター。
08
アニメーション
@keyframesを使いこなす！CSSアニメーション基礎から応用まで
バウンス、シェイク、グラデーションシフト、タイプライターandイージング比較。
09
CSS設計
保守性を劇的に高めるCSS変数（カスタムプロパティ）設計術
カラートークン、スペーシングスケール、コンポーネント変数。
10
パフォーマンス
表示速度を2倍にする画像最適化テクニック完全ガイド
WebP/AVIF、lazy loading、srcset、aspect-ratio。
11
CSS実装
JSなしで実装！CSSだけで動くツールチップandポップオーバー
:hover、data属性、:focus-withinによるJS不要の実装。
連載 第2弾