CSS Nite in SAPPORO, Vol.11 フォローアップ(1)「スマートフォン対応サイトの基本」(益子 貴寛)

2013年11月9日(土)、東札幌・ICC Cross×Gardenで開催したCSS Nite in SAPPORO, Vol.11「実践! スマートフォン対応サイト制作」のフォローアップとして、益子 貴寛(サイバーガーデン/実行委員)による「スマートフォン対応サイトの基本」の資料を公開します。


スライド/音声


動画

※ デスクトップやタブレットでは、右下の「Vimeo」から、大きなサイズで見られます


フォローアップメッセージ

セッション1「スマートフォン対応サイトの基本」を担当したサイバーガーデンの益子貴寛です。

セッションで触れなかったこととして、Googleの「Building Smartphone-Optimized Websites」(スマートフォンに最適化したWebサイトを構築する)を紹介します。
https://developers.google.com/webmasters/smartphone-sites/details

アユダンテさんによる翻訳はこちらです。
http://www.ayudante.jp/column/2012-06-08/17-46/

一応、Googleは、レスポンシブWebデザインを推奨していますが、デバイス振り分け(別のページを提供)や、一部のコンテンツを出し分ける方法も、もちろん認めています。

ただし、Vary HTTPヘッダーの設定など、いくつか注意点がありますので、一読をおすすめします。

以下、アンケートでいただいた質問に回答します。

Q:サイトの性質によってどのパターンでスマホで見せるか、悩みどころです
(「PCで見る」ボタンのあり方など)

三井住友銀行のスマートフォンサイトが参考になるでしょう。
http://www.smbc.co.jp/smartphone/

全体として、スマホユーザー向けに大きなボタンを配置したわかりやすい画面構成にしてある一方で、お知らせ、IR情報、採用情報などには「PC」というアイコンをつけ、デスクトップ用ページにリンクさせています。

ムリにすべてのページをスマートフォンに対応させるのではなく、省力化できるところは省力化するのも、よい判断だと思います。

もしデスクトップサイトとスマホサイトを分けて提供している場合、スマホサイトの「PCで見る」や「パソコン版はこちら」ボタンは、あればあったで便利ですが、要不要はサイトによります。

とにかく、小林さん/鷹野さんのセッションでもあったとおり、顧客像や消費者の心理段階を考えて、どのような設計をするか、クライアントと(Web担当者であれば社内のほかの人と)コンセンサスを築いておくことが大切です。

岡野さんが話したUXデザインの取り組みも、ユーザー体験やビジネスへの貢献はもちろん、「関係者のコンセンサスを築く」ことが、大切な目的のひとつと考えます。

ちょっと本音として、クライアントや社内の要望は、わりと「ほかのサイトでこうしているから、うちでもこうしたい」という根拠が多いので、今回のセミナーで紹介されたさまざまなサイトを知っておき、「いやいや、こういうサイトもありますよ」と、きちんと事実ベースで逆提案できるようになるとよいですね。

このセッションが、みなさんにとって、これからのスマートフォン対応のよいきっかけになれば幸いです。

年別アーカイブ