関連サイト
本書の関連ページが用意されています。
内容紹介
『誰でもつくれる! UIデザイン入門』は誰でも「機能的で効果のあるUI」を作れるようになるためのデザイン解説書です。デザイナーはもちろん、さまざまな方にUIを理解しより良い関係を作ってもらえるような内容を目指しました。
デザインを学んだことがない方でも理解しやすいよう、UIデザインについての観点を要素分解しながら解説します。必要な観点を細かく噛み砕いて解説していますので、あやふやに理解している点を解像度高く理解できます。デザイナーであれば、複数案を作った時にどちらが良いか論理的に判断できるようになったり、エンジニアであれば、実装観点からのアドバイスをしたりするなど、個人開発にデザインの観点を活かせるようになるでしょう。
「機能するUI」を作るためには持って生まれた美的センスやバックボーンなど関係ありません。必要なのはUIの体系的な知識とそれに基づく判断基準だけです。本書を手に取ってくださった方が、UIを武器として使えるようになってくれたら嬉しいです。
1章「基本のキ編」では、UIデザインの基本について解説します。UIデザインとはそもそもどういったもので、良いUIとは何かを確認していきましょう。
2章「IA・レイアウト編」では、情報設計とレイアウトについて解説します。情報を整理したりそれをレイアウトに活かす具体的な手法を学んでいきましょう。
3章「オブジェクト・造形編」どんな要素を設置すれば最適なのかを悩む場合は、各要素の特性を把握していれば判断できます。造形も意味があることを学んで適切なものを選ぶようにしましょう。
4章「フォント・カラー編」適切なフォントやカラーを選択するのはなかなかに難しいことです。選ぶ時の観点や注意点を学び、適切なものを使用できるようになりましょう。
5章「レイヤー・アニメーション編」UIをうまく設計するためには画面上で階層構造があることを認識することが重要です。画面がうるさくなり過ぎる時には動きを利用するとUIをシンプルに保てるでしょう。
6章「これからの学び編」より良いUIを作っていくために、これから先どう学んでいくかが大切です。これまでの要点をふり返りつつ、今後に活かせる学び方を見ていきましょう。
今後UIデザインを学んでいく中でより分かりやすい区切りや視点を見つけたらみなさん自身でアップデートしてください。アップデートを重ねることで、UIデザインの知識がみなさんの実力に変わっていくことでしょう。
書誌情報
- 著者: ななうみ, かいわれ
- 発行日: 2020-07-30 (紙書籍版発行日: 2020-07-30)
- 最終更新日: 2020-07-30
- バージョン: 1.0.0
- ページ数: 192ページ(PDF版換算)
- 対応フォーマット: PDF
- 出版社: マイナビ出版
対象読者
著者について
ななうみ
山形県出身。フリーランスのUIデザイナー。独立前は制作会社でデザイン業務に従事後、同社の執行役員として従事。2018年10月より同人サークル「SIGNIA 」を立ち上げ、デザインの書籍を執筆していたところ、出版の声がかかり本書の書籍化に至った。情報を整理して構造化することが得意で、より多くの人にデザインの視点を持ってもらうことが目標。デザイン業務の傍らTwitterやYouTube、執筆活動を通じてデザインの情報を発信中。
かいわれ
フリーランスのイラストレーター / キャラクターデザイナー。ゲームアプリのキャラクターデザインや姫繰三六五などのプロジェクトに参加。可愛い女の子のイラストが得意で、オリジナルキャラクターや二次創作などのイラストを日々Twitterで公開している。
目次
1章 基本のキ編
- Section.1 UIデザインってなんだろう?
- Section.2 UIデザインを作る流れを確認しよう
- ・はじめてのUIデザイン
2章 IA・レイアウト編
- Section.1 レイアウトを作る準備をしよう
- Section.2 人間とシステムを理解しよう
- Section.3 レイアウトを組んでみよう
- Section.4 UIを見比べてみよう
- ・情報設計への気づき
3章 オブジェクト・造形編
- Section.1 オブジェクトについて学ぼう
- Section.2 オブジェクトの造形と意味
- Section.3 オブジェクトの機能・役割と特徴
- Section.4 オブジェクトを組み合わせてみよう
- Section.5 錯視の調整をしてみよう
- ・デザインを道具として使う
4章 フォント・カラー編
- Section.1 フォントを選んでみよう
- Section.2 フォントを学び使ってみよう
- Section.3 色を選んでみよう
- Section.4 色を学んでみよう
- Section.5 色を使ってみよう
- ・色への無頓着が生む悲劇
5章 レイヤー・アニメーション編
- Section.1 UIのレイヤー構造を理解しよう
- Section.2 レイヤー構造を使ってみよう
- Section.3 アニメーションの与える効果を学ぼう
- Section.4 アニメーションを使ってみよう
- ・人を知ること
6章 これからの学び編
- Section.1 これからも学び続けよう
- ・関係技術への理解を深める