Webサイト制作には、実はたくさんの工程が存在します。 「ワイヤーフレーム」の作成は、その一つです。

ワイヤーフレームは、Webサイト制作に関わっている人しか聞かない単語かもしれませんが、使いやすいWebサイトを制作するにおいて欠かせない要素です。 今回は、この「ワイヤーフレーム」について、弊社で制作する際のこだわりや特長について紹介します。

 

セレンデックでのWebサイト制作の流れ

まずは、弊社でのWebサイト制作の流れを大まかにご紹介します。

• ヒアリング
• ターゲット選定
• コンセプト作成（目的、Webサイト制作方針、など）
• Webサイト構成作成
• ワイヤーフレーム作成
• デザイン作成
• コーディング、CMS化

実際には、それぞれの項目の間に細かくたくさんの作業があります。 詳しくはこちらをご覧ください。Webサイト制作、Web集客の総合サポート（https://www.serendec.co.jp/wp/service/web_marketing/）

 

ワイヤーフレームとは

ワイヤーフレームとは、Webサイト制作には欠かすことのできない、Webサイトの基礎となるレイアウトを定める設計図のことを言います。 Web制作の現場では「ワイヤー」と呼んだり「WF」と略したりします。

ワイヤーフレームは、「各ページのどこに何を配置するのか」を明確に分かるように制作されます。 それによって、足りていない要素や不要な要素、視線誘導などを事前にチェックすることができ、完成が大まかにイメージできます。 デザインを作りこむ前にワイヤーフレームで必要な性能を設置しておくことで、使いやすい、且つビジュアルのよいWebサイトになります。

ワイヤーフレーム作成は、弊社でも力を入れて作成している工程です。 よく、Webサイト制作では、いきなりデザインを作成すると思われがちですが、実はこのワイヤーフレームがないと進めることができません。

例えばですが、住宅を作る際にはまず設計図を作成して、その後実際に建築に取り掛かるはずです。 「とりあえず家を作ってみてから、配置を微調整しよう」とはなりませんよね。

Webサイトも同様で、まずは設計図が必要になります。 しかし、一般的に大体のお客様は見た目を確認してから内容を決めたいと考えがちです。「早くデザインを見たい、デザインをみてから決めたい」という希望をよくいただきますが、実際にWebサイトの要となるのは設計図です。

• どのような意図・目的があるのか
• どのデバイスを使うのか
• どんな状況で、どうようにページを閲覧するか

このように、ユーザーの使用するであろう状況を想定し、それぞれの素材の配置を決める設計図を作ることで、デザイン制作へ進めることができます。

また、ユーザー側だけでなく、「サイト運営側の目的（サイトの目的）達成のためにはどうすればよいか」などを考慮して作成していきます。 この設計図こそが、「ワイヤーフレーム」です。

 

セレンデックのワイヤーフレーム

コンセプトや商品などに合わせた見やすい、ユーザーが迷わず目的にたどりつける設計（UI）

クライアント様からの希望だけでなく、コンセプトや商品のお勧めの仕方などを意識してWebサイト制作を行います。 ワイヤーフレームを作成することで、ヴィジュアルデザインに気を取られることなく配置や使い勝手に注目することができます。

ユーザーにとって使いやすい設計になっているか、ワイヤーフレームで作成・チェックします。

効果のあるWEBサイト（SEO）

Webサイトは、ユーザーに見てもらわないことには意味がありません。 そのため、検索されやすいWebサイトであることが重要です。

• 画像
• リンクの配置
• HTML構造
• どこにどの程度のテキストを何文字くらい配置するか

上記のようなSEOを意識した内容を、ワイヤーフレーム制作の時点から設計しています。

CMSを意識した設計

弊社では、現場にあわせた「最適なCMS機能」をご提案、カスタマイズして納品しております。 Webサイトが完成した後、実際に運営担当者さんがサイト更新に掛けることができるリソースやWebのスキル、社内の運営体制をしっかりとヒアリングさせていただき、最適なものをご提案します。

多くがWP（WordPress）になりますが、案件内容によってはMT（Movable Type）やオジリナルCMS（スクラッチ開発）などもあります。

CMSとワイヤーフレームに関する内容はこちらをご覧ください。 「CMS構造、Webサイト運営」を意識した「Webデザインとページ設計」

スマートフォンに対応

企業間取引（BtoB)はまだまだパソコンでの閲覧が多いですが、一般消費者の取引（BtoC、CtoC）はWebサイトにもよりますが、スマートフォンでの閲覧需要が圧倒的に多くなっています。 そのため、スマートフォンでの見え方を意識したWebサイト設計にすることが大切です。

弊社ではWebサイト制作の際に、「メニューの位置」「リンクボタン」などを、スマートフォン版で重要な点を意識してワイヤーフレームを制作しております。 需要の大きいスマートフォンを意識した設計をすることで、より多くのPVにつながります。

 

ワイヤーフレームをプロトタイプで確認

ワイヤーフレームの書き方は、手書きで書いてからパワーポイントで作成したり、大体のイメージをまとめてからアプリで作成したりと様々です。 弊社では、出来上がったワイヤーフレームを、デモンストレーションや検証ができるようプロトタイプとして活用しております。

プロトタイプとは、「商品やサービスの試作品」のことを言い、ワイヤーフレームの場合は作成したワイヤーフレームを実際のWebサイトのように表示することを言います。 ワイヤーフレームの場合は以下のようなツールを使い、実際のWebサイトに近い形にリンクを設定するなどで、使い勝手を確認します。

 

プロット（https://prottapp.com/ja/） XD（https://www.adobe.com/jp/products/xd/details.html）

完成度の高いワイヤーフレームを用意することで、よりWebページに近い感覚で確認・検証することができます。 サイト制作の初期のワイヤーフレーム作成の段階で、確認・検証を行うことで、後からの修正に比べると工数も減ります。

「急がば廻れ」で、まずはとりあえずデザイン作ってみて確認したい！ ではなく、「ワイヤーフレーム作成 → 確認・検証」の後に「デザイン作成」という工程で進めることで、より早く、そしてより品質の高いWebサイト制作を実現出来ます。 結果的に、全体の開発スピードの短縮、制作費用削減に繋がるメリットがあります。

 

完成度の高いワイヤーフレーム制作

ワイヤーフレームは、きちんと作りこんだWebサイト制作への近道です。 十分に情報を詰めておくことで、必要な情報が欠けてしまったりクライアントの要望が反映されていなかったりというトラブルが減ります。

また、その後の段階に進んだ際に同じ設計図を見て各担当者が作業を進めるため、制作チームのやり取りもスムーズになります。 負担の多い修正作業を減らすことができるので、制作においてとても重要な要素です。 スムーズに制作作業を進めるために、抜けのないワイヤーフレームを作っていくことが大切です。