注目キーワード
  1. Photoshop
  2. Python
  3. Raspberry Pi
  4. Arduino

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

  • 2020年6月6日
  • 2020年9月9日
  • Adobe XD

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

この記事では主に

taku

・アプリUIデザインの設計図はどんな感じなのか?

・画面切り替えパターンの具体例は?

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

 

なので

アプリUIを作ってみたい

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

 

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

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

アプリUIの仕様を決める

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

どのようなレイアウトにするのか

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

UIdesign-thirtheen-blueprint

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

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

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

overallview-cream

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

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

メニュー一覧

TOP画面へ

オススメ一覧へ

戻る

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

 

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

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

ここでのイメージとは

どのようなユーザー層を対象とするのか

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

 

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

ひんやり、冷たい色(白-水色のグラデーション)

 

若者に可愛いと思ってもらえ、大人の方が見ても派手だと思わない万人受けするデザイン

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

 

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

年齢別の色味

0~9歳の子供  薄い桃色など彩度が低く、明度が高い色

10代の子供   赤、青、緑など彩度、明度がともに高い色

20~30代の大人 濃い青色など彩度が高く、明度が中間よりの色

40~60代の大人 紺色など彩度が中~高、明度が中より低い色

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

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

 

UIキットを入手する

wireflame

アプリ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画面から、詳細(オススメ一覧)画面、各カテゴリー画面のデザインを作成していきます。

UIdesign-thirtheen

 

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

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

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

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

 

UIdesign-thirtheen2

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

 

~さいごに~

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

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

 

お疲れ様でした。

UIdesign-appcreate-xd
学びに関する情報をチェック!