デザインガイドライン作りの試行錯誤について(2019年の記事に2021年から返信)
noteの下書きに2019年の書きかけの記事があったので供養します。せっかくなので2021年のわたしが相槌や追記もしています。
デザインガイドラインや言語などは非常に今ホットなトピックスです。検索語句でも「作り方」がサジェストされるし、デザイナーとして「俺も一個くらい作ったったゾという記事を書かなえれば…」と考えている人いるんじゃないでしょうか。はい、私です。
懐しいですね。そんな時期もありましたね。
本稿の狙い
デザインガイドライン v0.0.1-2を作った程度のやわやわなステップで、わたしが何に悩み何を調べたかをまとめていこうと思います。
デザインは判断の連続です。できればこの記事を書くことによってデザインガイド作成のお役立ちリンクや概論や定義というものではなく、「何に困って」、また「何を選ばなかった」のかというドキュメンタリーテイストな内容がもっと増えることを期待します。
助走に使えるカラーガイド
ゼロからイチにする作業は腰が重くなかなか手がでないものです。デザインガイドラインではカラーガイドから着手するのがラクでしょう。何故ならすでにWebサイトで使われている色をまとめて整列させるだけで出来た気になるからです。
カラーだけでもしっかり定義できるとあとの作業がすごくラクになりますよね。
ブランドカラーが既定値とかぶる
青がブランドカラーだと、ブラウザのリンクやfocusとかぶっちゃうんですよね。できれば華美なカラー展開をしたくない指針なのでブラウザ既定値と差別化ができつつ、親和性が高い設計がしたい。
この悩みは杞憂でした。
人の目は数々の色の中でも「青」と「グレー」の明度差を細かく見分けることができます。ですので、
ブランドカラー = feedbackカラー、UI controlカラー
などにしても不自由はありません。ただ、青に関してはブランドカラーの青とは別に
もう1,2のカラースウォッチ、及びグラデーションは必要です。
ブランドカラーとプライマリカラーの定義
同一にするか。別にするか
以下から2021/4/13追記
記事はここまでで途絶えていたので以下に2021年の私の現時点での回答を続けます。
ブランドカラーとプライマリカラーは別ものです。ですが両方を備えたカラーというのが存在します。
Primaryの意味を考えれば、ブランドカラーがプライマリカラーとして扱われてもなんの問題もないのですが、当時はそれを理解してなかったんだなと思いました。また、カラーにヒエラルキーが存在せずすべてが同列として考えていたというもの見えますね。
ブランドカラーとは
そのブランドを象徴する色です。原則は一色定義され、サービスの重要なアクション(UI領域)や印象的な表現(視覚表現領域)に利用します。
プライマリカラー
複数の候補がある時にdefault値、またはまっさきに選択されるべき色です。
初期の、最初の、原始的な、初等の、初歩の、主要な、主な、根本の、基本の、第一の
という意味を持つことからも想像しやすいでしょう。
これはヒエラルキーの同階層で、いくつか選択肢がある時に「どれを選択すべきか」を指定したい場合に用意すると良いでしょう。
上記の図では、青の中でPrimaryはコレと「P」で記されているのがそれです。複数の青がある中でこの色を初期値、主要な色として決定しています。
これを参考に自身で色を定義したのが下記の図です。
プロジェクトによりますが、下記のように命名しています。
- ブランドカラー = primary color
- 青のprimary = blue 500 / primary
- 黄色のprimary yellow 800 / primary
色に関して10段階用意し、それぞれを100-10の値で命名する + Primaryと付与することにしています。またこのように展開するのは青とグレー、ブルーグレーのみとして、赤、黄、緑は2,3色の展開程度にしています。そもそも用途が少ないので。
Typographyでサイズを設定する事は必要なのか
font-familyとline-heightは定義しておく必要があると思ってます。これらは文章の表情が変わるからです。
ですが、サイズやempashisにおいて、スタイルで定義して限定的にする必要があるのかはまだ懐疑的です。現時点のわたしがMVPを作るとしたらTypographyにてサイズの変化はStyleとして定義しません。
Style数が多くなるとプレイヤーの脳がオーバーフローする
多言語の場合は1byte、2byteでどの書体を使うのかも増えます。
さらにそこにR(egular),M(edium),B(old),I(talic)まで増えてしまったらルールとして煩雑すぎる気がしています。
細かくサイズ決めるくらいならComponent側で色とサイズを厳密化した方がいい気がする
11,12,13,14,16,18,24,32,64px 〜 みたいに細かい刻みになるくらいなら、最初から定義せずデザイナーの判断にまかせても良いと思います。
Styleとして定義しないかわりに、Component内に使うtext sizeに関してはこちらもmaster component化し、厳密に扱えばいいと思っています。そちらの方がゆらぎようがない。
ボタン
次に用意するとしたらボタンが良いでしょう。色とボタンが揃うだけで、簡単なページやコンポーネントが簡単にできあがってくるので、どんどん楽しくなります。
Type
- primary
- secondary
Icon
- on
- off
State
- default
- hover & focus & active
- disable
Size
- small
- medium
- large
サイズはひとつのvariantでまとめようとするとうまく動作しません。IconやStateを変更するとサイズもリセットされてしまいます。
ですので、
Large ┐
├ Type
├ Icon
└ State
Medium ┐
├ Type
├ Icon
└ State
Small ┐
├ Type
├ Icon
└ State
と分けるのが良いでしょう。
これくらいあれば、ちゃちゃっと簡単なページ作るのには便利です。
Screen Layout
Header / Footer / Contents areaを擁した、ページをコンポーネントとして用意します。
Figmaの場合、ここを綿密に作ればページ設計がとても簡単になります。
Discussion