Web制作・運営・解析・SEO用語集

レスポンシブデザイン

一つのページ(URL)で使用OSや画面、ブラウザを問わず閲覧をサポートしているデザインをいいます。

概要

スマートフォンの普及から今日までに、現在ではPC閲覧者より圧倒的にスマホサイト閲覧者が多くなり、スマホ専用ページを作成するのは当たり前の時代になりました。

昔の話になりますが、もともと黎明期はスマートフォン向けのサイトもなかったので、とりあえず急ピッチで作っていたサイトも多くありました。
しかし、情報量でPCサイトと格差が大きすぎたことが問題で、内容の薄いスマートフォンサイトは評価されない状態になります。

一部はPC版とスマホ版でそれぞれページを分けて作っていましたが、2ページ分の更新の手間や情報の整合性チェックに工数がかかる問題があり、レスポンシブデザインに大きな注目が集まる形になりました。

レスポンシブデザインは、一つのページであらゆる画面に対応できるため、テキストや画像の更新は当該ページ1つ更新するだけですべてのブラウザ対応が完了します。
主にはCSS内で特定の画面サイズになるとレイアウトが変わるようにプログラムを組むことで実装されます。

この用語のメモ

レスポンシブデザインを実装する場合、javascriptで閲覧OSを判別し、別々のCSSを読み込むことでレイアウトを分岐させる方法や、CSS自体の記載方法でメティアクエリを使用し、ブラウザのディスプレイサイズによって表示方法を変更する方法があります。

当サイトはこのメディアクエリを使用してブラウザサイズに応じたレイアウト組みを実装しています。
※ディスプレイサイズを変更してみてください。

この用語の使いどころ

レスポンシブデザインはメリットがとても多いため、運営者としては更新工数をできるだけ抑え込み、且つSEO内部施策にも効果があるため導入したいところです。
しかしながら制作費としてはPCサイト構築に加え、1.5~2倍近い金額でレスポンシブデザイン構築費がかかることも珍しくありません。
予算が決まっている担当者には非常にネックになる部分です。

運営者側で導入を目指したい場合はレスポンシブデザインにする事による年間工数をしっかり見積り、費用の妥当性を自社の決済者に相談するとよいでしょう。

制作側はサイトのニーズを元にクライアント側へメリットやデメリットを含め伝えることが大切です。
なぜ必要なのかを必ずセットで話をしましょう。

関連用語

Web担当・運営・解析・SEO問題集の例題問題

レスポンシブデザインに関連するジャンルの練習問題を掲載しています。Web担当・運営・解析・SEO問題集一覧から各ジャンルの問題にチャレンジできます。
クリックすると問題の答えと解説が見れます。

Q:次のタグのうち、tableタグの入れ子に含まれないものを選んでください。
  • tbodyタグ
  • dtタグ
  • thタグ
  • trタグ
  • tdタグ

この答えの解説

dtタグは、dl(定義リスト)タグの入れ子になります。dlタグの入れ子にdtタグとddタグを使用します。
dtタグとddタグは、「質問と答え」の関係のような人まとまりの意味を持つ表現をしたいときに使うため、Q&Aなどのサイトに多用されます。

Q:次のタグのうちHTML5で使用できないタグを選んでください。
  • frameタグ
  • timeタグ
  • embedタグ
  • preタグ

この答えの解説

frameタグは、HTML5では廃止されました。
HTML5ではiframe(インラインフレーム)が引き続き使用できますが、frameはHTML5を文章構造、CSSを装飾指定に分割する過程上で廃止となりました。

Q:次のタグのうち、存在しないタグを選んでください。
  • mainタグ
  • sideタグ
  • headerタグ
  • articleタグ
  • preタグ

この答えの解説

sideタグは存在しません。
非常に似たタグ名にasideタグというものがあり、こちらは印刷物でいう欄外項目の表示にあてがわれます。

Q:次のうち、モバイルユーザビリティでないと判断されやすい内容を選択してください。
  • リンクとリンクの間の間隔が10px以下で作っている
  • エレメント(リンク要素があるコンテンツ)が動く要素が多数設置されている
  • サイトに埋め込まれている画像の解像度が高い
  • サイトは可変式だがメタタグのviewportが設定されていない

