デザインツール

10個のツール

色、フォント、CSS、アスペクト比、モックアップなど、デザイン制作の判断材料をその場で作れるカテゴリです。アイデア検証、UI調整、素材作成の初期確認に向いています。

このカテゴリの選び方

まず目的に近いツールを開き、必要に応じてページ下部の関連ツールへ移動してください。各ツールページには特徴、使い方、FAQを掲載しているため、初めて使う場合でも処理内容を確認しながら進められます。

画像から主要な色を自動抽出。HEX/RGB値をコピー。

フォントを並べて比較。サイズ・ウェイト・行間を調整。

SVGコードの即時プレビュー。PNG書き出し対応。

ビジュアルエディタでグラデーションCSSを生成。

HEX/RGB/HSL相互変換。カラーピッカー・色名検索対応。

ビジュアルエディタでbox-shadowを作成。CSSコードをコピー。

Flexboxプロパティの効果をビジュアルで確認。CSSコード出力。

幅と高さからアスペクト比を計算。リサイズ逆算にも対応。

補色・類似色・トライアドなど配色パターンを自動生成。

ダミーテキスト（Lorem Ipsum）を単語・文・段落単位で生成。