はじめてのUIデザイン_記事見出し

【読んだ】 はじめてのUIデザイン

Camel3

はじめに

最近、デザインのお仕事もしているエンジニアです。😎
先日読んだ UI デザインの初学者向けの書籍を紹介したいと思います。

もともと、電子版は持っていたのですが、坪田さんのこのツイートをきっかけに製本版をいただきました！ いただいた製本版は、社内用としてしっかり使わせて頂きます。ありがとうございます。🙇‍♂️


１．この本について

この本は、PEAKSさんのクラウドファウンディングによって出版されました。クラウドファンディングなので、支援者による最低購入数を上回らないと出版されないのですが 最速の４時間で📕出版が決定したそうです。

僕は、このデザイン初学者に優しい本のタイトルと超豪華な執筆陣を見ただけで、電子版をポチッと🛒即買いしちゃいました。😋

吉竹 遼 @ryo_pan
フェンリル株式会社にてスマートフォンアプリの企画・UI デザインに従事後、STANDARDへ参画。UIデザインを中心に、新規事業の立ち上げ・既存事業の改善などを支援。2018年に よりデザイン として独立後、THE GUILDにパートナーとして参画。著書に『UIデザイナーのための Sketch入門 & 実践ガイド』(ビー・エヌ・エヌ新社)など。

坪田 朋 @tsubotax
livedoor、DeNAなどで多くの新規事業立ち上げやUI / UXデザイン領域を専門とするデザイン組織の立ち上げを手掛ける。現在は、BCG Digital Ventures にてデザインシンキングを使って立ち上げた新規事業開発業務「Onedot」にCCOで参画しつつ、兼業でデザインファーム「Basecamp」を立ち上げてスタートアップの事業創出を支援。

池田 拓司 @tikeda
多摩美術大学卒業後、ニフティ株式会社、株式会社はてな、クックパッド株式会社のユーザーファースト推進部長・執行役を経て、現在はデザインアンドライフ株式会社 代表取締役 / 株式会社トクバイ 取締役。Sassを使ったUI Frameworkの構築、ウェブ・アプリなどサービスの設計、ユーザーを向いたデザイナーやサービス開発の組織づくりなども努める。著書に『スマートフォンのための UI デザイン』(SB クリエイティブ)など。

上ノ郷谷 太一 @tchkmngy
デザイナー。シックス・アパート株式会社、Orinoco Peatix 株式会社、クックパッド株式会社でプロダクト、サービスのデザインを担当。株式会社トレタではCDO (最高デザイン責任者) を務めた。デザインをプロダクト開発や制作といった、ものづくりに閉じず広くとらえ、デザイン・開発チー ムの構築・マネジメント、経営メンバーとして組織の運営にも携わる。

元山 和之 @kudakurage
名古屋市立大学芸術工学部卒業後、広告代理店の制作を経て株式会社はてな、クックパッド株式会社などでデザイナーとして勤務。現在はSpinners Inc.共同代表。iPhone/Android/Webなどを中心にアプリやサービスのUI/UXデザインに取り組む。必要に応じてサーバーサイドやフロントエンドやDIYも楽しくこなす。

宇野 雄 @saladdays
クックパッド株式会社 VP of Experience Design 兼 デザイナー統括マネージャー／UI デザイナー。全く新しいモノづくりではなく、すでにあるモノを新しい視点でとらえなおすデザインが好き。普段あたりまえに使っているものをさらに使いやすくすることで、新たな体験を生み出すことが一番のモチベーション。著書に『フラットデザインで考える 新しい UI デザインのセオリー』(技術評論社)など。

※プロフィールはイベントページから転載しています

全員がデザインの第一線でご活躍されているので、安心感しかありません。



２．目次から内容をみる

本を買うとき（特に、書店ではなくAmazonとかで購入するとき）は、よく目次をチェックしてから、内容を確認した上で購入することが多いです。

この書籍の目次を見てみると、UIデザインの変遷から基礎知識、UXデザインに関わるところまで、余す事なく網羅されていることが分かると思います。

１章　はじめに
　　１−１　なぜ今UIデザインなのか
　　１−２　この本で学べること
　　１−３　デジタルプロダクトにおけるUIデザインの変遷
　　１−４　UIデザイナーは何をする人なのか
　　１−５　UIデザイナーが関わるメンバー
２章　UIの見える部分を学ぶ
　　２−１　コンポーネント
　　２−２　ビジュアル要素
　　２−３　アイコン
３章　UIの見えない部分を学ぶ
　　３−１　UIデザインの前に
　　３−２　情報設計とは
　　３−３　ペルソナを動かすシナリオを作る
　　３−４　必要な要素を整理する
　　３−５　UIモデルを設計する
　　３−６　ペーパープロトタイピング
４章　UIが機能する環境を学ぶ
　　４−１　アプリケーションのデザイン
　　４−２　Webサービスのデザイン
５章　UIをデザインしてみよう
　　５−１　UIを作る（１）情報をUIに落とし込む
　　５−２　UIを作る（２）デザインツールについて知る
　　５−３　UIを作る（３）一貫性を意識してプロダクトの質と作業効率につなげる　　
５−４　UIを作る（４）具体的な製作プロセス
　　５−５　「UIデザイン」の意味を改めて考える
６章　UIデザインができたら　※挿絵などを省略をした簡略版が全文公開
　　６−１　体験をデザインする
　　６−２　開発者と連携する
　　６−３　運用を考える
７章　UIをデザインする前の心得　※一部有料で全文公開
　　　７−１　サービスを作る
　　７−２　サービスコンセプトの検証
　　７−３　サービスロゴ製作の心得
　　７−４　これからUIデザインを始める方へ

