読む人にも、書く人にも、
真に価値ある情報を。
wordpressの初心者向け情報サイト『webcode』
webデザイン

ワイヤーフレームを作るための5つのステップとは?

colored-pencils-374771_1920

Webサイトを制作する際には、ワイヤーフレームを作ることが多いです。しかし、「ワイヤーフレームの作り方についてよくわからない…」という方も多いと思います。

 

そんなワイヤーフレームの作り方をここでしっかりと押さえていきましょう。

 

そもそもワイヤーフレームとは?

 

ux 788002 640 - ワイヤーフレームを作るための5つのステップとは?

 

まずは、「ワイヤーフレームとは何なのか」しっかりとおさえておきましょう。

 

ワイヤーフレームとは、

Webページの大まかなコンテンツやレイアウトを示した構成図(コトバンクより)

とあります。

 

つまり、Webサイトの設計図になります。

 

この設計図があることによって、「どのようなWebサイトを作るのか」という1つの共通認識ができ、どの立場の人でも同じように理解することができます。

 

また、完成時のイメージがしやすくなるため、仕様の変更やデザインの改善なども具体的に行うことができます。

 

ワイヤーフレームを作るステップとは?

 

stairs 1715618 640 - ワイヤーフレームを作るための5つのステップとは?

 

ワイヤーフレームを作る際には、5つのステップを踏んで作っていくことをおすすめします。このステップ通りに行っていくことで、要素や機能面での過不足を防ぐことができます。

 

Step1.最低限あるべき要素を整理する

 

ワイヤーフレームを作成する前に次の2つのことについて考えていきます。

 

1.1つのページのゴールを決める

 

Webサイトはスクロースさえすれば、無限に要素を配置することができます。

 

しかし、1つのページに要素を入れすぎてしまうと、ユーザにとって使いにくいサイトになってしまいます。

 

要素の入れすぎを防ぐために1つのページで1つの目的を満たすようにします。これに基づいて「このページではどのような情報を得られるのか」明確にしていきましょう。

 

2.ページに必要な要素を考える

 

1つのページのゴールを決めたうえでそこで必要になる要素について考えていきます。

 

ある企業のサイトを作ることになったとして考えてみましょう。

 

1ページの目的として「会社概要がわかるようにする」と挙げたとします。そこで必要になる要素としては、所在地や設立年月日、事業内容、取引先企業などが挙げられます。

 

このように必要となる要素を書き出してみましょう。

 

これで、1つのページに載せるべき情報が整理できるはずです。

 

Step2.大枠の要素を書き出す

 

大枠の要素を書き出して、サイトの全体像をイメージしていきます。

 

大枠の要素として必要になるのは次のようなことが挙げられると思います。

 

  •  ヘッダー:メニューや検索フォームを配置する
  •  サイドバー:ナビゲーションや広告を含む
  •  コンテンツ:訪問者に伝えたい情報を入れる
  •  フッター:copyrightの表記やサイトマップを配置する

 

必要になる要素を書き出したところで「どのように配置するのか」について議論します。

 

ワイヤーフレームのレイアウトとしては、大きく分けて3つが挙げられます。

 

  •  マルチカラム型:ヘッダーやコンテンツ、サイドバー、フッターの要素から構成される(一般的に用いられているレイアウト)
  •  シングルページ型:ヘッダーとコンテンツの要素から構成される
  •  フルスクリーン型:全面を1つの要素で埋める

 

サイトの設計を考えるためのワイヤーフレームなので、色は付けずに考えていきましょう。

 

色を付けてしまうと、「どんな色にするのか」というデザイン面に気をとられてしまい、サイトの設計について考えることができなくなってしまいます。

 

ここでやるべきことをもう一度整理しておきます。

 

  •  必要となる要素を書き出す
  •  要素の配置を考える

 

Step2では、この2つを中心に考えていきます。

 

Step3.要素ごとに掘り下げて考える

 

Step2までで必要になる要素について考えられたと思います。

ここでは、必要とする要素に「どのような情報を組み込むのか」具体的にしていきます。

 

例えば、ヘッダーには「ロゴ」や「検索ボックス」などが必要になります。また、ナビゲーションでは、「企業情報」や「その企業が提供しているサービス」などが必要になるでしょう。

 

このように要素ごとに必要となる情報について考えていきます。

 

まずは、「要素ごとにどのような情報が必要になるのか」思い浮かんだ順に書き出してみましょう。

 

「人は左から右に視線を移動させる」という習性があるので、左から順に重要な内容を配置していきましょう。

 

Step4.要素に優先順位をつける

 

必要となる要素や要素の配置について考えたところで優先順位をつけて考えていきます。

 

「優先順位をつけてどこを目立たせるべきか」考えていきます。

 

目立たせる部分としては、「アイキャッチ画像」や「CTA(Webサイトの訪問者に行動を誘導する)」が挙げられると思います。

 

目立たせる部分を明確にすることで、重点的に目立たせていくべきか明確になります。

 

Step5.色を付ける

 

いよいよ色を付けて今までのイメージを形にしていきます。

 

色を付けていくことで、完成品をイメージできるようになります。完成品がイメージできるようになることでどの立場の人にも1つの共通認識を持てるようになります。

 

また、「このサイトをより良くするためにはどうすべきか」さらにブラッシュアップしていくこともできます。

 

ワイヤーフレームは何を使って作るの?

 

ワイヤーフレームは、紙とペンを使う場合パソコンを使う場合の2つのパターンがあります。

 

紙とペンを使うことで、誰でも簡単に作ることができ、修正も簡単にできます。パソコンのツールを使うことで、ワイヤーフレームの管理がしやすくなるだけでなく、用意されているテンプレートを使って作成することができます。

 

パソコンでのワイヤーフレーム作成ツールとしては、「Cacoo」や「Moqups」、「Adobe Comp」、「PowerPoint」などが挙げられます。

 

まとめ

 

いかがでしたか?

 

今回は、ワイヤーフレームの作成方法をメインにお伝えしました。

 

作成方法をもう一度おさらいしておきましょう。

 

 Step1.最低限あるべき要素を書き出す

 Step2.大枠の要素を書き出す

 Step3.要素ごとに掘り下げて考える

 Step4.要素に優先順位をつける

 Step5.色を付ける

 

この5つのステップに沿って作っていきます。

 

「ワイヤーフレームをどう作ればいいのかわからない…」と悩んでいるあなたもまずはこのステップに沿って考えてみましょう。

このステップに沿って考えていくとスムーズに作れるようになるはずです。

 

最後まで読んでいただき、ありがとうございました。

WordPressでおすすめのプログラミングスクール

オンラインマンツーマンならCodeCamp

bgt?aid=160728030173&wid=010&eno=01&mid=s00000016159001010000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
CodeCampは、完全オンラインで、現役エンジニア講師のマンツーマンレッスンを受けられるプログラミングスクールです。

CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。

プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。

プログラミングのオンラインスクールCodeCamp0 - Wordpressでおすすめのプログラミングスクール

CodeCampの口コミはこちら

オンラインテキストを自習形式ならTechAcademy

bgt?aid=160728030174&wid=010&eno=01&mid=s00000016188001104000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
TechAcademyは、1ヶ月の短期集中でWordpressについて学べる、完全オンラインのプログラミングスクールです。

基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。

TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。

TECH ACADEMYの無料体験はこちら0 - Wordpressでおすすめのプログラミングスクール

TECH ACADEMYの口コミはこちら