レスポンシブデザイン
一つのページ(URL)で使用OSや画面、ブラウザを問わず閲覧をサポートしているデザインをいいます。
概要
スマートフォンの普及から今日までに、現在ではPC閲覧者より圧倒的にスマホサイト閲覧者が多くなり、スマホ専用ページを作成するのは当たり前の時代になりました。
昔の話になりますが、もともと黎明期はスマートフォン向けのサイトもなかったので、とりあえず急ピッチで作っていたサイトも多くありました。
しかし、情報量でPCサイトと格差が大きすぎたことが問題で、内容の薄いスマートフォンサイトは評価されない状態になります。
一部はPC版とスマホ版でそれぞれページを分けて作っていましたが、2ページ分の更新の手間や情報の整合性チェックに工数がかかる問題があり、レスポンシブデザインに大きな注目が集まる形になりました。
レスポンシブデザインは、一つのページであらゆる画面に対応できるため、テキストや画像の更新は当該ページ1つ更新するだけですべてのブラウザ対応が完了します。
主にはCSS内で特定の画面サイズになるとレイアウトが変わるようにプログラムを組むことで実装されます。
この用語のメモ
レスポンシブデザインを実装する場合、javascriptで閲覧OSを判別し、別々のCSSを読み込むことでレイアウトを分岐させる方法や、CSS自体の記載方法でメティアクエリを使用し、ブラウザのディスプレイサイズによって表示方法を変更する方法があります。
当サイトはこのメディアクエリを使用してブラウザサイズに応じたレイアウト組みを実装しています。
※ディスプレイサイズを変更してみてください。
この用語の使いどころ
レスポンシブデザインはメリットがとても多いため、運営者としては更新工数をできるだけ抑え込み、且つSEO内部施策にも効果があるため導入したいところです。
しかしながら制作費としてはPCサイト構築に加え、1.5~2倍近い金額でレスポンシブデザイン構築費がかかることも珍しくありません。
予算が決まっている担当者には非常にネックになる部分です。
運営者側で導入を目指したい場合はレスポンシブデザインにする事による年間工数をしっかり見積り、費用の妥当性を自社の決済者に相談するとよいでしょう。
制作側はサイトのニーズを元にクライアント側へメリットやデメリットを含め伝えることが大切です。
なぜ必要なのかを必ずセットで話をしましょう。
関連用語
- CSS
- モバイルユーザビリティ
- 内部施策
Web担当・運営・解析・SEO問題集の例題問題
レスポンシブデザインに関連するジャンルの練習問題を掲載しています。Web担当・運営・解析・SEO問題集一覧から各ジャンルの問題にチャレンジできます。
クリックすると問題の答えと解説が見れます。
- canvasタグ
- iframeタグ
- 不適切なものはない
- imgタグ
- buttonタグ
この答えの解説
実は全て入れ子にできるタグです。しかし、あくまで「見出しタグ」であることをきちんと理解したうえでタグを使用しましょう。
見出しなのに画像や別フレームなどが入ると構造的に非常におかしい形になってしまいます。
- blockquoteタグ
- emタグ
- centerタグ
- labelタグ
この答えの解説
centerタグは、HTML5では廃止されました。
CSSのmargin属性(左右auto指定)や、text-align属性でcenter指定(IEではmargin属性だけでは反応しない)する形でセンタリングします。
- tbodyタグ
- dtタグ
- thタグ
- trタグ
- tdタグ
この答えの解説
dtタグは、dl(定義リスト)タグの入れ子になります。dlタグの入れ子にdtタグとddタグを使用します。
dtタグとddタグは、「質問と答え」の関係のような人まとまりの意味を持つ表現をしたいときに使うため、Q&Aなどのサイトに多用されます。
- リンクとリンクの間の間隔が10px以下で作っている
- エレメント(リンク要素があるコンテンツ)が動く要素が多数設置されている
- サイトに埋め込まれている画像の解像度が高い
- サイトは可変式だがメタタグのviewportが設定されていない
この答えの解説
リンクとリンクの間隔が狭すぎると、誤動作が発生しやすくユーザビリティ面においては指摘を受けやすい内容になります。
- ライティング能力
- プログラミング能力
- ディレクション能力
- チェック能力
- アクセス解析能力
この答えの解説
直接関係ある作業として、ライティング能力やプログラミング能力はコンテンツ制作、チェック能力はリンク切れや文言間違いなどの品質向上、アクセス解析能力はユーザー属性やニーズの把握でそれぞれ必要です。
ディレクション能力は主に依頼主や作業メンバーへの指示、予算などがメインとなるため直接の施策業務に関わることはほとんどありません。(アドバイス程度)
- 当社はYahoo!やGoogleの検索アルゴリズムに精通しています。
- 当社はあらゆる業界においての情報サイトを有しており、ライターを8名常駐しています。
- 当社はロングテールSEOに強く、競合他社とのSEOで勝てています。
- 当社は20名超のマークアップエンジニアを抱えています。
この答えの解説
正解の選択肢では、施策の具体性の説明がないのでブラックハットSEOを行っている可能性が高く、ペナルティを受けた場合のリカバリが非常に難しくなるため、対応方法を聞くべきです。
- ある期間のうち1回の訪問分で見られたWebページの数
- ある期間のうち1回の訪問分で遷移したWebページの数
- ある期間で見られたWebページの数
- ある期間で訪れた人数
この答えの解説
ページビューとは、ユーザーがWebページを開いた数(=見られた数)を示します。
- ユーザートラッキング
- コンバージョントラッキング
- グーグルトラッキング
- イベントトラッキング
- スクリプトトラッキング
- 目標トラッキング
この答えの解説
クリック計測に使用される機能は「イベントトラッキング」と言います。
イベントトラッキングを設定することで、任意のリンクやボタンなどをクリックした際に設定した名前にてクリック数が計測されます。
- ある特定のユーザーの行動履歴から、コンバージョンに至ったルートを解析できる
- ある特定のユーザーが購入などをしてコンバージョンをし、目標に寄与した割合を見ることができる
- ある特定のユーザーの年齢や性別などのパーソナルデータを見ることができる
- ある特定のユーザーの入力フォームの内容を辿ることができる
この答えの解説
ユーザーエクスプローラはあるCookie情報を持ったユーザーの閲覧履歴を追跡できる機能です。
コンバージョンに至るまでの中間ページや滞在時間等から、なんの情報記載を元に行動に移したのかの推測や仮説が立てられるようになります。
関連タグ【Web制作】に関するよくある質問
Web制作に関するよくある質問を抜粋しています。Web制作に関するよくある質問はこちらから。
何より少ない容量で「ある程度の動的動作」や「サイトの整形」が出来る点だと思います。
また、手軽にスマホサイト対応ができる「メディアクエリ」が使用できるのも大きな利点で、こんにちのモバイル対応を支えているものになります。
CSSは、手段を覚えておけば覚えておくほど、レイアウトの調整手段が増えてくるため、容量を抑えつつ動作を行えるソースが作れます。
今でこそ、SEOを中心にコーディングを組むことが大半になってきているため言える話になりますが、Webサイトの一ページ一ページは「本」を作る意識を持って取り組んでいます。
ちゃんとタグにも「タイトル(表題)」や「見出し」、「段落」など、「作文」や「国語」にまつわる言葉が多く出てきますね。
Google側も同じように「記載されている内容」が「どの場面」で「どれぐらいの分量」の情報が「検索された内容に対し正確性があるか」が重要です。
コーダーやライターはその辺りを意識することが大切です。
デザイナーは、Googleよりも人間側が認知する視覚情報がもっともウエイトを占めるため、分かりやすさとトレンドをいかにストレスなくユーザーに供与できるかが大事で、ユーザーエクスペリエンスの精度に関わります。
Webサイトは、成長を前提に作ることが大事です。そういう意味では、いつまでもページが増え続ける「1巻だけの本」を作り続ける意識が必要ではないかと考えます。
Webサイトの制作は、現在では分業化が当たり前になってきているため全てを習得しなければいけない訳ではありません。
そのため、デザインからやらないとダメ、コーディングからやらないとダメ、というのはなく、覚える順番は任意で決めてもらって問題ありません。
ことWebに関して言えば、覚えるというよりかは「盗んでいく」というスタイルが、覚える作業としては適切ではないかと思います。
関連タグ【SEO】に関するよくある質問
アクセス解析に関するよくある質問を抜粋しています。SEOに関するよくある質問はこちらから。
まずはGoogleアナリティクスとGoogleサーチコンソールを導入し、サイトに訪れる際に検索されているキーワードを探してみましょう。
次に、今展開しているコンテンツが「その検索キーワードにマッチしている内容かどうか」をしっかり精査した上でサービス説明を組み替えたり、検索されやすいキーワードを文中に文法上意味の通る状態を考慮した上で組み込むなどのてこ入れをしていきます。
クリック数、コンバージョン率、合計表示回数、平均掲載順位などの検索キーワード関連の他にGoogleにインデックスするページを増やしたり不要なURLを削除したりするツールです。
サイトの構造を精査したりサイト上に検出されたエラーを修正することにより、検索結果に画像を表示、評価の★マークをつけたり等といった検索に効果をつけることもできます。
まずは、上位に来ているサイトのコンテンツをしっかり見てみましょう。
何故上位に来ているのか。答えは簡単で、競合他社のほうがその「検索結果に表示」されている内容について「説明が上手いから」とGoogleが認めているからです。
どのへんが説明が上手いのかということですが、まず文章量の多い少ないはそこまで関係ありません。
同じような情報であればどれだけ様々な視点を持って説明をしているか、という点であったり、全く同じコンテンツレベルだと感じるなら、それをGoogleが「どれだけ正確に読み込みできているか」も重要です。
アンカーリンクのつけ方も重要です。内部リンク、アンカーテキスト、前後ページの関連性など上げるとキリがありません。
やれることをやって、しばらく様子を見て、さらに改善案を考えページを成長させていく他ありません。
Fetch as Google自体はGoogleサーチコンソールのアップデートによって終了してしまいました。現在では、それに変わるツールに「URL検査」というものがあります。
対象のURLを入れ込み、URLのステータスを出力してください。出力されたページの現在の状況が確認できます。
その中に「インデックス登録」という項目が選択できる場合、インデックスをリクエスト(再クロール)することができます。
リクエストしたURLは、最大2~3日くらいでインデックスされるかされないかが決定し、された場合はインデックスされた数に追加されます。
手動による対策で下がった場合は、1つ上の質問の内容の通り、コンテンツの中身を精査してみてください。
競合が順位が上がったことにより、順位が落ちることも当然ながら多々あります。
そのような場合は、相手のコンテンツのどういった点がよさそうに感じるのか、キーワードの頻出具合はどのようになっているのか、コンテンツに厚みや面白味があるか、どの端末でも問題なく閲覧できているか、サイトが軽いか(容量が少なく済んでいるか)。
ざっと思いつくものでもこれだけあります。競合と比べて劣ってそうと思うところは1つずつ地道に改善していきましょう。SEOは一日にして成らずです。
関連タグ【アクセス解析】に関するよくある質問
アクセス解析に関するよくある質問を抜粋しています。アクセス解析に関するよくある質問はこちらから。
一例ですが、特定の地域や年齢層、それから男女どちらかまたは両方に大きく支持されているのであれば、支持された層のトレンドを狙ったコンテンツや広告ワード、閲覧されてる時間帯に広告費用をかけるなどといった費用投資判断の指標に使えます。
単純明快に「ここがよい」「ここが悪い」がはっきりしたグラフや数値の表記と、それに対するコメントや提案を記載していると、議論が進みやすく喜ばれやすいです。
複雑にしすぎると、概要が頭に入らなくなりがちになるため、「で、結局何が悪いの?」と打ち合わせの後半で陥る可能性があります。
Googleアナリティクスを使いこなせるようになりたいのか、アクセス解析の用語などの知識をつけたいのかによって、勉強するポイントは大きく変わります。
Googleアナリティクスを使っていく上ではまずは「ユーザー」「概要」に記載されている基本レポートの使い方を知るところから始まります。もっとも見る頻度が高いからです。
徐々に、「集客」の「トラフィック」や「行動」の「サイトコンテンツ」を知り、理解が進みページ前後の遷移状況などを見れるようになれば、「セグメント設定」を身に着けていく段階になります。
知識としては、離脱率と直帰率の違いをきっちり理解できればページの性質に合わせた説明をできるようになるのではと考えています。
アクセス解析に関する用語を習得する場合は、市販に売っている本や、用語解説をしているサイト等を参考にしてみましょう。
その際、単純に用語を知るだけでなく、使い道などにも触れている情報を参考にすると良いです。
まずはサイト全体のアクセス概況がわかるユーザーサマリーを見るようにしましょう。
また、最低でも月単位で数字を比較する必要があります。
見る指標については、セッション数、平均セッション時間、セッション/ページビュー、直帰率はチェックした方が、時系列毎でのサイトの反応が分かりやすくなります。
次にレポートを注視するタイミングについては、何らかのサイトの更新時や、いつでも良いので一週間のうち必ず見る曜日を決めて見るなど、タイミングを予め決めることが変化に気づきやすいです。
まずは必要以上に情報を入れすぎないようにした方がよいでしょう。
沢山記載することは大切ではありますが、数値を見てもらい理解してもらうには沢山の情報は邪魔になります。
具体的には、資料のボリュームと話するボリュームが同じ位に量を調整すると伝わりやすいです。
Googleアナリティクスを閲覧するには、まずGoogleアカウントが必要です。
何らかの連絡の取れるメールアドレスをお持ちであれば、Googleのログイン画面より新規アカウント作成を行ってください。
索引から探す
- 用語集【A-Z一覧】
Web制作・運営・解析・SEO用語集のAからZまでで出てくる用語一覧をまとめています。
- 用語集【あ行一覧】
Web制作・運営・解析・SEO用語集の「あ行」で出てくる用語一覧をまとめています。
- 用語集【か行一覧】
Web制作・運営・解析・SEO用語集の「か行」で出てくる用語一覧をまとめています。
- 用語集【さ行一覧】
Web制作・運営・解析・SEO用語集の「さ行」で出てくる用語一覧をまとめています。
- 用語集【た行一覧】
Web制作・運営・解析・SEO用語集の「た行」で出てくる用語一覧をまとめています。
- 用語集【な行一覧】
Web制作・運営・解析・SEO用語集の「な行」で出てくる用語一覧をまとめています。
- 用語集【は行一覧】
Web制作・運営・解析・SEO用語集の「は行」で出てくる用語一覧をまとめています。
- 用語集【ま行一覧】
Web制作・運営・解析・SEO用語集の「ま行」で出てくる用語一覧をまとめています。
- 用語集【や行一覧】
Web制作・運営・解析・SEO用語集の「や行」で出てくる用語一覧をまとめています。
- 用語集【ら行一覧】
Web制作・運営・解析・SEO用語集の「ら行」で出てくる用語一覧をまとめています。
- 用語集【わ行一覧】
Web制作・運営・解析・SEO用語集の「わ行」で出てくる用語一覧をまとめています。
タグから探す
- タグ【Web制作】
Web制作・運営・解析・SEO用語集に登録されているタグ【Web制作】一覧をまとめています。
- タグ【Webシステム】
Web制作・運営・解析・SEO用語集に登録されているタグ【Webシステム】一覧をまとめています。
- タグ【SEO】
Web制作・運営・解析・SEO用語集に登録されているタグ【SEO】一覧をまとめています。
- タグ【SEM】
Web制作・運営・解析・SEO用語集に登録されているタグ【SEM】一覧をまとめています。
- タグ【アクセス解析】
Web制作・運営・解析・SEO用語集に登録されているタグ【アクセス解析】一覧をまとめています。
- タグ【広告】
Web制作・運営・解析・SEO用語集に登録されているタグ【広告】一覧をまとめています。
- タグ【マーケティング】
Web制作・運営・解析・SEO用語集に登録されているタグ【マーケティング】一覧をまとめています。
よくアクセスされている用語
- HTML
Webページを構成するために必要な言語のことです。 - PPC
クリックすることで課金される広告のことです。 - コーディング
HTMLやPHPなどのソースコードの記述を行うこと、またはその人員のことをいいます。 - 直帰率
初めてサイトに訪れたページでサイト内の他のページへ行かずにサイトから離脱した割合のことをいいます。 - ページビュー
Webサイトのページを表示された数のことをいいます。 - レスポンシブデザイン
一つのページ(URL)で使用OSや画面、ブラウザを問わず閲覧をサポートしているデザインをいいます。
その他カテゴリー
- GAレポート作成ツール
面倒なアクセス解析レポート作りはもうやめよう!
- Web担当者問題集
GoogleアナリティクスやSEOに関する問題集を作っています。
- Web運営用語集
Webや解析などでよく使う単語辞典ページを用意いたしました!
- よくあるご質問
よくいただくお問い合わせ内容の一覧になります。
- お問合せ・情報
当Webサイトについてのお問合せや様々な情報をこちらにまとめております。
- 新着情報・更新情報
当サイトの新着情報・更新情報はこちらから。