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

タグ一覧を見る