web-dev-qa-db-ja.com

CTAに黒を使用

最近、クライアント向けのウェブサイトをデザインしました。ある時点で、彼はCall to actionの色について話していて、「本当に色から離れたいと思っています。黒を使用できますか?」と言いました。

私は変更を加えましたが、それは私にはいくらか適切ではないと感じていますが、CTAにはダークブラックを使用し続けることを強く要求しました。

それが私が探しているのはアドバイス研究ドキュメントまたはその他の情報黒の使用に関連する== call to actionまたはその他のタイプのアクションの場合、ユーザーエクスペリエンスに対する賛否両論の影響。

4
kirkas

全体的なデザインが黒をサポートできる場合は、黒を選択してください。

ただし、適切な視覚的コントラストを指定してサポートする必要があることに注意してください。特に、空白、サイズコントラスト、全体的な視覚的フローの使用によって。
アクションの呼び出しでblackを使用したかなり良い例は、squarespaceのランディングページにあります(下の画像(また、- squarespace建築家 )。
文の終わりにCTAをいかにスマートに追加するかは素晴らしいことです。 "get startedの呼び出しを見逃さないように。

squarespace's CTA
もう1つの例は、ZARAの製品ページで見つけることができます。CTAで黒をうまく使用しています: zara

1日の終わりに、A/Bテストサービスの使用について通知する必要があります。
そしてクライアントの予算に問題がある場合は、使いやすい「無料で試す」Webサービス(約1000ユーザー)を提案することができます。

2
gpelelis

ここで黒は絶対に欲しいものではありません。プライマリCTA要素を他のUI要素と比較することは、タスクの完了にessentialです。視覚的な区別を作成するための主要なツールは次のとおりです:positionshape&sizecolormotion、およびメッセージ

この記事 では、CTAボタンで色を効果的に使用する方法について詳しく説明しています。

この場合のプライマリCTAはJoinであると想定します。位置、形状/サイズ、位置、モーション、またはメッセージを変更できないと仮定すると、色が残ります。静的な色を使用することに限定しないでください。 あなたのインターフェースは静的ではありません。ボタンに色を付ける別の解決策は、ユーザーがフォームフィールドに入力するまでボタンを黒く保つことです。次に、他の色にアニメーション化して、提出する準備ができていることを示します。

ここでの目標はきれいな絵を作ることではなく、ユーザーをサインアップするように導くことです。おそらく、アクセントカラーを使用すると、クライアントがその目標を達成するのに役立つことをクライアントに納得させることができるでしょう。 KISSmetricsは 色が購入にどのように影響するか? という素晴らしい投稿を行いました。可能であれば、色付き/黒のボタンの適切なA/Bテストを実行する必要があります。

同様の質問 も見つけました。

1
SwankyLegg