dely engineering blog

料理レシピ動画アプリ『KURASHIRU』を運営する dely 株式会社のエンジニアブログです。

レシピ動画アプリ『クラシル』のエンジニアが解説する、動画アプリ特有のUIデザイン

dely株式会社 CTOの大竹です。今日は弊社が運営しているレシピ動画アプリ『KURASHIRU』を作る上で考えている、動画アプリ特有のUIデザインについてお話しします。

2016年は動画元年

インターネット上でコンテンツビジネスをしている企業の間では、今年2016年から動画を活用したビジネスが一気に普及すると言われています。

今までは動画を見るといえばYouTube、これくらいしか思いつきませんでした。
しかし最近では、Facebookで動画が流れて来てついつい見ちゃうことも多くないですか?こんな感じで。

Facebookのフィードに流れてくる動画

こうやって流れてくるとついつい見ちゃうことが多いと思います。

CyberAgentの藤田社長も、こんなこと言っています。

それを変えたのはやはりスマホでした。FacebookなどSNSのインフィード再生に違和感がなくなり、スマホデバイスがオーディオプレイヤーのようなので、テレビ代わりにYouTubeやニコ生を見ることも普通になりました。

「動画元年」という言葉はインターネット業界では過去に何度も使われていて、一体いつなんだという状態ですが、弊社にとっては2016年が間違いなく元年です。

動画元年|渋谷ではたらく社長のアメブロ

スマートフォンが普及して、4G回線になって動画を再生できるだけの通信速度の環境も整った。FacebookやInstagramなどのSNSでフィードの中で再生できるようになって配信先もあるとなれば、よりリッチな表現が可能な動画コンテンツが普及するのは当然といえば当然です。

新しい動画視聴アプリの登場

動画を視聴する環境が整ってきたので、動画を視聴することに特化した新しいアプリが今年に入って数多く登場してきました。先述のCyberAgentでは巨額の資金を投じて『AbemaTV』というアプリをリリースしました。スマホでテレビのように動画を見ることができます。

AbemaTVアプリ

他にも、元LINE社長の森川さんが運営する『C Channel』は女性向けに美容系の動画に特化したアプリです。

C Channelアプリ

そして、弊社が運営する『KURASHIRU』は料理レシピ動画に特化したアプリです。数多くのレシピを全て動画で配信していて、アプリ内で見ることができます。

KURASHIRUアプリ

動画のフォーマット

このように動画に特化したアプリが今年に入って多く登場しています。しかし、動画アプリにおけるUIデザインの定番というのは決まっておらず、各社試行錯誤しながら作っている段階です。

UI設計を大きく左右するのは、動画のフォーマットつまり縦横比です。大きく分けて横長・縦長・正方形の3種類があり、それぞれにメリットとデメリットがあります。

それぞれのフォーマットにおける代表的なアプリを紹介し、UI設計における特性を紹介していきます。

横長動画

アプリの例
・YouTube
・AbemaTV
・Netflix

AbemaTVのような横長の動画は最も一般的で、YouTubeでもほとんどの動画は横長です。テレビで流れる映像が横長なので、インターネットで配信される動画も必然的に横長が多くなっています。

YouTubeは横長動画

横長のメリット

横長動画のメリットは、スマホを縦に持ったときには動画を再生しながらでも他の情報を表示するスペースを自然に確保できることです。 YouTubeでは動画を見ながらタイトル、再生回数、チャンネル名、関連動画などの情報を表示できています。

YouTubeの再生画面(縦持ち時)

横長のデメリット

デメリットは、動画を全画面表示して再生するときにはスマホを横に持ち替えなくてはならないことです。

スマホ上のサービスはほとんどが縦持ちを前提に作られているため、動画を再生するときだけ横に持ち替えてもらうのはコストになります。 特に、1分程度の短い動画を配信するサービスの場合だとわざわざ持ち替えてくれなくなります。結果的に縦持ちのまま見る人が多くなるので、動画に没入感を感じてもらうのが難しくなります。

