SpaceXによる有人ロケット打ち上げ成功によってCrewDragonまわりのインターフェースのデザインがいろんな業界から注目されております。自分の中でも今回の出来事はテクノロジーにおけるデザインの重要性を改めて考えさせてくれた重要なイベントとなりました。

かつて宇宙船といえば操縦桿やスイッチびっしりのコンソール盤がコクピットを占めていました。映画インターステラーのレインジャー号ですら、膨大な数のコンソールが壁一面を占めており、先進的というより実用的といった印象でした。CrewDragonは映画的な見た目のカッコ良さが話題になっていますが、インターフェース系をタッチパネルにすることによってコクピットが7人(宇宙飛行士4人+残り3人)まで乗れるそうになったそうです（ホリエモンTVより）。このことにより一般の方が宇宙旅行することが益々現実的になってきました。カッコ良さだけでは無く合理的な機能性を伴うことがいかに大事なことなのか。自分もいつか国産の宇宙服のヘルメットに投影されるインターフェースとかデザインできるときが来たらいいなと夢見ています。

はじめに

弊社モフ（おもに自分）はもうかれこれ6、7年以上、実用的なソフトウェアに対して機能性と合理性を兼ねたビジュアルインパクトの強いインターフェースを模索しつづけ今なお現在進行系です。こーいった専用ソフトウェアのインターフェースのカッコ良さは昨今のWebやアプリといったHTML／CSSによる標準コンポーネントの組み立てだけでは達成できない部分もがあり、シネマティックなカッコ良さと機能性を兼ね備えるために『シーケンスの合理性』『情報の順序と見せ方』『合理的なグラィック形状』と日々向き合っています。今回のSpaseXの件をきっかけに自身の脳ミソの中を振り返りつつノウハウを取りまとめようと思いました。

ダークモードとは何かを考える

昨今実装されたダークモードと呼ばれるスタイルがあらゆるサービスを席巻しました。CrewDragonは宇宙空間で使われるのでそもそも黒い背景がベースになるのですが、ダークモードって何なんでしょうか？集中力や消費電力に良いとか色々な話は聞いたことあるのですがあまり説得力のある説明を聞いたことがありません。かつてWindows8でもダーテーマと呼ばれるモードもありましたし、SF映画で見られるスクリーングラフィックは99%がダークモードと言っていいでしょう。自分も5年ほど前から当たり前のように黒い背景のUIをつくっておりましたが、ふと白いUIじゃいけないのか？と考えたことがありました。色々試した結果、おそらく「色の進出・後退と膨張・縮小」における心理効果とUIとして利便性が一致したのではないかと考えています。UIとは、起きた・起こしたい事象の因果関係を追求するものなので数字やチャートといったパラメータがコンテンツの源泉であり主役なんです。そこで背景を黒くすることよってパラメータがおのずと進出・膨張して主役として強調され、特にアラート系で使われる暖色はもっとも全面に進出してくることになり、おのずとUIとしての利便性が高くなります。

、、、といったことを踏まえて、こんなことを考えながらインターフェースをつくっているという基本的なお話ができればなと思っています。

ゾーニング

いわゆる肩慣らし・素振り的な工程です。主題が何なのかということを画面内のゾーニングいわゆる構図を決めていきます。また仕様を網羅しながら頭の中に詰め込むための工程でもあります。正直なところソフトウェア系のUIだとWebやアプリと違ってレスポンシブやブラウザ互換などあまり考えなくていいのでラクな部分もあります。ここでは一枚（or多面）のディスプレイを額縁として画面のバランスを決めます。バランスってなんだよ！と突っ込まれると思いますが、いわゆるコンテンツにおける主題＝地図とか3Dモデルとか）、副題（コントローラとかプロパティとか）などの優先順位を決める作業です。この工程でクオリティが7割方決まってくると言っても過言では無いので、スケッチなりコラージュなりでモクモクと見当をつけていきます。ヤバめのスケジュールのときはすっ飛ばす時もあるのですが大抵あとから失敗します。

例えば超ざっくりとしたゾーニングとしてこんな感じでスクショのコピペ・変形させまくりながらコラージュします。元のスクショのリソースは過去の記事にも載せたスクリーングラフィック（fuiともよばれます）を得意とする海外のプロダクションからペタペタとスクショします。

