【Webデザインスクール】クリエイターズファクトリーのグループ制作レポ

こんにちは。４月１日、Webデザインスクール　クリエイターズファクトリーのグループ制作がおわりました。あっという間の１カ月半でした。グループ制作のあるスクールは珍しいと思うので、実際にどんなことをやったのか、どんなことが身に付けられたのかを振り返ってみようと思います。

（はじめに）グループ制作とは

受講生が５～６人のグループとなって、架空のクライアントからヒアリングを行い、１つのWebサイトを作る授業です。実務を想定して学べるカリキュラムですね。

グループ制作の流れ

１．事前アンケート

グループ決めのための事前アンケートがあります。
受講生は、ディレクション、デザイン、コーディング、どの役割をやりたいのか回答し、アンケート結果を元に先生の方でグループ分けがなされます。

２．担当・グループ分け

私のチームは４人で、担当割は次のような感じです。
ディレクター…２人
デザイン担当…３人
コーディング担当…メイン１人＋デザイン担当
私は、ディレクター兼コーディングのメイン担当になりました。

グループ制作ではディレクターをやってみたいなと思っていたので、希望が通ってよかったです。

３．スケジュール、タスクの洗い出し

スケジュール兼タスク管理表をつくりました。４月１日の最終発表をゴール日として、いつまでに、誰が、何をやるかを決めました。大まかなスケジュール配分は以下の通りです。

• 企画コンセプト…1週間

• デザイン制作期間…約2週間

• コーディング期間…約2週間

• サーバーアップ後の調整、最終プレゼン準備…約1週間

４．架空クライアントへのヒアリング

講師の方がクライアント役となって、ヒアリングを行います。
＜今回の架空クライアントと設定＞
キャンプ場の経営者が、新しくWebサイトを作り、集客に活用したいという設定でした。

ちなみに、クライアントからは事前にヒアリングシートが共有されます。このシートには、Webサイトを作りたいと思った経緯、事業内容、サイト制作に関する要望事項が簡単に書かれています。
架空クライアントのヒアリングは、ヒアリングシートだけでは足りない、＋αの情報を聞くために行われます。

私たちのチームは事前に、

• おそらくこんな方向性のサイトがいいのでは？

• こういったことをクライアントは要望しているのでは…？

と仮説を立てつつ、Webサイト制作に必要な質問項目を考え、ヒアリングに臨みました。

５．コンテンツ設計・ワイヤーフレーム作成

ヒアリングした内容を元に、コンテンツ設計とワイヤーフレームを作ります。

• どのような層をターゲットとするのか？

• クライアントのサービスの魅力は何か？

• サービスの魅力をどのように伝えるか？

• どのようなコンテンツ設計にするのか？

• どのような順番で伝えたらユーザーに伝わりやすいか　などなど…

考えることは盛りだくさんです。

各々、ワイヤーフレームを考え、持ち寄りつつ相談しました。
今回のグループ制作のメンバーにはキャンパーがいたので、ユーザー目線も取り入れられたのかな？と思います。

６．デザイン制作

ワイヤーフレームを元にデザインチームでデザイン制作を行います。
私のグループではデザイン案は２種類作ることとし、

担当はTOPページデザイン…２名、下層ページのデザイン…１名で、分担することにしました。下層ページのデザインを担当するメンバーはTOPページの方向性がある程度決まってから着手します。

デザインルールとしては、「ユーザーに伝えたい方向性がずれないように」ということだけを決め、自由にTOPデザインの制作を進めてもらいました。

原則として各チームのデザインのフィードバックは、先生が行います。
（メンバーがダメ出しをするとチームの雰囲気が悪くなるかららしいです）

７．コーディング

事前にグループでコーディングルールを決め、ルールを共有したうえでコーディングを行います。

ルールとしては、

• class名の命名規則

• Base.cssには何を入れるか

• 余白はどのようにつけるか　などです。

ルールが決まれば、デザインを元にコーディングを進めていきます。

• デザインカンプに指示がないものや（ワイドビューになったときにどうするか）

• デザインがPC版のみで、レスポンシブ時のデザインが想像できないもの

• 中間サイズが崩れてしまい調整が必要な箇所など…

これらはデザイナー担当に確認して進めます。

