スワールキャンディ：ホットピンク、バイオレット、シアンのねじれたメッシュグラデーション
「渦巻き」を 75 にしたこのスタイルは、「キャンディ」カラーのメッシュを、ロリポップのようにフレームの中央に巻きつけます。ホットピンク、バイオレット、スカイシアンが、淡いピンクのベースの上で、中心が最もきつく端に向かってゆるむらせんへと引き込まれます。「ゆがみ」の 45 と「柔らかさ」の 55 がらせんの腕をなめらかに保つため、何もアニメーションしていないのに、その場で止まった動きのように見えます。
自分好みに仕上げる
ねじれをゆるめる、またはきつくする
40 では、「渦巻き」は色の中をゆるやかな S 字カーブが通る程度で、100 では中心がきつい結び目のように巻き上がります。プリセットは 75 です。調整中も腕がなめらかなままになるよう、「ゆがみ」は 45 付近に保ちます。
らせんを動かす
このスタイルでは「アニメーション」はオフです。「速度」を 20 前後にしてオンにすると、ねじれの下のメッシュが漂い始め、ローディングスピナーのようにならずに、らせんが生きているように感じられます。
よくある質問
渦巻きグラデーションはプロダクトのどこに合いますか？
装飾的であってよい場面です。ウェルカム画面、キャンペーンのヘッダー、ストーリー、SNS のカードなどです。らせんは視線をフレームの中央に引き寄せるので、「ようこそ」や「ストーリー」のプレビューのように短いメッセージを 1 つそこに置き、長い段落をその上に流すのは避けましょう。
使い方
出発点を選ぶ
ソフトメッシュ、日食の光芒、リソハーフトーンなど 28 のスタイルのいずれかから始めるか、グラデーションの種類と 24 のパレットのいずれかを選びます。
グラデーションを調整する
スケール、ゆがみ、渦巻き、柔らかさを調整し、グレイン、ガラスパネルやガラスタイル、ドット、グリッド、線のオーバーレイ、ブレンドした 2 枚目のレイヤー、ハーフトーンやピクセルソートなどの加工を追加します。アニメーションをオンにして、速度を個別に設定することもできます。
プレビューして使う
ランディングページ、カード、モバイル、新規登録のレイアウトでグラデーションを確認します。その後、無料の UX Pilot アカウントでログインすると、キャンバスで使用したりエクスポートしたりできます。