まず、1つから始めましょう 〜レスポンシブWebデザインのブレークポイントについて〜

最近、お客様にご説明する機会の多い『レスポンシブWebデザイン』ですが、基本的に（現時点で）弊社では、PC向け、スマホ向けの2種類の見た目をご提案しています。
つまり、『タブレットにはPC向けの表示を縮小表示するということでいかがでしょうか』という事です。

ものすごくざっくり言うと、レスポンシブWebデザインは、1つのソースコードで、いろんな閲覧環境で見やすい表示になるように対応してみようという試みです。

技術的には、1つのソースコード（html&css）に
数種類の表示パターン（デザイン）を内包させておくと、
ブラウザがWindow幅に合わせて表示を切り替えてくれる、というもの。
この『Window幅に合わせて』というのは、デザイン指示書であるところのcssファイル内にある

幅がxxxピクセル以上ならそっち、それ以下ならこっちのスタイルを適応せよ

という指示にブラウザが従うという事。
そして、この境目になる "xxxピクセル" が『ブレークポイント』と呼ばれています。
つまり、ブレークポイント（見た目の境界）が1つなら、表示パターンは2種類。
プレスマンでは、このブレークポイントを、PCとスマホ用の表示幅の境界線として1つだけ設定しています。

では、タブレットで見た時にはどうなるの？

というと、弊社ではPC表示の縮小版が表示されるようにしています。これは、以下の理由からです。

• 2014年6月時点で、タブレットからのサイト閲覧率は平均して5%前後
  • ※NetMarketShare、StatCounter、自社＆クライアント様のGoogle Analyticsからの総合判断
  • ※スマホからの閲覧率は、サイトによって15〜55%と、かなり幅有り。
• 様々な表示環境を想定すると、デザインの縛りがきつくなる。
• 表示パターン数だけデザインをするので、制作、テスト、メンテの全てがコストUP。
  （最終的には、お客様側での確認の手間もUPすることに）

なんだか、制作・運用側の都合だけのように聞こえますよね(笑)
でも、そんなことはないのです。

プレスマンでは、様々なリサーチ結果から、現時点では、タブレットを使っている人の多くがPCを所有していて、手軽な(閲覧行為中心の)サブPCとして、家庭内や外出先で使っているという判断をしています。つまり、同じサイトをPCでも見ている確率が非常に高いという仮定がなりたちます。

皆さんは、タブレットでのサイト閲覧時に以下のような経験をした事はありませんか？

• 同じサイトを見たはずなのに見た目が全然違う…URL間違ったかな?
• PCで見てた時に使ってたナビゲーションやリンクが見当たらない…
• せっかく画面が大きいのに、スマホの水増し版みたいなスカスカな画面…

閲覧環境が変わるたびに、見た目や使い方が変わるという事は、その都度、ユーザーさんに新たにそのサイトを再学習をしていただくという事。つまり、表示パターンが少ない程、お客様に学習を強いる機会が減るという事です。でも、さすがにPCの画面をぎゅーっと小さくしてスマホで見ていただくのはあんまりですよね(笑
そこで、『PC向け、スマホ向けの2種類の見た目を準備する』というご提案を
弊社では現時点での落としどころとさせて頂いてます。

サイトのアジャイル開発

ここで、なんどか強調している『現時点で』というのがミソになります。これは、今見えている各種データを元にしたときの弊社が提示する最適解が、1年後には、最適解ではなくなっている可能性を、我々が認識しているという事です。また、当然ながら、各クライアント様毎のサイトのキャラクターによる訪問されるお客様の違いもあります。

プレスマンでは、サイト運用開始後に、各種データ（主にGoogle Analytics）を追いかける事で、数ヶ月毎に、最適解のブレを補正する提案、いわゆる『サイトのアジャイル開発』をさせて頂いています。

ずいぶん遠回りをしましたが、この記事のタイトルには

まず、サイトのブレークポイントは1つから始めませんか？
そして、適時、最適化して行くことでサイトのクオリティーを高め続けましょう！

という思いが込められています。

サイトは作ったら終わりではなく、そこからが始まり

この感覚を共有しながら、クライアント様と一緒に、エンドユーザー様へベストな情報＆サービス提供を続けれたら。そんな思いで、プレスマンはサイトの制作をしています。