骨格フェーズ
ユーザーが触れるインターフェイスの
ワイヤーフレームを作成
サイトマップに基づいて、各ページに配置する要素や文言の画面配置を検討し、商品/サービスが持つ機能やコンテンツがユーザーに伝わりやすく、使いやすいように、ワイヤーフレームを作成します。この骨格フェーズで設計したワイヤーフレームが次の表層フェーズにパスされて開発が進行します。
徹底したユーザー目線とWEBやアプリに止まらない他領域を
カバーする知見で、理解しやすいワイヤーフレームをご提案します。
骨格フェーズでは、戦略から構造まで検討されてきたサービスの中身をいよいよユーザーが触れるインターフェースへ落とし込む段階です。インターフェースへ落とし込むといっても、構造で整理された情報をただページに配置していくわけではありません。デザインのトレンドや実装の知見、ブランディングやマーケティングの知識など、総合的な視点を持ってワイヤーフレームを検討し、お客様のビジネス理解とユーザーフレンドリーが折り合う最適なワイヤーフレームをご提案します。
もちろん、構造までの整理ができている状態でも、お気軽にご相談ください。ご検討中の内容をキャッチアップしつつ、最適な骨格をご提案します。
もちろん、構造までの整理ができている状態でも、お気軽にご相談ください。ご検討中の内容をキャッチアップしつつ、最適な骨格をご提案します。
- 骨格フェーズでよくあるお悩み
- サイトで見せたい要素は漠然と決まっているものの、ページ構成や要素の配置がうまくできない
- まずはワイヤーフレームを起こしてみて、迅速に(PDCAを回して)プロジェクトを進めたい
- ワイヤーフレームを用いた調査を行いたいが、精度の高いワイヤーが必要だ
- 例えば以下のような
解決が可能です - サイトマップや機能要件を把握しながら、ユーザビリティやUI、データ構造も考慮したワイヤーフレームのご提案
- 議論をしながらワイヤーフレームをリアルタイムで作成することも可能なので、早さ重視の案件もサポート
- 調査の内容に合わせたワイヤーフレームを、迅速かつ正確に作成。フォーマットも柔軟に対応可
骨格フェーズの流れ
骨格フェーズでよく行われるプロセスをご紹介します。
ご要望に合わせてカスタマイズすることもできますのでご相談ください。
01
トレンドとユーザーの行動/思考を把握
要件フェーズで定めたペルソナの行動や慣習/趣向などの情報と、構造フェーズで整理した情報のグルーピングから、ユーザビリティやUIの観点で考慮すべきポイントを洗い出します。
- 主なご提案内容
- UIデザインのトレンドリサーチ
02
インターフェースへの落とし込み
①で得た情報を統合し、サービス全体のインターフェースを設計します。ボタンの配置、画像の有無、表示件数の上限など、詳細まで検討します。
- 主なご提案内容
- ワイヤーフレーム
03
ユーザビリティの確認・ブラッシュアップ
②のワイヤーフレームを元に、「使いやすい配置かどうか」「ユーザーがほしい情報に辿り着けるかどうか」などの検証を行います。
- 主なご提案内容
- プロトタイピング
- ユーザビリティテスト
骨格フェーズでよく使う
フォーマットやアウトプット例
フォーマットやアウトプット例
骨格フェーズをスムーズに進めるために、
様々なフォーマットが世界中で考案されています。
ワイヤーフレーム
WEBサイトのレイアウトを決めるため、完成イメージを線や枠で表現する設計図です。定義された要件を簡易的なインターフェースに落とし込み、実際のWEBサイトの見え方・操作性などを検討します。
モックアップ
ワイヤーフレームに色やフォント、テキスト、画像、ロゴを追加した静的な模型を指します。よりデザイン要素を取り入れることで完成形に近いイメージを意識しながらすり合わせるために作成します。
プロトタイプ
ワイヤーフレームやモックアップにインタラクション、アニメーションなどの動的な遷移を組み込んだものです。操作感を確認しながらUXの精度を高めることができます。
よくあるご質問
骨格フェーズでよくいただく疑問にお答えします。
- Q1
- ワイヤーフレームやUI設計に適した人材はどのようなスキルセットを持つ人ですか
- A1
- WebディレクターやWebデザイナーがワイヤーフレームを引くことが多く、Webのコーディング構造やデザインの知識をある程度持っている人材が適しています。
上記のようなスキルセットは兼ね備えつつ、UXの戦略や要件といった上流の設計に携われるスキルを持ち、プロジェクトの全体観を俯瞰して進められる人材がいるとより良いでしょう。
加えて、Web制作に限らずグラフィックや動画制作などの広告物の制作進行スキルも持っているとプロダクト開発だけでなく、ローンチ後の認知向上や利用者の獲得にも役立ちます。
- Q2
- ワイヤーフレームを作成するツールはどんなものを使っていますか
- A2
- Figmaを主な制作ツールとしていますが、お客様のご要望に応じてAdobe XDやSketch、パワーポイント等のツールで制作することも可能です。まずはご要望をお聞かせください。
サービス一覧
その他のサービスをご覧いただけます。
戦略フェーズ
社会/生活者/業務の中から課題を 発見し、ビジネスの勝ち筋を検証
- 提供サービス
- エグゼクティブインタビュー
- ユーザーインタビュー
- 市場環境調査(STP分析/PEST分析 等)
- 競合/類似サービス調査(4P分析/SWOT分析 等)
- リーンキャンバス
- ビジネスモデルキャンバス
- バリュープロポジションマップ
- KPIツリー
- サービスのMISSION/VISION
- サービスコンセプト
- ペルソナ
など
戦略フェーズの詳細へ
要件フェーズ
サービスのアイデア/体験を発案し、 必要な機能とコンテンツを策定
- 提供サービス
- ユーザーインタビュー
- ベンチマーク調査
- アイデアシート
- ストーリーボード
- カスタマージャーニーマップ
- サービスブループリント
- プロトタイピング
- 機能/コンテンツリスト
など
要件フェーズの詳細へ
構造フェーズ
情報を整理/分類し、使いやすい サイトマップ構造を設計
- 提供サービス
- カードソーティング
- KJ法
- サイトストラクチャ
- サイトマップ(ハイレベル/ローレベル)
- AIDMA
- AISAS
など
構造フェーズの詳細へ
骨格フェーズ
ユーザーが触れるインターフェイスのワイヤーフレームを作成
- 提供サービス
- ワイヤーフレーム
- プロトタイピング
- ユーザビリティテスト
など
骨格フェーズの詳細へ
表層フェーズ
インターフェイスのスキンデザインを制作し、商品/サービスを実装
- 提供サービス
- WEB/アプリのスキンデザイン
- ロゴ/レギュレーション
- イラスト/アイコン
- インフォグラフィック
- サービス説明動画
- 写真/動画の撮影ディレクション
- 動画の編集ディレクション
- フロント/バックエンド実装
- クオリティアシュアランス(QA作業)
など
表層フェーズの詳細へ
ブランド戦略フェーズ
マーケティング戦略を元に差別化が成されるブランドの価値を規定
- 提供サービス
- 競合/事例調査
- エグゼクティブインタビュー
- STP分析/4P分析
- ブランディングワークショップ
- 企業やサービスのMISSION/VISION
など
ブランド戦略フェーズの詳細へ
表現企画フェーズ
ラフ画やコピー等の立案を通して、 ブランドコミュニケーションを企画
- 提供サービス
- キャッチ
- ネーミング
- キービジュアル企画
- 字コンテ
- 企画コンテ
- 演出コンテ
- コンテンツ(記事)ライティング
- ボディコピー
- 簡易商標チェック
など
表現企画フェーズの詳細へ
実制作フェーズ
実際にユーザーが手に取ることが できる最終的なデザインを制作
- 提供サービス
- ロゴ/レギュレーション
- 名刺/封筒/グッズ
- チラシ/ポスター
- パンフレット
- イラスト/アイコン
- インフォグラフィック
- パッケージ
- TVCM/WEB動画
- サービス紹介動画
- 写真/動画の撮影ディレクション
- 動画の編集ディレクション
- コーポレートサイト
- 採用サイト
- ランディングページ(LP)
- サービスサイト
- キャンペーンサイト
- ECサイト
など
実制作フェーズの詳細へ
受賞歴
SEESAWのデザインは多くの受賞歴を持ち、
国内外から高く評価されています。
書籍掲載
様々な書籍でSEESAWの実績が紹介されています。
お問い合わせ
新規事業開発やブランディングのご依頼はこちら
無料
UIUXデザインやブランドデザインの
お役立ち資料を無料でご活用いただけます