日に日に独立してフリーランスになりたい気持ちが強まってきた苦労詐欺だ。
本当は4月の内に動こうと思っていたのだが、なんだかんだ忙してくて動けなかったorz
流石に5月はGWもあるし、会社辞めてフリーランスになれるよう動いていきたいところ。
よくフリーランスの話で「自分から仕事をもらいにいかないと…」的な話を聞くけど、僕的には自らもらいに行くのと仕事の依頼をもらうの両方をやればいいんじゃないかと思うんだよね。
「自分から仕事をもらいにいかないと…」って話は会社勤めを辞めにくくさせている言葉の1つな気がするんだよな。
自ら行くのと依頼をもらうの両方をやればフリーランスのハードルってそんなに上がらないと思うんだよね～。
とまぁ、本題と関係ない話が長くなったけど、今回はレスポンシブサイトに関して書いていくよ。
PC・スマホ両方のSEOを視野にサイト作りを考えているなら僕はサイトをレスポンシブで制作することをオススメするよ。
今後はスマホ・PC両方のSEOが重要になるんじゃないかな？
以前、スマホSEOに関する記事を書いた時に、Googleが2015年からモバイルフレンドリーを実装したことについて触れたね。
これは簡単に言うと、スマホでの検索結果表示の評価はPCと別にあって、スマホに最適化されているかどうか判断基準を用意したよってことね。
外に出てバスや電車などの公共の乗物に乗ってみるとわかるけど、殆どの人がスマホ片手に操作していることが多いよね。
前々から言ってるけど、このサイトもアクセス解析からアクセス元を見てみるとスマホからのアクセスが半分以上を占めているんだよね。
これから先もスマホからのアクセスってのはかなり増えていくと思うし、PCからのアクセスもスマホほどじゃないけど増えていくんじゃないかなと。
これから制作するサイト、スマホのほうも視野に入れたいな～
こういったスマホSEOも視野に入れたサイトを作りたいのなら、僕はレスポンシブサイトをオススメするよ。
何故レスポンシブサイトをオススメするのか5つの理由を書いていくよ。
レスポンシブサイトってアクセスする媒体によって表示自動的に変更されるやつのことだよな？
正確にはウィンドウの幅によって表示を自動変更しているサイトのことよ。
あれの中身ってJavascriptとか使っているの？
やり方によるけど、cssで対応させることもできるわよ。
Javascriptもだけど、cssも奥が深いな。
これから、スマホSEOも視野に入れたサイトを作るのならばレスポンシブサイトがおすすめだよ。
レスポンシブはHTML＋cssで実装させることが可能だよ。
サイトの管理がPC、スマホの両方を一括でできる
PC表示用サイトとスマホ表示用サイトの2つを作ったサイトの場合、サイトの管理は単純に考えて2倍になるよね。
PC表示用サイトの何かしらを変更して、それをスマホ表示用にも反映させたい場合、スマホ表示用サイトの修正も行わないといけなくなるよね。
これが、レスポンシブなら、何かしらの修正や追加を行うのも、レスポンシブに対応できるように行えば1回の作業で済むよね。
修正・追加を行うものによっては、レスポンシブ対応させる必要が無い場合もあるから、こういった管理面が楽になるね。
注意しないといけないのはレスポンシブ対応させて追加・修正しないといけないものを、対応させずにやると、表示がおかしくなってしまうことかな。
サイトのレイアウトが崩れたりすると、見づらくなってそれだけで離脱に繋がるからそういった点には気をつけよう。
レスポンシブ対応させないといけないような追加・修正って例えばどんなものだ？
ん～、コンテンツなんかの表示幅が決まっているようなものかしらね。
レスポンシブの場合、コンテンツ幅とかを数値で指定しちゃうとおかしくなっちゃうから、％なんかで指定するのがいいわよ。
なるほど、ウィンドウの表示幅100%に大して何%ぐらいの大きさで表示させるってやれば数値に左右されないわけか。
あとは、css内の表示幅で表示を切り替えてる部分に追記するとかでもできるわよ。
レスポンシブにすればそういった追加・修正の作業が1回で済んで、効率がよくなるよ。
表示幅が決まっているようなコンテンツ等はちゃんとレスポンシブ対応になるようにしないと、レイアウトが崩れたりするから注意だよ。
annotation用にタグを設置する必要がない
PC・スマホ表示それぞれで専用のサイトを作っている場合、検索エンジン側にコピーだと認識されないようannotation用のタグを設置する必要があるよ。
annotation(アノテーション)ってのは、検索エンジンに「PCの場合とスマホの場合でそれぞれこのURLを見てね」とシグナルを送ることだよ。
まずPCサイトのほうにはalternateタグを設置して、その中にスマホサイトのURLを記載して、「スマホサイトは記載したURLのサイト内容を見てね」と送るよ。
スマホサイトのほうにはcanonicalタグを設置して、その中にPCサイトのURLを記載して「PCサイトは記載したURLのサイト内容を見てね」と送るよ。
詳しくは↓の記事が参考になるから、PC・スマホで表示を分けている人はannotationの処理もやっておこう。
ちなみにこのタグはheadタグ内に設置する必要があって、しかも、全ページに設置、URLもちゃんと該当ページのURLにしておく必要があるよ。
これらの処理が実はレスポンシブならやる必要がないんだよね。
PCでもスマホでも同じサイトを見てもらって、ちゃんとレスポンシブ化ができていれば、検索エンジンは評価をしてくれるからね。
ページ毎に該当URLに変更しないといけないから、PCとスマホで別表示しているサイトはこの処理が大変なのよね。
これから本格的にサイト作りして、スマホの方も視野に入れてるとかなら、レスポンシブのほうが楽そうではあるな。
まぁ、サイトをレスポンシブで作るにしても、やり方を勉強しないといけないから、その分は大変なんだけどね。
後々のメンテナンス面とか考えたら、レスポンシブのほうがいいだろ。
全ページに設置が必要で、しかも、該当URLにしないといけないから、そこそこ手間がかかるよ。
レスポンシブサイトはきちんとレスポンシブになっていれば、PCサイトとしてもスマホサイトとしても認識されるから、こちらのほうが楽だよ。
リダイレクトの設定をする必要がない
リダイレクトはサイト移転やサイトの一部を移動させた時なんかに、サイトを訪れたユーザーを正しいURLに移動させる処理のことだよ。
今回の場合、PCサイトにアクセスしたスマホユーザー、スマホサイトにアクセスしたPCユーザーをそれぞれ正しい方に移動させる処理になるよ。
PCサイトとスマホサイトでそれぞれ表示用サイトを作っている場合、PCサイト用のアドレスとスマホサイト用のアドレスの2つのアドレスが存在することになるね。
入り口が2つ有るわけだから、PCでもスマホでもどちらの入り口にもアクセスすることが可能なわけだね。
だから、ユーザーがサイトにアクセスして来た時に、どの端末でアクセスしてきたかを認識して、それに合わせたサイトが表示されるようにリダイレクト処理を入れる必要があるよ。
これがレスポンシブサイトなら、PCもスマホも同一サイト・同一URLだから、リダイレクトの処理自体必要がなくなるよ。
この場合のリダイレクトもちゃんと該当ページのURLに飛ばすものにしないといけないわね。
annotationのときもそうだけど、該当ページが存在しない場合はどうするんだ？
その場合はトップページに飛べるようにしておけばいいわよ。
ここらへんはリダイレクトの処理と同じで、該当ページが存在していれば極力そっちへ飛ばせってことね。
annotationの処理と同じく、該当ページが存在しているのであれば、該当URLに飛ばすように処理させる必要があるよ。
レスポンシブサイトならサイト・URLが同一のものになるからリダイレクトの処理そのものが要らなくなるよ。
アクセス解析の設定がしやすい
Googleアナリティクスのようなアクセス解析の場合、アナリティクスのトラッキングコードは全ページに設置する必要があるよ。
だから、PCサイトとスマホサイトが別表示になっている場合は、PCサイトの全ページ・スマホサイトの全ページにトラッキンコードを設置することになるよ。
これも単純に考えれば作業は倍になっちゃうね。
何かしらのcms(サイトを管理するシステム)が導入されていて、headの中身を統一しているのであれば、そこに設置すれば問題ないけど、そじゃないのならトラッキングコードの設置に時間がかかっちゃうよ。
レスポンシブサイトなら、PC側で全ページのhead内にトラッキングコードを設置するだけだから、ページ別にheadが用意されていても、作業時間が倍になったりはしないよ。
こういった管理面において、レスポンシブサイトはかなり優秀なものだと僕は思うよ。
そもそもトラッキングコードって全ページに貼り付けないといけなんだよな？
そうしないと正しいデータが取得できないわね。
PC・スマホで別サイト表示なら、ヤッパリ作業が倍ってことか…
cmsが入ってて共通のheadになってないとかなり面倒くさいわね。
Googleアナリティクスのトラッキングコードは全ページに設置しないといけないよ。
PC・スマホで別サイトを表示している場合、スマホサイトへの設置もしないといけないから、作業が倍になるよ。
レスポンシブなら、サイト1つだからこれまでと同じ作業量で済むよ。
ページ表示速度が向上する
PCサイトとスマホサイトが別表示の場合、アクセスして来たユーザーの端末を認識して、それに合わせたリダイレクトを行っていることは説明したね。
リダイレクトが行われる分、他のサイトと比べてページの表示速度が遅くなっちゃうよね。
モバイルフレンドリーの内容には、必須ではないけどページ表示速度の向上が含まれているね。
レスポンシブサイトならリダイレクトする必要がない分、ページ表示速度が早くなるし、モバイルフレンドリーとしても有利になるね。
リダイレクトってそんなに重く無さそうに感じるけど、一度サイトを読み込んで、もう一度サイトを読み込んでいるから、読み込み回数は計2回になるよね。
それと比べてレスポンシブはサイトの読み込みが1回で済むわけだから、表示速度に差が出るのは必然的になってくるね。
そうか、リダイレクトさせるためには、一度サイトの読み込みしなきゃできないか。
そうね、基本的にリダイレクトのコードは一度サイトを読み込まれなきゃ、読み込まれないわね。
レスポンシブにAMPを合わせたらかなり読み込み速度上がりそうだな～
早くなるかもしれないけど、表示されている画像とか吹き出しがおかしくなる可能性があるから注意が必要よ。
その結果ページ表示速度が遅くなると考えられて、レスポンシブにすれば読み込みが一度で済む分、PC・スマホ別表示サイトよりもページ読み込み速度が早いと考えられるよ。
AMPとレスポンシブを組み合わせれば表示速度は早くなるけど、画像や吹き出しのレイアウト・表示がおかしくなる可能性があるよ。
まとめ
それじゃあ、レスポンシブサイトに関するまとめをしていくよ。
- モバイルフレンドリーの実装とスマホの普及で今後PC・スマホ両方へのSEOが重要になってくると考えられるよ
- スマホへの対応も考慮したサイト制作をするならレスポンシブサイトがオススメだよ
- サイトの修正や追記等のサイト管理がレスポンシブなら一括でできるよ
- PC・スマホ別表示サイトの場合、スマホ表示用のページ分の管理まで行わないといけないよ
- レスポンシブでの追加や修正の際、場合によってはレスポンシブ対応になるようにしないといけないよ
- レスポンシブサイトならannotation用のタグを設置する必要がないよ
- PC・スマホ別表示の場合はPCサイト・スマホサイトそれぞれにannotation用のタグを設置する必要があるよ
- annotation用のタグは全ページに設置して、中のURLは該当するページのURLにする必要があるよ
- annotationの設定はやっておかないと検索エンジンにコピーサイト認識されてしまうよ
- PC・スマホ別表示の場合、2サイト存在することになって、URLも専用のものになるからリダイレクトが必要だよ
- アクセスして来たユーザーの端末を識別してそれに合わせたサイトを表示させるためのリダイレクトだよ
- リダイレクトも該当するページに飛ばすようにしないといけないよ
- レスポンシブなら、同一サイト・同一URLだからリダイレクトの処理を入れる必要がないよ
- レスポンシブサイトならアナリティクスなどのアクセス解析の設置が1サイト分で楽だよ
- PC・スマホ別表示の場合、2サイト分のアクセス解析を設置する必要があるよ
- 何かしらのcmsが入っていて、共通のheadにでもなっていない限りはレスポンシブのほうが楽だよ
- PC・スマホ別表示の場合、リダイレクトの処理を行っている分、ページ表示速度が遅くなってしまうよ
- レスポンシブなら1サイト分の読み込みで済むから、PC・スマホ別表示サイトよりページ表示速度が早いよ
レスポンシブサイトで作ることによって、これだけのメリットがあるから、これからサイト制作を考えているならレスポンシブサイトのほうがオススメだよ。
デメリットとしては、ある程度知識を持っていないとコンテンツの追加が少し大変になることと、既に出来上がっているサイトのスマホ対応には向いていないことだよ。
既に出来上がっているサイトの場合、色々な箇所をレスポンシブに変更しないといけない分知識が必要だから、新しくサイトを作ったほうが早いと思うよ。
サイトのリニューアルや既存サイトのスマホ対応化なら、PC・スマホ別表示にするほうがいいと思うよ。