ClaudeとCanvaをMCPで繋ぐ方法｜下書きを任せて仕上げは人。
ClaudeとCanvaをMCPで繋ぐには、Claudeの設定の［コネクタ］からCanvaを追加して...
続きを読む 
Webデザイン＆ツール
Webデザインの基礎とツール活用を解説するカテゴリです。Figma・Photoshop・Canva・STUDIOの使い分け、配色（3色配色・黄金比/白銀比/白金比）、UIデザインの組み立て方、フォント選び、グリッドレイアウト、Figma模写課題などを扱います。Figma模写課題は 模写コーディング練習サイト の中でも実装まで含めて取り組めます。
全80件の記事中、1-30件を表示
Figma MCPでワイヤーフレームとバナーを作らせた｜Claude Codeで書き込む手...
Figma MCPの書き込み機能（use_figma）を使うと、Claude CodeからFigma...
続きを読む 
動画のショットの種類一覧｜伝わる印象とAI動画プロンプトの書き方
ショットの種類とは、動画の1カットを「被写体をどのくらいの大きさで映すか」「どの高さ・向きから撮るか...
続きを読む 
ワイヤーフレームのテンプレート集｜LPの定番構成を組む無料ツール
ワイヤーフレーム パターン集は、ヘッダー・ファーストビュー・料金表・FAQ・お問い合わせフォームなど...
続きを読む 
自分で作る4択問題集｜覚えるまで出題する無料の暗記ツール
自分だけの問題集とは、問題と4択の選択肢（正解1つ・誤答3つ）を自分で登録し、覚えるまで繰り返し出題...
続きを読む 
AI画像で商品バナーは作れるか｜DomoAIで日本語と価格表記を検証
AI画像で商品バナーは作れます。DomoAI の GPT Image 2.5 Sunburst に、...
続きを読む 
AI動画のカット割りの作り方｜シーン表を作って1シーンずつ生成する
AI動画のカット割りとは、1本の動画を複数のショットに分け、ショットごとに秒数・カメラワーク・セリフ...
続きを読む 
Seedance 2.5はどこで使える？提供経路別の違いと選び方
Seedance 2.5とは、ByteDanceの研究チーム「ByteDance Seed」が202...
続きを読む 
手書き風文字ジェネレーター｜PNG・SVGで書き出せる無料ツール
手書き風文字ジェネレーターとは、入力した文字を手書きの書体で描き直し、PNG・JPG・SVGの画像と...
続きを読む 
DomoAIとは｜料金プラン・使える機能・クレジットの仕組みを整理
DomoAI（ドモAI）とは、シンガポールの DOMOAI PTE. LTD. が提供する、ブラウザ...
続きを読む 
ClaudeでPhotoshopを操作する2つの方法｜公式コネクタとExtendScrip...
ClaudeからPhotoshopを操作する方法は2つあります。コードを書かずに済ませるなら、Ado...
続きを読む 
AI動画生成は指示の出し方で9割決まる｜DomoAIで6本検証
AI動画生成の出来を決めているのは、モデルの性能よりも指示の粒度です。同じツール・同じ尺・同じ解像度...
続きを読む 
画像を高画質化する無料ツール｜ボケ補正・AI超解像に対応
画像高画質化ツールとは、小さい画像やピントの甘い写真を最大4倍まで大きくしながら、輪郭と細部を補って...
続きを読む 
デザインガイド【構図・配色・効率化ツールまとめ】
バナー・Webデザインの構図パターンから、黄金比などのデザイン理論、配色・作業効率化の無料ツールまで...
続きを読む 
Photoshop・Illustratorで構図を再現する方法｜三分割グリッド・ガイドの引...
PhotoshopもIllustratorも、標準機能だけで三分割法や黄金比の構図ガイドを引けます。...
続きを読む 
バナーデザインの構図パターン｜三分割・対角線・日の丸で視線を操る基礎
バナーデザインの構図とは、伝えたい情報の優先順位に沿って視線の流れを設計し、要素を配置する「型」のこ...
続きを読む 
CSSグラデーションジェネレーターの使い方｜linear/radial/conic対応・伝...
CSSグラデーションジェネレーターとは、線形（linear）・放射（radial）・扇形（conic...
続きを読む 
ショートカットキー チートシートの使い方｜アプリ別一覧と自分専用マイ一覧を作る
ショートカットキー チートシートとは、Photoshop・Illustrator・Figma・Exc...
続きを読む 
CSSの装飾・アニメーションを作る無料ジェネレーターまとめ｜ボタン・ガラス・3Dカルーセル
ボタンの発光、ガラスの屈折、図形の切り抜き、3Dで回るカルーセル——こうした“見た目を盛る”表現は、...
続きを読む 
3Dカルーセルをコピペで作る無料ツール｜GSAPで回る6タイプの使い方ガイド
3Dカルーセル ジェネレーターとは、メリーゴーランドや観覧車のように立体的に回転するカルーセルを画面...
続きを読む 
色の辞書の使い方｜日本の伝統色とCSS名前付き色を由来から引けるツール
色の辞書とは、色の名前とカラーコード（HEX/RGB/HSL）に加えて、名前の由来と色が持つ意味・印...
続きを読む 
スライダー／カルーセルをコピペで作る無料ツール｜Swiper・Splide・Slick対応...
スライダー／カルーセルジェネレーターとは、Swiper・Splide・Slickの3つの人気ライブラ...
続きを読む 
ネオンボタンジェネレーターの使い方｜SVGフィルタで縁が光るCSSボタンを作る
ネオンボタンジェネレーターとは、SVGフィルタを使ってボタンの縁（リム）だけを光らせるCSSボタンを...
続きを読む 
CSSだけで作るスクロール追従リキッドガラス｜ライブ屈折ジェネレーターの使い方
透過リキッドガラスCSSジェネレーターとは、backdrop-filterとSVGのfeDispla...
続きを読む 
clip-path ジェネレーターの使い方｜CSSの図形をドラッグで作ってコピー
clip-path ジェネレーターとは、CSSのclip-pathプロパティの値を、図形をドラッグす...
続きを読む 
Apple風の屈折ガラスをWebGLで生成するLiquid Glassジェネレーター｜使い...
Liquid Glassジェネレーターは、AppleのiOS 26で採用された液体ガラス（Liqui...
続きを読む 
AIで背景透過・被写体の切り抜きがブラウザで完結する無料ツール｜使い方ガイド
AI背景透過ツールは、画像をドラッグ&ドロップするだけでAIが人物・商品・動物などの被写体を...
続きを読む 
画像圧縮・WebP変換・切り抜きがブラウザで完結する無料ツール｜使い方ガイド
画像圧縮・WebP変換ツールは、JPG・PNG・WebP・AVIF・SVGの圧縮・形式変換・リサイズ...
続きを読む 
デザインカンプ前に決めるWebデザインのルール｜ウィンドウ幅・コンテンツ幅・カラム設計
Webデザインのカンプは、ウィンドウ幅・コンテンツ幅・カラム構成・最小フォントサイズといった「デザイ...
続きを読む 
画像・写真からWEBデザイン用カラーパレットを自動生成【無料ツール】
画像カラーピッカーとは、写真やスクリーンショットから主要な色を自動で抽出し、WEBデザイン用のカラー...
続きを読む