このことから、横長動画は長時間の動画を配信するYouTubeやNetflixなどのサービスには適していても、短い動画を配信するのには向いていないことが分かります。

縦長動画

アプリの例
・Snapchat
・C Channel
・Tastemade

C Channelでは全ての動画が縦長で配信されています。スマホファーストの動画とは何かを考えると、スマホはいつも縦に持っているのだから動画も縦長であるべきだろう。こんな発想から縦長動画に注力しているようです。

縦長動画で最も有名なのは、いま飛ぶ鳥を落とす勢いで成長している『Snapchat』でしょう。Snapchat内で配信される動画は全て縦長フルスクリーンになるように決められています。

縦長のメリット

縦長動画のメリットは、縦持ちのままフルスクリーン表示が可能で没入感のある視聴体験を提供できることです。
Snapchatの動画を見ると分かりますが、全画面で再生される動画はインパクトがあります。横長のように持ち替えることなくフルスクリーンで再生できるので、短い動画を配信する場合でもOKです。

Snapchatの縦長動画

縦長のデメリット

デメリットは、一覧表示した時にレイアウトの自由度が低いことです。何も考えずに一覧で並べようとしても、表示する領域が大きくなってしまいたくさんの動画を見せることができません。

そのため、Snapchatではいかに上手くレイアウトするかを研究しています。先日SnapchatのDiscoverのデザインが大きく変更されたのは、一覧性を改善するためだったように思えます。サイズを大小様々にしてタイル上に敷き詰めることで1画面に表示する数を増やしています。

Snapchatの一覧表示

このように、縦長動画は縦持ちのまま没入感の高い視聴を提供できるが、一覧表示をする時の自由度が低いことが分かります。

正方形動画

アプリの例
・KURASHIRU
・Instagram
・MixChannel

さて、KURASHIRUではどうしているのかというと、正方形で動画を配信しています。

正方形のメリット

正方形のメリットは、「視聴時の快適さ」と「並べた時の一覧性」のバランスに優れていることです。スマホを縦に持ったままでも最大サイズで再生できるので視聴しやすいし、一覧で並べる場合には綺麗に数多く表示することが可能です。

KURASHIRUの動画一覧画面と視聴画面

正方形のフォーマットといえば『Instagram』が代表的です。彼らはリリース当初、写真を並べる時には正方形の方が綺麗だと考えて正方形を採用しましたが、これは動画でも同じと言えるでしょう。

Instagramの一覧画面と閲覧画面

正方形のデメリット

デメリットは、全画面表示で再生できないことです。現行のスマホのほとんどは16:9の縦横比で製造されています。縦長でも横長でもこの比率に合わせられるのですが、正方形は必然的に1:1の比率になってしまうので全画面で再生することができません。

このことから、正方形動画は長時間動画を視聴する映画やドラマなどのコンテンツには向かず、1分程度の短い動画をサクッと見るのに適しているのが分かります。

KURASHIRUはレシピ動画を配信しているので、実際に料理を作ってもらうことを目的としているアプリです。料理を作るためには、動画を再生するだけでなくて、同時にレシピのテキストを見る必要があったり、他の人のつくレポを見たかったりします。正方形を採用したのは、動画視聴と付加的な情報の閲覧を上手く両立させるために最適なフォーマットだからです。また、動画の長さも1分程度に編集して長時間の視聴にならないように工夫しています。

まとめ

一言に動画アプリと言っても、動画フォーマット違いによって様々な試行錯誤が行われています。

まだ立ち上がって新しい領域でサービスを提供するためには、細かいことにも試行錯誤が必要なので余計に大変になります。ですが、自分たちで今後のスタンダードとなるようなUIデザインを生み出せるので、非常にやりがいのある時期だと思っています。

いま最も注目されている動画市場ですが、その最前線で試行錯誤していけるようこれからも頑張っていきたいです。

エンジニア募集中!

delyでは、KURASHIRUを開発するエンジニア・デザイナーを募集しています。 KURASHIRUで動画アプリのスタンダードを作っていきたいと思った方はお気軽に連絡ください。