【Webデザイン】卒業制作記録（1/3）事前準備編
7-8月の2カ月かけてWordpressまで実装・事前準備編
こんにちは！小林と申します。
前回自分のポートフォリオサイトの振り返りをnoteでした際に、思ったよりブログを書くのが疲れたので卒制記録するときは書き溜めとこう！と思っていたのにすっかり忘れてました。
制作過程での学びがとても多く、自分のスキルとしてきちんと記録しておきたいな！と感じたのでこの二カ月間を思い出しながら残しておこうと思います！
また、ポートフォリオサイトでの制作実績をまとめる上でも一旦全部まとめておいた方が情報の整理もしやすいな…という下心もありです。
めちゃくちゃ長いです！！笑
気になるところだけ読んでいただければ…笑
今回の記事 ： 卒業制作記録（1/3）事前準備編
次の記事 ： 卒業制作記録（2/3）デザインからコーディング編
次の次の記事： 卒業制作記録（3/3）WordPress実装編
私のプロフィールを簡単に…
・今年の3月から（ほぼ2月）デジLIGでWEBデザインの勉強を開始
・3-6月で基本的なツールスキル（PhotoShop/illustrator/AdobeXD）を取得
・WordPressに関しては独学で勉強(5月~)
・絵を描くのが得意
・本気で転職したいので今は離職中で時間はかなりある方
という感じです。前回は合計〇時間で～というまとめ方をしてましたが、今回（この夏）は趣味のことをしたり、推しの誕生日ラッシュがあったりと不規則な時間の取り方をしていたので制作期間をざっくり「２カ月」としています。
（推しの誕生日ラッシュときいてピンときた方はお仲間です。握手！）
今回は通っているデジLIGの卒業制作です。
6カ月という期間の最後の２カ月で、これまで学んだことを総括してデザイン～コーディングまでをやりましょう！というものになります。
卒制については本家LIGさんのブログに詳細載ってますので
どんなものを作るの？なんで作るの？という方はこちらからどうぞ！
01-何をテーマにしようかな
過去の卒業生の制作物をみていると
①クライアントワーク：実際の顧客に（大体）無償でサイトの制作を行う
②架空サイトの制作：自分でテーマを決めてサイトの制作を行う
③ポートフォリオサイトの制作
④その他
が私の感覚ですが4：3：2：1くらいの割合でいるな～という感じでした。
私は①②の二択で、正直ブランディングも含めると②ってめちゃくちゃ難しいじゃん…？と思ってやりたい気持ちもあったんですけど、私はデジLIGに入ったときから頭の片隅で数社のクライアントさんを本当に勝手ながら候補にいれてました。
私の場合、元々営業（IT系）という仕事をしていたので
お世話になったお客さんに今度は新しい価値で恩返しができれば、と思い一つのクライアントさんにご連絡しました。
6/16 ： クライアントへ依頼分をメールで送付
クライアントさんには快諾していただきました。
やりとりをしていくうちに「私のほうが楽しみなってきました！」というお言葉もいただき、絶対良いものを作る…(;;)と心に決めました。お忙しい中、お付き合いいただき本当にありがとうございました……
※この時点で
・金銭はかからないこと
・出来上がったサイトを必ず使わなければならないわけではないこと
の２点は事前に伝えています。
02-事前アンケートの作成と送付
今回私が制作したクライアントさんは
「紅茶のレッスン」を起点にティータイムを充実させるためのティーサロンになります。提供しているレッスンはすべてオンラインのものになります。
選んだテーマなどにより人によって事前準備や制作方法はやり方が変わると思います。
私の場合はクライアントと物理的な距離が離れていることと、クライアントが私より圧倒的に忙しいことを考えてとにかくクライアント側に手間をかけさせないというのを一番大事にしていました。
ヒアリングやチェックいただく際は、どうしてもこちらの都合で時間を取らせてしまうな…という気持ちもあったので、卒制側で求められるであろうスケジュールより基本＋１週間くらいは余裕をもたせることにしました。
卒制あしたミーティングなので
— kobayashi : デジLIG3月生 (@okomeusagiohana) June 29, 2021
完成までにどれくらい時間を要したかメモ感覚でついったに残しておくよ
6/28 事前アンケート作成
6/29 クライアントに事前アンケート送付#webデザイン勉強中
事前アンケートの作成
できるだけ相手側の手間を省くために、アンケート内に簡単なスケジュールも加えてクライアントに送付しました。
以下がアンケート内容です。
元々WiXで制作されていたサイトもあったので、そこから引き継ぐ内容の有無のほか、クラウドワークスやランサーズの案件の中で「要望すること」から逆引きしたり…、デジLIGのLIVE授業からヒントをもらったりして簡単にですが質問と回答例をまとめてクライアントにGoogleフォームで送りました。
アンケート[機能面]
①サイト制作にあたり上記の現在の項目の中で不要になるページはありますか？
②現在のコンテンツの以外に必要なコンテンツはありますか？
③重複しているページや似ているページは統合しても大丈夫ですか？
④※個人的な汎用性のない質問なので控えます
⑤写真の提供は可能でしょうか？
⑥サイトで一番実現させたいこと・目的はなんでしょうか？
⑦サイトのターゲット層を教えてください
アンケート[デザイン面]
⑧もし現時点でこんなサイトにしたいなぁ…というイメージが既にあればサイトURLをおしえてください。
⑨特にイメージがない場合は下のサイトの中だとどれがサイトのイメージに近いですか？数字をお選びください。※実際はURLとイメージ図も送付してます
⑨ー１ ： ・シンプルだけどコンセプトがしっかりしている上品なサイト
⑨ー２ ： ・シンプルだけど人の温かみを感じられるようなサイト
⑨ー３ ： ・シンプルだけどイラストがあってかわいい感じのサイト
⑨ー４ ： ・高級感があり格式高いサイト
⑨ー５ ： ・ディテールが細かいメインカラーで統一されたサイト
⑨ー６ ： ・手書き感のあるかわいさに振り切った感じのサイト
⑨ー７ ： ・派手だけど世界観が統一された物語のようなサイト
⑨ー８ ： ・グラデーションが綺麗なパステルカラーなサイト
⑩上のA-E以外にピンとくるキーワードがもしあれば教えてください。
⑪サイトに使いたいイメージカラーを教えてください。※何色でも可です！
⑫好きな色を教えてください。※何色でも可です！
⑬ロゴは現在と同じものを使ってもよろしいでしょうか？
⑭※個人的な汎用性のない質問なので控えます
⑮その他ご要望がありましたら教えてください！
Googleフォーム便利ですねーー！まだ回答もらってないときに、追加で質問思い出し１問こっそり付け足したりしました笑
03-企画書・WF作成 そしてトレーナーチェック
卒制では１グループ（月生の数や卒制に参加する人の数によって違うと思うけど大体7人前後？）につき1人トレーナーがついてくれます。
私のグループのミーティングは7/30に実施しました。＠オンライン
卒制の趣旨と、トレーナーチェックのスケジュール…などの説明を受けます。ここのミーティングに関してはトレーナーで色が違うと思いますが…とにかく「まず誰か一人にだけ」突き刺さるサイトを作りましょう！と言われてだいぶ心に余裕ができました。
7/10が企画書チェック日でしたので、それまでに企画書とWF・ロゴを制作。
事前アンケートでのクライアントの要望から参考サイトを決定し、情報の取捨選択をしてサイトマップとワイヤーフレームを作成しました。
提出したWF
企画書 トレーナーFB
もうちょい、企画書に「アイコン・イラスト・写真」のどれかを挟むと見やすいかも
「果たしてこの企画書が本当にクライアントに対して分かりやすく伝えることができているか。長文でつらつらと書いていないか、大事な個所のをきちんと強調できているか。企画書・その中の言葉こそデザインしてください。」
う～～～ん本当にこれだけで卒業制作に参加してよかったなと思いました。デジLIGのカリキュラムではもちろんスキルを当たり前に習いますが、「実務をいかに想定しているか」をしっかりと指摘してくれます。
とりあえずまとめるか…なんて気持ちでいた訳ではないですが、改めて企画書の見直しもしました。
WF トレーナーFB
・ローディング画面に出る文字が長すぎる
→ローディングはあまり長くなってもよくないのでここにあまり字を割かないほうが良い
・headerナビに「HOME」がない
→WEBデザインをかじっている人ならロゴ＝HOMEと認識できるかもしれないが、そうでない人のためにHOMEをhederナビに表示した方が親切
・ABOUTの文字を、今より2行ほど短くすると良いかも
→長すぎると読まない可能性
・体験者の声が、いくつかあると良いかも
・「コラムの更新率をあげたい」とのことなので、コラムは3つほど表示すると良いのでは？
・footerの情報も欲しい
・footerの上に「lesson申し込みボタン」があっても良いかも
→ユーザーが一番下までスクロールしたときに、次へのアクションを促してあげた方がいい。そのためのfooterの情報であったり、最後のコンバージョンボタンの配置を考える
・03ページの「オンラインスタッフ」のレイアウトが微妙（笑）
→…( ；∀；) 里見八犬伝みたいと言われましたｗｗｗ
ミーティング中は私とは全く違う業種のサイトだったり、０からブランディングしたサイトだったりの他のメンバーのフィードバックも一緒に聞いたりできるので、今後自分がそのサイトを作成する際にもう…絶対欲しい情報じゃん…とめちゃめちゃ勉強になりました。SEO、ライティング、マーケティング、写真撮り…まだまだ勉強することはたくさんありますね。
7/10
— kobayashi : デジLIG3月生 (@okomeusagiohana) July 11, 2021
卒制メモ
・企画書チェック
→FB→企画書なおす
明日
👩💻WF指摘箇所なおす
👩💻デザインにはいりたい#webデザイン勉強中
あとは中間課題のWFでも言われたのですが、WFに少しデザインが入ってきてるというのが今回も指摘されたので、ここはまだ私の課題ですね。
そんなこんなで次回はデザイン～コーディングについて書きます！次の次のWordPress実装について一番書きたかったので次回はそこまで長くはならない、はず…！ここまでお読みいただきありがとうございました！
おまけ-ロゴ制作について
せっかくなのでロゴ制作についてもここで書いておきます。
クライアントさんはすでにロゴを使っていましたが、今回新しく制作してもOK！とのことだったのではりきってロゴ制作も行いました(^▽^)
実は元々のロゴが本当に素敵でイラレデータに直すくらいかな？と思っていたので内心少しプレッシャーでした…笑
クライアントさんについては前述しましたが紅茶のレッスンサロンをひらいています。以前購入していたこちらの本と
その時たまたまLIGブログでロゴの記事を出されてたので参考にさせていただきました！
まずサイトのデザインと違ってクライアントさんの「ロゴの好み」はいまいち想定できず、どんな感じがいいですか？と聞いたところで困らせてしまうかな…と思ったのでとにかく「社名」から想定できるものと
紅茶や、クライアントが好きなものを色々組み合わせてラフを作成し、そこから絞っていくことにしました。
ロゴなんちゃってポジショニングマップ
とんでもなく字が汚いですが、とにかくロゴイメージを吐き出して、そのロゴの意味合いを説明したものをクライアントへ送付しました。
（さきほどリンクを貼った書籍を読んだ方ならご存じかと思いますが）ロゴの種類の違いや、利用想定イメージなんかも一緒に送っています。
ここからクライアントさんが４つまで絞ってくれました！！ありがとうございます！ここまで来たらもうサイトを作ってから、そのサイトに一番合うものにしましょう、と本来（？）とは逆の方法でロゴをブラッシュアップしていきました…笑
最終的に一つに絞ってから、それをさらにブラッシュアップしています。どのロゴに決定したかも次回！かきます！
おまけまで読んでくれてありがとうございました！
━━━━━━━━━━
ツイッター @okomeohanausagi
ポートフォリオサイト https://kobayashimarika.jp/
━━━━━━━━━━
次の記事