あやね
UIデザインツールを使用する時に、ショートカットキーや専門的な操作を習得しなくてはいけないと考えている現役デザイナーは多いハズです。
何十種類もある小技を覚えるよりも、まずはそのデザインは誰のために作るのか？を自問自答することで理想的なデザインに辿り着ける可能性はグンと上がります。2022年話題のUIデザインツール・Pixsoの機能をフル活用して完成度の高いUIデザインを完成させていきましょう。
1. UIデザイン開始時になぜ最初にフレームを決めなくてはいけないのか？
UIデザインツールをマスターするには、誰に向けてのデザインかをまず理解する必要があります。従来のUIデザインツールの使い方をインターネット上で検索した時に、まず最初にリードされるステップはデザインの枠組みの指定です。これは人気3大デザインツールであるAdobeXD、figma、Sketchでも共通して言える工程です。
なぜフレームから作成しなくてはいけないのでしょうか？良いUIデザインを意識するあまり、まずは誰に何を見てもらいたいのかを考えることで、理想的なUIデザインへの近道が見えてくるハズです。
1.1 レスポンシブデザインを取り入れているUIデザインが一般的
WEBページやアプリケーションなど、ユーザーとサービスを繋ぐ接点をデザインすることを総称してUIデザインと呼びます。数十年前までは、インターネットで世界中の情報を検索する時に使用されていたツールはパソコンのみでした。ですが現代ではパソコン・タブレット・スマートフォンなど様々なデバイスが通信環境を持っています。
画面表示に合わせたページ作成をツール毎に行うことは非常に効率が悪いため、画面の大きさに合わせて表示内容を変更するシステムをレスポンシブデザインと言います。レスポンシブデザインのデメリットは文字に合わせて拡大・縮小するため画像やデザインが崩れてしまうことがあります。
そのため多くのUIデザイナーは、文字・画像にそれぞれにルールを持たせるために、デザインで使用するパーツを個別で管理しているのです。
1.2 Pixsoでデザインを作成したらアセット機能・コンポーネント機能が便利
Pixsoのデザイン作成画面からキャンバスを起動した時も、従来のデザインツール同様に、フレームの設定から始めます。
Pixsoのデザインフレームは、スマートフォンでもデバイス毎に複数のフレームが用意されているため、表示されるデバイスの画面領域に合わせたUIデザインが可能です。またアセット機能やコンポーネント機能を使用することで、繰り返し使用するデザインをチーム内で共有することができます。
Pixsoは次世代のコラボレーションUIデザインツールのキャッチコピーから、リアルタイムで複数人のデザイナーで共同作業が可能な高性能のUIデザインツールです。繰り返し使用するデザインフレームを共有することで、チーム全体の作業効率を格段に上げることが可能です。
2. どこに何を配置するかはデザイナーのセンス？有効な配置関係と人間の心理効果
2.1 効果的なUIデザインを作成するには視線を誘導する人間の心理効果を利用
UIデザインのページレイアウトにはコツがあります。それは人間の視線誘導にはある法則性があるためです。分野としては人間の心理効果を利用します。
これが分かっていればページのどこに何を配置すれば、より効果的に顧客を誘導できるかが分かりますので、媒体ごとにパターン分けして解説をしていきます。
2.2 文字が横向きに表示されている媒体で使用されるZ型の視線誘導
Z型の視線誘導の特徴は、目に入る範囲から左上→右上→左下→右下といった順番に視線を持っていきます。この視線の行き先をなぞるとアルファベットのZになることからZ型の視線誘導と呼ばれています。
これは雑誌や広告など、文字の表現方法が横文字の媒体に使用されることが多く、スーパーやコンビニの売りたい商材を配置する際の順番にも応用されることがあります。
無意識な状態で人間が物を見ようとした時に、まず自身の目の高さから視線を置き、そのまま横に遷移してから下に移るため、まず一番最初に見せたいものを優先的に上部に配置すると効果的です。
ですがあまり上部に重要な要素を盛り込みすぎてしまうと、ページの下部まで視線を運ばれなくなるため、配置にはバランスが大切です。なぜこのような視線の動きになるかは、日本人が縦書きよりも横書きの文章に触れていることが多いためだと言われています。
2.3 新聞や小説などで誘発されるN型の視線誘導の特徴
N型の視線誘導の特徴は、右上→右下→左上→左下といった順番で視線が移動します。目線の誘導を線で結ぶと、アルファベットのNになるため、N型の視線誘導と呼ばれています。
このN型の視線誘導が主に使用されている媒体は日本の新聞です。日本の新聞はメインタイトルが右上に配置されていることがほとんどです。記事のタイトルはその記事を読んでもらえるかを左右する重要な役割を担っています。一番最初に見てもらうための内容を、右上に配置することで、記事に自然と誘導するページ構成となっていることが多いです。
ですが、現在のWEBや広告媒体、UIデザインのほとんどが横書きで表記されていることから、N型の視線誘導はそこまで重要視されていません。もしもデザインをする際に、縦書きのテーマを作成する時には有効な視線誘導となりますので、覚えておいて損はないでしょう。
2.4 WEBデザイン、UIデザインには必須となるF型の視線誘導の特徴
最後にF型の視線誘導の特徴を解説していきます。F型はパソコンやスマートフォンのWEBページに特化した視線誘導です。良質なUIデザインの基本となる視線誘導ですので、UIデザインでコンテンツを配置する時には、まずF型の視線誘導を意識してください。
WEBページを見ていきなり中段に遷移する人はほとんどいないハズです。このWEBサイトに書いてある内容が何かをページの冒頭に表記することで、ユーザーに対して興味付けを行います。ここでユーザーの検索意図と異なる内容が記載されていると、ページから離脱されてしまうため、どのようなWEBページにも少し大げさに記事の要約を載せているのです。記事の要約を理解すると視線は下に遷移していきます。タイトルを読み、次の文章や内容、そして下のページに進んでいく。
この視線の流れを線で結ぶとアルファベットのFになることからF型の視線誘導と呼ばれています。この法則はWEBページだけでなく、UIデザインにも共通する点が多く、アプリケーションを開いた時に直感的にユーザーに視覚的に訴えることが可能です。
UIデザインを作成する時にはF型の視線誘導を心掛ける必要があります。UXデザインの始祖である、DAノーマンも「ユーザーに考えさせないデザインを心掛けなくてはいけない」という言葉の意味が良く分かりますね。
まとめ
今回はUIデザインの基本となる視覚的効果をもとに、人間の心理から効果的なUIデザインを作成するコツをご紹介していきました。話題のデザインツール・Pixsoを利用して、リアルタイムでデザインを共有することで、より良い理想的なデザインに辿り着ける可能性が広がることでしょう。
