毎年Appleの発表会が終わると、SNSが賑わいます。新しいiPhoneやiPadの話題に加えて、実はデザイナーたちが最も忙しいのはスペックを見ることではなく、Apple公式サイトのデザインの詳細を分析することです。なぜなら、Appleがサイトをリニューアルするたびに、その配色、グラデーション、光と影の処理は、愛憎入り混じるものだからです。愛せるのは本当に美しいからで、憎むのは自分ではどうしてもその雰囲気を再現できないからです。
以前はApple風のグラデーションを作ろうとすると、Photoshopでスライダーを動かしたり、コードで色の値を手動で書いたりして、一苦労の末に目が疲れ果てていました。しかし今年は違います。私の周りの多くのデザイナー、そして私自身も、こっそりと「CSSグラデーションジェネレーター」というツールを使っていることに気づきました。このツールを軽く見てはいけません。まさにApple風デザインのチートツールです。
このツールの良いところは何でしょうか？まずは速さです。柔らかく上品なグラデーションが欲しい場合、カラーパレットのサイトを探し回る必要はありません。ツール内で似た色をいくつか選び、方向をドラッグし、透明度を調整するだけで、すぐにその雰囲気が出せます。最も重要なのは、生成されるのがCSSコードであるため、そのままコピー＆ペーストでプロジェクトに使用でき、スクリーンショットや色の値を手動で計測する手間が省けることです。効率が格段に向上します。
さらに、プリセットモードもあります。Appleの発表会の壁紙やプロモーションページの多くは、大きな色のブロックに動的な光の効果が加わったものです。このツールのプリセットは、まさにそのスタイルに基づいています。近いものを選び、角度を少し変えたり、中間の色の位置を動かしたりするだけで、Photoshopで当てずっぽうにやるよりもはるかに良い結果が得られます。私は先日、プロジェクトの背景を作る際にこれで乗り切りました。クライアントが見て「おっ、この感じがいいね、高級感がある」と言ってくれました。心の中で「Appleから盗んだんだよ」とほくそ笑みました。
「このツールは派手なテクノロジー系のスタイルにしか合わないのでは？」と疑問に思う人もいるかもしれません。実際はそうではありません。薄く上品でシンプルなグラデーション、例えばライトグレーからオフホワイトへの移行も作成でき、管理画面やドキュメントページに使用すると、清潔でスマートです。重要なのは、カラーピッカーが直感的で、頭の中のイメージに合わせて色を選ぶだけで、ほとんど迷うことなく、見たままの結果が得られることです。
また、フロントエンド開発者にとって、このツールはまさに宝の山です。以前はグラデーション背景を書く際、プレフィックスが必要かどうか、ブラウザ互換性のコードを追加する必要があるかどうかを覚えておく必要がありました。今はワンクリックで生成され、標準的な書き方で、互換性も考慮されています。コピーしてブラウザを更新すれば、思い描いた通りの効果が表示されます。節約できた時間で、少し休憩したり、他の細部を磨いたりできます。それで十分じゃないですか？
ですから、Appleの発表会は終わりましたが、そのデザイン美学の考え方は続いています。デザイナーの間で共有される秘密は、高度な技術ではなく、このような便利な小さなツールであることがよくあります。もし最近、ページの背景、カードの質感、ボタンの光沢効果に悩んでいるなら、無理に我慢せず、このCSSグラデーションジェネレーターを試してみてください。Appleとの「距離」は、実はこの小さなツール一つ分かもしれないと気づくでしょう。
さて、内緒にしておいてください。こっそり自分だけで使いましょう。もし皆が覚えたら、差がつかなくなってしまいますから。すぐにブックマークして、次回デザインをするときに、「こんなに簡単だったのか」という喜びを実感してください。