※書籍のサンプル(48ページも！)が公開されています。


サンプルを見て分かり通り、スマホ画面のスクショや図解が多く掲載されているので、初学者でも分かり易い内容になっています。



３．おすすめポイント

目次からは見えてこないおすすめポイントを紹介します。

１）参考サイトのリンク
本の至るところに、参考サイトのリンク先が記載されていて、他の書籍と比べても、紹介している参考サイトが多いなという印象を受けました。

また、製本版を読んでいても、QRコードをスマホのカメラで読み込むだけでいいので、興味あるところを気軽に参照できて良かったです。👍



２）iOSとAndroidの違い
初学者にとって、スマホの２大OSは認識しているものの、その違いをそれぞれの専門書籍で学ぶにはハードルが高く。。書籍全体を通して、この２大OSの違いをしっかりポイントを押さえて記載されています。

特に、このTwitterで紹介されている「各コンポーネントの名称と各プラットフォームの相関表」は、実務を進める上で、痒いところに手がとどく、そんな１ページだと思います。



３）デザインガイドライン
iOSとAndroidの違いには、それぞれAppleのHuman Interface Guidelines と GoogleのMaterial Designというデザイン思想の違いもがあります。

初学者がいきなり本家の👆ドキュメントを見ても、理解するのが難しいですが、本書ではそれぞれの内容について図解や事例と共に紹介されていて理解が深まりました。

４）やってはいけないデザイン
初学者が陥りやすいワナや、UIデザインをする上で「何をやってはいけないか」が具体的に紹介されていて勉強になりました。
　・ガイドラインと色彩 
　・キャンセルのキャンセル問題
　・"完璧"を目指さない
　・A/Bテストで陥りやすいワナ



４．心に響いたことば

普段、書籍を読み込むときは学びのあった箇所に赤ペンを引きながら読んでいます。今回、読みながら赤ペンを引いた箇所のほんの一部だけを抜粋して紹介したいと思います。（学びが多すぎて全部は載せきれません😆）

UXデザイナーは主に…プロダクトの前後まで含めたデザインやユーザーの行動や感情まで考慮したデザインを考える… - 吉竹さん
使用する国や文化の違いによって、色がどのように認知されているのかを把握して使わなければいけない… - 池田さん
デザイナーの役割はデザインの検討とデザインの伝達です。特にデザインの伝達は、要件とUIの架け橋となる存在であり、デザインの重要さを組織全体やチームのメンバーに理解してもらうためにも重要です。 / 上ノ郷谷さん
UIはコンテンツではなく、目的を達成するための使い方をサポートするもの… / 元山さん
デザインシステムには…（中略）「こんな世界を実現したいから、こんな課題を解決したいから、こういうUIになった」という意味が込められて、初めてUIデザインとして成立するのでしょう。/ 宇野さん
「あの人はセンスや感覚が優れている」と呼ばれている人も、生まれつきの才能ではなく、その分野の歴史や知識などの情報と蓄積した経験からベストな判断に導いています。/ 坪田さん



５．所感

表紙のデザインの通り、デザインを仕事にしていく中で  “進むべき道"  を指し示すコンパスのような本でした。

UI デザインを知識体系だけでなく、関係者との連携（ツール選定からコミュニケーション、ワークフロー）まで書かれているので、これからチームで仕事を進めていく上でとても参考になりました。

実践的な内容から心構えまで、これからデザインを実践していく人の必読書だと思います。

※電子版はPDFなのでフルカラー。製本版はモノクロだが、「２−２ビジュアル要素」の11ページだけはカラーになっていました。



６．最後に

UIデザインの次は、やっぱりUXデザインを学びたいところ。。

現在もUXデザイン関連の書籍は緑本を筆頭にいくつか良書がありますが、この『はじめてのUI デザイン』のように実践的な内容で、UXの第一線でご活躍されている執筆陣により『はじめてのUXデザイン』というタイトルで出版して欲しいなと思いました。

今、まさにUXが求められている時代ですが、
CXOとかCDOとか…映画の様にいきなりスーパーマンは生まれない訳で。。CXOの分身とユーザー体験に責任を持って実務をガシガシやっていく人に向けに１冊欲しい、いや、必要だ！と思いました。

それは、「UX デザインを体系的に学ぶための本が少ない」という課題感です。（☝︎吉竹さんのように言いたかっただけです。すみません。。）

 特に、スマホ・タブレットなどのデジタルプロダクトやAI・ビックデータ、ARといった新しいテクノロジーをキャッチアップしつつ、ユーザー視点でよりよい体験を作り上げるための本があったら、、またポチッと支援したいと思います。🤗

この記事が参加している募集

#推薦図書

43,872件

#買ってよかったもの

60,465件

この記事が気に入ったらサポートをしてみませんか？