1．概要

実際の業務に使用するアプリを開発しても、使われなかったら悲しいですよね？

昨今、UI・UX が重要視されますが、社内利用であっても同様に「使いやすさ」「わかりやすさ」は重要で、「ただ業務を詰め込んだモノ」では社内への浸透は難しいかもしれません。
しかし、急に「UI・UXに拘って作るように」と言われても戸惑ってしまう方が多いのではないでしょうか。

ここではUI・UXの理論を理解していただく内容ではなく、「どのようにデザインを進めていくか」といった、Unifinity Platform でのアプリデザインにおいて検討すべき内容を記載しております。
記事の内容を参考に、実際のアプリ開発の一助になれば幸いです。 

2．デバイスの考慮

Unifinity Platform は iOS、Android、Windows で動作しますが、「主に使用するOSは何か」「アプリは主にどのような画面（縦向き/横向き）で使用するか」を整理するのは重要です。実際のテスト実施時におけるデバイスの選定にも必要ですし、OSそれぞれの特異性を把握しながら開発に臨むと臨まないとではやはり開発効率に差が出てくるためです。

2.1.OSは何か

Android の場合 ・・・フッターメニューの表示／非表示

Android にはフッターメニューが表示されます。Unifinity アプリでも同様で、使用することも可能です。端末によっては画面内に表示がされているのではなく、デバイスのボタンとして付属しているモデルもあります。
開発するアプリは、iOS、Windows での運用も想定しているということであればAndroid独自の機能となるフッターメニューは「Application Player に戻る」用途以外には使用しない方針とするのが良いでしょう。

iPhone の場合　・・・ノッチエリアの考慮

iPhone X など、画面上部のカメラやセンサー類が画面に侵食したデザインになっています。
Unifinity Application の仕様上（2020年2月現在）、画面に侵食しているノッチエリアの自動判別が行えないため、あらかじめノッチエリアにはボタンなどを配置しない考慮が必要です。

Windows の場合 ・・・マウス操作の考慮、「メニュー」の表示

Windows で使用する想定のアプリの場合、iPhone や Android 端末と比べ、画面が広く、マウス操作も行えるため、モバイルと比べて情報量が多いデザインであってもストレスは少ないと考えられますが、あまりに入力項目が多すぎる（ように見えてしまう）と、利用者が敬遠してしまうため注意が必要です。

Unifinity Studio のプロパティから、「ナビゲーションバーの非表示」設定は可能ですが、アプリとしての見栄えが良くなる反面、「Application Player」に戻るための操作ができなくなるため、推奨はされません。社内の共有端末で、他にアプリケーションを使用する（据え置きの勤怠管理端末に使用する、など）想定がない場合にはナビゲーションバーを非表示とするのが良いでしょう。※

※補足

処理コンポーネントから「終了」ロジックを導入することで、ナビゲーションバーを使用する以外の方法も実装は可能です。

「Application Player に戻る」方法はOSごとに異なります。

• Android  ・・・フッターメニューの『戻る』ボタン（左ボタン）をタップ
• iOS 　     ・・・画面内の任意の場所をを指2本でタップ（専用のメニューが表示されます）
• Windows ・・・ナビゲーションバーから「アプリケーションを閉じる」をクリック

2.2.縦向きか横向きか

アプリを使用する際の考慮として、OSだけでなく、デバイス自体の考慮もしておく必要があります。

端的には 標準的なモバイル端末か、タブレット端末の使用、あるいはその両方かという点が検討事項ととなるでしょう。

特に、タブレット端末の場合は実業務に置いて、Bluetoothキーボードの併用など、横向きの利用シーンが多いため、事前に確認しておくことを推奨します。

Unifinity Studio では「縦向き用画面」「横向き用画面」をそれぞれ作成することが可能ですが、後に機能を追加していく際に二重の作業が発生するため、開発効率の観点からはあまり推奨されません。
できるだけ、どちらかの使用を考慮したほうが良いでしょう。

縦画面レイアウトの例

横画面レイアウトの例

3．メニューの整理

業務用のアプリにおけるメニューは「何を行うのか」 といった事の他、「どの順番で行うのか」といった整理が必要です。その上、業務は多岐にわたるため、言われるままに画面を作成した結果、複雑で使いにくいアプリが出来上がってしまった、ということも少なくありません。

