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

レスポンシブデザイン

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

概要

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

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

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

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

この用語のメモ

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

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

この用語の使いどころ

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

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

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

関連用語

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

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

Q:h1~h6タグの入れ子(直下に入るタグ)で不適切なものを選んでください。
  • canvasタグ
  • iframeタグ
  • 不適切なものはない
  • imgタグ
  • buttonタグ

この答えの解説

実は全て入れ子にできるタグです。しかし、あくまで「見出しタグ」であることをきちんと理解したうえでタグを使用しましょう。
見出しなのに画像や別フレームなどが入ると構造的に非常におかしい形になってしまいます。

Q:次のタグの説明で正しいものを選んでください。
  • divタグは段落タグと言い、タグの中に文章や画像などのコンテンツが入る
  • h1タグはタイトル名が入るタグである
  • pタグは段落タグと言い、タグの中に文章や画像などのコンテンツが入る
  • ulとliはリストタグで、順序があるリストである

この答えの解説

pタグが段落タグと呼ばれます。
divタグは汎用タグ、h1は見出しタグ、ul・liタグのulはunordered listの略で、順序のないリストを示しています。

Q:次のタグのうちHTML5で使用できないタグを選んでください。
  • blockquoteタグ
  • emタグ
  • centerタグ
  • labelタグ

この答えの解説

centerタグは、HTML5では廃止されました。
CSSのmargin属性(左右auto指定)や、text-align属性でcenter指定(IEではmargin属性だけでは反応しない)する形でセンタリングします。

Q:SEO業者を選ぶ上で長期的に見て失敗する可能性がある業者を選んでください。
  • 外部施策制作費のみの費用を請求する業者
  • 内部施策制作費のみの費用を請求する業者
  • 成果報酬型費用を請求する業者
  • 1ヶ月単位での一式費用を請求する業者

この答えの解説

もちろん良好な企業様も居られることは承知の上ですが、1ヶ月単位で「一式請求」している企業は、きちんと内訳を聞いておく必要があります。
内訳が不透明な場合、知らず知らずのうちにGoogleのガイドライン違反を起こし、問題が起こった際に連絡が取れなくなるケースが起こりえます。
また、契約が途中でやめられず違約金を請求する業者もあるため、施策対応前によく確認することをオススメします。

Q:SEOの施策のうち、最も行った方がよいものを選択してください。
  • Webサイトのレスポンシブデザイン化
  • カテゴリーページの追加
  • 長い記事の分散化
  • キーワードの頻出化
  • h1、h2、h3タグの追加

この答えの解説

いずれも施策としては行った方が良いものばかりですが、何より「どんなユーザーでも等しく情報を的確な状態で提供できる」レスポンシブデザイン化が最も行うべき施策だと考えます。
サイトのユーザーのうち、99%くらいがPCユーザーの場合は別ですが、基本的には誰でも問題なく情報が得られるサイトが最も評価されます。

Q:URLが変わるサイト移設対応として間違っているものを選択してください。
  • 301リダイレクト
  • 移設前サイトの移設後サイトへの告知
  • 新ブックマーク先の案内
  • 302リダイレクト
  • メルマガやSNSによる告知

この答えの解説

302リダイレクトは、単なる「一時的な転送」に用いられる記述になります。
リダイレクト方法を間違えると、サイトの評価を引き継げなくなるため、悲惨な状況を避けるためにもサイトを閉鎖する際は必ずリダイレクト方法を確認しましょう。

Q:次の内、コンバージョン率の算出方法で適切なものは?
  • 成約数÷ページビュー数=コンバージョン率
  • 成約数÷ユーザー数=コンバージョン率
  • 成約数÷セッション数=コンバージョン率
  • 成約数÷アクセス数=コンバージョン率

この答えの解説

コンバージョン率は、Googleアナリティクスで設定して計測した「目標(成約)数」を、訪問者数(セッション数)で割った数字で計測されます。
例えば、700名の訪問数に対し成約数が28件だった場合のコンバージョン率は4%になります。

Q:ユーザーエクスプローラで解ることを選んでください。
  • ある特定のユーザーの行動履歴から、コンバージョンに至ったルートを解析できる
  • ある特定のユーザーが購入などをしてコンバージョンをし、目標に寄与した割合を見ることができる
  • ある特定のユーザーの年齢や性別などのパーソナルデータを見ることができる
  • ある特定のユーザーの入力フォームの内容を辿ることができる

この答えの解説

ユーザーエクスプローラはあるCookie情報を持ったユーザーの閲覧履歴を追跡できる機能です。
コンバージョンに至るまでの中間ページや滞在時間等から、なんの情報記載を元に行動に移したのかの推測や仮説が立てられるようになります。

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

この答えの解説

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

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

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

Webサイトを作成する場合、最初に覚えた方がいいものは何ですか?

Webサイトの制作は、現在では分業化が当たり前になってきているため全てを習得しなければいけない訳ではありません。
そのため、デザインからやらないとダメ、コーディングからやらないとダメ、というのはなく、覚える順番は任意で決めてもらって問題ありません。

ことWebに関して言えば、覚えるというよりかは「盗んでいく」というスタイルが、覚える作業としては適切ではないかと思います。

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

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

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

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つをマスターすることで大半の業務が行える形になります。
浅く広く習得するか、深く狭く習得するかは得手不得手で決めればよいのではと思います。

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

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

手動による対策って何ですか?

Googleから何らかのガイドライン違反が判明したときに、検索順位を落としたり、検索結果から除外する処置が取られます。

コンテンツに問題がある場合は内容を改めて精査し、修正を直ちに行う必要があります。(大量のコピーコンテンツがある、他サイトにある文言がそのままほぼ全てコピーされている)

しかし、中には不正に何者かが大量のスパムリンクを勝手に張られていることによって著しく品質が意図せず落ちていることもあるため、被リンクチェックは日ごろから行うことをオススメします。

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

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

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

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

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

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

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

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

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

検索順位が落ちた場合はどうしますか?

手動による対策で下がった場合は、1つ上の質問の内容の通り、コンテンツの中身を精査してみてください。

競合が順位が上がったことにより、順位が落ちることも当然ながら多々あります。
そのような場合は、相手のコンテンツのどういった点がよさそうに感じるのか、キーワードの頻出具合はどのようになっているのか、コンテンツに厚みや面白味があるか、どの端末でも問題なく閲覧できているか、サイトが軽いか(容量が少なく済んでいるか)。

ざっと思いつくものでもこれだけあります。競合と比べて劣ってそうと思うところは1つずつ地道に改善していきましょう。SEOは一日にして成らずです。

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

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

サイトのアクセス状況を見るにはどうすればよいですか?

すでにGoogleアナリティクスのアカウントがあることが前提ですが、Webサイトを運営している担当者もしくは担当部署にお手持ちのGoogleのメールアドレスをお知らせください。

担当者もしくは担当部署にてアカウント設定を行い、設定完了すればご自身のGoogleアナリティクスのアカウントにWebサイトが追加され、様々な情報が閲覧できます。

権限の状態によっては細かい設定もできるようになります。

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

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

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

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

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

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

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

どんなレポート内容が喜ばれることが多いですか?

単純明快に「ここがよい」「ここが悪い」がはっきりしたグラフや数値の表記と、それに対するコメントや提案を記載していると、議論が進みやすく喜ばれやすいです。

複雑にしすぎると、概要が頭に入らなくなりがちになるため、「で、結局何が悪いの?」と打ち合わせの後半で陥る可能性があります。

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

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

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

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

索引から探す

タグから探す

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

その他カテゴリー

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

スポンサードリンク