UIデザイン アプリ仕様の設計方法・手順を実体験からまとめてみた

ここではアプリソフトUIデザインの作り方を個人的にまとめて紹介します。

この記事では主に

といった疑問を解決できます。

なので

という方はこの機会に是非一読してみてください！！

気になる箇所がありましたら、目次からジャンプしてもらうと効率的かと思います。

それでは始めていきましょうか。

アプリUIの仕様を決める

まずはどのようなアプリUIデザインにするのか、すなわち

を大まかなにラフとして書き出してみましょう。

今回は、ヘッダーとメインタイトル、メイン文が目立つようなレイアウトにしてみました。

ページ切り替えは「カテゴリー欄」を使用してページの紐づけを「プロトタイプ」設定から行うようにします。

また、ヘッダーにメニューアイコンを追加することで、いつでもTOP画面に移動できるようにしました。

メニューアイコンや、検索アイコンを常時ヘッダーに置いておくことで、画面操作に困ったときや、目的の画面へ切り替えたいときに非常に便利です。

今回は上図のように、メニューアイコンから

の3パターンをシンプルに配置して、目的ページへ移動しやすく設計しました。

アプリUIのイメージを決める

大まかなレイアウト、仕様が作成できたらアプリUIのイメージを考えていきます。

ここでのイメージとは

を表し、ユーザーの年齢層、性別を考慮した上でUIデザインします。

今回の例では、アイスThirtheen13ということで

を意識して作成しています。

もちろん、ターゲットの年齢層に応じて、アプリUIの色味も変えると効果的で

などと色味にも気を使うとより良いアプリUIが作成できると思います。

ただ、20代を超えた大人になると、色の好みが人それぞれでかなり変わってくるので正解はありませんし、上記の年齢別の色味も僕の主観イメージ色なので参考程度にしてもらえれば幸いです。

UIキットを入手する

アプリUIデザインをする上でもう一つ大切なことは、アプリUIで使用するアイコンの入手です。

簡単なUIデザインなら自分で作成することもありますが、既存のアプリUIデザインがある場合は既存デザインを利用した方がビジュアル面でもお得です。

Adobe XDでは、上図に示したように、ウィンドウ左上の横三本線から「UIキットを入手」→「ワイヤーフレーム」と進むと「Wires-Mobile.XD」と「Wires-Web.xd」のファイルが無料でDLできるサイトに飛ぶことができます。

LINEなどのメッセージアプリで使用したいアプリUIデザインから、Twitterでよく見るメニューウィンドウの設定（プロフィール、リスト、トピック、ブックマークなど）UIデザインなどを含む179種類のMobile用UIデザインがWires-Mobile.XDのファイルのみで使用できるようになります。

探すのが少し大変かもしれませんが、使用用途別にアートボードが分けられているので、とても使い勝手が良いので、DLしていない人は今すぐXDファイルを入手しておきましょう。

本格的にアプリUIデザインを開始する

ある程度仕様書が完成し、どのような画面遷移をしたいかのイメージできたら、実際にアプリUIのデザインを作成していきます。

各バーナーにあったアートボードの作成

下図のように、まずはTOP画面から、詳細（オススメ一覧）画面、各カテゴリー画面のデザインを作成していきます。

「詳細を見る」ボタンや「カテゴリー」ボタンなど必要なボタンは長方形ツールの角丸やリピートグリッド機能を使って作成しましょう。

店舗情報の地図などは、UIキットにサンプルがあるので、色味を変えて配置していきます。

また各カテゴリーごとに、今自分がどこのカテゴリーを見ているか分かるように、カテゴリーボタンに灰色の影を追加しました。

そうすることで、Webサイトでいう「パンくずリスト」の役割を果たすことができます。

また画像や文字などを配置するときは、UIデザインの原理原則に基づき「整列、文字の強弱、余白」に意識しながら作成すると見やすいアプリUIが作成できると思います。

～さいごに～

アプリUIデザインの作成手順や気を付けるポイントを実践を通して考えることで、しっかりと知識を定着できるようになると思います。

デザインの知識はインプット、アウトプットの回数を増やしてなんぼだと思うので、この機会にオリジナルのアプリUIデザインをしてみてはいかがでしょうか。

お疲れ様でした。