~ストーリー 1~

★コラム★AMPストーリーを作ってみた!AMPストーリーを作ってみて、発見した事と、AMPストーリーを作った結果、考えが変わった事。

2018/07/31 02:15:00
HTML版 | AMP版 | AMPストーリー版
え~、前回のおさらいから。

まずは、このブログを、AMPストーリーにする事にしました。

このブログですが、まだAMP対応をしていないので、まずはAMP対応からかな~と思っていたのですが。
今泉兄、AMPストーリーに惚れちゃったので、AMP版を公開する前に、先に、このブログをAMPストーリーにする事から始めようと思っています。

そんな事を、前回のブログを書きながら、ふと思ったんですよ。

といっても、昨日の事ですが。
で、その際、今泉兄のブログは長いので、ブログのダイジェストを、AMPストーリーにしようと思っていました。

各章の冒頭部分、例えば、100文字とか、200文字程度だけ、チョイ見せです。

又は、AMPストーリー用に、各章を要約した文を書き起こそうかな~と。
ところが・・・。

本日、AMPストーリーを、作ってみたんですよ。

そこで、すごい発見というか、すごい事に気づいてしまったんですよ。
ちなみに、昨日の時点では、デモのページをダウンロードして、我が社のテストサーバに設置した程度。

そのデモページを、少しカスタマイズして、リンク領域を、ボタンにしたかったのですが・・・、

今泉兄の能力では、無理でして、断念。
今日、スタッフにお願いしたら、あっさり、今泉兄の理想の形にしてくれまして。

どんな事かというと、ダウンロードしたデモページは、リンク領域が、ページ後半の20%に、横幅いっぱいになっていたんですよ。

どうも、AMPストーリーのリンク領域ですが、<amp-story-cta-layer>の中に設置するようなのですが。
ページ後半部分の20%部分らしいです。

なので、デモページは、その部分、いっぱいいっぱいが、リンクできる状態でして。

その部分が、全部、ボタンになっていたんですよ。
ところが、普通のボタンっぽくしたいじゃないですか!?

センターリングというか、中央寄せのボタンで、上下左右に余白があり、ページの一番したにくっついていない状態。

そんな感じにしたかったのですが、まったくわからないので、すぐに断念。
そしたら、スタッフは、すぐに完成。

どうも、amp-story-cta-layerにpaddingを設定して、上下左右に余白を入れて、センターリングしているかのように、するようです。

いや~、なんのこっちゃ、わからん!いや、わかりました。
という事で、今日は、一歩前進です。

そうそう、AMPストーリーですが、以前は、ページからリンクできなかったのですが。

2ヶ月前くらいから、どうも、ページ内にリンクが設置できるようになったようでして。
なので、普通にHTMLやAMP HTMLでは当たり前のことでも、AMPストーリーでは、すごい進化!!!

日々、AMPもそうですが、AMPストーリーも進化しているのです!

その進化を、一緒に、感じてみませんか!?って、誰も感じたくも、知りたくも無いですよね・・・。
で、これだけではありませんよ、ここは、序章、これからが本番です。

せっかくボタンも理想の形になったので、仕事の合間に、ちょっと遊んだんですよ、AMPストーリーを、作ってみたんですよ。

もちろん、デモページをカスタマイズする程度ですが・・・。
で、まずは、前回のブログの宣言どおり、今泉兄のブログのダイジェスト版を作ったんですよ。

それも、昨日のブログの内容をコピーして、こんな感じで作りました。

単にデモページに、ブログの文章をコピペするだけなので、簡単にできましたよ。
初めに、タイトルをコピーして、貼り付け。

AMPストーリーのタイトル部分と、初めのページにです。

これで、土台と1ページ目は完成です。
続いて、冒頭の文章を、3行だけコピーして、貼り付け。

これで、2ページ目が完成。

あっという間です。
さらに、第一章の開発日記のタイトルと、冒頭の文章部分を貼り付け。

これは、同じページに貼り付けました。

これで、3ページ目が完成。
そして、4ページ目もコラムのタイトルと本文の冒頭部分、5ページ目も99個の夢の報告のタイトルと本文の冒頭部分。

ブログのダイジェスト用のAMPストーリーなので、本文は冒頭部分だけでOK。

あっという間に、5ページのAMPページが完成しました。
最後のページというか、いろいろとシェアボタンや、リンクが出来る、下からスライドする、ダイアログというかポップアップ部分は、今日の時点では省略する事に。

ここは、無限の可能性があるので、明日以降の楽しみにとっておく作戦です。

知ってしまうと、ブログで発表したくなるので、今日は、もったいぶって、おあずけです。
ところが・・・。

作って、サーバにアップして、実際にスマホで見て、気づきました。

