[書籍レビュー] UIデザインのアイデア帳

ある時、知り合いから「ホームページのデザインについて教えて欲しい」と言われましたが、何を教えていいかよくわからないという事がありました。 確かにホームページ制作をしていて、人から「いいデザインですね」と言われても、何がいいのかを論理的に説明できないということに気がついたんですね。 これは、自分がWebデザインに関して、経験値的に理解しているだけで、誰からも学んだこともなければ、体型立てて教えてもらったことが無いことに気がつきました。 そんな時、Amazonで評価の硬いUIデザインの書籍があったので、購入してみて、その本がすこぶる参考になったので、その本の読後レビューを書いておきたいと思います。 これからUIデザインについて勉強したいという人にオススメの書籍だったので、前向きに読んでもらえると幸いです。

レビュー

★★★★☆

満点にしようと思ったんですが、唯一無二というわけではないので、星４つ＋αぐらいの感じです。 とにかく、丁寧に解説が図解されているので、目で見て理解できる良書籍でした。 UIデザインって難しいと感じている人は、一度この書籍を読み終えて、改めてクリエイティブデザインについて考えてもいいかもですね。 Webデザインは、広告デザインや、POPデザインなどとは、別物というプロの人も多いと思いますが、 根本的なデザイン（カラーデザインや、バランスデザイン）などは、どれも同じ基本に基づいています。 どれかのジャンルを学んだら他にも生かせる要素はたくさんあるものなので、 ホームページのUIデザインを学習しておくことは、人生においてプラスになることは間違い無いでしょう。

この書籍から学べるポイント

ベストなUIの形状は90%決まっている

サイズの小さなスマホのデザインは、概ねスマホアプリで完成系が見て取れます。 使いやすいと思ったアプリの形状をそっくりそのまま真似るだけで、使いやすいアプリが作れます。 でも、クリエイティブデザインは、アイコンやら使用するイラストや画像、写真、動画など、無限のデザイン力が必要になるのですが、 それらを表示する形状でのUIデザインについて、この書籍では学べます。 よく見かけるUIというのは、使いやすい良いUIであると考えてもいいとのことです。 ちなみにこれは、デザインとアートの違いということですね。

ワイヤーフレームとプロトタイプ

画像やクオリティなどは二の次にして、どの位置にどの順番で、どんな内容を表示するのかというのをザックリと書き込んだものがワイヤーフレームです。 その次に、ある程度の動きや動作を作り込んだものがプロトタイプで、ここまでできるとほぼUIデザインの基礎が決まります。 その後、デザインの作り込みをして、実装をすれば、ホームページの完成という流れですね。

PCホームページとモバイルホームページ

スマートフォン（モバイル）でホームページを見たりアプリを操作する時は、タッチ操作で行いますが、 パソコンでホームページを見る時には、キーボードとマウスで操作することになります。 当たり前ですが、これらのデバイスの操作感には大きな違いがあり、ホームページ制作においても、それぞれの振る舞いについて熟知していなければ、使いずらい＝見にくい、ホームページになってしまいます。 具体的にいうと、パソコンは、横スクロールが苦手という事と、スマホは表示領域が小さいという点です。 これらを加味して、レスポンシブデザインや、サイズの調整を行う事に気を配る事が重要ですね。

Figma

Webデザインにおいて、便利ツールの代表格は、 AdobeのXDと、Figmaがあります。 XDは、有料で使う必要がありますが、Figmaは、ほぼ無料で使う事ができるため、フリーランスの方などは、Figmaを使う傾向が高いようですね。 ちなみに、Figmaの有料版は、XDに負けないぐらいの機能を有しているので、この書籍ではFigma推しになっていました。 アニメーションの作成方法や、色々なテクニックが書かれていて、使い方チュートリアルとしても参考になります。

レイアウトについて

デスクトップ、モバイルそれぞれのレイアウトセオリーなどが紹介されています。 ホームページの制作をした事がある人であれば、チェックの段階で気がつくような内容がまとめられているので、 この書籍をチェックリストとして制作物のクオリティ確認に使うというのもアリかと思いました。 細かなそれぞれのパーツの特性や、どうすればいいかというGoodBadパターンが書かれているので、初心者の人の参考になるでしょう。

リスト表示方法

お知らせ一覧や、何かしらのデータ表示の際に、かつてはテーブル表示一択だったのですが、 最近では、リスト表示、カード表示、詳細のモーダル表示など、どういう使い方がどういう場面でいいのかという解説が書かれています。 単なるホームページだけじゃなく、ツールやアプリケーションを作る時などにも役立ちますね。

パーツ

次のようなパーツについて、デザインも含めて細かく解説されています。

ヘッダ ナビゲーション パンくずリスト 見出し ボタン テキストリンク ドロップダウンメニュー インプット ピッカー トグルボタンとスイッチ タブ テーブル ページャー ラベルとチップ バッジ モーダルウィンドウ メッセージ トースト アコーディオン ステッパー ローディング

お腹いっぱいになりますが、ホームページを作るパーツをほぼ抑えてくれているので、辞書的に参考になります。

あとがき

あまり詳しい解説は書かれてませんでしたが、EFOについての内容も書かれていて、UXに関しても少し触れていました。 この書籍自体のデザインもよくできていたので、改めて、書籍デザインとしても楽しませてもらいました。 こうした商用デザインの知識って、めちゃくちゃ仕事で役に立つ事が多いので、読んだあとで、得した感がいっぱいあった読後感想でした。