オンラインコミュニティのFacebookグループで、迷子になった経験がある人はいませんか？

前田デザイン室も多くのオンラインコミュニティ同様、Facebookを活動拠点としているため、Facebook迷子になるという声を聞くことがしばしばあります。

「もうFacebookで迷子にならない」を合言葉に開発が始まったのが「VIEW（ビュー）」というポータルサイトです。2018年4月から開発が始まり、アップデートを繰り返し2020年2月中旬にVIEW3.0を、4月末にスマホ版をリリースしました。

実際に、VIEWをスマホで使っている動画をご覧ください。

Facebookグループを使っているオンラインコミュニティにとって革命的なツールになること間違いなしのVIEW3.0について、前田デザイン室（以下：前デ）VIEWプロジェクトリーダーの「はちぼー」こと木村駿生さんにインタビューをしました。

木村駿生（はちぼー）
Webエンジニア。大学で電気電子工学を専攻し、現在はウォンテッドリー株式会社でWebアプリケーションエンジニアとして業務を行う。2018年5月、前田デザイン室に加入。

変わるきっかけを求めて、前田さんとの出会い

ーーーWEBエンジニアであるはちぼーさんが前デに入ったきっかけは？

木村：前田さんのことは前から気になっていてTwitter でフォローしてたんですが、僕が大学4年生くらいの頃だから2018年かな、前田さんの中でみんなでご飯を食べに行く企画が流行っていた時期がありました。

前田さんいわく、誰でも来ていいというので参加してみたんです。ちょうどその頃は、大学院に進むのは決まっていたけど進路に迷っている時期でもあって。何かモヤモヤしてて、変わるきっかけが欲しかったのでなんでもいいから首突っ込んでおこう！みたいな感じでした。

その頃は前デができてすぐだったので、まだクリエイター枠しかない時期でした。自分がクリエイター枠で入るのがイメージ出来なくて、「前デはちょっと……」と迷っていると、「じゃあ箕輪編集室入りなよ」って前田さんに言われて。そこから箕輪編集室に入って、前田さんのやってることを見ていました。

箕輪編集室でもちょっと活動してみたりしましたが、やっぱり前田さん面白いなと思って。結局は前田さんにひかれて、アンバサダー枠ができたタイミングで前デに移ったのが入ったきっかけです。

ーーーそもそも、システム開発に興味を持ったきっかけは何ですか？

木村：僕の父方が理系一家なんですが、みんなアマチュア無線の免許とか持ってたりして。その影響を受けたのか、昔から父がよく科学雑誌を家に買ってきてたんですよね。その中に、簡単なプログラミングの連載があったんです。

それでちょっと触ってみてたんですが、入り口はやっぱりゲームでしたね。プログラミングやればゲーム作れるの！？みたいな。それでゲームプログラミングの本を買って勉強してみたんですが、めちゃくちゃ難しくて挫折してっていうのを繰り返していました。

でもものを作ること自体は結構好きだったので、それはそれですごい楽しかったんですよね。プログラミングってパソコン一つあればできるし、自由に自分で遊べるので、細く長く続けていました。
本格的に始めたのは大学生になってからです。WEB開発のアルバイトをしたり、サークルのホームページを作ったりしていました。サークルのホームページにはメンバー向けに簡単な編集機能をつけていたので、コミュニティのために作っていたという意味では現在と繋がってるかもしれません。

「自由にやっていいよ」の言葉に背中を押されて

ーーーVIEWチームへの関わりはいつから？

木村：VIEW1.0の頃からチームに入ってはいましたが、どう関わっていいのか分からず、あまり活動出来ていませんでした。当時は学生だったということもあり、自信もなかったので見ているだけになりがちでした。

そもそもオンラインコミュニティでのプロジェクトの進め方が分からなくて不安で、自分でブレーキをかけていたのかもしれないと思います。ちゃんと関わり始めたのは3.0からで、僕がやりたくて開発を始めました。

