カプリオレンジという限定カラーのジャズベースを買ってからあまりにそのルックスが気に入り過ぎてしまったために、全ての色の中でオレンジが至高であるみたいな思想になってしまいました。
なのでこのサイト(imasashi.net)もオレンジにリデザインしようかと思い休日にFigmaでデザイン作業してたら、本日2025年2月11日は私が再も敬愛するRPGであるFC版ドラクエ4の発売35周年だというニュースが目に飛び込んで来たので、何かの巡り合わせかと今日中に実装までやってしまおうと一気にやりました。
ついでに、前からやりたいと思っていたダークモード化もやったるかーと、いろいろ詰め込みました。
Before/After
まずもともとのウェブサイトをFigma上で再現。そしてコンポーネントをインスタンス化して色を何度も何度も試してしっくりくる状態を探しました。
これが
こうなりました。
これが
こうなりました。
このサイトの立ち上げからずーっとキーカラーはピンクで通してきたのですがこの度始めて変えました。結果、かっこいい気がするので満足です。
なお妻には｢情報系サイトみたいだね｣と言われて方針がグラつきかけましたが自分の直感を信じる事にしました。
仕事でやるウェブサイト改修とは異なり15年も運用している自分のサイトですので、テンプレートやコンポーネントが全て頭に入っています。ので、2画面分のデザインさえ完成させて、後は現物合わせつまりCSSのチェックと修正で全体をリニューアルできました。
厳密に言うとまだ適用しきれていない箇所が残っていますが、おいおいやります。
という事でただいま3時間くらい休み無しでCSSをひたすらいじった後ですが、久しぶりに素晴らしい充実感です。やはりものづくりは尊い。
デザイン定義
自分の備忘も兼ねて定義を残しておきます。
カラー
以下の8色で全てのUI要素を再現している(はず)です。
Text – lv.1
Text – lv.2
Text – lv.3
Text – lv.4
Orange – lv.1
Orange – lv.2
Background – lv.1
Background – lv.2
私は本職のデザイナーでもフロントエンドエンジニアでも無いので毎度カラーの定義は適当なのですが、今回始めて系統的にやりました。こうやって定義しておくとCSSでカスタムプロパティを使って一気に反映できて楽ですね。何年前の技術水準の話をしとるんやという話ですが。
特にこだわったのがOrange lv.1です。
キーカラーをオレンジにリデザインしようがそもそもリニューアルの発端ですので当たり前なのですが、Macbookでの発色がジャズベース現物のオレンジと同じになるように何度も調整しました。ベース本体をディスプレイ近くに置いてにらめっこしながらカラー調整したのは生まれて始めてです。
ロゴ
もともとのロゴにあるタイポグラフィで使っていたフォントが記録されていなかったので作り直しました。Figmaにあった Libre Casion Text というのを採用。ウェイトはMidium。
その他
記事中の画像に角Rをつけました。なんとなく、画像の角が指に刺さりそうな気がしたので。
終わりに
Version Capri Orange と名付ける事にします。MacやAndroidのOSがバージョンごとにタイトルをつけているからです。久しぶりにコード書いて高い充実感に浸っています。やって良かった。
自分の性格上、ドラクエ4の発売日という報せが無かったら半年くらい放置していたと思われるので、ドラクエ4に感謝します。