AMP Storiesでコンテンツの新しい読み方を考えてみた
こんにちは。デザイナーの村田です。
クラシコム テクノロジーグループでは、開発とデザインの間で落としがちなボールを拾うために、Frontend Fridayという習慣を始めました。
すぐにリリースできるような改善をしてもよいのですが、せっかく好きなフロントエンドに時間を使えるので、AMP Storiesというコンポーネントを使って「北欧、暮らしの道具店」のコンテンツの新しい読み方・見せ方にトライしてみました。
AMP Storiesって？
GoogleとTwitterが推進しているオープンソースプロジェクト「AMP」は、モバイル端末でWebページを高速表示を可能にするためのフレームワークであり、AMP Storiesはその表現方法の1つです。
ひらたく言うと…
ルール通りにコードを書くだけで、Instagram StoriesのようなWebページを簡単、かつモバイルフレンドリーに実装することができます。
AMPプロジェクトの中でもExperimentalとされている、試験的なコンポーネントではありますが、一部メディアは実際にAMP Storiesを使って記事を公開しています。
特にWashington Postの事例は、タブレットでのレイアウト対応や、音声やビデオを埋め込んでいたり、AMP Storiesの機能をフルに使っていて夢が広がります。
Telling the stories of the segregated South: A folklorist's lifelong promise - The Washington Post
AMP Stories | Latest News, Photos & Videos | WIRED
「北欧、暮らしの道具店」での使い方
採用事例を見ていると、速報性のあるニュースよりも、写真とテキストを組み合わせた読ませる使い方（まさにストーリー）が多いようですね。
「北欧、暮らしの道具店」はもちろん買い物ができるお店ですが、スタッフによる商品紹介コラムやコーディネート例もカスタマーによく読まれているメインコンテンツです。そういった記事を、普段使い慣れているフォーマットでサクサク読み進めるのはよい体験かもしれません。
ということで、作ってみました。
AMP Storiesの実装方法
フレームワークと言ってもHTML/CSS/JSベースなので難しいところは全くありません。静的なサイトとして作ればよいので、今回はローカル環境のMiddlemanでbuildしたHTMLファイルをNetlifyでホストし、スマートフォン実機でプロトタイプを確認できるようにしました。
実装方法の詳細は公式ドキュメントが一番分かりやすいですが、以下の手順で作成するだけで、すぐにブラウザから確認することができます。
Create your first AMP Story – AMP
1. head内でamp-storyコンポーネントを読み込み
2. コンテンツをamp-story記法で作成
プロトタイプ
今回は写真とテキストの組み合わせで構成されていて、ストーリーに当てはめやすいそうな、新入荷商品のスタッフコーディネートを使ってみました。
最近Instagramを使っていても、タップだけで読み進められるStoriesに指が最適化されすぎて、タイムラインをスクロールするのが面倒になっている自分がいます…。忙しい一日の終わり、集中して読むぞ！探すぞ！なんて気分にならない時は、タップするだけで気になるものを探せるストーリー形式が適しているかもしれません。
「北欧、暮らしの道具店」では、動画を使った商品レビューも始めているので、写真だけでなく動画も組み合わせて、本日のおすすめ記事や商品を紹介できると面白そうですね。
---
こんな感じで、クラシコム テクノロジーグループは今のサービスの見せ方にこだわらず、色々なことを試しながら、ものづくりを楽しんでいるチームです。
「色々」に興味があるエンジニアの方、ぜひオフィスやmeetupに遊びに来てみてくださいね。