• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / モバイル / スマホサイト制作やレスポンシブWebデザインの疑問に答えます

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

池田祐太郎 | 2013年11月27日 公開

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

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

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

目次

  • 1 Q.最近、レスポンシブデザインのものも増えていますが、スマホサイトを別途作成したほうがよいものなのでしょうか。
  • 2 Q.池田先生のレスポンシブWebデザインに対する所感。 メリット・デメリットを教えていただきたいです。
  • 3 Q.先生はスマホサイトを作った場合、PCサイトも同時に作りますか?それともスマホサイトのみ作っていますか?
  • 4 Q.Webの開発環境としてはWindowsは辛すぎる
  • 5 まとめ
    • 5.1 スマートフォン用サイトをレスポンシブで制作いたします

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編)を行います。

スマートフォン用サイトをレスポンシブで制作いたします

ハイファイブクリエイトではレスポンシブWebデザインにおいてスマートフォン用サイトとPC用サイトを同URLにて最適化するサービスを行っております。
詳細はこちらのページをご覧ください。

PCサイトのスマートフォン最適化[レスポンシブウェブデザイン]

メールコンサルティング
WordPress保守管理サービス

Filed Under: モバイル 関連タグ:スマホサイト, レスポンシブWebデザイン

池田祐太郎

WordPressの導入を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在はWordPressの保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

Googleがモバイルフレンドリー対応のランキング影響を段階的に対応するとアナウンス
2016年3月30日
タグ: SEO, スマホサイト
カテゴリー: ホームページ制作
スマホ未対応だったサイトをスマホ最適化した結果、どのくらい検索順位が上昇したのか検証しました
2015年9月19日
タグ: SEO, スマホサイト
カテゴリー: ホームページ制作
Googleのモバイルフレンドリーアップデートでどのくらいに検索結果に影響があったのか検証しました
2015年5月18日
タグ: SEO, スマホサイト
カテゴリー: ホームページ制作

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. WordPress において PHP 8.1 に更新していいかどうか検証
  6. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上
  • メールフォームプラグイン MW WP Form を使いながら WP Rocket を使う場合にエラー回避する設定

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.