スマートフォンサイトを表示する

  1. TOP
  2. みんビズ制作講座 デザインカスタマイズ : 第1回 デザインの方向性を決めよう

エキスパートコラム

みんビズ制作講座:デザインカスタマイズ(全10回)

第1回:デザインの方向性を決めよう

執筆:志鎌 真奈美(Shikama.net)

2012年10月24日更新

  • このエントリーをはてなブックマークに追加

閲覧数22,376views

このコラムをPDF形式でダウンロードする

みんビズには、業種ごとにテンプレートが揃っていますが、運営していくうちに

  • 他社と同じデザインで、差別化ができていない
  • もっと自社らしいサイトにしたい

などの不満や要望が出てきていませんか?

今回からスタートする新しい章「テンプレートを自分流にカスタマイズ(全10回)」では、一歩進んだ見せ方、使い方をお伝えします。第1回目は、デザインの作業に入る前に、「抑えておきたいポイント」「Web デザインの基本的な考え方」について解説します。

Webサイトのデザインを考えるための三大原則

Webサイトのデザインを考える上で重要なのは、次の3つです。

  1. ターゲットを意識する
  2. 目線を意識する
  3. 見やすくわかりやすい設計に

以下、詳しく説明します。

(1) ターゲットを意識する

ウェブサイトに来て欲しい閲覧者(=想定ターゲット)はどんな人でしょうか?

  • A. 新規か、既存か?
  • B. 属性は?
  • C. Web サイトへ接続する際の環境は?

など、できるだけ閲覧者の属性を絞り込んで、明確にしておきましょう。
(想定ターゲットを「ペルソナ」と呼ぶこともあります。)

ターゲットの絞り込み方

このように円を書いて、絞り込んでいきます。デザインに限らず、すべてにおいて戦略を立てやすくなります。

属性について

  • 性別
  • 既婚、未婚
  • 家族構成
  • 年収
  • 職種
  • 趣味
  • 生活スタイル
  • よく読む雑誌、本

など

(2) 目線を意識する

ウェブサイトの第一印象(ファーストビュー)は、「3秒で決まる」とも言われています。
スクロールする前のエリアで、しっかりと閲覧者の心をつかんでおきましょう。
一瞬で、何のサイトかわかるのが理想です。

閲覧者の視線は「F型」に動いています。Fの部分に、重要な情報を配置します。

閲覧者の視線は「F型」に動いている

(3) 見やすくわかりやすい設計に

「design(デザイン)」という言葉を辞書で引くと「設計」とあります。デザインは、決して「飾りつけること」でも、「アート」でもありません。訪問者に、どうわかりやすく伝えるか、迷子にならないための設計をするのが「デ ザイン」なのです。(2) で説明した「目線」を意識しながら、配置を決めましょう。

他のサイトを参考にして、方向性を検討しよう

想定のターゲットや伝える内容が明確になったら、今度はいろいろなサイトを見て参考にしてみましょう。

(1) 検索して探す

ヤフーやグーグルで、同業・競合、異業種などを検索し、いろいろなサイトを見てみましょう。

Yahoo!

(2) 事例紹介サイトから探す

みんビズ、bizYouのサイト内に事例が掲載されています。

bizYou Web サポート「ユーザー例紹介」

伝えたい内容やターゲットと合っているウェブサイトを2~3、ピックアップ

伝えたい内容やターゲットと合っているウェブサイトを2~3、ピックアップしておきます。

  • メインとなるビジュアルの選び方、使い方
  • レイアウト
  • カラー

などの要素を参考しに、自サイト方向性を考察します。

同じ業種でも、いろいろなデザインがあります ~ カフェの場合 ~

カフェスロー大阪

CHUM APARTMENT

トップページの構成図を作ってみよう

方向性が固まったら、以下のようにトップページの構成図(ワイヤーフレーム)を作ってみましょう。(もちろん手書きでもOKです)

トップページの構成図(ワイヤーフレーム)

いくつかパターンを作って、検討してみるとよいでしょう。

次回、第2回目「背景を変更してみよう」では、実際に背景画像を入れて、雰囲気やテイストの違いを確認してみます。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

志鎌 真奈美(しかま・まなみ)

志鎌 真奈美(しかま・まなみ)

Shikama.net 代表/JimdoExpert
http://www.shikama.net/
http://www.web-supporter.jp/

北海道函館市生まれ。北海道教育大学函館校卒業。千葉県市川市在住。
1997年よりWeb制作を始める。ソフトウェア会社のWeb制作部門に5年間勤めた後、2002年4月に独立。Web制作・企画・制作、システム構築などに従事。
講師として、Webマーケティングやデザインのセミナー活動も行っている。

著書に『WebデザイナーのためのJimdoスタイルブック』(共著、マイナビ)、『Web文章の「書き方」入門教室~5つのステップで「読まれる→伝わる」文章が書ける!』(技術評論社)。

Web文章の「書き方」入門教室~5つのステップで「読まれる→伝わる」文章が書ける!

  • はじめてWEB 読も読もキャンペーン「テーマ別セレクト本」プレゼント!
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/10/8~2017/10/14]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