モードの両方に対応したページにリニューアルしました。モードを考慮してデザインする時に何を気にしたか・どう実装したかを手前味噌ながら載せておきます。私はデザイナさんではないので、エンジニアの趣味ページ・アプリ作成という文脈です。ヶ月経っているので、一部分の記述は事実と異なっているかもしれません。私見では、手順自体に大きな変化はなかったと思いますが、所々気にすべきところがありました。シンプルな背景や文字の場合はモードに合った色に変えるだけで済みますが、画像等の要素をデザインとして配置する場合、色違いにしても成立するものを選ぶか、それぞれが異なる構成をモード間に矛盾なく組む必要があります。今回のページには山と高層ビルが並べましたが、色を変えれば昼と夜でもなんとか存在感を出せるアイテムです。モードの場合にどう配色するか、存在感を出すかが難しかったです。中途半端に要素を配置するよりも、シンプルな背景と文字にして(配色の本やサービスを参考に選んで)色で個性を出すのも良い手かなと思いました。設定という工程でした。二元性のあるテーマにしました。夜のテーマとし、そこに、山(当初は森)、高層ビル、太陽・月を隅に配置してモード毎に色を変えることにしました。色を仮決定テーマを決定したので、それに合う色を大まかにピックアップします。つのモードに対応したことによる不自然さや無理やり感を避けたく、色を優先する構成にしようと思ったからです。空は紫がかった青を使おうと決めるといった具合です。トーンの基準を見つつ、色毎のトーンのバランスも頭に入れておきます。仮組み最初にレイアウトを考えます。モードの違いが際立つよう、背景を意識させるようなものにしました。描いて仮配置し本実装でのバランス調整に備えます。最後に、コンテンツを作成しました。今回は文章だけだったので調整は簡単でしたが、現実世界の写真や広告が入ると苦心しそうだと強く感じました。仮組みした対象を実装していきます。モードから実装を始めています。使って変更箇所を切り替える仕組みにしています。仮決定した色を元に、スペーシングやタイポグラフィを整え、さらにトーンや目立ち具合を丹念な色の調整によってイメージ通りになるよう均していきます。開いて文字の視認性を確認します。表示が出るまで文字色を濃くしています。文字色とリンク色の差がひと目ではわからなくなってしまったので、下線をつけるなどの対策を施しました。レスポンシブ対応デザインの順番がずれてしまった気もしていますが、スマホ・タブレット画面対応をしました。ここの辺りはモード違いを意識せず済みました。モードのときと同じです。上書きするだけになり、それがガイドになって実装は楽でした。良しとしましたが、それでもかなり制約がありました。視認性重視なコンテンツの場合は色を仮決めする段階から視認性を意識しておかないと、後の工程で泣きを見ることになりそうです。設定を弄る程度でした。