Web関連

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

0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

saitoadati_2015062002.jpg

まとめ

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

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

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

関連するサービス

ホームページ制作

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    初心者でもプロのように写真が撮れる!Webデザインにも役立つ基本テクニック4つの方法

    皆さん写真撮影は好きですか?私は好きです。なので、社内のイベン…

  2. Web関連

    仕事に役立つ?!武士道的精神三ヶ条

    こんにちは、IAの鑓水です!私は小学校から中学校まで剣道、高校は合気道…

  3. Web関連

    ホームページ更新の手間を省きたい(CMS構築)

    誰でも簡単にホームページを更新できるCMS導入のご提案更新の手…

  4. Web関連

    写真を特殊な素材に印刷!変わった素材3選

    写真撮影はやっぱりマクロレンズが面白い!写真好きデザイナー出口です。…

  5. Web関連

    顧客満足度を上げるためには従業員満足度も大事!

    こんにちは。なぜかISO実行委員会(仮称)にメンバーとして召集され…

  6. Web関連

    いろいろありすぎ…レスポンシブ・SEO・モバイル対応についてまとめてみた

    今回は進化のたえないWeb業界注目のキーワード、「レスポンシブWebデ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    地方移住×ローカルWEBメディア
  2. Web関連

    ちょっとした工夫で変わる?!webサイト制作でも役立つ室内撮影時のライティング方…
  3. Web関連

    オンラインショッピングしたことありますか?
  4. Web関連

    マーケティング大成功!人気アニメ作品はなぜ「人気」となったのか?
  5. サービス・新技術

    withコロナは非接触技術で生活しよう!
PAGE TOP