デジLIGでの卒業制作を振り返ってみる。
こんにちは。デジLIG生のハルと申します。
卒業制作として、Vtuber日奈乃葉さんの公式サイトを作成しました。
卒業制作と向き合った濃い時間をnoteに残そうと思い、今回初めて投稿します。
自分の記録用としても書いているため正直凄く長いですが、これから卒業制作に取り組む方、またTwitterで働きながらの卒業制作に不安を持っている方もいたので参考になれば幸いです。
01. 自己紹介
デジタルハリウッドSTUDIO by LIG7月生。
IT企業の正社員として平日週5フルタイムで働きながらデジLIGでwebデザインについて学んでおります。
デザイン経験は皆無で、コーディングに関してはUdemyで少し齧ったことがある程度です。
なぜデジLIGを選んだかは、また別の記事として投稿予定です。
02. 企画段階
02-1. クライアント探し
卒制どうしようかな、と考え始めたのは中間課題を終えた9月終わり頃です。
クライアントワークがいいというのは考え始めた当初からありました。理由としては、
クライアントワークを実績として残したい。
実際にクライアントがいる状況の方が追い込める気がした。
の2点が大きいです
クライアント探しは、「自分の好きなことに携わりたい」という気持ちを軸にしていました。そこから好きなものを洗い出し、辿り着いたのがVtuberでした。
元々色々なVtuberの配信を見るのが好きで、思いきってどなたかにDMを送ろう…と考え日奈乃葉さんにDMをお送りしてサイト制作の許可をいただきました。
何人か自分の中で候補がいた中で、日奈乃葉さんを選んだ理由は、「衣装やイラスト、大会やイベントの実績が豊富」「人柄良いため、多くの人に知ってほしい」という気持ちが強かったです。
突然のDMにも関わらず快く了承してくれた日奈乃さんには感謝です…。
そして日奈乃さんはラズプロダクションという事務所に所属しているため、事務所にも許可取りが必要になります。
著作権に関しては主に事務所とのやりとりになります。「サイトそのものの著作権」「イラストの使用方法」「日奈乃さんの公式サイトという名目で作成して良いか」「サイトを作りにあたり、事務所にもチェックはしてもらった方がいいか」など確認しました。
(ラスプロダクション様、ご協力ありがとうございました！)
02-2. 企画書作成
ご本人様と事務所の許可を得て企画書作成。
実際に日奈乃さんと打ち合わせをし、現状の課題や悩みを洗い出しました。そして、その課題はwebサイトを作ることで解決出来るか考え、目的とゴールを決めました。
課題、目的、ゴールは以下の通りです。
課題と悩み
・Twitterで告知などをしているため、情報が流れていってしまう。
・イラスト等をまとめておく場所がない。
・数多くいるVtuberの中から自分を知ってほしい。
目的
情報の集約化と、他Vtuberとの差別化
ゴール：
ブランディング（認知してもらうことで配信に遊びにきてもらえる可能性を増やす）
では、反対にサイトを見るエンドユーザー側が求めていることは何なのか？を知るためにGoogleフォームを使ってVtuberを好きな人たちに向けてアンケートを取りました。これは、私一人が色々と見て考え「こうしたらいいな」と思うよりも、実際のターゲットにより多くの意見を集めた方がいいと思ったからです。(他にはツイート検索などでリスナーたちが求めていることやあったらいいなと思っていることなどを調査しました。)
「他Vtuberとの差別化」という部分については、サイトを持つことでサイトを持たないVtuberよりも詳しく知ることが出来る、という点で差別化が図れると思いました。
では、サイトを持つVtuberとの差別化について。
まずは色々なVtuberのサイトを見て「こういうページがあればいいかも」「こういうことが知りたい」ということを自分の中で整理しました。
・どういうVtuberなのか？（性格や配信内容）
・過去のイラストを全て見れたらいいな…
など。
そして、自分だけの意見ではなくより多くの意見も反映させるために先程紹介したGoogleフォームでのアンケートを利用。
このアンケートから、サイト専用オリジナル動画(人間性や言葉遣い、声が分かる)の掲載とイラストページの作成(日奈乃さんの悩みでもある点を解決)で差別化を図ることにしました。
02-3. スケジュール管理について
私が卒制で割と重要視していた部分です。
仕事の場合は納期は厳守。将来仕事としてwebデザインをやっていきたいためここで締切を守れないことは自分の中で絶対後悔すると思い、オリエンテーションで各チェックポイント(卒制発表以外にデジLIG側で企画書、デザイン、コーディングと各チェックポイントも設けてくれます。)の日付が決まったあとにすぐチェックポイントごとのスケジュールを立てました。
あとは、「仕事をしているから」という理由で遅れを取りたくないという思いがありました。
実際に週5フルタイムで働きながら卒業制作に取り組むのはとても大変でした。最初にスケジュールを立てなければ上手くいかなかったかもしれません。
スケジュールはWBSのフォーマットを使用して視覚化し、どこが遅れているかが分かるようにしました。また、ワイヤーフレームでページ数が決まった段階で各ページごとにスケジュールを組んでいます。
1日の制作時間ですが、平日は在宅日は4時間、出社日は帰宅時間がバラバラなので定まっておりませんが、最高でも2時間程。0時には必ず寝ることを心がけていたので、お風呂ご飯を済ませると時間がないな…となった場合潔く寝てました。(通勤時間は必ず参考サイトやコーディングについて調べたりはしてます。）
当時の在宅、出社の割合は3:7程でした。
休日は12時間程。ずーっとPCの前にいても疲れてしまうのでちょこちょこ散歩や猫と遊んだりの休憩をいれていました。また、結婚式など外せない予定以外は入れずに目の前の課題と向き合っていました。
卒制期間中は寝ずに頑張る方もいる中で、私は睡眠時間が少ないとすぐ体調を崩してしまうので7~8時間は睡眠時間を確保して取り組みました。
「2~3時間睡眠を削った結果翌日1日ずっと体調が悪くて仕事にも支障が出て制作物とも最大限で向き合えない…」となる未来が見えていたので。笑
でも結果として「睡眠を削らないと間に合わない！」とならなかったのも最初にスケジュールを立てたおかげだと思っています。
03. デザイン
03-1. とにかくトレーナーさんに聞いた！
コーディングよりデザインの方が苦手意識があるため、行ける日にはスタジオに通っていました。
特に卒制担当のトレーナーさんが出勤の日は1時間しか居れないとしても必ず行ってました。町田校舎はトレーナーさんの横に座ることが空いていれば必ずそこに座ります。笑
とにかくアドバイスを貰った気がします。が、アドバイスの貰い方も何もない0の状態から聞くのではなく「こうしたいけれどどう思いますか」など少しでもいいから自分の中で形にしてから聞いていました。
これは自分で調べて考える力をつけるためです。デザインがあまりよくない場合は必ずトレーナーさんが指摘してくれます。なので、まずは自分の中で形にしてから質問していました。
デザインはとにかく参考サイトと睨めっこ。「こういう風にしたい」の「こういう風」を参考サイトを見ながら自分の中に落とし込む…みたいな作業をしていました。
形にする際は何パターンか作成してクライアントに選んでもらって進めました。もちろん数パターン分トレーナーさんにもチェックしてもらっていました。とにかくトレーナーさん…！
03-2. 実際に出来たデザイン
Vtuberというエンタメ業界にいる日奈乃さんなので、「見ていてワクワクする」ことと、日奈乃さんがとても元気で明るい人なので「賑やかさ」を意識しながらもユーザーが欲しい情報がすぐ分かるようにしました。
①TOPページ
ファーストビューにLive2Dを置くことは最初から決めていました。Vtuberの要であるLive2Dはガワ(イラスト)を知りたいユーザーの興味を引き、かつ可愛いキャラクターが動くのはユーザーの心を惹きつけるのではないかと思います。
また、サイト内でも重要となるオリジナル動画へのリンクを配置することですぐにオリジナル動画を視聴することが可能です。
リード文は実際にキャラクターが話しかけてくるような感じをイメージ。
イラストも豊富なので各セリフに合わせた表情を配置して飽きさせず楽しめるデザインにしました。
没デザインでこんなものもありました。
「インターネットの人間」というところからブラウザをイメージしたデザイン。隠し要素として×ボタンも押せる仕様になっていてリード文が閉じたら裏にイラストがある、とか面白いなと思ったりしてました。(背景も少し違いますね)
②プロフィールページ
卒制を見ていただいた方とお会いすると「あ！あのくるくる回るやつ～！」と言ってくれるくるくる回るやつがあるページ！笑
ここは日奈乃さんが音楽ゲームを好きなことから着想を受け、くるくる回る選曲画面をイメージしました(が、コーディングでこいつに苦しめられることになる。)スマホ版だと半円、PC版は円で表示されます。
クリックしたあとのモーダル画面はブラウザをイメージしています。
③ギャラリーページ
ギャラリーページはイラストメインになるので背景が邪魔をしないようにポップなものから方眼紙のようなものにして、色の数を減らすことでイラストを目立たせています。
また、イラストが豊富なので「衣装」「SD」「1枚絵」の3つのジャンルに分類。各ジャンルごとにイラストサイズなどが大体は一緒なのでそれぞれまとめることで統一感も出ますし、ユーザーが見たいイラストにすぐ辿りつけます。
SDはリード文に使用していたようにイラストを配置することによりころっとした可愛らしさが出るので等間隔で並ばせて配置し、キャラクターたちがみんなで大移動しているかのように流れる動きを付けました。
とにかくイラスト素材が多いので、ただ並べるだけではもったいない！楽しめる要素を散りばめながらも見やすさを損なわないページにしよう！と思って取り組みました。本当に素敵な素材がイラストが多いです。ギャラリーページで見れるので是非！
④ニュースページ
ニュースページは、「ALL」「Youtube」「IRIAM」「OTHER」の4つの項目に分類して、気になる項目を選択すれば絞れるようになっています。
このページでユーザに一番届けたいことは文字としての情報なので、イラスト配置はなしにしました。記事自体に画像が挿入されないことやサムネイルは用意しないことから一覧ページでのサムネイル表示もありません。
04. コーディング
コーディングは一部を除き、そこまで時間はかからなかったです。
色々なサイトを見ておいたことで「あのサイトがこういう感じの実装をしていた！」となって検証ツールを使ってどういうコードなのかを見て真似て…という感じで進めたり、「誰かブログとかに纏めてないかな～」とググったり、今までの知識で補えたり…という感じです。
それでも分からなければ、トレーナーさんに質問⇒解決。
そして今までも何度か述べていますが、「一部を除き」です。その一部が「くるくる回るやつ」。
元々デザイン時に実装出来るかどうか調べたうえで「出来そう！」となってデザインに落とし込んだのですが、（こちらの記事を参考にしました。）
よくよく見たら「ウィンドウをスクロール時に回転する仕組み」だったのです。私が実装したいのは「特定エリアでスクロールしたら回転する仕組み」。参考の記事だと回ってほしくない時にも回ってしまうのでこりゃいかん～、となりました。
色々調べても私が求める動きをしたサイトにたどり着くことが出来ず、ごはん食べながらもお風呂入りながらも「どうすれば理想の動きになるのか」を考え実践しながら過ごす毎日でした。本当に。
結果として、
$(window).scroll(function () {
（回転する動きの記述）
})の「Window」部分を「スクロールしたら動くエリア」に書き換え。
じゃあ書き換えてどうすればいいか…はこんな感じ。
図解したけど分かりづらい。説明が下手なのも改善点のひとつですね。
最初リンク箇所はulタグ使っていたんですけれども、オレンジエリアにがっつり重なる形になってスクロールできなくなってしまいました。
なので、ulタグ箇所はz-indexでオレンジエリアよりも順序を下にすることでスクロール可能にし、オレンジエリアに:active擬似クラスを付与することでクリックするとulのz-indexの値が変更になってオレンジエリアよりulが上にくるようにする、みたいなことしていたんですが上手くいかず。（検証ツールだと理想通りなのに、検証ツール外すとクリック出来なくなる。）
結果リンク箇所はひとつひとつ独立させて円の真ん中はスクロールが出来るようにしました。
正直、この実装方法が最善か全く分かりません。「こういう方法の方がいいのでは？」みたいなのあれば教えてください。
その他に関しては、CSSで実装出来るところはなるべくCSSを使用したりしていました。軽く出来るところは軽くしようかな…と。
05. 公開後
公開後、日奈乃さんにお願いしてサイトが出来たことをツイートしてもらいました！（ありがとうございます！）
リプ欄をそっ…と見ていたのですが嬉しいお言葉ばかりで正直次へのやる気に繋がりました。日奈乃さん自身にも喜んでいただいて、「クライアントワークにしてよかった！」と一番感じた部分です。
まだまだ課題点や改善点はもちろんありますが、現時点での最大限を力を振り絞った制作物をたくさんの人に見ていただけることはとても嬉しいものでした。逆に、ここからさらに成長してもっと色々なものを届けたいと再認識出来るきっかけにもなりました。
二ヶ月間ひたむきに卒制と向き合った時間、卒制をやり切った達成感、公開後のお言葉、全てが今後自分がwebデザイナーとして進んでいく人生の糧となる！！
なにより、本当に取り組んでいる時間が楽しかった！！ずっと楽しかったです！！なかなか形に出来ない時もありましたが、「つらい…」とはならず「どうすればいいんだろう？」と前向きに頑張れた自分を客観的に見ると、本当にwebデザインが好きなんだな。と感じることが出来ました。
長くなりましたが、卒制については以上です。
卒業制作で終わりではないので、自分の目指す道に進めるようこれからも頑張っていこうと思います。
ここまで読んでくれた方、ありがとうございました！
この記事が気に入ったらサポートをしてみませんか？