最近使ったもの

    ツールを開くと、ここに表示されます。

    無料オンラインデザインツール

    14ツール

    色の選択、CSSエフェクトの作成、コントラストの確認、ビジュアル素材の作成ができます。

    ビジュアルの細部を作成して確認する

    プロジェクト向けに、色、CSSエフェクト、レイアウトのスニペット、小さなビジュアル素材を作成します。エフェクトをプレビューすると選びやすくなりますが、最終的な見え方は、周囲のデザイン、ビューポート、コンテンツに左右されます。個々の要素の見た目だけでなく、コントラストやレスポンシブ時の動作も確認してください。

    ビジュアルの選択から使える出力まで進める

    CSSグラデーション生成はグラデーションのスタイルを作成し、カラーピッカー・配色パレット生成はパレット選びを助け、WCAGコントラストチェックは前景色と背景色を比較します。実際の文字サイズと状態で結果をテストしてください。

    よくある質問

    コントラスト比の基準を満たせば、ページは完全にアクセシブルになりますか?

    いいえ。コントラストは確認項目の1つにすぎません。キーボード操作、ラベル、フォーカスの見やすさ、文書構造など、ほかのアクセシビリティ要件も重要です。

    グラデーションのプレビューをウェブサイトのスタイルにするにはどうすればよいですか?

    CSSグラデーション生成はグラデーションの宣言を出力します。対象の要素に適用し、ページで実際に使うサイズ、テキスト、背景でテストしてください。

    文字の色に決める前に、2色を比較できますか?

    WCAGコントラストチェックは、前景色と背景色のコントラスト比を計算します。実際の色を使い、文字のサイズと太さに応じた基準で確認してください。

    HEX、RGB、HSLを切り替えるにはどうすればよいですか?

    RGB・HEX・HSL変換は、色の値の表記を変換します。表記は色を表すだけで、パレットを自動で作ったり、十分なコントラストを保証したりするものではありません。

    プライバシー設定

    分析、広告、パーソナライズの設定を選択してください。必須ストレージは、テーマや保存したツールなどの機能を維持するために使われます。

    必須ストレージは常に有効です。