ワイヤーフレームアプリを利用して、出席登録用のスマートフォンアプリの UI の プロトタイプ を作成する。

https://www.fluidui.com/

fluiduiの紹介記事

■ 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/

の辺りを参照。