こんにちは！


株式会社エイト代表取締役の大野(@eight_ceo)です。


ワイヤーフレームはWebサイトの新規作成やリニューアルに必ずと言っていいほど必要となります。


初めて作成する人は難しいと思うかもしれませんが、必要な内容がわかれば初心者でも作ることは可能です。


本記事では、ワイヤーフレームの基本的な内容と具体的な作成方法、また、推奨ツールをご紹介します。


------------------------------------------------

Web集客なら弊社にお任せください！

自社運営するメディアと同じ熱量で

お客様の結果にコミットいたします。


【会社ホームページ】

https://eight-media.co.jp/


【お問い合わせフォーム】

https://eight-media.co.jp/about/


【メールアドレス】

info@eight-media.co.jp


LINEの友達追加《お問い合わせはこちら》

https://lin.ee/FFq4XmZ

------------------------------------------------


一般的なサイト作成手順

ワイヤーフレーム作成の前に、まずはWebサイト作成の一般的な流れをご紹介します。


  1. ディレクトリマップの作成
  2. ワイヤーフレームの作成
  3. Webデザイン実施
  4. コーディングの実施

ワイヤーフレームの作成前にWebサイト作成は、まずはディレクトマップの作成が必要のため注意が必要です。


ディレクトリマップでサイト全体で必要ページや各ページで必要なコンテンツを決めてからワイヤーフレームの作成を実施してください。


ワイヤーフレーム概要

ワイヤーフレーム(wireframe)とは、Webページのレイアウトを定める設計書のことです。


名前の通り、線や枠でシンプルでわかりやすく構成されています。


Webページを作成するにはなんとなくのデザインから決めてしまうと、最終的にクライアントが求めているコンテンツが盛り込まれていないなど、トラブルや手戻りの元となりえます。


ワイヤーフレームをきちんと作成することにより、必要なコンテンツが組み込まれたWebページをデザインすることができます。


Webページの作成にはライターやデザイナーなどさまざまな役割の担当が付き対応します。


ワイヤーフレームを活用して完成イメージを共有することで認識のズレを未然に防ぐことが出来ますし、また、初期のタイミングではデザインが固定されていないため、活発に議論をしながら良いWebページづくりのためのブラッシュアップをすることが可能となります。


ワイヤーフレームの作成方法

①情報の洗い出し

ページに必要な情報や要素の洗い出しをします。


この工程がワイヤーフレームを作成するにあたって、最重要と言っていいです。


ページの種類によって必要な要素があるので、それを中心として選定していきます。


②ページのレイアウトや表示順の決定

①で決めた要素を表示するプライオリティーやレイアウトを決めます。


重要な情報はページの上部に配置するほど見られる傾向にあるため、優先度をつけます。


また、レイアウトもマルチカラム、シングルスクリーンなど種類があるので、ターゲットとなる閲覧者がどのデバイスを多く利用しているか想像して決めてください。


③手書きでラフ案作成

前工程で決めた要素と配置でとりあえず、紙に書いてみます。ユーザー目線でWebページのレビューをします。


ユーザーが求めている情報ほどページの上部に配置するのがコツです。


優先度の低い要素はページ下部に掲載するか、別のページに掲載するように検討します。


④ツールを使って清書する

手書きでだいたいまとまってきたら、ツールを使って清書しましょう。


ツールの機能を使って、クライアントや他の役割のメンバーに共有して確認してもらったり、修正することが可能となります。


ワイヤーフレーム作成が捗るツール

ワイヤーフレームの作成にはツールを使用したほうが捗ります。


リモートワークが当たり前になってきている世の中で、大体のツールはインターネットを介してのリアルタイム共同作業やチャットなどの機能を備えています。


①Adode XD

多くのWeb制作会社が利用しているワイヤーフレームツールです。


テンプレートが数多く配布されていて、これらを利用してスムーズにワイヤーフレームを作成することができます。


また、作成したワイヤーフレームはAdobe XDをインストールしていないパソコンでもオンラインで確認することができるため、関係者での円滑なコミュニケーションを取ることが可能です。


②Cacoo

クラウド型のワイヤーフレーム作成ツールです。


日本語に対応していて使いやすく、チャットやコメント、リアルタイム共同編集機能など十分な機能を備えています。


また、パソコンだけでなく、スマホ版やアプリ版のワイヤーフレーム作成も可能です。


③Figma

ウェブブラウザベースのデザインツールのため、自分のパソコンへのインストールをしなくても利用可能です。


また、ファイルの容量が小さく軽いので快適に作業をすすめることができます。


Slackとの相性もいいので、Slack上でのデザイン共有や編集も可能です。


まとめ

今回はワイヤーフレームについて解説しました。


Webページをデザインする上で必要な要素をまとめられること、初期の段階で全体的な構成をデザイナーや他の工程の方々や、クライアントと認識合わせをすることにより円滑にWebページが作成できるツールであることがわかったと思います。


他のツールと組み合わせてWebサイト設計することにより今後のSEO対策にも役立つと思いますので、ぜひ活用してください。


------------------------------------------------

Web集客なら弊社にお任せください！

自社運営するメディアと同じ熱量で

お客様の結果にコミットいたします。


【会社ホームページ】

https://eight-media.co.jp/


【お問い合わせフォーム】

https://eight-media.co.jp/about/


【メールアドレス】

info@eight-media.co.jp


LINEの友達追加《お問い合わせはこちら》

https://lin.ee/FFq4XmZ

------------------------------------------------