ウェブ ＝ モバイル となるわけです。 わかりやすく説明します。
今後はモバイルサイトの内容が検索順位にかかわってくる
Googleは公式のサイトでこう発表しています。将来的に Google のアルゴリズムはモバイル版のコンテンツを主に使用するようになります。つまり、ページのランキングを決定したり、構造化データを理解したり、検索結果にスニペットを表示する際も、モバイル版のコンテンツが使用されるようになります。もちろん、Google のインデックスがモバイル版のコンテンツで形成されるようになっても、デスクトップ端末かモバイル端末かに関わらず、すべてのユーザーに素晴らしい検索体験を提供し続ける点は変わりません。検索結果に反映する際に、モバイル版のコンテンツを主に使用するようになる。 モバイル版のウェブサイトのコンテンツが如何に、ユーザのことを考え作られているかが重要になります。 もっと簡単に言うと、スマホで使いやすいサイト作れよ！ってことです。
すでにレスポンシブデザインのサイトは特に何もしなくてよい
レスポンシブデザインや動的な配信を行っているサイトで、主要なコンテンツやマークアップがモバイル版とデスクトップ版で同一である場合は、何も変更する必要はありません。レスポンシブデザインの場合は何もせずにそのほかのSEO対策をしていきましょう。
スマホ・PCがそれぞれ独立している場合
スマホサイト・ＰＣサイトが独立している場合、以下の対応が必須になります。-
構造化データ マークアップがデスクトップ版とモバイル版の両方で配信されるようにします。構造化データ マークアップの同一性を確認するには、構造化データ テストツールにデスクトップ版とモバイル版の両方の URL を入力し、出力結果を比較します。モバイルサイトへ構造化データを追加する際は、それぞれのドキュメント特有の情報に関係のないマークアップを大量に追加するのは控えます。
-
robots.txt テスターを使用してモバイル版のコンテンツに Googlebot がアクセス可能であることを確認します。
-
rel=”canonical” リンク要素を変更する必要はありません。デスクトップとモバイルのそれぞれの検索ユーザーにとって適切な結果を表示するために、Google はそれらのリンク要素を引き続き使用します。
PC版しかない場合はどうすりゃいいのさ
では、PC版のウェブサイトしかない場合、どうすればいいのか。 新たにスマホサイトを作るべきなのか、無理やりレスポンシブ対応したほうがいいのか、 それともPC版だけでいいのか。 Googleさんはこう言っています。デスクトップ版のサイトしか存在しない場合、Google は引き続きデスクトップ版のサイトをインデックスします。モバイルユーザーエージェントを使用してアクセスする際も問題ありません。 デスクトップ ユーザーにとって使いやすいサイトは、壊れたり不完全なモバイルサイトよりも、モバイルユーザーにとって好ましい場合があります。モバイルサイトを作成する際は、サイトが完成し準備が整ってから公開することをおすすめします。つまり、変なスマホサイト作るくらいなら、ちゃんとしたPCサイト”だけ”の方がいいよということです。
読み込みスピードも評価対象
この ”Speed Update” （と私たちは呼んでいます）は、ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し、ごくわずかな割合のクエリにしか影響しません。 そのページがどのような技術を用いて制作されたかに関係なく、すべてのページに同じ基準を適用します。ＰＨＰによる動的なサイトでも、htmlによる静的なサイトでも、一緒くたに評価されるようですね。 ただし、次の文言が気になる。
検索意図は依然として非常に強いシグナルですので、魅力的で検索クエリと関連性の高いコンテンツは、ページの読み込み速度が遅くても高い順位に掲載される場合もあります。つまり、ユーザが検索したワードによっては、読み込み速度にかかわらず上位表示されるということ？ となると、そもそも「上位表示」に対する対策が難しくなりますね。（これも検索エンジンのあるべき姿かもしれませんが。）
読んで字の如く。「スクリブトによるファイルへの書き込み」を許可するかどうかのチェックで、Bodymovinを使ってファイルを書き出す時に、「あなたのPCの任意の場所に新しいファイルを作りますよ、いいですか」という確認。
ここにチェックを入れておかないと、書き出しの際にエラーがでる場合があります。
+Life Studioのロゴをすべてパスデータで起こしました。
と言っても、Adobe Illustratorで制作している場合は、コピペで対応できるので、楽です。
通常、After Effectsでモーショングラフィックスを制作している方なら、難しいことではないですね。
キーフレームやパスを使って、素材に動きをつけていきます。
こんな感じで、動きをつけ終えたら、書き出していきましょう。
メニューで
ウィンドウ ＞ 拡張機能 ＞ Bodymovin を開くと書き出し用の画面が出てきます
書き出すコンポにチェックをいれ、書き出すフォルダを指定します（フォルダが表示されていない場合は
をクリックして指定）
Bodymovin画面の左上にある「Render」ボタンを押すと、JSONファイルの書き出しが始まります。
Renders Finishedと表示されたら、レンダリング完了です。
書き出したフォルダを見てみると、JSONファイルが出来上がっていると思います。
これで、書き出し完了です！
「Demo」で書きだすと、htmlファイルが生成され、それをブラウザで開けば動作を確認できます。
今までウェブに埋め込む動きのあるコンテンツといえば、GIFアニメやmp4などの動画ファイルがありました。
GIFアニメは色数の制限があり、mp4の埋め込みはブラウザ対応が至難の技で、
HTML5から採用されたmediaタグにおいても、かなり手間がかかりますね。。
右側の「Clone or download」をクリックしてダウンロードしましょう。
extensionフォルダ内のbodymovin.zxpを先ほどのZXP Installerにドロップします。
その後、Macの変更許可を聞かれるので、ユーザ名とパスワードを入力します。
ユーザ名、パスワードを入力し「OK」をクリックすると、インストールが完了します。