デザインのうち1案については、発表の１週間前に一通りコーディングを終えることができました。また、下層ページについては、ほぼ共通のデザインだったため、２案目の下層ページのコーディングは１日かからず終わりました。レイアウトはほぼ同じにも関わらず、素材と配色だけでガラリと雰囲気を変えたZさんのセンスは恐ろしいです。

８．サーバーアップロード＆チェック

コーディングしたデータをサーバーにアップロードします。
これはスムーズにできました。コーディングしたデータに不備がないか、デザイン担当の方にチェックしてもらいました。

• htmlのheadに必要な情報がきちんとはいっているか？

• デザインはおかしくないか？

• 画面崩れはないか？

• リンク切れはないか？

• 各ブラウザやデバイスの挙動でおかしいところはないか？　などです。

クリエイターズファクトリーから共有されたチェックリストを＋で加筆して、コーディングチェックリストをつくり、共有しました。チェック担当の方がかなりしっかりみてくれたおかげで、無事に発表を迎えられそうです。

９．発表・フィードバック

発表です。事前に役割分担を決め、リハーサルしたうえで臨みました。これですべてのカリキュラムが修了です！おつかれさまでした！
クライアント役の先生からもフィードバックがあったのですが、
「お客さんの要望を鵜呑みにするのではなく、ユーザー目線で設計できるかどうかが大事だ」とおっしゃっていたのが印象的でした。

グループ制作で意識したこと

＜ディレクション編＞

全体を見渡す
タスク管理表を元に、どの作業が終わっていないか、どこが遅れそうかを把握するようにしました。また、遅れが生じる場合、どのようにフォローすべきかを意識するようにしました。
丁度年度末なので、仕事が忙しいメンバーはお疲れ様でした…。

できる限り、誰が何をやるかを明確に
役割があいまいだと、だれも手を付けていない状態が発生するので、○○さんお願いします！というようにしました。＋作業の抜け漏れを防ぐためにできる限りタスクを可視化するようにしました。

打ち合わせの前は、資料のたたき台を作る
ゼロベースで話すよりも、たたき台があったほうが話しやすいかなあと思ったので、打ち合わせの次第を用意したり、資料のたたき台（例：ワイヤーフレームの素案など）を作るようにしました。

＜デザイン編＞

XDのレイヤーは整理整頓
私は１ページだけデザインを担当し、最終調整を別のメンバーに依頼しました。引き渡しにあたっては、
素材・データがグループ化されていること、
レイヤーに名前をついていること
これらを確認したうえで引き渡しました。
（レイヤーは綺麗な方が嬉しいですからね…。）

＜コーディング編＞

コーディングの事前準備
グループ制作で使いそうなjQueryを調べておいたり、スニペットをつくっておいたのがとても役立ちました！概ねスムーズにいきました。

他の人も作業しやすいコーディング
一部ページはコーディングの途中で、他のメンバーに引き継ぎました。自分以外でも作業しやすい、引き継げるように、

• できる限りhtmlをきれいにする
  （例：構造を意識する。疑似要素を上手く使ってすっきりさせる。）

• コメントを入れてわかりやすくする

• CSSCombを使って、CSSをきれいに並び替える
  といった点を意識しました。

グループ制作で学べたこと

コミュニケーションの仕方を考えるきっかけになった

• 伝わりやすい表現は？

• どのようにお願いの仕方なら気持ちよく作業ができるか？

• ほかの人の作業負荷がかからないために工夫できる点は？

自分ではできているつもりでも、実際上手くできてなかったりと反省することも沢山ありました。もっと工夫したり、配慮しなければと感じました…。一方、「メンバーのこの指示の出し方わかりやすいな～」「この説明いいなあ～」などと感じる部分も多く、良い点はどんどん真似していきたいと思いました。

1人でできることには限りがある

前職は人手不足の部署に配属されることも多かったため、私には何でもかんでも一人でやってしまう癖がついていました。もし自分一人で作業していたら、このサイトは絶対につくれなかったなあと。
…メンバーの頑張りは、しれっと自分の手柄にします！←

まとめ

仕事の進め方やコミュニケーションの取り方など、一人では学べないことをたくさん学べました。それからWeb制作は楽しいなと純粋に実感できたのでよかったです。
これからも精進していきます。