1月に思い切ってMacBookを購入。さらにその勢いでSHElikesに入会し、webデザインコースの受講を開始。その卒業制作がやっと完成したので、ここまでの道のりを記録していこうと思う。

3月からスタートし、完成まで約半年もかかってしまったのだが、、
世に出ないサイトだったはずが、お仕事として制作できることになった（来月から打ち合わせが始まる予定）ので

これから初めてサイトを始める人にも、何か新しいことにチャレンジする人にも

コツコツ続けていけばチャンスを物にできるよ💪🏻

というメッセージをこの記録で伝えたい。

1.まずは、Webサイトのテーマ探し

webデザインコースの卒業制作（修了試験）は、オリジナルサイトを作るというもの。
架空のサービスをテーマにしている人も多かったが、私には難しく感じたため、馴染みのあるサービスをテーマにできないか考えた。

辿り着いたのは、お世話になっている鍼灸院の先生。

引っ越す前に親子で通っていた鍼灸院があり、その先生の人柄や技術に信頼を置いていたのだが、現在のサイトが個人的にはもったいないものだと感じた。

そこから、先生の良さも安心して通える鍼灸院だということを伝えられるようなサイトを作ろうと決意。（先生にもお願いし、情報提供していただけることになった✨）

結果的に、実際のサービスをテーマにしたことで、先生とその先にいるお客様のことも考えながら作ることができ、より実践的なサイト制作に取り組むことができたのでこのテーマにして良かった💪🏻

2.要件定義（ゴールやターゲットなど）

次に、サイトの目的やターゲットなどの要件定義を設定。

サイトの目的
予約率アップ🔺

ターゲット
❶近所で治療を受けたいと思っている人
❷ふらっとサイトを見にきた人ではなく、ちゃんと病院を調べにきている人
❸体の不調を早く直したいと考えている女性
❹30代後半〜50代くらいのママさん・働いている女性
❺落ち着いた住宅街に住んでいてアロマや料理が好き

その他
・初めましての人も安心して通えるような雰囲気
・男性の先生なので誠実さは残しつつ可愛くなりすぎないようにする

◎サービスのコンセプトやサイト名は既存の情報をお借りしました。

この段階で類似サイトや参考サイトも７つ選び、ワイヤーフレームやデザインカンプを作る際にいいなと思うポイントを盗んでいった💡

🗒振り返り
・前後の数字が分かれば予約率〇〇%upまで決めれると良かったかな。
・ターゲットや目標はより具体的にしておいたほうが、作っているときに彷徨わない。

3.ワイヤーフレームの作成

次にワイヤーフレームの作成。
最初に手書きで書いたが、手元に残っていなかったので・・PCで作った画像を。
⏬Cacooというサービスを利用。

参考サイトを見ながら、とりあえず載せたい文字や画像を入れてみた。

が、
最終的には情報量が多くて最後まで見てくれないかも😓と思い、セクションを減らしたり、予約ページを分けたりと大きく変更。

ワイヤーフレームを作ったはいいものの結局作りながら随時変更していくことに。
はじめては何もわからないので、この辺はあまり時間をかけずに
とりあえず最後までやってみる！という気持ちで続けて行ったのは正解だったかも💡と振り返ってみて感じる。

🗒振り返り
・情報の優先度を考えて設計する
・この段階で、文字が多すぎないか確認しておけば良かったかも
・とりあえずやってみる精神は大事。（作り出す前からいろいろ考えすぎて足が止まらないように）

4.デザインカンプの作成

デザインカンプは、実際に使う写真・フォント・アイコン・色を決めてphotoshopで作成。

こちらもコーディングを組む段階で、いろいろと変更したので
完成したものとは少し違ったりする。

コーディングは基礎の基礎しか知らないまま作り始めたため、後々苦労することになった。（想像以上にこれを完成させるためのコーディングを作っていくことに苦戦した）

🗒振り返り
・実際のサイトで表示するサイズで作る。and サイズをメモしておく（この辺感覚派すぎてテキトーだった）
・ここはこのコーディングで書く！を意識しながら作る（一回やると分かるようになった）
・セクションごとに伝えたい内容を決めて、デザインに特徴を持たせた方が良かった

5.コーディング実装

さて、ここまでで二週間程度。（楽しくてどんどん進んだ）

しかし、ここからが長かった。

といっても最初のページの約4割くらいまでは、基礎的な要素で作ることができた（繰り返しも多かった）ため約2日ほどで完成。

そこから要素を綺麗に並べたり、タブレットとスマートフォンのレスポンシブやアニメーションをつけることに大苦戦！😭

わからない⇨調べる⇨やってみる⇨できない⇨相談する⇨できた💡

といった地道な作業が続く。
今までスルスル進んでいた作業が全然進まなくなり、飽き性な私は「楽しくない・・・」と思って途中逃げた時期も。笑

