Web Story : WEBストーリーとは？

[{"selector":"#anim-159f8d0e-f699-47dc-9cb0-fbb301b80bb2","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1000,"fill":"forwards"}] [{"selector":"#anim-0aa7bc49-1228-4944-9c7b-a51cdfef3497","keyframes":{"transform":["translate3d(-114.32927%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a319f609-8d7b-4c1b-9117-e3c012fdf8ad","keyframes":{"opacity":[0,1]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-69181019-8898-4367-9537-233d5c87f33a","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] WEBストーリー とは？ WEBストーリー を使って 解説します!

[{"selector":"#anim-58714064-117b-4b55-a70a-fa5df47cce8e","keyframes":{"transform":["translate3d(-109.79827%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-69513e8b-1aa7-4301-8145-3c4f45d7e580","keyframes":{"opacity":[0,1]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d75a3ff6-d511-4882-8139-b3d8372fc50c","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-caba8c06-192a-45b5-a207-8d3ed35b4cc4","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1000,"fill":"forwards"}] [{"selector":"#anim-c553c307-8dab-40fb-b474-ef102a926042","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1500,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dfa978de-96ce-4eaf-8273-8729646ee2ab","keyframes":{"opacity":[0,1]},"delay":3500,"duration":1500,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fe77bce4-0c20-443a-a90d-532e478bf71c","keyframes":{"opacity":[0,1]},"delay":5000,"duration":1500,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] WEBストーリーとは？ ◆Googleが提供する モバイル画面に特化した投稿 ◆一定の時間もしくは 画面をタップすることで 次のページに移動 ◆従来の縦スクロールではなく 左右の動きが特徴 →インスタのストーリー のGoogle版！

[{"selector":"#anim-1b25afd6-b7aa-4a69-a2c4-b754922fbcbf","keyframes":{"transform":["translate3d(-109.51009%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-592217f7-69f2-467a-a25c-6cda47b83a0f","keyframes":{"opacity":[0,1]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fc38aaad-e74d-457c-9235-7c7b5559457c","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-35942479-1c9f-4505-bf34-ea062ecb3914","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1000,"fill":"forwards"}] [{"selector":"#anim-d81267c8-0740-414e-bd9c-3a8dfbf24652","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1500,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fe31a9a3-4f9d-4e25-9b9e-07b1a180884a","keyframes":{"opacity":[0,1]},"delay":3500,"duration":1500,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] 特徴 ◆Twitter等のSNSに投稿できる ◆検索エンジンに表示できる （画像検索含む） →URLを持っている！！

[{"selector":"#anim-e87add45-4150-4429-842c-d4e091e10e3f","keyframes":{"transform":["translate3d(-109.51009%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7035249f-ad3f-4212-8665-9d76c894e7f0","keyframes":{"opacity":[0,1]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9dec7633-e385-4763-bcb8-0675ef5b6a1b","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-bf63adf1-af7a-4d17-a922-dd69667630d3","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1000,"fill":"forwards"}] [{"selector":"#anim-dc6bc710-5875-4ccf-83a1-3ab976939590","keyframes":{"opacity":[0,1]},"delay":3500,"duration":1500,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0f82be11-5f3e-4757-89a1-2853fa73094b","keyframes":{"opacity":[0,1]},"delay":5000,"duration":1500,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0daaf883-ac9b-4092-8e76-e73b38a7ad70","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1500,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] 作り方 ※2021年2月時点では 英語のみ対応 →このストーリーもプラグインだけで作成しています。 →Googleが提供する プラグインで簡単！

[{"selector":"#anim-b3a27d4d-cd8f-4cd9-ba50-14d9e79a9fc1","keyframes":{"transform":["translate3d(-109.79827%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4c51dad9-1d46-4afa-bcd1-3b24526e3796","keyframes":{"opacity":[0,1]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e2c4a6b7-d8f1-491b-bb36-feffdb6d6536","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-4741cfd0-6ddc-4a14-b22f-4b0f285733e0","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1000,"fill":"forwards"}] [{"selector":"#anim-918a3936-2c83-455f-a51d-d7b012247373","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1500,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a2db5c02-3059-42f1-9afc-a97182d0d51e","keyframes":{"opacity":[0,1]},"delay":3500,"duration":1500,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] 作成した感想 ◆料理やファッション等、 写真が中心の記事はアリ ◆アメリカを中心に 利用が広がっている。 日本でも普及するのか要注目 →作るのは簡単。 現状は使い道が難しい

[{"selector":"#anim-653bc449-0a46-466a-b367-2f98193e0fd4","keyframes":{"transform":["translate3d(-104.23281%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5197619b-280b-4a60-b6bd-177cd48a0fb1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2fb1e0fb-f653-43b7-80b7-e325696e1d08","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-eabe000b-047d-49d3-bca5-af3f65a17f84","keyframes":{"transform":["translate3d(-104.23281%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-399bddce-7466-44d4-aa6a-cc10a6901f47","keyframes":{"opacity":[0,1]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-537430a2-d0eb-42cc-af40-f4a68af993ef","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":1000,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-fd53e911-a209-44e8-ae69-1374720f8143","keyframes":[{"offset":0,"transform":"translate3d(0, -674.96809%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"translate3d(0, -189.80102690799998%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"translate3d(0, -64.52694940399999%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"translate3d(0, -24.231354431%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"translate3d(0, -10.529502203999998%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":2500,"duration":1600,"fill":"both"}] [{"selector":"#anim-339ef5f0-c27c-44fd-b905-ba92f1724261","keyframes":[{"offset":0,"transform":"translate3d(0, -1206.85546%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"translate3d(0, -339.367755352%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"translate3d(0, -115.375381976%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"translate3d(0, -43.326111014%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"translate3d(0, -18.826945176%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":2500,"duration":1600,"fill":"both"}] ご覧いただき ありがとうございました！ このような情報は Twitterでも発信しますので ぜひフォローいただけると 嬉しいです！ Twitterを見る