- Webデザイン
動画より軽い！CSSだけで作る没入型演出
動画を使わず、CSSだけで没入感ある表現を実現。パララックス、動くグラデーション、ブレンドモード＋フィルターによる立体演出の3手法をコード付きで紹介。動画背景より軽く、表示速度を最大70％改善した実例も掲載。
- Webデザイン
CTAは読み終わりで光る ─ 記事の最後に光るアニメーション
記事の読了タイミングでCTAボタンを“自然に光らせる”ことでクリック率1.5倍！IntersectionObserverとCSSアニメーションを組み合わせた、読み終わりトリガー型のUI改善手法を実例コード付きで解説します。
- Webデザイン
動きすぎないのが心地いい！さりげないJSアニメーションの作り方
Web制作で役立つ「さりげないアニメーション」の実装例を紹介。タイプライター風テキスト、背景グラデーション、通知バッジのバウンス、FAQ矢印の回転など、軽量で心地よいUIをJavaScriptとCSSで実現する方法を解説します。
- Webデザイン
40代ユーザーに響く！配色とタイポグラフィのCSS最適化
40代以上のユーザーに「読みやすい」体験を届けるためのCSS改善ポイントを解説。フォント設計、配色、レイアウト、インタラクション、パフォーマンスまで実務で役立つ具体例を紹介します。
- Webデザイン
提案力アップのカギ！Bento Boxレイアウトに挑戦しよう
Webディレクター必見！情報が多いページをすっきり見せる「Bento Boxレイアウト」の実装法を解説。素のCSS GridからBootstrap、MixItUpを使った動的レイアウトまで5パターンを紹介。提案力を高めたい方に役立つ実践的なコーディング視点のノウハウです。
- Webデザイン
簡単にできます！スクロールに合わせたアニメーション
スクロール連動アニメーション、入れすぎて重くなっていませんか？本記事では、軽量なJavaScriptとCSSを使って実現する「効くアニメーション」の作り方を、外国人WebディレクターBigViが実例とともに解説。滑らかで使いやすい演出のヒント満載！
- Webデザイン
サイトの軽量化を図る！─ サステナブルWebコーディングの実践ノウハウ
あなたのサイト、軽くできていますか？ こんにちは。株式会社ファストコーディングのWebディレクター、働くおかんです。最近はGoogle検索やBing検索からのみならず、ChatGPT等のAIで表示されるかどうかのAIO対 […]
- Webデザイン
【2025年9月最新版】ブレイクポイント早見表とファーストビュー最適化の要点
2025年9月現在のWebデザインの「最適な横幅」をご紹介します！Statcounterの最新データと37,000件超の制作実績をもとに、今選ぶべきブレイクポイントとファーストビュー設計の最適解を解説
- Webデザイン
【2024年8月調査結果】推奨ブレイクポイントとWebサイト横幅とファーストビュー
こんにちは。FASTCODINGデザイナーの七転び八重子です。 定期開催のこちらのテーマ、昨年の12月からどう変化があったのか、早速チェックしていきます。 今回は、ブレイクポイントも合わせて確認します。 参考サイト ： […]
