最高のUXを目指して、1人月でWebアプリを開発した話

ユーザーが各機能にアクセスしやすくするためのデザイン

Imagawa Takaya氏：3週目に行ったことはこちらになります。今までは機能の実装がメインだったのに対して、この週からはデザインをやりました。先ほどのプロトタイプでもお見せしたとおり、DJ7ではロジックの実装とデザインの工程を明確に分けました。これはデザインしたあとで機能を増やしたくなってしまい、手戻りが発生してしまうのが嫌なためです。

この週に意識したのは、実装した機能をUIによってどのようにユーザーに使ってもらうかを考えていました。

はじめにデザインの方針を考えました。今まで実装した機能は、先ほども言ったとおり知り合いに使ってもらいながら実装を進めていたので、どれも必要であることは実証済みです。なので方針としては、華やかなUIによってユーザーの目を惹くのではなくて、ユーザーが各機能にアクセスしやすいものを作ると決めました。

この方針を満たすために、4つの要件を決めて実際にデザインをしました。まず1つ目に、機能の中心がキューであること。2つ目に、よく使う機能を近い場所に置くこと。3つ目に、画面を広く使うこと。4つ目に、クリック数を少なくすることです。

以上のことを踏まえてできあがったのがこちらになります。まずそれぞれがどうなっているのかというと、左から、検索窓、中央にキュー、右側に履歴、下側にプレイヤーとなっています。

先ほどの要件と絡めて説明していくと、キューを中心に配置するのがこのようになります。このキューを軸にほかのものの配置も決めました。

よく使う機能を近くに置くことですが、これは検索と履歴を左右に置くことによって、動画の追加をやりやすくしました。

画面を広く使うというのは、常に画面を占有する要素を少なくすることを言っています。まず狭い状態がどういったものかというと、こちらはスマホの画像になってしまいますが、私がよく見る「Quora」のサイトです。このサイトでは実際にコンテンツのある領域がとても狭く、サイトを開いた瞬間にうんざりしてしまうことがありました。

私も最初は検索窓を上に配置することを考えましたが、こういった理由によってプレイヤーだけを画面の下側に常に配置することにして、画面の広さを確保しました。

最後にクリック数を減らすことについてです。DJ7ではほとんどの機能を1クリックで使えるようにしています。これはどの機能も必要ならば、ユーザーが手の届くところに置かなければならないという気持ちで配置しました。

また、先ほどのスライドの実現したいものの中に、動画の同期再生ではなく、音楽の同期再生がしたいと書きました。

まず、なぜ私が音楽の同期再生に重きを置いていたかというと、DJ7を開発した一番のきっかけが先ほどのDiscordのMusicBotだったからです。最初はMusicBotの代わりになるものを作ろうと考えていたので、音楽の同期再生だけできればよいと考えていました。

しかしながら、開発を進めていくうちに、同じ動画を見ながら知り合いと意見を交わすことの楽しさに気がつき、最終的に動画を残すことにしました。ここは常に使ってもらいながら開発を進めていくことのよさが出たと思います。

ですが私の中で、やっぱり一番に焦点を当てているのは音楽の再生であり、キューの操作です。実際DJ7では動画を見るために1クリックする必要があることからも、感じとっていただければなと感じます。

読み込みを速くすることでUXを高める

4週目は実際のスマホ版の表示を作成していましたが、3週目の話の内容と少しかぶってしまうところがあるので、今回は割愛します。そのほかに4週目では、UI以外でUXを高める方法について検討をしました。

DJ7で行っていることの1つは、同期再生が使用になるまでを短くすることによって、コンセプトをいち早く理解してもらうことです。スライドには「出会って3秒で同期再生」と書いてありますが、実際にDJ7は、サイトにアクセスさえすればすぐに使用できます。

次に、これはほかのサイトでもやっていることですが、DJ7でも読み込みを速くすることを検討しました。

まずDOMの生成を少なくすることをやっています。DJ7では再生した動画の履歴を最大で2,000件保存できますが、これを最初からすべて描画してしまうとサイトの読み込みが重たくなってしまうので、描画に必要な分だけのDOMを生成することをやっています。これは仮想化スクロールリストを使用して実現しています。実際、これをしたことによってサイトの読み込みがかなり速くなりました。

次にService Workerの設定です。これはPWAに対応するためには導入が必須ですが、DJ7ではサイトのHTML以外にも、サムネイルの画像などもキャッシュすることによって読み込みを速くしています。

