ノンデザイナーが使いやすいUIデザインをつくる方法
本記事は、次のひと向け
・ノンデザイナーだけど、おしゃれで使いやすいUIデザインをしたい人
・ノンデザイナーだけど、UIデザインをレビューする必要がある人
本記事では、「オブジェクト指向UIデザイン」という本を参考に、自身がUIデザインをする上で、本当に役立った方法を解説します。
より詳しく知りたい方は、次の本をぜひ読んでみてください。
銀の弾丸 オブジェクト指向UIデザイン
ITエンジニアとして仕事をするうえで、プロジェクトにデザイナーが不在で、自身が画面のデザイン(UX/UI)をしないといけない場面はありませんか?
私は、Sier業界で十年以上システム開発に携わっていますが、社内にデザイナーがいないため、すべて自分でUIデザインをしています。
UIデザインを始めた当初は、「使いやすいUIデザイン」が分からず、次のような「デザイン入門書」やAppleやMSが出している「Human Interface Guidelines」を読んで勉強していました。
これらの本やサイトは、デザインの基本を学ぶ上では非常にタメになりました。
しかし、特にデザイン入門書は、あくまでポスターやLPを作成する際の「デザイン」の入門書であるため、システム開発にどう応用して良いか分からず、途方に暮れてました。
他人のUIデザインをレビュ―する際も、どう指摘して良いか分からず、「(直観で)使いづらいから直してほしい」、「パーツの種類がデザイン基準に合ってないから、直してほしい」等の、本質とは程遠い指摘しかできず、フラストレーションがたまっていました。
しかし、「お客様に使いやすいUIデザインにしたい」という気持ちはずっとあり、「何か良い本はないかな」と、定期的に探していました。
すると、2020年に「オブジェクト指向UIデザイン」が満を持して発売されたのです。
「オブジェクト指向UIデザイン?なんじゃこれ?オブジェクト指向プログラミングに言葉が似てるな・・・」
好奇心をそそられた私は、試しに読んでみました。すると・・・
「私が求めてたのはこれだ!!」
内容のスゴさに興奮し、最後まで読んだ瞬間には、思わず叫びだしていました。
IT業界には「銀の弾丸はない(何でも解決できる特効薬はない)」という格言がありますが、当時の私は
「これぞ、まさに銀の弾丸だ・・・」
と思わずつぶやいてしまったほどです。
オブジェクト指向UIデザイン(OOUI)とはなにか
オブジェクト指向UIデザインとは、ユーザの「目的のオブジェクト」を中心にデザインする方法です。
ユーザの「目的のオブジェクト」とは、例えば次のものです。
・「蔵書検索システム」の「本」
・「牛丼屋の券売機」の「牛丼」
・「自動販売機」の「ジュース」
簡単に言うと、「目的のオブジェクト(本、牛丼、ジュース など)」をまずは「一覧表示」してユーザに示し、そこから利用者に「アクション(選択、購入、キャンセル、削除 など)」を選ばせることが基本のデザインとなります。
オブジェクト指向UIデザインの例として、ブラウザ上で「デザイン」ができるサービスである「Canva」を紹介します。
Canvaでは、トップページに「デザインのテンプレートの一覧」を表示します。
デザインのテンプレートの一覧から、「テンプレート」を選択すると、「作成画面」に画面遷移し、テンプレートに沿ったデザインを作成することが可能です。
これが、オブジェクト指向UIデザインの基本です。
まず、「オブジェクトの一覧」をユーザに見せることから始まります。
オブジェクト指向デザインの参考サイト「Canva」
「なんだ、そんなのふつうのことじゃないか」
と思ったあなた。
実は、システム開発の現場では、”ふつう”のことではないのです。
システム開発の現場では、歴史的に「タスク指向デザイン」でUIデザインされてきました。
タスク指向デザインとは、オブジェクト指向デザインの反対のデザインです。
■オブジェクト指向UIデザインの流れ
「オブジェクトを表示」 → 「オブジェクトを選択」 → 「アクション(登録、更新、削除 など)」
■タスク指向デザインの流れ
「アクションを選択(登録、更新、削除 など)」 → 「オブジェクトを表示」 → 「オブジェクトを選択」 → 「アクション」
いわゆる、ノンデザインーであるプログラマーが作る「使いづらくて、ださい」デザインは、「タスク指向デザイン」により作られてきたのです。
「オブジェクト指向デザイン」と「タスク指向デザイン」の概念を得た私は、自社のシステムのデザインを見直してみました。
すると・・・
「これ、全部タスク指向デザインじゃないか・・・」
顧客に「使いづらい!」とさんざん文句を言われてきたシステムたち、そのすべてがタスク指向デザインで作られていたのです・・・
銀の弾丸(オブジェクト指向UIデザイン)を手に入れた結果
銀の弾丸としての「オブジェクト指向UIデザイン」を手に入れた結果、デザイン作成やレビューにおいて、自分なりの基準を持つことができたため、迷いが少なくなりました。
デザイン会社に外注した画面デザインや、配下の人間が作成した画面をレビューする場合に、「オブジェクト指向UIデザインで作成されているか?」という観点で、レビューが行えるようになったため、以前よりもストレスを感じず仕事に取り組めています。
また、今後の取り組みになりますが、プロジェクトの「デザイン基準(画面デザインをする上で、パーツの種類やサイズ、画面サイズ等を規定する文書)」を作る際に、オブジェクト指向UIデザインの内容を含めておくことで、「使いづらくて、ださい」デザインを避けることができることを期待しています。
以上、「ノンデザイナーが使いやすいUIデザインをつくる方法」として、オブジェクト指向UIデザインの紹介をしました。
より詳しい内容を知りたい方は、「オブジェクト指向UIデザイン」をぜひ一読してみてください。