CEOブログ

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

Web制作

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

投稿日:

office-605503-s

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

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

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

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

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

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

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

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

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

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

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

-Web制作


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[制作実績]鎌倉小町通りの人気漬け物店「味くら」様

鎌倉小町通りの人気漬け物店の店舗案内&オンラインショップサイト 「制作実績」を更新しました > 制作実績:人気漬け物店「味くら」様 ● サイト名   :鎌倉小町通りの漬け物専門店 味くら(みくら) ● …

[制作実績]FRESH Yoga:新商品のWeb上プロモーション企画

「制作実績」に「FRESH Yoga」を追加しました。 このFRESH Yogaは、お隣の会社「レーベン販売」さんの新商品であるグレープフルーツ絞り器「種取物語」を題材にしたプロモーション企画です。 …

[制作実績]株式会社ワタナベ会計事務所 様

横浜市・川崎市を中心に会計業務から、会社設立、事業承継、法人顧問等幅広いサービスを提供する会計事務所 ● サイト名   :「株式会社ワタナベ会計事務所」 ● サイトURL  :http://www.w …

現地ロケ&取材

新規マンションのWebコンテンツ 先日、とある不動産関連のクライアント様から、新規マンション用のWeb特設ページの制作依頼があり、現地ロケ&取材を行ってきました。 つくばエクスプレス「流山おおたかの森 …

[制作実績]神奈川県信用保証協会様

神奈川県信用保証協会様 「制作実績」を更新しました。 > こちら サイト名   :神奈川県信用保証協会様(コーポレートサイト) サイトURL  :http://www.cgc-kanagawa.or. …