↑マップ主体のコンテンツなら、コントロール系とパラメータ系を右カラムにまとめたほうがいいかなあ、とか考えたり。

↑多機能に見えてなんかカッコ良いんだけど何するソフトかわからないなあ、とか。

↑こちらは実際の案件の元になったコラージュ。上下UIで固めるとシネスコ（21:9）っぽくなって3Dに迫力でるなあ、とか考えてました。

主題・副題が5割5割の面積率だと何を主張したいものがわかりにくい！となりますので、個人的には主題・副題が7割3割くらいの比率が程よいかな？と思っています。この時点で3Dモデルどうするんだ！とか、そんなシェーダー（質感）つくれねえよ！みたいなことも考えますが、それは後々に時間とコストと相談するということでこの時点では理想のかたちを決めていきます。

コントラスト

画面内のUIのコントラストを設計します。といっても3Dや地図などの素材が出揃うまでは何度も行ったり来たりする工程です。画面内でしっかりと明るい色と暗い色のレンジを使い切れるように意識していますが、カラーピッカーの一番端っこは意図的につかません。ピッカー上の一番隅っこというのは非デザイナーが多用しやすい部分なのでこの範囲の明度を多用すると一気に素人臭くなります。それと白#ffffff、黒#000000ってレンジとしてそれ以上が無いということなの、デザインの最終的な仕上げとして後々のデザインのコントロールが非常にネックになります。おそらく映画系のスクリーングラフィックも、コンポジット処理といった光のグラデーション（フレア）や暗いグラデーション（パラ）のような調整が多様されるので真っ白・真っ黒の色を使ってることってあまり無いはずです。

カラー

コントラストの部分でも言及しましたが、いわゆる非デザイナーが選ぶ配色って赤、青、緑といった口で説明できる色相のド直球の配色、いわゆる純色とよばれるモノを多様します。そういった非デザイナーの方が狙う色相では無く、もはや何色か一言で説明できないような、いわゆる色相と色相の間を突くようにチョイスしたカラーを選べると一気に画面のクオリティが上がります。そこから配色を展開していくのですが色相は狭めれば狭めるほど画面が引き締まってカッコよくなります。しかし、WCAG2.0のようなコントラストチェックとはトレードオフになる部分もあるので要求仕様をよく確認したほうがいいでしょう。

↑実際の案件でつかったAdobe Color（kuler）のカラーホイール

フォント

ここ5年の間にだいぶ状況が変わりました。まず大きな問題としてソフトウェに組み込むためのライセンス問題があります（Windows系のソフトウェアだとメイリオ一択しか無いなど…）。ですが近年はGoogle fontないしはGlyphsといったフォント作成ソフトによってかなり自由度が高くなりました。プロポーショナル信仰の強い広告系の方から見たら信じられないフォントのチョイスかもしれませんが、UIでつかうフォントとして等幅フォントのチョイスも大いにありえます。見出しや読ませるテキストなどはプロポーショナル、パラメータは等幅みたいな感じで使い分けれるのが理想です。

和文フォントの選別はまた別の理屈がありますが、自分の欧文フォントのチョイスの基準として、

・エレメントの処理が一貫している　＝　フォントのクオリティが良い
・ストロークの直線率が比較的多い　＝　フォントのモーションに強い
・少しコンデンスド気味　＝　多い桁数への対応力が強い

、というところでしょうか。（ちょっとフォントのチョイスが古いですが、むかしの記事はこちら）

↑上が等幅フォント、下がプロポーショナルフォントでカウント処理した例

アップルウォッチのフォントSan Franciscoなんかもラウンド気味の処理をストレートな処理をすることによって、桁数が可変することによる美しさを重視しだすようになりました。↓この記事が非常にわかりやすいです。

応用的な話もたくさんあります

ざくっと基本的な考え方としてはこんな感じです。フレームやアイコン・グリッドなどのパーツのスタイリング　＝　形状についての合理的な考え方といった応用的な話もあるのですが次回以降にまとめるつもりです。

弊社モフでは、こんなことを考えながらいろんな人がインタラクション・情報設計・イラストレーションなどあらゆる知識や技法を用いて「なんでだろう？」を常に考えながら日々の業務に取り組んでおります。気になる方はコーヒーでも飲みに来てください、、、、と去年までは言えたのですがこのご時世なのでDMでも頂ければzoomお茶会でもしましょう。ではまた。