アプリの基本設計を行うときに知っておきたい画面パターン

by

iphone-g81d223e71_640

初めてブログ投稿させていただきます、株式会社イーディーエーの営業本部に所属し営業かつディレクターを兼務してます村木です。
初の投稿はアプリの基本設計に関する主にディレクター向けの記事を書かせて頂きました。

アプリに必要な機能が決まったら次に必要になってくるのがアプリの基本設計です。
基本設計とはWeb制作のワイヤーフレーム設計にあたりアプリの画面構成を決める工程になります。

基本設計で重要となってくるのが画面のイメージを固めること、以後の手戻りを防ぐためにも基本設計を関係者としっかり共有することが大事になってきます。

アプリの基本画面構成とは

まずはアプリの画面構成を考えてみましょう。
みなさんもスマートフォンをお持ちであれば様々なアプリをインストールされていると思います。

洋服をオンラインで購入するための店舗アプリであったり、ニュースを検索して読むためのニュースアプリであったりすると思いますが、どのアプリ画面にも同じような画面構造があります。

一般的なアプリは、ヘッダー、メイン、フッターの3つに分かれており、その役割は次のようなものになります。

pexels-cottonbro-5082579

1.ヘッダー

画面の上部に位置し、企業のロゴやアプリの名前などが掲載されているスペースです。
すべての画面において共通で表示されています。
また、ハンバーガーメニュー(「=」こういった記号アイコンのやつ)を使ってヘッダーに配置できない他の画面のメニューに遷移させることが多いです。

2.フッター

画面の下部に位置し、グローバルメニューやメニューバーとも呼ばれている部分です。
ホーム画面へ戻るボタンを設置したりユーザーに使って欲しい機能をアイコンなどを使って表現することが多いです。

3.メイン

アプリの主要部分です。
最初に表示される画面から下へスクロールする形で表示されます。

メイン部分の画面パターン

メイン部分にはいくつかの画面パターンがあります。
例えばとてもおいしい料理画像をユーザーに訴求したい場合は画像を大きく使うカード型のような画像パターンを使うと効果的です。
コンテンツ量(情報)が多い場合にはユーザーに検索をさせたり、ホーム画面にスプリングボード型の画面パターンを導入し情報を絞り込みしやすくするなど考えられます。

また決済アプリであれば支払い用のバーコードが最初のホーム画面に設置されているとユーザーの利便性が高まります。
そういった場合は最短で利用したい機能へたどり着けるタスクタイプのような型を採用すると良いでしょう。

zu

画面パターンが決まったら紙に描いてみよう

P8091295

画面パターンが決まったらまずは簡単なイラストで画面構成を書き出します。
どんなアプリでどの機能をどこに配置するか、またどの画面パターンを利用するのか紙に描いてみるとよりイメージが高まります。

アプリの基本設計をする際はある程度画面パターンを知っておき、画面構想を形にすることが大切になるのではないでしょうか。

Muraki
営業本部所属。SESにおける営業活動を中心にWebディレクターを兼務。
IT業界で20年以上、Web制作部門にてウェブディレクター、プロデューサーとして官公庁、病院、大学、旅行・観光、銀行、製造、不動産企業など多業種にわたるWebサイトの企画・提案、ディレクション業務を経験。
一番の趣味はカラオケ。好きな食べ物はラーメンとソーセージ。

Egg Device Application

東京品川のスマホアプリ製作・開発会社です。
一般アプリ業務用アプリからVRアプリまで開発可能。

求人情報

スマホアプリ製作・開発の
相談を受け付けています

メールでのご相談

お電話でのご相談
TEL 03-5422-7524
平日10:00~18:00