スマホに映してリアリティのあるUIを作ろう
皆さん、こんにちは！Design Switchです🐻 前回は「UIの配色にも使える4つの配色の原理」について紹介しました。まだ前の記事を読んでいない方はこちらからどうぞ！
UIを作成することに集中し過ぎてしまい、ついつい忘れがちな実機確認 (使用される端末に映して作成したUIを確認する)についての記事を書こうと思います。作って満足しがちな自分にとっては極めて重要なことで、プロトタイプツールで画面を見るのとiPhoneなどの端末に映して見るのとではだいぶ違います。実機確認を行うことで、客観的にUIをレビューすることができリアリティのある実用的なUIを作成することができます。
実機確認しない時に陥る課題
普段UIを作成している時を想像してみてください。以下の画像はプロトタイプツールでUIを設計しているときのイメージです。
この時、アートボードを拡大縮小しながら細かくUIを設計してしまいがちです。その時の注意点として、細かいところに目が行きすぎて、UIを全体で俯瞰することができなくなってしまいます。この時点でフォントサイズが小さくなり過ぎてしまったり、無駄に余白をとってしまったりしてしまいます。
UIをスマホに映して実機確認してみよう
こちらも実機確認のイメージです。実際にスマホに映してみると、強制的にユーザー視点かつ俯瞰的に作成したUIを見ることができます。
これによって、フォントサイズの大きさ(これじゃ読めないかも)や余白空け過ぎて間延び感があるなど現状の課題点を洗い出すことができます。
実機確認する方法
FigmaやXD、Sketchなどのプロトタイプツールには実機で確認するためのアプリが存在します。スマホアプリをダウンロードしてアカウント情報を入力します。その後、実機で確認したいアートボードを選択するだけでスマホ上に作成したUIを表示させることができます。知らなかった人は是非試してみてください。※Figma Mirrorの使い方を以下の画像にまとめてみましたので使い方に迷った時は確認してみてください！
▼ iOS版 Figma Mirror
▼ iOS版 Adobe XD
リアリティのあるUIを作るために
OSのアップデートやアプリのアップデートのタイミングで参考になるアプリの画面キャプチャーを撮り、プロトタイプツールでフォントサイズや余白などを図ってみることをお勧めします。これによって、読みやすいフォントサイズや行間、美しい余白の比率などを知識として持つことができます。また定期的に行うことで、UIトレンドも追うこともできます。※ 例えば最近リリースされたiOS15など確認してみましょう🐥
試しに抽出した課題を改善してみました！左が修正前、右が修正後です。無駄な余白がなくなり引き締まった印象があります。「Online」のも文字も10→12ptへ修正しました。また、一度の画面で見れるコンテンツ量が増えスクロール回数も削減されました✌️
まとめ
🔳 実機確認しない時に陥る課題
プロトタイプツールでUIをデザインを行なっていると視点が細かくなり全体を俯瞰してみる機会が減ってしまう。それにより、UI全体のバランスが悪くなってしまったり文字サイズが小さくなってしまったりと様々な課題が発生する可能性がある。
🔳 リアリティのあるUIを作るために
・Figma Mirrorなどのアプリを駆使して実機に映してUIを確認してみる
・OSアップデートのタイミングなどで定期的に参考になりそうなUIのキャプチャーを撮り文字サイズや余白などを計測してみる
今回はリアリティのあるUIを作るための実機で確認することの重要性やその方法についてご紹介しました。実際にスマホで見てみると、プロトタイプツールで見るよりイメージと違うと感じた方も多いのではないでしょうか。実際に利用するユーザーは基本的にプロトタイプツールのUIを見るわけではないので、是非実機で確認してブラッシュアップをしてみましょう 🎃
🌟 現在ARCHECOではUIデザイナーを募集しています。ご興味のある方は是非こちらからご応募ください！お待ちしております。
🌟 Design Switchを運営している UX/UIデザイン会社 ARCHECOについて
この記事が気に入ったらサポートをしてみませんか？