最後のスライド部分を含めると、全部で6ページの、単純ではありますが、AMPストーリーなのですが。
実際は、1つのHTMLで、細かく説明すると、1つのAMP HTMLファイルで出来ているじゃないですか。

さらに細かく解説すると、1つのAMP HTMLに、AMPストーリー用のタグを記載する事で、1つのAMPストーリーが出来上がるじゃないですか!?

何ページだろうが、1つのファイルで出来るってところが、重要です。
で、ふと思いました。

ふと、目覚めました。

確かに、ダイジェストは良いんですよ、ダイジェストとしてAMPストーリーを作成して。
メインのHTML版だったり、AMP版のブログにリンクする。

各章のタイトルと、本文の一部のページに、実装可能になった、ページ内からリンクする<amp-story-cta-layer>を設置して、<a>を設置すれば、リンクできますので。

これで、ダイジェストとしての役目は完璧です。
ところが・・・。

今泉兄、通常のHTML版から、<link rel="amphtml">でAMPストーリーを指定するじゃないですか!?

逆にAMPストーリーからは、<link rel="canonical">で通常HTML版を指定するじゃないですか!?
そうする事で、通常のHTML版と、AMPストーリー、どちらが検索結果の上位に掲載されるか、実験するじゃないですか!?

という事はですよ、という事は。

そうですよ、SEOをちょっとでも知っている人は、ご存知かと思います。
まずは、<link rel="canonical">から。

これは、重複する内容のページや類似するページがある場合、canonicalで正規化しますよね。

誰がリーダーなのか、分からせる手法です。
さらに、<link rel="amphtml">。

これも、同じで、子分である、AMP版はどこなのかを、分からせる手法。

ま~、特攻部隊ですよね、AMPは。
なので、検索結果の上位にいって、ユーザの皆さんのアクセスをかき集めていく。

でも、最後の手柄は、親分である、通常HTML版に集約。

これが、検索エンジンのルールじゃないですか!?
で、何が言いたいかというと・・・。

子分であるAMP版であり、今回だとAMPストーリーなのですが。

ダメなんですよ、ダイジェストじゃ、ルール違反なんですよ、おいしいところ取りは、アウトです!
身軽な装備だと、ダメなんですよ、ちゃんとリーダーであり、親分である、通常HTML版と同じ装備じゃないと。

そうですよ、そう。

ちゃんと、コンテンツの内容が、通常HTML版と同じじゃないと、杯を交わしてはいけないんですよ!
<link rel="amphtml">や<link rel="canonical">で、繋がってはいけません!

特に、今年の2月頃からでしたっけ!?

AMP版はチョイ見せで、続きを見るで、通常HTML版にリンクするのは、アウト!ってルール。
なので、AMPストーリーでダイジェスト版を公開した場合、<link rel="canonical">や<linkrel="amphtml">で、繋げてはダメ。

でも、それだと、SEO効果の実験はできませんので。

通常HTML版と、AMPストーリー、どちらが検索結果の上位にでるかの実験です。
という事で、気づいた事、その1。

そうです、今泉兄のブログのAMPストーリーは、全文公開しないと、意味がなかったのです!

ダイジェスト版を作ったとしても、それは、それで、別モノとして、公開すればよし。
でも、今回のお題である、AMPストーリーのSEO効果を調べるという点では、やはり、全文公開が答えでした!

いや~、ルール違反して、まったく検索結果に出ないとか、検索結果の上位に出なく、なんでだろう・・・とか、AMPとして認められないとかで、迷っていたかも知れません。

いや~、気づいて、よかった、ほんとギリギリでしたが、我ながら冴えている!と、自画自賛です。
で、実際に、昨日のブログ全文を、AMPストーリーにしてみたんですよ。

ざっと、90ページ。

これだと、さすがに長いので、30ページにまとめまして。
文章の塊によっては、ページに収まらない場合もあるので、微調整は必要ですが。

ま~、今泉兄のブログだと、これくらいのページ数になりそうです。

でも、決して、読んでいる間は、苦じゃないですよ。
スワイプするか、タップするかの違いですので。

もしかしたら、目線が同じ位置になるように、文章を配置すると、この方が目が疲れないかも知れませんね。

この辺は、日々、研究し甲斐があるので、どこかの大学とかに協力してもらい、追求してみたいな~とは思います。
そして、気づいた事、その2。

なんと、質素な今泉兄のブログですが、もちろん、AMPストーリーという事で、背景に写真を配置してみたんですよ。

デモページにあった、フリー素材の写真を、そのまま拝借しました。
調べると、ランダムに写真を出力してくれるので、全てのページに、別の写真が配信されるように、小細工しまして。

同じURLだと、全てが同じ写真になってしまうので、少しづつ、サイズを変更しまして。

そしたら、ビンゴ、全部がユニークな写真になったんですよ!!!
もう、見せたい・・・。

みんなに見せて、自慢したい・・・。

