Web担当者必見!ワイヤーフレーム作成時の注力ポイント9個と便利ツール20選
ホームページを作成する際、必ずといっていいほど作成するのが本番用デザインの設計図である「ワイヤーフレーム」です。
ワイヤーフレームは一般的にWebディレクターが作成しますが、デザイナーに渡した時に「どう作ればいいかわからない」などのフィードバックを受けた経験はないでしょうか。
プロジェクトを円滑に進めるためのコミュニケーションツールでもありますので、あくまで設計図とはいえ適切に作成したいものです。
そこで今回は、ワイヤーフレーム作成時に気を付けたいポイントと便利なツールをあわせてご紹介します。
ワイヤーフレーム作成で悩んでいるWebディレクターの方は、参考にしてみてください。
参考:
新人Webディレクターの基礎、制作の現場で使うワイヤーフレームの作り方|ferret
ワイヤーフレーム作成の注意ポイント9個
1. アイデア出しは個人でしっかりと行う
アイデア出しは初めからチームメンバーとするのではなく、まずは個人で行ってみましょう。
個人でやるべき理由の一つは、ほかの人を交えると色々な話題になりまとまりにくいためです。
マインドマップを使えば芋づる式にアイデアを絞り出すことができるので、ぜひ活用してみてください。
2. サイトマップ作成は競合サイトを参考にしてみる
http://miraiyanet.com/lecture/third/sitemap.html
ホームページはリンクをたどって移動しますが、慣れないうちは構成がイマイチわからなかったりするものです。
そこで、サイトマップを作成する時は、競合サイト、類似サイトを参考にしてみてください。
似たような業界、ジャンルの場合構成も似たり寄ったりの場合が多く、参考になります。
3. 目指しているホームページデザイン、UIデザインを参考にすると早い
http://muuuuu.org/category/industry/technology
ワイヤーフレームをいざ作ろうと思った時、何も参考にするものがないよりも参考にするほうが作業がスムーズです。
他社のホームページで目指しているデザインに近い物があれば参考にしてみます。
4. ワイヤーフレームの時点で上手くビジュアル化までもっていく
http://websae.net/wireframe-20150303/
ワイヤーフレーム作成では全体のレイアウトを考えますが、この時点でビジュアル化までもっていければその後のデザイン作業がスムーズに進みます。
5. スマホ版・PC版のワイヤーフレーム作成はわけて考える
http://sokutaku.jp/column/2016/02/wireframe-2.php
近年ホームページといえばレスポンシブという位にスマホ対応が当たり前になっています。
しかし、ワイヤーフレームの時点でスマホ版、PC版を両方作ろうとするとコンテンツが足りなくなるなど問題が生じがちです。
ワイヤーフレームの段階では、PCとスマホは別物として作成しましょう。
6. 外観確認時は、デザイン全体と詳細どちらも見れるようにする
http://miraiyanet.com/lecture/third/wireframe.html
ワイヤーフレーム作成が済み外観を確認する際には、ページをプリントアウトし、ホワイトボードに貼って、全体・詳細が両方確認できるようにします。
サイトマップの構成で貼付けるとわかりやすいです。
7. チームで議論をする前に各自に意見を出してもらう
http://hatenanews.com/articles/201103/1679
全体を確認してもらったら、チームで話し出す前に、まずは各自に意見も出してもらう時間を設けましょう。
その際に、ポストイットにコメントを書いてもらい、ホワイトボードに貼付けてもらうと、その後の議論が進めやすくなります。
8. 写真で撮影すれば簡単に議事録がとれる
http://blog2.tkp.co.jp/oyakudachi/2012/04/1264.html
議事録をわざわざとらずとも、会議後のホワイトボード全体を撮影すれば議事録がとれます。
必要があれば残しておきましょう。
9. コーディング担当もブレストに参加するとスムーズに進む
https://someiyoshino.biz/service/html.php
ワイヤーフレーム作成時点ではコーディングは関係ないと思いがちですが、コーディングへとスムーズに移行するためにもコーディング担当もブレストに参加してみてください。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- サイトマップ
- サイトマップとは、ホームページの中にあるページ構成を一目見て分かるようにした、目次のような案内ページのことを指します。ホームページ内にある全てのページへのリンクが一覧になっていることが多いです。はじめて訪問した人でも、どこに何があるのかがすぐに分かるようにすることを目的として作成されます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- サイトマップ
- サイトマップとは、ホームページの中にあるページ構成を一目見て分かるようにした、目次のような案内ページのことを指します。ホームページ内にある全てのページへのリンクが一覧になっていることが多いです。はじめて訪問した人でも、どこに何があるのかがすぐに分かるようにすることを目的として作成されます。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング