Web関連

サイトの骨格、ワイヤーフレームとは

0

みなさんはWebサイトを作るとき、どのようなデザインにしたいと考えますか?
流行りのフラットデザインを取り入れよう。ビデオ動画を背景に利用してユニークなデザインにしよう。
知的で、信頼感のある青をメインカラーにしようという、概念的で大まかな考えの方もいるのかもしれません。

しかし、このような表層的な考えのみでデザインしたWebサイトが良いデザインなのかというと、
決してそうであるとは言えません。
見た目として綺麗なものであっても骨組みが無い、言わばペーパークラフトのようなサイトでは、
風が吹けばすぐに倒れてしまいます。

それでは、どのようにすれば良いデザインに近づくことができるのでしょうか。

今回はサイトの骨格部分にあたるワイヤーフレームの観点から、サイトのデザインについて考えていきましょう。

サイトの骨格となるワイヤーフレーム

グラフィック要素(デザイン)を入れる前に、サイトの骨組みとなる
ワイヤーフレームの作成をする必要があります。

ワイヤーフレームとはウェブページの大まかなコンテンツやレイアウトを示した画面構成図のことです。
ワイヤーフレームを作成することにより、レイアウトの確認、メニュー構成の確認、サイト全体の
バランスなどを確認することができます。

そもそもなぜ、ワイヤーフレームを作るの?

そもそもなぜ、ワイヤーフレームの作成を行う必要があるのでしょうか。

ユーザーは自分の抱えている課題を解決するべく、サイトに訪れます。
しかし、課題を解決する情報が見当たらない、または、サイトが使いにくいといった場合、
課題を解決するコンテンツが存在するにも関わらず、ユーザーはサイトを離脱してしまう可能性があるのです。

こうなってしまっては、せっかくのデザインも、何の役にも立たないですよね。

ワイヤーフレームを作成することで、何を(要素)、どのように(配置)という機能面の確認と、
「どういったページを作るのか」という情報整理、仕様を明確化する必要があるのです。

ワイヤーフレームを作るときのポイント

サイトの機能、要素が決まればいよいよワイヤーフレームの作成です。
今回はワイヤーフレームを作成する際に意識をしたいことのいくつかを紹介したいと思います。

まず、コンテンツの優先度をつけましょう。
コンテンツの優先順位が決定したら、ユーザーがページをどう見るかを考えて、
コンテンツを配置しましょう。「大きいものから 小さいもの」、「上にあるもの 下にあるのも」、
「左にあるもの 右にあるもの」へと移動する人の目線を意識した導線設計をすると良いでしょう。
また、Webサイトを見る人の目線は「Z」や、「F」の文字を描くと言われています。
流し読みをしてすぐにページを離脱してしまうユーザーなどに、
「ちょっと待った!」を掛ける有益な情報を、目線上に配置しましょう。

saitoadati_2015062002.jpg

まとめ

今回はワイヤーフレームの要点をとりまとめた、概要的な内容にまとめさせて頂きましたが、
いかがだったでしょうか。

基本的にユーザーは、自分が抱える問題を解決するべくサイトを訪れます。

そのため、Webサイトはユーザーの問題を解決するべく、何を、どうやって伝えるかを考える必要があるのです。
デザインされたサイトを作るために、グラフィックデザインとともに、デザインの骨組みとなる
ワイヤーフレームを作成する必要があるのです。

関連するサービス

ホームページ制作

0

読むべし!アプリ開発初心者のための本前のページ

パララックスデザインのサイトって使いにくくない?次のページ

ピックアップ記事

  1. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  2. 新しい販売形態であるDtoCについて考えてみる
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    2015年夏流行る?おしゃれな手法を使ったサイト

    今回は今年流行するかも?という新しい手法を使ったおしゃれなWebサイト…

  2. Web関連

    ストレージ仮想化ってなんですか?

    こんにちはシステムエンジニアの小森です。ある日、誰かが言いました。…

  3. Web関連

    ポケモンGOはなぜヒットした?

    ついにポケモンGOが日本でもリリースされましたね!(執筆時は7/22)…

  4. Web関連

    リターゲティング広告の性質を逆に利用!新たなバナー広告活用法

    こんにちは!デザイナーの岡村です。ウェブ担当者の皆さん、「リターゲ…

  5. Web関連

    マルチデバイス対応インバウンド接客が訪日外国人観光客満足度アップのカギ!

    年々増加を続ける訪日外国人観光客みなさん、海外旅行は好きですか?…

  6. Web関連

    大手企業が実践しているリターゲティング広告をする2つのメリット

    ここのところずっと駅のお花屋さんにある、季節ごとの様々な花に目が奪われ…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. AI関連

    【人工知能(AI)×介護】人工知能が高齢化社会の介護サービス充実化に貢献
  2. img

    AI関連

    IKEA原宿でみた今後の実店舗の役割
  3. Web関連

    アパレル系ECサイトの新常識。購入率、再訪問率をグングン上げるWeb接客ツール!…
  4. Web関連

    小売業界必見!ビジネスの見方が変わる!?小売業界のミライ予測
  5. AI関連

    人工知能がレコメンドを加速する、AIマッチングサービスをご紹介
PAGE TOP