ディレクターの秦野です。ギアエイトではディレクター10名がスキルアップを目的として、毎月1回実践形式で勉強会を実施しています、その名も「TERAKOYA8」。今回はその4回目。ディレクター北川が講師を務める「ワイヤーフレーム編」が行われました！
TERAKOYA 8スタート
とある金曜日の午後、13時スタートのこの研修会。各ディレクターは通常業務をやりくりして半日はこの勉強会でスキルアップを目指します。今回は「ワイヤーフレームで視覚的に明らかにするべき事」から「CMS仕様のドキュメントを作成する」ところまでを目指していざスタートです。
まずはその目的の説明とタイムスケジュールなどが講師役の北川から。勉強会とはいえ、いつもながらスタートは緊張感が走ります。
そしていよいよお題の発表。実践形式で各ディレクターのスキルアップを目指しているので、今回も実際のクライアント様のブランドサイト、そのワイヤーフレームを作成するというお題が発表されました。
今回使用するツールは「Figma」オンリー。Figmaの操作にまだ、おぼつかないスタッフもチラホラといて、本当に時間内に全ての作業が完了するのか？という雰囲気のなか、TERAKOYA8恒例のタイムアタックが始まりました。
各自が自分のPCに向かいワイヤーフレーム作成開始
まずは15:00までの1.5時間を使い、クライアントの背景理解から、サイトの仕様・ターゲット等を掘り下げて、各自ワイヤーフレームに作成に取組みます。まずはザっと一通り作成するディレクターや、上から丁寧に作りこむディレクター等、人それぞれ。黙々と時間までワイヤーフレーム作成を進めました。
一旦、15時に全員集合。その場で進捗の確認をして、次のステップ「ワイヤーフレームに説明をつける」「プレビューの作成」「CMS仕様の作成」の説明がありました。が、しかし。。時間が足りません。。「説明をつけるにも、そのワイヤーフレームがまだできていません（泣」という声が多数、、時間の延長が告げれらました。
この後、それぞれのディレクターが自分のワイヤーフレームを説明するので17時がリミットです。
あっという間の発表タイム
17時を迎え強制的に発表タイムスタート！限られた時間の中で作成するのもスキルの一つです。
各ディレクターの発表と先輩ディレクターからのフィードバック。なかなか実践ではみんなからの意見をもらう時間がありません。とても貴重な時間となりました。
TERAKOYA8「ワイヤーフレーム編」を終えて、各ディレクターは自分なりの振り返りをして、今回の研修は終了となりました。振り返りをいくつか紹介です。
各ディレクター振り返り
プロトタイプまで実際に発表できた沖田は、その発表方法についての反省点を。作ったワイヤーフレームをきちんとクライアントさんに伝えるために、丁寧に効果や意図を説明するように心がけるそうです。
脱XDの覚悟ができたという梅木。次回はFigmaを使いこなし、クライアントの実現したいアイデアを盛り込んだモックアップの作成を宣言しました。
最近、ワイヤーフレームを実践することも多い岩田。文字ベース→手書き→Figmaで整形する進め方と実際のサイズ感を意識した作成、そしてクライアントさんだけでなく、デザイナーさんとも、自分で作成したワイヤーフレームでスムーズなコミュニケーションを目指すそうです。
ワイヤーフレームを作る前にそのクライアントさんの企業理解が重要と再認識したという石岡。次回は相手の立場を考えて、インタラクションを交えて魅力的な見せ方も意識したいという事でした。
今回、初参戦となる渡邊（明。2月からジョインしたばかりですが、右も左もわからぬままの参加となりました。他のディレクターの手法をいろいろと知ることができた様子で、今後は参考サイトをたくさん見て、ワイヤーフレームづくりに役立てたいと感じたようです。
「自分らしさ」を自分なりに演出できたという石塚（亜。デザイナーさんが作りやすいワイヤーフレームを心がけるという点と、ワイヤーフレームからサイト作成だけでなく運用を視野に入れたスタンスを学んだようです。
エンジニアとして活躍もする石塚（俊。今回は、仮ワイヤーをそのままFigmaで起こしただけになったと反省しきり。今度はもっと面白いコンテンツを考えたいと、次につながる学びができたようです。
最後にまとめ
そして最後に私、秦野の気づきをまとめました。
①まずは手書きで
代表水野からみんなにワイヤーフレーム作成のコツとして伝授された「まずは手書きで」。Figmaを筆頭に数多くのワイヤーフレーム作成ツールがありますが、そのようなツールでいきなり作成をスタートしない。まずは手書きで構成を組み立てることが大事だと気づきました。ツールを使うと、細かい部分の修正などが簡単できるので、ついつい細部までこだわってしまいます。それは時間の無駄。まずは頭の中を手書きで書きだして構成を作成してその後ツールをつかうのが良いのではと思いました。
②事前に「シナリオ」を組み立てること
ディレクター待島からのアドバイス。まずはワイヤーフレーム作成前に要件を整理して、「シナリオ」を組み立てると、その後がスムーズだと思います。「誰が」、「いつ」、「どのような目的で」、「どんな方法で」このサイトにアクセスするのか？それをディレクターが考えて、シナリオを組み立てる。ただ単に、「綺麗なデザイン」「見栄えのいい画像」を使い、カッコいいワイヤーフレーム作るのではなく、WEBサイトを使う、ユーザーの事をイメージして、シナリオ作成する事が必要です。
③時には想定される写真を入れてみる
ワイヤーフレームを作るとき、ロゴ以外の写真はあまり入れないようにしてました。理由としては、入れてしまうと、デザイナーさんに変な思い込みを与えてしまうのでは？と思っていたからです。そこで、講師役の北川から実践的なアドバイス。ワイヤーフレーム作成の段階で想定される「写真」を入れてみるのも一つの方法だとの事。その後、デザイナーさんにお願いする時には、写真の明度を落とすなどしてあまり余計なイメージを与えないようにする事もできます。そうすると、いざ写真が入ったデザインが上がってきて、「なんか違う。。」が防げそうです。
最後にまとめなど
「デザインセンスがあまりないのに、文字間とかバランスとか細かく指示したワイヤーフレームを作成するのは良いのか？プロのデザイナーさんに任せた方が良いのでは？」と思っておりました。しかし、今回、TERAKOYA8で他のディレクターの作成方法や考え方を学べて、なんとなくわかったような気がします。ワイヤーフレームではサイトの基礎構造をデザイナーさんに伝えるために、そのために細かく丁寧にする必要があるのではないかと思います。
ディレクターとデザイナーさん（時にはエンジニアさん）との大きな違いは「お客さん（クライアントさん）と実際に話しているのか？」という点です。お客さんと作成するWEBサイトについて、いろいろと話して、その要望を聞いて、ターゲットのペルソナを設定した後にワイヤーフレームを作成する。その際に調整する「文字間」というのは、デザイン的に優れているかではなく、クライアント（その先のターゲット）が求める「文字間」なのではと思いました。
次回は
3月は一回お休みをして、次回は4月。「デザイン提案〜デザイナーへのフィードバック〜決め切る」が予定されております。追ってまたレポートしたいと思います。
