157日目　チーム制作活動最終発表とチーム活動の終わり

WEBデザイン日記157日目です！
本日はスクールでのチーム制作の最終日ということでサイト紹介を兼ねたプレゼンがありました。他チームも含め、合計4チームの制作発表があり、チームごとの特色が出てたくさんの刺激が得られました！
本記事ではチーム制作を振り返りを書いていきたいと思います（複数記事に分けるかもしれません）。

メンバー決定とチーム発足

---

チーム活動事前アンケート

まず、スクールからアンケートがありました。
内容は、コーディングがメインでやりたいか、デザインがメインでやりたいか、それとも両方行いたいかといったもの。
人によって進みたい道は様々なのでどのような回答をしたかはわかりませんが、私は両方を選択！

デザインは単純に苦手意識があったので強制的にやる環境を作りスキルアップを図りたかったからです。コーディングは私がWEBデザインをするうえでメインでやっていきたいと考え、チーム制作という大規模制作でのコーディングに携わりたいという思いから選択しました。

メンバー決定とあいさつ

アンケートをもとにチームが決められました。
同期がアンケート結果をもとに振り分けられた形となり、もともと接点もあまりなかったのでほぼ初めまして状態からのスタートでした。

クリエイターズファクトリーでは教室に通える人も通えない人も参加できる授業体系となっており、今回私が配属になったチームは全員がオンラインで受講しているフルオンラインチームでした。

はじめましての挨拶をかわし、簡単な雑談を挟みました。

チーム活動で最初に行ったこと

まず行ったのが、チーム制作のスケジュールの大まかな把握です。
スクールからおおよそのスケジュールが送られてくるので、いつが発表で、いつまでにデザインを完成させ、いつまでにサイトを完成させなければならないのかを確認しました。

この時は、全く先の想像が出来ず、とてもスケジュールがタイトという感覚が強かったです。

おおよそのスケジュールが確認できたところで、デザインがいつまでに出来てるとコーディングが楽になるかという話し合いを行って、デザインの納期を決めました。

合わせて、デザインが決まり次第コーディングがスタートするというところまで決めました。

あらかじめデザインもしくはコーディング、両方等行いたい分野も知らされていたので担当分野も決めておきました。

もっとも重要だなと感じたのがメンバーがいつ制作活動が出来るかといった部分です。いつ作業できるのかというのは人によってとても差が出る部分で、これを知っておくとミーティングをするのにもいつがいいかすぐに決めることが出来ます！

制作スケジュール

まずはどの程度のスパンで作業を行ったかを書いていきたいと思います。

デザイン
・TOPページを8日間。
・その他ページは随時(約1週間程度)。
コーディング
・TOPを約５日間。
・その他ページは随時(約2週間)。

このくらいの時間でスマホ対応まで行いました。

制作活動の開始

サイト設計を始める前にクライアントがどのようなサイトを目指すかを知るために質問事項とそれに対しての回答をまとめたものを作成します。今回はクライアントがスクールの人が担当のためあらかじめまとめられたシートが配られました。

そのシートからさらに深堀をするため、クライアントとの打ち合わせがありました。あらかじめ深堀すべき項目をリストアップしたうえで質問し、回答を頂き、これでサイト方針が決められました。

続いて、競合となる他社分析を行いました。
今回はシェアオフィスが題材だったので、規模感、クライアントが似せたいサイト等を確認しながらデザインの参考となるサイトを洗い出しました。

競合から得られる情報として以下になります。

・色味。
・フォント。
・ページ構成。
・あしらい。
・ページデザイン。

様々なサイトを見ることで関連性があるものや、サイトの方針によって使われるフォントが違ったり、画像の配置が考えられていたり、あえてシンプルにするためアイコンを使っていたりといろいろな情報が得られました。

ワイヤーフレームの作成

サイト設計の第一段階として、サイトの骨組みを作るためのワイヤーフレームというものがあります。ざっくりと図形で画像を載せる位置だったり、この場所にはこの内容を載せる等、いうなればページごとの構成分けにあたります。

