モバイルファーストインデックスについて

ウェブ = モバイル となるわけです。 わかりやすく説明します。

今後はモバイルサイトの内容が検索順位にかかわってくる

Googleは公式のサイトでこう発表しています。
将来的に Google のアルゴリズムはモバイル版のコンテンツを主に使用するようになります。つまり、ページのランキングを決定したり、構造化データを理解したり、検索結果にスニペットを表示する際も、モバイル版のコンテンツが使用されるようになります。もちろん、Google のインデックスがモバイル版のコンテンツで形成されるようになっても、デスクトップ端末かモバイル端末かに関わらず、すべてのユーザーに素晴らしい検索体験を提供し続ける点は変わりません。
検索結果に反映する際に、モバイル版のコンテンツを主に使用するようになる。 モバイル版のウェブサイトのコンテンツが如何に、ユーザのことを考え作られているかが重要になります。 もっと簡単に言うと、スマホで使いやすいサイト作れよ!ってことです。

すでにレスポンシブデザインのサイトは特に何もしなくてよい

レスポンシブデザイン動的な配信を行っているサイトで、主要なコンテンツやマークアップがモバイル版とデスクトップ版で同一である場合は、何も変更する必要はありません。
レスポンシブデザインの場合は何もせずにそのほかのSEO対策をしていきましょう。

スマホ・PCがそれぞれ独立している場合

スマホサイト・PCサイトが独立している場合、以下の対応が必須になります。
  • 構造化データ マークアップがデスクトップ版とモバイル版の両方で配信されるようにします。構造化データ マークアップの同一性を確認するには、構造化データ テストツールにデスクトップ版とモバイル版の両方の URL を入力し、出力結果を比較します。モバイルサイトへ構造化データを追加する際は、それぞれのドキュメント特有の情報に関係のないマークアップを大量に追加するのは控えます。
  • robots.txt テスターを使用してモバイル版のコンテンツに Googlebot がアクセス可能であることを確認します。
  • rel=”canonical” リンク要素を変更する必要はありません。デスクトップとモバイルのそれぞれの検索ユーザーにとって適切な結果を表示するために、Google はそれらのリンク要素を引き続き使用します。
 

PC版しかない場合はどうすりゃいいのさ

では、PC版のウェブサイトしかない場合、どうすればいいのか。 新たにスマホサイトを作るべきなのか、無理やりレスポンシブ対応したほうがいいのか、 それともPC版だけでいいのか。 Googleさんはこう言っています。
デスクトップ版のサイトしか存在しない場合、Google は引き続きデスクトップ版のサイトをインデックスします。モバイルユーザーエージェントを使用してアクセスする際も問題ありません。 デスクトップ ユーザーにとって使いやすいサイトは、壊れたり不完全なモバイルサイトよりも、モバイルユーザーにとって好ましい場合があります。モバイルサイトを作成する際は、サイトが完成し準備が整ってから公開することをおすすめします。
つまり、変なスマホサイト作るくらいなら、ちゃんとしたPCサイト”だけ”の方がいいよということです。

読み込みスピードも評価対象

この ”Speed Update” (と私たちは呼んでいます)は、ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し、ごくわずかな割合のクエリにしか影響しません。 そのページがどのような技術を用いて制作されたかに関係なく、すべてのページに同じ基準を適用します。
PHPによる動的なサイトでも、htmlによる静的なサイトでも、一緒くたに評価されるようですね。 ただし、次の文言が気になる。
検索意図は依然として非常に強いシグナルですので、魅力的で検索クエリと関連性の高いコンテンツは、ページの読み込み速度が遅くても高い順位に掲載される場合もあります。
つまり、ユーザが検索したワードによっては、読み込み速度にかかわらず上位表示されるということ? となると、そもそも「上位表示」に対する対策が難しくなりますね。(これも検索エンジンのあるべき姿かもしれませんが。)

そのほか、追加があれば追記します。

ほかに追加があれば随時追記していきます!]]>

【AEでSVGアニメーション! 002】制作フローと注意事項

インストール後にちょっとだけ設定 Bodymovinをインストールしたら、ちょっとだけ設定をします。 メニューから 環境設定 > 「一般設定」タブ > 「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れます 読んで字の如く。「スクリブトによるファイルへの書き込み」を許可するかどうかのチェックで、Bodymovinを使ってファイルを書き出す時に、「あなたのPCの任意の場所に新しいファイルを作りますよ、いいですか」という確認。 ここにチェックを入れておかないと、書き出しの際にエラーがでる場合があります。

