AMPとは
AMP（Accelerated Mobile Pages）とは、モバイルページを高速に表示させるために最適化されたオープンソースのHTMLフレームワーク。Googleが推奨。
AMPページ作例
●テストサイト1https://architecture.sakura.ne.jp/
当ページ
●テストサイト2
https://www.google.com/amp/s/www.oikawa-sekkei.com/amp/index.html
Google AMP にキャッシュされているので、モバイル検索での検索結果では、
URLの先頭が「https://www.google.com/amp/s/」が先頭。
（URLは「https://www.oikawa-sekkei.com/amp/index.html」でも表示できます。）
●テストサイト3
https://www.oikawa-sekkei.com/web/wptest/?amp
Wordpress のテストサイトに、AMPプラグインを設定。
AMPチェックサイト
Google公式の、AMPコードをテスト出来るツール。AMPテスト
AMPでの、画像のレスポンシブWEBデザイン対応
amp-img タグに属性「layout="responsive"」を追加
<amp-img src="logo.jpg" width="1000" height="300" layout="responsive" alt="PC"></amp-img>
「img」タグはAMPでは「amp-img」と表記。閉じタグ</amp-img>も必要。amp-img タグに「layout="responsive"」属性を追加するだけで画像がレスポンシブWEBデザイン対応になる。
ブラウザ幅640pxで画像を切り替え
<amp-img media="(min-width: 640px)" width="400" height="400" src="mouse400.png" alt="mouse"></amp-img>
<amp-img media="(max-width: 640px)" width="200" height="200" src="mouse200.png" alt="mouse"></amp-img>
「media="(min-width: 640px)"」「media="(max-width: 640px)"」などの media属性 でブレイクポイントを指定。<amp-img media="(max-width: 640px)" width="200" height="200" src="mouse200.png" alt="mouse"></amp-img>
「src="・・・"」でmediaで指定した画面幅の時に表示する画像を指定。
PageSpeed Insights
ページの表示速度は、PageSpeed Insights で調査できる。PageSpeed Insights »