スマートフォン・アプリのデザインの制作実績を紹介しながら、簡単に制作過程を紹介する。
今回は簡易なプロトタイプまで制作し、主にデザイン制作時の基本サイズについて解説する。
スマートフォン・アプリに限らず、紙媒体のデザインでも、同一で異なるサイズのデザイン制作をする場合は小さいものから作るのが基本だ。
（追記：※以下図中の単位をptと書く部分をpxと誤って書いています。）
デザインの前提条件
参考資料として、要件定義書と、制作するアプリと同機能の既存アプリの提示と、制作する企業のキーカラー（緑色）が用意された。
要件定義書を読み込む。特に制作上、難しい画面遷移やUIパーツはない。同時にUXについても考える。既に要件定義は出来上がっており、今からUXを変更することは困難だが一応念のため。新規サービスだが、同種のアプリは既に多く存在し、私も普段から、同種のアプリを複数使用しているので、使いやすい部分、使いにくい部分を書き出した。
今回はコーディングの必要はなく、デザインのみ依頼された。
特にデザイン制作アプリの指定はないので、Figmaでも制作上問題はなかったが、Adobe XDで制作することにした。Figmaの場合、プロトタイプ制作の部分で機能面においてXDにやや劣るということ理由である。
画面サイズは、WEBでスマートフォン・サイトを作る時と同様、 iPhone 6/7/8 のサイズで作る。これは、iPhone版、Android版両方を制作する場合、アプリデザイン制作の標準作業サイズではないだろうか。余程特定のスマートフォン機種に特化している場合、Android版のみ作る場合は、もちろん別である。
Figma、Adobe XDの両アプリ共に単位の表記が特にないが、ptを単位としている。
ワイヤーフレーム制作
通常は、まず各画面のワイヤーフレームを作り、その後画面遷移や画面レイアウトを検討するが、今回は参考とする既存アプリが明確に指定されており、またスケジュール上制作期間が短いこともありワイヤーフレーム制作は省略した。
ラフデザイン制作
ラフデザイン制作に入る。参考とするアプリが明確なので、今回はワイヤーフレームがなくても可能であった。また制作期間が短いことも理由である。
UIデザインの基本
UIデザインの指針としては、AppleのHIG（Human Interface Guidelines）が有名である。UI設計のガイドラインなので、UIデザイナーであれば一読して置いたほうが良いだろう。以下は日本語での抜粋。
MicrosoftのFluent UIでは、デバイスごとに代表的なUIパーツが別れていて参考になる。ダークモードでのプレビューも簡単に確認できる。
Microsoftの設計とUIに関するドキュメント。
現在、主流であるGoogleのマテリアルデザイン。フラット・デザインをベースに、よりユーザーを主体に考えたUIデザインの設計方法。私もマテリアル・デザインを採用する事が多い。
上記は大手IT企業のデザイン・ガイドラインで参考になるのだが、大手が言っていることだから絶対的に正しいということではない。日々UIデザイン制作をしていると、必ずイレギュラーな部分や、ガイドラインに沿わない方が使いやすい部分が出てくる。最終的には制作者が個別に判断して、よりユーザーにとって快適な操作を経験してもらえるようなデザインを制作することが大事だ。
UIデザインの基本サイズ
様々な企業と仕事をしているが、スマートフォン・アプリのUIデザイン制作をする場合、2020年現在、制作基本サイズとして、iPhone 6/7/8の画面サイズ（375×667pt）を指定されることが多い。この機種の利用者が多いということもあるが、iPhone X（375×812pt）やiPhone 6/7/8 plus（414×736pt）を加えた、ほとんどのスマートフォン画面サイズを網羅した場合の最小サイズであるからである。
iPhone 6/7/8の画面サイズでレイアウトをすれば、Androidを含むほぼメジャーなスマートフォンでの表示に、ボタンを押すことができないなど、アプリ機能上の破綻がないからだ。
もちろんAndroidの特定の機種においては、表示に不都合が生じることがあるかもしれない。その場合は、あとからその機種に合わせて修正する。とくかく制作基本サイズを決めないと、デザイン制作は進まない。ここをはっきり決めないと、制作後ボタンを押すことができないなど、致命的な欠陥が発覚し、追加作業が増えるので重要な部分だ。
例えばここで、iPhone 6/7/8の画面サイズを375×667ptとしているが、正確にはこれはポイントと呼ばれる単位で、実際Ratina画面に描画されるサイズは、この2倍の750×1334pxとなる。
しかし、制作する段階では375×667ptで制作する。デザインカンプ制作後、コーディング時に画像を配置する場合は、その画像のみ画像解像度を2倍にして実際に描画されるサイズである750×1334pxで作る。スマートフォンの機種によっては3倍の場合もあるので、画像を配置する場合は、解像度を確認する必要がある。
想定される最小サイズで、レイアウトした例
想定される最小デバイスの画面サイズ iPhone 6/7/8（375×667pt）で、デザインしてみる。上図の場合、画面構成上1画面に全ての要素を配置し、ログイン画面という機能上、縦・横スクロールをしてはいけない。ユーザーにスクロールをさせずに、画面上にある全ての要素を1画面で見せる必要がある。
画面サイズが大きくなるのに連れ、左右のマージンが大きくなり、下部の空白が気になるが、ボタンを押すことはでき、テキストには読みにくい部分がないためデザイン上の破綻はない。あとはエンジニアの調整次第だが、最悪このままのデザインでも機能上・使用上問題はない。
この場合は、スマートフォンのネイティブ・アプリだが、WEBアプリの場合はXDなどでデザインを確認後、デザイナーがHTMLのコーディングにおいて、各要素をピクセル固定ではなく、%（パーセント）などの相対的単位によってCSSで左右のマージンを適切に設定し、下部の空白もFlexboxなどで埋めることができるだろう。
想定される最小サイズ以外のサイズで、レイアウトした例（NG例）
iPhone 12（390×844pt）を基本サイズとして制作した場合にはどうなるだろうか。当初想定した最小サイズのiPhone 6/7/8で表示すると、左右のマージンが狭くなり、さらに致命的なのは会員登録ボタン以下を表示するには、下にスクロールしないとならない。これはUIデザインとして破綻している。1画面で全てを見せないといけないからだ。
このままエンジニアにこのデザインを提出すると、このままコーディングするか、気の利いたエンジニアであれば、適切な配置にしてくれるかもしない。しかしそれはエンジニアの仕事ではないし、エンジニアにとっても余計な負担になるので、好ましくはない。
その他の各画面のデザインを制作
基本フォーマットを決めたら、XDのコンポーネントやリピートグリッドなどの機能を使い、効率的にどんどん作ってゆく。
ここでは特に難しいことはなく定石のレイアウトを行った。
プロトタイプ作成
今回プロトタイプの制作までは依頼されなかったが、ワイヤーフレームを作らなかったこともあり、念の為それぞれの要素機能と画面遷移の確認のためにも、簡易なプロトタイプを制作した。
その他必要な画面を制作した後、サイドメニューにはオーバーレイ、ボタン押下にはトランジションなどのアクションを設定しプロトタイプを完成させる。
今回簡易に作成したプロトタイプをXDのデスクトッププレビュー機能で確認。
完成
特に大きな修正もなく、数回のやり取りと修正を施してデザインは完成した。
まとめ ─ デザインは最小サイズのものから作るのが基本
スマートフォン・アプリのデザイン制作をする場合は、上述のように想定される最小サイズのデザインを基本にして作れば、上位サイズのバリエーションを制作する場合でも、デザインや機能が破綻することはまずない。
逆に大きなサイズを先に作り、後から同じデザインで小さなサイズのものを作ると、ボタンが入らない、文字サイズを小さくしないと入らないなど、ユーザビリティに関するデザイン上の破綻が起こりやすい。
実はこれWEBデザインでレスポンシブデザインを制作する場合や、紙媒体のデザイン制作にも共通するデザイン方法である。
デザイナーは常に小さなサイズから作ることを気にかけておこう。
WEBやアプリに限らず、日常にあふれているBad UIの様々な実例を画像入りで説明していて面白い本。
