UI改善・設計・デザイン・実装サービスのご案内

京セラ丸善システム・インテグレーション株式会社御中
UI改善・設計・デザイン・実装サービスのご案内
2014年9月3日
(c)Infosign Inc,
株式会社インフォザイン
1
会社概要
会社名
株式会社インフォザイン
設立
2001年2月21日
所在地
東京都文京区湯島2-31-1 湯島三友ビル
連絡先
03-5802-7531(代表)
(c)Infosign Inc,
2
Information x design
(c)Infosign Inc,
3
事業内容
• 教育デザイングループ
• 教育系デジタルコンテンツ企画制作
• ディビジョンハブグループ
• ECM
• UXグループ
• UI改善・設計・デザイン・実装
(c)Infosign Inc,
4
UI改善・設計・デザイン・実装 サービスメニュー
インターフェース設計
仕様定義支援
UI設計
ビジュアルデザイン
フロントエンド実装
組込サポート
検証評価
(c)Infosign Inc,
5
(c)Infosign Inc,
6
クリッカーを利用したフィードバック支援ツール
• プレゼンテーショントレーニング
• 講義振り返り
(c)Infosign Inc,
• 講義中のアンケート・ミニテスト
7
(c)Infosign Inc,
8
(c)Infosign Inc,
9
• 既存のクリッカーの動作をスマートフォン・
タブレット・PCで実現
• IE7
iOS,Androidまでを幅広くサポート
する必要
• インフォザインではWebアプリ部分のUI
設計・デザイン・フロントエンド実装を担
当
(c)Infosign Inc,
10
技術検証
iPhone5
XPERIA SO-02C
Garaxy S3
iPad mini
iPad3
どのような技術の採用が適切か、モッ
クアップの作成および実機での検証を
その上で、レイアウトフレームワーク
を決定
繰り返した
(c)Infosign Inc,
11
UI設計
技術検証の結果を踏まえ、UIを設計
(c)Infosign Inc,
12
デザイン
• ユーザーにボタンの押下感を伝
えるため、指からはみ出る「エ
フェクト」を実装
• ボタン色がカスタマイズ可能な
仕様のため、どんな色が指定さ
れても破綻が起きないよう配慮
(c)Infosign Inc,
13
実装
PC
iOS
• HTML5
• CSS3
• JavaScript
(c)Infosign Inc,
14
実装
PC
デバイスやウインドウサイズに依存しないアダプティブレイアウト
(c)Infosign Inc,
15
実装
PC
デバイスやウインドウサイズに依存しないアダプティブレイアウト
(c)Infosign Inc,
16
検証
Windows 8
Android
iPad
iPhone
(c)Infosign Inc,
17
検証
(c)Infosign Inc,
18
改善
• イベント発火のタイミング
• アニメーションの速度改善
(c)Infosign Inc,
19
サポート
インターフェース設計
• 納品して終了…というわけではなく
• 仕様変更・追加についても継続的に対応
(c)Infosign Inc,
20
UI改善・設計・デザイン・実装 サービスメニュー
インターフェース設計
仕様定義支援
UI設計
ビジュアルデザイン
フロントエンド実装
組込サポート
検証評価
(c)Infosign Inc,
21
フロントエンド実装
• HTML5
• CSS3
• JavaScript
バックエンド技術を理解した上での実装
(c)Infosign Inc,
22
ありがとうございました
(c)Infosign Inc,
23