もやもや以上
リニューアル未満のあなたへ
Flow

開発フロー

  1. Step01

    課題ヒアリング

  2. Step02

    UXリサーチ

  3. Step03

    プロジェクトマネジメント

  4. Step04

    カスタマイズメニュー

Step01

課題ヒアリング

まずはヒアリングのお時間を頂いてプロジェクトの全体像を理解させてください。
誰にどのようなサービスを提供したいのか。
御社の考えるスピード感やコストを踏まえて適切な作り方を考え、メニューを組み立てます。

Step02

UXリサーチ

「誰に」「どのような」体験を提供したいのか。すでにご利用頂いているユーザーの現状の体験と目指す体験を見える化し、チーム全員でゴールの認識を合わせます。

ペルソナ

ペルソナ

サービスを提供するユーザー像を写真とテキストで具体的な人物に投影します。

ユーザーインタビュー

ユーザーインタビュー

ご利用頂いているユーザーにコンタクトを取りインタビューを行います。仮説を立てすぎず今のユーザーのリアルな体験を記録します。

カスタマージャーニーマップ

カスタマージャーニーマップ

ユーザーがサービスを認知し利用する前後の体験を時間軸で並べ、感情や行動の変化をプロットします。現状のマップと目指すマップの2種類を作る場合もあります。

競合調査

競合調査

「ビジネスモデル」「機能」「デザイン・ブランディング」の観点から競合サービスを調査します。

Step03

プロジェクトマネジメント

プロジェクトが円滑に進むように、ガイドラインやツールの整備を行います。

プロジェクトサマリー

プロジェクトサマリー

各種環境のURLや構成をヒアリングしドキュメントとして残します。サマリーを見ればプロジェクトの概要を理解できます。

開発ガイドライン

開発ガイドライン

スプリントの期間や開発手法などをまとめたドキュメントです。スプリントを正しく実行するためにチーム全員の動き方を記載します。

タスク管理

タスク管理

GitHub Projectsやスプレッドシートなどを使ってタスクと進捗を可視化します。

Step04

カスタマイズメニュー

課題に合わせてカスタマイズしたメニューを提供します。

IAリニューアル

「使いづらい」という課題に対してIA(情報アーキテクチャ)を見直します。UIデザインに入る前に、どの軸で情報の分類や階層化を行っているのかを分析し、課題がある場合には画面設計を見直してデザインします。
ドメインモデル

ドメインモデル

サービスに必要な「要素」を洗い出します。「要素の命名」「要素同士の関係性」を定義し、チームの認識と実装がずれないようにします。

ユースケース

ユースケース

「誰が」「何を」できるか、を定義し、作る部分と作らない部分を見える化します。どのユースケースをどの順番でいつ実装するかもこの資料で確認できるようにします。

テストケース

テストケース

ユースケースを満たすために必要なテストケースとその結果を記載します。スプリント毎に手動テストを実行することで動作の保証をします。

ワイヤーフレーム

ワイヤーフレーム

画面ごとに必要な要素と文言をまとめます。デザインファイルの元となる資料です。

UIデザイン

UIデザイン

ワイヤーフレームにUI/ビジュアルデザインを乗せ、ユーザーが目にする状態に近づけます。

フロントエンド開発

フロントエンド開発

コンポーネントやAPIとの結合などアプリケーションが動作するように実装を行います。

ユーザーテスト

ユーザーテスト

作ったプロダクトを限定的なユーザーに利用してもらい、利用フローに致命的な部分が無いか、多くの人が戸惑う部分が無いか、ユーザビリティを検証します。

デザインリニューアル

「見た目やブランドがしっくり来ない」という課題に対して、ビジュアル/UIデザインのリニューアルや中長期視点でのブランディング支援を行います。
ムードボード

ムードボード

サービスのブランドイメージを可視化して検討するための資料です。このイメージは近い、これは違うという議論を行います。

デザインシステム

デザインシステム

デザインに対する考え方、フォントやカラーなどの選定、コンポーネントデザイン、アニメーションの方向性などサービス全体のデザインがぶれないように定義するための指針です。いきなり大掛かりに作るのではなく必要最小限のシステムを整備します。

UIデザイン

UIデザイン

ワイヤーフレームにUI/ビジュアルデザインを乗せ、ユーザーが目にする状態に近づけます。

コンポーネント

コンポーネント

ページを構成するパーツの設計・デザイン・実装を行います。

スタイルガイド

スタイルガイド

Storybookというライブラリを使ってコンポーネントの一覧をビジュアルで見られるスタイルガイドを作成します。

ユーザーテスト

ユーザーテスト

作ったプロダクトを限定的なユーザーに利用してもらい、利用フローに致命的な部分が無いか、多くの人が戸惑う部分が無いか、ユーザビリティを検証します。

CI / VI

CI / VI

CI(コーポレートアイデンティ)やVI(ビジュアルアイデンティティ)の見直しを行います。サービスの顔となるロゴを中心にブランド体験を見直します。

SPA移行

「開発スピードが遅い・障害が多い」という課題に対して開発手法や体制を見直します。近年はサーバサイドをAPIとして提供し、フロントエンドをシングルページアプリケーション(SPA)で制作する手法が主になっています。私たちの経験を活かして、サービスに合った設計のご提案から開発のサポートをします。
デザインシステム

