Next.jsのMDXにMermaidダイアグラムを追加する
Next.js 15のMDXを使用したブログにMermaidダイアグラムを追加する実装方法を、既存のシンタックスハイライターとのコンフリクト回避、ライトモード・ダークモードへのテーマ対応、フローチャート・シーケンス図・クラス図・ガントチャートなど多様なダイアグラムの描画方法とともにまとめた記事です。
- フロントエンド
Figma MCP機能概要 - コード生成の仕組みと実際のレスポンス
Figma MCPサーバーの主要機能とツール概要を紹介。デザインからのコード生成の仕組み、実際のレスポンス形式を実例とともに解説します。
- AI
- 開発ツール
- フロントエンド
Figma REST APIで画像アセットを自動書き出し
Files endpointでExport設定を探索し、Images endpointで画像URLを取得。Node.jsスクリプトによる画像アセット自動書き出しの実装方法を紹介します。
- 開発ツール
- フロントエンド
Figma REST APIの認証とセットアップ
Figma REST APIの基本を学びます。Personal Access Tokenの取得、環境変数設定、curlコマンドでの動作確認を通じて、APIのセットアップを進めます。
- 開発ツール
- フロントエンド
MDXのシンタックスハイライト：react-syntax-highlighterからShikiへの移行
MDXのシンタックスハイライトをShikiに移行した際の記録。React Server Componentによるクライアントバンドル0KB化、CSS変数のみでのテーマ切り替え、VS Code品質のハイライト実現など、パフォーマンス最適化の実践的手法を説明します。
- フロントエンド
クライアントサイド画像生成のフォントライセンスと法的リスク対策
DOM画像化ライブラリ（html2canvas、dom-to-image等）使用時のフォントライセンス問題を解説。Google Fonts等の安全なライセンス選定から、ベクター埋め込み・Webフォント規約・SNS拡散等の具体的リスクまで、法的観点から実装時の注意点を詳しく説明します。
- ディレクション
- フロントエンド
snapDOMを活用したDOMの画像変換
snapDOMを使ったDOMの画像変換について、WebコンテンツのSNSシェア用画像生成やゲームアプリで使える実装方法を解説します。
- フロントエンド
- 企画
フルイドレスポンシブレイアウトの設計手法
ビューポート幅に応じて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デザイン
Next.js unstable_cacheでビルド時間を改善する
Next.js 14のunstable_cacheを活用してブログサイトの記事取得処理をキャッシュ化し、重複するファイルアクセスを削減してビルド時間を短縮する実装方法を解説します。
- フロントエンド