Web関連

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

saitoadati_2015062002.jpg

まとめ

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

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

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

関連するサービス

ホームページ制作

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    ユーザーの希望に応える応えるECサイト

    市場規模の広がるEC市場皆さんはECサイトを利用したことはありますか…

  2. Web関連

    洗えるスマホ発売による可能性

    KDDIからハンドソープで洗えるスマートフォンが販売されることになりま…

  3. Web関連

    おいでよ、ミクロネーション!

    こんにちは。イギリスの正式名称を暗唱できる真野です。今回のコラムはフリ…

  4. Web関連

    納得!心地よくブログを読んでもらえる2つの工夫

    みなさんは「ざわちんメイク」をご存知ですか?ものまねメイクで話…

  5. Web関連

    スマートフォンサイトに適したUI設計とは(1)

    こんにちは。育児に家事に大忙しのディレクター、望月です。ス…

  6. Web関連

    【Web制作】ビッグデータって結局なに?身近なビッグデータを考える

    ビッグデータ関連書籍が数多書店に並び、テレビでも新聞でも騒がれて久しい…

おすすめ記事

最近の記事

  1. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  2. 約1年間のウィズコロナ生活で大きく変わったもの
  3. スマートストアにより、小売業は激変する
  4. 【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
  5. AI技術の普及により移動も安全に

アーカイブ

  1. Web関連

    2016年はVR元年?WebにVRは来るか
  2. Web関連

    近ごろ話題のワークショップ型ディスカッションを考えてみた
  3. AI関連

    AIチャットボットって一体どこがAIなの?
  4. AI関連

    AIがアンチエイジング市場に大きなビジネスチャンスを生む
  5. Web関連

    ア ナ タ ハ ソ コ ニ イ マ ス カ? ネット上にさまよう死者のアカウ…
PAGE TOP