2018年5月14日〜16日に、東京ミッドタウンで開催されているAd Week Asia。偉い人からチケットをもらったので行ってきました。
何を聞こうかな〜とパンフレットに目を通していたら「スマホ時代のコンテンツデザイン」なる講演を発見。LINE・桜川さんのお話がめちゃ良かったのでメモを残しておきます。
こんな風に「より届けるべき人に届ける、よく読んでもらうために何をするべきか？」を考え続けてるのいいな〜。みんな読んでね。
- 5月14日（月）11:45〜@東京ミッドタウン
-
-
スピーカー：LINE 桜川和樹さん（Tw:@sakucchi）
-
-
スマホ時代の前提
-
-
「電車の扉が開く」ということすら競合だと思っている。
-
-
自己紹介
-
-
LINE MOOK、NAVERまとめなどやっている。
-
R25の初期段階から担当しているので、13年くらいモバイルデバイスの編集をしてきた。
-
-
サービス紹介
-
-
LINE NEWS 6,000万MAU
-
NAVERまとめ 20億PV、6,700万MAU
-
LINE MOOK スマホに特化した縦読みの世界。HTMLに縛られないデザインで読了率が80%超。
-
-
人を選ぶような専門領域というか、雑誌がやってきた世界って、一部の人にしか読まなかったりする。ニッチな（？）、というかそこまでいかないまでも人を選ぶコンテンツって、今も生きていく術が限られている。
-
セグメントを通じて、好きな人、好きになってくれそうな人たちに届けられたらと思っていた。
-
LINEからトーク上で届けることに可能性があるのでは、と始めたサービス。
-
-
-
本題の前に
-
-
コンテンツはそれが乗る、乗り物の特性に影響を受ける。
-
ひな壇って、なんで生まれたのか？これって、昔もあったよね。
-
-
でも、最大で8人くらいしかいなかった。アメトーークでは横に長いひな壇になって、16:9の画面に最適化した（はず）。
-
雑誌は「読み飛ばせる」特性がある。スマホはフォーカスしがちなので、読み飛ばしが難しい。
-
-
-
本日のお題
-
-
スマホの特性を理解する。
-
-
ソフト的な特性
-
ハード的な特性
-
-
-
スマホの特性 - ソフト版
-
-
誰かとやりとりするデバイスであることが前提。
-
情報→コミュニケーション。
-
-
コミュニケーションとは、アクションxリアクションである。
-
「儲かってまっか！」「ぼちぼちでんな！」的な
-
-
つまり、リアクションをデザインすることが大事。
-
池上さんも、相手に疑問を持たせて「なんでですかー！？」って言わせる。そこに「いい質問ですね」と答える。これ。
-
-
- だめな例。
-
- 「キッチンのネバネバ汚れが取れないですよね」→「そんなときにこれ！」
-
LINEだと「お、おう」「ええ、まあ…」ってなる。
-
- コミュニケーションが成立しない。キャッチボールできない。
-
-
- 言葉の呪縛がある
-
- 〜〜力抜群、〜〜決定版とか
-
「不自然な言葉」を使いたがってしまう。日常じゃつかわない。
-
日常的に使う言葉かどうか、は心理的にフィットするかどうかにかかってくる。
-
時系列にも呪縛がある。
-
-
時系列に物語を語っていく、という話法にも縛られている。これ、語りやすいんだけど、楽なんだけど……。
-
こういう時系列にプレゼンされると「眠い、結論から言って」と言われたりする。
-
-
桃太郎だったら「昔々」じゃなくて、「鬼ヶ島で鬼が死屍累々」みたいなシーンから入る。
-
時系列で語るのではなく、一番美味しいところ＝相手が会話を続けたくなるところから入る。
- 相手が喋りたくなるところから入る。
-
-
-
-
キッチンクリーナーだとこう入る
-
-
「やばいもの、見つけてしまいました」→「え、なんですか急に」→「キッチンクリーナー、どこの使ってます？」→「この動画見てくださいよ」
-
-
さっきよりは見てくれそう。相手に対してどれだけホスピタリティを持てるか、という話。
-
情報の受けてはあくまでも話し相手であることを忘れないように。
-
-
-
-
スマホの特性 - ハード版
-
- 画面が狭いので、何をどう見せるのかという展開に左右されやすい。
-
スクロールを誘発するUX設計がキモ。
-
-
LINE MOOK以前のプロダクトはHTMLだったので、自由度がきかなかった。
- そういうこともあり、画像1枚で配信できるようにした。スクロールの仕方について微細な影響が大きいということがわかってきた。
-
-
実例をいくつか見てみよう（ここが一番おもしろい）
-
-
1画面の情報量が多いと、読み進んでくれない。
-
-
画像もりもり→微妙 ホッピーの基本（シンプル）→OK
-
-
-
-
続きを感じさせる作り
-
-
横スクロール的な完結した画像は微妙、文字が切れているのがベター。
- 山口コメント）右のほうが下にスクロールしないと読めないですよね、っていう。
-
-
- 終わりを感じさせない
-
- 区切りを意識させるために「線」を引いちゃうと、離脱しちゃう
- だらだら続く感じ、区切りを感じさせないのがベター
-
-
この結果は衝撃だった
- 山口コメント）微妙になんですが、左の方に「ー」みたいな線が入ってて、それが区切りを意味しちゃって離脱するってさ。
-
-
-
空白の大小で離脱率が大きく変わる。
-
- 大きいとな…
-
-
-
視線誘導の設計
-
-
視線がわちゃわちゃ動くと読まれない
-
左と右に視線がスムーズに動くのはベター
- 山口コメント）右のほうが視線誘導がスムーズという意味で離脱が少ない。
-
-
-
画像とテキストのバランス
-
- テキストが連続して続くと離脱される
-
テキストと画像がバランスよく配置されると、良い
-
テキストの分量
-
- 単純に多いときつい
-
1パラ120文字くらいで区切るといい。
-
まとめ
-
- スマホはコミュニケーションデバイスです。
-
言いたいことを言うのではなく、相手の聞きたいことから逆算して、投げかける言葉を決めていきましょう。
-
スクロールを誘発する設計が大事です。
桜川さんは戦場の最前線にいる人です。Twitterやってる人はとりあえずフォローしておくといいよ！