見出し画像
Photo by yoshitravelogue

【卒制迷われているシーメイトさんへ】SHElikes入会7ヶ月、webデザインコース卒業制作完成までの道のり

文音｜香り研究家

こんにちわ！文音（＠AYAYAANE）です。
先日やっとキャリアスクール「SHElikes」webデザインコースの卒業制作を完成させました〜！

受講から7ヶ月。。あ〜とっても長かった（笑）
初めて卒業制作発表会を見たとき、あまりのクオリティの高さに圧倒されてしまったり、何度も挫折して、卒業しなくてもいいかなと考えたり。
回り道ばかりの卒業制作、完成までの道のりを残しておこうと思います。

卒業制作に悩まれている方、思ったように勉強進んでないと焦っている方
の参考になったら嬉しいです！

１.自己紹介

91年生まれ、旦那と0歳の息子の3人暮らしをしています。
新卒で入浴剤メーカーに就職し、商品企画・通販運営に従事し、現在育児休暇中です。
2020年11月、何となくもやもやしたキャリアを変えたいとキャリアスクール「SHElikes」に入会。webデザイン、ブランディングの中心に受講。
（SHEに入会したお話は次の機会に書いてみたいな。）
現在、副業でフリーのwebデザイナーとして活動しています。

2.受講開始

11月から受講を開始。その頃、産後3ヶ月が経ち、勉強時間取れそう！と意気込んで始めました。が、がんばれたのは最初の1週間だけ。ペースがつかめずそのまま1ヶ月は全くコースが進まず、早くも挫折ムードでした。

そんな中初めてシーメイトナイトに参加しました。グループに分かれての交流でドキドキしながら、勉強が思うように進まないことを話したら、その中でもできていることを褒めていただき、シーメイトさんの温かさを実感！他にも勉強方法を教えていただいたり、入会の理由をお互い話したりで刺激をいただき、一気にモチベーションがあがりました。

そこから、12月より本格的にデザインコースを受講しました。
勉強時間はゆるゆるルールを決め、自分ペースを死守して続けることを意識しました。

マイルール
・息子が起きている時間は息子と全力で遊び、寝ている時間に勉強。
・疲れてたらやらなくてOK
・人と比べて焦りを感じたら、ドリームマップで自分のなりたい姿を思い出すか、SNSをおやすみ

そして年明けに無事デザインコースの動画視聴終了しました！

あとは卒制提出するだけ！と意気込んだけれど、ここからが長かった（笑）

3.卒制迷走

卒制に取り掛かろうとコンセプトシートを開くも、作るサイトのテーマが決められない。
自分のポートフォリオサイト？妹が将来やりたいお店の模擬サイト？好きなお花屋さんのサイトもいいな。
結局決められず、もう少し勉強してから〜と放置しました（笑）

それから1ヶ月が経ち（放置しすぎ）、そろそろ進めたいと考えていたとき、デザインCH主催の卒制テーマ井戸端会を知り、即参加。

テーマ決めで悩んでいるシーメイトさんが結構いらっしゃって、自分の考えてることを話したら、背中を押してもらい、「自分がやって気分があがる」テーマにしようと決意しました。

同時にせっかくなら実際ある店舗のサイトを作りたいと考えるようになり、大好きなフラワーショップに直談判しに行きました。
（SHEに入って、シーメイトさんが背中を押してくれることもあり、自分でも驚く行動力を発揮（笑））

結果は、お断りでした〜。お店の人からしたら絶対変な人だったよな〜と恥ずかしいやら、悔しいやらで落ち込みましたが、

ここまで行動したら逆にポジティブになり、
自分のやりたいを詰め込んだフラワーショップをプロデュースして、
そのサイトを作ることに決めました！

4.ブランド設計

まずはフラワーショップのプロデュースからということでブランディングコースを受講しました。ブランドのらしさを作っていく過程がすごくわくわくして、さくさく作れました。
驚くのが、TAさんからのフィードバック！びっくりするくらい丁寧でめちゃめちゃおすすめなコース（個人的に）なのでまだの方まずはDAY1視聴してみていただきたい。なるみさんの虜。
ブランディングコースの愛が溢れすぎたので戻して、、、

そして作ったのがブランドが
to youでなく、to me専門のお花屋さんをコンセプトにした
「わたし宛のフラワーショップ　To me」です。


そして、ブランディングシートを元にコンセプトシートを埋めていきました。軸が決まってるので、スイスイ進みます。
個人的にはブランディングコースとwebデザインコースを並行してすすめるのがおすすめです。
ある程度できたら、もくもく会に参加しました。TAさんからフィードバックいただき、ブラッシュアップしていきました。ペルソナ設定で特に、よく読む雑誌やファッションが決まっているとトンマナ選定がしやすいと教えていただき、細かく設定しました。

この時点で3月半ば。このタイミングで新しいwebデザインコースのリリースが発表になり、旧コースで卒業制作を出すことを目標を決めました！

5.ワイヤーフレーム

期限も決まったしワイヤーフレームを作ろうと思うも、どこから手をつけていいかわからない。
そこでもくもく会で相談しました。参考サイト集めて、並べて行く方法を教えていただき、実践。

