snapDOMを活用したDOMの画像変換
snapDOMを使ったDOMの画像変換について、WebコンテンツのSNSシェア用画像生成やゲームアプリで使える実装方法を解説します。
- フロントエンド
- 企画
Figma Variablesでフルイドレスポンシブレイアウトシステムを構築する
Figma VariablesのModeシステムを活用してフルイドレスポンシブレイアウトのデザイントークンを定義する実践ガイド。Console/Handheld分離とブレイクポイント設計でスケーラブルなデザインシステムを構築します。
- UIデザイン
フルイドレスポンシブレイアウトの設計手法
ビューポート幅に応じてrem値が連続的にスケールするフルイドレスポンシブレイアウトの設計理論と実装方法を解説します。デバイスタイプ別基準画面幅の設定、CSS calcによる動的スケーリング、clamp関数を使った制限など、実用的な実装例と注意点を詳しく紹介します。
- フロントエンド
- UIデザイン
Figma Variablesで固定幅レイアウトシステムを構築する
Figma Variablesで固定幅レイアウトシステムを構築。Tailwind CSSベースの7段階ブレイクポイントと12カラムグリッドでレスポンシブデザインを体系的に管理します。
- UIデザイン
- フロントエンド
Visual Studio Code: GitHub Copilot Agent の Figma MCP Server セットアップ
Figma MCP ServerをVS Code + GitHub Copilotと連携させ、デザインデータをコード生成やデザイン仕様確認に活用する設定方法を紹介します。
- AI
- 開発ツール
- フロントエンド
Tailwindで12カラムグリッドをブレイクポイント別に設計する方法
Tailwind CSSを使って、レスポンシブ対応した12カラムグリッドシステムを効率的に設計・実装する実践的な手法を、実際のプロジェクト体験を交えて解説
- フロントエンド
- Webデザイン
Visual Studio Codeの拡張機能を使用したCopilotの音声入力
VS Code Speech拡張機能と日本語対応パックを使って、Visual Studio CodeでGitHub Copilotに音声で指示を出す方法を紹介します。
- 開発ツール
- AI
安定性と利便性を重視した4K120Hz対応HDMIセレクター「ラトック RS-HDSW41A-8K」
Switch2で発生する暗転問題と安価なHDMIセレクターの信号不安定さを解決するため、ラトックシステムのRS-HDSW41A-8Kに買い替えた実体験をレビューします。
- デバイス
TGS 2025ファミリーゲームパークの感想
TGS2025のファミリーゲームパークで実際に体験したゲームや印象的だった展示の様子を、子どもと一緒に楽しんだ視点でお伝えします。
- ゲーム
Next.js unstable_cacheでビルド時間を改善する
Next.js 14のunstable_cacheを活用してブログサイトの記事取得処理をキャッシュ化し、重複するファイルアクセスを削減してビルド時間を短縮する実装方法を解説します。
- フロントエンド
JSDocコメントでGitHub Copilotのコード提案品質を向上させる方法
JSDocを書くことでGitHub Copilotが関数の目的や使い方を理解しやすくなり、コード提案の品質が向上した体験をボタンコンポーネントの実例とともに解説します。
- フロントエンド
- AI
- 開発ツール
GitHub Copilotをプロジェクトの書き方に合わせる：instructionsファイルの活用法
instructionsファイルを使ってGitHub Copilotにプロジェクト固有の規約やパターンを理解させ、汎用的な提案からプロジェクトに適したコード提案に改善する設定方法を解説します。
- AI
- 開発ツール
- ディレクション