STAFFBLOG スタッフブログ

スタッフブログを AMP 対応しました!

fujie
2016/08/30
閲覧所要時間:約6

amp-thumb ※画像のカルーセルスライダーはこんな感じになればいいな…というパロディイメージです。

AMP ( アンプ ) 対応になったスタッフブログからこんにちは。
アンプと読むらしいです。読み方は知っていてもエーエムピーと読む癖がついているので、いきなりアンプが~と言われてもまったく認識できませんでした。

対応方法や情報だけは前々から仕入れていましたが、個人的に盛り上がってない感やニュースサイトだけでいいのではと思っておりましたが、

スマホ対応が不要になる!? Google、通常のモバイル検索結果でスマホ向けページの代わりにAMPページを表示する実験を開始
https://www.suzukikenichi.com/blog/google-starts-experiment-to-replace-mobile-friendly-pages-with-amp-pages/

などを読むうちに急にやる気になり、重い腰をあげました。

WordPress を利用しているので、便利なプラグインにてささっと対応もできますが、( 現段階のプラグインだと、AMP の厳しい制限によりエラーがかなり多くなるようですが… ) より深く理解したかったので、オリジナルテンプレートで対応することにしました!

ということで実際作業した感想のレポートです。
※詳しい対応方法は解説記事を探すと大量に見つかるので省きます。

対応方法にて大変お世話になった参考サイト



URL はどうするか?

AMP 化の URL は自由に決めることができます。

使用できるタグや属性などが厳しく制限されているなか、URL は特に定まっていないのに衝撃を少し覚えました。

既に AMP 対応なされているメディアのブログ、個人のブログなどを参考に URL の末尾に ?amp を付与すると AMP 対応のテンプレートを見るように設定しました。

この記事の実際の AMP ページは下記のとおりです。
スタッフブログを AMP 対応にしました! ( AMP )
https://www.fvs-net.co.jp/blog/11607?amp




どういうデザインにするか?

制限されているタグや属性の中で表現できる範囲内に関しては、デザインは自由なので、こちらもすでに AMP 対応なされているところを参考にしました。

いくつか見ていくうちに共通点がありました。

  • スマホ対応にてよくつかわれるハンバーガメニュー ( ドロワー ) などは無し
  • 記事のみに集中 ( サイドバーなどは排除 )
  • 前後記事や似た記事などはあったりなかったり
  • オリジナルテンプレートで対応している場合は、レスポンシブウェブデザインとかなり近い形で表現が可能
以上のことを踏まえ、レスポンシブウェブデザインの時に書いた CSS をもとに、ハンバーガーメニューやサイドバーを排除したテンプレートを用意し、細かい調整を行いました。



HTMLタグを AMP 用に置き換えるときに苦労したこと

画像 ( img ) や フレーム ( iframe ) などは、それぞれ対応したタグに置き換えなければならないので、テンプレート上にて処理を記述します。
何度も繰り返しになりますが、タグの制限などが厳しいため、間違いがあると、デベロッパーモードにて、すぐにエラーが出てしまいます。
URL の末尾に #development=1 を付与するとエラーチェックができます。

WordPress なので、 PHP の正規表現を駆使していくことになりますが、
iframe というタグだけても
  • 普通の iframe を amp-iframe へ置き換え
  • WordPress の記事埋め込みカード機能の iframe も amp-iframe へ置き換え
  • YouTube の埋め込み iframe は amp-youtube へ置き換え
といろいろあり、正規表現が苦手なので、分岐に苦労させられました。

正規表現作るときはいつもこちらのリファレンスとにらめっこ…。
PHP: preg_match() / JavaScript: match() 正規表現チェッカー ver3.0
http://okumocchi.jp/php/re.php




最初のインデックスまでに1日!

AMP 対応ページは元の記事にメタタグにて指定を行うので、即時に公開できるのですが、サイトマップや Fetch as Google を行ったとしても、Search Console の Accelerated Mobile Pages にてインデックスされるまでに1日かかりました。



検索結果に雷マーク!

また、インデックスされたとしても、話題性がない普通のブログ記事は、トップニュースには載らないようです。
今日だったら台風とか天気に関することを書いて、アクセスが伸びれば載るのかな?という感じだと思います。

でもでも、ちゃんとインデックスされれば、下記のように検索結果に雷マークが付与されます。
名称未設定-1 いい感じ!

また余談ですが、スマホ対応のラベルは撤回されました。
( ラベルがなくなっただけでランキングシグナルからは外れてません )
こちらが参考になると思います。
「スマホ対応」ラベルをGoogleが廃止!?モバイル検索結果から削除される・・・
https://www.peko.co.jp/seo/smartphone/sumaho-corresponding-label-google-abolition



エラーへの対処とまとめ

弊社の今までのブログ記事は、648件です。

毎日20件前後 AMP 対応ページがインデックスされ、
その中で1・2件ほどエラーが上がってきている ( PHP の置き換え漏れ、カバーできない範囲 ) のが現状です。

とりあえずの AMP 化対応はプラグインを使えばすぐに終わり、オリジナルなら半日か1日で終わるけど、その後の対応でエラーへの対処を図っていく必要があり、さらに今後の記事への品質管理も考えなければ ( AMP を意識した記事の書き方のマニュアルの整備など )、検索エンジンに対してよい評価がもらえないと思うので、今回の AMP 対応を通して仕組みづくりが大切で、大変なことだと学ぶことができました。

また、取り掛かり前と後では正規表現に関する知識もより一層蓄えることができたので、総じてプラスになったと感じております。

以上です。



過去の対応 or 導入しましたの記事

自社サイトをレスポンシブウェブデザイン対応しました!

fujie
2015/06/01
閲覧所要時間:約5