他のお仕事を（少しだけ）受けていたということもあったが
約3ヶ月間は2週間に1回ペースでノロノロと進めた。

その間、SHEメイトさんに「コーディングやりたくない・・でも頭にはずっとあってモヤモヤしているから完成させたい・・。」と弱音をこぼしたこともあった。😵‍💫

そしてノロノロしている間にコースがリニューアルされて、卒業制作の要件も変更された。（セクション数が少なくなったり、コース自体が分かりやすくなったり、個人的には以前よりハードルは下がった気がした）

7月に入ってから気合を入れ直し、最終的には8月末に完成。

このイヤイヤ期を脱した方法はこちら

・化石化した制作途中のサイトをプロのデザイナーさんに添削してもらい、喝を入れた（かなりドキドキした）
・もくもく会（=相談できる場）に参加できなくても、作業が進むように本を購入（コピペで使えるものが多くて大活躍した）
・もくもく会を週に3回予約して参加（質問がなくてもとりあえず予約して参加）
・コーチングや自己分析を進める中で、〇月までに〇〇になる！という目標ができた。→逆算して今やるべきことを考えた時に、サイトの完成が一番最初だった。
・いつまでに完成させます！と宣言をして、次へ進むんだという気合を入れた🔥

これをまとめると、「なんで気が進まないんだろう？」という自分の気持ちとしっかり向き合った。

わからない事ができた時すぐに解決できなくて進まないな・・なんのために作っているんだっけ・・サイトとしてちゃんとできてるのかな・・

こんな気持ちがあった。
ちゃんと考えてみれば、すぐに解決方法が思いつくものばかり。笑
考えるのが面倒くさいと自分の気持ちから逃げている自分がいた。

結局、自分の気持ちと向き合って気合を入れ直すことで
一気に作業は進んでいき完成までたどり着いた。

実際に使った本はこちら（有名どころですが・・）

📕1冊ですべて身につくHTML & CSSとWebデザイン入門講座 https://www.amazon.co.jp/gp/product/4797398892/ref=ppx_yo_dt_b_asin_title_o08_s00?ie=UTF8&psc=1
📕動くWebデザインアイディア帳https://www.amazon.co.jp/gp/product/4802612281/ref=ppx_yo_dt_b_asin_title_o07_s00?ie=UTF8&psc=1

いろいろ買うより、一個を使い倒す！という気持ちで
わからないことがあれば都度チェックしていた✍️

6.ついにサイト完成！！卒制発表会に参加

9月に入ってからは、色んな人にサイト見てもらいながらできる範囲でブラッシュアップする日々。
なんとか完成し、宣言通り9月10日の卒制発表会に参加。

卒制発表会は参加自体任意だが
「完成したら私も参加して、この優秀SHEちゃん取りたいな・・・」と思っていたので、迷わず参加。

（ちなみに発表会のアーカイブはいつもチェックしていて、いいところを盗んだり、どこを見られるのか参考にしていた😅）

最終的にできたサイトがこちら

フィードバックでは

・おしゃれすぎても病院っぽさが出すぎてもターゲットや目的と違くなってしまう。色合いや雰囲気のバランスが取りにくい中で、絶妙に合う色合いや余白の使い方、フォントの選び方ができていて、誠実さや安心して通える鍼灸院だと感じる。
・予約ボタンまでの導線がしっかりと考え込まれている。
・アイコンが多く使われていて、自分がどの情報を知りたくてどこを触ればいいのかが視覚的に（直感的に）わかりやすい。
・トップ画面も写真はないけれど、寂しさを感じず、インパクトがあり珍しい構成になっていて面白い。

などの意見をもらえた。

バクバク緊張しながらも無事に発表会を終え、念願の優秀SHEちゃんも受賞することができ、久々に味わう達！成！感！

すぐに協力してくれた先生にも報告したところ、お仕事のお話をいただくことになり（号泣）

今回のオリジナルサイト作成は、飽き性で三日坊主な私が「コツコツ積み重ねていくことの大切さ」（そう。すごく当たり前のこと！当たり前のことだが、私はちゃんと分かっていなかった。）に気付けたひとつの経験となった。

7.さいごに

本当に完成までが長く、一生終わらないんじゃないかと思ってしまう時もあった。

最初から自分のゴール設定をきちんと定めたり、作業する環境と時間を確保していたら、こんなにずるずる長引かなかったかなとも思う。

周りを見て焦る時期もあったし、体調を崩した時もあったが
ひとつひとつ自分と向き合いながら、のろまでもいいから進んでいければいいと思えた。

自分の中で感じた違和感とはしっかり向き合って

「なんでこう感じるんだろう？」「じゃあこうしたらいいか」

こんな風に自分に正直になって、これからも一歩一歩成長していこうと思う。

終わり