8bit風 シンプルなUIデザイン

Pocket

今回は、「8bitに学ぶUIデザイン」です。


「8bit」とは?

80年代に活躍したコンピューターゲーム機の画面表現力を「8bitの表現」として考えた場合

  • 扱う情報量が少ないので「アイデア」に比重が置ける
  • 個人でできる作業量
  • 低解像度/低発色数による簡素な表現により想像力を掻き立てる
  • 制約に挑戦する
  • 必然と「アイコン化/シンボル化」された画像
  • 以上のポイントでしょうか。

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

    広い表現力の弊害

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

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

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

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

    今度こそ本題です。

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

    1)大きな(贅沢な)オブジェクトは無理なんです。

    2)画面内に溢れかえるオブジェクト…憧れるけど出来ません。

    3)ボタンを横並びに5個も置けません。

    4)画数が多い漢字は出しません…低解像度なので。

    5)点滅すると目が行きます

    以上はワイヤーフレームレイアウトなどを作る際に充てる怪しげなルールですが、
    説明は割愛します。

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

    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


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

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

    一度お試しください!

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

    Pocket