ホームページ制作の成功の可否を決めるワイヤーフレーム/台東区上野のWEB制作/訪日外国人集客会社

株式会社ケイツー・インタラクティブ [K2-interactive]

WEB担当者の相談室

WEBサイト制作のことなら、私たち台東区上野のWEB制作会社
株式会社ケイツー・インタラクティブにお気軽にご相談ください。

ホームページ制作の成功の可否を決めるワイヤーフレーム

 

制作会社がデザインの前にワイヤーフレームを提出したいそうですが、ワイヤーフレームって何ですか?

デザインなどビジュアルを開発する前に、どのような要素を配置するかをPPTなどのドキュメントで作るホームぺージの設計図です。

ホームページ制作の成功の可否を決めるワイヤーフレーム:目次

ワイヤーフレームについて

ワイヤーフレームは目的を達成する為にページにどのような要素を配置すればいいかを示すホームページの設計図です。

ホームページを作る際に関わる人員は多岐にわたります。直接関わる人はもちろん、間接的に制作に関わる人の中には、いざ運営段階になって関わる人も多くいます。ワイヤーフレームの作成と確認は、出来上がってから「使いにくい」「成果が出にくい」ことがないように、制作に入る前に最初に関わる全ての人たちで確認・共有するとても重要なフローです。

ワイヤーフレームを作成する前に

ワイヤーフレーム作成の前に準備すべきポイントを紹介します。

ホームページへ掲載する要素の抽出

ホームページに何を掲載する(したい)か、全てピックアップします。この段階では少しでも心当たりのあるものは必ずピックアップしておきます。ピックアップの方法はメモ帳に殴り書きしたものでも、メンバーでアイデアだししたものでも何でもかまいません。多ければ多いほど望ましいです。

要素の重要性

抽出した要素に順位付けをしていきます。「高」「中」「低」の3段階でもいいですし、5段階くらいでも問題ありません。順位付けをしたらその中から何段階まで「掲載しない」かを検討します。「高」しか掲載しないのであれば、「中」「低」は迷わず切り捨ててしまって問題ありません。要素の多い、少ないで最終的にどこまで切り捨てるかを決めます。

要素の関係性

残った要素の関係性を考えます。例えば「グループA」や「グループB」のような感じにまとめます。先ほどの「高」「中」「低」にそれぞれ点をつけて、一番点の多いものが重要なグループとなります。ここのフローは運営段階になってからも影響する部分です。よく考えてしっかり記録に残すことをおすすめいたします。

ホームページ運営段階になると、各ステークスホルダーからリクエストが入ります。当然ながら、自分たちの担当に有益になるように求めてくることになりますが、ここでしっかり何故この表示レイアウトになったかを説明出来る記録がステークスフォルダーに納得していただくための資料となります。

ワイヤーフレームを作成する

ワイヤーフレームのレイアウト

「重要な情報を大きく目立つ位置に配置」「迷わず目的が達成出来るUIを設計」この2点がポイントです。

重要な情報を大きく目立つ位置に配置

準備段階で決めた再重要項目がページの一番上部に配置されます。トップページであればメインビジュアルが設置されることが多いです。「動画にするのか?」「コピーは載せるのか?」など、制作に関わることまで細かく落とし込みます。

迷わず目的が達成出来るUIを設計

ホームページの用途に合わせて、グローバルナビゲーションやグループ化した要素を配置していきます。迷わない導線にするにはどのようなUI(ユーザーインターフェイス)にすればいいか?などを考えます。

ワイヤーフレームのポイント

トップページ、目次ページ、詳細ページ、それぞれページごとに目的が違います。ワイヤーフレームの補足に目的を明記してあれば、設計の善し悪しの議論の軸になるので最後までブレずにプロジェクトを進めていくことが出来ます。また、細かに補足をつけることで、制作者にも意図が伝わるので差し戻しなどのリスクも削減出来ます。

ワイヤーフレーム作成に適したツール

ワイヤーフレームを作る為のツールは沢山ありますが、「オンライン」と「オフライン」でそれぞれひとつづつご紹介いたします。

パワーポイント

パワーポイントはホームページ制作の現場では、ワイヤーフレームだけでなく、用件定義やその他のドキュメントで最も使われているツールのひとつです。汎用性も高く比較的習得者も多いのでシェアするのにとても便利です。

Cacoo

クラウド型のワイヤーフレーム作成ツールです。ワイヤーフレーム用に作られているので、UIパーツもあらかじめ作られていてとても便利です。オンライン上でチームで共有が可能なメリットがある一方、セキュリティー面で気をつけなければなりません。

ホームページ制作の成功の可否を決めるワイヤーフレームのまとめ

ホームページ制作の成功の可否を決めるワイヤーフレーム、いかがでしたでしょうか?ワイヤーフレームをひとことで言ってしまえば「パワポで線画を描く」なのですが、その背景にある意味合いはとても重要で、ホームページ成功の可否に直接つながります。成果物に見えないコストですが、ワイヤーフレームにもきちんと目を向けることで有意義なホームページを作り上げることが出来ます。

ホームページのリニューアルに関するご相談は、お気軽にお問い合わせください。

本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。

WEBマーケティング
CMSツール導入支援

ホームページ制作の成功の可否を決めるワイヤーフレームに関連する記事

jqueryを使ってjavascript開発の効率化
UIをWEBサイトに実装するフロントエンジニア

K2 WAY

ソリューション

施策事例 Client Voice

WEB担当者の必見ノウハウ 7 選

K2の得意なこと

WEBマーケティング

WEBマーケティング

顧客とのコミュニケーション課題を解決して、御社のビジネスを成功につなげるWEBマーケティングのプロ集団です。

WEBマーケティング

インバウンド集客PR

インバウンドの集客PR

IT/SNSを使ったプロモーションからイベント開催まで一貫したO2Oブランド構築で集客・PRをご支援をいたします。

インバウンド集客PRを見る

CMSツール導入支援

CMSツール導入支援

HTMLが判らなくてもかんたんにWEBサイトを更新出来るCMSツールを活用して、見込み客をを増やしませんか?

CMSツール導入支援を見る