例えばTOPページであれば上からヘッダー、メインビジュアル、キャッチコピー、要素①、要素②・・・、フッターといったようにそれぞれにどんな内容を載せていくかをデザインしていきます。

私自身、ワイヤーフレームの担当ということもあり、とても熱が入ったことを覚えています！メンバーに何度もできては見てもらって修正点を洗い出してもらい、何回も修正しました（笑）

デザイン作成

TOPデザインはメンバーが担当となり、私は下層ページデザインの担当となっていました！デザインが出来上がると「すご！！」と思ったことを今でも思い出せます！

綺麗にまとめてもらったデザインをもとに、担当ページをデザインしていきました。難しかったのを覚えています。何とか完成はさせましたけど（笑）

サイトデザインコンペ

実はチームごとにサイトデザインを最低2案作るよう依頼がありました。
私の所属したチームも同様に2案を作り、コンセプトが違うサイトデザインを作りコンペに出し、1案が選ばれました！

残念ながら私が担当していた方のデザインは落選してしまいました・・・
今後は選ばれたサイトデザインをもとに下層ページデザインを行い、コーディングへと入っていきます。

デザインと併用してコーディング開始

メンバーが下層デザインを行う中、私はTOPページのコーディングを担当することになりましたので早速デザインをもとにコーディングを開始しました！

jQueryを用いた動きのあるデザインだったりボタンが特殊な動きをするデザインはあるものの、まずは動きは抜きにしたサイトコーディングを行いました。

理由として、サイト全体に使われるCSSを仕上げたかったからです。
下層ページもデザインが進み、ゆくゆくはコーディングに入っていきますが、そんな時、共有CSSが無いとせっかくコーディングに進めても装飾要素であるCSSが無いと出来ているのか出来ていないのか判断が出来ません。

なのでとりあえずヘッダーやフッター、下層でも使う部分のコーディングも含めたコードをスピードアップして作りました！

幸い、下層ページデザインが完成する前に終わったのでサーバーにアップし、メンバーへ共有しました！

サーバーへのアップとサブドメイン

サーバーに関して、ホスト名等を共有していいのかわからなかったので今までは私だけで管理していましたが、授業で先生からサブドメインを教わり、サブドメインを使うことでサーバー内の一部分だけの共有が可能になるということを教わりました。

これにより、チームメンバーにも接続情報を共有し、コード管理がとても楽になりました！
また、サーバーをより詳しく使えるようになったのでとても勉強になりました(*'▽')

サーバーへのアップに関しては制作が終わった今でも緊張しますが、何度もアップすることでだんだんと抵抗は薄れていき、使い慣れてきた気がしています（笑）

ベーシック認証とサイト制作終盤

誰でもアクセスできないようベーシック認証というサイトにIDとパスワードを設定しました。好きなIDとパスワードをえらべるので適当につけました！

サーバーへメンバーがだんだんとアップしていき、スマホ対応まで行いながら、都度全員で崩れていないか、不具合が無いか、よりよくするための情報共有などを行い、ブラッシュアップを繰り返していきました。

時にはわからない部分を聞いたりしながらどんどん詰めていくこともできました！

サイト制作終盤になるともはや最終発表しか見えておらずスケジュールはほぼ機能していませんでした（私だけだとは思いますが）（笑）
終盤に近付いていくにつれ、コーディングも難しい動きを付け加えていくため、様々な不具合が起きました。

サイトの不具合と修正

・ヘッダー幅がおかしい。
・フッター幅が大きく、スクロールバーが出てしまう。
・画像ホバー時の拡大率の違いによる統一の無さ。
・推奨されないCSSでしか書けないデザインの対応。
・時間差で切り替える画像下のドット。
・その他・・・。

実に様々な不具合や難しい局面に遭遇しました！
特にスリックと呼ばれる技術で表示する時間差で画像が切り替わるコーディングで、画像下に今何枚目が表示しているのか示すドットがあるのですが、コーディングで変化させるのに一苦労でした！

外部から読み込んだコードの中身を調べる方法を探り、調べ、コードを書き替えたり追加したり試行錯誤して何とか対応できました！
こんな感じで、デザインに近づけることの難しさから自分のコーディングスキルが上がった気がします(*'▽')

