エンジニアtype - エンジニアのシゴト人生を考えるWebマガジン
  • TOP
  • キーパーソン
  • 旬ネタ
  • コラボ
  • ノウハウ
  • 女子部
  • キャリア

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

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

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

(写真左から)デザイナーの川嶋氏、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に変更するなど、パフォーマンスの向上にも余念がなかったという。単純に見た目のいいデザインを追及するのではない。川嶋氏は、エンジニアの業務効率化にもコミットすべく今回のプロジェクトに取り組んでいたのだった。

成功のポイントは「要件定義の徹底ぶり」にあった

デザイナーの川嶋氏は、2015年3月よりリニューアルプロジェクトにジョインした

デザイナーの川嶋氏は、2015年3月よりリニューアルプロジェクトにジョインした

約1年3カ月に及んだ一大プロジェクト。一度作ったものを壊し、イチから設計し直す作業に長時間を費やすという大きな決断を必要とする今回のリニューアルを通じて、彼らは何を感じたのだろうか。

「デザインのモジュール化にはパワーがかかりました。ですが、今回のプロジェクトは要件定義がしっかりなされていましたし、『こうしよう』という方向性が明確だった。なので、メンバーとこまめにコミュニケーションを取ることでスムーズに進めていくことができたように思います」(川嶋氏)

川嶋氏の言葉にもある通り、今回のプロジェクト進行を支えたのは、プロジェクト開始直後に行われた、旧サービスの見直しから始まった約3カ月におよぶ要件定義だろう。

メンバーでサービスの全ページを順番に見ながら使いづらい点を全て洗い出し、「ユーザーが使いやすいサービスを作る」という目的を明確にしてから取り組んだことで、大きなトラブルもなく進行することができたのだ。

リニューアルを通じてパワーアップしたベストティーチャーから、ますます目が離せない。

取材/伊藤健吾 文・撮影/秋元祐香里(ともに編集部)




人気のタグ
業界有名人 スタートアップ 開発 SE 転職 エンジニア Web プログラマー スキルアップ ソーシャル アプリ シリコンバレー 起業 プログラミング キャリア スマートフォン Android SIer 技術者 えふしん クラウド UI btrax スペシャリスト Webサービス アプリ開発 Twitter ギーク Facebook CTO デザイン Apple IoT Brandon K. Hill Google ツイキャス SNS 英語 モイめし 世良耕太 IT 30代 赤松洋介 採用 コーディング 20代 村上福之 勉強会 プロジェクトマネジメント UX Ruby 法林浩之 ITイベント Webエンジニア モノづくり 受託開発 ひがやすを 五十嵐悠紀 LINE ビッグデータ 中島聡 ウエアラブル IT業界 ドワンゴ MAKERS コミュニケーション ロボット ハードウエア SI Webアプリ 女性 ゲーム インフラ iPhone 女性技術者 高須正和 ソーシャルゲーム マイクロソフト トヨタ イノベーション 研究者 ノウハウ tips 息抜き システム プラットフォーム イベント 和田卓人 チームラボ 自動車 メイカームーブメント ソニー エンジン 教育 UI/UX 開発者 iOS オープンソース グローバル Java サイバーエージェント 女子会 メーカー 家入一真 ソフトウェア 増井雄一郎 スーパーギーク コミュニティ IPA ニュース 40代 GitHub 日産 TDD テスト駆動開発 グーグル 音楽 モバイル PHP ソフトウエア TechLION

タグ一覧を見る