株式会社ライオット

SCROLL

サービス

SERVICE

01.

受託開発

ブラウザで実行可能な
アプリケーション開発を専門にしています。

要求整理などの上流工程から、保守・運用まで、システム開発の全工程を承ります。特にフロントエンド開発には深い知識と経験を持ち、特化した開発もお任せください。

WORKS

02.

エンジニアマッチング
サービス

モダンな技術を駆使して開発した
案件紹介プラットフォームです。
フリーランスの方々に最適な案件を
タイムリーに提供するサービスを
0から開発しています。

多くの企業とエンジニアをつなぐ経験から得た独自のノウハウを持つサービスを展開。
最高のマッチングをお約束します。

CHECK

支援事例

WORKS

プロジェクト概要

「KLEW」のフロントエンド開発プロジェクトを全面的に支援し、アーティストとファンをつなぐ革新的なプラットフォームの構築に貢献しました。本プラットフォームは、ライブチケットを通じて両者の絆を深め、より親密で充実したコミュニケーションを実現することを目指しています。また、このプラットフォームではWeb3技術を活用し、ライブチケット所要者に限定NFTを発行する機能を提供。これにより、デジタル記念品や特典を通じて、アーティストとファンの新しいエンゲージメントモデルを確立しました。弊社は、ユーザーにシンプルで快適な体験を提供するため、フロントエンド領域の設計から実装までを一貫して担当。直感的な操作性と高いパフォーマンスを兼ね備えたインターフェースを実現し、サービスの成功を支えています。※KLEWのWEBシステムこちら

成果と実績

1. 直感的で快適なユーザー体験の提供

設計から実装までの一貫した取り組みにより、ユーザーはスムーズにライブチケットをアップロードし、限定NFTを受け取る体験を享受。モバイルデバイスからのアクセスも最適化され、幅広いユーザー層に対応しました。

2. スクラム開発の導入によるチーム全体の効率向上

開発プロセスにスクラムを導入し、短いスプリントを重ねることで、プロジェクトの進捗を迅速に可視化。スクラムイベントを活用し、チーム内のコミュニケーションを強化。タイトなスケジュールの中でも高い開発効率を維持しました。

3. レビューAIの導入による品質向上

コードレビューにAIツールを取り入れ、潜在的な問題の検出と最適化提案を自動化。これにより、コード品質を確保しながら、レビューにかかる時間を大幅に削減しました。

4. スピードと品質の両立

スクラム開発の柔軟性とレビューAIの精度を組み合わせることで、短期間での高品質な開発を実現。リリーススケジュールを厳守しながら、ユーザーにとってシンプルで快適な体験を提供しました。

技術的チャレンジと開発環境

1. React Suspenseの導入

React Suspenseを活用し、低コストでSEOとユーザーパフォーマンスを両立。サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスを最適化することで、初回表示速度を向上させ、検索エンジンからのインデックス精度も向上しました。

2. 仮想リストを活用したチャット機能

チャット機能では、Webスマホブラウザにおいて、上下方向への無限スクロールに対応する仮想リストを導入。要素の高さが動的に変化する場面にも対応することで、大量のメッセージを効率的に管理しながらスムーズな操作感を提供しました。これにより、リアルタイムチャットでの優れたパフォーマンスを実現しました。

3. Apollo Cacheを活用した即時フィードバック

コメント投稿時に、バックエンドDBへの反映を待たずにApollo Cacheに即時反映させる仕組みを採用。これにより、ユーザーにリアルタイムの操作感を提供しつつ、非同期処理によるバックエンド更新をシームレスに実現しました。

4. 開発環境フレームワーク: Next.js + Tailwind CSS
データ管理: GraphQL + Apollo Client
言語: TypeScript
コード品質: ESLint + Prettier
コンポーネント設計: Storybook
ユニットテスト: Jest
モニタリング: Datadog

プロジェクト概要

「DMM TV」のウェブフロントエンド開発を初期段階から全面的にサポートしました。本サービスは、動画配信市場における後発ながら、すでに100万人以上のユーザーを獲得し、高トラフィック環境下で安定稼働を実現しています。初期フェーズでは、競争の激しい市場で勝ち抜くため、柔軟な戦略が必要とされる中、頻繁に変更される仕様に対応することが大きな課題となりました。これに対し、UIライブラリを使用せず、独自実装を採用することで、高い柔軟性を持つ設計を実現し、迅速な仕様変更対応を可能にしました。また、リリース後には、初期設計で採用したRendertronからNode.jsサーバーへの移行を主導。SSR（サーバーサイドレンダリング）環境の設計と最適化を行い、パフォーマンスの向上を図りました。現在も継続的な機能強化と改善を進め、サービスの成長を支えています。※DMM TVのWEBシステムこちら

成果と実績

1. 初期開発の成功による基盤構築

柔軟なアーキテクチャを採用し、以降の開発がスムーズに進行するための土台を構築しました。特に、後の機能追加や仕様変更に耐えられるフロントエンドを実現しました。

2. 高トラフィック環境への対応

100万人以上のユーザーを抱えるサービスにおいて、安定性とパフォーマンスを両立。独自設計のフロントエンドにより、大量の同時アクセスにも対応できるシステムを開発しました。

3. 明確な設計プロセスの導入

初期段階では要件が不確定で頻繁に変更される状況でした。この課題に対応するため、設計書の導入を主導し、要件の整理と共有を徹底。チーム間の認識齟齬を防ぎ、開発の効率化を実現しました。この取り組みにより、変更に対する柔軟性を保ちながらも、納期を遵守する体制を構築しました。

4. レビューMaster制度の導入

納期が非常に厳しいスケジュールの中、レビューの効率化を図るため、レビュワーを特化させた「レビューMaster」制度を導入。コードの品質を保ちながら、レビューのスピードを向上させ、タイトなスケジュールにも柔軟に対応できる環境を整えました。これにより、品質とスピードの両立を実現しています。

開発環境と技術的チャレンジ

1. Apollo Cacheの積極的な活用

当時はまだ普及の途中にあったApollo Cacheを採用し、データ取得の効率化とフロントエンドのパフォーマンス向上を実現。特に、Relay風のカスタムページネーションロジックを実装し、大量データの効率的な取得とスムーズなユーザー体験を提供しました。

2. 独自UIライブラリの設計と社内npmパッケージ化

マルチデバイス対応を最適化するために、独自設計のUIコンポーネントライブラリを構築。これを社内npmパッケージとして公開し、プロジェクトでの再利用性を確保しました。この取り組みにより、開発スピードを向上させるだけでなく、デザインと機能の一貫性を担保しました。

3. 開発環境フレームワーク: Next.js + Emotion
データ管理: GraphQL + Apollo Client
言語: TypeScript
コード品質: ESLint + Prettier
コンポーネント設計: Storybook
ユニットテスト: Jest
エンドツーエンドテスト: Playwright
モニタリング: Datadog