デジLIG卒業制作記録
こんにちは。ゆきなと申します。
昨年8月に未経験からWebデザイナーへの転職を目指してデジLIGに入学し、3月に卒業しました。
デジLIGでの卒業制作は、私にとってかなり思い出深いビッグイベントだったので、今回記録としてnoteを書いてみることにしました。
お時間がある方はぜひ読んでいただけたら嬉しいです。また、少しでもだれかの参考になれば良いなと思っています。
01｜概要
卒制では、「ムーチョの世界」として活動しているペキニーズの男の子ムーチョの公式サイトを制作させていただきました。
Xを中心に、Instagram、YouTube、TikTokでの発信や、グッズの販売、企業とのコラボ、TV出演など幅広く活動をされています。
もともと「POTOFU」というサービスを利用し各SNSやグッズのリンクをまとめられていましたが、今回ムーチョの紹介やコラボ情報等をひとまとめにしたサイトを制作させていただきました。
02｜制作に至るまで
ムーチョはデジLIGに入るずっと前から大ファンでした。
実はもともと猫派で、犬はむしろ少し怖くて外で見かけるたびにビクビクしてしまうほどでした。そんな私を完全な犬派にしたのがムーチョでした。
ムーチョに出会ってから、狂ったように全てのムーチョの写真を保存し、YouTubeをスクショしまくり、毎日眺めては癒される日々……
以前私は介護士として働いていたのですが、夜勤などのつらい時は仕事中にムーチョを見ることで心の平穏を保っていました……
……ついムーチョ愛を語りすぎてしまいましたが、つまりこれほどファンだということです🐕🌷
Webデザインの勉強をするならムーチョのサイトを作れたら最高だな、と入学前から漠然と思ってはいました。
そして昔から謎の行動力があるので、入学した月に思いきってDMしてみたところ、まさかの承諾していただき───────。（𝑩𝑰𝑮𝑳𝑶𝑽𝑬です…）
8月に入学し、9月には制作させていただくことが決まっていたので、そのおかげで勉強のモチベを保つことができました…！
卒制はクライアントワークをやろう！と決めてはいたのですが、家族にも友人にも一切ツテがなく……
決まらなかったら嫌だなと思い早めに行動しましたが、こんなに早く決まるとは思っていなくて正直びっくりでした。
しかもまさか本当に愛してやまないムーチョのサイトを作れるなんて…と、決まってからはずっとふわふわした気持ちでした。
特別すごい営業をしたとかではなかったので、本当に運が良かったのと、快く承諾してくださったLOVEYOUさんの人柄に感謝の極みです😭
そしてなにより、行動にうつすことの大切さを実感しました…！
03｜実際の流れ
決まってからすぐにZOOMでお話をさせていただきました。
この時はまだ2ヶ月目だったので何をヒアリングすれば良いのか全く分からず、一応スグ食べやネットで検索して出てきたヒアリングシートを用意はしていましたが、緊張していたのもありほとんど記憶がありません…（笑）
この時はサイトを作りたいという思いを伝えることができただけ良かったかなと思います！
11月末頃に一度サイトの方向性について詳しくお話をさせていただきました。
そしてなんとこの時………
ムーチョと初対面させていただきました………………
😭😭😭😭😭😭😭😭😭😭😭😭😭
成功したオタクになってしまいました。心の奥底ですこーーーーしだけ期待はしてしまっていたのですが、実現すると思いませんでした……
（LOVEYOUさん、本当にありがとうございます！！！！！）
本物のムーチョを愛でながら、「この尊い命のために最高のサイトを作るぞ」と強く思いました……
12月は休学し、1月2月で卒制に挑みました。
実際の制作スケジュールをまとめると以下のような感じです。
1/15 企画書チェック→修正
1/19 企画書再提出→OK
2/5 デザインチェック→修正
2/12 デザイン再提出→OK
2/28 コーディングチェック
3/2 発表
反省点としては、企画書とデザインにかなり時間をかけすぎてしまい、コーディングにあまり時間をかけられなかったことです。2/12の時点で下層ページのデザインが完全には終わっていなかったので、なかなかやばい状況でした。
発表当日時点では、モバイル全ページと、トップページのレスポンシブまでしか終わらせることができませんでした……（悔しい…）
卒制期間は週5、6時間でバイトを入れてしまっていたのですが、今思えばもう少し休みを増やすべきでした…お金がなさすぎて必死でした（切実）
フルタイムで働きながら卒制を発表までに仕上げている方を見ると本当に凄すぎて言葉がでません🙃
制作期間はクライアント様とかなりこまめにやりとりをさせていただきました。というか、進めれば進めるほど聞きたいことがどんどん出てきてしまい、その度に連絡しまくってしまいました。
連絡するとすぐにZOOMや対面での作業の場を設けてくださり、直接お話できる機会がかなり多かったのでスムーズに作業を進めることができました。本当に感謝です……！！！
企画・デザインの期間はめちゃくちゃムーチョに会いに行ってしまいました🐕推しを愛でながら推しのサイトを作っている幸せ過ぎる状況……
というわけで、全体の流れとしてはこのような感じでした。ここからは実際のサイトについて触れていきたいと思います。
04｜サイトについて
今回サイトを制作した目的は、各SNSでの活動の周知と、ファンの方やそうでない方にもムーチョの世界について知ってもらうことです。
クライアント様の要望で、情報はできるだけわかりやすくしたいとのことだったので、全体的にシンプルなつくりにし、伝えたい情報がダイレクトに伝わるように意識して制作しました。
シンプルながらも世界観がしっかりと伝わり、既存のファンの方も含めすべての方が楽しめるようなサイトを目指しました。
サイトに訪れた方々がみんなムチョラブ人（んちゅ）になったら嬉しいなという思いを込めました🌷
①トップページ
最初はクライアント様の要望もあり、SNSリンクを置くだけの予定でした。ですが企画書のFBを受け、世界観を表現するにはそれじゃ絶対に足りないなと思い、試行錯誤した結果現在のデザインになりました。
はじめはムーチョらしさが伝わる写真を配置すれば世界観が伝わるのではないかと思い、ただ癖の強い写真を所々に配置しただけの状態でデザインチェックを受けました。
もちろん、それだけではかわいいだけで世界観が表現できていないとのFBを受け、飼い主のコメントを添えたらいいのでは？というアドバイスをいただきました。
それでもまだ何かが足りないなと思い、さりげなく効果音も添えてみたところ、面白さがプラスされなんだかすごく「ムーチョの世界」っぽさが出たように感じました！
MVのスライドショーは最初からやろうと決めていました。クライアント様セレクトの色々な表情をしたムーチョです。全部で14枚あるのでお時間がある方はぜひ見てみてください！
あとSNSリンクについてですが、ここ地味に苦労した点でした。
まずYouTubeのロゴ申請をしなくてはいけなかったことです。申請自体は簡単なんですが、英語のみだったのが少し面倒でした。実際に使用した場合のデザインも添付して、許可が下りれば使用できるといった流れでした。申請してから3日ほどで返事がきました！
もう一点が、Xのタイムラインの埋め込みについてです。最初はタイムラインを埋め込んで、サイト内で最新情報を見れるようにしていました。しかし発表の3日前にたまたまスマホのChromeで確認した際に（普段はSafari）、タイムラインが時系列になっていないことに気づき……
慌てて調べたところ、Xに変わってからなのか規定が変わり、ログアウトしている状態だといいね順？おすすめ順？で表示されてしまうなどの不具合が生じることがわかりました。（フォロワーが少ないとそもそも何も表示されないこともあるらしい）
Safariだとログイン状態だったのでギリギリまで気づきませんでした。仕方なくXのフォローボタンを配置し誘導することで対応しました。
このような感じで、今思えばトップページは結構大変だったな～と思います。でも最終的には良いものを作れたと思うので苦労したかいがありました！
②ムーチョとは？
このページは一番お気に入りです。そして一番見ていただきたいページです！
見た目のシンプルさを保ちつつも、楽しめる要素を盛り込もうと考えた結果、クリックしたら表示されるという仕組みを取り入れることにしました。
ここはコーディングに一番苦労しました。デザインの段階では、「？」の部分もCSSで表現するつもりで、それぞれリンクにして押したらモーダルが～とぼんやり考えていたのですが、実際CSSで表現すると画面幅が変わった時にとんでもない崩れ方をしてしまい……。
結局「？」も含めた1枚の画像として書き出し、mapタグとareaタグを使用して画像内に複数のリンクを設定し、モーダルと組み合わせることで理想の動きにすることができました！
ここが完成した時の達成感はやばかったです。皆さんに楽しんでいただけていたらとても嬉しいです。
ここも結構気に入ってます。かわいい。おもちゃと写ってるムーチョの画像を眺めていた時に、ふと「おもちゃ並べたら可愛いのでは？」と思ったのが始まりです。
最初はタップしたらおもちゃの切り抜く前の画像が表示されて、おもちゃの説明が書いてあるだけでした。（発表の時もそうでした）
でもタップした時に、おもちゃで遊んでるムーチョが出てきた方が嬉しいしお得な気持ちになるかな～と思ったのでムーチョの写真を入れることにしました。
とはいえ、ムーチョは大量におもちゃを持っているので特定のおもちゃで遊んでいる写真を探すのが大変でした。一部は私が保存しているものがあったのですが、一部は全然見つからず……
クライアント様がなんとか探し出してくださり、無事にすべてのおもちゃで遊んでいるムーチョの写真を入れることができました👏🏻
ムーチョ1周年の時に写真集が出たのですが、そこにQ&Aコーナーがあったのでサイトにも取り入れてみました。
個人的にムーチョのアイコン画像がこだわりポイントです。
めちゃくちゃ可愛くないですかこれ。ムーチョが話してる風の画像を入れたいな～と思った時に、真っ先にこの画像が思い浮かんだので入れてみたらドンピシャでした。
最後の「ブゴッ・・・」も結構気に入ってます。クスッとしてもらえたら嬉しいです。
③コラボなど・グッズ
この2つのページは情報がメインなので、特にシンプルでわかりやすさを意識して制作した部分になります。
当初のデザインから大きく変わったということもなく、比較的コーディングもスムーズに進みました。
④ギャラリー
企画の段階ではギャラリーページをつくるつもりはなかったのですが、コンテンツ量が少ないとユーザーが満足できないかもとのFBを受けたので入れることにしました。
また、写真をタップした際にSNSの投稿に飛ぶようにしたら良いのでは？とのアドバイスをいただいたので、Xでバズった投稿のみ配置し、実際の投稿に飛ぶようにしました。
あえて写真を小さく配置しているのは、気になってタップしてもらうようにするためです。
ファンの方が、「この投稿でムーチョに出会ったんだ！」と懐かしい気持ちになってくれたら良いな～と思いながら制作しました。
ちなみに私がムーチョに出会った投稿はこちらです。
外がまだ怖い赤ちゃん pic.twitter.com/SJPPSlwKyd
— 𝐿𝑂𝑉𝐸𝑌𝑂𝑈 (@The_Mucho_World) February 27, 2021
守るべき命すぎてやばいですよね………イチコロでした💘
⑤ローディングアニメーション
最初はもっと凝ったものにする予定だったんです。下からムーチョが飛び出してきて上に飛んでいくみたいな。
参考サイトを探しまくり、かなり色々調べて試してみたのですが、私の力不足すぎて再現できませんでした……
ですが！！結果的に今のローディングアニメーションめちゃくちゃ気に入ってます。サイトを開いた瞬間思わず笑顔になっちゃいますよね？ね？？
実はこれCSSアニメーションで出来ちゃいます。ローディングアニメーションが入るだけで一気にサイトっぽくなる気がするので、難しいJSはわからん！けど入れてみたい！という私みたいな方にはおすすめです。
05｜公開後について
こうして無事にサイトが公開されました。
ムーチョの色々をまとめたサイトが完成───。https://t.co/83Zb2Ll2nj
— 𝐿𝑂𝑉𝐸𝑌𝑂𝑈 (@The_Mucho_World) May 9, 2024
たくさんのファンの方に見ていただき、嬉しいコメントばかりで本当にやってよかったなと思いました。特に、ファンの方からの「世界観が表現されている」「ムーチョの魅力が溢れてる」という言葉が嬉しくて嬉しくて……
クライアント様はいつもいつも褒めてくださるのですが（優しすぎる）、完成した時も「いつ見ても最高のサイトです」と言ってくださり……😭
また、クライアント様にファンの方から「このサイトを見てWebデザイナーに憧れました」とのDMが届いたり……嬉しすぎて普通に泣きました。
デジLIG生からもたくさんの嬉しいコメントをいただきました。サイトを見てくださった皆様、本当にありがとうございます……！！！
時々Googleアナリティクスを見ているのですが、毎日たくさんの方がサイトにアクセスしているようで、自分が制作したサイトがリアルタイムで世の中の人の目に触れていると考えると夢のようです。
今後、このサイトがSNSのフォロワー数増加や企業様とのコラボのきっかけなど、なにか良い影響を及ぼしてくれることを願っています💭✨
06｜最後に
長くなってしまいましたが、私の卒制記録は以上となります。
今回クライアントワークをやって本当に良かったなと思います。クライアント様の要望を汲み取りつつもユーザー目線のサイトを制作するのはかなり難しかったですが、とても良い経験になりました。
そしてこれから卒制を控えてる方、もし私のように推しがいる方は、思いきって行動してみてほしいなと思います。もちろん全ての方が良い結果になるとは限りませんが、行動にうつさないことには何も起こらないので、一度勇気を出してみてほしいです。
仮にダメだったとしても、行動にうつせたことが素晴らしいと思います。よく言いますが、しない後悔よりする後悔です👍🏻もしこれから声をかけてみようかな、という方がいたら全力で応援します！！❤️🔥
最後に、推しフィルター抜きでムーチョはめちゃくちゃ魅力溢れる天才𝒅𝒐𝒈なので、是非SNSをチェックしていただけたら嬉しいです🐕
特にYouTubeはかなり癒し効果が高いので全人類にみていただきたいです。マジ可愛いです。
初投稿の動画をしれっと貼っておくのでお時間がある方は全員みてください……きっと気づいたら顔がニヤけているはずです。
しっかりと宣伝もできたので、この辺で終わりにしようと思います。
改めて、最後まで読んでいただきありがとうございました！
この記事が気に入ったらサポートをしてみませんか？