さっそく、SVGファイルを作りましょう

それでは、無事、インストールも設定も完了したということで、 アニメーションを作っていきましょう。

もう一度、できることできないことの確認

第1回の記事の復習ですが、BodymovinはあくまでAfter Effects上のパスデータをSVGに置き換えるAdd-onです。なので、パスデータ以外は画像(PNG)に変換されます。 これを念頭におき、再度確認しましょう。

エフェクトや3D、ビデオ、オーディオは非対応

  • 画像ファイルの書き出し
  • エフェクト類
  • 画像のシーケンス
  • ビデオ、オーディオ
  • レイヤーの時間伸縮
  • 3Dレイヤー
ウィグラやレンズフレアなどのポストエフェクトはすべて対応しておりません。 ただ、今後対応予定という噂もありますので、期待しましょう。

シェイプ、パス、プリコンポ、マスクなどは対応

  • プリコンポーズ
  • シェイプ(矩形、楕円、星型)、テキスト
  • ヌルオブジェクトレイヤー
  • マスク
  • パスのトリミング
  • タイムリマップ
  • ブレンドモード(IE、Edgeを除く)
 

まずは、パスを用意

+Life Studioのロゴをすべてパスデータで起こしました。 と言っても、Adobe Illustratorで制作している場合は、コピペで対応できるので、楽です。

アニメーションをつける

通常、After Effectsでモーショングラフィックスを制作している方なら、難しいことではないですね。 キーフレームやパスを使って、素材に動きをつけていきます。 こんな感じで、動きをつけ終えたら、書き出していきましょう。

書き出すコンポと書き出し先のフォルダを指定

メニューで ウィンドウ > 拡張機能 > Bodymovin を開くと書き出し用の画面が出てきます 書き出すコンポにチェックをいれ、書き出すフォルダを指定します(フォルダが表示されていない場合はをクリックして指定)

書き出しのセッティングをする

書き出すコンポ名の左にある「Settingsギアマーク」をクリックすると、プロパティ画面が開きます。 書き出し形式は「Glyphs」を選択し、「Save」をクリック

JSONファイルを書き出す

Bodymovin画面の左上にある「Render」ボタンを押すと、JSONファイルの書き出しが始まります。 Renders Finishedと表示されたら、レンダリング完了です。 書き出したフォルダを見てみると、JSONファイルが出来上がっていると思います。 これで、書き出し完了です!

htmlファイルで書き出してくれるDemoモード

実際にブラウザでどのように動作するかを確認できるDemoモードという書き出し方法がSettingsの中にあります。 「Demo」で書きだすと、htmlファイルが生成され、それをブラウザで開けば動作を確認できます。

次回は、書き出したJSONの設置方法を掲載します♪

次回は、書き出したJSONをどのようにサイトに配置するか、をまとめます。]]>

【AEでSVGアニメーション! 001】メリット説明〜インストール

After Effectsを使ってSVGアニメを作る ウェブデザイナーでAfter Effectsを触れる人、または映像制作をしている人でウェブ案件に関わっている人、 そういう人には今回の方法は簡単で、かつ分かりやすく 複雑なSVGアニメーションを作りやすいです。 筆者はウェブデザイナーの出身で、後に映像制作に手を出し今に至るわけですが、 映像の中でもモーショングラフィックスを得意としており、 モーショングラフィックスの作成にはAfter Effectsを使っています。 だから、この方法はドンピシャでした。 ウェブ案件でちょっとしたアニメーションが使われることも 最近ではあたりまえのようになりましたね。 ページローディング時のアニメーションもその一つですが、 これからもっと増えてくるのではないか、と予想します。 今回は数ある動画フォーマット(GIFアニメやmp4、Youtube利用など)のなかで 「なぜSVGアニメーションなのか」、そしてAeを利用したSVGアニメーション制作の下準備までを説明したいと思います。

SVGのメリット

SVGには他の画像ファイルにはないメリットがいくつかあります。 もちろん、それらはSVGアニメにも引き継がれています。
  • 画像ファイルに比べてファイルサイズが小さい
  • 拡大縮小してもジャギーが出ない
  • プラットフォーム依存が少ない

画像ファイルに比べてファイルサイズが小さい