ーーーVIEW3.0の開発を始めようと思ったのはなぜ？

木村：自分が自由に活動できるプロジェクトが前デにはないなとずっと思ってて。そもそも前田デザイン室はデザイナーとかクリエイターが仕事ではできないことをやるっていうコンセプトでできているので、ある程度仕方のないことだったんですが。こういうツールが欲しいから作る、といったWEB開発起点のプロジェクトはなかったんです。前デで楽しめてないわけじゃないけど、プロジェクトに加わることでもっと楽しみたかったというか。

それで前田さんに相談したら、「自由にやってくれていいよ」って言われて。当時のVIEW2.0は若干使いづらいところがあって、前田さんも課題感を持っていたみたいで。「VIEWを新しくしたいです」って言ったらすぐ任せてくれました。これがVIEWの開発に本格的に関わるようになったきっかけです。

VIEW3.0の制作について

ーーーVIEW2.0→3.0で変えたポイントと変えた理由を教えてください。

①閲覧画面と入力画面を同じにした
木村：VIEW2.0まではワードプレスを使っていたんですが、入力するためには管理画面に行かなくちゃいけなくて、慣れていないと簡単に触れるものではなかったんです。

（VIEW2.0の入力画面。ワードプレスに慣れていないと分かりにくい。）

なので、VIEW3.0では閲覧画面と入力画面を同じにすることを第一に考えました。

（VIEW3.0の入力画面。ログイン後の画面から感覚的に操作できる。）

VIEWの元々の役割だったFacebook上のコンテンツを見やすくするというコンセプトを引き継ぎつつ、誰が見ても使い方がパッとわかるようになったのがいいところかなと思っています。

②スマホ版を作った
木村：VIEW2.0まではスマホに対応していなかったんですが、VIEW3.0ではスマホ版も開発しました。

今までは、スマホから見ることは出来ても、入力は出来ませんでした。なのでどこからでも入力できるよう、スマホに対応することは必要だと思っていました。スマホに対応してからはアクセスが5倍になったので、やっぱりスマホの力はすごいですね。



ーーーVIEWページ上部の「コンテンツ」はホバーでメニューが開きますが、ホバーorクリックはどういう理由で選びましたか？

（ホバー：マウスカーソルを特定の位置にかざすこと。）

木村：これも結構議論した部分ですね。チームで話したときに、ホバーの方がいいっていう人とクリックの方がいいっていう人に分かれて。でもホバーだとスマホで見るときと体験がだいぶ変わっちゃうんですよね、スマホはホバー出来ないので。

僕も色んなサイトを見てホバーにしてるところ多いよって話してたんですが、でも他のサイトがホバーにしてるからからホバーにしていいんだっけみたいな話になって。どっちがいいって明確に言えないなと思って。なので最終的には僕が決めちゃいました。今後使っていく中で、もし使いにくいという意見があれば変えていこうと思っています。



ーーーPC版とスマホ版について、制作で大変だった部分に違いはありますか？

木村：まず今回の開発では、PC 版を作る時からスマホではどうするかっていうのは絶対に話すようにしていました。例えばコンテンツの見せ方について、PC はこうしたいけど、スマホの時どうなるかとか。スマホに移す時に大変じゃないようにしたいねっていうのは考えていました。

PC 版で大変だった事は、そもそもゼロから作ったことですね。僕の方で使えそうなプラットフォームがないかも調べたんですが、前田デザイン室にフィットしたものだったり、僕らが作りたいと思っているものに当てはまるものがなくて。最初から自分たちで作った方が良いものできそうだなと思って、ゼロから作ることにしました。

スマホ版に関しては、PC版で作ったものをほぼそのまま流用しているのでそんなに大変ではなかったです。PC版開発の時点でスマホ版でのUIも合意が取れていたので、後は細かいところを詰めていきました。コーディングも、スマホ版を作ることを前提に作業できたので、めちゃくちゃ大変っていうことはなかったです。ただやっぱり画面がPCより小さいので、PC版のデザインを崩さないようにスマホ版を作るっていうのはちょっと大変だったかもしれないですね。でもPC用に作ったものを流用できるメリットのほうが大きかったので、PC版をそのままスマホ用に対応させました。



