これは読んでおかないと！ UIデザインの使いやすさと機能性にフォーカスをあてて詳しく解説したデザイン書 -UIデザインのアイデア帳
Post on:2025年4月25日
sponsors
※本ページは、アフィリエイト広告を利用しています。
WebサイトやスマホアプリのUIデザインで、見た目だけの美しさではなく、使いやすさと機能性にフォーカスをあてて詳しく解説したデザイン書を紹介します。
UIデザインのアイデアに困ったときに、ブラッシュアップさせたいときに、UIデザインの考え方から改善に役立つ知識やテクニックが満載の一冊です。
本書は、今週発売されたばかり！
著者はNRIネットコム株式会社のUI/UXデザイナーのお二人、これまでの経験を元にWebサイトとスマホアプリにおけるUIデザインの基礎知識から実務で役立つ知識やテクニックを一冊にまとめたデザイン書です。
Kindle版も同時発売されます！
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
本書は6章構成で、Webサイトとスマホアプリで良いUIを実現するために役立つ知識とテクニックが一冊にまとめられています。
第1章は、「UIデザインの基礎知識」基礎知識はこの章のみですが、UIデザインに必要な基礎知識と基本的な制作工程がコンパクトにまとめられています。
たとえば、UIにとって「見た目のよさ」は非常に重要で、機能によって最適な見た目というのもある程度決まっています。独自性を出し過ぎてしまうと、操作性が悪くなったり、ユーザーからの信頼感や期待感を失うことにも繋がってしまいます。
第2章はWebサイトやスマホアプリをデザインする最初の段階に全体的なビジュアルの方向性を考える「グランドデザイン」です。いきなりデザインを始めてしまうと、方向性がバラバラになってしまうので、このグランドデザインで方向性をある程度定めておきます。
グランドデザインの例として、「シンプルな信頼感のあるUI」「未来的、先進的なUI」「親しみやすい、かわいいUI」「スタイリッシュなUI」など、実例とともにどのようにグランドデザインを作るのか解説されています。
ここまでで全体の1/5くらいのページ数、そしてここから4/5がかなり具体的に実務で役立つ知識とテクニックが満載です。
第3章は「ビジュアルを改善するヒント」Webサイトとスマホアプリの印象を決めるUI要素、配色などをより良くするテクニックについて詳しく解説されています。
たとえば、余白や角丸の使い方によってUIの印象は大きく変わります。簡単な例だと、余白をたっぷり使うと簡単に使えそうなアプリに見せることができますが、配置する情報量が少なくなるため、スクロールや画面遷移が多くなります。
第4章は「UIを改善するヒント」テキストの文言、画面遷移の動線など、ディテール面からユーザーエクスペリエンスを向上させるポイントが分かります。
最近ではアニメーションを採用しているWebサイトやスマホアプリが数多くありますが、そのアニメーションが本当に必要なのか、必要な場所にアニメーションを取り入れているか、有効なアニメーションの使い方について学べます。
第5章は「レイアウトを改善するヒント」Webサイトにおける最適なレイアウト、スマホアプリにおける最適なレイアウト、視線の流れや情報のグルーピングなど、レイアウトを改善するテクニックが満載です。
最近のWebサイトやスマホアプリでは、スクロールは必ず検討が必要です。どこがスクロールされるのか、一部は固定した方がいいのか、スクロール領域をユーザーに伝えたり、検討すべきことはたくさんあります。
最後の第6章は「パーツを改善するヒント」この章がもっともボリュームがあります。ヘッダやフッタをはじめ、ナビゲーション、パンくずリスト、見出し、ボタン、テキストリンク、フォーム、タブ、カードなど、UI要素ごとにより良いUIを実現するためのテクニックが詳しく解説されています。
定義リスト、リストとカード、バッジ、モーダルダイアログ、ページャー、ステッパー、テーブルなど、使う頻度は多くないけどいざ使うときに役立つテクニックがよく分かります。
UIデザインのアイデア帳の目次
UIデザインのアイデア帳の目次
UIデザインのアイデア帳の目次
ここでは紹介しませんでしたが、各章ごとの終わりにあるコラムも充実しています。要件定義書でAIを活用する方法、各章の内容に関連してFigmaの使い方など、知っておくと便利なことばかりです。
最近のUIデザインに使用されているアイデアやテクニックが満載の一冊です！
献本の御礼
最後に、献本いただいたSBクリエイティブの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
