骨格フェーズ実際にユーザーが触れる
インターフェイスのワイヤーフレーム設計

サイトマップに基づいて、各ページに配置する要素や文言の画面配置を検討し、
商品/サービスが持つ機能やコンテンツがユーザーに伝わりやすく、使いやすいように、ワイヤーフレームを作成します。
この骨格フェーズで設計したワイヤーフレームが次の表層フェーズにパスされて開発が進行します。

徹底したユーザー目線とWebやアプリに止まらない他領域を
カバーする知見で、理解しやすいワイヤーフレームをご提案します。

骨格フェーズでは、戦略から構造まで検討されてきたサービスの中身をいよいよユーザーが触れるインターフェースへ落とし込む段階です。
インターフェースへ落とし込むといっても、構造で整理された情報をただページに配置していくわけではありません。
デザインのトレンドや実装の知見、ブランディングやマーケティングの知識など、総合的な視点を持ってワイヤーフレームを検討し、
お客様のビジネス理解とユーザーフレンドリーが折り合う最適なワイヤーフレームをご提案します。
もちろん、構造までの整理ができている状態でも、お気軽にご相談ください。
ご検討中の内容をキャッチアップしつつ、最適な骨格をご提案します。

骨格フェーズでよくあるお悩み

  • サイトで見せたい要素は漠然と決まっているものの、
    ページ構成や要素の配置がうまくできない
  • まずはワイヤーフレームを起こしてみて、
    迅速に(PDCAを回して)プロジェクトを進めたい
  • ワイヤーフレームを用いた調査を行いたいが、
    精度の高いワイヤーが必要だ

例えば以下のような解決が可能です

  • サイトマップや機能要件を把握しながら、ユーザビリティやUI、
    データ構造も考慮したワイヤーフレームのご提案
  • 議論をしながらワイヤーフレームをリアルタイムで
    作成することも可能なので、早さ重視の案件もサポート
  • 調査の内容に合わせたワイヤーフレームを、
    迅速かつ正確に作成。フォーマットも柔軟に対応可

骨格フェーズの流れ

骨格フェーズでよく行われるプロセスをご紹介します。
ご要望に合わせてカスタマイズすることもできますのでご相談ください。

トレンドとユーザーの行動/思考を把握

要件フェーズで定めたペルソナの行動や慣習/趣向などの情報と、構造フェーズで整理した情報のグルーピングから、ユーザビリティやUIの観点で考慮すべきポイントを洗い出します。

主なご提案内容
  • UIデザインのトレンドリサーチ

インターフェースへの落とし込み

①で得た情報を統合し、サービス全体のインターフェースを設計します。ボタンの配置、画像の有無、表示件数の上限など、詳細まで検討します。

主なご提案内容
  • ワイヤーフレーム

ユーザビリティの確認・ブラッシュアップ

②のワイヤーフレームを元に、「使いやすい配置かどうか」「ユーザーがほしい情報に辿り着けるかどうか」などの検証を行います。

主なご提案内容
  • プロトタイピング
  • ユーザビリティテスト

骨格フェーズでよく使う
フォーマットやアウトプット例

骨格フェーズをスムーズに進めるために、
様々なフォーマットが世界中で考案されています。

ワイヤーフレーム

Webサイトのレイアウトを決めるため、完成イメージを線や枠で表現する設計図です。定義された要件を簡易的なインターフェースに落とし込み、実際のWebサイトの見え方・操作性などを検討します。

モックアップ

ワイヤーフレームに色やフォント、テキスト、画像、ロゴを追加した静的な模型を指します。よりデザイン要素を取り入れることで完成形に近いイメージを意識しながらすり合わせるために作成します。

プロトタイプ

ワイヤーフレームやモックアップにインタラクション、アニメーションなどの動的な遷移を組み込んだものです。操作感を確認しながらUXの精度を高めることができます。

受賞歴

SEESAWのデザインは多くの受賞歴を持ち、
国内外から高く評価されています。

よくあるご質問

骨格フェーズでよくいただく疑問にお答えします。

WebディレクターやWebデザイナーがワイヤーフレームを引くことが多く、Webのコーディング構造やデザインの知識をある程度持っている人材が適しています。
上記のようなスキルセットは兼ね備えつつ、UXの戦略や要件といった上流の設計に携われるスキルを持ち、プロジェクトの全体観を俯瞰して進められる人材がいるとより良いでしょう。
加えて、Web制作に限らずグラフィックや動画制作などの広告物の制作進行スキルも持っているとプロダクト開発だけでなく、ローンチ後の認知向上や利用者の獲得にも役立ちます。
Figmaを主な制作ツールとしていますが、お客様のご要望に応じてAdobe XDやSketch、パワーポイント等のツールで制作することも可能です。まずはご要望をお聞かせください。

お問い合わせ

新規事業開発や
ブランディングの
ご依頼はこちら

無 料

UIUXデザインやブランドデザインの
お役立ち資料を無料でご活用いただけます

サービス一覧

その他のサービスをご覧いただけます。

戦略フェーズ

