自作アプリの配色、意味を先に決めた

筋トレ記録アプリ「キロク」の色は、1つのファイル（tokens.css）に集めています。朝5時半にジムで開くアプリなので、画面の暗さもボタンの色も、全部そこに書いてあります。

開くと、色の値の横に短いコメントがついています。黄色の #E9B44C には「15kgプレートの黄」、緑の #5FA97A には「10kgプレートの緑」、赤の #C9473A には「25kgプレートの赤」。プレートというのは、バーベルにつける円盤のおもりのことです。重さごとに色が決まっているものがあります。背景のほぼ黒に近い色 #14161A には、「5:30のジムの暗さ」というコメントがついています。朝のジムで開くアプリなので、時刻がそのまま色の説明になっています。

朝使うので、目に優しくて、でもちょっと目立つ、分かりやすいものが良かったので、黄色と黒にしました。チェックを入れたものは完了したことが分かりやすいように、緑で色が変わるようにしました。

意味を1つだけ決めたら、2日目に6色足すことになった

色の値とは別に、原則を書いたファイル（DESIGN.md）に、色の意味をまとめた節があります。見出しは「色の意味（勝手に増やさない）」。琥珀（黄）は「今あなたが押すもの」、緑は「終わった／達成した」、赤は「待たされている」、グレーは「読まなくてもいい情報」。そう決めてあります。節の最後には「装飾のための色は使わない。色がついている＝意味がある状態を守る。」と書いてあります。画面で言うと、まだ押していない✓ボタンは琥珀で、押すと緑になる。単位の「kg」や目標回数はグレーです。

色の値をまとめた別のメモにも、同じ考え方が出てきます。「amber／green／redの3色は、それぞれ『今押すもの』『終わったもの』『待っているもの』という時間軸上の役割を担っている。この3色を別の用途に流用すると、朝の暗いジムで一瞬見たときの判断が鈍る」とあります。

ところが、iPhone版を作りはじめて2日目の8月20日、このルールがすぐに試されることになります。種目カードに、「胸」「背中」「脚」といった部位の小さなラベル（バッジ）をつけることにしたんです。部位は6つ。見分けるには、色が6つ要ります。

手持ちの意味色は、琥珀・緑・赤の3つだけです。ここから使い回すと、たとえば「胸」のバッジが琥珀になります。琥珀は「今あなたが押すもの」という意味なので、押すものではないバッジが、押すものの色をまとうことになる。「色がついている＝意味がある」というルールが、そこで崩れます。

だから、6色は全部、新しく作ってあります。しかも、置き場所の名前を意味色（KColor）と分けて、KBodyPartColor という別の棚を作りました。コードのコメントには「種目ライブラリの部位バッジ用。既存の意味色（amber/green/red）とは重ならない配色。」とあります。胸は #C97B63、背中は #5B8DBE、脚・尻は #8A6FBE、肩は #5FADA0、腕は #BE6FA3、腹は #A3B15F。「勝手に増やさない」と書いた表には、結局1色も足していません。増えたのは、表の外にある別の棚でした。

余計なものを付けたくなかったので、色を付け替えることは想定していなかったです。

アプリの外でも、同じ色を使った

値を1か所に集めておくと、アプリの外でも同じ値が引けます。App Storeに出すときに、プライバシーポリシーのページを1枚作りました。背景は #14161A、見出しは #E9B44C。アプリと同じ暗さと、同じ琥珀です。申請用のスクリーンショットは、大きい画面で撮ったものを、ひと回り小さい規格に縮めています。縦横の比がわずかに違うので、左右に細い余白ができる。そこも #14161A で埋めました。背景と同じ色なので、継ぎ目は見えません。

行く前に知りたかったこと

• 作ったもの：筋トレ記録アプリ「キロク」の配色。色の値は1つのファイル（tokens.css）に集め、色の意味（琥珀＝今押すもの、緑＝終わったもの、赤＝待たされている、グレー＝読まなくてもいい情報）を先に決めました
• つまずいた箇所：作りはじめて2日目に、部位バッジ用の色が6つ要りました。意味の色を使い回すと「色がついている＝意味がある」が崩れるので、別の棚（KBodyPartColor）に6色を新しく作りました
• 値を1か所に集めておくと、アプリの外（プライバシーポリシーのページ、申請用スクリーンショットの余白）でも同じ色が使えました
• 使ったもの：tokens.css、DESIGN.md、iPhone版（Swift）