ここまでくるとサイト構築で私が担当する部分もほぼ終わっていたので他に何が出来るかを探しました。

担当分野以外できること

今回のサイトではアイコンを多用する部分があったのでアイコン一覧を作りました。使うアイコンはGoogle fontsから使うことが決まっていたので必要そうなアイコンたちを調達し、メンバーへ共有しました！

他にできることとしてはいつでも聞いてもらえるようオンラインで集まれる場所がクリエイターズファクトリーには用意されているので時間があるときななるべくいるようにしました。コーディングに関する不明点の共有と解決方法などメンバーと行えてよかったです。

また、TOPページで使っているコードのクラス名の一覧を作り、クラスに対してかけているCSS一覧も作ったりしてメンバーへ共有しました！

中間発表と最終発表

本日の最終発表も含め、全部で2回発表がありました！
今思うと、中間発表はまだまだ余力があったなと感じます（笑）
最終発表はほぼ死んでました・・・

発表資料をメンバーが作ってくれたので資料に沿って発表の担当決めを行い、発表を行いました！
中間発表、最終発表と資料は少し変えています。

発表資料もチームごとに特色が出ていて見ていて楽しいなと感じ、また、それぞれのチームの発表を聞いていていいところがたくさんあり、見習いたい部分がたくさんありました。

特に最終発表では、発表資料のテイストをサイトデザインに近づけて、そしておそらくフォントも同じだったのかなと思うほど資料とサイトとの一体感が出ているものがあって、こんな風に資料を作るといいんだなと感じた一面でした！

そして個人的に思う部分ですが、しゃべり方もとても大切だなと感じました！物腰柔らかくしゃべるととても聞きやすく、そして耳に入ってきやすいので私が見習いたい部分の一つだなと感じました。

資料の切り替えについてもあらかじめサイトを表示させているという点はどのチームも一緒でしたが、切り替えがとてもスムーズだとみていて気持ちがいいなと感じたのでいかにして見る人にやさしい発表にするかを今一度見直したいと感じ、個人製作発表に生かしたいと思いました！

チーム活動を終えて

まず、もう終わるんだなとなんだか何とも言えない気持ちです！
コーディングやデザインといった技術的な面ももちろん色々学ぶ部分がありましたが、一番は人と同じものを作るという部分で意見を出し合うことの大切さ、ミーティングの仕方、こまめな進捗報告が勉強になりました。

クリエイターズファクトリーに入学する際、授業ありなのか授業なしなのか選べ、授業がある方はチーム制作も確実に行えると聞いて授業ありを選びました。人との制作活動はいずれWEBの道に進みたくなったときに確実に役立つスキルだと感じたからです！

その思いは間違っておらず、実際、チーム活動を通じて何をするとよかったか、逆に悪かったかといったところが見えてきました。

例を挙げると、良かった点として、オンラインでの共同制作の仕方として進捗管理サービスを使って進捗管理を行い、ミーティングでは議事録を作ることでチーム活動を行う上での事務処理を学べた点です。更に、コーディングファイル管理方法としてサーバー管理も同時に学べた点が挙げられ、WEB業界では必須だと思うのでとても有意義でした！

悪い点としては、ミーティングに時間を割きすぎた時があったということ。確か5時間くらい答えが出ないミーティングを行ったりしました（笑）
他には終盤になると手いっぱいな状態が増え、進捗管理がおろそかになりがちな点が挙げられました。完了しているのに進捗管理サービスで完了にしてなかったことがあったので反省点の一つです。

あとがき

---

ざっくりですが今までの振り返りを書いてみました！
振り返るとその時はすぐに過ぎてしまい特に感じなかったようなことでもこうして文章として書いてみると学ぶことはたくさんあったんだなと感じました。

チーム活動が終え、今まで私含め4人で制作をしてきましたが明日からはまた1人での作業となるため、うまく気持ちが切り替えられるかといった面で少し不安が残ります（笑）

ポートフォリオサイト制作を引き続き行っていきますが、燃え尽き症候群にならないよう、より気を引き締めて作っていきたいと思います！