この答えの解説

リンクとリンクの間隔が狭すぎると、誤動作が発生しやすくユーザビリティ面においては指摘を受けやすい内容になります。

Q:SEOの施策について当てはまらないものを選んでください。
  • 外部施策
  • キーワード選定
  • コピーコンテンツ作成
  • 内部施策
  • ディレクトリの見直し

この答えの解説

コピーコンテンツは、Googleのアルゴリズムガイドラインに違反する行為になります。
コピーコンテンツが多く発見された場合、低品質なコンテンツとみなされてしまいます。

Q:公開したばかりのサイトをGoogle検索エンジンにクローリングされる最速の手段を選択してください。
  • fetch as Googleを使う
  • URL検査を使う
  • sitemap.xmlを作成し、Googleサーチコンソールから読み込む
  • クローリングされるまで放置する

この答えの解説

現在のGoogleサーチコンソールでは、残念ながらfetch as Googleは廃止されています。
代わりの手段としてURL検査があり、そこから「再クロール」はできますが、問題としては「公開直後のサイト」なので、sitemap.xmlをアップし、Googleにページを認識させなければ表示すらされません。

Q:直帰率と離脱率の違いの説明で適切なものを選んでください。
  • 直帰率はサイトに訪れ他のページを見ずにサイトから離脱した割合で離脱率はそのページを最後にサイトから離脱した割合
  • 直帰率はサイトに訪れ他のページを見てまたサイトに訪れたページに戻った割合で離脱率はそのページを最後にサイトから離脱した割合
  • 直帰率はサイトに訪れ他のページを見ずにサイトから離脱した割合で離脱率はサイトのフォーム画面からサイトのトップページに戻った割合
  • 直帰率はサイトに訪れ他のページを見てまたサイトに訪れたページに戻った割合で離脱率はサイトのフォーム画面からサイトのトップページに戻った割合

この答えの解説

直帰率はランディングページ(閲覧開始ページ)を対象とした指標のため、閲覧開始したページ内で別のドメインや検索サイトに遷移、もしくはブラウザを閉じると直帰率が記録されます。
離脱率は閲覧開始ページ以外のページにて別のドメインや検索サイトに遷移、もしくはブラウザを閉じると離脱率が記録されます。

Q:ページビュー数が増加した要因として考えられるものを選んでください。
  • サイト内の導線を改善した
  • 選択肢の全て
  • ページ送りなどの機能をつけた
  • レコメンド機能をつけた
  • 各ページに関連カテゴリーリンクをつけた
  • パンくずリストをつけた

この答えの解説

いずれも可能性としては挙げられます。
共通している点としては、内部リンクの強化になります。
コンテンツ間での繋がりが明確であれば、ページ単位のSEO効果も高まりやすくなります。

Q:「離脱率」について、正しい事を伝えている内容を選んでください。
  • 離脱率が低いサイトは人気がない
  • 離脱率のサイト全体の平均が低ければ対策は不要
  • 新規訪問割合が高ければ離脱率対策は不要
  • 離脱率の高いページは対策が必要

この答えの解説

離脱率は、そのページを最後に当該サイト外へ移動した=離脱した割合になります。
ただ、Q&Aページや申込完了ページ等の「ユーザーの目的が完了」が想定されるページについては、それ以上の展開を必要とする場面以外は問題なしと判断しても良いでしょう。

関連タグ【Web制作】に関するよくある質問

Web制作に関するよくある質問を抜粋しています。Web制作に関するよくある質問はこちらから。

Web制作に必要なソフトを教えてください。

製作工程に応じて使いやすいソフトが大筋決まっていることが多いです。

構成案やサイトマップを作る際はMicrosoftの「Excel」や「PowerPoint」が鉄板です。
大まかなデザイン枠を作る分にはPowerPointがあれば十分作れますし、サイトマップやスケジュール・見積もりなどの情報は、Excelがほとんど使われることが多いです。
いずれもPDFに手軽に変換できる点も非常に使いやすい要因となっています。

デザイン面では、Adobeの「Illustrator」か「Photoshop」が鉄板で、まれに「Fireworks」を使用しているユーザーもいます。
一般的に紙媒体もやっている企業では、「Illustrator」を使用してサイトデザインを制作しているケースが非常に多いです。

