このページの本文へ

SwapSkills勉強会レポート

スマートフォン時代のモバイルサイトの条件とは?

2010年07月13日 10時00分更新

小橋川誠己/Web Professional編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

 モバイルサイトの制作事情が大きく変わりつつある。iPhone/Androidなどのスマートフォンがシェアを伸ばすなか、ケータイサイトのスマートフォン対応や、PCとスマートフォンのクロスデバイスサイトの制作ニーズも高まっているという。そうした新しいモバイルサイトの制作を学ぼうと、勉強会「SwapSkills スマートフォン時代の携帯サイト作成術」が、6月19日に東京都内で開催された(主催=allwebクリエイター塾)。ゲストにIMJモバイル ディレクターの丸居久仁男さんとブロガーの森 啓輔さんを迎え、70人近くのWeb制作者らがノウハウを共有した。


モバイルサイトに欠かせないユーザビリティ

 「スマートフォン時代のモバイルユーザビリティ」というタイトルで発表したのは、IMJモバイルのディレクター丸居久仁男さん。丸居さんは、「2012年には全体の2割がスマートフォンになる」という携帯電話市場のシェア予測を示しながら、スマートフォン対応の必要性を訴えた。すでに大手ECサイトの中には、売り上げの1割程度をスマートフォン経由が占めているケースもあるといい、さまざまなモバイルサイトの制作を担当する丸居さん自身、「スマートフォンは積極的に買い物をするアクティブなユーザーが特に多い印象がある」という。

スマートフォンサイトのデザインパターンを解説するIMJモバイルの丸居久仁男さん

 スマートフォン時代のモバイルサイトで重要なのが、ユーザビリティだという。いくらPCに近い性能を持つとはいえ、PC比べれば圧倒的に狭い画面でユーザーにWebを楽しんでもらうには、モバイルの特性を理解してサイトを設計する必要がある。たとえば、ケータイサイトで一般的な、ファーストビューに主要なページへのショートカットを設置するレイアウトパターンは、多くの大手スマートフォンサイトでも採用されている。

 ほかにも「検索窓をページ上部に配置する」「コンテンツの区切りを分かりやすくする」「ページ内にショートカットリンクを置く」「フッターにグローバルナビゲーションを設置する」といったケータイサイトの“作法”や、「電話番号には発信機能へのリンクを設定する」などのルールは、スマートフォン時代でも生かせるノウハウだという。

スマートフォンサイトの例。検索窓がある、主要なサービスへのリンクがあるなど、ケータイサイトとの共通点も多い


スマートフォンサイトの制作を実演

 森 啓輔さんの「実践!スマートフォンサイト制作」では、タイトルのとおり、実際にiPhoneやAndroidなどのスマートフォン対応サイトを制作する上での具体的なポイントが紹介された。

 まず理解したいポイントが、スマートフォンならではの「Viewport」という概念だ。PCサイトを見ることも多いスマートフォンのブラウザーは、Viewportという仮想的なウィンドウのサイズに合わせてWebページを表示する。たとえばiPhoneの場合、Viewportの幅は980pxに設定されていて、metaタグでviewportの指定がなければ幅980pxのウィンドウと同様に表示される。ViewportはiPhoneのSafariのほか、IE Mobile 6、Opera Mobile 9.5、Firefox Mobileといった主要なブラウザーが対応済み(もしくは今後対応)。ポイントは「device-width」を指定することだという。当初はiPhoneの解像度である幅320pxを指定しているサイトが多かったが、iPadが登場した現在、デバイス幅に合わせるのがよいそうだ。

「iPhoneでできないこと」を解説する森 啓輔さん

 森さんはこのほか、iCon for Web Clip(iPhoneのホームボタンに表示するアイコン)の設定方法、iPhoneで利用できるフォント(日本語フォントはヒラギノの1種類×2ウェイトのみ)、Webページから内蔵アプリへリンクする方法などを解説。ファイルのアップロード/ダウンロード、:hover、ツールチップ、プラグイン(Java/Flashなど)、フレームといったiPhoneで使用できない機能にも触れ、最後に簡単なiPhoneサイトの作り方をライブコーディングで紹介した。

最後はライブコーディング。画像を使わず、HTML5/CSS3だけでiPhoneふうのUIを制作して見せた


次回のSwapSkillsは「HTML5とセマンティック」!

 SwapSkillsの勉強会はそのとき旬なテーマで毎月開催中。次回は7月31日、ミツエーリンクスの矢倉眞隆さんを招き、「HTML5とセマンティック」をテーマに開催されます。定員は60名、満席が予想されますので申し込みはお早めに。

HTML5を学ぶなら、セマンティックを学べ!

■関連サイト

カテゴリートップへ

ソーシャルランキング
  1. SEOはもう不要? それでもいまやるべきSEOの基本がわかる記事まとめ 51
  2. 用途別!WordPressプラグイン選びに迷ったら参考になる記事まとめ 17
  3. これから使い始めたいWebフォント&Google Font活用法まとめ 14
  4. もっと速く! Web制作の生産性ぐっと引き上げる最新便利ツールまとめ 7
  5. 失敗しない独立のために会社員時代にやるべき3つのこと 5
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1587
  9. Apple Musicが流行らない理由をユーザー視点で考えてみた 1015
  10. 3限目:「看板」から学ぶ「見出し」の基本設計とは!? 640
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング