Web屋が知っておきたいスマートフォンの現在(いま)

2011年6月4日(土)
第27回WebSig会議

来るべきスマホ時代のコミュニケーションデザイン
 ~技術とコミュニケーションデザインの両側面から

株式会社サイズ 糟谷 博陸

はじめに

自己紹介

糟谷 博陸 / Hiromichi Kasuya

セガ ⇒ IMJ ⇒ 世界一周 ⇒ サイズ

セガ宣伝部を経て,2000年からIMJでWebインテグレーション事業に従事。慶應義塾大学湘南藤沢キャンパス(SFC)のWebサイト構築をきっかけにCMS開発に着手。2005年にXML CMS「Web Meister」を完成。2008年サイズを設立。IMJから「Web Meister」事業を譲受し,CMSを中心としたワンソース・マルチデバイスのWebサイト制作を追求している。

プロフィール詳細はこちら

過去の主な制作サイト

  • スカイパーフェクTV
  • ユニクロ
  • ミキハウス
  • サントリーカンパニーサイト
  • 慶應義塾大学SFC Web Designing 特集:Webクリエイティブの10年 CSSレイアウトの利点を目で見える形で示した日本で最初の試みだと言ってもいい。」

自己紹介

書籍・刊行物

【Web Site Expert】

講義・講演・セミナー

ご依頼お待ちしております。

自己紹介

xyz corporation

株式会社サイズ / xyz corporation

CMS(コンテンツ管理システム)によるPC・携帯・スマートフォンへ
ワンソースマルチデバイス化したWebサイトを制作するWebインテグレーター

facebookページよければ「いいね」してくれると嬉しいです。

採用情報3職種で募集しています。応募お待ちしております。

アジェンダ

  1. そもそもデジタルデバイスって?
  2. スマートフォン対応って?
  3. Webアプリ or ネイティブアプリ?
  4. PC・携帯サイトとスマートフォンサイトの違いは?
  5. PC・携帯サイトをスマートフォン用に最適化するポイント
  6. スマートフォン専用サイト制作のポイント
  7. リッチインタフェース対応
  8. ユーザとのコミュニケーションの図り方
  9. ワンソース・マルチデバイス
  10. いくつのHTMLテンプレートを制作する?

1. そもそもデジタルデバイスって?

1. そもそもデジタルデバイスって?

コンテンツ制作に関わるデジタルデバイスの3要素

デバイスの要素
  1. 画面解像度
  2. 入力インタフェース
  3. ユーザインタフェース・テクノロジー

ユーザインタフェーステクノロジー

HTML、Flash、Ajax、HTML5、スマートフォンネイティブアプリ、電子書籍フォーマットなど

facebookディスカッション

1. そもそもデジタルデバイスって?

入力インタフェースの特徴

次にくるとすれば座標認識インターフェース?

スマートフォン自体

Kinect、Wiiリモコン

facebookディスカッション

2. スマートフォン対応って?

2. スマートフォン対応って?

スマートフォン対応

スマートフォン対応とは?

1 の対応を最低限するべき

2 を必要とする強い目的がなければ 1 のみでいいのでは?

facebookディスカッション

3. 2-a Webアプリ or 2-b ネイティブアプリ?

3. Webアプリ or ネイティブアプリ

Webアプリ or ネイティブアプリ

参考資料:Publickey Google I/O 2011

facebookディスカッション

3. Webアプリ or ネイティブアプリ

スマートフォン専用対応する時にどちらを選ぶ?
それぞれのメリット・デメリットは? どんな時に有効か?

Webアプリのメリット

ネイティブアプリのメリット

Webは未来、ネイティブは強力

facebookディスカッション

Webアプリ jQuery Mobile

jQuery Mobile事例

facebookディスカッション

4. PC・携帯サイトとスマートフォンサイトの違いは?

4.PC・携帯サイトとスマートフォンサイトの違いは?

デバイスの要素

ユーザインタフェーステクノロジー

HTML、Flash、Ajax、HTML5、スマートフォンネイティブアプリ、電子書籍フォーマットなど

デバイス 画面解像度 入力インタフェース UIテクノロジー
PC × ×
携帯 × ×

携帯のディレクションでPCのマークアップを行うイメージに近いと思うのですがどうなんでしょうか?

facebookディスカッション

5. PC・携帯サイトをスマートフォン用に最適化するポイント

5.PC・携帯サイトをスマートフォン用に最適化するポイント

PC・携帯サイトをスマートフォン用に最適化するポイント

要は見た目よく、触って早い。

1 画面表示サイズ → 2 リンクなどの挙動を見て認識できる→
3 タッチ操作の最適化 → 4 ファイルサイズの軽量化

PCサイトを最適化しても。。。拡大縮小がわずらわしい
携帯サイトを最適化しても。。チープさが残る

facebookディスカッション

6. スマートフォン専用サイト制作のポイント

6. スマートフォン専用サイト制作のポイント

スマートフォン専用サイト制作のポイント

  1. HTML5+CSS3+JavaScriptを問題なく使用することができる
  2. Portrait(縦画面)とLandscape(横画面)を意識しリキッドデザインを使用する
  3. 1カラムレイアウトにする。

facebookディスカッション

7. リッチインタフェース対応

7. リッチインタフェース対応

リッチインタフェース対応

ユーザインタフェースとコンテンツを分離できる場合、コンテンツをXMLで持つことによりUIテクノロジーや仕様に関係なくリッチインターフェース対応ができます。

XMLコンテンツをFlash、Ajax、HTML5などの異なったUIテクノロジーに配信し、ワンソース・マルチユース化」することも可能です。

facebookディスカッション

8. ユーザとのコミュニケーションの図り方

8. ユーザとのコミュニケーションの図り方

PCとスマートフォンの違い

スマートフォンは小さくて軽いので情報量に制限がある。
つまり、提供者側が達成できる目的にも制限がある
⇒ シングルイシュー

日本経済新聞
ジョブズ氏が言う「つまらないものは捨てろ」の意味
作家アントワーヌ・ド・サン=テグジュペリ
「デザイナーが自分の作品を完璧だと思うのは、付け加えるものが何もなくなったときではない。取り去るものが何もなくなったときだ」

顧客は単純さを求めており、それにはユーザー・エクスペリエンス(使用体験)を損なうようなものを排除しなければならない――対象が製品デザインであろうと、ウェブサイトの構成、マーケティングや宣伝資料、プレゼンテーション用のスライドであろうと同じだ。「イエス」より「ノー」と言う回数を増やす。そして、つまらないものは捨てるのだ。

facebookディスカッション

9. ワンソース・マルチデバイス

9. ワンソース・マルチデバイス

  1. CSS3 Media Queries 完全なワンソース・マルチデバイス
    メリット:CSSのみで対応できる
    デメリット:複雑なレイアウト、コンテンツの出し分けは難しい
  2. ユーザエージェントによるテンプレート変更
    メリット:全く違うレイアウトが可能
    デメリット:コンテンツの出し分けは難しい
  3. サブドメインにHTMLを生成
    メリット:全く違うレイアウトが可能 コンテンツの出し分けは容易
    デメリット:一手間多い

facebookディスカッション

9. ワンソース・マルチデバイス

ワンソース・マルチデバイス

facebookディスカッション

10. いくつのHTMLテンプレートを制作する?

10. いくつのHTMLテンプレートを制作する?

  1. PC
  2. タブレット
  3. スマートフォン
  4. 携帯

facebookディスカッション

10.いくつのHTMLテンプレートを制作する?

いくつのHTMLテンプレートを制作する?

本日はありがとうございました。