デザインシステム

デザインに対する考え方、フォントやカラーなどの選定、コンポーネントデザイン、アニメーションの方向性などサービス全体のデザインがぶれないように定義するための指針です。いきなり大掛かりに作るのではなく必要最小限のシステムを整備します。

コンポーネント

コンポーネント

ページを構成するパーツの設計・デザイン・実装を行います。

スタイルガイド

スタイルガイド

Storybookというライブラリを使ってコンポーネントの一覧をビジュアルで見られるスタイルガイドを作成します。

APIドキュメント

APIドキュメント

サーバサイドとフロントエンドをつなぐAPIの仕様書です。APIドキュメントからコードを自動生成することもあります。

ユニットテスト

ユニットテスト

コンポーネントやその他プログラム単体の動作を保証する自動テストです。

E2Eテスト

E2Eテスト

ユーザーの操作をシステムで再現し、システムが結合した状態での動作を保証する自動テストです。

デプロイフロー

デプロイフロー

開発上定期的に発生するデプロイを自動化し簡単にミス無く行えるようにします。

パフォーマンス改善

「表示速度が遅い」という課題を解決します。アプリケーションのパフォーマンスは、UXやSEOなど広範囲に影響します。サービスが成長するに連れてトラフィックも増え、パフォーマンスの問題が出てくることは良くあることです。技術的知見を活かしてパフォーマンス改善のサポートをします。
アセット圧縮

アセット圧縮

画像や映像、CSSやJavaScriptファイルなど表示に必要なアセットファイルのサイズを圧縮します。

リファクタリング

リファクタリング

コードや設計によるパフォーマンスのボトルネックを探し出し、コードを修正することで課題を解決します。

CDNの利用

CDNの利用

コンテンツデリバリーネットワーク(CDN)を利用して、アセットの配信を高速化します。

マルチプラットフォーム対応

「タッチポイントが限られる」という課題に対して提供するプラットフォームを増やすサポートをします。Webから始めてネイティブアプリ化する、PC用のアプリケーションやスマートスピーカーでもサービスを操作できるインターフェースを提供する、など様々なプラットフォームを利用してユーザーの利便性を高めます。
PWA

PWA

PWAはプログレッシブ・ウェブ・エンハンスメントの略で、Webサイトをネイティブアプリのように利用できる技術です。開発工数を大幅に増やすことなくユーザーにネイティブアプリに近い体験をしてもらうことができます。

ネイティブアプリ

ネイティブアプリ

React NativeなどWebの技術を用いてネイティブアプリを開発することもできます。iOSとAndroidのアプリを別に作る必要も無いのでエコな開発手法であると言えます。

Macアプリ

Macアプリ

サービスによってはMacアプリとして提供したい場合もあります。Electronというフレームワークを利用してWeb技術を応用してMacアプリを制作します。

Alexaスキル等

Alexaスキル等

AlexaやNestなどスマートスピーカーからサービスを利用できるアプリケーションを開発します。

AMP

AMP

Webサイト高速化の一つの手法であるAMPにサイトを対応させます。表現力が限られるので向き不向きがありますが、素早くユーザーに情報を届けたいサービスにとっては効果的な手法です。

構造化データ

構造化データ

SEOの一貫ではありますが、サービス内の情報をJSON-LDという形式でクローラーにより精緻に伝えます。

新規機能開発

「打ち手が見つからない」という課題に対して、コンサルティング含めてアイデアと解決方法を提案します。まずは現状を把握し、アイデアを検討した上でインパクトの大きい施策から実行していきましょう。
コンサルティング

コンサルティング

ビジネス全体の状況をヒアリングさせていただき、課題の見える化と解決手法のご提案を行います。プロダクト自体の改善、マーケティング、中長期視点でのブランディングなどできることは様々です。

ユーザーテスト

ユーザーテスト

作ったプロダクトを限定的なユーザーに利用してもらい、利用フローに致命的な部分が無いか、多くの人が戸惑う部分が無いか、ユーザビリティを検証します。

アジャイル開発ノウハウ

アジャイル開発ノウハウ

弊社ではスクラムという開発手法を採用しています。チームによってチューニングを行いながら最適な開発手法を模索します。

データ分析基盤

データ分析基盤

現状を把握するためにも、施策の成否を判断するためにもデータ分析の基盤は必要です。管理画面やスプレッドシートでダッシュボードを作ったり、Google Analyticsのようなサービスを利用するなど取りたいデータを適切に取れるように設計と実装を行います。

Price

料金

ファンタラクティブでは、制作物ごとのお見積もりではなく、
ご予算に合わせて費用を事前に決めておく月額制を採用しています。

プロダクトマネージャー: 150万円~ / 1人月
エンジニア: 120万円~ / 1人月
デザイナー: 100万円~ / 1人月

ビジネスの状況に合わせて、デザイナー・エンジニア・プロダクトマネージャーの稼働比率を調整しながらメンバーをアサインします。1人月未満のアサインも可能です。

無料開発お悩み相談室

サービスのUI/UXや開発についてのお悩み、事業の壁打ちなどビデオ会議にて
ご相談を受け付けています。最短即日でご予約可能です。

ビデオ通話を予約する メールフォームはこちら