1FrameWorks

AMP(Accelerated Mobile Pages)について

2016-11-28 [記事URL]

AMP(Accelerated Mobile Pages)とは
Googleが推し進めているプロジェクトで、モバイルユーザーに対して高速でコンテンツを提供する仕組みです。

「コンテンツの表示」に特化していて、余計な情報が表示されません(使えないHTMLタグがあります)。
Googleがコンテンツ情報の履歴を保持していることで余計な読み込みを無くし、検索結果をタップした瞬間にコンテンツ表示!となります。速いです。
ユーザー体験向上を目的としているんですね。

実際にどのくらい速いか見てみましょう。

下記の動画は、全く同じコンテンツで
Wi-FiはOFFにしていて、docomo系のモバイル回線を利用しています。
左側が通常のスマホページ、右側がAMPページです。

「えっ!!!」ってくらい速いですよね。ほんと一瞬!
体感速度で10倍くらいに感じます。いや20倍かも。

AMP対応しているかどうかは検索結果などで表示される雷マークです。
screenshot_20161026-131039

1FrameWorksでは日本Google検索が本格導入する前からAMP対応しています。
ユーザーの方は何も意識することなくGoogle検索にAMP対応済だったわけです。

「安心してください。Google検索に導入前から対応済ですよ。」

だから、AMPページのGoogleインデックス(検索データとしての登録)もすぐでした。

ただまだAMPは仕様変更も多いし、効果も微妙なところもありますし、これからの技術だと思います。

ユーザー体験は大きく向上することは間違いありませんが、サイトオーナー側のメリットが薄いとそれほど広まらないかも知れませんし。。。

最近、AMP関係のお問い合わせが増えてきましたので少し書いてみました。
AMPページの注意点や細かい設定方法などはサポートサイトで1FrameWorksユーザー様向けに情報提供していきます。


バージョン2.3.0公開

2016-11-24 [記事URL]

機能追加

背景動画を使う場合の背景画像(img)の入れ方を解説しています。
スマホ・タブレットでは動画再生されませんから、背景画像を入れておくことをオススメします。

実例、使い方は下記をご覧下さい。

ytplayerの使い方。背景にて動画(YouTube)を再生

ytplayerをメインバナーに配置してみた

Lazy Load

Lazy Load に対応しました。

画像を遅れて読み込むことで、ページ表示の体感速度を大幅に向上できます。
使い方、使用上の注意など下記にまとめています。

Lazy Load の使い方

ボタンレイアウト追加

btn-size90, btn-size100 を追加しました。
余白も調整済です。

ボタン作成の流れ

機能の微調整

LOGO横のオブジェクトを縦センターできるようにしました。

2016-11-24_10h58_50

下記のように、ロゴ画像に class=”img-m” をつけ、横にテキストまたは画像を配置してください。



バージョン2.2.2公開

2016-11-21 [記事URL]

機能追加

背景にYouTubeを流せるようになりました。
メインバナーの背景で動画を自動再生したり、特定のボックスの背景で再生したりと。
もちろん、重ねてテキストが画像やスライドバナーも配置できます。

ドロップメニュー追加。
カーソルオンで下にスラスラとメニューを開くことができます。

機能の微調整

TOPの横幅を 972px にしました。
ロゴ画像を配置したときの左の余白がなくなりました。

JPG画像の圧縮率を上げました。
JPG画像をメディアアップロードした際に、今までかなり小さく変換していましたが、圧縮率を上げることである程度のクオリティを確保しました。アップロードした写真もほとんど劣化しないようになります。

サポート

背景でYouTube再生設定方法

ytplayerの使い方。背景にて動画(YouTube)を再生

ytplayerをメインバナーに配置するテスト

ドロップメニューの使い方

ドロップメニュー(dropmenu)


バージョン2.1.9公開

2016-11-07 [記事URL]

機能の微調整

リスト関係のの余白を再調整しました。
調整箇所は以下の通りです。
・パンくずリスト
・コメント欄
・listdate
・listrank2

ボタン小の余白を調整しました。
サポートサイト内にボタン例とコード例を掲載しました。

2016-11-07_06h01_28


バージョン2.1.8公開

2016-11-05 [記事URL]

機能の微調整

円型ボタンの余白を調整しました。

リストの余白を調整しました。

サポート

動画マニュアルを公開しています。

簡単な説明用の動画は一般公開されています。

[vimeo 190284479 w=720]

サポートサイトにて
「アイコン」「ボタン」「写真エフェクト」「文字の装飾」など、
多くのページを公開しています。


PAGE TOP



logo_1stneed
株式会社ファーストニード(1st-need Co,.Ltd.)

〒650-0024
神戸市中央区海岸通3-1-1 KCCビル4F
TEL:078-220-9913




MENU

SUPPORT

CONTACT
HOME