2017年9月30日（土）ベルサール神田 イベントホールで開催したCSS Nite LP53「ワイヤーフレームとビジュアルデザインの間の暗くて深い闇」のフォローアップとして、田島 ちはるさん（HUMORE）の『人を巻き込むワイヤーフレーム活用術 ー4つの活用法と問題の本質ー』セッションのスライドなどを公開します。
フォローアップメッセージは、イベント開催直後（2017年10月）の時点のものです。
メッセージ
1番目のセッションを担当した、田島ちはるです。ご参加いただきました皆さまに改めて感謝申し上げます。
私からはワイヤーフレームの役割を改めて整理し、活用法や今回の「闇」の原因の分析についてお話しました。
基本的な内容も多くなりましたが「作る前の相談や途中のすり合わせが無い」と、悩む声に応えたく、ヒアリングをもとに取り組みました。現在のワークフローに事前相談やすり合わせがない等、お悩みがあれば、ぜひスライドを改善のきっかけに使ってください。
制作と人の間で物事をスムーズに進める際の活用法を、解りやすく、使いやすく…と、心がけました。
お役に立てれば幸いです。
アンケートでの質問への回答
大型サイトの場合はどこまでワイヤーフレームを作りますか？
大規模サイトの場合どうしますか？
大規模（大型）サイトの場合は、サイトマップを作る段階で必要な機能・内容を洗い出します。そこから「固定のページ」と「テンプレートページ」に分けて洗い出します。
「テンプレートページ」のワイヤーフレームは、クライアントサイドとすり合わせながら、平均、最大、最小の情報量で3パターンを出して最終的な確認をとり、デザイナーに割り振ります。
「固定のページ」「テンプレートページ」ともに、セッションでお話した「クライアントの意見を引き出す工程」をすり合わせも兼ねて何度か行い、確認をとって進めます。
また、修正量が多そうな時はツールで作ります。デザインに続けることを踏まえてイラストレーターで作成することが多いです。
大規模サイトは後々、成長や変化が起きるものなので、完成後はパーツを使い分けれるようにスタイルガイドの用意を見越して進めてます。
イメージボードで納得いただくために、どう説明しますか？
イメージボードを提示する際に「ユーザーに何を伝えたいか、ユーザーは何を求めているか」という理由もあわせてデザインの説明をします。
例えば、コーポレートの理念とロゴに合わせ色やテイストを示す、製品など重要な部分を引き立たせるため、周囲をシンプルにする…など。
切り口に合わせて2~3パターン出し、そこからすり合わせます。
チームビルディングはどうしてますか？
チームメンバーの意見を聞くことや、個人の業務、価値観の理解を大切にしています。実際に自分でコーディングを行ってみたり、業務内容を細かく教えてもらいながら、どうしたらチームのメンバーが心地よく仕事できるのか考え、プロジェクトのゴールに向かいます。
方向性を示してプロジェクトを引っ張っていくことは大前提ですが、一緒に制作物を作り上げてくれるチームのフォローで走り回ることも、とても大切にしています。
お知らせ
- 11/28（火） Adobe MAX Japan 2017のBREAKOUT SESSIONSに株式会社SCREENグラフィックソリューションズの松久さんと登壇します。ぜひご参加ください。タイトルは【「webと一緒に紙媒体も頼まれた！」 さぁどうする？ - やさしく始めるwebデザイナーのための印刷講座】です。
- Adobe MAX Japan 2017
ベストセッション2019
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。
