実践！iPhone＆Androidサイト制作ガイド ― 第4回

スマートフォン対応サイトを設計するときのノウハウ

2010年08月18日 17時05分更新

文● たにぐちまこと／H2O Space.

スマートフォンサイトの画面設計

　Webサイトの構造設計ができたら、次は各ページのレイアウトを決める画面設計です。ワイヤーフレームと呼ばれる線画だけで構成された図を作成し、この後の「デザイン作成」がスムーズに進められるようにします。ここでのポイントをいくつか紹介します。


PCサイトと同様、ワイヤーフレームを作成して画面設計する

正確な画面サイズを把握する

　前回説明したとおり、iPhoneの画面サイズは320×480ピクセルですが、常に画面のすべての領域を利用できるわけではありません。Safariを起動した直後の段階では125ピクセルがアドレスバーとツールバーに利用されており、実際にWebページの表示に使える領域は320×355ピクセルしかありません。さらにキーボードを表示すると295ピクセルがキーボードに使われるため、Webページの表示領域は185pxしか残りません。


iPhoneのSafariの画面領域。アドレスバーやツールバーを除くと実際に使える領域は狭い

　Android端末は機種によって異なりますが、HTC Desireの場合は以下のような仕様になっています。


HTC Desireの画面領域。iPhoneと同じくアドレスバーなどの領域を把握しておこう

　特に広告バナーなどを配置する場合は、スクロールせずに表示される「ファーストビュー」の領域に収める必要があるため、ターゲットとする端末の有効表示領域を把握してページを設計する必要があります。

画面の向きの初期状態

　ほとんどのスマートフォンは、本体を傾けることで画面の縦横の向きを変えられるため、スマートフォンサイトはどちらの向きでも正しく表示されるように作る必要があります。

　では、ユーザーがWebサイトを閲覧するときの「はじめの向き」は縦・横のどちらが多いでしょうか？　基本的には「縦」が標準と考えてよいでしょう。iPhoneや多くのAndroid端末のホーム画面には横向きがなく、ブラウザーを起動した直後の画面は縦向きになっています。そのため、ほとんどのユーザーは縦向きでWebサイトを閲覧することが多いと考えられます。

　auから発売された「IS01」のように横画面しかない端末もあり、悩ましい問題ではありますが、画面設計は「縦」を基本に考えるのがよいでしょう。

長いページを使いやすくする工夫

　iPhone/Androidのブラウザーにはスクロールバーが存在せず、操作を指でするため、長いページ内を一気に移動するのは困難です（iPhoneの場合は画面の一番上をタップするとページの先頭に戻れますが、あまり知られていないようです）。そこで、次のような工夫をするとよいでしょう。

・ページ内リンクを配置する

　前に紹介したlivedoorのように、ページ内リンク要素を配置することで、ページ内の他の箇所へスムーズに移動できるようになります。


livedoorではページ内のコーナーを移動するリンクボタンが設置されており、各項目を順に閲覧できる

・折りたためるようにする

　JavaScriptを利用して、折りたためるパネルでスペースを節約しながら、読み込み頻度を減らせます。たとえば、Amazonではすべての商品の「購入するボタン」を折りたたんでおいて、必要に応じて表示できるようにしています。


Amazon.co.jpでは商品一覧に伸縮するパネルを採用しており、ボタンをタッチすると詳細な説明が格納／展開する

・タブで区切る

　複数のジャンルがあるコンテンツをジャンルごとに「タブ」で区切って表示します。タブをタップするとページ遷移なしでコンテンツが切り替わり、限られたスペースで多くのコンテンツを展開できます。


Yahoo! JAPANのトップページはタブによってコンテンツを切り替えるユーザーインターフェイスを採用。ページ遷移なしで多くの情報を得られる

　これらのテクニックを利用して、1ページの長さと収めるコンテンツ量を調整していきます。

タップしやすくするための工夫

　ほとんどの操作を指で済ませることが多いiPhone/Androidでは、小さなリンク要素や文章内のリンクは非常にタップしにくく、誤操作やユーザーのストレスを招く原因となります。そこで、次のような手段を検討しましょう。

・大きなボタンを配置する

　mixiのログイン画面のように、画面の幅いっぱいの大きなボタン要素を配置します。


mixiのログイン画面。画面幅いっぱいにログインボタンを表示してタップしやすくしている

・リストにする

　複数のリンクが並ぶ場合には、NAVERのようにリストにするとよいでしょう。今後紹介するCSSのテクニックを用いれば、リスト内の余白部分やリストの横幅いっぱいまでをリンク領域にできます。


NAVERの画面。縦幅の広いリストで項目を並べている。リストの各項目全体がリンク領域になっておりタップしやすい

・アイコンにする

　リストでは地味になる場合は、iPhoneのホーム画面のようにアイコンを並べてコンテンツを選んでもらうインターフェイスもあります。nanapiではアイコンとリストを組み合わせて配置しています。


nanapiの画面。iPhoneユーザーを意識してか、アイコンでコンテンツを選べるようにしている

文字サイズはPCサイトよりも大きく

　移動中に利用することも多いスマートフォンでは、細かい文字が実際のサイズ以上に読みづらく感じることがあります。拡大ボタンをタップしたり（Android）、ダブルタップやピンチしたり（iPhone）すると拡大できますが、実際のところ拡大／縮小操作をしながらの閲覧はなかなか面倒です。

　そこで、本文の文字サイズはPCよりも少し大きめの14～15pt程度に設定して画面を作るのがよいでしょう。場合によってはPCサイトよりも文章の量を減らすなどの工夫が必要になることもあります。


iPhoneでの文字の大きさ。本文は14pt～15pt程度を目安に設定しよう

◆

　スマートフォンサイトの設計では、小さな画面に各パーツを大きく配置しなければならず、やりくりが難しくなります。今回紹介した手法を参考にして、うまくスペースを節約しながら操作性のよいサイトを設計しましょう。

　次回はデザイン制作におけるポイントを解説します。

著者：たにぐちまこと

東京世田谷でWeb制作を営む、H2O Space. 代表。PHPを中心としたWebシステムの開発などを主に手がける。 Adobe Dreamweaverで、iPhoneサイトを制作しやすくする拡張機能「iPhone site extension」を配布し、スマートフォンのサイト制作にも積極的に取り組んでいる。主な著書に「Dreamweaver PHPスターティングガイド」（毎日コミュニケーションズ）、「ホームページ担当者が知らないと困るHTMLの仕組みとWeb技術の常識」（ソシム）など。

前へ 1 2 3 次へ

ツイートする

カテゴリートップへ