1. ホーム > 
  2. Webサイト制作 > 
  3. サイト制作のヒント > 
  4. スマホサイトデザインをワイヤーフレームから作ってみた!

スマホサイトデザインをワイヤーフレームから作ってみた!

「そうだ、このWebサイトのスマホ版のデザインを作ろう!」 と、急に思い立ってスマホページのデザインを制作しました。 これからスマホサイトのデザインを制作しよう […]

  • 2015/7/25
  • 2013/4/8

「そうだ、このWebサイトのスマホ版のデザインを作ろう!」
と、急に思い立ってスマホページのデザインを制作しました。

これからスマホサイトのデザインを制作しようと考えている、企業のWeb担当者の方の参考になればと思い、スマホページのデザイン制作の過程をご紹介します。

スマホページの機能を検討

まずはページのだいたいの要素を「ワイヤーフレーム」という形にまとめていきます。
ワイヤーフレームは、ある程度スマホページの機能もイメージしながら、cacoo(カクー)という無料のツールを使って作成しています。

ページ内の各要素のレイアウトについては、iPhoneデザインボックスで他のスマホサイトの例も参考にしながら作ってみるといいかもしれません。

この段階で想定している機能が、「実際に実装できるかどうか」はまだ分かりませんので、だいたいのイメージで作りこんでいます。

それでは実際に作成したワイヤーフレームを見ながら、スマホページに搭載する機能を説明したいと思います。

ページTOPにはフリック切替の最新記事を表示

サイトロゴを表示したヘッダ部分の下の、ページ上部にはフリック操作で切り替えができるような最新記事のコーナーを設置します。

PC版のWebサイト同じように、最新記事を一覧で表示してしまうと表示領域を圧迫してしまいますので、フリックで切り替えるような機能を付けて、表示領域の節約をします。

ページ下部にはタブ切替の中カテゴリ一覧を表示

フリック切替の最新記事の下には、特にアクセスの多い中カテゴリページへのリンクを4つ程度設置する予定です。
この部分には特に機能などは実装せず、単に表示するだけです。

その下には大カテゴリをタブで切り替えて、配下の中カテゴリへのリンク一覧を表示する予定です。
TOPページから各カテゴリに遷移できるようにしないといけませんが、単に一覧形式を表示すると、異常に縦長の画面になってしまう可能性もありますので、タブで表示を切り替えるようにして表示面積を節約します。

スマホサイトの構築では表示面積を節約して、どれだけコンパクトにインターフェイスを作れるかどうかがキモになると考えています。

ページ最下部にはPCサイトへの切替リンクを用意

最下部にはPC版サイトへの表示切替ボタンを用意するします。

スマホでPC版サイトを見たいと考えるユーザーもいるはずですので、この切り替え機能は必須ではないかと考えています。

グローバルメニューはFacebook風に

大カテゴリへのリンクや記事検索コンテンツは、Facebook風のスライドメニューにします。

また、スライドメニュー内の「大カテゴリ」のリンクが、アコーディオン形式のメニューになっていて、タップすると配下の「中カテゴリ」へのリンクが表示されるようにします。

これも表示面積を減らすための工夫ですが、スライドメニュー内から大カテゴリページへのリンクがなくなってしまいます。
しかし、できるだけ少ないタップ数で目的のページへ遷移できることが重要ですので、大きな問題にはならないでしょう。

カテゴリトップページのワイヤーフレーム

カテゴリトップページと記事ページは、検索エンジン経由での訪問者の入り口ページになる事が多いページですので、ユーザーにストレスを与えないように、シンプルで分かりやすい構成を意識しましょう。

PC版のページは検索エンジンからの集客を増やすために、かなりテキストコンテンツを含ませていますが、このままスマホページにデザインを変換してしまうと、狭い領域にテキストコンテンツが密集する状態になってしまいます。

スマホユーザーが検索エンジンからカテゴリトップページに訪問した場合、自分の探しているコンテンツがあるかどうかをすぐに確認したいはずです。
そのため、スマホ版のカテゴリトップページは、小カテゴリへのリンク一覧や記事ページへのリンクのみの表示にした方がいいと考えられます。

ページ上部と下部にはAdsense広告を設置する予定です。

記事ページのワイヤーフレーム

記事ページはもっとも検索エンジンからの流入が期待できるページですので、アクセスしたユーザーにすぐにコンテンツを見てもらう事が重要です。

そのため、ページ上部には「パンくずリスト」「記事タイトル」「ソーシャルボタン」のみを設置し、記事を最後まで読んでくれた方に「もう1ページ」読んでもらうための「関連記事のリスト」をページ下部に設置します。

記事ページのAdsense広告はページ上部には設置せず、ページの真ん中から下部に設置するようにした方が、ユーザーのストレスは低減されるはずです。

ワイヤーフレームからデザインの制作

スマホページのワイヤーフレームを制作しておおよそのレイアウトを決めたら、ページのデザインに移ります。

ワイヤーフレームを元にした各ページのデザインをご紹介します。

トップページ

広告のスペースなども無いので、かなりサラっとしたトップページになりました。

ページ上部、最新記事部分のスワイプ操作による切り替えは、flipsnap.jsというライブラリを利用する予定です。

スライドメニュー展開後

facebookのような感じで、ロゴの右横にあるアイコンをタップすると、ページ全体が右側にスライドしてメニューが表示されるようなメニューです。

「どうせやるなら」と他のスマホサイトには無いような機能を盛り込みたくなってしまうかもしれませんが、あまりトリッキーな機能を入れてしまうと、ユーザーも動きを想像しにくくなってユーザビリティが低下してしまう可能性があります。

そのため、facebook風といったような「誰もが一度は使ったことがある」という仕組みのほうが安心感があります。

カテゴリトップページ

カテゴリトップページにもトップページにあったような「タブ切り替え」のメニューを用意します。

最新記事へのリンクはメニューの下側にありますが、スマホサイトの場合「まず探しているページがすぐに見つかる」という状態のほうがいいので、あえて最上部には設置しませんでした。

上下に広告枠も用意しましたので、トップページよりも情報量は濃くなるのではないかと思います。

記事ページ

一番肝心な記事のページです。

記事ページはコンテンツの中身のパターンがかなりあるので、コーディングと動作確認には一番時間がかかります。

またワイヤー段階では他の記事のレコメンド機能もイメージしていましたが、どうやって実装するか検討中なので、今回のデザイン制作はオミットしています。

必ず実機での確認を

スマホサイトのデザインは「実機で確認ができるページ」を用意しました。

ある程度文字を大きくしたつもりでしたが、実機で見てみるとかなり小さいうえに行間も詰まっている感じがしたりと、実機で見るからこそ気づくポイントがあります。

HTMLのコーディングや機能の作りこみをする前に、必ず実機での確認をするようにしましょう。

モバイルフレンドリーアップデートとその対策に詳しくまとめてありますが、いまやスマホに最適化されたデザインのページを持たないと、Google検索の順位が下がってしまうという「実害」すらあります。

siteFrameNoteはWordPressで作っており、プラグインWPtouch Mobile Pluginを使ってスマホ最適化をしていますが、専用のデザインのほうがユーザビリティを細かく設計できます。

スマホユーザーの特に多いWebサイトは、ご紹介した手順を参考にスマホサイトの制作に着手してみてはいかがでしょうか。

「役にたった」と思ったらシェアお願いします