サイト制作サービス
運用サービス
代行サービス
CRM/SFA導入サービス
補助金・助成金の活用
〒810-0042福岡県福岡市中央区赤坂1丁目10-9 ロクバイビル8FTEL 092-791-2108
ホーム » コラム » ホームページ制作 » ホームページ制作のワイヤーフレーム｜作り方のポイントを解説
目次
ホームページ制作をするとき、どのようにして作成していますか?
実はホームページ作成に必要となるのがワイヤーフレームなのです。1人で作っている時は必要ではありませんが、会社など複数の人が関わる時には必ず必要となります。
どんな内容でホームページを作るのか。このようなことを決める時、ワイヤーフレームの必要性に気づくでしょう。
今回はこの「ワイヤーフレーム」に関して、必要性から作成の仕方などわかりやすくお伝えします。
この記事を読んでワイヤーフレーに関して知ることで、今後のホームページ制作がやりやすくなると思いますので、ぜひ試してみて下さい。
ワイヤーとは「線・電線・針金」などを意味する英単語です。またフレームとは「枠・骨格」を意味します。
このことから、ワイヤーフレームとは「シンプルな線や図」で構成されるもののことを指します。
このワイヤーフレームは、Webページデザインの前段階で作成していくものです。
「何をどこに配置するのか」「問い合わせなどの導線はどのようにどこに配するのか」。
このようなことを考えて作っていくのです。
また、ワイヤーフレームは修正や追加を効率的に行うためにコーディングやデザインに入る段階の前に決めておきます。つまり、Webサイト制作におけるワイヤーフレームとは「Webページのレイアウトをシンプルな線・枠で表現した設計図」となるのです。
家を建てる時に必ず設計図を作るように、Web制作にも設計図が必要なのです。
ワイヤーフレームはWeb制作における設計図だとお伝えしました。
では、どのような目的があってワイヤーフレームがつくられているのでしょうか。もちろん「Webページのレイアウト・仕様」を決めることではありますが、それだけではありません。
どのような目的があるの、詳しく解説していきます。
情報設計と言われているのがホームページ制作を行う過程の事を意味します。
情報を集めていくとテキストや画像など多くの情報が出てくると思います。
どのような文章や写真などを使って、コンテンツ制作をしていくのか。それをテキストで整理していくのはかなり無理な話です。
そのような時に活用できるのが「ワイヤーフレーム」となります。
ワイヤーフレームはどのようなものを載せていきたいのかを決めていく、重要なポイントとなります。
会社でホームページ制作を行う時、基本的に1人では作らないと思います。
コーダー、エンジニア、デザイナーなどあらゆる専門家が集まり、一つのサイトを作り込みます。その中で同じ共有認識をもっていなければ、サイトを作る際にスムーズに進めることができません。
このような時に重宝されるのが「ワイヤーフレーム」なのです。
一度ミーティングをしながら皆で情報を持ち寄り、ワイヤーフレームに書き込みを行うことで、共有認識ができてまとまりのある良いサイトを作ることができます。
ワイヤーフレームは共有認識をするためにも作られていくのです。
ワイヤーフレームの作成手順を一つずつ見ていきたいと思います。
ワイヤーフレームはホームページ制作を行う上でかなり大事なものとなってきます。しっかりと作れているかどうかで、Webサイトの出来が変わると言っても過言ではありません。
ホームページの設計図となるワイヤーフレームですが、どんなページを作っていきたいのか、まずはっきりさせる必要があります。
そのためすぐワイヤーフレームに書きこんでしまうと、その後に情報が出てきたり削除されたりする時に、いちいち手直しが必要となってしまいます。
まずはサイトマップから作っていくのがおすすめです。
WebサイトのTOPページから作り、TOPページができたら、その下層ページを作っていきます。
これにより、ホームページ全体を作りこむことができるでしょう。
このようにTOPページから作りこんでいき、ようやくワイヤーフレームを使う段階に来ました。
ワイヤーフレームは全てのページに作っていくことが理想ではあるものの、膨大なテキストと図形など、そこまで手が回らないのが正直なところだと思います。そのため、本当にワイヤーフレームが必要なのかを見分けることが大事です。
1つずつ仕分けるのは大変ではありますが、この基礎段階でしっかり作業をすることで後々いいサイトを作ることができるようになるでしょう。
このようにサイトマップを作ることが、ワイヤーフレームをよりスムーズに確実に完成させることができます。
ワイヤーフレームを作成するページを分類したら次に「レイアウト」を決めていきましょう。
レイアウトはさまざまなものがあるものの、代表的なものは次の4つになります。
その4つを確認してみましょう。
この4パターンが代表的なものになります。
どれが自分に合うのかを考えながら選んでみてはいかがでしょうか。
下書きは、優先順位を決めて配置をしていきます。
まずは軽く配置をしてみて、全体的にどのようなバランスになるのかをみてみましょう。
この時に大事にするのは「ユーザー目線」です。忘れがちになるところですがユーザー目線というのがとても大事なものですので、改めて確認をしてから作業してみることをおすすめします。
優先順位の高い物から配置をしていき、最後はあまり必要のなさそうなものが集まってきたらそれを省いていきましょう。
このような手順で下書きをすすめていきます。
最後に、確認をしてから清書をしていきましょう。
ワイヤーフレームはWebサイト作成をする人すべてがみるものとなります。
そのためミーティングでもワイヤーフレームを使うと思いますので、清書は是非ツールを使ってみることがおすすめです。
手書きで間違いがあっては元も子もありません。しっかりわかりやすいようにツールでワイヤーフレームを完成させておきましょう。
ワイヤーフレームを作るやり方をご説明してきましたが、少しわかってきたでしょうか。
出来上がったワイヤーフレームですが、大切なページが抜け落ちていないかを確認します。また、ワイヤーフレームですが作成するページの基準、注意点をあげてみます。
上記を参考にして、ワイヤーフレームを作るかどうかを決めてみて下さい。
また、スマホレイアウトも作成しておく必要があります。
今ではスマホでの閲覧が一般的になり、情報はスマホから確認することが当たり前となりました。
それだけ大事なスマホ版サイトです。PCだけでなくレイアウトなどちゃんと設定をして見やすいサイトを作っていきましょう。
ワイヤーフレームはどのようなツールを使っても基本的には作ることができます。そのため、関わる人がどのようなツールを使っているのかを調べ、その中で最も多く使われているツールを使うのがいいのではないでしょうか。
良く使っているかと思いますが「Adobe XD」や「CACCO」、「パワーポイント」や「エクセル」も有名です。さらにチーム開発を効率化できる「Figma」もおすすめです。
今回は、こちらの5つを取り上げてご紹介いたします。
Adobe XDは多くのWeb制作会社がワイヤーフレームを作る時に使うツールになっています。
Adobe XDを使うメリットは下記の通り。
このようにクラウド上で共有ができると、複数のユーザーが同時に見ることが可能ですよね。それと同時にフィードバックをもらえるため、ワイヤーフレーム作成と確認が効率よくできます。
デメリットは下記の通りです。
この3点があげられます。
Adobe XDは共有やコメント、デザイン作成にプロトタイプ作成ができることからどのようなものをどこに修正して欲しいかが一発でわかります。そのため、面倒なやりとりは必要なくスピードをもって作業が進むために効率は各段にアップすると言えるでしょう。
CACCOを使うメリットは下記の通りです。
CACOOはワイヤーフレーム作成のための専用ツールです。そのため、ワイヤーフレームで使うボタンや入力フォームなどの素材がたくさんあります。
雛形もあるため、簡単なものであればワイヤーフレームをあっという間に完成させることも可能です。
他には、メンバー共有機能がついています。ワイヤーフレームをしっかり作りこみたいときにぴったりなツールといえるでしょう。
デメリットは下記の通りとなります。
パワーポイントに似ているため、直感的に操作することができます。
無料で使えるのですが、7ページ以上のワイヤーフレームとなったときに有料版を購入する事が必要です。
もし無料版のみで使いたい場合はエクセルやパワーポイントを使ったほうがいいでしょう。
パワーポイントを使うメリットは下記の通りです。
この2点になります。
やはりパワーポイントの魅力は、圧倒的に使っている人が多いということ。そのため使い勝手が良く、作業しやすいでしょう。
また、図形も豊富にあることから直感で作業ができるのも嬉しい機能です。ページは変更をすると横だけでなく縦長のページを作ることもできます。
パワーポイントは情報量が多い時は向いていません。配置する要素が非常に多いことでミスが増えてしまうのです。
パワーポイントも使いやすさだけでなく、作業量にも気をつけて使いたいですね。
エクセルを使うメリットは下記の通りです。
エクセルも多くの人が使っているので、やはり使いやすいと思います。また罫線で区切られているため、線と文字を使って作ることができます。
シンプルにするために「デザインに凝りすぎる」心配はなくていいので安心ですね。
パワーポイントのように図形を自由に入れることが難しく、ホームページ固有の要素である「チェックボックス」や「送信ボタン」などを表現するのが困難かもしれません。
このため、少しのワイヤーフレームを作る人、また作り慣れている人に向いているといえるでしょう。
Figmaを使うメリットは下記の通りです。
ブラウザ上でデザインができるツールのため、場所を問わずチーム全体で制作を進めることが可能です。1つのファイルを複数人で編集することができるので、チーム開発にはうってつけのツールと言えるでしょう。
さらに操作性にも優れており、図名の描写から配置など、直感的に操作することができます。
Figmaは「Photoshop」などのAdobe製品との相性があまり良くなく、連携して制作することができません。
また、出力できる拡張子が「PNG」「JPG」「SVG」「PDF」の4種類しかなく、デフォルトでは「PSD」や「GIF」などの拡張子で出力することはできません。プラグインや外部サービスを活用することで対応できるようになるため、必要であれば導入を検討してみてください。
ここでは、ワイヤーフレームに関連する用語を3つ紹介したいと思います。似ているようにも思えますが、どれも違う意味をもっているので、ワイヤーフレームと比較しながら確認をしていきましょう。
ザインカンプとは「デザインの完成見本」のことをいいます。そのため、クライアントへの提案やメンバーとの共有に欠かせません。
具体的なイメージを共有することができます。
デザインカンプですが「モックアップ」という言葉と混同されやすくなっています。モックアップとは、プロダクトデザインにおける完成模型や試作品のことを言います。
そのため、デザインカンプと同じ意味で使われます。
このようにどちらも「完成版のイメージ」ということで、明確に使い分けることはできないということを頭に入れておくと良いでしょう。
またデザインカンプはデザインの「構成案」や「ワイヤーフレーム」を基に作られます。
構成案やワイヤーフレームで色や画像などが決まっていないものを、デザインカンプで完成までイメージして詳細まで決定していくものとなります。
プロトタイプとは商品やサービスなどの試作品のことを言います。ゲームやソフトウェア開発の初期段階にプロトタイプを作成します。
操作、バランス、機能などを確認し、ユーザーから、実際にリリース前に反映させる開発方法、手法を「プロトタイピング」といいます。
これにより、開発途中でも確認や修正ができることで問題点が早く発見できるというメリットがあります。
プロトタイプは自動車や身近にある製品など様々な分野で作られ、Webサイトやアプリなどでも作成されるようなケースも増えてきています。
ディレクトリマップはサイト全体のページを親子関係をもとに整理をし、エクセルなどの表にまとめたものを言います。
サイトマップに似ているように思えますが、ディレクトリマップは制作陣が確認するものであり、ユーザーは直接利用することはありません。
ディレクトリマップはサイトに必要なページを洗い出し、整理する際に作成するものになります。
ワイヤーフレームはページのレイアウト設計図であり、サイト制作の前半の段階で必要となりますね。
どのような道に進むのかを示すことにより皆で共通認識を持つことが可能となる、それがこのワイヤーフレームになります。
このワイヤーフレームがしっかり作れるかどうかにより、制作会社の優劣を見極めることができる一つの判断基準だと言えます。
それだけ大事なワイヤーフレームです。問題なくワイヤーフレームを作れる制作会社を探し、依頼をするようにしましょう。
ホームページに関することならお気軽にご相談ください
資料請求
ホームページ制作の販促戦略資料と12のチェックリストホームページのパッと見てわかる27の改善ポイント
無料ダウンロードチェックリストと改善リストをチラ見せ！
ホームページ診断
毎月先着2社までは無料で診断。診断・分析し、効果的な運用をアドバイス
補助金を活用したホームページの制作や顧客管理システム（CRM）の導入などに対応しています。
メールでご相談
ホームページに関するご相談をメールフォームから送信いただけます
お電話でご相談
092-791-2108電話受付 10:00〜19:00 定休日 土日祝
お電話でもお気軽にご連絡ください
リクトの運営サイト
092-791-2108