SVGはXMLという言語がベース画像フォーマットで、 従来の画像フォーマットJPEGやPNGに比べファイルサイズが小さいです。 ファイルサイズの比較を行っている記事があります。 [blogcard url=”http://blog.asial.co.jp/1109″]

拡大縮小してもジャギーが出ない

SVG:Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス) つまり、伸縮できる、ヴェクターの、画像 ということです。 ヴェクターについての説明はこちらのサイトをご参照ください。 [blogcard url=”http://www.atmarkit.co.jp/ait/articles/0908/18/news099_3.html”] ヴェクターの特性として、曲線が滑らかなまま拡大縮小を可逆的に行えます。 そのため、ジャギーがないのが利点です。

プラットフォーム依存が少ない

拡大縮小ができることや、それによる画質の劣化などがないことから プラットフォーム依存がないことが利点です。

SVGのサポートブラウザ状況(2017)

SVG対応ブラウザの状況です。 2017年、ほとんどのブラウザが対応できており、シェアも高いのも魅力的。

BodymovinというAEのAdd-onを使う

今回紹介するSVGアニメーションの制作方法は、 BodymovinというAfter Effects Add-onを使う方法です。 jsをゴリゴリ書けなくても、After Effectsで作成したアニメーションを、jsonファイルでパパッとSVGアニメーションに変換してくれます。 今までウェブに埋め込む動きのあるコンテンツといえば、GIFアニメやmp4などの動画ファイルがありました。 GIFアニメは色数の制限があり、mp4の埋め込みはブラウザ対応が至難の技で、 HTML5から採用されたmediaタグにおいても、かなり手間がかかりますね。。

Bodymovinでできること・できないこと

BodymovinでSVGアニメに変換する際に、できることできないことをまとめました。

エフェクトや3D、ビデオ、オーディオは非対応

  • 画像ファイルの書き出し
  • エフェクト類
  • 画像のシーケンス
  • ビデオ、オーディオ
  • レイヤーの時間伸縮
  • 3Dレイヤー
ウィグラやレンズフレアなどのポストエフェクトはすべて対応しておりません。 ただ、今後対応予定という噂もありますので、期待しましょう。

シェイプ、パス、プリコンポ、マスクなどは対応

  • プリコンポーズ
  • シェイプ(矩形、楕円、星型)、テキスト
  • ヌルオブジェクトレイヤー
  • マスク
  • パスのトリミング
  • タイムリマップ
  • ブレンドモード(IE、Edgeを除く)

読み込んだイラレのレイヤーは画像ファイルとして書き出される

BodymovinはあくまでAfter Effects上のパスデータをSVGに置き換えるAdd-onです。 なので、パスデータ以外は画像(PNG)に変換されます。 After Effectsでモーショングラフィックスを作成する際、 素材をIllustratorで作成し、レイヤーを分けた状態でAeに読み込み、 アニメーションをつける作業をすることが多々あります。 この読み込んだIllustratorのレイヤは、パスデータではなく、 Illustratorのレイヤのリンクファイルなので、BodymovinでSVG化した際には PNG画像に変換されます。

BodymovinをAfter Effects 2017にインストールする手順

After Effects2017での拡張機能(Add-on)インストール方法をご説明します。

拡張機能インストールアプリ ZXPインストーラをダウンロードする

まずAdd-onインストールのために、ZXP Installerをダウンロード・解凍します。    

続いて、Bodymovinをgithubからダウンロード

こちらのBodymovin githubレポリトジページからBodymovinをダウンロードします。 右側の「Clone or download」をクリックしてダウンロードしましょう。

bodymovin.zxpをZXP Installerにドロップ

先にZXP Installer.appを起動します。 Bodymovin githubレポリトジページからダウンロードしたBodymovinのフォルダで build > extension と開いていってください。 extensionフォルダ内のbodymovin.zxpを先ほどのZXP Installerにドロップします。

Macのユーザ情報を入力してインストールを許可したら終了

ドロップすると「Updating…」という表示に変わります。 その後、Macの変更許可を聞かれるので、ユーザ名とパスワードを入力します。 ユーザ名、パスワードを入力し「OK」をクリックすると、インストールが完了します。

インストールが完了するとこんな画面がでます

「The extension was successfully installed!」が表示されたら、インストール完了です。

After Effectsで「拡張機能」を確認

アフターエフェクトのメニューから ウィンドウ > 拡張機能 を開いたときに「Bodymovin」が表示されていればインストール完了!  

次回は、実際の制作フローと制作の注意点をご紹介します

次回は具体的な制作について触れていきます♪  ]]>