アプリにおいて重要度の高いUI（ユーザーインターフェース）。
UIとは、『UIデザインの教科書』では下記のように定義されています。

ーーーーーーーーーーーーーーーーーー

UIとはユーザーインターフェースのことで「ユーザー」と「システムやサービス」との接点のことをさします。（中略）リモコンなどユーザーが直接手で触る部分、（中略）間接的に操作する画面中のリンクやボタンもまた同様にインターフェースです。

出典：(著)原田秀司『UIデザインの教科書』（2019年,翔泳社）

ーーーーーーーーーーーーーーーーーー

この説明の通り「UI＝接点」と捉えると、UIはアプリの世界観や機能をユーザーに届ける要素ということになります。

仮にECアプリで90％OFFのクーポンを配布していても、ユーザーが見つけにくい導線だったり、購入画面の使い方が複雑で離脱してしまっては、せっかくのプロモーションが活かせなくなってしまいます。

こうした機会損失をなくすためや、ユーザーが快適にアプリを利用し定着するために、良いUIにすることは大切だといえます。

ヤプリでは、フリーレイアウト機能を利用して画像やテキストを組み合わせてオリジナルのページを作成できます。

フリーレイアウト機能を使ってできるUIデザイン例を参考に、自社のアプリに最適な導線や見せ方を考えてみましょう。

<目次>

• カード型
• スプリングボード型
• タスク型
• スクロール型
• リスト型

 

【ヤプリでできるUIデザイン例】
Yappli PortにてUI別デザインサンプルをご覧いただけます。
お手元にYappli Portをご用意ください。
※Labo Yappliは2023年6月にYappli Portへリニューアルしました。

▼Yappli PortはこちらのQRコードからダウンロードしてください。

 

 

カード型：コンテンツやブランドの魅力を伝える

写真を引き立て、ブランドの魅力が伝わりやすい
小さな画面でも印象的に演出シンプルな構成で手軽な操作性

・キーワード
#ブランド訴求　#イメージ訴求　#トレンド　#手軽な操作性

 

スプリングボード型：機能やコンテンツを一覧で見れ、アクセスがスムーズ

1画面で様々な選択肢を表示
多様なコンテンツにアクセスしやすく、検索ではなく選択型のシンプルなUI

・キーワード
#一覧性　#機能的　#コンテンツが多

 

 

タスク型：ユーザーのタスク（目的）を最短導線で提供する

ユーザーが完了したいタスク(目的)を最短導線で完了できる
メリハリを出した合理的なデザイン

・キーワード
#機能的　#ツール利用　#最短導線

 

 

スクロール型：様々な切り口の情報をサクサク見られる

少ない動作で多様なコンテンツをサクサクと閲覧するこができる
コンテンツを見渡せる構造

・キーワード
#閲覧性向上　#隙間時間　#多様な情報コンテンツ

 

 

リスト型：日々更新される情報を一覧で見せる

日々更新される情報をピックアップして表示
コンテンツの内容を理解してから詳細を閲覧できるため、欲しい情報に効率的にアクセスが可能

・キーワード
#メディア　#情報が多い

 

 

まずは、アプリで見せたいコンテンツ、ユーザーの利用目的を明確にし、最適なUIパターンを組み合わせてアプリを作りましょう。