Web関連

ワイヤーフレームを作る前に気を付けたい5つのこと

最近、ワイヤーフレームや画面設計書を作るときに、事前の情報も無く、真っ白な状態から「さぁ、やるぞ!」と始める社員が多い事がわかりました。

私も最近、システムが絡むWEBサイトの画面設計書を作成したとき「あの機能のインターフェースがない」「この分岐への画面パターンがない」など、SEの方に沢山指摘をいただき、深く反省しました・・。

余談ですが、弊社代表と最近食事に行った時も、代表はかぼちゃが嫌いにも関わらず、部下がかぼちゃ料理をオーダーして冷や汗をかいたことがありました。

2つの出来事に共通して気づいた事・・それは、「準備8割」という事です!!

前提条件を予めしっかりと把握しておくことで、ワイヤーフレームの精度は格段に上がる事がわかりました。
(部下にも重要情報は事前に共有をするべきでした)

さて、今回は「ワイヤーフレームを作る前に気を付けたいこと」についてご紹介します。

WEBサイトの目的・背景・ゴール

WEBサイトの目的・ゴールについては、コンテンツの洗い出しや画面設計に入る前に、一番最初に決めておく必要があります。

なぜWEBサイトを制作する必要があるのか?WEBサイトを制作する事で解決したい問題とは?
という、根本的な部分をしっかり固めてプロジェクトメンバーに共有をしないと、各フェーズで起きる個々の問題に制作内容が振り回されてしまうことがあります。

目的の優先度

WEBサイトの目的・ゴールが複数ある場合(もしくは項目を細分化できる場合)、優先度を決めておく必要があります。

①問い合わせ数(コンバージョン率)を増やしたい
②企業のブランディングをしたい

という目的があった場合、どちらを優先するかによって、画面設計上の配慮すべき点も大きく変わります。これも、プロジェクトメンバーと認識を統一する必要があります。

ターゲットユーザーのタイプから考慮するべき点

ターゲットユーザーの選定も、画面設計において非常に重要なポイントとなります。

(例)
50代~70代のシニア世代がターゲットの場合・・文字は見やすく、クリッカブル領域も広くする必要あり
20代女性がターゲットのファッションECサイトの場合・・商品写真は大きく、量も多めに掲載する

必要機能

フロントエンドの処理は画面設計書を作成しながら詰めていく事も多いかと思いますが、バックエンドでどのようなシステム・機能を持たせるかは、予め把握しておく必要があります。

予め決まっていた機能要件が満たされていない画面設計のまま、デザインやコーディングまで進んでしまったら悲惨です。
大幅な手戻りが発生します。

逆に、画面設計上で「あれもこれも」と、機能を盛り込んでしまった場合、後のシステム開発に影響が出たり、実現不能なスケジュールや工数になってしまうことも・・

画面設計書を作ったら、システム担当のメンバーと読み合せて確認することが重要です。

対応デバイスや閲覧環境

対応するデバイスや閲覧環境も、予め決めておく必要があります。

レスポンシブデザインを行う場合、ブレイクポイントがいくつあるのかによって制作すべきワイヤーフレームの数も変わります。また、レスポンシブで実現できるレイアウトにする必要があります。

使用するフレームワークやコンポーネント

フレームワークを使用することが前提条件としてある際、レイアウトの自由度が低い場合が多いので、事前に配慮する必要があります。

以前、Bootstrap(CSSのフレームワーク)を使用する前提要件があるにも関わらず、それを一切無視したレイアウトを作成し、フロントエンジニアが非常に複雑なJSとCSSを作るハメになってしまった、、なんてことをやってしまいました・・

みなさんは、やってしまわないように気を付けましょう!

コンテンツリスト

作成するべきページのリストも、できれば画面設計を行う前に全て洗い出して確定させておきたいものです。
画面設計を一通り作成した後に、ページが1枚追加になっただけで、そのページへの導線を追加しなくてはいけなくなってしまいます。

ページ数の少ないサイトであれば、コンテンツリストの作成と画面設計を同時並行させても良いかもしれませんが、できるだけフェーズを分けたほうが無難です。

各ページの導線設計

ユーザーの行動フロー

WEBサイト内での目的を達成させるために、ユーザーにはどのページをどのように遷移させる必要があるのか?は、予め決めておくと便利です。

製品情報を見たユーザーにお問い合わせをしてほしいのに、製品情報ページにはどこにもお問い合わせフォームへの導線がない・・なんて、お粗末な画面設計をする前に、きちんと把握しておくべきです。

wiresato.png

最後に

いかがでしたでしょうか?

この基本的な5つの事を事前に決めておくだけで、WEB設計のクオリティも格段に上がるかと思います!
制作途中での手戻りや巻き戻しが極力起きないように、事前にしっかり詰めておきましょう。

なんで流行ってるの?今注目のオンライン学習サービスについてまとめてみる前のページ

スマートフォンサイトにおけるパララックスデザイン次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. AIに求められているものは、実は意外な物だった
  3. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. 新型コロナウイルスで日本の働き方改革が起こる

関連記事

  1. Web関連

    WEBサイトにおけるセキュリティ対策

    こんにちはサーバーエンジニアの橋本です。先日インターネットで調…

  2. Web関連

    オンライン学習のメリットとデメリット

    昨今、インターネットを通じて学習する方が増えており、受講者も年齢や職業…

  3. Web関連

    ECサイト制作を行う前に知っておくべきヒント

    年々市場拡大を続けているECサイト市場。物販を行う企業のほとんどが楽天…

  4. Web関連

    CGでしょ!?疑うほど進化した期待のヘッドマウントディスプレイ

    今回は、Microsoftが開発中のPCに代わる新たなデバイスをご紹介…

  5. Web関連

    スタンダードになりつつある「ハイブリットクラウド」の3つのメリット

    システムの改変時や、導入時にAWSに代表されるようなパブリッククラウ…

  6. Web関連

    採用希望者数を増加させたい

    自社のリクルートサイトを最大限に活用し、多くの人材を獲得総合求人サ…

おすすめ記事

最近の記事

  1. DX(デジタルトランスフォーメーション)・デジタルシフトへの…
  2. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  3. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  4. 非接触がこれからの常識。ウィズコロナ・アフターコロナはIoT…
  5. キャッシュレス決済はウィズコロナでのウイルス対策に繋がってい…

アーカイブ

  1. AI関連

    【人工知能(AI)×教育】AIサービスは教育にどのように関わることが出来るのか
  2. Web関連

    段取りで大変な大掃除も負担軽減できる
  3. Web関連

    なるほど!気付けばそこにいる、ゲーミフィケーションについてまとめてみる
  4. Web関連

    ちょっとした工夫で劇的に変わる!ユーザーにウケるブログの書き方
  5. Web関連

    WEB制作会社ティファナが提供するGPSパッケージ商品
PAGE TOP