レスポンシブデザイン
一つのページ(URL)で使用OSや画面、ブラウザを問わず閲覧をサポートしているデザインをいいます。
概要
スマートフォンの普及から今日までに、現在ではPC閲覧者より圧倒的にスマホサイト閲覧者が多くなり、スマホ専用ページを作成するのは当たり前の時代になりました。
昔の話になりますが、もともと黎明期はスマートフォン向けのサイトもなかったので、とりあえず急ピッチで作っていたサイトも多くありました。
しかし、情報量でPCサイトと格差が大きすぎたことが問題で、内容の薄いスマートフォンサイトは評価されない状態になります。
一部はPC版とスマホ版でそれぞれページを分けて作っていましたが、2ページ分の更新の手間や情報の整合性チェックに工数がかかる問題があり、レスポンシブデザインに大きな注目が集まる形になりました。
レスポンシブデザインは、一つのページであらゆる画面に対応できるため、テキストや画像の更新は当該ページ1つ更新するだけですべてのブラウザ対応が完了します。
主にはCSS内で特定の画面サイズになるとレイアウトが変わるようにプログラムを組むことで実装されます。
この用語のメモ
レスポンシブデザインを実装する場合、javascriptで閲覧OSを判別し、別々のCSSを読み込むことでレイアウトを分岐させる方法や、CSS自体の記載方法でメティアクエリを使用し、ブラウザのディスプレイサイズによって表示方法を変更する方法があります。
当サイトはこのメディアクエリを使用してブラウザサイズに応じたレイアウト組みを実装しています。
※ディスプレイサイズを変更してみてください。
この用語の使いどころ
レスポンシブデザインはメリットがとても多いため、運営者としては更新工数をできるだけ抑え込み、且つSEO内部施策にも効果があるため導入したいところです。
しかしながら制作費としてはPCサイト構築に加え、1.5~2倍近い金額でレスポンシブデザイン構築費がかかることも珍しくありません。
予算が決まっている担当者には非常にネックになる部分です。
運営者側で導入を目指したい場合はレスポンシブデザインにする事による年間工数をしっかり見積り、費用の妥当性を自社の決済者に相談するとよいでしょう。
制作側はサイトのニーズを元にクライアント側へメリットやデメリットを含め伝えることが大切です。
なぜ必要なのかを必ずセットで話をしましょう。
関連用語
- CSS
- モバイルユーザビリティ
- 内部施策
Web担当・運営・解析・SEO問題集の例題問題
レスポンシブデザインに関連するジャンルの練習問題を掲載しています。Web担当・運営・解析・SEO問題集一覧から各ジャンルの問題にチャレンジできます。
クリックすると問題の答えと解説が見れます。
- imgタグ
- marqueeタグ
- spanタグ
- aタグ
- divタグ
この答えの解説
pタグはインラインタイプのタグなので、ブロックレベルタイプのdivタグやulタグは構文上入れ込むことができません。
- headタグ
- bタグ
- aタグ
- timeタグ
- marqueeタグ
この答えの解説
headタグのみ、bodyタグ外に設置されるタグなのでページ内に表示されません。
しかし、ヘッダー情報があることによりGoogleの検索結果に表示させたりブラウザのタブにページのタイトル名を表示させたりすることができます。
また、SNSなどと連携して画像を表示させたりする機能もこのheadタグ内に様々なタグを用いて設置します。
- blockquoteタグ
- emタグ
- centerタグ
- labelタグ
この答えの解説
centerタグは、HTML5では廃止されました。
CSSのmargin属性(左右auto指定)や、text-align属性でcenter指定(IEではmargin属性だけでは反応しない)する形でセンタリングします。
- Googleのアルゴリズムを逆手に取り、他サイトの順位を下げる手法
- Googleのアリゴリズムを逆手に取り、不正に検索結果に表示させる手法
- Googleのアルゴリズムを熟知し、コンテンツを作り上げていく手法
- Googleのアリゴリズムを熟知し、ユーザーの目的に合った結果結果を表示させる手法
この答えの解説
ブラックハットSEOは、Google検索システムに「ノイズ」を発生させ、本来不要である検索結果が表示されてしまうことを狙ったSEO手法であり、非常に悪質なものです。
他サイトの順位を下げる手法として、「逆SEO」と呼ばれる手法が有名ですが、こちらも非常に悪質です。
いずれにしても、アルゴリズムの抜け道を狙ったSEOは重いペナルティーを科されるため、間違ってもやらないようにしましょう。
- リンクに強い業者
- ライターが多数在籍の業者
- Googleのアルゴリズムに詳しい業者
- レスポンシブデザインなどhtmlコーディングに精通した業者
この答えの解説
いずれも強いことに越したことはありませんが、特に大切だと思うのはしっかりサイトを作り込んでいるかどうかが最優先だと考えます。
コーディングがしっかり作り込まれているサイトは、更新しやすくコンテンツの追加も行いやすいため、更新頻度が高くなるのと、良質なコンテンツを作成することに工数を割くことができるため、結果的に長期的な成果を出しやすいサイトにできると考えています。
- アクセス数を伸ばすため
- ブランド戦略で成功するため
- 特定のユーザーの流入を増やすため
- Googleに気に入られるようにするため
この答えの解説
Googleに気に入られるのは誤りです。
最も大事なのはご自身のサイトに来てほしいユーザーにより良いコンテンツを提供する事です。
- セグメントが反映されたデータはエクスポートもできる
- セグメントは最大4つまで同時表示できる
- セグメントは500個まで設定できる
- セグメントはアクセス時間や特定の参照元など細かい設定ができる
- ユーザー属性毎に詳細に情報を抽出できる
この答えの解説
セグメント設定は、一ユーザー、一つのビューにつき100個までと決められています。
それ以上のセグメントは作成できないため、不要なセグメントを整理する必要があります。
- google / organic
- bing / organic
- Twitter / organic
- Yahoo / organic
この答えの解説
Twitterは自然検索ではなく、ソーシャルメディアからの流入になるため「Twitter / Social」が正解です。
Organicは主にGoogleやYahooがほとんどを占めますが、海外にも展開されている場合は「bing」や「ask」等の対策も力を入れる方が良いかもしれません。
- 直帰率が高いが離脱率は低いので特に改善しない
- 離脱率は高いが直帰率は低いので特に改善しない
- 離脱率が高いので直帰率が低くても改善が必要
- 直帰率が高いので離脱率が低くても改善が必要
この答えの解説
トップページのみを対象としているため、直帰率改善は最優先事項になります。
直帰率を抑えることはサイト全体における回遊にも繋がります。
ファーストビューや下層リンクへのナビゲーションがうまく機能させることが重要です。
関連タグ【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つをマスターすることで大半の業務が行える形になります。
浅く広く習得するか、深く狭く習得するかは得手不得手で決めればよいのではと思います。
Webサイトの制作は、現在では分業化が当たり前になってきているため全てを習得しなければいけない訳ではありません。
そのため、デザインからやらないとダメ、コーディングからやらないとダメ、というのはなく、覚える順番は任意で決めてもらって問題ありません。
ことWebに関して言えば、覚えるというよりかは「盗んでいく」というスタイルが、覚える作業としては適切ではないかと思います。
関連タグ【SEO】に関するよくある質問
アクセス解析に関するよくある質問を抜粋しています。SEOに関するよくある質問はこちらから。
まずはGoogleアナリティクスとGoogleサーチコンソールを導入し、サイトに訪れる際に検索されているキーワードを探してみましょう。
次に、今展開しているコンテンツが「その検索キーワードにマッチしている内容かどうか」をしっかり精査した上でサービス説明を組み替えたり、検索されやすいキーワードを文中に文法上意味の通る状態を考慮した上で組み込むなどのてこ入れをしていきます。
まず、どのように攻撃されているかを冷静に見ていきましょう。特に多いのが「リンク」攻撃です。
不自然なリンクがあり、理不尽なペナルティが届いたら「リンク否認」をすぐに行いましょう。
SEO業者などによって質の低いコンテンツが載っているサイトからの大量のリンクが張られたりする悪質な手口を実行してくることがあるため、Googleから通知が着たら「あわてず」「冷静に」「URLを確認してリンク否認」を実行しましょう。
そして、「手動による対策」が表示されていた場合は、「不適切なサイトからのバックリンクがあったため、リンク否認を行いました。対象サイトはhttp://○○です。」といったような内容で送ると良いでしょう。
良いところは何といっても対策を行ったことで検索結果で自身のサイトが取り上げられ、予想以上の顧客獲得につながることです。自分のサイトを多くの人に知ってもらい、自分のサービスを多くの人に触れてもらい、使ってもらえるようになるためにSEOを頑張る。
悪いところは、やはり誤魔化しは効かないという点です。そして、未だにそういった不正な順位アップをもくろむネット運営者がいることも事実です。
手動による対策で下がった場合は、1つ上の質問の内容の通り、コンテンツの中身を精査してみてください。
競合が順位が上がったことにより、順位が落ちることも当然ながら多々あります。
そのような場合は、相手のコンテンツのどういった点がよさそうに感じるのか、キーワードの頻出具合はどのようになっているのか、コンテンツに厚みや面白味があるか、どの端末でも問題なく閲覧できているか、サイトが軽いか(容量が少なく済んでいるか)。
ざっと思いつくものでもこれだけあります。競合と比べて劣ってそうと思うところは1つずつ地道に改善していきましょう。SEOは一日にして成らずです。
Fetch as Google自体はGoogleサーチコンソールのアップデートによって終了してしまいました。現在では、それに変わるツールに「URL検査」というものがあります。
対象のURLを入れ込み、URLのステータスを出力してください。出力されたページの現在の状況が確認できます。
その中に「インデックス登録」という項目が選択できる場合、インデックスをリクエスト(再クロール)することができます。
リクエストしたURLは、最大2~3日くらいでインデックスされるかされないかが決定し、された場合はインデックスされた数に追加されます。
関連タグ【アクセス解析】に関するよくある質問
アクセス解析に関するよくある質問を抜粋しています。アクセス解析に関するよくある質問はこちらから。
基本的には良かった点→理由、悪かった点→理由を簡潔に伝えたあとに望みの薄い解決策でも良いので解決策を必ず伝えるようにしています。
決策を述べた後に別の解決策を思い付くこともあります。そうすると議論が発生するかもしれません。
それを発生させることこそがWeb運営で最も大事なことではないかと思います。
まずは必要以上に情報を入れすぎないようにした方がよいでしょう。
沢山記載することは大切ではありますが、数値を見てもらい理解してもらうには沢山の情報は邪魔になります。
具体的には、資料のボリュームと話するボリュームが同じ位に量を調整すると伝わりやすいです。
すでにGoogleアナリティクスのアカウントがあることが前提ですが、Webサイトを運営している担当者もしくは担当部署にお手持ちのGoogleのメールアドレスをお知らせください。
担当者もしくは担当部署にてアカウント設定を行い、設定完了すればご自身のGoogleアナリティクスのアカウントにWebサイトが追加され、様々な情報が閲覧できます。
権限の状態によっては細かい設定もできるようになります。
出力が必要な指標が多いサイト(ランキングやある特定の状況下でのアクセス等)であれば、基本的なサマリーを表示するために使用することはあります。
とくに、広告を扱うようなサイトであれば多視点から情報を集めなければならないため、短時間での状況把握をするべく使用することがあります。
一般的な企業サイトや個人サイトであれば、ユーザーサマリーの概要をしっかりつかんでおけば十分だと思います。
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サイトについてのお問合せや様々な情報をこちらにまとめております。
- 新着情報・更新情報
当サイトの新着情報・更新情報はこちらから。