Category · アプリUI

アプリUIのデザイン例とAIプロンプト

モバイルアプリのUI画面をWebでショーケースするためのAIプロンプト集。スマホフレーム内のUI、複数画面の並び、機能訴求のための見せ方を収録。

Designs002 Sectionアプリ画面 KeywordアプリUI

アプリ画面について

モバイルアプリのプロダクトサイトで最も重要なパート。スマートフォンのフレームの中にUIを表示し、機能や操作感を伝えます。複数画面を並べるコラージュ型、1画面を大きく見せるヒーロー型、機能ごとに切り替えるタブ型など、パターンは多様です。3台並べると1台あたりの幅は3分の1になり、金額や数値の桁が潰れます。中心に据えるべき数値が一つに定まるなら1台を大きく、機能が多岐にわたるならコラージュ型。3枚それぞれが別の機能を見せていることが条件です。

アプリ画面の構成要素 画面の役割を1つに絞る 1画面1目的。迷ったら分ける 親指の届く範囲 主要な操作は下側に置く タップ領域は 44px 以上 端末の枠を描くだけで 「アプリの画面」だと伝わる 紹介ページでは、実物の画面より「何ができるか」が先に伝わる構図を選ぶ
アプリ画面の紹介は機能の網羅ではなく、1画面ぶんの体験を見せるほうが伝わります。枠の中に入れる情報を絞ってください。

よく使われる場面

  • モバイルアプリのストア向けランディング
  • SaaSモバイルアプリのプロダクトサイト
  • ゲームアプリのプロモーション
  • Web3・暗号資産アプリ
  • 健康・フィットネスアプリ

成功のポイント

  • スマホフレームは内側の角丸・ノッチまで再現する
  • 複数画面は深度感のある重ね順で配置
  • 画面コンテンツは実際のUIに近づける
  • 影は柔らかく、距離は長めに
  • 横向き並べはアスペクト比を維持する

このカテゴリのデザイン

他のカテゴリ