先週の金曜日の夜11時、私はまだあのクソボタンを修正していた。
普通のボタンじゃない。上司が5回も行ったり来たりさせたメインビジュアルのボタンだ。1回目は地味すぎる、2回目は派手すぎる、3回目は高級感がない、4回目は暗すぎる。5回目になって、彼はまた一言：「なんか物足りないな、もう少し考えてみて。」
私は画面の色ブロックを見つめながら、心の中で一万匹の草泥馬が駆け抜けていった。正直、デザイン業界で数年やってきて、一番怖いのはクライアントに要望がないことじゃなくて、要望はあるけど明確に説明できないことだ。彼の言う「物足りない」を翻訳すると、「俺も何が欲しいかわからないけど、とにかく作り出してくれ」ってことだ。
それで、先日ブックマークした小さなツールを思い出した。CSSグラデーション生成ツールだ。もともとは自然な空のグラデーションを調整できるか試そうと思っていたが、これが想像以上に使えることがわかった。
ツールを開くと、左にカラーストップ、右にプレビュー、中央にドラッグ可能なスライダーがある。適当にいくつか色を選んでみた。青、紫、ピンク。夕方の雲のグラデーションだ。それから純粋な白黒グレーのグラデーションも試し、透明度の変化も加えてみた。こんな感じで約10分間ドラッグしていると、突然ひらめきが浮かんだ——グラデーションと動きを組み合わせたらどうだろう？
すぐにツールで、深い青から薄紫、そしてピンクオレンジへのグラデーションを調整し、さらに角度を約120度に傾けてみた。プレビューウィンドウのその効果は、なんというか、「一目で高級感がわかる」感じだ。スクリーンショットを上司に送り、「この方向性を試してみませんか？」と一言添えた。
約5分後、上司からボイスメッセージが返ってきた：「おっ、これいいね、これなら感じが出てる。もう少し明るくできる？」
私は危うく椅子から飛び上がるところだった。それからツールでカラーストップの明度と彩度を微調整し、さらに2分かけて最適化版を送った。今回は直接「OK」と返ってきた。
どうなったと思う？一週間も悩ませたあのデザイン案、結局このツールで10分で解決したんだ。しかもごまかしじゃなく、本当に効果が良かった。
後で振り返ってみると、なぜあんなに苦労したのか？ずっと従来の方法で色を調整していたからだ——Photoshopを開いて、手動でグラデーションを引いて、何度も試して、パラメータを変えるたびにスクリーンショットを撮り直し、エクスポートし、微信で送信し、往復のコミュニケーションコストが非常に高かった。でもこのツールはリアルタイムで、スライダーをドラッグすると効果がすぐ画面に表示され、見たままが得られる。しかもカラーストップシステムが非常に直感的で、色を追加したいだけ追加でき、位置も調整でき、CSSコードを直接コピーしてコードに貼り付けるだけで使える。
さらに重要なのは、これによって「色調整」という固定観念から抜け出し、「グラデーション」自体がどんな視覚的感情をもたらすかを考えられるようになったことだ。以前はグラデーションは背景の装飾だと思っていたが、今ではデザイン全体の魂になり得ると気づいた。深い色から浅い色へ、冷たい色から暖かい色への移行には、自然と物語性が備わっていて、平面デザインを「生き生き」とさせることができる。
今では私のワークフローは変わった。ウェブページの背景、ボタンの状態、カードの影、チャートに視覚的な階層を加える場合でも、最初にこのツールを開いて、まずいくつかカラーストップを引いて感覚を確かめてから、使うかどうかを決める。効率は格段に上がったし、何よりも、上司に「物足りない」と言われるのがもう怖くない——なぜなら、多くの「感じ」を素早く試せるからだ。
だから、時々問題は能力ではなく、ツール選びが間違っているんだ。残業で疲れ果てるような仕事も、考え方を変え、ツールを変えれば、10分で解決できるかもしれない。もちろん、前提として、新しいことを試すために10分を使う気があるかどうかだ。古い習慣に固執して頑張り続けるのではなく。
よし、もう言わない。これからあのグラデーション案を仕様書にまとめるところだ。次に同じような要件があれば、直接コピーして、調整すら必要ない。