また、こちらの設定はGoogleが開発しているWorkboxを使用しました。複雑なService Workerの設定を簡潔に行え、また、Vue.jsではPWAに対応するオプションを設定すると最初から使えるので、おすすめです。

公開前の準備ではユーザーに対してサービスを印象づけることを意識

次に第5週目です。サービス公開前の開発はここまでになります。便宜上、開発と銘打っていますが、この週は開発よりも公開のための準備が主でした。

また、公開前に準備するにあたって意識したのが、どうすればユーザーに対してサービスを印象づけられるかです。

まずサービス名とドメインとロゴについてお話しします。これはサイトにアクセスする前に見るものであり、ユーザーの第一印象を左右する重要な要素だと思っています。

サービス名についてですが、これは「よく使うものならば、短く簡潔であれ」との思いから「DJ7」に決めました。ドメインについても、サービス名と同じく「dj7.io」という短いものにし、ロゴはできるだけ印象に残せるように、思わず目がチカチカしまいそうになるようなものを作成しました。

次にサービスを紹介するためにQiitaに記事を書きました。こちらスライドのタイトルに「1本目」と書いてありますが、これは実際に1本以上書いたという意味になります。

1本目の記事は文字を多めにして、サービスを解説する記事を書きました。投稿したときの気持ちとしてはトレンド1位を取るつもりでしたが、実際に1日経った結果「いいね！」は4つしかつかず、苦い思い出になってしまいました。また、当然トレンドにも入れませんでした。

しかし、私のトレンド1位を取るという気持ちは変わっていなかったので、私はすぐさまに2本目の記事の執筆に取りかかりました。ちなみにこのときの意気込みとしては、2本目もダメだったら3本目、4本目でも書こうという思いでした。

また、1本目の記事を知り合いに添削してもらったところ、わかりづらいと言われてしまったので、2本目は画像や動画を多めにしてわかりやすい記事を書くことを意識しました。ほかにも、最初に「いいね！」の数を増やすためにTwitterで宣伝のツイートもしました。

その結果……このように非常にたくさんの感想をもらえました。また、最初にも書きましたが、700を超える「いいね！」とトレンド1位になり、多くの人にDJ7を使ってもらえました。

アイデアの価値を証明し、できれば1人月で開発するのがおすすめ

次に、公開後にあったことについてお話しします。

得られた反応については、先ほどTwitterの画像の中でもいくつか見られましたが、同期再生について好印象な意見を多くいただけました。また、使っていただいた方がいろいろなDJ7の使い方を考えてくれました。

ふりかえりとしては、いただいた反応から思ったことは、最初の同期再生の需要に対して間違いはなかったということです。これは当初から知り合いに使ってもらうことで、サービスのもつ価値や需要を確かめながら開発を進められたことが功を奏したと考えています。

また、同期再生というコンセプトをみなさんに伝えられたと思っています。これは一つひとつの機能の必要性を考えながら実装をしていったことと、サービスの趣旨からズレてしまわないように意識したことがよかったと思っています。

これらをまとめると、今回のDJ7によって、まず同期再生をより身近にすることが実現でき、さらに目的を据えて開発をすることの重要さをあらためて確認できました。

今回の開発で私が重要だと思ったことをまとめます。まず1つ目に、アイデアの価値を証明すること。今回の場合ではプロトタイプを作って知り合いに見せることで証明しました。

2つ目に、必要な機能を考えること。これはサービスの趣旨に沿った機能をつけるべきだと話しました。

3つ目に、積極的に人に使ってもらうこと。使ってもらえるのはモチベーションにもなるし意見ももらえるので、いいことしかないと考えています。

4つ目に、UIは各機能にアクセスしやすいものを作ること。必要な機能だけをまず実装しているならば、どれもユーザーに使ってもらいたい機能であるはずだからです。

5つ目に、サービスの存在を周知すること。せっかく作ったサービスなので使ってもらわなければ作った意味がないと思います。

また、1人月で作成しましょう。これは仕事などの折り合いで難しいかもしれませんが、一般に人の関心は3カ月で変わっていくそうです。なので、私としては思いたったらできるだけ早く完成まさせることをおすすめします。

今後の展望についてですが、これはすべてTrelloにまとめてあります。画像を見てもらえるとわかると思いますが、やりたいことはまだ非常にたくさんあります。DJ7の開発はこれからも続けていこうと思いますので、よろしくお願いします。

それでは今回の発表は以上になります。ご清聴いただき、ありがとうございました。