UXとは言っていても実際何をすれば良いの？〜04.骨格デザイン〜(OOUI)
前回までで、サービスの戦略、プロジェクトの方向性、機能仕様などを決めてきました。
次は骨格デザイン。
インターフェース、ナビゲーション、情報要素を設計
情報要素の設計は03の構造設計でやるべきことかもしれませんが、記事も長くなりそうだったので04.骨格デザインの方で説明していきます。
まずは骨格デザインの目標を２つに分解してみます。
第２目標項目
① 情報デザイン
② 画面設計
ではここででてきた情報デザインとは一体何をしていけば良いのでしょう？
①目的：情報デザイン
まず情報をデザインする上でOOUIという考え方があります。
OOUI(オーオーユーアイ)とはobject-oriented user interfaceという意味。
この考え方では、ユーザーの行動をタスクベースでなく、オブジェクトベースで物事を考える、という設計思想です。
なんのこっちゃ
私なりに噛み砕いて説明していきます。
情報デザイン〜 設計思想 〜 : OOUI
最近はタスクベースでなくオブジェクトベースで設計しようという動きがよく聞かれますが、用途や何を求めるかでその考え方自体も変わると思います。
まずタスクベースとは何か、、というと
〜する(動詞)から入り、もの(名詞)(オブジェクト)を選択すること
次にオブジェクトベースとは
まずはもの(名詞)(オブジェクト)から入り、後からタスク(動詞)を選択すること
とはいえこれでもまだピンとこないかもしれません。
個人的にいちばんしっくりくる身近なUIでタスクベースとオブジェクトベースを説明すると下記のようになります。
銀行窓口のATMはまず何をするか選択し、そのあとで操作をしていきます。
対してオブジェクトベースは一覧から複数選択をし、一括で操作(編集/削除)ができるメリットがあります。
もう少し読み解いていきます。
例えば写真アルバムをスマホから見た場合
タスクベースだと、やることを決めて編集画面に入るため、途中でタスクの変更ができません。
対してオブジェクトベース
写真を選択した後に一括で何をするかを選択します。（参考程度なので実際のボタンの意味は無視してください;;）
どちらの考え方が良いかはそのサービスによって違うと思いますが、こういった設計思想などを駆使して情報をデザインしていくわけです。
また情報デザインをする上で、優先度順に上からtree形式で整理すると情報アーキテクチャ(構造)が見えてきます。
参考資料: 最近噂のOOUI、オブジェクトベースのUIとは何だ!?
②目的：画面設計
設計思想を取り入れながら画面を実際に作っていきます。
手を動かすときはUIツールを使うようにしましょう。ワイヤーフレームはある程度他のツールでもカバーできるかもしれませんが、実際の開発で使っていくデータはUIツールを使うべきです。
ゲームUIや一昔前はPhotoshopやIllustratorなどで作ることもありましたが、現在は様々なUIツールが出ています。
なぜPhotoshopやIllustratorではダメかというと、あとで説明するプロトタイプをフォトショ、イラレ単体では作ることができないこと
そして、一番大きな点でピクセル数や色指定を確認できないので、実際の開発チームとの連携にとんでもなく無駄な時間をかけないといけません。
UIツールで作れば書き出しの際、開発チームが目視でサイズやフォント数などを簡単に確認することができます。w
またツールによってはstyle guideというものも公開でき、このデザインで使っている色数、フォントサイズ、種類を一覧で表示することなどができます。
情報デザイン〜 手段 〜 : プロトタイプ
OOUIなどの設計思想で整理した内容を基にワイヤーフレームに落とし込み、その後プロトタイプを作成します。
プロトタイプとは、実際開発に入る前にデザインだけのせてページ遷移などを実機(スマホやweb)で確認できるようにしたもののことです。
UIツール(XD,sketch,Figma)にはプロトタイプをすぐに作成できる機能がついているのでデザインを作りながら実際ボタンを押したときの動きなどをその場で動かしながら確認することができます。
この作業をしながら、全体の構想とUIの画面設計がちゃんと意図した形になっているかを確認していくのが設計作業になります。
情報デザイン〜 テクニック 〜 : Atmic Design
情報の整理術のテクニックの一つでAtmic Designという考え方があります。
アトミックデザインとは直訳で原子のデザイン。
先ほど紹介したTree アーキテクチャと同じように、要素を分解して小さいものからシンボル、コンポーネント化する考え方のことなのですが、
これについてはまた別の機会で紹介します。
デザイン整理術でとても参考になるので取り入れておけばデータがすっきりし、誰もが使いやすいデザインデータとなります。
まとめ
ということで、ここまでで簡単に動きを確認できる骨格が出来上がりました。
全てのデザインを作った後に骨格を修正すると、工数もバク上がりするし世に出ないデザインを時間をかけて作る羽目になります。
この04.骨格のフェーズでしっかりとクライアントやチームと問題ないかを確認しあい、プロトタイプを触りながら課題があれば修正をして精度を高めていきましょう。
これで変更しなくて大丈夫そうだ！というところまで精度を高めて最後の05.表層のデザインに移れるとすっきりときれいなデザインが仕上がると思いますが、実際は開発が同時進行したり、仕様が行ったり来たりで変更したりと、、
なかなか思うようにスムーズにはいきませんが、初期の01.戦略、02.要件が固まっていれば後半のフェーズが大きくぶれることはないとおもいます。
関連記事
UXとは言っていても実際何をすれば良いの？〜01.戦略を定める〜
UXとは言っていても実際何をすれば良いの？〜02.要件定義〜
UXとは言っていても実際何をすれば良いの？〜03.構造設計〜
UXとは言っていても実際何をすれば良いの？〜04.骨格デザイン〜(OOUI)
UXとは言っていても実際何をすれば良いの？〜05.表層デザイン〜
もしこの記事が少しでも役に立てば、♡などいただければ励みになります。
この記事はBrewus,Inc.で開催した勉強会をベースに作成しています。Brewusではアプリ開発をはじめ、webやUI,UXについての取り組みも行っています。
この記事が気に入ったらサポートをしてみませんか？