デザイン基礎/原則 デザイン基礎/原則 
構図/レイアウト 見出しデザイン
構図/レイアウト 画像レイアウト
画像レイアウト/画像NGパターン/画像に文字を入れる方法
フォント・タイポグラフィ おすすめフォント（書体）
フォント・タイポグラフィ 文字のトリセツ
下記
カラー・配色 配色サンプル
3色だけえセンスのいい色 配色見本帳 ダウンロード
カラー・配色 配色のトリセツ
デザイン基礎/原則 素人ぽいデザイン
ワイヤーフレーム/UI メインビジュアルレイアウトパターン
構図/レイアウト バナーレイアウトパターン
@tsubasa_designer
構図/レイアウト レイアウトのトリセツ
figmaの使い方 デザイナーなら知っておきたい！Figmaの便利なプラグイン【上級者編】
ノイズテクスチャーを作れる「Noise & Texture」/メッシュグラデーションを作れる「Mesh Gradient」/図形を均等に分割する「Split Shape」/画面遷移図を簡単に作れる「Autoflow」
配色 Flat UI Colors
「フラットデザイン」に最適化されたカラーパレットを提供する超定番の配色サイトです。世界13カ国のクリエイターとコラボレーションして選定された14種類のパレット、全280色の鮮やかで洗練されたカラーが収録されています。ブロック状に並んだカラーをワンクリックするだけで、HEX、RGB、RGBAなどのカラーコードを指定フォーマットで瞬時にクリップボードにコピー（コピー＆ペースト）できる高い操作性が魅力です。シンプルでモダンなインターフェースや、アプリの画面設計にすぐに使える高品位な色が揃っています。
ツール Happy Hues
デザインにおける配色とその具体的な活用方法を、実際のWebサイトの画面を通して学べる配色インスピレーションサイトです。 単にカラーパレットを並べるだけでなく、サイト上の配色がリアルタイムで切り替わるため、背景や見出し、ボタンなどにどの色を配置すべきかが視覚的に理解できます。さらに、色の基礎知識や各色が与える心理的効果、感情への影響なども詳しく解説されており、デザイン初心者でも目的に合った最適な色選びができるようサポートしてくれます。
ツール ColorFlow
ブラウザ上で鮮やかなメッシュグラデーションを直感的に作成・編集できる無料のオンラインデザインツール。画面上のコントロールポイントをドラッグして色を割り当てるだけで、複雑で美しい有機的なグラデーションがリアルタイムで作成できます。さらに、ノイズや色収差の追加、動的なアニメーション効果やカーソル操作への連動機能も搭載しています。完成したデータは4K動画として書き出せるほか、ReactやWebflowなどのWebサイトへ直接埋め込むことも可能
配色 Adobeカラーパレット
トレンドのカラーパレットを閲覧し、雰囲気、スタイル、季節別に厳選された配色を見つけて、ブランディング、web、ソーシャルメディアのデザインに活用できます。
ツール お道具箱
デザイン・コーディング・インフラの便利ツール集 配色や素材・フォントなどデザインアイデアを得たいときに
ギャラリー バナーデザインアーカイブ
バナーのデザインをまとめてチェック
ギャラリー Dribbble（ドリブブル）
海外Web/UIUXデザインの参考。世界中のWeb・グラフィックデザイナー、イラストレーターなどが自身の作品（Shots）を投稿して交流する、世界最大級のクリエイター向けSNSです。高品質なUIデザインやアニメーションが豊富に揃っています。
ギャラリー Parts. – パーツ別Webデザイン集
Webサイトのパーツ・セクションごとの優れたデザインを集めたギャラリーサイトです。メインビジュアルやフッターなど要素別の検索が可能で、デザインの言語化や設計の迷いを減らす「Web制作の時短ツール」として高い評価を得ています。実用的なレイアウトや構成の参考資料として、Web制作の現場で役立ちます。
ギャラリー Web Design Clip
LP・ランディングページ制作の参考になるWebデザインギャラリー・クリップ集
ギャラリー LPアーカイブ
LPの最新デザインまとめ参考サイト ランディングページ
ギャラリー MUUUUU.ORG webデザインギャラリー
おしゃれなクオリティ高めのデザイン
ギャラリー SANKOU! | Webデザインギャラリー･参考サイト集
Webデザイン制作の参考になる国内のステキなサイト集
ギャラリー BAKUup（Webデザインギャラリー）
テイスト別検索が非常に見やすい、「イラスト」「和風」「スタイリッシュ」「ポップ」など大量掲載、LP制作やトップページ提案
ギャラリー UI LIBRARY（WebデザインUIギャラリー）
参考になるWebデザインをUIごとにまとめたギャラリーサイト。「かわいい」「ポップ」「ナチュラル」「北欧」「シンプル」など分類が豊富 Webデザイン＋イラストの組み合わせ参考に最適
ギャラリー Behance（ビハンス）
Behance（ビハンス）は、Adobe（アドビ）が運営する世界最大級のクリエイター向けSNS・ポートフォリオサイトです。デザイナーや写真家、イラストレーターが自身の作品をオンラインで発表しあい、世界中のプロの作品を見て刺激を受けたり、評価やコメントを送り合ったりできます。
figma Figma操作方法
オートレイアウト (Auto Layout) とコンポーネント化の活用が必須1.基本パーツのコンポーネント化（オートレイアウト適用）2.PC版ページ全体のデザイン作成（オートレイアウト）2.スマホ版ページへコピーして再調整（スタックの変更）3.Dev ModeでCSSを確認しながらコーディング
figma Figma操作ショートカット集
Figma操作の便利なショートカットや操作について記載していますツールバー選択移動ツール：V、フレームツール：F、テキストツール：T、長方形ツール：O、線ツール：Lショートカットキー一覧の呼び出しCtrl + Shift + ?10px単位の操作Shift を押しながら作業 数字は Shift + ↑ または ↓レイヤーぶち抜きで狙ったものを選択 Ctrl + クリックオートレイアウト化Shift + A選択しているGroup/Frameの１つ下の階層を選択Enter選択している要素の１つ上の階層を選択Shift + Enterテキスト入力中の状態からテキストレイヤー選択中の状態にするCtrl + Enterレイヤーを非表示/表示Shift + Ctrl + H垂直方向に反転Shift + V100%表示Shift + 0スタイル（プロパティ）のコピーCtrl + Alt + Cスタイル（プロパティ）のペーストCtrl + Alt + Vプレーンテキストとして貼り付けCtrl + Shift + Alt + V選択中の要素と同列の階層にペーストCtrl + Shift + Vペーストし...
画像 使えるフリー素材まとめ2026
「素材辞典.txt」は 下記URLからリストを表示して選択してください素材辞典CDはNo.1～190、195、196、201、206、208、210、217、225、232を保持195から 2950x2094はありますが、それ以前は640x480のサイズとなりますイラストサイトは 下記を参照本当は教えたくないフリーイラスト素材まとめ【商用ＯＫ】おしゃれ・かわいい・ビジネス向けなど写真photoACセットフリービーACイラストイラストACおすすめイラスト写真ぱくたそ写真/イラスト/動画Pixabay写真/イラストMagnific（以前のFreepik）※著作権表記必要イラストVcteezyベクターデータイラストStoryset特徴的な海外イラストイラストDrawKit特徴的な海外イラストイラストunDraw特徴的な海外イラストイラストVectorsStockベクターデータイラストLinustockシンプルな線画イラストイラストソストコソ日本 コソコ使えるシンプルなイラスト素材イラストビジネス素材 By Runland日本 会社(ビジネス)専門 無料イラストイラストILLUST NAVI日...