モバイルアプリという、ある種の「制約」のもと、どのようにメニューを検討していくかを説明いたします。

不特定多数のコンシューマアプリの開発では「顧客体験」という抽象化されたコンセプトを形にするという点に重きが置かれ、UXデザイナーも交えた検討が必要になりますが、社内利用のアプリであればあまり難しく考えずに「業務が整理されているか」という事に注力するだけでも相応のアプリが出来上がります。

「制約」と記載しましたが、Unifinity Platformのアプリ開発においては「業務の整理をするために制約を有効活用する」という視点を取り入れていただくことで、メニュー配置を決定する近道になります。

メニューの種類は多数ありますが、この記事では基本的な2つ、メインメニューとサブメニューとして使用する「ボトムナビゲーション」と「ハンバーガーメニュー」について説明します。

3.1.メインメニュー

 iOS と Android では「メインメニュー」の配置や考え方に違い（iOSでは「Tab Bar」Androidでは「Bottom Navigation」）がありますが、Unifinity Platform はどちらのOSでも動作しますので「どちらかのOSに準拠すべき」といったガイドは行いません。

業務用のアプリにおいては「使いやすさ」「わかりやすさ」を優先すると良いでしょう。

考慮するのは「何をメインメニューとして扱うか」の検討です。

実際の業務とメインメニューの配置が合致していれば、それだけ実運用に沿ったアプリと言えます。

ボトムナビゲーションを配置する

ボトムナビゲーションはスマートフォンと相性の良いデザインとされており、業務用のアプリにおいても同様と言えます。整理されたメニューがボトムナビに並んでいれば、マニュアルがなくとも

「何ができるかが伝わる」

「何をするべきかが伝わる」

といったことが実現できます。
それだけ、

「何をメインメニューとするか」については「主要業務」かつ「並列の関係」にあるかが重要です。
例えば、「報告書の作成」と「経費の精算」はどちらも従業員が行う主要の業務で、前後関係のない「並列の関係」といえます。

業務のイメージがわかりにくければ、Windows でいうところの「フォルダの最上階層がメインメニュー」と考えると良いでしょう。

他方、「並列であればいくつ置いても良い」ということではありません。

数が多すぎるとわかりづらくなってしまい、かえって煩雑なデザインになってしまいますので、
一般的なアプリに見られるメニューと同様、5個程度に整理すると良いでしょう。

実際にUnifinity Studioで開発したアプリのボトムナビゲーション

3.2.サブメニュー

ハンバーガーメニューを配置する

 メインメニューだけでは収まりきらない項目や、画面によって異なるメニュー項目を配置したい場合はサブメニューへの配置を検討しましょう。

一例として『ハンバーガーメニュー』（画面左上の「≡」をタップすると表示されるメニュー）のレイアウト例を掲載します。

実際にUnifinity Studioで開発したアプリのハンバーガーメニュー例

3.3.サブフォームの利用

サブフォームを使用し、メニューのメンテナンス性を良くする

 メニューはほぼすべての画面に表示されます。そのため、【サブフォーム】コントロールでメニュー画面を表示させることで、メニューの改修が行われた際の影響を少なくすることができます。

4．色

業務用のアプリであっても「配色」は非常に重要です。
「何となく」や「思いつき」で色を決めてしまってはいないでしょうか。適当に色を使用すると、見た目が悪いだけでなく、使用においても混乱を招いてしまう事にもなりかねません。

開発の着手前に、あらかじめ色を決定しておくと、分担で開発をしても統一感のあるデザインを持ったアプリ開発が実現できます。

ここでは実際の配色の考え方について説明します。

4.1.全体の色

中心となる色を決める

まずは配色の方向性を決定するため、基本色を決定しましょう。
考え方としては

• コーポレートカラー 
• ブランドイメージ
• 使用する業務を想起させる色
• 使用する場所に応じた色

などが考えられます。

4.2.使用する色の数

一般的には以下のパターンが馴染みやすいとされており、業務用のアプリであっても同様といえます。

•  色の種類は2～3種類
• 文字の色を含め5～7色

実際に開発したアプリのカラーパターン

配色例

「単色」や「補色」など、配色に関する用語を覚え、WEBサイトやアプリのデザインを参考にすると良いでしょう。

