UIデザイナーは読んでおかないと後悔する良書！ 大規模サイト・アプリのUI/UXを作り込むテクニックや裏側まで詳しく解説 -銀行とデザイン
Post on:2023年1月20日
sponsors
3人のWebデザイナーがインハウスデザイナーとして、三井住友銀行のスマホアプリやWebサイトのリニューアルを通してデザインによるDXをどのように浸透させたのか、その経験が惜しみなく明かされた良書を紹介します。
「銀行」は自分とは関係ないやと思った人は間違いです。スマホアプリやWebサイトのUI/UXをユーザー目線で使いやすく洗練されたデザインにするテクニックなども詳しくていねいに解説されており、UIデザインの学びがたくさんあります。
一読するだけでなく、何度も繰り返し読みたくなる優れたデザインの解説書です。
3人の経歴は、金澤氏はフリーのWebデザイナーを経て制作会社に入社、金子氏は知人とWeb企画・制作、堀氏は企業でUIデザインを担当、そして三井住友銀行のインハウスデザイナーとしてUI/UXデザインを担当しています。
デザインの必要性や重要性を社内からどのように理解してもらったのか、スマホアプリやWebサイトのUI/UXをどのように改善したのか、そのプロセスやテクニックが裏側まで詳しくていねいに解説されています。
Kindle版も同時発売されています！
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
本書は5章構成で、1章と2章はSMBCがUXデザイナーを採用した理由・デザイナーとしてのプロジェクトへの関わり方など、リリューアルに入る前の段階です。チームとしてどのように始動したのか、よく分かります。
企業に対してどのようにデザインを浸透させたのかそのプロセスが興味深いですね。積極的にプロジェクトに顔を出してデザイナーとしての信頼を積み上げ、小さなことでも一つひとつデザインで改善していき、複数部署のトンマナを揃えて企業ブランドとしてデザインを統一し、価値あるサービスを生むための仕組みを作り出していきます。
第3章からは、三井住友銀行のアプリ・コーポレートサイト・SMBCダイレクト、この3つのリリューアルの舞台裏。この3章と4章がもっともボリュームが多いです。
まずはプロジェクトをどのような手順で進めたか。要件定義をおこなう前に、現状を知るために調査をおこない、ユーザーテストを実施しました。特に、目標までたどり着けたユーザーと途中で脱落してしまったユーザーを中心に評価し、画面構成ごとの評価をおこないます。
UIのデザインやビジュアルを変更する際の注意点として、「振り返るための軸」を作ることです。迷ったり、悩んだりするときには繰り返し振り返ることで、何をしたかったのか冷静に考えることができます。
第3章のメインともいえる、実際にどのようにUI/UXを改善したのかを少しだけ見てましょう。
「以前のサイト」と「新しいサイト」を比較しながら、何を改善するためにどのようなことを実施したのかが、ていねいに詳しく解説されています。
サイトに訪れるユーザーには、さまざまな属性の人がいます。たとえば、クレジットカードを使用する人とまったく使用しない人、お金を預けたい人と借りたい人、そういった人たちが持つさまざまな目的の情報を探せるようにナビゲーションを大幅に変更して再設計をしています。
また、サイトをのレスポンシブ対応は、スマホファーストに変更。ページのレイアウトも完全にスマホファーストで、デスクトップでも1カラムを基本にして情報が整理されています。
1カラムにすることで、たとえば注意文言については細かくエリア定義をおこない、コンテンツがしっかりと伝わるように整理します。ほかにも、UI要素の基本ルールを統一化したり、パーツごとにレベル感を持たせて優先順位をつけたり、さまざまな例が解説されています。
第4章は、デザインチームの今の業務としてデザインシステムが解説されています。簡単に言うと、OK例とNG例を具体的に示し、どういう場合にそのデザインを使用するか詳しくていねいに解説したものです。
たとえば、強調するときのテキストやボタンの使い方、コンテンツのレイアウトのパターン、アイコンの使い方など、他のWebサイトやアプリのデザインにも参考になるものばかりです。
本書のコラムも非常に勉強になります。ストーリーボードの作り方、サイトで使用するライティングなどを重点的に学べます。
銀行とデザインの目次
銀行とデザインの目次
銀行とデザインの目次
大規模サイトのリニューアルは私も何度か参画したことあるのですが、その時を思い出しながら読ませていただきました。一番の山場は、異なる部署が一同に集まっての初めてのミーティングですね。あの時が今までで一番緊張した場面でした。でも実際に手を動かし始めると、やりがいも多く、非常に充実した仕事でした。
大規模プロジェクトがどんな感じなのか、どうやって進めるのか、そういったことはもちろん、小規模でもUIデザインを改善するテクニックが詳しくていねいに解説されているので、かなり勉強になると思います。
献本の御礼
最後に、献本いただいたインプレスの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
