会員登録するワイヤーフレームのツールをご紹介する記事はいくつもありますが、今回は実際にWeb制作のプロジェクトの中でワイヤーフレームを作って進めていく様子を、『Cacoo』というツールを使ってご紹介していきます。Webディレクターの方、プロダクトオーナーの方は必見です。マインドマップの作成(要件出し)アイディアを絞り出すには、マインドマップが便利です。Caccoにはマインドマップのテンプレートも用意されているので、うまく使ってブレスト(ブレインストーミング)をしましょう。初めは個人で出し尽くすことをオススメします。初めからチームでやると、話がいろんな方面へ向いてしまうので、まとめ難くなってしまうからです。一人でアイディアを出し尽くし、その後チームで集まって、細かな部分に対してブレストを膨らませていくことをオススメします。参考図書:ザ・マインドマップこれを読まずにマインドマップを使っている人の方が多いと思いますが、言わずと知れた名著です。サイトマップの作成(要件整理)サイトマップの構成に沿って、ロジックツリーのようにマインドマップを整理してまとめます。その際、カテゴリーは類似サイト・競合サイトを見ながら進めていくと効率的。カテゴライズしやすくなります。Caccoにはサイトマップのテンプレートもあるのでこれも便利です。スマホ版ワイヤーフレームの作成(機能表現)サイトマップの構成に沿って作成します。CaccoではiPhoneやAndroidのテンプレートがあって便利です。シンプルにしていく作業を先にやった方が良いと思うので、スマホ版から始めることをオススメします。同類のサイトや、狙っているUIや別ジャンルでも似たようなサイトがあれば、参考にしながら作成しましょう。ここでうまくビジュアル化できれば、全体のデザインもほぼ決まってくることになります。PC版の作成(機能表現)PC版のワイヤーフレームも、Cacooにブラウザのテンプレートがあります。スマホ版を作った後にPC版を作ろうとなると、意外にコンテンツが足りなくてスカスカになることが多々あります。レスポンシブで対応するのが最近の流れですが、ワイヤーフレームでは別物という心構えで新たに作成して、後ほどスマホ版との統合を考えて機能やデザインを統一し、レスポンシブ化していくという流れが良いと思います。決定者への外観確認これぐらいのタイミングで決裁者などへ、あらかじめワイヤーフレームの確認をしてもらいましょう。その際に必要なのが「一言添える」こと。Cacooにはファイル共有機能と合わせてチャット機能も実装されているので、決裁者に早めにフィードバックを頼んでおきましょう。編集ができるプラットフォーム内でフィードバックできることがCacooの良いところで、具体的に指示をそのまま得ることもできます。プリントアウト貼り出し(全体像の参加者確認)ここまでがワイヤーフレーム作成の主になります。完成したら、いよいよチームでお披露目です。チームへの共有方法の一例として、各ページをエクスポートして出力し、ホワイトボード等にサイトマップと同じ構成で貼り付け、全体と詳細を見れるようにしましょう。参加者が集まったら、まずは担当者がプレゼンをします。その後、ポストイットなどを渡して、コメントしたい箇所にそれを貼っていってもらう時間を作ります。この時間は、話が散らからないコツです。サイトマップのトップから、貼られたメモにしたがって議論を進めてクリアにしていきます。クリアにしたらホワイトボードにToDoをメモ書きしておき、最後に全体の写真を撮り、議事録とします。必要な場合は、その会の参加者を揃えて写真を撮ることで、そこで議論されたこと、その場にいた人たちとのエビデンスとして残しておきましょう。デザイン・コーディングへあとはコーディングへと移ります。コーディング担当の方へ、その議論で調整された内容を踏まえて指示出しをします(できればコーディング担当の方も、先のブレストの場から参加してもらった方が当事者意識や、リソース把握ができて、後々良いです)。まとめ今回はワイヤーフレームの一例として、Cacooを使ったWeb制作の進め方をご紹介しました。今回紹介しきれていない機能もCaccoにはありますが、無料版をまずは使ってみて、ご自分のチームの運用に合うかをご検討ください。導入コストはCacooに限らず、いずれのツールでもかかってきますので、チーム運用に適うかの観点でまずは検討されることをオススメいたします。このニュースを読んだあなたにオススメ改めて知っておきたい、一般的なWebサイトのレイアウト6種類を解説Webデザインに役立つ無料のツール・デザイン集まとめこれだけ読めば大丈夫!デザインの基礎が学べる厳選5記事このニュースに関連するカリキュラムLPOとはランディングページとはユーザーが最初に見るホームページのことです。そのページは第一印象であり、その後のユーザーの行動にも大きく影響することは必至です。optimization)といいます。サイトマップサイトマップとは、ホームページの中にあるページ構成を一目見て分かるようにした、目次のような案内ページのことを指します。ホームページ内にある全てのページへのリンクが一覧になっていることが多いです。訪問した人でも、どこに何があるのかがすぐに分かるようにすることを目的として作成されます。詳しく見るロジックツリーロジックツリーとは、物事を論理的に細分化し、思考を整理する為の、ツリー状の図のことを言います。詳しく見るサイトマップサイトマップとは、ホームページの中にあるページ構成を一目見て分かるようにした、目次のような案内ページのことを指します。ホームページ内にある全てのページへのリンクが一覧になっていることが多いです。訪問した人でも、どこに何があるのかがすぐに分かるようにすることを目的として作成されます。OSとはスマートフォン用に開発された基本ソフト(OS)の一種です。米国Google社が中心となり開発されました。Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。詳しく見るコンテンツコンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。CD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るサイトマップサイトマップとは、ホームページの中にあるページ構成を一目見て分かるようにした、目次のような案内ページのことを指します。ホームページ内にある全てのページへのリンクが一覧になっていることが多いです。訪問した人でも、どこに何があるのかがすぐに分かるようにすることを目的として作成されます。詳しく見るサイトマップサイトマップとは、ホームページの中にあるページ構成を一目見て分かるようにした、目次のような案内ページのことを指します。ホームページ内にある全てのページへのリンクが一覧になっていることが多いです。訪問した人でも、どこに何があるのかがすぐに分かるようにすることを目的として作成されます。会員登録するおすすめ記事ADビジネスビジネスチャットだけでは限界かも......。会社の“成長期”に改めて考えたい情報共有の仕組みビジネスADマーケティングオートメーション(MA)「Pardotユーザー会」参加者が、Pardot創業者と語る。参加者同士の“深い”つながりから生まれる価値とはマーケティングオートメーション(MA)ADマーケティングオートメーション(MA)伝達から会話の時代へ。株式会社SoLabo「0→1」「1→10」がどちらも叶う。株式会社ベーシック【求人】サービス価値を高め市場を創造。編集部厳選!最新情報をお届けもう一度読みたい記事をブックマーク実務に役立つ資料をダウンロード無料会員登録会員ログインこの記事を書いたライターferret編集部ferret編集メンバーが不定期で更新します。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。PIECE』を超える異例の売上。解説】WordPress(ワードプレス)サイトにRSSボタンを設置する方法Webサイト制作でよくある失敗例5選。プロのディレクターが教える処方箋とはWeb担当者が陥りがちなサイト運営の行き詰まり。人気記事をもれなくチェックSNSで話題!BtoBビジネスで勝てるマーティングのノウハウを1冊の資料にまとめました。