これが、AMPストーリーのブログだ!!!と。
なんでしょうか、この感動は・・・。

そうですね、ブログの冒頭に、適当な写真を掲載するだけで、それっぽくなる、あの感覚。

それを超える、奥行きであり、広がり。
例えるなら、旅。

ブログを見ながら、世界旅行をしている感じ。

ま~、そういったカッコイイ写真が配信されるサービスなので、当たり前なのかも知れませんが。
でも、これがAMPストーリーのパワーだと思います。

元々、インターネットの世界に入ったのは、父がやっていた旅行代理店が、インターネットによって潰れる・・・ってニュースを見た危機感から。

だったら、その旅行代理店をつぶすかも知れない、インターネットという意味不明な何かを調査してくる!って、一人、この業界いに入ったのが、23年前の1995年の事。
いつの日か、旅行する前から、旅行を感じられる、旅行代理店を作るのが、今泉兄の夢の一つです。

そうです、AMPストーリーで、旅行体験記のサイトを作り、旅行代理店を復活。

そんな事を感じましたよ、自分のブログの背景に、カッコイイ写真を張り付けただけなのに・・・。
やりたい・・・。

早くやりたい・・・。

早く、表現したり、表現するツールを作りたい・・・。
AMPストーリーじゃなくても、いいんですよ。

むしろ、AMPストーリーじゃない方が、いろいろと出来る事はたくさんあります。

それこそ、動画だっていいですし、HTML5やSPAやPWAなら、なんだって、できます。
でも、あえて、AMPストーリー。

束縛からしか、アイデアは生まれません。

何でもできるは、何にもできないのと同じ。
これしか出来ない、これしか使えない。

ここからアートが生まれます。

ここで文化が育ちます。
だから、やりましょう。

まずは、今泉兄のブログをAMPストーリーで発信。

そこから、ブログをAMPストーリーで配信できる、無料ブログサービスを作りたいと思います!
これぞ、AMPストーリーのブログ!ってところまで到達するには、かなりの試行錯誤が必要な気がします。

どういった背景に、どういった配置が最適なのか。

いろいろなデザインであり、いろいろな素材、配置から、しっくりくるものを、スタンダードなテンプレートにする事になるでしょう。
最適な文字の色、大きさ、フォントも、見つかる事でしょう。

もちろん、自由にカスタマイズ可能にして、オリジナルのテンプレートも出てくることかと思います。

無料、有料、問わず、AMPストーリー専用の素材集なども、用意する必要があるかも知れませんね。
無料ホームページ作成サービスと共に、ブログサービスも断念した事がある、我が社デジタルストリート社。

新サービス「DIGITAL STREET」のサービスとして、これから作るAMPストーリー作成サービスで、リベンジしたいと思います。

そうですよ、そう、AMPに特化した、AMPストーリーも作れる、CMSであり、ブログサービスを作ります!
では、そろそろ、最後の気づき、その3です。

なんと、AMPストーリーは、動画も掲載できるのですが。

な、な、なんと!!!!!
AMPが出来るように、AMPストーリーも、なんと、YouTubeの動画を掲載する事ができます!

・・・。

もう、お腹いっぱいです・・・。

もう、次のストーリーが目の前に浮かびましたよ!!
開発日記も、99個の夢の報告もあるので、続きは明日また語りますが・・・。

もう、これだけで、興奮のうつぼ。

あ、昨日、ドン・キホーテで、ウツボを観たんですよ、なので、興奮のうつぼ。
ちなみに、注意点だけ、ご報告。

といっても、誰もAMPストーリーなんて作らないので、まったく必要ない情報ですが。

AMPストーリーで、フル画面でYouTube動画を貼ると、前のページには戻れなくなりますので!
必ず、画面サイズを指定して、ページ内に貼ってくださいね。

iPhoneの場合は、そうでしたので。

次のページに移動する場合も、一見、分かりづらいので、フル画面で掲載しない方が良いかと思います!
この辺は、明日また、Androidでも実験して、解説しますが。

基本は、AMP HTMLなので、AMPで出来る事は、ほぼほぼ、AMPストーリーで出来るんじゃないですかね!?

ページ後半の20%の領域限定ですが、リンクもできるようになりましたので。
ただ、タップで次のページ、前のページに移動するフォーマットですので。

この辺を邪魔しない仕様というか、束縛の元、いろいろと進化していく事と思います。

もしくは、退化して、無くなるかも・・・。
ま、それはそれで、見届けましょう、ここまで惚れ込んだので、流行らせましょう、流行るまで。

ではでは、続いて、この気づきを踏まえ、今後の開発内容を、上書きです。

単純に、AMPストーリーで、このブログのダイジェスト版を作ろうと思ったのですが、ブログ全部をAMPストーリーにする為の開発内容を、次の章で語ります!