こんにちは！はてなデザインチーム所属の
id:cormorantcraftです！
先日、配信させていただいたはてなブックマークiOS版のDark Mode、みなさん使っていただけているでしょうか？
今回はそのDark Modeの実装にあたって、デザイナーとエンジニアのコミュニケーションをどのように行っていたかという点にフォーカスしてお話しさせていただければと思います。
コミュニケーションプロトコルの設計
いきなり「コミュニケーションプロトコルの設計」って言われても？ という声が聞こえてきそうですが、Dark Mode実装の上で平たく表現すると「色を指定するデザイナー」と「色を実装するエンジニア」の間の意思疎通の枠組みを作ることです。
これをしないで進行してしまうと、デザイナーとエンジニアの間で手戻りが多数発生したり、精神的にお互い疲弊したりチームの雰囲気にも悪影響が出たりしてしまいます。気持ちよく進行するための土台作り、ですね！
その設計自体に明確な方法があるわけではないですが、今回は以下の5点に気を付けて行いました。
ワードの命名で混同を招かないようにする
Dark Mode実装を進めるにあたって、まずは開発環境にカラーアセットを登録することになります。このカラーアセットはDark用とLight用のカラーがそれぞれ格納される形になっていて、登録する際には用途に沿った命名が必要になります。
また、それぞれ格納されているカラーそのものにも管理上の固有ID名を振っておくと後々、微調整などがしやすくなります。
その際に気を付けないといけないのは、これらを深く考えずに命名するとカラーの指定や変更を伝達する際に、以下のようなBadコミュニケーションがおきてしまうことです。
悪い例）LightモードのDarkTextをLightBlackにしてください！
…呪文かな？
これは極端な例ですが、こういった混同が起きやすいような命名はあらかじめ避けておいた方がよいはずです。
私たちの実際の運用では下記のようになっています。
実際例）LightモードのLabelSecondaryをBla06にしてください！
最も気を付けたのはカラーアセット名とカラーID名の命名法則を分けることです。アセット名には色や濃度を表現する表記を入れず、カラーID名は番号を付与することで、文字から受ける印象をあらかじめ区分けるようにしました。
また、Dark Mode実装にあたっては、コミュニケーションの中でDarkおよびLightというワードがインフレするので、これらを修飾語として使うことは避けるようにしています。
見るべき資料を限定し場所を固定する
参照すべき情報が、あちこちのissueコメントに散らばっていたり資料が多すぎたりすると、情報を探し出すだけで無駄なコストを使ってしまいます。参照資料は出来うる限りまとめた方がよいです。また、情報の更新があったときに別のファイルを追加で作成したり、場所が変わったりということも避けるようにします。
はてブアプリの場合は、
- ColorSettingSheet（カラー設計をまとめたもの）
- Adobe XDスペック（UIにアサインされているカラーを確認できるスタイルガイド）
の2種類で運用しています。
それぞれ常に最新のものが同一のURLで提供されており、ブラウザ上で確認することが可能になっています。
見て触ってカラー指定を参照できるようにする
UIの種類や位置、カラー適用の紐付けを口頭やテキストで伝達するのは意外と大変です。スプレッドシートにリストアップするのも良いですが、一番良いのは実際の画面に近い形で、見て触って参照できるようにすることです。
それを実現するためにAdobeXDのスペック（開発者共有）やZeplinのようなスタイルガイド機能を活用しましょう。
はてブアプリではDark Mode実装にあたり、おおよそのUIをXDで起こし直しスペック上で主要なカラーを参照できるようにしました。
また、XDスペックをただエンジニアに投げるだけでなく、事前にスペックの眺め方を軽くガイダンスするのをお勧めします。「重なったオブジェクトで任意のものを参照したい場合は右クリックするとリストから選択できる」など、知っておいた方が効率的に進行できるポイントは予め伝えておきましょう。
カラーを参照し適用するフローを遮らないようにする
スペックでUIのカラーが提示されていても、[#000] のようなHexによる値しか表示されていないと、それがどのカラーアセットと紐づいているのかは読み取ることができません。この状態だと、紐付けを別資料と照らし合わせて確認するという手続きを挟むことになるため、面倒なことになってしまいます。
それを避けるためにAdobeXD内のアセット登録機能を使用しましょう。登録したアセット（カラー）はスペック上においてもその登録名称を表示してくれます。
これを活用して、XD上でのアセット登録名と開発環境上でのカラーアセット名を同期しておくと、スペックを見るだけで開発環境への適用ができるようになります。
完璧な仕組みを目指さない、過度な精神的努力も求めない
業務を進行していく上で、設計したプロトコルの中でカバーができていない、想定外の部分などは随時出てくるものです。個人的にはワークフローとして100点中80点の定型化が出来ていれば十分だと考えています。
仕組み化を行い通常フローの負担が下がっている状態であれば、余裕を使って残り20点を埋める柔軟な対応ができるようになるからです。
100点の設計・運用を求めようとすると、ベースのフローを遵守し当てはめること自体がストレスになります。逆にフローの設計・運用がないと、互いのアドリブ、精神的努力を求める割合が増大にするので、それもストレスになってしまいます。
つまりワークフローを高水準で整えた上で、余裕をもたせて運用していくことがトータルな心理的安全性と生産性の向上につながるようになると考えています。
以上、Dark Mode実装の上で、コミュニケーションプロトコルを整えるために気を付けたこと5点でした！
iOS13、Android10でDark Modeがサポートされることになり、現在進行形で実装を検討しているアプリケーションは多いのではないでしょうか。
ですが、既存のリリース済みアプリで対応を進めるとなったときに、様々な気になりごとや過去の経緯、進行の仕方など考慮すべきことが多く、なかなか最初の一歩を踏み出すのが難しい状況になっていることも多いかと思います。
特にスマホアプリにおいてUI実装はエンジニア側がハンドリングしていることが多いため、デザイナーとエンジニアが両輪で動いて、その歯車をどう噛み合わせていくかが悩みどころです。
今回はその点にフォーカスして実例のポイントをご紹介しました。Dark Mode実装を進める上で悩んでいるデザイナーの皆さまの一助となればと思います！
おまけの補足
最後に1点、気を付けポイントを記しておこうと思います！
先ほど「Adobe XDのアセット登録機能を使用すると、その名称がスペック上にも表示される」とお伝えしました。
が、ここに注意すべき点がひとつあります。
カラー設計をするにあたって同一の色を別々のカラーアセットに登録するというケースは少なくありません。（例えばボタンとリンクは同色である、など）
しかし、Adobe XDでは一つのカラー（Hex）に対して一つのアセット登録しかすることができず、単純に使っただけではその状態を表現することができなくなっています。
そのため私の場合は、暫定的対応としてXD上のアセット登録名に複数のカラーアセット名を連ねて併記するという手法を取っています。
こうするとスペック上でも一つのカラーに対して複数のカラーアセット名を伝達することが可能になります。ただ問題としては複数表記されているうちどのカラーアセットを使うべきか明確に分からないということです。（画面上の文脈から読み取れることもあります）
私たちのチームでは、この点に関して予めデザイナー側からどれを使用すべきか判断できる情報を提供したり、デザイナーに直接聞いてください！という形で乗り切っています。（つまり、ここがフロー外のアドリブ20%に該当する部分…です）
XDで複数アセット＆同一色の設定ができるようになれば、この辺りもスペックだけでやり取りできるようになるのですが…
なんとかならないかなぁ…？（ﾁﾗｯ ＜Adobeさんの方向を見ながら
以上、id:cormorantcraftがお送りしました！
