FileMaker レイアウトの設計「画面を設計しよう」中級編（８章）

FileMaker公式テキスト中級編！！！

中級編では、
中級開発者として複数の利用者を想定してシンプルなカスタムAppを作成する
といった内容になります。

全１６章です。
前回は、７章『データと索引・格納』について学びました。
👉FileMaker 中級編（７章）

今回は、８章『画面を設計しよう』についての知識を学びます。

画面の設計

画面の設計

画面について設計作業を行います。
・要件定義と構造の設計
・ファイル、テーブル、フィールドの定義

これらの情報を参考におこないます。
これから設計するのは、構造ではなくて見た目の設計です。
・画面遷移
・画面内容
・画面の機能

以下を決定します。

必要な画面
項目やレイアウトオブジェクトの配置
画面の遷移
画面ごとの機能
画面の入出力項目
画面に共通のこと

※ユーザは、画面を通してデータを入力、出力します。
カスタムAppの使いやすさはこれで決まります！とても重要です。

ユーザインターフェース

UI　>>> 一般的に画面のことを「UI（User Interface）」と呼びます。
ユーザが持つ接点（Interface）だからです。

↓↓↓その決定についてはいくつかの手段があります。

UX　>>> 「UX（User Experience）」という考え方があります。これはユーザの体験（Experience）のことです。ユーザが体験して使いやすいなどと考えることに従ってUIを改善していくことです。

HCD　>>> UX の他に「HCD （Human Centered Design）」という言葉もあります。
ユーザと限定せずに更に広く「人」がどう感じるかを中心に改善することです。

これらは、カスタムApp の開発工程でプロトタイプモデルを実践すると取り入れられるものです。
ユーザにデザイン案（プロトタイプ）を見せて（場合によっては使ってもらって）感想や意見を集めて改善のための参考意見とします。

ユーザーに意見をもらうことで新しいアイディアを検討しなければならない場面が出てくるかもしれません。これまでのことと照らしあわせて、

・企画で決定した目的に必要かどうか
・各種の設計にどのぐらいの変更点が発生するか
・スケジュール影響無いか

などを視野に、慎重に考えなければいけません。
また、意見を聞く対象も的確に選ぶ必要があります。（内容に偏りが出てもいけない）

画面の役割

画面の色やデザイン、各オブジェクトの配置について、決定に時間がかかることがあります。
オブジェクト位置の微調整よりも、全体を決めることを優先させます。

＜画面設計の役割＞
・見た目の表示と操作を提供する
・機能を実行して結果を提供する

＜画面設計で考えること＞
・その画面では「なに」を入出力するか、そのために「どのような」機能が必要か

＜設計で考慮する要素＞

画面サイズ
パート設定
ホームメニュー
デバイス

画面を考える（画面サイズ）

FileMaker Pro では様々な工夫ができる得意な分野です。

※今回はレイアウト作業に入る前に画面について考えます。

●画面の一覧を作る
最初に、最低限必要な画面を書き出していきます。
どの業務でカスタムAppを使うか。それはどのような画面が良いのか。を考えます。

●画面の大きさを想定する
企画時にクライアントの種類も決めているはずです。概ね4 種類のいずれかです。
・パソコン
・ iPad
・ iPhone
・その他

※レイアウトモードには、パソコン、iPad、iPhone について標準的な画面の大きさの目安となる「画面ステンシル」機能が用意されています。カスタムサイズも登録できます。

クライアントが使用する画面の大きさを考えて画面サイズを決定します。

＜パソコンの考慮＞

・画面いっぱいに表示したいのかどうか
・他のアプリケーションも参照しながら作業したいのかどうか
・クライアントパソコンの画面（モニタ）サイズは1種類かどうか

※デスクトップパソコンとノートパソコンが混在する場合、小さいサイズの画面で使用するユーザに配慮します。

＜iPad やiPhone の考慮＞

iPad とiPhone が混在している場合、共通の画面を作成するよりも、それぞれの画面を作成するようにします。また、縦、横、どちらで使うことを想定するかを決定しておきます。

画面の配置を考える（パート設定）

画面（レイアウト）上に実際になにをどこに置くかを考えます。

●レイアウトの種類とパート
レイアウトには「パート」があり、レイアウト上で一番大きな項目配置の区切りになります。これを基準に配置を考えていきます。

＜フォーム形式＞
ヘッダパート
ボディパート（１レコード）
フッタパート

＜リスト形式＞
ヘッダパート
ボディパート（複数レコード）
フッタパート

ワイヤーフレーム　>>> なにをどこに配置するかだけを考えるときに使用します。手書きでも、図が描けるアプリケーションでも作成できます。

