はじめに
先日公開されたウェス・アンダーソン監督最新作「ザ・ザ・コルダのフェニキア計画」を観てきました.前作「アステロイド・シティ」公開終了後にサブスク経由でファンになったので,初めて映画館で見ることができてとても満足しています.
毎度のことですが,私にとって話は決してわかりやすいものではなく,たまに眠くなります.それでも,可愛らしく美しい色合いとデザイン,たまにダークも混じるユーモア,ちょっと架空じみた箱庭感みたいなところに自分は惹かれています.ちょっと違うかもしれませんが,能とかも夢現,幽玄な状態を目指しているものらしいので,似たような楽しみ方なのだと勝手に思っています.
そんなウェス・アンダーソンへの僕なりの愛の表現として,このサイトのカラーをウェス・アンダーソン「風」にしていこうと思います.ベースにするのは,自分の一番好きな「グランド・ブダペスト・ホテル」です.プロと同じものができるとは到底思っていませんが,個人の趣味としてご理解いただければと思います.
ちなみに,今回デザインも大幅に修正しましたがそれについては触れません.
背景
やはりグランド・ブダペスト・ホテルの可愛らしいピンク色をたくさん使いたかったので,背景に置くことにしました.
上のサムネのように,背景を地味な色にしてカードをピンク色にするのも試してみたのですが,webサイトとしては映えなかったのでやめました.
Home
Homeの色には,ウェス作品でしばしば使われる淡い黄色を選びました.グランド・ブダペスト・ホテルでも室内の色で使われています.
Profile
ホテルの制服の色を使いました.メインである紫色をベースに,牡丹の金色をタイトル色として使用,サブのカードはシャツを意識して,グラデーションを使わずに真っ白にしました.
Blog
ホテルのフロントのビビッドな赤色を使用しました.フロントの後ろにキーボックスのようにブログを並べることを連想したためです.サブのカードの中身も真っ赤にしても良かったのですが,見辛くなったのでピンク色を選びました.
実際にやったこと
1. カラーパレットの整理
既存の @use "../styles/palette" を軸に,ピンク・パープル・ゴールドのバリエーションを厳選しました.似た色は SASS の color.adjust や color.mix で生成し,保守性を保っています.
2. グラデーション
ウェスの色彩は単色が多いイメージなのですが,立体感を出すためグラデーションを使いました.その際,派手さと柔らかさを両立させるため,AIにやり方を聞きながら以下の2ステップで調整しました.
- 下地を淡色の放射状グラデーションで敷き,コントラストを抑える
- その上に鮮やかな線形グラデーションを 60〜70% 透明で重ねる
background:
radial-gradient(circle at 20% 35%, rgba(palette.$color-accent, 0.4), transparent 55%),
linear-gradient(180deg, palette.$color-accent-soft 0%, palette.$color-accent 100%);
一言
スクショして色を抽出したりしてみたのですが,単純にそれを組み合わせるだけだとwebサイトとして違和感のある色味になったりしたので結構元の目的とはズレた色味になっている気もしています..