AI 活用・効率化– category –

Claude Codeは無料プランでは使えず、いちばん安く始められるのはPro（月20ドル）です。Pro・Max・API・Teamの料金と違い、Maxに付くAPIクレジットとusage creditsの違い、使い方に合うプランの選び方を公式情報で整理しました。

メニューを開くとき、カーソルを合わせたとき、スクロールしたときなど、Webサイトでよく使うアニメーションの種類と名前を、場面ごとに見本の画像で紹介します。AIにそのまま貼れる頼み方の例と、Claude Codeで「かっこいい動き」と頼んだ場合との違いもまとめています。

FigmaのデザインをClaude Codeでコーディングする方法です。Figma MCPで色・余白・フォント・画像を直接渡し、実際のデザインをHTMLとCSSにした比較画像と依頼文、再現できた部分と調整が必要だった部分を紹介します（2026年10月時点）。

Claude CodeをVS Codeで使う方法を解説します。公式の拡張機能「Claude Code for VS Code」をインストールすると、選んだ行を渡して質問できます。確認しながら進めるManualと、確認を減らして進めるAutoの使い分け、ターミナル版と会話を引き継いで行き来する方法も公式情報で確認しました。

Claude CodeとGitHubを連携すると、変更したファイルと内容を履歴に残せます。MacからGitHubにログインして非公開リポジトリへ保存する手順と、プッシュやマージの前に確認を挟む設定、Claude Codeに任せる範囲を説明します。

Claude CodeでSWELLの固定ページを、あとからブロックエディターで修正できる形で作る方法を解説します。ブロックの見本の渡し方と、カスタムHTML・CSS・JavaScriptで補う範囲を、実例で紹介します。

Markdown原稿をWordPress標準ブロックとSWELL独自ブロックに変換し、下書き保存する方法を解説します。Claude Codeに変換スクリプトを作ってもらい、REST APIで送る手順を、見本ブロックの作り方と依頼文つきで紹介します。

エックスサーバーのXPageSpeedとXアクセラレータの違いを整理。WordPressではまずXアクセラレータVer.2を設定し、XPageSpeedは1項目ずつ有効にして表示と速度を確認する手順と、設定後に確認するポイントを解説します。

MacにNode.jsをインストールする方法を、公式インストーラー・Homebrew・nvmの3通りで解説します。nodebrewとの違いや、LTSとCurrentどちらを選ぶかも2026-09-05時点の一次情報から確認しました。