WordPress:authorページを一括リダイレクト
AMPの公式イメージ利用方法とガイドライン【画像ダウンロード】
【MAC】スクリーンショットの保存フォルダを変更・JPGファイルにする
MAMPでMySQLが起動しない時の解決方法
AMP化と一緒にHTTPSにすることにした:設定方法
@ 2016 fwary

AMPの公式イメージ利用方法とガイドライン【画像ダウンロード】

AMPについての記事を書く時に、AMPのロゴを表示したい。また、サイトや特定のページがAMP仕様になっていることを表現するためにAMPのロゴを使いたい。といった場合に、googleが用意している正規のロゴ画像を利用することができます。リンク先の公式ガイダンスページからアセット(画像一式)を入手できます。画像やブランド用語の使用方法についてのガイダンスも以下で和訳しました。AMPproject.orgのサポート -> ブランドガイダンスの内容を記載していきます。

 

suponserd link


ブランドロゴをダウンロード

AMPproject.org Brand guidelines
上のリンクをクリックすると、PDFファイルが開きます。1ページ目の「Dawnload brand assets」ボタンをクリックすると、「brand_assets.zip」というZIPファイルをローカルにダウンロードできます。
 
ファイルを開くと、「AMP Brand Assets」というフォルダになります。
画像の内容は、以下の4種類で、ファイル形式は、画像それぞれに、SVG、EPS、PNGの3種類ずつが用意されています。
 

正方形のブルーのロゴ


 

正方形のブラックのロゴ

正方形のホワイトのロゴ

※色を見せるために背景をグレーにしてありますが、白い部分のみが画像です。

横長サイズのブルーのロゴ

横長サイズのブラックのロゴ

横長サイズのホワイトのロゴ

※色を見せるために背景をグレーにしてありますが、白い部分のみがダウンロード画像です。
 
 

ブランドガイダンス

The AMP Project is an open-source initiative aiming to make the web better for all. The project enables the creation of websites that are consistently fast across devices and distribution platforms, are beautiful, and monetize well.
AMPプロジェクトは、すべての人にとってウェブをより良くすることを目指すオープンソースの取り組みです。このプロジェクトでは、デバイスや配信プラットフォーム全体で一貫して高速で、美しく、収益性の高いウェブサイトを作成することができます。
 
AMPプロジェクトをビジュアル表現する方法
AMPアイコンの拡大には制限はありませんが、14×14ピクセルの正方形より小さく表示することはできません。
ブランドロゴは、イナズママークの半分程度の幅の余白を開けてください。(例だと5px)
マーケティングやブランディングで使用する際、AMPアイコンは、AMPブルー(#1C79C0)を使用してください。
AMP関連事項は、ブランドライン用のカラーを利用することができます。(AMPのブランドラインの例がよく分かりません。)
アイコンを回転させないでください。
影を付けないでください。
アイコンを歪ませたり、歪ませたりしないでください。
グラデーションにしないでください。
イナズママークだけにしないでください。
アウトラインバージョンを使用しないでください。

AMPプロジェクトについてのどのように言及すべきか

Accelerated Mobile Pages Projectとは、パフォーマンスに重点を置くことでモバイルWebをより良くするためのオープンソースイニシアチブ出版社と技術提供者からなるエコシステムです。
 
このエコシステムや協賛パートナーについて話す時は、
 
プロジェクト名は大文字(AMP)であることに注意してください。
エコシステムや複数のパートナー間の共同作業について話すときは、「AMPプロジェクト」を使用してください。
実際の技術を参照するために「AMPプロジェクト」を使用せず、代わりにAccelerated Mobile Pagesを使用してください。
アクセラレーションモバイルページ(AMPと略記)高速モバイルページを作成する技術を指します。
Accelerated Mobile Pagesは、次の要素で構成されたWebコンポーネントライブラリです。

AMP HTML基本HTML以外のリッチコンテンツを構築するためのカスタムプロパティを持つHTML。
AMP JavaScript AMPページをレンダリングするためのJavaScriptライブラリ。
AMPキャッシュAMPページを取得してキャッシュし、ページのパフォーマンスを自動的に向上させます。
ドキュメントに記載されている最初のインスタンスのカッコ内の省略形の展開フォームを使用すると、ドキュメント内の後続のインスタンスを省略することができます。
 

使用してはいけない用語

AMPを動詞として使用しないでください。「AMPする」は✖️
AMPlify、AMP’d、AMPed、または他のバリエーションを使用しないでください。
AMPコンテンツを記述する場合には、シンプルに「AMP」を使用してください。
例)AMPページ、AMPコンテンツ
 
AMPページとは、AMPを利用したHTMLページのことです。

使用例

The website has AMP Pages
このウェブサイトには、AMPページが含まれます。
 
Accelerated Mobile Pages (AMP) offers reliably fast page load times
アクセラレート モバイル ページ(AMP)は、確実にページ読み込み時間を高速にします。

Websites use AMP to ensure their content loads fast.
ウェブサイトが、AMPを利用することで、サイト内のコンテンツを高速にロードすることを保証しています。

To create a basic AMP Page,include the required HTML
基本的なAMPページを作るためには、用意されたHTMLを含める必要があります。

といった内容になっていました。
AMPページの説明を書く時の参考にしています。

sharing is caring