私たちは、台東区浅草雷門でホームページ制作・運営代行とインバウンド対応/集客支援をしている会社です。
制作会社がデザインの前にワイヤーフレームを提出したいそうですが、ワイヤーフレームって何ですか?
デザインなどビジュアルを開発する前に、どのような要素を配置するかをPPTなどのドキュメントで作るホームぺージの設計図です。
ホームページ・スタートアップ は初期費用を抑えてホームページ運営に注力したい方向けホームページ入門パッケージです。ホームページ運営の方法がよくわからない、一緒に戦略を考えてくれるブレーンがいないなどお悩みのホームページ担当者にもおすすめのサービスです。
ワイヤーフレームはWEBサイトの目的を達成する為に、『どのような要素を配置すればいいか?』『情報の優劣はどうすればいいか?』『目的達成のために効果的な遷移は?』を示すWEBサイトの設計図です。
WEBサイト制作に関わる人員は多岐にわたります。WEBサイト制作に直接関わる人はもちろん、間接的にWEBサイトに関わる人の中には、いざWEBサイト運営段階になってから関わる人も多くいます。ワイヤーフレームの作成と共有は、WEBサイトが出来上がってから「使いにくい」「成果が出にくい」ことがないように、事前にプロジェクトに関わる全ての人たちで情報を確認・共有する、とても重要な役割を持っています。
WEBサイトに何を掲載する(したい)か、全てピックアップします。この段階では少しでも心当たりのあるものは必ずピックアップしておきます。ピックアップの方法はメモ帳に殴り書きしたものでも、メンバーでアイデアだししたものでも何でもかまいません。多ければ多いほど望ましいです。
WEBサイト掲載要素を抽出したら順位付けをしていきます。「高」「中」「低」の3段階でもいいですし、5段階くらいでも問題ありません。順位付けをしたらその中から何段階まで「掲載しない」かを検討します。「高」しか掲載しないのであれば、「中」「低」は迷わず切り捨ててしまって問題ありません。WEBサイトに掲載する要素が多い、少ないで最終的にどこまで切り捨てるかを決めます。
WEBサイト掲載要素の関係性は、例えば「グループA」や「グループB」のような感じにまとめます。先ほどの「高」「中」「低」にそれぞれ点をつけて、一番点の多いものが重要なグループとなります。ここのフローは運営段階になってからも影響する部分です。よく考えてしっかり記録に残すことをおすすめいたします。
WEBサイト運営段階になると、各ステークスホルダーからリクエストが入ります。当然ながら、自分たちの担当に有益になるように求めてくることになりますが、ここでしっかり何故この表示レイアウトになったかを説明出来る記録がステークスフォルダーに納得していただくための資料となります。
「重要な情報を大きく目立つ位置に配置」「迷わず目的が達成出来るUIを設計」この2点がレイアウトのポイントです。
準備段階で決めた再重要項目がページの一番上部に配置されます。トップページであればメインビジュアルが設置されることが多いです。「動画にするのか?」「コピーは載せるのか?」など、制作に関わることまで細かく落とし込みます。
WEBサイトの用途に合わせて、グローバルナビゲーションやグループ化した要素を配置していきます。迷わない導線にするにはどのようなUI(ユーザーインターフェイス)にすればいいか?などを考えます。
トップページ、目次ページ、詳細ページ、それぞれページごとに目的が違います。ワイヤーフレームの補足に目的を明記してあれば、設計の善し悪しの議論の軸になるので最後までブレずにプロジェクトを進めていくことが出来ます。また、細かに補足をつけることで、制作者にも意図が伝わるので差し戻しなどのリスクも削減出来ます。
ワイヤーフレームを作る為のツールは沢山ありますが、いくつかおすすめをご紹介いたします。
現在ワイヤーフレーム制作の主流はAdobeXDです。ページレイアウトをかんたんに表現できるだけでなく、ページ遷移やデバイスごとの見え方も表現でき、WEBサイトの設計ツールのスタンダードなソフトとなっています。複数ページで同じレイアウトを使いまわせるテンプレート機能もあるので、大量ページのWEBサイト設計にも最適なツールです。
パワーポイントはWEBサイト制作の現場では、ワイヤーフレームだけでなく、用件定義やその他のドキュメントで最も使われているツールのひとつです。汎用性も高く比較的習得者も多いのでシェアするのにとても便利です。
クラウド型のワイヤーフレーム作成ツールです。ワイヤーフレーム用に作られているので、UIパーツもあらかじめ作られていてとても便利です。オンライン上でチームで共有が可能なメリットがある一方、セキュリティー面で気をつけなければなりません。
こちらは番外編になりますが、私たちケイツー・インタラクティブオリジナルの手法です。デザイン要素を全て排除したレスポンシブHTMLでワイヤーフレームを作成します。こちらは参考サンプルです。
実際のHTMLで作成されていますので、レスポンシブでのスマートフォン操作感やページ遷移などは事前に完成にかなりイメージを共有することができます。また、実際のテキストを入れ込む事で、完成段階で文字校正をする必要が無く、制作効率も格段に高いワイヤーフレームとして重宝しています。
WEBサイト制作の成功の可否を決めるワイヤーフレーム、いかがでしたでしょうか?ワイヤーフレームをひとことで言ってしまえば「パワポで線画を描く」なのですが、その背景にある意味合いはとても重要で、ホームページ成功の可否に直接つながります。成果物に見えないコストですが、ワイヤーフレームにもきちんと目を向けることで有意義なホームページを作り上げることが出来ます。
WEBサイトのリニューアルに関するご相談は、お気軽にお問い合わせください。
※本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。
ホームページ・スタートアップ は初期費用を抑えてホームページ運営に注力したい方向けホームページ入門パッケージです。ホームページ運営の方法がよくわからない、一緒に戦略を考えてくれるブレーンがいないなどお悩みのホームページ担当者にもおすすめのサービスです。
ライブラリとは、汎用性の高い再利用が可能なプログラムです。ライブラリはプログラムの本体に、必要なプログラムの部品(ライブラリ)を組み込みます。本体に組み込むのに若干記述が必要ですが、部品を作る手間無く作業効率を格段に向上することが出来ます。
ワイヤーフレームは目的を達成する為にページにどのような要素を配置すればいいかを示すホームページの設計図です。ワイヤーフレームの作成と確認は、出来上がってから「使いにくい」「成果が出にくい」ことがないように、制作に入る前に最初に確認するとても重要なフローです。
コンテンツを魅力的に見せるレイアウトの一番のポイントはファーストビューです。ファーストビューで見せるデザインは、ホームページで最も重要な要素です。ユーザーは一瞬でページの善し悪しを判断し、もし興味が無ければすぐにページを閉じてしまいます。ページを読んでもらうポイントは「魅力的な体験」「簡潔で具体的な内容」を提示出来ているかどうかです。
WEBデザイナーはビジュアルだけでは無く、プログラムを書いたりすることもあります。これは人や企業によってさまざまで、一長一短のメリット・デメリットがあります。デザインからプログラムまでを一貫して担当できるクリエイターがいれば、プロジェクトがぶれること無くスピーディーに進めていくことが出来ます。
適切なカラー選定はホームページの成果大きく影響します。特に、キーカラーの選定はホームページの印象を決める大事な作業です。もともと決まっている企業カラー、ブランドカラーがあればその色を採用します。もし無い場合は、事業コンセプト、商品コンセプト、ターゲットなどと照らし合わせ選定します。
WEB担当者が知っておきたい!制作技術の豆知識 [質問箱 (FAQ)]では、WEB担当者のみなさまの悩みに、一問一答形式でお答えしています!!