スマホサイト制作やレスポンシブWebデザインの疑問に答えます

公開日: 2013年11月27日
Author: 池田祐太郎
カテゴリー: モバイル
タグ: スマホサイト, レスポンシブWebデザイン

スマホサイトやレスポンシブに関する質問
先日schoo（スクー） WEB-campusというウェブ上で様々なジャンルの勉強ができるウェブサービスに先生として授業を行いました。録画授業でその時の様子が見られるので興味のある方は是非ご覧ください。

スマホサイトを作って学ぶ、サイト制作入門（制作編）

このオンライン授業の面白いところはインタラクティブになっていて、受講者が質問ボタンから先生に質問ができます。
その場で答えていくんですが、時間が足りないこともありすべてに答えるのは難しくできませんでした。
いくつか答えられなかった質問にブログで回答します。

Q.最近、レスポンシブデザインのものも増えていますが、スマホサイトを別途作成したほうがよいものなのでしょうか。

PCサイトとスマホサイトは通常それぞれ別データになるのですが、レスポンシブデザインで作ると一つのデータをCSSによって切り替えてPC用とスマホ用にすることが可能です。
レスポンシブデザインで制作するか、PC/スマホ分けて制作するか…というのは工数も変わるし今後どのように運用していくかにも寄って変わってくるところですね。
個人的にはレスポンシブデザインで制作したほうがソースもひとつになり、SEOのメリットもあるのでお勧めします。万全ではないですが、Googleも推奨しています。

Google では、次のようなさまざまなメリットがあることから、レスポンシブウェブデザインの使用をおすすめしています:

・コンテンツに使用する URL を 1 つにしておけば、ユーザーは簡単にコンテンツを操作したり、共有したり、コンテンツにリンクしたりできます。また、コンテンツの URL が 1 つであれば、Google のアルゴリズムがコンテンツのインデックスプロパティを割り当てやすくなります。
・デバイス専用ページにユーザーをリダイレクトする必要がなくなり、読み込み時間が短縮されます。また、ユーザーエージェントに基づくリダイレクトはエラーが発生しやすいため、サイトのユーザーエクスペリエンスを低下させる可能性があります（詳しくは、ユーザーエージェントを検出する場合の問題をご覧ください）。
・サイトと Google のクローラの両方のリソースを節約できます。レスポンシブウェブデザインのページでは、Googlebot ユーザーエージェントがページをクロールする必要がある回数は 1 回のみで、ユーザーエージェントごとに何度もクロールしてコンテンツを取得する必要がありません。このようにクロールの効率が向上するため、サイトのコンテンツがより多く Google のインデックスに登録され、最新の状態に適切に維持される間接的な助けとなります。
推奨事項の詳細 – Webmasters ? Google Developers

※太字は筆者により付け加えた箇所

一つのデータをPC・スマホで共有するためどうしても画像などサイズを気にします。完全に別ものにするのであればレスポンシブデザインより別に作ったほうがいいでしょう。更新の手間を考えて一つのデータで運用したほうが更新リソースを減らせるというのであればレスポンシブデザインのメリットは大きいです。

Q.池田先生のレスポンシブWebデザインに対する所感。メリット・デメリットを教えていただきたいです。

上記とも被りますが、基本的にはレスポンシブデザインを推奨します。
デバイスごとに横幅が違うので、ユーザーエージェントによりわけるのは機種ごとに制御しなければいけないのでスマートではないです。
であれば、デバイスに左右されないPCorスマホというデザインで統一し、サイト更新のやりやすさを向上させたり、デバイスによっての崩れを修正しなければいけないことからの解放へ向けたほうが前向きかなと思います。

キャンペーンページやLPであればこの限りではないです。そもそも更新するということが通常のウェブサイトに比べ大幅にさがるでしょう。

メリット：
更新のしやすさ
崩れや機種による挙動の違いをそこまで意識しなくていい
重複コンテンツがなくなることやクロールの効率が上がることによるSEO向上

デメリット：
レスポンシブデザインにすることによりPCとスマホで大幅にコンテンツが変わるサイトを作れない
制作に時間がかかり費用がかさむ
デザインとコーディング両方わかっていないと作りづらい

といったところになるかと思います。

Q.先生はスマホサイトを作った場合、PCサイトも同時に作りますか？それともスマホサイトのみ作っていますか？

もちろん依頼された内容に寄ってですが、スマホユーザーがアクセスの半分などある場合は迷わず作ることを勧めています。3,4割でも作ったほうがいいと勧めます。
スマホサイトだけ制作してPCサイトは無し、ということが今まで無いですがPCサイトを作らない、と言われたらペライチでスマホサイトへの案内をするくらいのものはあったほうがいいでしょうね。
PCからアクセスしたときにスマホ最適化されたサイトをPCから見ると結構見づらいですからね。。。

そういえば現在制作しているサイトはスマホがメインで、PCサイトは案内だけにすることになっています。対象ユーザーがスマホメインであればまずはそれでいいかと思います。あとはアナリティクス見てPCユーザーが増えたら後に対応、というかんじですね。

Q.Webの開発環境としてはWindowsは辛すぎる

はい、その気持ちすごいわかります笑
僕はもともとというか今もですがWindowsユーザーです。今はMacも使っているのでどちらでもいけますが。パソコンを始めてからずっとWindowsだったのでウェブ制作の環境もずっとWindowsです。
実はMacは本格的に使い出したのはここ3ヶ月くらいで、AdobeがCCになってMacもWinも同じアカウントで2台までつかえると知ったので思いきってMacBook Proを使い始めました。

参照：
[サポートセンターに聞いてみた] アドビクリエイティブクラウド製品はwinとmacで使える！

当初は外出先で使う程度だったので、外で確認用でPhotoshopやIllustratorを見れればいいか…なんて考えていたのですが今では外出先に限らず使っています。やはり使い勝手がいいんですよね。

あとキーボードの配列も大きいと感じます。USキーボードのMacbook Proなんですが、「＝」や「’（シングルクォーテーション）」「”(ダブルクォーテーション）」が打ちやすいです。
Windowsも使っているため打ちながら「どこだっけな？」と考えるときはありますがMac一筋だったらキーボード入力は相当早くなっていたでしょう。

慣れてしまえばWinでもMacでも問題ないかと思いますが、今から始めるなら断然Macをオススメします。ターミナルも最初からついていますからね。

まとめ

サイト制作者は制作のやり方も自由だしどのように進めるっていうやり方がないので「このやり方であっているかな？」「自分はこう思うけど一般的にはどうなんだろう？」と思うことが多い仕事だと思います。
今回の質問もそのような系統の質問が多かったと思います。技術的な質問というのは検索や書籍である程度解決してしまうからでしょう。

スマホサイトやレスポンシブについて個人的に聞きたい！という方はメッセージください。個別にご対応します！お問い合わせフォームか、Facebookページか、Twitterなんかで連絡いただければ。

また次回28日木曜日、今回制作した第二回目、スマホサイトを作って学ぶ、サイト制作入門（サーバー・FTP編）を行います。