CEOブログ

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

Web制作

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

投稿日:

office-605503-s

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

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

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

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

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

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

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

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

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

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

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

-Web制作

関連記事

システム開発のトラブルあるある

現場の協力が不可欠 システム開発のプロジェクトが こじれ、訴訟にまで発展した事例がITproの記事で紹介されていた。 この記事では、旭川医大がNTT東日本に発注した病院情報管理システムのプロジェクトで …

[制作実績]綾瀬厚生病院様:看護部募集スマートフォンサイト

病院本体サイトの他に看護部募集スマホサイトも制作 綾瀬厚生病院本体のスマートフォンサイト制作実績については昨日のブログで紹介しましたが、今回は「看護部募集スマホサイト」のご紹介。 コンセプトはモバイル …

システム開発で陥りがちなワナ。。

止まらない仕様変更、、トラブル。。 日経クロステックに、 「逆転敗訴した野村情シスがIBMに送った悲痛なメール、横暴なユーザーを抑えきれず」 なる記事が投稿され、思わずクリックして読んでしまった。(^ …

アットホームな歯医者さん!「ブレーメン通りのたぶち歯科」内覧会に行ってきました

「お子さん」のことを考え抜かれた、歯科医院らしからぬ歯医者さん 弊社でWebサイト制作のお手伝いをさせていただいた、東急東横線 元住吉駅徒歩2分にある『ブレーメン通りのたぶち歯科』さんの内覧会が催され …

自社の業務フローはそのままに、営業進捗管理システムを導入する

業務フローやアウトプット帳票などを変えずにシステムを導入 お客様や経営者仲間と話をしていると、 ・「営業管理が一元化できていないので、前回からのタイミングを逸してしまっている」 ・「営業報告をメール添 …