アプリ5本、見た目を毎回決め直していました

自分用のアプリを5本作ったころ、見た目をまとめて見直したくなりました。色も余白もボタンも、それぞれの開発で決めていたからです。

単体の画面を直すだけでは、次のアプリでも同じ判断をやり直します。そこで、共通に決めておく部分を先に整理しました。

色より先に、文字と間隔を揃える

作ったのは、文字や色、余白の決まりをまとめたCSSファイルです。CSSは、Webの画面の見た目を決めるものです。これを、自分用アプリの共通の部品箱にしました。

• 文字の大きさと行間
• 余白の段階
• 角の丸み、線、影
• 背景色、文字色、アクセント色
• ボタン、入力欄、カードなどの部品

新しい画面では、そのファイルを読みます。毎回ゼロから「この灰色は何色にするか」と考えずに済むようにしました。

全アプリが自動で揃ったわけではない

最初に使ったのは酒ログです。動いている機能は変えず、見た目を決めるCSSを足して、新しい表示に置き換えました。

その後のAI Radarと事業コックピットは、同じフォルダにあるCSSを読むようにしました。そのフォルダが見つからないときは、アプリに入れておいたコピーを使います。

「1か所を変えれば、すべてのアプリが同時に直る」とは言えません。古いアプリへの適用も、まだ途中です。同じルールで作ることと、同じファイルを読んでいることは別でした。どのアプリを直せばよいかも、残しておく必要があります。

アクセントは絞る。状態の色は残す

自分用アプリでは、明るい背景と読みやすい文字を基本にして、アプリごとのアクセントを絞りました。酒ログには藍、AI Radarには紫、事業コックピットには青を置いています。

ただ、失敗を知らせる赤や、注意の色までなくすわけではありません。「この色は飾りなのか、何かを知らせているのか」が分かるようにしています。

共通にする

文字、間隔、線、基本の部品。毎回決め直さない。

用途で変える

情報の並べ方、状態表示、アクセント。使う場面に合わせる。

見た目だけの変更でも、操作を確かめる

酒ログでは機能やデータ構造を変えず、見た目の変更に絞りました。ただ、CSSだけでも、ボタンが隠れたり、文字が読めなくなったりする可能性はあります。

だから画面を見て終わりにせず、入力する、開く、閉じる、狭い幅で読む、といった操作も確かめます。機能のコードに触れていないことは、操作が変わらない保証ではありません。

このブログは、別に考えています

この共通ルールは、自分用アプリのためのものです。公開するブログには、そのまま当てていません。

自分が慣れた管理画面と、初めて来た人が読む記事では、必要な入口も情報量も違います。ブログでは読むものを見つけやすいか、スマホで図が読めるか、本文へすぐ入れるかを見ます。

共通の土台を持つと楽になります。ただ、何のための共通ルールかまで固定しておかないと、用途が違う画面にも同じ見た目を押し付けてしまいます。文字や余白は借りても、何をいちばん見せたいかは、その画面ごとに考えたいです。