見出し画像

ノンデザイナーが使いやすい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デザインの基本です。

まず、「オブジェクトの一覧」をユーザに見せることから始まります。

画像1

オブジェクト指向デザインの参考サイト「Canva


「なんだ、そんなのふつうのことじゃないか」

と思ったあなた。

実は、システム開発の現場では、”ふつう”のことではないのです。

システム開発の現場では、歴史的に「タスク指向デザイン」でUIデザインされてきました。

タスク指向デザインとは、オブジェクト指向デザインの反対のデザインです。

■オブジェクト指向UIデザインの流れ
「オブジェクトを表示」 → 「オブジェクトを選択」 → 「アクション(登録、更新、削除 など)」

■タスク指向デザインの流れ
「アクションを選択(登録、更新、削除 など)」 → 「オブジェクトを表示」 → 「オブジェクトを選択」 → 「アクション」

いわゆる、ノンデザインーであるプログラマーが作る「使いづらくて、ださい」デザインは、「タスク指向デザイン」により作られてきたのです。

「オブジェクト指向デザイン」と「タスク指向デザイン」の概念を得た私は、自社のシステムのデザインを見直してみました。

すると・・・

「これ、全部タスク指向デザインじゃないか・・・」

顧客に「使いづらい!」とさんざん文句を言われてきたシステムたち、そのすべてがタスク指向デザインで作られていたのです・・・

銀の弾丸(オブジェクト指向UIデザイン)を手に入れた結果

銀の弾丸としての「オブジェクト指向UIデザイン」を手に入れた結果、デザイン作成やレビューにおいて、自分なりの基準を持つことができたため、迷いが少なくなりました。

デザイン会社に外注した画面デザインや、配下の人間が作成した画面をレビューする場合に、「オブジェクト指向UIデザインで作成されているか?」という観点で、レビューが行えるようになったため、以前よりもストレスを感じず仕事に取り組めています。

また、今後の取り組みになりますが、プロジェクトの「デザイン基準(画面デザインをする上で、パーツの種類やサイズ、画面サイズ等を規定する文書)」を作る際に、オブジェクト指向UIデザインの内容を含めておくことで、「使いづらくて、ださい」デザインを避けることができることを期待しています。

以上、「ノンデザイナーが使いやすいUIデザインをつくる方法」として、オブジェクト指向UIデザインの紹介をしました。

より詳しい内容を知りたい方は、「オブジェクト指向UIデザイン」をぜひ一読してみてください。


いいなと思ったら応援しよう!