Now Loading...

第2回 Webサイト制作のコツ ~ワイヤーフレーム作成~

第2回 Webサイト制作のコツ ~ワイヤーフレーム作成~

Webサイトを立ち上げたいけど、どうやって制作会社に要望を伝えればいいのか分からない――そんな方々に向けて、ワイヤーフレーム作成のためのコツをお伝えします。

ワイヤーフレームはWebサイトの設計図であり、成功するウェブサイトの基盤を築く重要なステップですので、丁寧に内容を詰め、固めていくことが大切です。

「第1回Webサイト制作のコツ〜ヒヤリング・要件定義〜」の記事はこちらから

01ワイヤーフレームを作る上で事前に伝えるべき要望

1.サイトの目的を明確にする

サイトで達成したい目的を明確に伝えましょう。
例えば、サービスや商品を販売したい、お客様の満足度を高めたい、会員を増やしたい、情報を広めたい、ブランディングしたい、などなど……
目的は多岐にわたると思います。

まずは思いつく目標を並べてみてください。そしてそこで終わらずに、絞り込みができるか考えてみてください。
「お客様の満足度を高めたい」という目標なら、既存のお客様なのか、新規のお客様なのか、最初に満足度を上げるべき点は具体的に何なのか?などです。

目標が絞り込めれば一般的には掛かる費用も絞り込めます。
ご希望であれば、ライトウェブは目標の設定からお手伝いします。

これが全ての設計の出発点となります。

ターゲット

2.ターゲットオーディエンスを定義する

サイトに訪れて欲しいユーザー層、訪れるであろうユーザー層に希望があれば伝えます。
ライトウェブはここからコンテンツの構成、導線、デザイン性、機能性を考えます。

サイトの目的と合わせて重要な点です。

3.サイトのデザイン性とトンマナ、仕上がりの品質レベルを共有する

使用する色、ロゴ、画像スタイル、言葉遣いなど、確定していることや物、希望があればデザイン会社に伝えます。
そしてここが本当に重要なのですが、どのレベルの品質(仕上がり)を求めているかを伝えましょう。

ライトウェブはお客様とこの点の目線をしっかり合わせて制作に入ります。

打ち合わせ

4.重視する点と譲れない点を伝える

デザインや機能において特に重要視するポイントや、妥協できない要素があれば、明確に伝えましょう。

都度都度で伝えるかたちでも良いのですが、この点だけを切り出して伝えるようにしましょう。
ライトウェブでは、必ずお伺いするようにしています。

5.参考になるサイトを提示する

気に入っているWebサイトや競合のサイトがあれば、それらを例に出して、好きな点や取り入れたい要素を説明します。

言葉だけでなく視覚的に伝えられるものがあると、制作サイドの理解度が飛躍的に上がります。
イメージしているものと違うデザインになるリスクを軽減する意味でもおすすめです。

気に入っているWebサイトを見せる

6.必要な機能とページをリストアップする

サイト内でユーザーが行うアクションと、それに必要なページを明確にします。

ライトウェブでは目標に沿ったベストなコンテンツ・導線の提案をいたします。それを確認して頂き、どのページが必要・不必要かのご意見をお伝えください。

そのご意見をもとに、さらに構成要素をブラッシュアップします。

必要なコンテンツと機能をリストアップする
1~5の工程は「第1回 Webサイト制作のコツ ~ヒアリング・要件定義~」にて詳細に解説していますので、詳しくはこちらの記事をご覧ください。

02ワイヤーフレーム作りの工程

1.目的と要件の確認

プロジェクトの目的と要件を確認し、認識違いが無いか、ステークホルダーが同じ方向を向いているかを確認します。

2.コンテンツの整理

表示する情報を整理し、ページごとの情報の優先順位(重み付け)を行います。
これは、ユーザーが求める情報を効率的に提供するために必要です。

3.スケッチを描く

ターゲットの属性や嗜好を調べ、意識しながら紙やホワイトボード等を使ってアイデアを形にします。
この段階では、大まかなレイアウトやページ構成について考えます。

スケッチ

4.デジタルワイヤーフレームの作成

スケッチを基に、専用ツールを使用してデジタル形式のワイヤーフレームを作成します。
これにより、アイデアがより具体的な形を取ります。

ワイヤーフレーム

4.フィードバックの収集と改善

作成したワイヤーフレームを確認して頂き、フィードバックを収集します。
必要に応じてワイヤーフレームを調整・改善していきます。

このプロセスを通じて、よりユーザーにとって使いやすく、目的を達成しやすい構成へ磨き上げていきます。

6.最終確認と承認

ワイヤーフレームを完成させ、提出します。

最終的なフィードバックをお送り頂き、全ての要望が満たされていることを確認します。
全て完了となったら、実際のデザインと開発のフェーズに進みます。

03まとめ

良いワイヤーフレームはより良いWebサイトの構築につながります。
良いワイヤーフレームを作るためには、サイトの目的とターゲットオーディエンスを明確にすることが重要です。
また、頭にぼんやりでもイメージがあるものや、具体的に実現して欲しい点は、制作サイドにしっかり伝えることが重要です。
ワイヤーフレーム制作のプロセスを理解して、要望を形にし、目標をゲットできる最適なWebサイト設計を目指しましょう。

ご依頼・ご相談はこちら

この記事を書いた人

安藤 未裕

Web Director・Front-end Engineer

スタッフ紹介ページへ

Lightning Lightalk
最新記事

Lightning Lightalk
記事一覧はこちら