コーディング等ではAdobeの「Dreamweaver」がもっとも有名ですが、テキストエディタでコードを作成できる力があれば、ワードパットソフトの「Terapad」やGithubが提供している「Atom」も非常に使いやすいです。
コーディング面においてはファイルのエンコードとHTMLやCSS記載のエンコードをあわせないと文字化けも起こしてしまうので、個人的には「Terapad」が使いやすいと感じています。

運用面、特にアクセス解析などにおいてはこちらもMicrosoftの「Excel」や「PowerPoint」が非常に使われます。ツールとしては「Googleアナリティクス」と「Googleサーチコンソール」を使います。
Excelはうまく使えば得られたアクセス情報からさらに様々な視点でのアクセス情報を拾い出すこともできるため、Excelを使いこなせることができれば大きな武器になります。
アクセス解析等はディレクターが兼任しているケースも多いです。

ざっと上げましたが、全てを担当する場合は「Excel」「PowerPoint」「Illustrator」「Photoshop」「Dreamwerver」「Googleアナリティクス」「Googleサーチコンソール」の7つをマスターすることで大半の業務が行える形になります。
浅く広く習得するか、深く狭く習得するかは得手不得手で決めればよいのではと思います。

CSSの最大の利点を教えてください。

何より少ない容量で「ある程度の動的動作」や「サイトの整形」が出来る点だと思います。
また、手軽にスマホサイト対応ができる「メディアクエリ」が使用できるのも大きな利点で、こんにちのモバイル対応を支えているものになります。

CSSは、手段を覚えておけば覚えておくほど、レイアウトの調整手段が増えてくるため、容量を抑えつつ動作を行えるソースが作れます。

Webサイトを作るときにどんなことを意識していますか?

今でこそ、SEOを中心にコーディングを組むことが大半になってきているため言える話になりますが、Webサイトの一ページ一ページは「本」を作る意識を持って取り組んでいます。
ちゃんとタグにも「タイトル(表題)」や「見出し」、「段落」など、「作文」や「国語」にまつわる言葉が多く出てきますね。

Google側も同じように「記載されている内容」が「どの場面」で「どれぐらいの分量」の情報が「検索された内容に対し正確性があるか」が重要です。
コーダーやライターはその辺りを意識することが大切です。

デザイナーは、Googleよりも人間側が認知する視覚情報がもっともウエイトを占めるため、分かりやすさとトレンドをいかにストレスなくユーザーに供与できるかが大事で、ユーザーエクスペリエンスの精度に関わります。
Webサイトは、成長を前提に作ることが大事です。そういう意味では、いつまでもページが増え続ける「1巻だけの本」を作り続ける意識が必要ではないかと考えます。

関連タグ【SEO】に関するよくある質問

アクセス解析に関するよくある質問を抜粋しています。SEOに関するよくある質問はこちらから。

SEOの良いところと悪いところを教えてください。

良いところは何といっても対策を行ったことで検索結果で自身のサイトが取り上げられ、予想以上の顧客獲得につながることです。自分のサイトを多くの人に知ってもらい、自分のサービスを多くの人に触れてもらい、使ってもらえるようになるためにSEOを頑張る。

悪いところは、やはり誤魔化しは効かないという点です。そして、未だにそういった不正な順位アップをもくろむネット運営者がいることも事実です。

競合他社から攻撃されている可能性があります。どうしたらいいですか?

まず、どのように攻撃されているかを冷静に見ていきましょう。特に多いのが「リンク」攻撃です。
不自然なリンクがあり、理不尽なペナルティが届いたら「リンク否認」をすぐに行いましょう。

SEO業者などによって質の低いコンテンツが載っているサイトからの大量のリンクが張られたりする悪質な手口を実行してくることがあるため、Googleから通知が着たら「あわてず」「冷静に」「URLを確認してリンク否認」を実行しましょう。

そして、「手動による対策」が表示されていた場合は、「不適切なサイトからのバックリンクがあったため、リンク否認を行いました。対象サイトはhttp://○○です。」といったような内容で送ると良いでしょう。

SEOを行う上で何から行ったらよいかわかりません。

