Web関連

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

0

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

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

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

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

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

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

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

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

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

目的の優先度

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

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

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

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

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

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

必要機能

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

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

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

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

対応デバイスや閲覧環境

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

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

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

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

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

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

コンテンツリスト

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

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

各ページの導線設計

ユーザーの行動フロー

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

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

wiresato.png

最後に

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

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

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    スマート家電を利用してカッコいい生活を!

    皆さんはスマート家電ってご存知でしょうか?スマート家電とは、…

  2. SNS関連

    上手く活用できていますか?企業としてのTwitter活用術

    SNSというものが流行り始めてから随分たち、私達の生活には欠かせないも…

  3. Web関連

    東京オリンピックに向けインバウンド対策を!

    2015年を迎え、2020年の東京オリンピックまで…

  4. Web関連

    e-sportsから考える「スポーツ」

    スポーツ --熱き魂のぶつかり合い--熱き魂がフィ…

  5. Web関連

    ホームページ制作時の契約書、確認ポイントをあれこれ教えます!

    高額な商品を購入したり借り受けたりするとき同様、ホームページの制作を開…

  6. Web関連

    今、最も人気のあるプログラム言語は何か。

    「ゲッツ!」の人、覚えていますか?仕事に追われ、ちょっとストレスが溜…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    聞いた事ある?マーケティングオートメーション
  2. Web関連

    切っても切れないデザインと色の話
  3. AI関連

    飲食店に人工知能(AI)の導入で人手不足の解消!
  4. Web関連

    リクルートサイトと採用ポータルサイトの役割
  5. AI関連

    マーケティングにおいて、AIは頼もしいパートナーになる
PAGE TOP