TechFeed ProのUI/UX
白石俊平氏（以下、白石）：始めようと思います。「TechFeed ProのUI/UX」というタイトルでやりたいと思います。
軽く自己紹介すると、株式会社テックフィードというところの社長をやってます。「TechFeed Pro」というプロダクトがあるんですけれども、そのプロダクトマネージャーとかUXデザイナーとかもやっています。なので、ビジネスからUXデザイン……僕、開発者でもあるので、そういったところまで手を出しているところです。
今回お話いただいたのはものすごくいいタイミングで、もともと決めていたTechFeed Proのリリース日が今日だったんですね。TechFeed Proって1月からクローズドベータでリリースしてたんですけれども、本日正式リリースということで。よかったら「https://pro.techfeed.io」を見てください。これProじゃないやつがあって、そっちはメンテ止めようと思っていますので、必ずProのほうでお願いします。
今日はこのProについてのお話をしようと思います。
エキスパートによるチェックでチャンネルの品質を保つ
一応TechFeed Proについての説明を先にしようと思います。3つの特徴という感じでご説明すると、200の専門チャンネル、あとエキスパートモードがあります。これは広い意味でのUXという意味でここを紹介しますけれども、エキスパートコミュニティがあるんですね。
プロダクトそのものを見ていただいたほうがいいので、それをお見せしながらやります。これがTechFeed Proです。ライトモードもあるんですけど、これはダークモードです。小さくて見づらいかもしれないですけど、200以上の専門チャンネルがこんな感じで山ほどあります。クローズドベータのときは20チャンネルだったんですけど、一気に10倍です。
今回、エキスパートモードを今日から公開したんですよね。どういうものかというと、どんなに専門家でもやっぱり自分の専門分野って3つ4つぐらいだと思うんですよね。多くの人は1つ2つだと思います。それ以外のところは、興味はあるけどそんなに詳しくない。だからトレンドぐらい追っておきたいみたいな。そういうニーズがあることを突き止めまして。
なので、「#プログレッシブウェブアプリ」だったらですね、これはノーマルモードでフォローしている状態です。基本的にノーマルとエキスパートなんですけど、ノーマルでフォローしていると、日本語のトレンドの情報だけ入ってきます。
ここでもう1回フォローをこうやって押すとエキスパートモードになりまして。一番上がもういきなり英語ですけれども、英語のトレンド、もしくは英語のエキスパートの人たちがつぶやいた情報をリアルタイムで取ってくるものになっています。
なので、ノーマルモードとエキスパートモードを技術のチャンネルごとにこうやって切り替えられて、自分の興味・関心とレベルに沿って情報を自由自在に操れると。そういうかたちになっています。
あと、エキスパートコミュニティがあります。ここにエキスパート一覧があって、ここにもう日本で有数のテクノロジーエキスパートの人たちを今で55人集めてます。これはどんどん増やしていく予定で、月に20人ぐらい増やそうかなと思っています。
なんでそういうことをしようとしているかというと、僕ら200ぐらい専門チャンネルがあって今後もどんどん増えるわけですけれども、はっきり言って、これのメンテナンスは僕らじゃできないんですよね。運営がすべての知識を知っているわけではないので。
例えばこの「#3Dプリンタ」というチャンネルを見ても、ここに出ている情報がいいのか悪いのか、僕らには判断つかないんですよ。詳しくないので。なので、そこで専門家に来ていただいて、僕らのチャンネルの品質を見ていただくと。そういう設計の下にエキスパートのコミュニティも設計してます。
これも広い意味で、プラットフォームの品質を保つ。で、ユーザーにいい体験をしてもらうと。そういう意味でのUXだと思っています。
TechFeed Proの2つの原則
まずUXデザインの話なので、それに関連した話で、TechFeed Proの2つの原則から話します。
実は「TechFeed」という前身のサービスがありまして、これを4年ぐらい運用してたんですけれども、なんかちょっと物足りないなと自分たちで思ってまして。物足りないけどどう解決すればいいかよくわからないから、エキスパートの人たちに聞きに行くことになりました。
古い方はご存じかもしれませんけど僕は昔けっこう勉強会とかやっていて、たまたまなんですけど、エキスパートの人たちにたくさん知り合いがいたので、もうどんどん聞きに行くと。30人ぐらいにユーザーインタビューしたんですね。UXのインタビューです。
そうすると、エキスパートの人たちって、そもそも何で情報収集しているかというと、Twitterだったんですね。
僕はけっこうこれ意外で、例えばはてなブックマークのテクノロジータブだとか、あとQiitaだとか、あとはRSSリーダーを使っている人もちょこっとはいるかなとは思ってたんですけど、もちろんTwitterもいると思ってたいたものの、まさかメインだとは思ってなかった。しかも30名中30名の方がTwitterでした。
だから、そこからすごく考えて分析して、結局ここだなと。「誰が発信したか」。なんでTwitterなのかというと、もうエキスパートはエキスパートの情報しか欲しくないんですよ。自分の専門分野に関しては。なので、海外のエキスパートを直接フォローして一次情報を得ているんですね。
ただ、「2. 情報源をメンテナンスし続ける」と書いてあるんですけれども、やっぱりエキスパートの人たちって情報収集にもけっこうコストをかけているので、すごいメンテナンスしているんですよね。フォロワーとか。ただし、自分の専門分野のところはなおざりなわけです。「興味はあるけど」みたいなところで、結局ちょっとトレンドになっている、ネットで話題になっているやつをTwitterでたまたま出会えればよし、ぐらいのスタンスなんですね。
なので、この2つです。「『誰が発信したか』を重視する」ところと、あと「情報源をメンテナンスし続ける」。この2つで、さっきのエキスパートコミュニティとかは設計することになったわけですね。この情報源のメンテナンスとかに、エキスパートの人たちの力を借りようというわけです。
UI/UX面でのPWAのデメリット／メリット
では次にいきたいと思います。今回PWA Nightという話で中津川さんにお声がけいただいて、PWAと言えばTechFeed Proだと印象づけておこうと思いまして、こんなスライドを挟んでみましたが、全部クレームですね。
（一同笑）
「PWAで利用しようとすると、少々使い勝手が悪い」「PWAとしてホームに追加したら、起動したら再度ログイン……」。
でも、ユーザーから直接「PWAとして使ってみたら、こんなことになりました」みたいなフィードバックをこれだけいただいているサービスは、たぶんほかに日本にはあんまりないんじゃないかなと自負しております。
UI/UX面でのPWAのデメリット／メリット。これはよくある話です。よくある話なんですけれども、僕らはこれを実体験しているところもあるので、そこも踏まえていろいろお話ししていきたいなと思います。
先にデメリットからですね。あとにがっかりするものを持ってくるとしょぼんとして終わっちゃうので、先にデメリットのほうからいきたいと思います。「遅い」「『不可能』が存在する」「ユーザーが慣れていない」。まあまあ、どれもPWAだったらそうやなって感じですよね。
遅い。昔に比べると遥かに改善しました。やはりでもわずかに遅いですね。しかも、僕はUXデザインをやっている人間です。そのわずかが、心地よさには重大な悪影響を与えるとも思っています。
ここに貼っているのは僕らのホーム画面で、無限スクロールを持つホーム画面なんですね。なので、スクロールして、その座標をもとにサーバにデータを取りにいって、それを今度はDOMをベチャって貼るみたいな、そういう処理をやるわけですけれども、最初はこんなメチャクチャな感じでした。
これは改善済みではあるんですけれども、けっこう問題が起きるなと思ってます。TechFeedから数えると、4年以上運営していて、全部Webでやってますけれども、パフォーマンスって絶対必ず一度は問題になるとは思ってます。
ただ、アプリの規模やデザインにもよるとは思います。僕らはかなりでっかいほうのサービスだと思っていますので、そうでないPWAだったら、そうでもないかもしれません。
PWAもモバイルアプリも対等な存在で、選択肢の1つ
次ですね。「『不可能』が存在する」と。これ詳しい方も詳しくない方もいらっしゃると思いますが、以下は、現在TechFeedにとっては重要なんですけど、不可能です。これ、重要なんですね。これがちょっと痛い。
iOS上でのプッシュ通知、これができないのはよく知られているところです。あと、グルーピングとか通知アクションなどの高度なプッシュ通知機能、ここらへんも使いたいんですけど、今のWeb Pushだとできない。
通知アクションは、ここの画像で貼ってあるんですけれども、左側の画像で「REPLY」「ARCHIVE」とかって英語で書いてあるところですね。通知から直接返信するとか、インスタとかでも、直接「いいね！」できたりするじゃないですか。ああいうのができない。
あとは通知をグルーピングしてくれる、Androidの機能ですね。僕らニュースとかSNSのアプリなので、基本的にはこういうこともしたいんですけど、できないことです。
あともう1つ、アプリ内ブラウザですね。僕らはニュースアプリ、SNSのアプリだから、多くのWebサイトの「リンクを踏んだらページを出す」ってやりたいと思うんですよ。PWAだと「リンクを踏んだら新しいタブで出す」以外はできないんですね。
1回iframeで心地のいいUXできないか、UI/UX設計できないか、って実験をしたんですけれども、iframeはダメです。iframeは使わせてくれないサイトがたくさんあって、もう全然ダメでした。
なので、ここらへんはもうやっぱりPWAだと解決はできないです。今のところはですね。なので、デスクトップ／モバイルアプリという選択肢を今後提供していきたいなとは思っています。
ただ、ここの「選択肢」をでっかくしたところは、けっこう大事だとは思っています。要はPWAもモバイルアプリも、もはやけっこう対等な存在で、できること・できないことがあって、その選択肢の1つが、あえて言えばデスクトップ／モバイルアプリだ、と思っているところですね。
インストール率4%でも、プッシュ通知許諾率は31.8％
あと、「ユーザーが慣れていない」ところです。PWAのUXに、まだまだユーザーが慣れていないと。ただ、PWAが言われて始めてから、たぶん5年ぐらい経っているかもしれないですけど、まだ慣れていないので、あと何年経てば慣れるのか。これは期待できないんじゃないかと思ったりしつつもですね。
ちょっと今新型コロナな日々じゃないですか。これまでリモートワークやテレワークってそんなに浸透してなかったけれども、この新型コロナ一発で、いきなりすごい浸透しているわけですね。こうやってオンラインでイベント開催してみたりとか。何があるかはわからないと思ってます。何かがあれば、一気にPWAがすごい普及するかもとは思ってますけれども、「何か」がないとたぶんダメだなとは思ってます。
この慣れてなさを、僕らが実際の数字を持ってきました。TechFeed Pro、これ開発者がメインターゲットで、しかも最初はWebやフロントエンドの方々。エキスパートもWebやフロントエンドの人たちばっかり揃えてたし、チャンネルもWebやフロントエンド中心で20だったので……っていう方々ですら、PWAインストール率4パーセントです。25人に1人だけです。TechFeed Proですらこれですからね。
でも、ちょっとここは強調しておきたいのですが、プッシュ通知許諾率は、僕らメチャクチャ健闘していて、31.8パーセントです。これは一般には2〜3パーセント程度と言われています。
ソースはマイナビさんに載ってた記事で、Firefoxが調べたところ、2.4パーセントというのがあったんですね。僕ら相当健闘していると思います。
これは、僕らがすごいと言いたいわけではなく「やればできる！」ことを言いたいのです。僕ら、これメッチャがんばってます。セットアップ時のときの文言とかもすごく気をつけていますし、一発で通知のこれを出さないとか、そういう鉄板・鉄則を絶対守ろうとやっているので、やればできるんです。
なので、Web Pushでもやればできる。ここはちょっと明るいニュースを放り込んでおきたいなと思いました。
「とりあえずWeb（PWA）で」
TechFeed ProにおけるPWAのメリットを逆にお伝えしようと思うんですけど、これちょっときれいにABCで並べられたので、ABCにしてみました。A・B・C。Applicable・Branding・Consistency。
ABCで順番にいってみますと、まずApplicable。適用可能性が高いので、言ってみればマルチプラットフォーム・マルチデバイスですね。
これを、社長でUXデザイナーでもあるぼくの観点からの言い方をしますと、まず「One Product, Multi Use」。これはよく言われている話ですね。
ビジネス面でもさまざまなメリットがあるなと考えています。ビジネスのほうからUXデザインして、設計もしているので、例えば複雑さを抑えられるんですね。だってOne Productだから。
これがAndroidとiOSとWebとって別々に持ってて、それぞれ全部別のKPIを追わなきゃいけないとか、同じKPIかもしれないけれども全部違う動きするとか、そういうのだともうすごく大変なんですけど、これを抑えられます。
あと、意思決定を先延ばしできるところがあるかなと思ってまして。
で、この一言ですね。「とりあえずWeb（PWA）で」というのがけっこう可能だなと思っています。とりあえずWebで作って、あとからランディングページどうしようかなって考えたんですけど、実はこれSPA本体なんですよ。TechFeed Proのランディングページですね。
SPAのApp Shellのところですね。App Shell本体がここなんです。これをあとから取ってつけて、これをランディングページにしちゃえってやったんですね。こういうことができる。「とりあえずWebで」、これいい言葉だなと思います。
次、Brandingですね。TechFeed Proはデザインコンセプトがあります。「高級文具のような高級感と親しみやすさの融合」を最初から志向しています。これをあらゆるプラットフォームで同様のUI/UXを提供することを最初から考えてやりました。
Ionicを僕ら使っているんですよ。IonicってネイティブのUIのエミュレート機能みたいのがありまして、「Androidだったらこう」「iOSだったらこう」みたいにCSSを勝手に切り替えてくれるみたいなのがあるんですけれども、やめました。どうせ中途半端になると知ってたので、もうやめました。
僕らデザインはFigmaでやってて、コンポーネント蓄積してて、すごいUI/UXデザインのコストも激減している感じですね。
あとConsistency。これはまあ簡単な話です。僕ら上から下まで全部TypeScriptでやっていて、デザインが形になるまでが最近メチャクチャ速くなってきました。
例えばキャンペーンの機能があります。「応募する」ボタンを押したらこのキャンペーンが出てきて、ツイートボタンを押したらTwitterのところに飛んで、裏でいろいろやっているんですけれども、このキャンペーン機能は、UXデザインから実装完了までたった1日です。すごく速くなってきました。iOSもAndroidも全部同じプラットフォームだから、けっこう楽ですね。
PWAのUI/UXはネイティブアプリと比べても遜色ない
ということで、ちょっと時間余るかもしれないですけど、まとめです。
モバイルアプリか？ PWAか？ なんかここって……わからないです。最近の状況は僕よくわからないんですけど、僕の中だと二項対立というか、なんかこう「OR」だったかもしれない。ですけど、ではないなと最近思っています。私たちはPWAという強力な「選択肢」を手にしたのだと思っています。
これをもって結びの言葉としたいと思ってます。UI/UXは、ネイティブアプリにほぼ遜色ない。ほぼですね。できないこともある。遅かったりもする。開発上のメリットも十分で、ここ、ビジネス上のメリットも十分と。これもうぜんぜんたぶん世の中の人に届いてないと思うですけれども、僕は経営者として見てもビジネス上のメリットがあるなと思って、これで結びの言葉と代えさせてもらいたいと思います。
じゃあ以上です。どうもありがとうございました。