まずはGoogleアナリティクスとGoogleサーチコンソールを導入し、サイトに訪れる際に検索されているキーワードを探してみましょう。

次に、今展開しているコンテンツが「その検索キーワードにマッチしている内容かどうか」をしっかり精査した上でサービス説明を組み替えたり、検索されやすいキーワードを文中に文法上意味の通る状態を考慮した上で組み込むなどのてこ入れをしていきます。

Googleサーチコンソールって何ですか?

クリック数、コンバージョン率、合計表示回数、平均掲載順位などの検索キーワード関連の他にGoogleにインデックスするページを増やしたり不要なURLを削除したりするツールです。

サイトの構造を精査したりサイト上に検出されたエラーを修正することにより、検索結果に画像を表示、評価の★マークをつけたり等といった検索に効果をつけることもできます。

Fetch as Googleのようなクロールがすぐできるツールが消えてしまいました。どうしていますか?

Fetch as Google自体はGoogleサーチコンソールのアップデートによって終了してしまいました。現在では、それに変わるツールに「URL検査」というものがあります。
対象のURLを入れ込み、URLのステータスを出力してください。出力されたページの現在の状況が確認できます。
その中に「インデックス登録」という項目が選択できる場合、インデックスをリクエスト(再クロール)することができます。
リクエストしたURLは、最大2~3日くらいでインデックスされるかされないかが決定し、された場合はインデックスされた数に追加されます。

関連タグ【アクセス解析】に関するよくある質問

アクセス解析に関するよくある質問を抜粋しています。アクセス解析に関するよくある質問はこちらから。

アクセス解析を勉強したいですが、何から勉強したらいいですか?

Googleアナリティクスを使いこなせるようになりたいのか、アクセス解析の用語などの知識をつけたいのかによって、勉強するポイントは大きく変わります。

Googleアナリティクスを使っていく上ではまずは「ユーザー」「概要」に記載されている基本レポートの使い方を知るところから始まります。もっとも見る頻度が高いからです。
徐々に、「集客」の「トラフィック」や「行動」の「サイトコンテンツ」を知り、理解が進みページ前後の遷移状況などを見れるようになれば、「セグメント設定」を身に着けていく段階になります。

知識としては、離脱率と直帰率の違いをきっちり理解できればページの性質に合わせた説明をできるようになるのではと考えています。
アクセス解析に関する用語を習得する場合は、市販に売っている本や、用語解説をしているサイト等を参考にしてみましょう。
その際、単純に用語を知るだけでなく、使い道などにも触れている情報を参考にすると良いです。

Googleアナリティクスを見るにはどうしたらよいですか?

Googleアナリティクスを閲覧するには、まずGoogleアカウントが必要です。
何らかの連絡の取れるメールアドレスをお持ちであれば、Googleのログイン画面より新規アカウント作成を行ってください。

年齢別や地域別のアクセスはどんな時に使いますか?

一例ですが、特定の地域や年齢層、それから男女どちらかまたは両方に大きく支持されているのであれば、支持された層のトレンドを狙ったコンテンツや広告ワード、閲覧されてる時間帯に広告費用をかけるなどといった費用投資判断の指標に使えます。

アクセス解析レポートを作るうえで大切なことは何ですか?

まずは必要以上に情報を入れすぎないようにした方がよいでしょう。
沢山記載することは大切ではありますが、数値を見てもらい理解してもらうには沢山の情報は邪魔になります。

具体的には、資料のボリュームと話するボリュームが同じ位に量を調整すると伝わりやすいです。

レポートを用いて説明をするときどんなことに気を付けていますか?

基本的には良かった点→理由、悪かった点→理由を簡潔に伝えたあとに望みの薄い解決策でも良いので解決策を必ず伝えるようにしています。

決策を述べた後に別の解決策を思い付くこともあります。そうすると議論が発生するかもしれません。
それを発生させることこそがWeb運営で最も大事なことではないかと思います。

Googleのアカウントをとった後、何をすればよいですか?

Googleアナリティクスのサイトに移動し、ログインしてアカウントに入場してください。
なお、アカウント登録した直後であれば、なにも登録されていないはずです。

索引から探す

タグから探す

よくアクセスされている用語

その他カテゴリー

Webサイトトップページに戻る

スポンサードリンク