CEOブログ

横浜で活躍するホームページ作成・開発会社アットライズの代表取締役社長(CEO)が綴る、日々の奮闘記!!

Web制作

サイト制作の設計図:ワイヤーフレームで理想に近づけていく

投稿日:

office-605503-s

企画設計段階での練り込みが重要

Webサイトのリニューアル等で新規にサイト制作する際、弊社では ほとんどの場合 いきなりデザインするのではなく、その前段階としてワイヤーフレーム(ページ構成案)を作って打合せをします。

ワイヤーフレーム(ページ構成案)は、簡単に言うと家を建てるときの設計図(間取り図)のようなものです。
サイトに掲載すべきコンテンツは既に確定している段階なので、その優先順位などを鑑みながら どこにどのコンテンツをどんな風に配置していくのか、それを表した資料です。

(↓)ワイヤーフレーム(ページ構成案)サンプル(クリックで拡大します)
構成案サンプル-1

いきなりデザインすると ビジュアルイメージに意識が行ってしまう

ワイヤーフレームを作らずに いきなりデザインしてしまうと、デザインのビジュアルイメージに意識が行ってしまい、本質的なレイアウトや配置など サイト構成として重要なポイントに目がいかなくなってしまうからです。

本来Webサイトは「目的・ゴール」があって、それを実現するために設計していくものですが、デザインを目にするとどうしてもアート的な視点から好き嫌いで判断してしまいがちになってしまいます。

この段階で納得いくまで詰めていく

このワイヤーフレームの段階で、納得いくまで詰めていき、それから本格的なデザインを起こしていきます。

デザインの前段階でワイヤーフレームの工程を入れると、一見工数が余計にかかるように思えますが、目的・ゴールを明確にした上で、ユーザー(サイトを訪問するお客様)に、「何をまず見てほしいのか」「見たときに、どう感じてほしいのか」「次のリアクションでどう誘導したいのか」などを中心に見直しを繰り返すことで、結果的に後になっての手戻りも防止でき、期待通りの反響が得られるサイトになっていきます。

そのため、ワイヤーフレームでは あえてあまり色も付けずアート要素を極力排除した
シンプルな資料にしています。
 
 

-Web制作

関連記事

自社サイト、リニューアルしました!!

6年半ぶりのリニューアル アットライズの自社サイトをリニューアル公開しました! https://www.attrise.com 紺屋の白袴と言うか何と言うか。。 日頃からお客様のWebサイトは、期限を …

[ホームページ制作]原稿を書くのが大変!原稿作成のヒント

「Web制作なんて簡単にできる」と思っていらっしゃるようですが。。 ホームページ制作の相談を受け、「いつまでに公開したいですか?」と希望納期を聞くと、ほとんどのお客様が「なるべく早く」と仰います。 ま …

[Attriseサイト]「お客様の声」ページを追加しました。

「お客様の声」ページを追加しました。 > こちら クライアント:横浜心理ケアセンター様 サイトURL:http://shinri-care.com/ 業務内容:各種カウンセリング、EAP(従業員援助プ …

AIで写真素材の障害物を消してみた!

どうしても写り込んでしまう障害物 お客様のホームページ用写真素材を、セミプロ級の自社スタッフが撮影する、、という話はこちら(*1)のブログに書きました。 (*1) ブログ「ホームページは写真が命。写真 …

[制作実績]仕事効率化セミナー ランディングページ

2014年7月23日(水)にアットライズとお片付けコンシェルジュ(インブルーム株式会社様)にて共催した仕事効率化セミナー。 そのセミナーの参加募集用ランディングページをアットライズサイトの実績に掲載掲 …