はじめに 5/17（米国時間）〜3日間、Google I/O 2017が開催されました 今年も盛況だったようです いつものように 全てのセッションの動画 が公開されています 去年のセッションの中で話題になっていたAMP・PWAについて今年のセッション動画から動向を確認してみました AMP・PWAとは？（おさらい） AMP(Accelerated Mobile Pages) GoogleとTwitterが合同で開発 モバイルでページを高速表示する 必要な技術 AMP HTML…専用のhtml/CSS/JSコーディング AMP JS…専用のJSライブラリ Google AMP Cache…キャッシングのためのCDN 参考 Accelerated Mobile Pages Project（公式） Googleの AMPデモ AMP Start …AMP＋Material Designのコンポーネ
AMP(Accelerated Mobile Pages)がGoogle検索の仕様に加わってからひさしくなりますが、さらなる広がりの予感をAMP Projectがみせております。 ウェブデザインが収束の方向に向かっている BootstrapやMaterial design、Reactなどコンポーネント単位でウェブモジュールをつくっていこうという動きがあります。これは当たり前です。たとえ、オリジナルデザインでウェブサイトを作ろうとしても、パーツの再利用性などを考えることは効率やブランディングの観点からも正しく、みんなそうしてウェブサイトを作ってきたと思います。 2017年現在の現状を俯瞰的にみてみると、仕組みが出来てきたというフェーズに入ってきたのだと思います。 それによって、起こる現象はおそらく２つ。 1. ウェブデザインの２極化が起こる これは安易に想像がつきますね。一つの流れとしては、
[レベル: 中級] AMP プロジェクトは、AMP HTML で構成したウェブサイトを簡単に作成するためのテンプレートの提供を始めました。 AMP Start という名称のサイトで公開しています。 まずは2種類のテンプレートを配布 AMP Start で公開されているテンプレートを使えば、AMP に対応したサイトをゼロから構築する必要はありません。 テンプレートはデザイン的に洗練されており、たいていのサイトに必要な要素を備えています。 現在公開されているテンプレートは、次の2種類です。 記事用 ブログ用 記事もブログも大差ないように思いますが、ナビゲーションメニューやソーシャルボタンなどの要素に多少の違いがあります。 “COMING SOON”とあるので、もう1種類のテンプレートが近々公開されると思われます。 RWD + AMP HTML どちらのテンプレートも、レスポンシブ ウェブ デザ
AMPとはAccelerated Mobile Pages の略で、GoogleやTwitterなどが共同で参加しているAMPプロジェクトが構築した仕組み、もしくはそのためのHTML規格のことです。 AMPはその名のとおりモバイルユーザーのユーザー体験向上を目的として、WEBページの表示速度高速化が図られています。（ですのでAMP HTMLは基本的にモバイル端末で閲覧することが想定されています） Google検索ではすでに2016年2月24日からAMPで作成されたページが検索結果画面に表示されています。 ここではHTMLをAMPに対応させるための書き方の基本やAMPを取り巻く環境の変化についてまとめました。 update この記事はもともとGoogleのAMP実装に合わせて作成した記事でしたが、8月に大きく追記・修正しました。 『SEO会社が作った、SEOチェックリスト147選-自社サイト
「次のモバイルファースト」がやってくる！UIと機能設計をIonic 2を使って学んでみよう 榊原昌彦（一般社団法人リレーションデザイン研究所 ...） レスポンシブデザインが生まれたばかりの2009年には、はやくも「モバイルファースト」という言葉が使われ始めていました。 WebサイトはPCから見るものだったのは今や昔。今ではスマートフォンの普及により、多くのWebサイトではPCとモバイルからのアクセス数が逆転してるWebサイトも多く、「モバイルファースト」な開発も当たり前になりました。 しかし、2009年の「モバイルファースト」と、今の「モバイルファースト」は大きく中身が成長しました。モバイルフレームワークであるIonic 2も先日リリースされましたので、ここで改めて「モバイルファースト」とは何かを考え、モバイルの設計を見直していきます。 レスポンシブとモバイルファースト モバイルファース
WordPressサイトのAMP対応をやってみました。 AMPというのはスマホ用にページを高速に表示するための規格のことです。仕様に従ったHTMLを用意する必要があります。 サイトをAMPに対応させたからと言って検索順位が上がるわけではありません。ですが、Googleのモバイル版の検索結果ページにカルーセル表示されることがあります。 Googleの検索結果にampがどんどん侵食してきている実例とビッグワードでのワンチャンあるよって話 上記の記事にかかれているように、タイミングによってはビッグワードで表示されることもあるとか。 WordPressをAMPに対応させる WordPressのサイトの場合はどうすればいいのかというと、AMPに対応させるためのプラグインをAutomattic社が公開しています。ですので、このプラグインをインストールして有効化するれば、とりあえずAMP対応は完了です。
WordPressをマジメにAMP（Accelerated Mobile Pages）対応させた話 #AMPlify ku-suke 2016.10.06 474 6616395150 こんにちは、2016年中途入社のku-sukeです。現在はkidslyという保育園むけサービスのプロダクトオーナーを担当しています。今回は個人的にも注目しているAMP（Accelerated Mobile Pages）をこのテックブログに実装した話を書きたいと思います。特に、WordPressプラグインを入れるだけの簡易対応ではなく、フッターまわりやデザインの調整などをまじめに対応させたので、企業をはじめメディア運営をWordPressで運用されている方のお役に立てば幸いです。 事業サイドがAMPに乗っかるか考える事 - ku-sukeのブログ AMPとは？ AMPとはAccelerated Mobile
儲け学 : SEOトレーニングとウェブマーケティング戦略 SEOトレーニングとインターネットマーケティング戦略情報。儲け学は、ウェブサイトにお客を集めるSEOトレーニング、ウェブマーケティング技術を高める最適な場所です。最新の海外情報までを網羅。 モバイルフレンドリーの次のステップは、AMPです。 モバイル検索のアクセス、コンバージョン、検索順位を向上させたいのならば、ページの読み込み速度はとても大きな要因です。 なぜなら、表示速度が遅いことは致命的だからです。もしあなたのページが表示に3秒以上かかるならば、40％の人がサイトから去ってしまいます。 そこで今回は、モバイルページを高速表示させるAMPをWordPressで実装する方法を解説します。プラグインを使用して、簡単、スピーディーに導入します。 AMP（Accelerated Mobile Pages）とは？ AMP（Accelera
こんにちわ、@t32kです。先日、3/18に大阪で開催されたFRONTEND CONFERENCE 2017に登壇してきました。また弊社メルカリは懇親会スポンサーでした。今回は『スタンドアロンAMPのススメ』というタイトルで講演した内容をシェアしたい思います。 私が所属しているソウゾウ社ではメルカリアッテというクラシファイドサービスを作っています。メルカリは配送システムを介して売買しますが、こちらは直接会って手渡しでモノの売り買いができます。もちろん、手数料や配送料はかかりませんので、よろしかったら使ってみてください。私はそこのWeb担当で、本サイトのAMP実装について話します。 今日のアジェンダです。 AMPのメリット 表現力について テンプレート分散について 構造化データについて まとめ といった内容でやっていきたいと思います。 AMPとは？ まずはAMPとは何か説明します。AMPとは
AMP対応ページではJavaScriptの実行が制限されている。そのため、サイト独自の動的な機能などはそのままでは実装できない。今回はこれに対応するための「拡張コンポーネント」と、AMP対応ページのデバッグについて解説する。 AMP HTMLの拡張コンポーネントを利用する 前編記事で説明したとおり、AMPではページ内に画像を埋め込む際にimgタグではなく、「amp-img」タグを利用する。また、「amp-pixel」や「amp-video」といったタグも用意されている（表1）。これら3つのタグは、「Built-in Components」（ビルトインコンポーネント）と呼ばれている。 表1 AMP HTMLのBuilt-in Components タグ名 説明
Googleが2015年に発表した「Accelerated Mobile Pages（AMP）」は、モバイル向けに高速に表示できるWebページを記述するための仕様だ。GoogleはAMPを推進しており、すでにモバイル版Google検索では検索結果にAMP対応ラベルが表示されるといった対応が行われている。今回はこのAMPの概要と、AMP対応の核となる「AMP HTML」について解説する。 動的な表示のコントロールとキャッシュによる高速化を行うAMP 昨今ではスマートフォンおよび高速な通信回線の普及によって、モバイル環境でもリッチなWebサイトを閲覧できるようになった。しかし、常に高速な通信回線が利用できるわけではなく、またすべての端末が動的な表示を行うのに十分なマシンパワーを持っているわけではない。そこでGoogleがスタートさせたのが「AMP（Accelerated Mobile Page
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く