FigmaとClaude Codeを連携する方法｜Dev Mode MCPでデザインをコー...
FigmaとClaude Codeは、Figma公式の「Dev Mode MCPサーバー」を使って連...
続きを読む 
webデザイン
Webデザイン関連の記事を集めたタグです。カラーパレット・フォントペアリング・CSSプロパティ・WordPressテーマ開発・模写コーディング・SEOツール・Photoshopなど、Web制作の現場で必要になる幅広い知識を扱います。
全155件の記事中、1-30件を表示
「QRコード」表記の商標ルール｜®だけでは足りない・登録商標文の正しい書き方
「QRコード」は株式会社デンソーウェーブの登録商標です。Webサイトや印刷物でこの名称を使う場合は、...
続きを読む 
決済ブランドロゴのECサイト掲載ルール｜未契約ブランドのロゴ掲載は規約違反です
決済ブランドのロゴは、実際に契約しているブランドのものだけを、公式配布のマークで、改変せずに掲載でき...
続きを読む 
「Googleでログイン」ボタンの使用ルール｜Gロゴの色変え・自作アイコンは規約違反です
「Googleでログイン」ボタンは、Googleのブランドガイドラインに従って表示する義務があります...
続きを読む 
App Store・Google Playバッジの掲載ルール｜「App Store」を日本...
App StoreとGoogle Playのダウンロードバッジは、AppleとGoogleが配布する...
続きを読む 
デザインガイド【構図・配色・効率化ツールまとめ】
バナー・Webデザインの構図パターンから、黄金比などのデザイン理論、配色・作業効率化の無料ツールまで...
続きを読む 
Photoshop・Illustratorで構図を再現する方法｜三分割グリッド・ガイドの引...
PhotoshopもIllustratorも、標準機能だけで三分割法や黄金比の構図ガイドを引けます。...
続きを読む 
バナーデザインの構図パターン｜三分割・対角線・日の丸で視線を操る基礎
バナーデザインの構図とは、伝えたい情報の優先順位に沿って視線の流れを設計し、要素を配置する「型」のこ...
続きを読む 
TikTokロゴの使用ルール｜TikTok Shop普及のいま再確認しましょう
TikTokのロゴ・アイコンの使用は、原則として「事前の書面許可制」です。許可なしで使えるのは「fo...
続きを読む 
Facebookロゴの使用ルール｜「いいね！」ボタンはもう設置できません
Facebookの「いいね！」ボタンとコメントボタンは、2026年2月10日に廃止されました。いま自...
続きを読む 
Xロゴの使用ルール｜「青い鳥ロゴは禁止された」は誤りです
「旧Twitterの青い鳥ロゴは、Xのガイドラインで使用が禁止された」——これは誤りです。Xの現行ブ...
続きを読む 
Instagramロゴの使用ルール｜「色を変えてはいけない」は誤解です
自社サイトのフッターにInstagramのアイコンを置き、自社アカウントへリンクするだけであれば、M...
続きを読む 
LINEロゴと友だち追加ボタンの正しい設置方法｜画像で貼ると規約違反になる
自社サイトにLINEのロゴやアイコンを掲載し、LINE公式アカウントへリンクするだけであれば、LIN...
続きを読む 
サイト構造の設計手順｜ページ洗い出しから階層を組み立てる情報設計のやり方
サイト構造の設計とは、サイトに載せる情報をすべて洗い出し、似たものをグループにまとめ、親子の階層に組...
続きを読む 
ディレクトリマップの作り方｜フォルダ構成を図にする無料ツールの使い方
ディレクトリマップとは、フォルダとファイルの階層構造を1枚の図にまとめたものです。どのフォルダの下に...
続きを読む 
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プロパティの値を、図形をドラッグす...
続きを読む 
WebGLで作るリキッドメタルボタン｜液体金属の質感をコードなしで作る
リキッドメタルボタンとは、WebGLのフラグメントシェーダーで金属の反射をピクセル単位に計算し、液状...
続きを読む 
Apple風の屈折ガラスをWebGLで生成するLiquid Glassジェネレーター｜使い...
Liquid Glassジェネレーターは、AppleのiOS 26で採用された液体ガラス（Liqui...
続きを読む 
AIで背景透過・被写体の切り抜きがブラウザで完結する無料ツール｜使い方ガイド
AI背景透過ツールは、画像をドラッグ&ドロップするだけでAIが人物・商品・動物などの被写体を...
続きを読む 
画像圧縮・WebP変換・切り抜きがブラウザで完結する無料ツール｜使い方ガイド
画像圧縮・WebP変換ツールは、JPG・PNG・WebP・AVIF・SVGの圧縮・形式変換・リサイズ...
続きを読む 
デザインカンプ前に決めるWebデザインのルール｜ウィンドウ幅・コンテンツ幅・カラム設計
Webデザインのカンプは、ウィンドウ幅・コンテンツ幅・カラム構成・最小フォントサイズといった「デザイ...
続きを読む 
画像・写真からWEBデザイン用カラーパレットを自動生成【無料ツール】
画像カラーピッカーとは、写真やスクリーンショットから主要な色を自動で抽出し、WEBデザイン用のカラー...
続きを読む