みんビズ制作講座：デザインカスタマイズ（全10回）第1回：デザインの方向性を決めよう執筆：志鎌真奈美（Shikama.net代表）みんビズには、業種ごとにテンプレートが揃っていますが、運営していくうちに ● ● 他社と同じデザインで、差別化ができていないもっと自社らしいサイトにしたいなどの不満や要望が出てきていませんか？今回からスタートする新しい章「テンプレートを自分流にカスタマイズ(全10回）」では、一歩進んだ見せ方、使い方をお伝えします。第1回目は、デザインの作業に入る前に、「抑えておきたいポイント」と「Web デザインの基本的な考え方」について解説します。 Webサイトのデザインを考えるための三大原則 Webサイトのデザインを考える上で重要なのは、次の3つです。 1. ターゲットを意識する 2. 目線を意識する 3. 見やすくわかりやすい設計に以下、詳しく説明します。 (1) ターゲットを意識するウェブサイトに来て欲しい閲覧者(=想定ターゲット)はどんな人でしょうか？ ● ● ● A. 新規か、既存か？ B. 属性は？ C. Web サイトへ接続する際の環境は？など、できるだけ閲覧者の属性を絞り込んで、明確にしておきましょう。（想定ターゲットを「ペルソナ」と呼ぶこともあります。）ターゲットの絞り込み方このように円を書いて、絞り込んでいきます。デザインに限らず、すべてにおいて戦略を立てやすくなります。属性について ● ● 性別既婚、未婚 ● ● ● ● ● ● ● 家族構成年収職種趣味車生活スタイルよく読む雑誌、本など (2) 目線を意識するウェブサイトの第一印象(ファーストビュー）は、「3秒で決まる」とも言われています。スクロールする前のエリアで、しっかりと閲覧者の心をつかんでおきましょう。一瞬で、何のサイトかわかるのが理想です。閲覧者の視線は「F型」に動いています。Fの部分に、重要な情報を配置します。出展：http://www.useit.com/alertbox/reading_pattern.html (3) 見やすくわかりやすい設計に「design（デザイン)」という言葉を辞書で引くと「設計」とあります。デザインは、決して「飾りつけること」でも、「アート」でもありません。訪問者に、どうわかりやすく伝えるか、迷子にならないための設計をするのが「デザイン」なのです。(2) で説明した「目線」を意識しながら、配置を決めましょう。他のサイトを参考にして、方向性を検討しよう想定のターゲットや伝える内容が明確になったら、今度はいろいろなサイトを見て参考にしてみましょう。 (1) 検索して探す (2) 事例紹介サイトから探すヤフーやグーグルで、同業・競合、異業種などを検索し、いろいろなサイトを見てみましょう。みんビズ、bizYouのサイト内に事例が掲載されています。 ● ● ● ヤフーhttp://www.yahoo.co.jp/ グーグルhttp://www.google.co.jp/ ● みんビズ「みんなの物語」 http://www.minbiz.jp/story/ bizYou Web サポート「ユーザー紹介」 http://hajimeteweb.jp/user/ 伝えたい内容やターゲットと合っているウェブサイトを2～ 3、ピックアップしておきます。 ● ● ● メインとなるビジュアルの選び方、使い方レイアウトカラーなどの要素を参考しに、自サイト方向性を考察します。同じ業種でも、いろいろなデザインがあります～カフェの場合～ ● カフェスロー大阪http://www.cafeslow-osaka.com/ ● Cocuuhttp://cocuu.jimdo.com/ ● CHUM APARTMENThttp://chum-apt.net/ ● KURUMED COFFEEhttp://kurumed.jp/ トップページの構成図を作ってみよう方向性が固まったら、以下のようにトップページの構成図（ワイヤーフレーム）を作ってみましょう。（もちろん手書きでもO Kです）いくつかパターンを作って、検討してみるとよいでしょう。次回、第2回目「背景を変更してみよう」では、実際に背景画像を入れて、雰囲気やテイストの違いを確認してみます。志鎌真奈美（しかま・まなみ） Shikama.net 代表／JimdoExpert http://www.shikama.net/ http://www.web-supporter.jp/ 北海道函館市生まれ。北海道教育大学函館校卒業。千葉県市川市在住。 1997年よりWeb制作を始める。ソフトウェア会社のWeb制作部門に5年間勤めた後、2002年4月に独立。We b制作・企画・制作、システム構築などに従事。講師として、Webマーケティングやデザインのセミナー活動も行っている。著書にWebデザイナーのためのJimdoスタイルブック』（共著、マイナビ）、『Web文章の「書き方」入門教室～5 つのステップで「読まれる→伝わる」文章が書ける！』（技術評論社）。 Copyright 2017 はじめてＷＥＢ All Rights Reserved. http://hajimeteweb.jp/