まずはヒアリングのお時間を頂いてプロジェクトの全体像を理解させてください。
誰にどのようなサービスを提供したいのか。
御社の考えるスピード感やコストを踏まえて適切な作り方を考え、メニューを組み立てます。
「誰に」「どのような」体験を提供したいのか。すでにご利用頂いているユーザーの現状の体験と目指す体験を見える化し、チーム全員でゴールの認識を合わせます。
サービスを提供するユーザー像を写真とテキストで具体的な人物に投影します。
ご利用頂いているユーザーにコンタクトを取りインタビューを行います。仮説を立てすぎず今のユーザーのリアルな体験を記録します。
ユーザーがサービスを認知し利用する前後の体験を時間軸で並べ、感情や行動の変化をプロットします。現状のマップと目指すマップの2種類を作る場合もあります。
「ビジネスモデル」「機能」「デザイン・ブランディング」の観点から競合サービスを調査します。
プロジェクトが円滑に進むように、ガイドラインやツールの整備を行います。
各種環境のURLや構成をヒアリングしドキュメントとして残します。サマリーを見ればプロジェクトの概要を理解できます。
スプリントの期間や開発手法などをまとめたドキュメントです。スプリントを正しく実行するためにチーム全員の動き方を記載します。
GitHub Projectsやスプレッドシートなどを使ってタスクと進捗を可視化します。
課題に合わせてカスタマイズしたメニューを提供します。
「使いづらい」という課題に対してIA(情報アーキテクチャ)を見直します。UIデザインに入る前に、どの軸で情報の分類や階層化を行っているのかを分析し、課題がある場合には画面設計を見直してデザインします。
サービスに必要な「要素」を洗い出します。「要素の命名」「要素同士の関係性」を定義し、チームの認識と実装がずれないようにします。
「誰が」「何を」できるか、を定義し、作る部分と作らない部分を見える化します。どのユースケースをどの順番でいつ実装するかもこの資料で確認できるようにします。
ユースケースを満たすために必要なテストケースとその結果を記載します。スプリント毎に手動テストを実行することで動作の保証をします。
画面ごとに必要な要素と文言をまとめます。デザインファイルの元となる資料です。
ワイヤーフレームにUI/ビジュアルデザインを乗せ、ユーザーが目にする状態に近づけます。
コンポーネントやAPIとの結合などアプリケーションが動作するように実装を行います。
作ったプロダクトを限定的なユーザーに利用してもらい、利用フローに致命的な部分が無いか、多くの人が戸惑う部分が無いか、ユーザビリティを検証します。
「見た目やブランドがしっくり来ない」という課題に対して、ビジュアル/UIデザインのリニューアルや中長期視点でのブランディング支援を行います。
サービスのブランドイメージを可視化して検討するための資料です。このイメージは近い、これは違うという議論を行います。
デザインに対する考え方、フォントやカラーなどの選定、コンポーネントデザイン、アニメーションの方向性などサービス全体のデザインがぶれないように定義するための指針です。いきなり大掛かりに作るのではなく必要最小限のシステムを整備します。
ワイヤーフレームにUI/ビジュアルデザインを乗せ、ユーザーが目にする状態に近づけます。
ページを構成するパーツの設計・デザイン・実装を行います。
Storybookというライブラリを使ってコンポーネントの一覧をビジュアルで見られるスタイルガイドを作成します。
作ったプロダクトを限定的なユーザーに利用してもらい、利用フローに致命的な部分が無いか、多くの人が戸惑う部分が無いか、ユーザビリティを検証します。
CI(コーポレートアイデンティ)やVI(ビジュアルアイデンティティ)の見直しを行います。サービスの顔となるロゴを中心にブランド体験を見直します。
「開発スピードが遅い・障害が多い」という課題に対して開発手法や体制を見直します。近年はサーバサイドをAPIとして提供し、フロントエンドをシングルページアプリケーション(SPA)で制作する手法が主になっています。私たちの経験を活かして、サービスに合った設計のご提案から開発のサポートをします。
デザインに対する考え方、フォントやカラーなどの選定、コンポーネントデザイン、アニメーションの方向性などサービス全体のデザインがぶれないように定義するための指針です。いきなり大掛かりに作るのではなく必要最小限のシステムを整備します。
ページを構成するパーツの設計・デザイン・実装を行います。
Storybookというライブラリを使ってコンポーネントの一覧をビジュアルで見られるスタイルガイドを作成します。
サーバサイドとフロントエンドをつなぐAPIの仕様書です。APIドキュメントからコードを自動生成することもあります。
コンポーネントやその他プログラム単体の動作を保証する自動テストです。
ユーザーの操作をシステムで再現し、システムが結合した状態での動作を保証する自動テストです。
開発上定期的に発生するデプロイを自動化し簡単にミス無く行えるようにします。
「表示速度が遅い」という課題を解決します。アプリケーションのパフォーマンスは、UXやSEOなど広範囲に影響します。サービスが成長するに連れてトラフィックも増え、パフォーマンスの問題が出てくることは良くあることです。技術的知見を活かしてパフォーマンス改善のサポートをします。
画像や映像、CSSやJavaScriptファイルなど表示に必要なアセットファイルのサイズを圧縮します。
コードや設計によるパフォーマンスのボトルネックを探し出し、コードを修正することで課題を解決します。
コンテンツデリバリーネットワーク(CDN)を利用して、アセットの配信を高速化します。
「タッチポイントが限られる」という課題に対して提供するプラットフォームを増やすサポートをします。Webから始めてネイティブアプリ化する、PC用のアプリケーションやスマートスピーカーでもサービスを操作できるインターフェースを提供する、など様々なプラットフォームを利用してユーザーの利便性を高めます。
PWAはプログレッシブ・ウェブ・エンハンスメントの略で、Webサイトをネイティブアプリのように利用できる技術です。開発工数を大幅に増やすことなくユーザーにネイティブアプリに近い体験をしてもらうことができます。
React NativeなどWebの技術を用いてネイティブアプリを開発することもできます。iOSとAndroidのアプリを別に作る必要も無いのでエコな開発手法であると言えます。
サービスによってはMacアプリとして提供したい場合もあります。Electronというフレームワークを利用してWeb技術を応用してMacアプリを制作します。
AlexaやNestなどスマートスピーカーからサービスを利用できるアプリケーションを開発します。
Webサイト高速化の一つの手法であるAMPにサイトを対応させます。表現力が限られるので向き不向きがありますが、素早くユーザーに情報を届けたいサービスにとっては効果的な手法です。
SEOの一貫ではありますが、サービス内の情報をJSON-LDという形式でクローラーにより精緻に伝えます。
「打ち手が見つからない」という課題に対して、コンサルティング含めてアイデアと解決方法を提案します。まずは現状を把握し、アイデアを検討した上でインパクトの大きい施策から実行していきましょう。
ビジネス全体の状況をヒアリングさせていただき、課題の見える化と解決手法のご提案を行います。プロダクト自体の改善、マーケティング、中長期視点でのブランディングなどできることは様々です。
作ったプロダクトを限定的なユーザーに利用してもらい、利用フローに致命的な部分が無いか、多くの人が戸惑う部分が無いか、ユーザビリティを検証します。
弊社ではスクラムという開発手法を採用しています。チームによってチューニングを行いながら最適な開発手法を模索します。
現状を把握するためにも、施策の成否を判断するためにもデータ分析の基盤は必要です。管理画面やスプレッドシートでダッシュボードを作ったり、Google Analyticsのようなサービスを利用するなど取りたいデータを適切に取れるように設計と実装を行います。
ファンタラクティブでは、制作物ごとのお見積もりではなく、
ご予算に合わせて費用を事前に決めておく月額制を採用しています。
ビジネスの状況に合わせて、デザイナー・エンジニア・プロジェクトマネージャーの稼働比率を調整しながらメンバーをアサインします。1人月未満のアサインも可能です。