gyazo-1
先々月…自社サイトをレスポンシブウェブデザイン対応致しました。
やったのは Googleが勧告していたスマホ対応による順位の変動(4/21)の直前の19日!

結局特に変わりませんでしたが…。

というのも一度はそのアップデートを適用したものの、
日本のサイトのスマホ対応率があまりにも低すぎるので取りやめたというお話を
この間開催されたWebパフォーマンスのセミナーでお伺いしました。

以下、今回やったことを振り返ってみようと思います。


まずは現状を知る

レスポンシブウェブデザイン対応をする前に、まずはその時の現状を確認しました。
  • 1年前にPCサイトをリニューアル
  • 画像はすべて通常サイズ
  • トップページにvideoタグで動画を流しているが、videoタグ非対応ブラウザには画像を表示している
  • 横に長い画像が主要なページにいくつもある
  • ヘッダーが追従する
  • グローバルナビゲーションの中にプルダウンメニューがある
等という特徴があります。

また今回の取り決めとして、
求人案内とスタッフ紹介のページはまったくデザインが異なるので、
一度に行わないことにしました。(時間があればコソコソやります…)


現状を維持しつつ、レスポンシブ時の時の動作を決める

現状の仕様がざっくりと整理できたので、
ブラウザ幅を縮めていった時の動作を考えていきます。
  • 1年前にPCサイトをリニューアル
    → 既に形があるので、必然的にPCファースト(960px)
    → メディアクエリーでレスポンシブスタイルを制定
  • 画像はすべて通常サイズ
    → ロゴのみRetinaディスプレイに対応させる
  • トップページにvideoタグで動画を流しているが、videoタグ非対応ブラウザには画像を表示している
    → PCでブラウザ幅を縮めていった時にはそのまま何もしない
  • 横に長い画像が主要なページにいくつもある
    → 画像は基本 max-width: 100%; で対応するが、横に長い画像は縦が細くなってしまうので、通常の画像と違うスタイルを制定する
  • ヘッダーが追従する
    → 追従をやめて、右上にハンバーガーアイコンを設置する
  • グローバルナビゲーションの中にプルダウンメニューがある
    → プルダウン動作をやめて、右上のハンバーガーメニュー内で展開されるようにする
という動作を決めました。
グローバルナビゲーションですが、ドロワーメニューとかハンバーガーメニューなどなど人によって言い方がまちまちですが、ここではハンバーガーメニューと言うことにします。


レスポンシブウェブデザインを作っていこう

それでは決めた仕様で作っていきます。

ブレイクポイントをどこにするか

PCサイトを 960px で構築しているため、
どこかの値でブレイクポイントを決める必要があります。

iPad縦持ちサイズからレスポンシブウェブデザインを適用したかったので、
768px を基本のブレイクポイントにしております。

これで、横持ちだとPCのデザイン、縦持ちだとレスポンシブウェブデザインが楽しめるので
私個人的には気に入っております。

(追記:2015年6月13日)
と思っていたのですが、
いろいろ思うところがあって 960px 未満からにすることにしました。


ロゴのみ Retinaディスプレイに対応させる

1倍画像


2倍画像


ロゴのみ高解像度ディスプレイでもぼやけないように2倍の画像を用意し、
高解像度ディスプレイにはそれ用のメディアクエリーで変更しています。

横に長い画像でも美しく

レスポンシブウェブデザインでは画像に対して何もスタイルを指定をしないと
ブラウザサイズからはみ出してしまいます。

そのために画像へ、

/* CSS */
img {
height: auto;
max-width: 100%;
}

というスタイルを一般的に指定します。

このスタイルによって下記のような横長い画像も、
ブラウザサイズの伸縮と合わせて可変するのですが、

こちらの画像だと縦が細長くなって見栄えがよろしくありません。

そこで

/* CSS */
.over-image {
overflow: hidden;
}
.over-image img {
margin-left: -25%;
max-width: 150%;
}

と、横幅の最大値を大きく取り、少しずらすことによって

この様に両端を若干隠すことになりますが、
全体のバランスを崩すことなくレイアウトが出来ました。

表示領域を確保するためにヘッダーの追従を無効に

私がついこの間までiPhone4ユーザーということもあってスマートフォンサイズにて領域を確保することに意識をおいて制作にあたりました。

しかし今は nexus6 を使用しておりかなり余裕があるので、
今後は追従などの手を加えてもいいのかなと思いました。

また上にスワイプするとヘッダーがスッと出てくるのも気になっているので、
そういうこともどんどんやっていけたらな…。

プルダウンメニューはハンバーガーメニューの中で展開させる

今回はプルダウンの中身が少ないので、隠さずに展開させた状態にしました。
メニューの数が多ければ、カテゴリーをクリック後表示非表示させるなどの手法も考えました。

そのあたりでとても参考になるのが、
トヨタ自動車さん
http://toyota.jp/

のサイトが上手く設計されていると思います。


まとめ

以上、弊社自社サイトのレスポンシブウェブデザイン対応でした。

私が担当した案件で恐らく1年半ぶりの4件目の
レスポンシブウェブデザイン対応だったと思います。

今回はワンカラムでスッキリシンプルなデザインでしたので、
制作時間もそこそこ少なめで出来たので良かったかなと思っています。

しかし冒頭にも申し上げましたが実は Googleスマホ対応の直前に急ぎ足で制作してしまったので、
細かいところで行き届いていなかったり、モバイルファーストになかなか踏み込めなかったり(IE8への対応がまだまだあるので当分難しいかも…)するのでもっと色々と考えて出来るようになりたいと思っています。

フロンティアビジョンのFacebook

デンタルWEB

求人情報

スタッフ紹介