デザインツール
10個のツール
色、フォント、CSS、アスペクト比、モックアップなど、デザイン制作の判断材料をその場で作れるカテゴリです。アイデア検証、UI調整、素材作成の初期確認に向いています。
このカテゴリの選び方
まず目的に近いツールを開き、必要に応じてページ下部の関連ツールへ移動してください。各ツールページには特徴、使い方、FAQを掲載しているため、初めて使う場合でも処理内容を確認しながら進められます。
デザインツール
カラーパレット抽出
画像から主要な色を自動抽出。HEX/RGB値をコピー。
ツールを開く
フォント比較
フォントを並べて比較。サイズ・ウェイト・行間を調整。
ツールを開く
SVGプレビューア
SVGコードの即時プレビュー。PNG書き出し対応。
ツールを開く
CSSグラデーション生成
ビジュアルエディタでグラデーションCSSを生成。
ツールを開く
カラーコード変換
HEX/RGB/HSL相互変換。カラーピッカー・色名検索対応。
ツールを開く
CSS Box Shadow生成
ビジュアルエディタでbox-shadowを作成。CSSコードをコピー。
ツールを開く
CSS Flexboxプレイグラウンド
Flexboxプロパティの効果をビジュアルで確認。CSSコード出力。
ツールを開く
アスペクト比計算
幅と高さからアスペクト比を計算。リサイズ逆算にも対応。
ツールを開く
配色ジェネレーター
補色・類似色・トライアドなど配色パターンを自動生成。
ツールを開く
Lorem Ipsum生成
ダミーテキスト(Lorem Ipsum)を単語・文・段落単位で生成。
ツールを開く