02.モバイル端末用デザイン
ワイヤーフレームアプリを利用して、出席登録用のスマートフォンアプリの UI の プロトタイプ を作成する。
■ id 登録
大学のメールアドレスなど。パスワードは各自で設定。
fluidui の 無料版アカウントを利用する。
各種制限あり：
・アプリアイコン 固定
・スプラッシュ画面 固定
・プロジェクト数 １
・画面数 最大１０
練習課題：
・挑戦０
プロジェクト画面にデバイスの画面を配置する。（ダブルクリック または ＋ アイコン で作成）
利用するデバイスは スマートフォン タブレット OS など自由に選んでOK
・挑戦１
画像ファイルの upload
アプリ画面の背景などの素材画像をアップロードして利用する。
アップロードした画像を デバイス画面に配置する。
例）
名古屋文理大学コミュニケーションマーク
利用規定のページ 大学のロゴの原稿と利用規定が掲載されている。 windows の snipping tool などで切り抜いて保存して利用。
・挑戦２
画面にメニューを配置する。
例）
Mobile の iOS8 から Layout の項目： List View を選択して、画面に配置。項目の名称を適当に変更。
項目1 学籍情報設定
項目２ 出席登録
・挑戦３
メニューの項目を選択し、別の画面に遷移するリンクを作成する。
メニューの項目を選択すると、リンク作成アイコンなどが表示される。項目の文字の修正も可能。
リンクボタンを押し、他の画面へリンクを作成する。
デバイス画面と、ワイヤーフレームの画面遷移図の切り替え：
デバイスをクリックで画面表示、 画面表示から －（zoom outボタン）で 遷移図
■ 動作確認
Playボタン（緑の再生マーク） を押し、画面の動作状況を確認する。
Stopボタンで編集モードに復帰。
■ 動作の修正
リンクの矢印線 をクリックすると、画面遷移の アクション と 遷移のアニメーション の変更が出来る。
赤いボタン は、リンクの削除機能。
■ 画面の機能説明
画面で提供される機能を、メモで説明。
■ 実際のデバイスでの確認
PCの画面上では、タッチインターフェイスのアクションの動作具合を確認し難い（マウス操作なので）。
共有アイコンから、 動作確認用の QRコード や URL を取得し、 スマートフォンやタブレットでの動作を確認する。
■ 課題の作成と提出
名古屋文理大学で、講義・演習の出席登録と管理が学生にスマートフォンアプリとして提供されると想定し、
その、スマートフォンアプリの機能を ワイヤーフレーム で表現する。
※ Fluid UI の無料アカウントでは、プロジェクトの外部書き出しが出来ない。そこで、以下の手順で作業内容を記録して提出する。
作成した ワイヤーフレーム の モックアップ（動作するdemo） のQRコードの画像をキャプチャし
学籍番号QR.png で保存
作成した ワイヤーフレーム の図を キャプチャし
学籍番号WF.png で保存
キャプチャには windows の snipping tool を利用する。
レポートフォルダ→ モバイルシステム演習（小橋） に提出。 長谷川先生の モバイルシステム演習のフォルダと間違えないように注意する。
（参照）
ひとに優しいインターフェースを構築するには--「iOS」アプリ開発者に贈るティップス
http://japan.cnet.com/sp/businesslife/35022762/
ヒューマンインターフェースガイドライン apple iOSヒューマンインターフェースガイドライン
役に立つ UX/UI デザインガイドラインのまとめサイト
SF映画で学ぶインタフェースデザインを読んだ。面白いのでオススメしたい。
http://izm-11.hatenablog.com/entry/2014/07/27/211436
原著者のサイト
http://scifiinterfaces.wordpress.com/
次回予告
サンプルで学ぶTwitter Bootstrapの使い方
http://ascii.jp/elem/000/000/807/807712/index-3.html
Webサービス開発者のためのTwitter Bootstrap入門 ― 第1回
いまさら聞けない「Twitter Bootstrap」とは？
http://ascii.jp/elem/000/000/795/795948/
の辺りを参照。