●画面の構成の考え方

フォーム形式かリスト形式か（パートで一番基本の画面構成が決まる）
どこになにを配置するか
レイアウトオブジェクトはなにを使うか

※フォーム形式のレイアウトに、データの一覧と一覧から選択した1件ずつのデータ詳細を一緒に表示することを想定した画面を「マスタ/ 詳細レイアウト」と呼びます(フォーム形式とリスト形式が合わさったもの)
そういったレイアウトも可能です。

モックアップ　>>> ワイヤーフレームでの大まかな配置を、さらに詳細に考えること。
↓↓↓下記について

・項目
・機能（ボタン）

画面遷移を考える

画面がユーザに表示される順番を決めるのが「画面遷移」です。

これまでに考えた画面を、流れやツリー構造の側面から見てユーザがどのように行き来するのかを、図にして整理します。

画面遷移図、ワイヤーフレーム、モックアップを確認しながら、業務の流れの中で、どの画面を使用するのかを検討すると。。。
↓↓↓
・画面ごとに必要な機能
・画面ごとに必要な入出力項目

が分かってきます。

メニューやホーム画面（ホームメニュー）

画面遷移図を作ることでホーム画面が必要だと分かりました。
『起動時に表示される画面』のことです。

＜ホーム画面の考慮＞

・遷移したときのレイアウト（TO）の対象レコードがどうなるか
・画面にポータルを多数配置すると表示が遅くなることがあります

このような点に考慮して、より効果的なカスタムAppになるように画面設計する必要があります。

モバイルデバイスの画面（デバイス）

iPad やiPhone などのモバイルデバイスのFileMaker Go からの使用を想定する場合
の画面レイアウトを考える必要があります。

パソコンのマウスやtabを使って操作する場合と、iPhoneを指で操作する場合では
使い方を考慮して別々の画面を作成する必要があります。

画面に共通のこと

以前画面は大きく分けて３パートに分かれており、それを基準にワイヤーフレームや、モックアップを考えていくと説明しました。

さらにいくつかのパートを指定することが可能です。

●ヘッダ要素
画面遷移や画面の機能ボタンを配置するための要素です。

さらに細分化して、画面遷移のための
「ナビゲーション」
「機能や画面名、ユーザの目に入って欲しい文言（○○を ×× してください）」
の2系統のパートにより配置できます。
つまり、「上部ナビゲーションパート」と「ヘッダパート」を使い分けることが可能です。

なにも配置しないこともありますし、ヘッダを使用しないこともあります。

上部ナビゲーションパート
画面の一番上に表示され（順番は変えられません）、レイアウトのナビゲーションに使用する[ボタン]などを配置するパートとして使用されます。1つのレイアウトに１つだけ設定できます。

・このパートは画面をスクロールしても位置が変わりません。
・ズームコントロールの拡大と縮小の影響を受けません。
・印刷もされません。

●ボディ要素
主にレコードの表示場所となります。
必要に応じてヘッダやフッタが無いボディだけの画面、逆にボディが無い画面をつくることもあります。

●フッタ要素
ヘッダ要素に配置するものをあえてフッタ要素に配置することがあります。
例えば、普段はユーザが意識する必要がないハウスキーピングフィールドの情報を小さい文字で表示したりします。
なにも配置しないこともありますしフッタを使用しないこともあります。
ヘッダ要素と同じように下部ナビゲーションパートとフッタパートを使い分けることができます。

下部ナビゲーション
画面の一番下に表示され（順番は変えられません）ます。
上部ナビゲーションと同じ特徴があります。

●ポップアップメニュー
左上または右上にあって、ボタンのようなオブジェクトをクリックするとポップアップメニューが表示されます。画面名やメニュー名を選択すると遷移します。
上から順に「ホーム」、「移動可能な画面1」、「移動可能な画面2」……のように並びます。

●ポップオーバー
左上または右上にあってボタンをクリックするとポップオーバーが表示さます。
そこに画面遷移のボタンが表示されます。クリックすると遷移します。

●その他
カスタムメニュー、ポップオーバー上にポータルを置いてポータルフィルタを使用、カードスタイルウインドウを利用など、工夫できることが色々あります。

※もう１つ、ホーム画面に戻るかどうかです。
「１つの作業が終わったら次の作業へ」というようにホームに戻らず作業を行う方法もできます。
しかし。。。

ユーザがいまどこにいるかがわからなくなるかもしれません。
まずはホームを中心に各メニューを行き来するほうがシンプルです。
その後にメニューの横断による遷移を考える方が確実です。

以上で８章は終わりです。

次回は９章「レイアウトツール」について、レイアウト方法について学習していきます😁