8bitに学ぶUIデザイン

Pocket

今回は、「8bitに学ぶUIデザイン」を考えてみました。


「8bit」とは?

「8bit」の言葉の響きに、あの古臭いやつね…とネガティブな想像する方もいると思いますが、心躍る方がいれば今回の内容について理解が早いです。

昨日(2016/11/10)は往年の名8bit家庭用ゲーム機がダウンサイジングして発売されて話題となっており、今の情報過多の時代にある意味新鮮に受け止められているのではないでしょうか。
今回は、そんな80年代に活躍したコンピューターゲーム機の画面表現力を、象徴的意味合いで「8bit」という用語に置き換えて使います。
正しい解説については割愛します。

8bitの表現をポジティブな目線で捉えると以下があげられます。

1)扱う情報量が少なく、リソース比重が現在と比較すると「アイデア」に多く充てることが出来た。

2)個人でも十分作業が出来た。

3)低解像度/低発色数による簡素な表現であったため、利用者の想像力を掻き立てた。

4)ハード性能不足による「制約」に挑戦する熱い想いが制作者/利用者共に生まれた。

5)必然と「アイコン化/シンボル化」された画像は、今の時代でも新たなファン層を広げている。

以上でしょうか。

今回のテーマはここからが本題でして、
ある意味何でも表現可能になった現在の情報デザインに、8bit時代の環境や表現、そして制限を「デザインルール」として充ててみようという記事です。
前置きが長かったですね。

広い表現力の弊害

現在、情報デザインを考える際、
「広い表現の幅」は、問題点の認識を遅らせたり、表現を複雑化してわかり難くする状況があります。
実はこれが、
開発案件では大きな問題になり、「悪いUI」を生む要因になっています。

そこで、「8bit風デザインルール」の登場です。

大げさですが、要はただのシンプルデザインレイアウトルールで、今流行りのワードを使いたかっただけですが…このルールを充てることで、適切なUIデザインに必然となります。
楽楽ですね。

8bit風デザインルールとは?

今度こそ本題です。

それでは「8bit風デザインルール」の説明が以下となります。

1)大キャラばかりは無理なんです!だって8bitだから!

2)画面内にオブジェクト弾幕!憧れるけど出来ません!だって8bitだから!

3)ボタンが横並びに5個も!!…目がチラついて見難いです

4)画数が多い漢字は出しません…だって8bitだから;

5)UX!? ボスキャラの弱点にダメージ与えると点滅!

以上はワイヤーフレームレイアウトなどを作る際に充てる怪しげなルールですが、
何と今回は割愛します;
※気になる方が多ければ別の機会に説明します。

…まずは、
出来上がったワイヤーフレームがこちら

pic_161111_01

シンプルな情報量になってますね。

これからの工程はこれらの8bitルールで進めてみます↓

6)カラフルな色なんて知りません!世の中白黒しか無い!

前提として多すぎる情報量は余計なので、純粋に優先度や大きさ形の表現を検討する目的で、一切の有彩色を省きます。

pic_161111_02

7)配置の微調整必要なし!グリッドに置くだけ!

それでは、
まずは実際の8bit機よりもさらに簡素なグリッドフォーマットを作ってみます。

pic_161111_03
こちら厳密にはiPhone向けで、「44ルール」で作られています。
横の解像度は320pxで一つのマス目はw36xh22で作られています。
44ルールを使用してるのでその半分の22の高さで現実的なレイアウト再現させます。
横軸に、ボタンなどのコンポーネントは横4個まで配置するルールを適用しています。
左右にはマージンを既にとってます。
楽ですね。

それではマス目に単純に置いていきます。

pic_161111_04
テキストは端末依存のズレも大きいので、マス目のラインにセンター置きします。
標準の中フォントサイズであれば上下の余白も同時にできます…が、
大き目のフォントや複数行の文章の場合は別ルールを適応しましょう。

8)裏ワザ?!アイテム?! 1色だけ使用が許されるスペシャルな拡張機能「アクセントカラー(挿し色)」!

単色だけでは華がないので、スペシャルアイテムとして1色だけ有彩色の投下が許されますので、ここぞな場所だけで使いましょう!
割合は色MAPの2、3%でしょうか。

pic_161111_05

いかがでしょうか?

以上デザインルールでまとめたページがこちらです。

pic_161111_06

サービスカラーを充てるとこんな感じです。

pic_161111_07


コンテンツを提供するサービスであれば、
コンテンツ自体の優先度は高くあるべきなのですが、
実際は「サービス」自体を優先してしまい、色々な情報や広告、大人の事情、過度な色使いや装飾に埋もれてしまいがちです。
振り返って原点に返り、理解しやすい表現を求めると、
シンプルな方向性となり、シンプルになれば作業量も少なく効率的になり、結果、作業者にも、利用者にも、メリットが出てきます。

フラットデザインも理解が得られている現状ならなおさら、
もっと、考え方と作業はシンプルで良いのではないでしょうか?

一度お試しください!

以上、
サービスデザインに関わっている、デジマースのネモトでした。

/////////// 関連記事はこちら↓ ///////////

[必然的な利用シーン]環境/需要との接触


UX(ユーザー・エクスペリエンス)を解釈してみた


サービスVSユーザー!UIリテラシー格差を考える


あぁ…Flashツールに望みはあるか?


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

Pocket