MENU
CLOSE
DESIGNWEB Edit : 2022.11.02 Update : 2023.09.08

デザインボードで、スマホアプリのUIの方向性を定めよう。参考となるギャラリーサイト

なぜスマホアプリにデザインが必要?

iphoneなどスマートフォンで機能するアプリは、生活の様々なシーンで人々が活用しています。
現在多様なスマホアプリが登場し、使い勝手が良くユーザに親しまれるアプリにするためにも、UIデザインが欠かせない要素となっています。

アプリデザインのUI/UXデザインとは



UI(ユーザーインターフェース)を最適なものにすることでUX(ユーザーエクスペリエンス)が向上し、コンテンツの質を高めることが可能です。

UIとはユーザーインターフェース(User Interface)の略で、情報をやりとりするための機械と利用者が接する部分を指します。簡単に言うと、操作画面や操作方法などの見た目や使い勝手のことです。

UXとはユーザーエクスペリエンス (User Experience)の略で、製品やサービスを使用する際に感じた印象や記憶などの利用者が得る体験のことです。

ユーザー体験であるUXの質を高めるためには、コンテンツのほかに、操作性や視認性などのUIの質も高める必要があります。両者ともにアプリのデザインをする際に考慮していくことが必要になります。以下のツイートがすごく分かりやすいです。

スマホアプリのUIデザイン制作に必要なこと

スマホアプリのUIデザインを検討する際に、まずはサービスの概要を把握する必要があります。
「どんなサービス?」「どんな機能がある?」をはじめ、構成(WF)、ターゲット、利用シーン、ペルソナを可視化すると、サービスの概要がみえてきます。

例:弊社で担当した、赤ちゃんを育てる親へ向けたアプリUIの概要

スマホアプリのUIデザイン制作に必要なこと
■制作前に必要な情報例
  1. サービスの内容
  2. 機能
  3. 構成(WF)
  4. ターゲット
  5. 利用シーン
  6. ペルソナ
  7. キーワード
 

デザインボード作成

次に、デザインの方向性を可視化し議論するため、ムードボードを作ります。
弊社で担当した赤ちゃんを育てる親へ向けたアプリデザインのムードボードでは、柔らかい雰囲気は決まっていたので、そちらに合わせてデザインボードをつくりました。

例:弊社で担当した赤ちゃんを育てる親へ向けたアプリのデザインボード

スマホアプリのUIデザイン・ムードボード01
スマホアプリのUIデザイン・ムードボード02
スマホアプリのUIデザイン・ムードボード03
スマホアプリのUIデザイン・ムードボード04
初回でのポイントは、文字のフォントやアイコンなどデザインをきっちり決めすぎないことです。
理由としては、方向性が決まったのちデザインをつくって検証していく過程で最適なものを選んでいった方がデザインのクオリティが高くなる事が多いためです。

デザインボードに乗せる事

デザインボードに記載することは、サービスによりより良い検討やコミュニケーションができるように考える必要があり正解はありません。
以下の中から必要なものをピックアップすることが多いです。

■デザインボードに掲載する情報例
  1. デザイン参考
  2. トンマナ言語化
  3. 写真
  4. 色味
  5. 雰囲気
  6. 模様パターン
  7. 参考ビジュアル
  8. キーワード


また、既存のもので近しいけど色味がすこし違うなと感じたものはその箇所を修正することもあります。
例えば、細かな違いですが以下例ではサービスのイメージにより近くなるように、提案時にはPhotoshopで赤みを落とす加工をしています。

デザインボード2

スマホアプリのUIデザインの参考を探す

方向性を決めていく際に参考になる、ギャラリーサイトをご紹介します。

アプリデザインをする際はすでに世の中に出回っており、UIとして優れていると評価をうけているアプリを参考にするのがおすすめです。なぜなら、すでに運用しているアプリはデザインも最適化されたものにしている場合が多いからです。
また、情報の見せ方の切り口などデザインの発想の幅が広がります。

Pinterest

Pinterest https://www.pinterest.jp/

アプリUIのみならず、Webサイトやチラシなど多種多様なデザイン参考の定番サイトです。

Behance

Behance https://www.behance.net/
クリエイターツールの定番Adobeが運営するクリエイター発信型のギャラリーサイトです。

Dribbble

Dribbble https://dribbble.com/
UIデザインに関する投稿が多く存在するクリエイター向けのSNSです。紹介での会員のため高クオリティのデザインを見ることができます。

スマホアプリのUIデザインで最も大切な視点

ユーザーの視点に立って考える

以下の画像はUXのとんち話のような例です。


アプリを利用するのはお客さんではなく、アプリを提供するユーザである事を念頭に置きデザインを考えましょう。
ユーザファーストを心がけることは結果的にサービスの成長にもつながります

KOHIMOTOでは、WebアプリケーションのUI設計なども承っております。お仕事のご相談は以下よりご連絡ください。

Yuka Fujimoto

美大にいた頃に画面ひとつで世界中の人と繋がれるWebサイトの機能性やデザインへ興味を持つ。インターンを経てIT企業へ就職し、そこで出会った小日向とKOHIMOTOを立ち上げる。実用的なサイトを追求するディレクター兼デザイナー。ラジオと焼き鳥がすき。