Figma Design Agent入門｜キャンバス上でAIにUI案を作らせて直す方法
Figmaのキャンバス上でAIエージェントに話しかけるだけでUI案が生まれ、デザインシステムに沿った修正もできる。2026年5月に公式発表されたFigma design agentの使い方を、初心者でも操作できる粒度で解説します。
デザイン制作
ワイヤーフレーム・デザインカンプの作り方から、CSS・アニメーション実装まで解説します。「見た目のデザイン」と「実装できるデザイン」をつなぐ視点で、Web制作現場で使える知識を紹介します。
CodexとFigmaの連携入門｜コードからWebデザインを生成・修正する方法
CodexとFigma MCP Serverを使い、Figmaのデザインをコードに反映したり、コードから編集可能なFigmaデザインを作ったりする流れを初心者向けに解説します。従来の制作方法との違い、具体的な操作手順、料金の確認ポイント、つまずきやすい点までまとめました。
ChatGPT Images 2.5入門｜Web制作の画像素材を速く作る方法
ChatGPT Images 2.5のSketch・テンプレート・コメント編集を使って、Webサイト用の画像素材を効率よく作る方法を解説します。初心者がつまずきやすいポイントや、従来の画像制作との違い、料金情報の確認方法もまとめました。
Webflow、AIコードコンポーネントの視覚編集とエージェント用指示書生成に対応
Webflowが2026年9月2日に、AIコードコンポーネントをキャンバス上で編集できる機能と、サイト情報からAIエージェント用の指示書を生成する機能を正式公開しました。デザイナーがコードを直接書き換えずに見た目を調整できる点や、ブランド・CMSなどのルールをAIに渡しやすくなる点を解説します。
AdobeがGeminiとClaudeに対応｜チャットから画像・PDF・デザインを編集
AdobeがGoogle GeminiとClaudeへの連携を拡大しました。GeminiではPhotoshop、Lightroom、Adobe Express、Fireflyを呼び出せ、ClaudeではAcrobatによるPDF編集やAdobe Expressデザインのレイヤー編集に対応します。できること、料金、使い方、注意点を整理します。
Retinaディスプレイとレスポンシブ画像の基本｜なぜ2倍サイズの画像が必要なのか
Retinaディスプレイでなぜ画像がぼやけるのか、その仕組みをピクセルの基礎から解説。srcset・picture・sizes属性の使い方、CSS背景画像のRetina対応まで、初心者がつまずきやすいポイントをまとめて解説します。
Figmaの基本操作｜デザインカンプの見方と素材の書き出し方
コーダー・Web担当者向けにFigmaの基本操作を解説。デザインカンプの見方・右パネルの読み方・画像の書き出し方・Inspectモードの活用法まで初心者にもわかりやすく紹介します。
Google Fontsの使い方｜linkタグ・@import・複数フォント・ウェイト指定
Google Fontsの読み込み方法（linkタグ推奨・@import）、複数フォントの一括読み込み、ウェイト指定までコード付きで解説します。
背景に動画を設置する方法｜videoタグ＋position/flex 2パターン解説
HTMLのvideoタグを使って背景動画を設置する方法を2パターン解説。position: absolute方式とflex方式のプレビュー＋コード付きで、autoplay・muted・playsinlineなどの注意点もまとめています。
CSS Gridパターン・レイアウト集｜よく使う10パターンをコード付きで解説
CSS Gridのよく使うパターンをプレビュー＋HTML/CSSタブ付きコードでまとめたリファレンス記事。等幅カラム・auto-fill・セル結合・名前付きエリア・dense・レスポンシブ対応まで全10パターンを解説します。
Flexboxパターン・レイアウト集｜よく使う配置からサイト構成まで
Flexboxのよく使うパターンとサイトレイアウトを、プレビュー＋HTML/CSSタブ付きコードでまとめたリファレンス記事です。横並び・中央揃え・両端揃え・折り返し・サイドバー・レスポンシブ対応まで網羅しています。
デザインの基本原則｜余白・配色・タイポグラフィで伝わるWebデザインを作る
Webデザインで重要な三大要素、余白・配色・タイポグラフィの基本原則を解説。初心者でも実践できる具体的なポイントをまとめています。
ヘッダー・フッターの設計原則｜ユーザーを迷わせないサイト共通部品の作り方
Webサイトのヘッダーとフッターの設計原則を解説。ユーザーの迷子を防ぐナビゲーション設計とUXのベストプラクティスを紹介します。
レスポンシブデザイン入門｜スマホ・タブレット対応に必要なメディアクエリの基本
レスポンシブデザインの基本概念とメディアクエリの使い方を初心者向けに解説。モバイルファーストの設計思想も紹介します。
配色選びの実践テクニック｜カラーホイールと心理効果を活かした色の選び方
Webデザインにおける配色の基本理論から実践的な選び方まで。カラーホイールの活用法と色が与える心理的効果を解説します。
フォント選びとタイポグラフィ｜可読性と印象を両立させるWebフォントの活用法
Webデザインにおけるフォント選びとタイポグラフィの基礎。可読性・印象・パフォーマンスを考慮した選び方を解説します。
CTA設計で離脱を防ぐ｜ボタンの色・文言・配置でクリック率を改善する
CTA（コール・トゥ・アクション）ボタンの色・文言・配置・サイズの最適化方法を解説。クリック率を高める実践テクニック集。