サービスの使い勝手と開発スピードを両方高める打ち手とは？『ベストティーチャー』フルリニューアルプロジェクトに学ぶ

タグ : スタートアップ, ベストティーチャー, レスポンシブWebデザイン, 技術的負債 2015/10/26公開

（写真左から）デザイナーの川嶋氏、CTOの今氏、代表取締役社長の宮地氏、エンジニアの伊藤氏

サービスのさらなる成長を目的にリニューアルや機能追加を重ねるケースは決して珍しくはない。しかし、かえってユーザビリティが低下したり、コードが複雑になったりと、時にはリニューアルが「改悪」となってしまうこともある。

その「ありがちな落とし穴」を未然に防ぎつつ、リニューアル後の開発スピードを高める手段はないものか。10月26日にサービスのフルリニューアルを発表したオンライン英会話『ベストティーチャー』の開発チームに、効果的なリニューアルのコツを聞いた。

フルリニューアルの決め手は、サービスの再設計と技術的負債の返済

リニューアル後のダッシュボード画面

自分だけのトークスクリプト≒英会話の台本を作る「Writing（書く）」レッスンと、そこでの学びを実践的な「listening（聴く）」、「Speaking（話す）」に活かすためのSkypeレッスンを軸にサービスを提供してきた『ベストティーチャー』。

昨年以降は出版社や教育団体との提携によって新たなコースをリリースし、いわゆる「英語4技能」すべてを高めることのできるサービスへと進化してきた。

サービスの提供開始から約3年半が経ち、同社にとって過去最大となるリニューアルを敢行した理由は、主に以下の3点にあるという。

【1】現在の学習進捗やレッスンの予約状況などがグラフで分かるダッシュボード画面の導入
【2】全てのトークスクリプトから検索できるフリーワード検索機能の導入
【3】デザインのモジュール化＆レスポンシブデザインの導入

（リニューアルの詳細はこちら）

なぜ今回、このような大規模なリニューアルに踏み切ったのか、代表取締役社長の宮地俊充氏に語ってもらった。

「サービスの提供開始以降、新機能の追加や小規模なリニューアルなどは幾度となく行ってきたのですが、それによってサービス全体のバランスに歪みが生じてきていました。そこで、再度サービスを設計し直そうと考えたのです」（宮地氏）

リニューアルに着手したのは、2014年8月。サービスが黒字化したタイミングを好機と捉えてのことだった。さらに、CTOの今佑介氏いわく、今回のリニューアルには技術的負債の返済という大きなミッションもあったという。

「これまで当社ではRails 3を使用してきたのですが、バージョンアップの機会をうかがっている状態でした。今後も長くサービスを続けていくことを考えた時、バージョンアップを行っていないことが今後の開発の妨げになる場面が必ず来ると感じ、Railsのバージョンアップを含むフルリニューアルを行うことに決めました」（今氏）

リニューアルの肝となった「デザインのモジュール化」

今回のリニューアルについて語る宮地氏

そして、開発面で見た時に今回のリニューアルプロジェクトの肝となったのは、デザインのモジュール化だ。2015年2月より同社にジョインした伊藤啓満氏は、エンジニアながらデザイン面に対する思いをこう語った。

「UXの向上については、開発チーム全体が意識高く取り組んできました。デザイナーはもちろん、エンジニアである私にとっても興味深いテーマだったので」（伊藤氏）

そこでキーパーソンとなるのが、デザイナーを務めるフリーランスの川嶋光太郎氏だ。川嶋氏は、伊藤氏の誘いによって今年3月にジョイン（業務委託）した新メンバーだが、今回のリニューアルを語る上で欠かせない存在であった。

「ユーザーが使いやすいページを作ることは大前提。その上で、今後サービスを続けていく上で、デザイナー不在でも更新や新機能の追加が可能なデザインを実現したいと思っていました。そこで、デザイン一つ一つをモジュール化することで汎用性を持たせ、エンジニアでもデザインを組めるようにしたんです」（川嶋氏）

それに合わせ、今氏と伊藤氏のエンジニアチームは、Railsのテンプレートエンジンをerbからslimへ、CSSをSCSSからSassに変更するなど、パフォーマンスの向上にも余念がなかったという。単純に見た目のいいデザインを追及するのではない。川嶋氏は、エンジニアの業務効率化にもコミットすべく今回のプロジェクトに取り組んでいたのだった。