WEB・アプリの設計図。>ブログトップ>WEB・アプリの設計図。設計図WEB・アプリの設計図。ワイヤーフレームとは?以前、WEBやアプリの制作フローについて取り上げたことがありますが、それぞれのフェーズで、どうやったらスムーズに制作がすすんでいくのでしょうか。一通りの流れはつかんだけど、なにから手をつければいいのかわからない、という意見も耳にします。デザインをおこなう際、まず取りかかるのは、どんなことが頭に浮かぶでしょうか。一般的に、いきなり作りこむということは、行いません。ワイヤーフレームを作成していきます。ワイヤーフレームは、本格的な設計図をつくるために、役立つツールです。デザインを依頼する際に、かかせません。今回は、ワイヤーフレームとは、どんなツールで、どのようにしてデザインをおこしていくのか、紹介していきます。■ワイヤーフレームとはワイヤーフレームとはワイヤーフレームとは、デザインを可視化させる下書きのようなものです。一言でいえば、「サイトの設計図」になります。WEB・アプリの画面に「なにを」「どこに」「どのように」配置するのかを決めていくことが可能です。「なにを」・・・ロゴ/タグライン/メニュー構成/コンテンツ/検索BOXなど「どこに」・・・ヘッダー/フッター/ボディ/サイドバー/ナビゲーションなど「どのように」・・・段組み設定/リンク集/画面仕様などなどがあげられます。WEB・アプリ全体の設計を、ワイヤーフレームによって、プロジェクトのメンバー・関係者で共有することができます。機能や要素の過不足をチェックしあえることも容易です。コミュニケーションツールとして活用できるということです。ワイヤーフレームをつくるポイントワイヤーフレームをつくる上で、もっとも心がけたいことは、ユーザーが検索体験をしやすい設計にすることです。ユーザーにとって使いにくいサイトはNG。ユーザーに伝えたい情報や、とってもらいたい行動がわかりやすいことも大切です。そのために、順番を決めてすすめると、設計がうまくいきます。「ゴール設定」→「掲載する情報・要素をピックアップ」→「グルーピング」→「優先順位付け」→「レイアウト決め」という流れです。つめすぎると、ユーザーが迷子になります。WEB・アプリ全体のコンセプト・ゴールをはっきりさせ、各ページのテーマを明確にしていきます。「掲載する情報・要素をピックアップ」・・・まず、ワイヤーフレームに配置する情報・要素を、洗い出していきます。サービス概要」「バナー」「ブログ」「電話番号」「クーポン」など。「グルーピング」・・・ピックアップしたコンテンツを、同じグループにわけていきます。同じグループでも、画像や動画、文章、コピーライトなど、いろいろ掲載方法があります。なにを目立たせたいか、考えてみましょう。「優先順位付け」・・・グルーピングした情報に、優先順位をつけていきます。優先順位が高い順に「どこに」配置していくのか、決めていきます。人の視線は、左から右に移動するので、目の動きにもあわせて、配置をします。「レイアウト決め」・・・まとめた情報の質と量に、適切なレイアウトを選択します。レイアウトは、カラムともいいますが、その種類は、パソコンやスマートフォンによって、多種多様です。カラムについては、弊社ブログ「ライトボックスってなに?WEBのパーツに関するデザイン用語」(参照元:https://www.selva-i.co.jp/blog/archives/2471)でも、少し紹介しているので、参考にしてください。KITS」(参照元:http://uxkits.com/)があります。充実したモジュールが用意されています。■ワイヤーフレーム作成ツールレイアウトが決まれば、実際に作成していきましょう。さいごに、作成するツールを紹介します。マニュアル(紙とペン)いわゆる手書きですが、ワイヤーフレームには有効です。BROWSER」(参照元:http://www.raincreativelab.com/paperbrowser/)をはじめ、サイト上では、テンプレートも豊富にそろっています。オフラインツールOffice系では、PowerPointを推奨します。ソフトウェアを使用している人が多いため、共有しやすいツールです。IllustratorやPhotoshop、Fireworksでも作成できるので、使い慣れているツールを選んでください。オンラインツールオンラインのツールは充実しています。雛形が用意されていて、ドラッグ&ドロップで簡単に作成できるのが、オンラインツールの魅力です。マニュアルで下書きをして、オンラインツールで清書して完成させてもよいでしょう。いくつか有名なサイトを紹介します。「Cacoo」・・・25ページまで無料で作成可能。日本語サイトで使いやいツールです。「Moqups」・・・25万人が利用しているツールで、2プロジェクトまで無料です。ワイヤーフレーム内でリンクを設置ができるなど高機能。「Vectr」・・・ワイヤーフレームをオンラインで共有でき、シェアした人も修正が可能。サイズをpx(ピクセル)、cm(センチメートル)、pt(ポイント)と切り替えられるのが便利です。【引用:https://vectr.com/】まとめWEB・アプリの設計図。■WEB・アプリの画面に「なにを」「どこに」「どのように」配置するのかを決めていくことが可能。■プロジェクトのメンバー・関係者で、コミュニケーションツールとして活用できる。■ユーザーが検索体験をしやすい設計にすることが大切。→「レイアウト決め」の順番で作成する。BROWSER)■オフラインツール(PowerPoint・Illustrator・Photoshop・Fireworks)■オンラインツール(Cacco・Moqups・Vectr)※下記ボックスにコメントすると、あなたのタイムラインに本記事へのリンクが投稿されます。※下記ボックスにコメントすると、あなたのタイムラインに本記事へのリンクが投稿されます。https://www.selva-i.co.jp/blog/archives/3296WEB・アプリの設計図。ワイヤーフレームとは?https://www.selva-i.co.jp/blog/archives/3296WEB・アプリの設計図。ワイヤーフレームとは?https://www.selva-i.co.jp/blog/archives/3296WEB・アプリの設計図。ワイヤーフレームとは?https://www.selva-i.co.jp/blog/archives/3296WEB・アプリの設計図。博登1980年・大阪生まれ、大阪育ち。立命館大学を卒業後、新卒でヤフー(株)に入社。1年後に中山(代表取締役)と共に(株)セルバを起業。見た目は営業、実態は「利益を出すこと」に徹底的にこだわるグロースハッカー。費用を掛けず、いかにサイトの成果を上げられるのか、日々研究&実践している。プライベートの趣味は旅行・バスケ・映画鑑賞。記事一覧セルバではWEBシステム開発からスマートフォンアプリ開発、デザイン、企画/マーケティングまでいかにコストを掛けず、成果を高めるのか研究し実践しています。企業、店舗のWEBシステム/アプリ開発のお手伝いさせていただいておりますので「WEBシステムの開発」「アプリ開発を依頼したい」「既存サイトのアプリ化」「サイト/アプリからの集客を増やしたい」など新規開発やリニューアルにご興味のある方は、ご相談だけでも構いませんのでお気軽にお問い合わせください。サイト構築の際の施策2019.05.292030年で78万人エンジニア不足どう乗り切る?IT系求人サイトの施策とは2019.05.28株式会社セルバツールスワイプ、ピンチイン、ピンチアウト。サイト制作ソーシャルメディアFacebooktwitterLINEその他のメディアアプリポータルサイトECサイトトレンドマーケティングキャンペーン事例ツールSEOTips求人サイト。