単色

補色

類似色

アクセント

文字の色

業務用のアプリに置いては「見やすいこと」が重要です。したがって、背景色とのコントラストが強いほど文字がハッキリ見えますので、「コントラストを強めにする」と意識しておくと良いでしょう。

5．アイコンの使用

メニューは文字だけでなく、業務をイメージしたアイコンを置くと良いでしょう。
自力でデザインするのが難しい場合はフリーのアイコン素材を提供しているWEBサイトから探したり、有償のサービスでアイコン画像を購入するといった手段が考えられます。

アイコン画像を配置した例

6．配置

メニューとする項目や配色が決まったら、配置についても検討しましょう。
その際、一つの画面に詰め込むのではなく、等間隔の自動配置を利用し、適度なスペースを設けると、より洗練されたデザインになります。

6.1.空白の考慮-詰め込みすぎない-

 「各コントロールの間は最低でも ●●pt のスペースを設ける」といった定義はできませんが、以下の考え方を持ってコントロールの配置を行うと良いでしょう。

• 可読性を上げる
• 不必要な情報を取り除き、必要な項目だけにする

例えば認証画面のような「ID」と「パスワード」だけを入力するような画面では「何かアクセントを置いたほうが良いのではないか」といった不安を感じるようなことはないでしょうか。

上記の考え方と照らし合わせると、答えは「NO」であり、無理にコントロールやラベルを追加するのではなく、「必要な情報が適切な数量で置いてある」と捉えればよいということになります。

6.2.「表形式」の注意点

横スクロールは極力避ける

売上のデータや、顧客情報など、どうしてもカラムが多いテーブルをアプリに表示しなければならないケースがありますが、使いやすさを考慮した場合に、「スマートフォンで横のスクロールを行う」という操作は使いにくいデザインになりがちです。

Unifinity Platform では【サブフォーム】を使用してデータを縦に並べることで使いやすさが向上する場合がありますので、是非ご活用下さい。 

7．より良いデザインにするために

アプリのレイアウトについて記載して来ましたが、より生産性が向上するアプリ開発を実現するにはやはり「利用者の業務を理解する」ことが重要です。

「利用者の業務」を「理解」し、「理解した業務」を「適切な配色や配置で表現」がされたアプリは業務効率の向上に貢献するでしょう。そのためのポイントを以下に記載しますので、自分のスキル向上の参考になれば幸いです。

7.1.業務要件を整理する

7.1.1.アクターの整理

 まず、実際にアプリを使う人を整理しましょう。

例えば、ひとくちに「営業」といっても「外出が多いセールスマン」なのか「営業支援を行う事務員」なのかによって、要求される機能は違うものになるはずです。

7.1.2.業務の理解

いわゆる「ヒアリング」です。実際にアプリを利用して頂く方の声を聞く姿勢を持つことは重要です。
相手の業務を聞き、適切な質問を行い、得た回答をアプリのデザインに反映させることが出来ればそれは必ず優れたアプリと評価されるでしょう。

7.1.3.入力項目の整理

業務用のアプリはつまるところ「どこでも使えるインプット装置」です。

さらに突き詰めれば「報告用のツール」とも言えます。
入力項目を整理するということは「スピーディーに報告が行えるように整理する」と言っても差し支えありません。

入力項目が決まれば必然的に取り扱うデータが決まります。

まずは入力項目に過不足がないかを整理しましょう。入力項目が決定すればレイアウト・配置の変更は比較的容易なはずですので、利用者の生産性が向上するデザインになるよう、Unifinity Platform ご活用下さい。

7.2.感覚でデザインしない

7.2.1.デザインを理論化する

本記事を読んで頂きありがとうございます。まとめとしてお伝えしたいのは
「すべてのデザインには意味がある」ということです。今、ご自身が作っているアプリが、以下の項目が論理的に説明でき、アプリの利用者が納得してもらえるようになっていれば、それは素晴らしいアプリであると言えるでしょう。是非、チャレンジしてみて下さい。

• 利用者、利用場所の説明ができるようになっているか
• 業務フローと画面遷移が整理されているか
• 業務要件に沿った入力項目が揃っているか
• 色は整理されているか（色が持つ意味が統一されているか）