プログラミング Figmaでポートフォリオのデザインを作る実践手順｜ワイヤーフレームから仕上げまで
Figmaを使ってポートフォリオサイトのデザインを作る実践的な手順を解説。カラースタイル登録・ワイヤーフレーム設計・ヘッダーとヒーローセクションの作り方・制作実績カードのデザイン・AutoLayoutでのFlexbox的レイアウト・モバイル版の最適化・コーディングへの橋渡しまで丁寧に紹介します。
2026-08
プログラミング 
プログラミング Figmaの使い方入門｜Web制作者がまず知っておきたい基本操作と活用法
Web制作者向けにFigmaの基本的な使い方を解説。フレーム・長方形・テキストの作り方・Altキーで要素間の距離を確認する方法・InspectモードでのCSSコード確認・AutoLayoutでFlexbox的なレイアウト設計・コミュニティテンプレートの活用・コーディング前の構成設計まで丁寧に紹介します。
プログラミング AIツールをプログラミング学習・コーディングに活用する方法｜ChatGPT・Claudeとの効果的な使い方
ChatGPTやClaudeをプログラミング学習とコーディングに活用する方法を解説。概念をたとえ話とコードで説明してもらう学習活用・具体的な条件を伝えるコード生成の依頼方法・コードレビューとリファクタリングの依頼・コピペ学習の落とし穴・機密情報を貼り付けない注意点まで紹介します。
プログラミング エラーが解決できない…そんなときの考え方と調べ方のコツ｜プログラミング初心者向け完全ガイド
プログラミングでエラーが解決できないときの考え方と調べ方を初心者向けに解説。console.logで問題を切り分ける方法・最小再現コードの作り方・エラーメッセージを使った効果的な検索のコツ・公式ドキュメントの読み方・AIや質問サービスへの良い質問の仕方まで丁寧に紹介します。
プログラミング Chrome DevTools Consoleタブの使い方｜エラーの読み方・console.logデバッグ・JavaScriptの実行
Chrome DevToolsのConsoleタブの使い方を初心者向けに解説。JavaScriptのエラーメッセージの種類と読み方・console.logのラベル付き出力やconsole.tableの活用・コンソールでのJS直接実行・Shift+Enterでの複数行入力・フィルタリングでのログ絞り込みまで丁寧に紹介します。
プログラミング Chrome DevToolsの使い方完全ガイド｜Elementsパネルで要素を確認・Stylesで適用CSSを読み解く
Chrome DevToolsのElementsパネルとStylesタブの使い方を初心者向けに解説。要素選択ツールでのホバー時のボックスモデル表示・DOMツリーの読み方・Stylesタブでの適用CSSとファイル行番号の確認・取り消し線の意味・擬似クラスの強制適用・Computedタブの活用方法まで丁寧に紹介します。
プログラミング React Hook Form + Zodで型安全なフォームを実装する｜バリデーション・エラー表示・送信処理の完全ガイド
React Hook FormとZodを組み合わせてバリデーション付きフォームを効率よく実装する方法を解説。Zodスキーマでのバリデーションルール定義・z.inferによる型の自動生成・zodResolverの設定・registerとerrorsを使ったエラー表示・複数フィールドをまたぐrefine・TanStack Queryとの連携まで紹介します。