あらゆる商品/サービスは、誰かの課題を解決するために存在します。「誰のどんな課題を解決し、どうマネタイズするか」を構想し検証するのが戦略フェーズです。戦略段階で設計したサービスコンセプト/ビジネスモデル/ペルソナなどが次の要件フェーズにパスされて開発が進行します。

提供サービス
  • エグゼクティブインタビュー
  • ユーザーインタビュー
  • 市場環境調査(STP分析/PEST分析など)
  • 競合/類似サービス調査(4P分析/SWOT分析など)
  • リーンキャンバス
  • ビジネスモデルキャンバス
  • バリュープロポジションマップ
  • KPIツリー
  • サービスのMission/Vision
  • サービスコンセプト
  • ペルソナ
  • など
など
 さらに詳しく

要件フェーズ

商品/サービスを通してユーザーが体験するストーリーを構築し、必要な機能仕様やコンテンツなどを洗い出します。「こんなサービスにするぞ!」というアイデアを具体化させていく段階になります。この要件フェーズで設計した機能/コンテンツが次の構造フェーズにパスされて開発が進行します。

提供サービス
  • ユーザーインタビュー
  • ベンチマーク調査
  • アイデアシート
  • ストーリーボード
  • カスタマージャーニーマップ
  • サービスブループリント
  • プロトタイピング
  • 機能/コンテンツリスト
  • など
など
 さらに詳しく

構造フェーズ

ユーザーゴールやビジネスゴールに到達できるように情報を整理し、サイトマップを作成します。情報の優先度や関連性に基づき分類と整理を行い、サイトストラクチャパターンを検討し、設計する段階になります。この構造フェーズで設計したサイトマップが次の骨格フェーズにパスされて開発が進行します。

提供サービス
  • カードソーティング
  • KJ法
  • サイトストラクチャ
  • サイトマップ(ハイレベル/ローレベル)
  • AIDMA
  • AISAS
  • など
など
 さらに詳しく

骨格フェーズ

サイトマップに基づいて、各ページに配置する要素や文言の画面配置を検討し、商品/サービスが持つ機能やコンテンツがユーザーに伝わりやすく、使いやすいように、ワイヤーフレームを作成します。この骨格フェーズで設計したワイヤーフレームが次の表層フェーズにパスされて開発が進行します。

提供サービス
  • ワイヤーフレーム
  • プロトタイピング
  • ユーザビリティテスト
  • など
など
 さらに詳しく

表層フェーズ

ワイヤーフレームに基づいて、表現(スキンデザイン)の方向性を定め、コーディング作業などを通して実装していきます。実装の過程でクオリティアシュアランス(QA作業)を行い、実際に商品/サービスを世に出すための最終フェーズを実行します。

提供サービス
  • Web/アプリのスキンデザイン
  • ロゴ/レギュレーション
  • イラスト/アイコン
  • インフォグラフィック
  • サービス説明動画
  • 写真/動画の撮影ディレクション
  • 動画の編集ディレクション
  • フロント/バックエンド実装
  • クオリティアシュアランス(QA作業)
  • など
など
 さらに詳しく

ブランド戦略フェーズ

ブランディングとは、ユーザーが自分たちの企業/商品/サービスを競合他社と区別できるようにすることで、より効率的に事業を進められるようにする手法です。そのためにブランドの価値を規定し、ユーザーに感じてもらいたいブランドイメージを醸成すべく戦略を立てていきます。

提供サービス
  • 競合/事例調査
  • エグゼクティブインタビュー
  • STP分析/4P分析
  • ブランディングワークショップ
  • 企業やサービスのMission/Vision
  • など
など
 さらに詳しく

表現企画フェーズ

デザイン制作する前には、言葉やラフ画を用いたクリエイティブの企画案が必要になります。ロゴ制作であればネーミング。動画であればコンテ。デザインの骨格となる表現企画をしっかりと練ることで最終的な実制作の品質が向上します。

提供サービス
  • キャッチ/ボディコピー
  • ネーミング/簡易商標チェック
  • キービジュアル企画
  • 字コンテ
  • 企画コンテ
  • 演出コンテ
  • コンテンツ(記事)ライティング
  • など
など
 さらに詳しく

実制作フェーズ

最終的に世の中に出るデザイン制作物は、企業/商品/サービスの顔となり、ブランドイメージに大きな影響を与えます。グラフィック、Web、動画など、様々なタッチポイントがある中でそれらを一貫してコントロールし、しっかりとプロの「目」と「手」でクオリティを高める必要があります。

提供サービス
  • ロゴ/レギュレーション
  • 名刺/封筒/グッズ
  • チラシ/ポスター
  • パンフレット
  • イラスト/アイコン
  • インフォグラフィック
  • パッケージ
  • TVCM/Web動画
  • サービス紹介動画
  • 写真/動画の撮影ディレクション
  • 動画の編集ディレクション
  • コーポレートサイト
  • 採用サイト
  • ランディングページ(LP)
  • サービスサイト
  • キャンペーンサイト
  • ECサイト
  • など
など
 さらに詳しく

お問い合わせ

新規事業開発や
ブランディングの
ご依頼はこちら

無 料

UIUXデザインやブランドデザインの
お役立ち資料を無料でご活用いただけます