『12/19(木)ワイヤーフレーム作成ワークショップ/Web制作初心者向け』開催!KROWLイベントレポート!

ワイヤーフレームってどうやって作るの?

インターネットで検索するとたくさん出てくるけど、いざ自分で作ろうと思うと何をどうやって作ればいいのか迷われる方も多いのではないでしょうか。

Webディレクターだけではなく、WebデザイナーやWebエンジニアにとっても大切な資料の1つであるワイヤーフレーム。今回はそんなワイヤーフレームの作成が体験できるワークショップを開催しました!現役Webディレクターが登壇し、架空のクライアントからの要望に応じたLP(ランディングページ)のワイヤーフレームを作成することを目標とし、初心者にもわかりやすい形で実施させていただきました。

本記事では12/19(木) 「Web制作初心者向け」ワイヤーフレーム作成ワークショップのレポートをお届けします。(※発表者の意図が伝わりやすいように、内容を一部編集しています)

登壇者プロフィール 

鈴木 秀典 /Webプロデューサー・Webディレクター

業界未経験からWebディレクターへと転身し、Web制作会社やPR会社などを経験。運用ディレクションおよび制作ディレクションなど、多くのLPサイトのディレクションを担当。フリーランスWebディレクターとして活動する傍ら、自身で印刷製本会社やレンタルスタジオなども経営している。「やらせてもらえる仕事はとにかく何でも全力で取り組む」ということをモットーに、現在では後進のディレクター育成やチームマネジメントも手掛けるマルチプレイヤーとして活躍中。

はじめに

Web制作に関わる方なら、一度は目にするワイヤーフレームですが、実際どうやって作るの?簡単に作れそうで作れない、実はとても奥が深いのがワイヤーフレームです。

ワイヤーフレームは制作フローの中で、「企画・設計」段階で作成します。

このワイヤーフレームですが、グレースケールで作られていることや、要素の並び順には様々な「意図」が組み込まれていることはご存じでしょうか?

また、ワイヤーフレームと似た資料に構成書や修正指示書がありますが、

Web制作未経験の方の中には、その違いを明確に理解できている方はそう多くはないのではないでしょうか。

講座では、ワイヤーフレームを作成する段階で考慮すべき「意図」や、構成書や修正指示書の違いについても、詳しくご紹介いただきました!!

ワイヤーフレームをどのようなツールで作るか、コーポレートサイトのワイヤーフレームの大まかな構成にご興味がある方は、「ワイヤーフレームとは?どうやって作るの?」 の記事をチェックしてみてください!

●ワイヤーフレームとは?どうやって作るの?

ワークショップ

お待ちかねのワークショップでは、架空のクライアントからのお題に対して、LP(ランディングページ)のワイヤーフレームの作成に挑戦しました。

まずは皆さん、「自分の出来る範囲で、全力で!」取りかかりました。

このLPをいつ、誰が、どんなときに、なぜ見てもらいたいか、リアルに想像しながらその場の状況をまとめていきます。(ペルソナ)

次に、LPに必要な要素をピックアップし、並び替えていきます。

「ターゲットはこれでいいのかな?」

「Call To Action(コール トゥ アクション)はどこで入れたらいいのかな」

など、いろいろな質問が飛び交いました。

スムーズにワイヤーフレームの要素を洗い出しできている人もいれば、なかなか思ったように要素を決めきれない方まで様々でした。

皆さん全力で課題に取り組んでいただけていたようです。

ワークの途中でワイヤーフレームを作るための3つの重要なポイントの説明をさせていただきました。

  • このLPはどんな状況の時に見てもらえるか考えること
  • LPに記載する要素の内容が多ければよいわけではないこと
  • Web制作の基本も抑えつつ、コンテンツを大切にすること

このレクチャーを受けた後、多くの参加者の手が動き、最終的にはほとんどの方が、ワイヤーフレームを完成させていました。

講義終了後の質疑応答タイムでは、作成したワイヤーフレームに対するフィードバックもありました!

「こことここの要素を入れ替えると、よりわかりやすくなるかも」

「しっかりユーザの心をつかむ構成になっていますね」

などなど、現場のプロならではの目線で、様々なフィードバックがありました。

まとめ

今回の参加者のうち、すでにWeb制作関係の仕事をしている人とこれからWeb制作の仕事に携わる人の割合はほぼ半々でした。Web制作に携わる人なら、必ず触れる機会があるワイヤーフレームですが、なかなかフィードバックを受ける機会が少ないのが現状です。

関連記事