Embed Size (px)
Citation preview
W bサイトをスWebサイトをス
手法教手法教
～タッチUIを意識したス
株式会
ITソリューシ
フレックス・ファーム
© 2011 KSK Co., Lt
マホ最適化するマホ最適化する
教えます教えます
スマートなコンテンツ開発～
会社KSK
ション事業部
ム ビジネスユニット
d. All rights reserved.
効率的なスマートフォ
fitのごx-fitのご
© 2011 KSK Co., Ltd.
ン最適化サイト開発
ご紹介ご紹介
Page 1Page 1All rights reserved.
スマートフォン最適化サイトを作成
■ タップしやすく
■ なるべく多くの情報をいっぺ
■ 横表示を意識する
■ 縦に長すぎは禁物
■ ンテンツサイズに注意■ コンテンツサイズに注意
■ フォ ムを入力しやすく■ フォームを入力しやすく
■ パフォーマンスの最適化
© 2011 KSK Co., Ltd.
■ パフォ マンスの最適化
スマートフォン最適化サイトの特徴①
成する上でのコツ
ぺんに読み込ませる
Page 2Page 2All rights reserved.
イメージ
カルーセルカルーセル
ブロック
リンクリンク
カルーセル
動きのあるコンテンツでデザインを
© 2011 KSK Co., Ltd.
動きのあるコンテンツでデザインを
スマートフォン最適化サイトの特徴②
※最適化サイトの 例です※最適化サイトの一例です。
x-fitならびに弊社とは関係ありません。
ブロック
リンク ブロック
リンク
カル セルカルーセル
ジャスティ
カルーセル
ファイ
を工夫する！
Page 3Page 3All rights reserved.
を工夫する！
効率
従来 左のようなコンテ
HTML
３つの異なる言
構築構築しなけ
た たこれだけの ドをHT
© 2011 KSK Co., Ltd.
たったこれだけのコードをHT
率的なスマートフォン最適化サイト開発
テンツを作成するために
CSS JavaScript
言語を別々に定義し
ばければならない
TMLに定義するだけで完成！！
Page 4Page 4All rights reserved.
TMLに定義するだけで完成！！
効率
x-fit フレームワーク
© 2011 KSK Co., Ltd.
率的なスマートフォン最適化サイト開発
Page 5Page 5All rights reserved.
P サ バ WEBサ ビ
効率
Proxyサーバ ＋ WEBサービ
iPhone，Android スマートフォン
全機種に対応
Proxyサーバ・HTML+CSS+
の動的生成
タグ/画像変・タグ/画像変
・機種判別
・新機種自動対新機種自動対
HTML5
CSS3
© 2011 KSK Co., Ltd.
JavaScript
ドビ ダ
率的なスマートフォン最適化サイト開発
スのコードビルダー
コードビルダー
・独自タグ出力
・設定値入力支援
コードビルダー
設定値入力支援
・UI部品作成プレビュー
+JavaScript
変換お客様
Webサーバ
変換
対応
HTML内に挿入
対応
JSP/PHP/ASP etc.
ペ ジテンプレ ト/CMS
HTML内に挿入
Page 6Page 6All rights reserved.
ページテンプレート/CMS
fit向け入力 の デ
効率
x-fit向け入力ソースのコーディ
作成したいUIを選
択択
© 2011 KSK Co., Ltd.
グ支援
率的なスマートフォン最適化サイト開発
ィング支援[ブラウザから利用するWEBサービス]
リアルタイムに反映パラメ タや要素を リアルタイムに反映
するプレビューパラメータや要素を
指定する設定画面
生成された
x-fit独自タグx-fit独自タグ
CSSも
自動生成
Page 7Page 7All rights reserved.
自動生成
x-Travelサ
© 2011 KSK Co., Ltd.
デモサイトの紹介
サイトデモ
Page 8Page 8All rights reserved.
複数のメニューを開閉させる
ボックス表示
スマートフォンサイトのスマ トフォンサイトの
特徴的なリンク表示
© 2011 KSK Co., Ltd.
x-fitで作成可能な部品一覧①
Page 9Page 9All rights reserved.
複数の画像をスライドショー
できる表示
タッチUIの操作性を考慮したタッチUIの操作性を考慮した
押し安いチェックボックス
© 2011 KSK Co., Ltd.
x-fitで作成可能な部品一覧②
Page 10Page 10All rights reserved.
機種の画面サイズ毎に
レイアウトを最適化させる
機種の画面サイズ毎に機種の画面サイズ毎に
画像サイズを拡大・縮小
© 2011 KSK Co., Ltd.
x-fitで作成可能な部品一覧③
Page 11Page 11All rights reserved.
機種毎の画面の幅に合わせ
コンテンツを均等に配置
タッチUIの操作性を考慮したタッチUIの操作性を考慮した
押し安いラジオボタン
© 2011 KSK Co., Ltd.
x-fitで作成可能な部品一覧④
Page 12Page 12All rights reserved.
左右どちらからもスライド
するカルーセル
コンテンツの縦長防止コンテンツの縦長防止
開閉可能なコンテンツ
© 2011 KSK Co., Ltd.
x-fitで作成可能な部品一覧⑤
Page 13Page 13All rights reserved.
ズ
x-fit Ver1.0 対応機種
■ iPhoneシリーズ
iPhone 3G / 3GS /
■ Androidスマートフォ
以下のOSを搭載す
Android OS 1.6 / 2
※タブレットは対象外
※WindowsPhone７ BlackBerryは
© 2011 KSK Co., Ltd.
※WindowsPhone７、BlackBerryは
対応機種のご紹介
/ 4 / 4S
ォン
するすべての機種
.×
対象外
Page 14Page 14All rights reserved.
対象外
スマートフォン最適化サイト
マークアップエンジニアには
テスト工数の削減
タッチUIの再現性・再利用性の確保
UIを探す手間の軽減UIを探す手間の軽減
JavaScriptのブラウザ差異の吸収
© 2011 KSK Co., Ltd.
x-fitを利用するメリット
の課題を解決！
サイト運営者には
制作ガイドラインを一定に
保つことができる
使い回しできる部品で
属人デザインの防止属人デザインの防止
実機確認済み部品が品質を保つ実機確認済 部品 品質を保
タッチUIを駆使してサイトを差別化
Page 15Page 15All rights reserved.
ワンソース将来的な予定
© 2011 KSK Co., Ltd.
スによるスマートフォン・携帯電話対応
お客様お客様
WebWebサーバサーバ
HTMLHTML
＋＋
独自タグ独自タグ
連携により連携により
フィーチャーフォンにも対応フィーチャーフォンにも対応
Page 16Page 16All rights reserved.
フレックス ファ ムは ＩＴ業界の皆様フレックス・ファームは、ＩＴ業界の皆様
モバイルファース時代におけるマルチ
ごもっと確実・簡単にできるようご支援し
株式会社ＫＳＫ ITソリューション事業部株式会社 ソリ ション事業部
フレックス･ファーム ビジネスユニット
〒151-0053 東京都渋谷区代々木2-22-1 エディフィス代々木４Ｆ
© 2011 KSK Co., Ltd.
様に様に、
チデバイス対応を
します。
0120-142-9630120 142 963TEL FAX
MAIL WEB
03-5365-2800 03-5365-2875
http://flexfirm.jp/[email protected]
Page 17Page 17All rights reserved.
