スタッフブログ

STAFF BLOG

アプリ開発日誌

2021.11.08

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

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

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

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

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

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

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

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

pexels-cottonbro-5082579

1.ヘッダー

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

2.フッター

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

3.メイン

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

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

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

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

zu

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

P8091295

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

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

BACK

お問合せ

イーディーエーに興味をお持ちいただいて
ありがとうございます!
スマホアプリに関するご相談、
お見積りや弊社へのご質問など、
お気軽にお問い合わせください。
担当者より折り返しご連絡させていただきます。

    お名前必須
    会社名
    メールアドレス必須
    電話番号必須
    お問合わせ種別必須
    お問合わせ内容必須

    アンケートにご協力ください。
    弊社サイトへはどのようにしてアクセスされましたか?

    個人情報のお取扱いに関する同意事項

    1.事業者の氏名又は名称

    株式会社イーディーエー

    2.個人情報保護管理者の氏名又は職名、所属及び連絡先

    個人情報保護管理者 小宮 保人
    Mail:[email protected]

    3.取得した個人情報の利用目的

    当フォームで取得した個人情報は、お問い合わせに関する回答のために利用し、目的外利用はいたしません。

    4.弊社が取得した個人情報の第三者への委託、提供について

    弊社は、ご本人に関する情報をご本人の同意なしに第三者に委託または提供することはありません。

    5.個人情報保護のための安全管理

    弊社は、ご本人の個人情報を保護するための規程類を定め、従業者全員に周知・徹底と啓発・教育を図るとともに、その遵守状況の監査を定期的に実施いたします。
    また、ご本人の個人情報を保護するために必要な安全管理措置の維持・向上に努めてまいります。

    6.個人情報の開示・訂正・利用停止等の手続

    ご本人が、弊社が保有するご自身の個人情報の、利用目的の通知、開示、内容の訂正、追加又は削除、利用の停止、消去及び第三者への提供の停止を求める場合には、下記に連絡を頂くことで、対応致します。

    株式会社イーディーエー 個人情報お問合せ窓口
    〒106-0032 東京都港区六本木7丁目14番23 ラウンドクロス六本木4F
    TEL:03-5422-7524 FAX:03-5422-7534
    Mail:[email protected]

    7.ご提供いただく情報の任意性

    個人情報のご提供は任意ですが、同意を頂けない場合には、第3項にあります利用目的が達成できない事をご了承いただくこととなります。

    8.弊社Webサイトの運営について

    弊社サイトでは、ご本人が弊社Webサイトを再度訪問されたときなどに、より便利に閲覧して頂けるよう「クッキー(Cookie)」という技術を使用することがあります。これは、ご本人のコンピュータが弊社Webサイトのどのページに訪れたかを記録しますが、ご本人が弊社Webサイトにおいてご自身の個人情報を入力されない限りご本人ご自身を特定、識別することはできません。
    クッキーの使用を希望されない場合は、ご本人のブラウザの設定を変更することにより、クッキーの使用を拒否することができます。その場合、一部または全部のサービスがご利用できなくなることがあります。