WEBデザインスクールでチーム制作に参加してみた。
私が通学していたWEBデザインスクール「クリエイターズファクトリー」では５ヶ月の授業があり、後半の約1ヶ月半は「チーム制作」の期間となります。
6月末にチーム制作を終えたので（先週打ち上げを開催しました🍺）、内容や学びを振り返ろうと思います。
（実際のデザインはnote末尾に記載。目次から飛べます。）
チーム制作とは
受講生3~4人でグループを作り、実案件に近い形でホームページ作成、提案書作成、プレゼン発表を行います。もちろん、納期も決まっています。
受講生は希望を出し、講師よりディレクター、コーダー、デザイナーと役割分担していただきます。
私は3人組のチームで、ディレクターとデザイナーを兼任しました。結果的にはコーディングも携わりましたので、制作の大部分に関われて非常に貴重な経験ができました。
ちなみに、ディレクターもデザイナーも自ら希望を出しました。
目指しているデザイナーだけでなく、チームでのディレクションという立場を、実際に働く前に経験できることはそうそうないと思ったからです。
チーム制作の流れ
まずこちらが、全体の流れの管理に使用したスプレットシートです。
実際は担当分けも記載しています。
概要をざっくり説明します。
1.ヒヤリング
テーマに合わせたサイト作成にあたり、講師をクライアントに見立ててヒヤリングを行います。
今回のテーマは「ゲストハウス」。事前にいただいた基本情報をもとに、追加で聞きたい内容を事前にチームで洗い出し、ヒヤリングに挑みます。
2.サイト設計
ヒヤリング内容をもとに、サイト設計とワイヤーフレームを作成します。
・どんなターゲットが適切か。ペルソナ設定は？
・提供サービスのコンセプトは？
・クライアントが達成したいゴールは？
・ゴールに対する動線は？
・クライアントの強みは？
まずここを明確にしないと、サイト作成に辿り着きません。
必要なコンテンツを検討し、ワイヤーフレームを作成します。
今回のゲストハウスは「既に海外顧客からの需要はあるが、国内利用客を増やしたい。」という要望がありました。
ヒヤリングの中で、なぜ国内客も増やしたいのか？を追求すると、クライアントの過去の留学経験から「国内でも海外文化交流できる場所を作りたい」という想いを見つけることができました。
今後の展望としても「海外と日本を繋ぐ架け橋となる環境を展開していきたい」と掲げられており、ただの宿泊施設でなく、
気軽に海外交流ができる拠点として展開したい＝国内利用客を増やしたい
であると考えました！
そこで私たちはコンセプトを「ここから始まる、世界との架け橋。」と設定しました。
3.デザイン
設計が固まり、ようやくデザインに移ります。
チームにデザイナーが2人いたので、TOPページのデザイン案を１つずつ作成しました。ペルソナを2人決め、私はAさん、もう1人はBさんをよりターゲットにしたデザインとしました。
フィードバックは講師より随時いただけます。
デザインの間手持ち無沙汰にならないよう、コーダーには発表資料を準備してもらいました。（※発表については後述）
また期間も限られていたので、私たちのチームはサイト設計と同時並行でデザインのリサーチも行っていました。
設計段階であがったコンセプトや印象（親しみ、清潔感など）をもとに、ギャラリーサイトなどをリサーチします。
リサーチは全員で行い、共有しました。他のメンバーの参考サイトがなければ、私のデザイン案は出来ていませんでした。
4.中間発表
講師の前で15分間のプレゼン発表を行います。
プレゼン資料にはデザイン案だけでなく、サイトの目的やゴール、根拠となる市場調査のデータも盛り込みました。提案の前提条件ですね。
デザインの説明では「背景を黄色にしました」など見てわかることではなく、意図を伝える必要があります。「ここはコンセプトを反映しこのデザインにした」「ここは視線誘導を考えこうした」といった感じです。
TOPページのデザイン案は私のA案を採用いただき、ここからA案の下層ページのデザインと、コーディングに移ります。
5.コーディング
コーダーにTOPページや共通パーツを作成いただき、それを受け取って私たちデザイナーも下層ページのコーディングを行いました。
レスポンシブ対応も行います。
質問対応やフィードバックは講師に随時いただけます。
6.サーバーアップ、チェック
出来上がったデータをサーバーへアップロードし、画面崩れやボタンの遷移が正しいかなど、メンバーで確認します。
7.最終発表
中間発表に肉付けした内容です。
講師だけでなく、オンラインも繋ぎ、受講生・卒業生の方々の前でも発表します。
意識したこと
▼ディレクション
・納期
私が最も意識したことは、納期です。
前述したスプレッドシートの流れをもとに、「中間発表」「最終発表」と、決まった日付から逆算してどうスケジュールを進めていくかは常に念頭に置いていました。
納期に間に合うか把握のため、作業日報や次の作業予定の共有など、チームで作業を透明化することも心がけました。
・共有メモに残す
週に1回の授業（講師から流れの共有や確認、チームでの打ち合わせを実施）と、週に1回のチーム定例会（オンラインで実施）があり、タスクや決め事、議題については事前・事後に必ずアナウンスを実施しました。
アナウンスすることで、打ち合わせがよりスムーズに進められると考えました。
また共有し透明化することで、もし抜けているタスクがあっても、メンバーから質問をいただいて、補い合ったりもできると思いました。
それと私自身忘れっぽいので、いつ見ても思い出せるようにしました。
・雰囲気作り
これはどこまで出来てたか分かりませんが、
チームでなるべくフランクに話しやすい、相談しやすい関係性を心がけました。（これは実務でも、特に後輩に対して意識していました。）
あと同期と普通に仲良くやりたいと思ってました。笑
▼デザイン
・メインビジュアル
以前、「ユーザーは必ずサイトをスクロールする、と思ってはいけない。メインビジュアルに一番伝えたい情報を盛り込むことが大事。」と講師に教えていただいたことを思い出し、メインビジュアルの見せ方に最も力を入れました。
・「ここから始まる〜」のコンセプトは、視線誘導を考え一番目につく左上に配置
・真ん中の円は「架け橋」をイメージ
・特長である文化交流の様子と、宿泊施設でもあるので個室空間の写真も配置
・そもそも何のサービスか認知いただけるよう、右下のボタンにサービス名、場所、予約へのリンクの情報をまとめる
・現在も運用されているSNSの動線を確保
サイトリサーチでは、宿泊施設のサイトに限定しないことも意識しました。
↓メンバーが見つけてくれて参考にしたサイト
※↓実はサイト分析してます（宣伝）
↓色合いや雰囲気を参考にしたサイト
↓雰囲気を参考にしたサイト
・デザインを制約しない
私がデザインする段階では、コーディングの難しさなどは全く意識していませんでした。（これはこれでどうかと思いますが・・😂）
コーディングが難しそうだから・・・と何かを諦めてまで安全策をとるのはすごくもったいないと思い、コーディングの難しさは全く考えずデザインしました。
結果コーディングは一筋縄ではいかず、コーダーをすごく困らせましたが、自分自身もコーディングに入り、支えてくれる講師の方々を頼りまくって、なんとか形にすることができました。
勉強にもなり、これで良かったと大満足です。
（みなさん本当にありがとう🙏）
学んだこと
コミュニケーション
いままでの営業職の経験では、お客さんと一緒に案件を進めることはあっても、社内でチームを組んでの業務はあまりなかったです。
むしろ【お客さん側でタスクが止まる＝お客さん要因で納期（ゴール）が伸びる】ことの方が多くありあました。
絶対に決まったデッドラインに向けての、しかもチームでの作業は新鮮でした。
どうしても個人の作業に入ってしまうと没頭してしまい、コミュニケーションがおろそかになることも。
納期が決まっている以上、都度フィードバックに出して修正対応した方が効率が良いという考えがあり、どう伝えるかに悩みました。
自分自身も個人の作業にならないよう、全体を意識し、コミュニケーションをとることが、チームでのタスク遂行には大切だと感じました。
私自身「この日までにこれやらないと、ここまで進められないのでは？？」と気づくのが遅くなってしまったこともあり、反省です。
自分1人なら頑張って巻き返しますが(根性)、チームである以上、進捗など気を配った上で、全体をみて円滑に進めないといけないと思いました。
さいごに
私はタイミングよく(?)仕事を辞めていたので、全集中して全体を見ることもできました。
メンバーの2人はお仕事と並行だったのに、忙しい中進めてくれたのでめちゃくちゃ感謝です。
このチームだからできた最善のサイト提案だったと、今でも思います！
この経験を活かして、WEBデザイナーへの転職に向けがんばります🔥
【実際のTOPデザイン】
この記事が気に入ったらサポートをしてみませんか？