アプリデザイナーが気をつけるべきこと６選

2020年12月30日

株式会社Pentagon（ペンタゴン）の相田です。アプリデザイナーとして200画面ほどデザイン制作に関わってきました。

「アプリデザインをしているけれど、他のデザイナーはどんな点に気をつけているの？」と気になっている方も多いと思います。

本記事では、アプリのデザインを考える上でデザイナーが気をつけておくべきポイントをまとめます。

この記事の内容

私がアプリデザインをする上で気をつけていることは次の６つです。

それぞれ詳しく解説していきます。

１スクールおさめたい時は最小サイズの画面でデザインする

チュートリアルやウェルカムスクリーンなど、縦にスクロールせず1画面におさめたいデザインの場合は小さい画面サイズで作成しましょう。

iPhoneSEサイズのフレームで作成すると良いと思います。iPhone X など、大きいサイズのデバイスでデザインをすると、小さいデバイスに当てはめた場合に要素がはみ出てしまう可能性が高いです。

デザイン崩れしないよう、あらかじめ最初から小さいデバイスサイズ（iPhoneSEなど）で作成しておきましょう！

UI Stack とは、アプリのデザインをする上で考慮した方がいい「UI の5つの側面」をまとめたものです。

アプリは常に完全な状態ではなく、「エラーが起こったとき」「データがまだないとき」など様々な「状態」が発生します。アプリのデザインをする際は、「UI Stack」をもとにデザインをします。

上記のように、デザインをする際は各ステータスに応じた画面を作成しましょう！

理想状態に関しても、さらに分岐する必要があれば必要に応じて作成しましょう。例えば「文字数が○字以上になったとき」「データの個数が○個以上になったとき」など、データ量が一定数増えたパターンはあらかじめ考慮しておくと良いです。

特にメールアドレスの例をプレースホルダーとして表示させる場合、ドメインは「@example.com」を使用しましょう。「12345@gmail.com」などは実在する可能性があるため、避けましょう。

また、デバッグに参加する際なども、「テスト用だしいいか…」と「@test.com」などは使わず上記の「@example.com」を使用するようにしましょう！

RFC2606
".example" is recommended for use in documentation or as examples.

「アカウントをお持ちの方はこちら」など、アプリ起動時の入り口としてメインを新規登録、ログインフローは一つ奥の階層に、と整理する場合があると思います。

その際に「ログインはこちら」など重要なボタンを下線のみのボタン（タップのしやすさが低下するボタン）を設置すると、iOSアプリの審査に落ちてしまう可能性があります。タップ領域を確保したボタンを作成しましょう。

例えば「写真を投稿する」という機能があったとして、投稿写真として選択した写真を「やっぱり削除したい」ために、写真の右上に「✕」ボタンを設置したいことがあると思います。このようにどんな写真が選択されるかわからない場合、「いつでも✕ボタンが見えるかどうか」を確認しておきましょう。

具体的には、「極力白に近い写真」と「極力黒に近い写真」をどちらも用意してあてはめて、ボタンが視認できるかチェックすると良いと思います。例えば「白 = ベッドや白いお皿の写真」「黒 = 星空の写真」などです。

場合によりますが、入力フォームの上にタイトルがある場合は、プレースホルダーは具体的な値を入れておくと良いでしょう。

例えば、国名を入力してほしいフォームの場合は、下記のようにします。

特に、空港コードなどの特殊な記入方法、カタカナなど入力形式が決まっている場合などは具体的な値をあらかじめ示しておく方が良いでしょう。フォーム直下に注釈（「アルファベットで入力してください」など）を書くよりもユーザーは迷わず入力できると思われます。

デザインはエンジニアによって初めて「動くもの」になります。プロダクトをより良いものにするためには、開発チームとの連携が重要です。デザインの考慮不足によって開発チームが実装時に躓くことがないよう意識し、より快適なプロジェクトの進め方を目指しましょう。

＼スマホアプリ制作のご相談はこちら／ お問い合わせ