ーーーVIEWの開発中、意見が分かれたときはどうやって解決しましたか？

木村：僕は今まであんまりリーダーていうのをやったことがなくて、ほぼ初めての経験でした。あまり自覚も持ててなくて、聞いてるだけになることが多くて。でも意見が分かれた時は、それぞれの意見を聞いてまとめることが多かったですかね。それぞれこういう点でいいよね、みたいな。

リーダーとしてあまり良くない気がするんですけど、いいものを作りたいのはみんな同じだと思うので、できるだけみんなが納得いく方向にまとまるように意識して話していました。強権政治みたいなのは僕は出来ないので。

定例会での立石さんのコメントが自信に

ーーー2月定例会でリクルートの立石さんから頂いたコメントやアドバイスについて、感じたことやVIEWに取り入れようと思った点はありますか？

木村：良い点として、初めてVIEWにログインした人でも、プロジェクト等の全体像が分かりやすいように作られていると言って頂きました。全体の構成に関しては僕たちもかなり議論して決めたので、嬉しかったですね。

他にも、チームで最後まで悩んだり迷ったりした部分についてのコメントが結構多くて。注目するポイントが立石さんと同じだったということは、僕らとしても自信になりました。

取り入れようかなと思ったことは、トップのカルーセル(バナーが流れているところ)は考える余地はあるかなと思いました。もっと動きを遅くするとか、別の要素に置き換えるとか。

VIEWをもっとツールに寄せるならスケジュールがトップに来るのが一番いいと思いますが、でもそれだとなんか味気ないなと思っていて。言われたことを全部取り入れるというよりは、コメントを頂いたことで考えるきっかけになったので、とてもいい機会でした。

VIEWの今後について

ーーーVIEWを今後どうしていきたいですか？

木村：VIEWがないと前デは回らないよねって思ってもらえるようになったらいいなと思っています。

（メンバーからも「便利！」との声が続々と！）

あくまでVIEWはFacebookを補助するものという立ち位置なので、あまり機能を盛り込みすぎても良くないんですが、VIEWの役割を少しずつ大きくしていきたいなと思っています。例えば通知機能はあると便利だし、VIEWを見れば前デの情報を見逃すことがなくなるっていう状態にしたいです。というのも、イベントが企画されていても気づけないことが結構あって。興味のあるイベントに参加しそびれる人を減らせたらいいなと思っています。

その先のことは難しいですね…。僕自身は外部に広げるとかVIEWを売るっていう方向にはあんまり考えてなかったですが、もし出来たらそれはそれですごく面白いとは思います。

（VIEW開発スタート時の前田さんの投稿）

でも、まずは前デにとって最適なものを作っていきたいし、今の目標は前デの全員が使っている状態にすることですね。今はまだ半分くらいのメンバーしか使っていないんですが、前デのことがよくわからないのが原因で退会してしまうのが一番避けたいことなので、VIEWがもっと支えていけたらいいなと思っています。

前デに加入するときに、キャンプファイヤーからお金を振り込むのと同時にVIEWの登録も済ませられるのが理想です。でも実際はそうではないので、前デの加入とVIEWの登録のギャップをどう埋めるかが今の課題です。もし将来的にキャンプファイヤーと協力してコミュニティのためのプラットフォームをつくることがあれば、加入と同時に登録も可能になるかもしれないですね。



前田デザイン室の心強い味方になっているVIEW。
VIEWについてもっと知りたい方、お気軽にご連絡下さい！

▼前田デザイン室公式Twitter

https://twitter.com/MaedaDesignRoom

▼前田デザイン室

取材、執筆、バナーデザイン：高沢 紗緒里
監修：前田高志、浜田綾