スクリーンショット 2021-06-03 22.51.40

ちょっと見にくいですがこんな感じで集めました。
各要素ごとの配置や全体のトンマナなど参考にするものを並べていく感じです。
最初Photoshopでやっていたら、重すぎて遅くなったので、Adobe　XDを使いました。Figmaでもやりやすいと思いますが、わたしは日本語の方が使いやすいので、XDにしました。

6.デザイン

やっとデザインに着手。画像の編集のみPhotoshopで、それ以外はXDで作成しました。手順はこんな感じです。

①素材、フォント決定
②メインビジュアルとナビゲーション作成
③フッダー作成
④各項目をざっくり作成
⑤ボタンをコンテンツに合わせて作成
⑥あしらいなど全体を調整
⑥フィードバックをもらいブラッシュアップ

素材はこのサイトで集めました。検索かけると複数の素材サイトを一括検索できちゃう優れもの。

フォントはゴシックなのか、明朝なのか、筆記体なのか先に方向だけ決めて、Adobeフォントで探しました。実際のテキストを表示できるので選びやすかったです。

盲点だったのが、余白。広めにとると決めていたけど、数値までは決めてなかったので、あとで、ちょこちょこ変更するのにかなり時間を取られました。
おすすめは、先にひとつの項目を作ってそこで余白の数値を決め、他の項目にも反映させるのが個人的にはいいかなと思いました。私は余白サイズの四角を作って定規みたいに使ってました。

1番悩んだのがあしらいの部分で、なんか味気ないけどどうして良いかわからず、もくもく会に駆け込み。勉強になりすぎるTAさんのフィードバックをいただき、無事完成しました。
デザインだけだと週3~4　3時間程度1ヶ月半かかりました。

7.コーディング

気づけば、旧のwebデザインコースがおわるまであと2週間。やばい。なんとか動く形までもっていきたくてレスポンシブを考える前にコーディングに着手しました。
まずはデザインに合わせて、手書きでレイアウトの構成をざっくり書きました。こんな感じです。とんでもなく読みにくいですが、ご愛嬌ｗ個人的にはデザインを印刷して、そこに書いたほうが見やすかなと思いました。今回はプリンターがなかったので、手書きしました。

スクリーンショット 2021-06-14 23.10.26

ここからは実装。htmlに手を付けた初日だけ自力でやりましたが、圧倒的にもくもく会参加したほうが進みます。
私なりのもくもく会の受け方は

・「聞くは一時の恥、聞かぬは一生の恥」精神で、わからないことは些細なことでもすぐに質問
・自分ですすめる中で質問事項をもくもく会が始まる前に溜めておく
・できる限りzoomで参加する

こんな些細なこと聞いて大丈夫？と思うことも、丁寧に教えてくださりすぐに解決できて、爆速で進みます。他の方に聞かれて恥ずかしいな〜と思っても、自分も作業してるとき、人の質問そんなに聞いてないよな。と思ったら、恥じらいがなくなりましたｗ
Slackだとわからないところをテキストに起こすのに、時間がかかってしまったので、zoomの方が質問しやすいと感じました。

cssはXDでデザインを作ったので、サイズや要素ごとの距離などが簡単に測れてすごく重宝しました。XDゴリ押しｗ

毎日もくもく会に参加したおかげで、10日でPC用コーディングが完成。
このとき、結構追い込んでやりましたが、没頭できてすごく楽しい時間だったので、もっと極めてコーディングでもお仕事とれたらな〜と思っています。

8.レスポンシブ

やっと最後、レスポンシブです。調整だけでいけるかとちょっとたかを括っていましたが、いざ始めようとすると何からやったらいいんだっけ？と手が進まず。
ここで参考になったのがシーメイトさんの卒業制作でした。PC用のどの部分のデザインを変更しているのか、どうやってレスポンシブに対応させているのかを探っていきました。特にテキストエディタでコードが見られるので、書き方をヒントをたくさんいただきました。

それを参考にXDでレスポンシブデザインを作成、実装してTAさんにフィードバックをいただき、、、、

ついに完成〜！！！5/14 ぎりぎり期限までに仕上げることができました！
（旧コースが閉じる日 5/15w）

9.最後

とてもなが〜くなってしまいましたが、ここまで読んでいただきありがとうございます。

継続することが苦手で、SHEも受講1週間で挫折しかけた私でしたが、形にすることできました。

この経験で1番に思ったのが、私もやればできるということです。
すごく遠回りばかりでしたが、継続してやりつづけることができた理由は

・もくもく会ですぐ疑問を解決できる
　TAさんの愛のある丁寧なレクチャー、フィードバックが励みになる
・すきなものをテーマにしたから、形になる過程が嬉しい
　苦手なこともすきと組み合わせると楽しい

そして1番は

・シーメイトさんからの励まし
　Twitterやコーチングで発信すると反応してくれたり、活動されてるツイートをみて刺激をうけたり、シーメイトさんの存在が1番の励みになりました。

拙い文章でしたが、卒業制作に悩まれている方、思ったように勉強進んでないと焦っている方の参考になったら幸いです。


この記事が気に入ったらサポートをしてみませんか？