デジLIG卒業制作完成まで①
こんにちは。はっしーと申します。
2024年デジタルハリウッドSTDIO by LIGに5月生として入校し、12月より卒業制作がスタートしました。
今回はあくまで自分の記録として卒業制作サイトの制作過程や、デザイン、実装について書き溜めておこうと思い、noteに書いてみました。
誰かの何かの参考になればと思います。
01.概要
1.クライアント情報
今回作成させていただいたのは、知人である鍼灸師の方の鍼灸サロンのサイトです。
昨年ある整骨院から独立された方のサイトをリニュアル？新規？させていただくことになりました。制作することになった経緯は下に書いてます。
クライアント： 鍼灸サロン こころ様
サイトタイプ ： ウェブサイト
目的 ： 新規顧客獲得 お店のブランディング力
ターゲット ： 50代以上の方、施術者のご家族様、 訪問リハビリをご希望される方、病気を予防したい方
担当範囲 ： 企画、デザイン、制作、実装
（その先はどうするか決めていないそうです）
2.サイト制作の経緯
数年前から父が訪問してもらっている鍼灸師の方が整骨院から独立し、新たに鍼灸サロンを1年前にオープンしました。私が卒業制作で何を作ろうか困っていたタイミングで、無料で制作していただけるならと了承を得て、制作が決定しました。
企画をする前に、制作が決定していてから卒業制作が始まるまで、１ヶ月弱あったのでとにかく先に参考サイトだけは集めておきました。
私は何かと効率が悪く、他の生徒の方よりもこだわっているのか、ちょっと分かりませんが、何かとすぐ遅いのでどれだけ先に進めておくかを目標にしていました。
02.企画
クライアントの要望は「問い合わせが増えれば良い」というもので、ターゲット層やサロンのコンセプト以外はほぼお任せされました。初期段階での情報整理に多くの時間を要し、miroを使って必要な情報を洗い出しました。
1.情報整理
思いつくことをMiroに書き出し、その後企画書を作成しました。最初のバージョンでは「作り込みすぎ」と指摘され、シンプルに修正しました。修正前と修正後では、必要な要素を絞り込んだ結果、最終的には「クライアント情報」「ターゲットユーザー」「現状」「競合分析」「サイト目的」「サイトゴール」「コンセプト」「サイトマップ」などに簡略化されました。
2.サイトコンセプト
「安心」と「希望」が溢れる癒しの空間
3.デザインコンセプト
最初は「朝」「日の出」「明るい未来」をイメージしましたが、具体的なデザインへの落とし込みが難しく、「午前中の部屋」をイメージして柔らかく温かみのあるデザインに決定しました。
次にデザインや実装に関する具体的なプロセスを紹介します。
03ワイヤーフレーム
1.プロセス
最初は、内容や文章がまだ整っていなかったため、ワイヤーフレームを作っても何を伝えたいのかが不明瞭でした。そこで、まずは文章を作成することから始めました。親しみやすさを保ちつつ、安心感や信頼感をどう表現するかを試行錯誤しながら考えました。デザインチェック日まで残り2週間しかなかったので、ワイヤーフレームをトレーナーさんに見せることに時間をかけるのは避け、次に進むことにしました。
最初は、UIの構成が非常に難しく感じられ、「めんどくさい」と思いながらも、手を動かして進めることを心がけました。その結果、1日15時間くらいの作業時間を費やしながらも、試行錯誤しながらデザインを進めていくことになりました。
2.感想
ワイヤーフレームを作成する際、完成度の高い文章やコンテンツがなくても、サイトの構造を決めるための重要なステップであることに気づきました。特に「親しみやすさ」や「安心感」をどのようにビジュアルやレイアウトに反映させるかが課題でしたが、それを通じてデザインに対する考え方が深まりました。
04素材について
1.素材集め
最初、写真が全くない状態からスタートしました。特に、サービスが始まったばかりで、写真素材も一切揃っていませんでした。そのため、Adobe Expressなどを使って無料の素材を集めましたが、高齢者向けのリハビリ写真は全く見つからず、あっても不自然に感じるものばかりでした。最終的には、手元など部分的な写真に切り替えて、なんとか素材を集めましたが、それ以上の写真を追加するのは難しいです。ないと思いたいですね。
2.撮影の選択肢
自分で撮影をしようとも考えましたが、他人の家に訪問することになるため、迷惑をかけることになってしまうと思い、今回は諦めました。クライアントワークでは、特にサービスがまだ整っていないお店や、訪問系のサービスでは写真撮影が難しいことが多いと実感しました。早くクライアント様に言っておけばそれか早く無料素材を集めておけばと後悔です。
3.時間の制約
時間が足りない中で、最初は写真がない場合、アイコンやイラストを使おうとも思いました。しかし、時間がないことから、AIで作成したイラストやアイコンを使用するのは難しいと感じました。AIで作成すると親しみが感じられず、機械的になったり、3D風になってしまうことが気になりました。そのため、最終的には写真を使用することが一番だと感じました。写真があることで、クライアントやユーザーに雰囲気を伝えることができ、安心感を与えることができると確信しました。
4.これからの方に向けたアドバイス
素材集めは早めに集める
サービスがまだ整っていない段階では、写真素材が揃っていないことが多いため、早めに素材集めに取り掛かることをお勧めします。もし撮影が難しい場合、できるだけ早い段階でクライアントに協力をお願いし、素材を整えるようにしましょう。少なくとも1枚か2枚の写真があれば、サイトに温かみや信頼感を加えることができます。
撮影の計画を立てる
撮影が必要な場合、他人の家にお邪魔することになったりするので、お店で写真を撮影させて懐くことになるので事前に撮影計画を立て、クライアントに協力をお願いすることがスムーズに進めるコツです。また、撮影が難しい場合でも、可能な範囲で手元や雰囲気が伝わる写真を集めることを優先しましょう。
時間の管理に注意
卒業制作は時間が限られているため、写真集めや素材作成の段階で無理に完璧を求めず、時間内にできる範囲で進めることが大切です。AIを使って作成することも選択肢にありますが、親しみや安心感を大事にする場合、写真が最も効果的です。
アイコンやイラストも選択肢に
写真がどうしても用意できない場合、アイコンやイラストを選ぶことも検討しましょう。ただし、時間や内容に合ったものを選び、無機質な印象を避けることが大切です。イラストでも、親しみや温かみを感じさせるものを選ぶようにしましょう。
05.デザインについて
01.プロセスと感想
最初、デザインに取り組んだときは、自分の思うがままに作っていたため、参考サイトを真似て作ることを勧められ、たくさん試行錯誤をしました。しかし、フィードバックを受けると、字間や文字の大きさが気になると指摘され、少し混乱してしまいました。次第に自分の方向性がわからなくなり、何が正解なのか迷いました。
デザインについては、配色にとても悩みました。私はデザインが得意ではないので、他のチームメンバーのようにスムーズに進めることができず、クオリティも良くないので、チェックで褒められることも少なくありません。途中で萎えてしまいました。でも、悔しかったので、どんなにプライベートの時間があっても、毎日10時間以上デザインに費やしました。その結果、デザインが嫌になり、「もういいや」と思ってしまうこともありました。
特にカフェや美容院などのサービスサイトに関しては、参考になるものが多いですが、私のような特殊なケースでは、参考サイトがほとんどないため、本当に苦戦しています。例えば、訪問対応エリアや料金表のデザインは、よくあるメニュー表のように簡単に解決できるものではなく、国が定めた料金なので、細かく分けて表示しなければならず、それに合わせたデザインを考えるのが大変です。今まさにGoogle先生に頼りながら出てきそうな単語で検索し、いいサイトがないか頑張って探しています。
02.もし誰かの役に立つのなら….
これから卒業制作でデザインする方に向けて誰かの役に立つなら私が学んだことを書いておきます。
試行錯誤を恐れずに挑戦する
最初は何が正解かわからないかもしれませんが、試行錯誤を繰り返していく中で、自分のデザインに対する理解が深まります。最初から完璧を求めず、どんどんトライしてみてください。フィードバックを素直に受け入れる
素直に受け取れない時もあるとは思います。フィードバックを受け入れ、そこから学ぶことが重要です。最初は戸惑っても、最終的には自分の成長に繋がります。時間をかけてデザインに向き合う
デザインは一度に完成するものではありません。特に初めての経験であれば、時間をかけて丁寧に作り込みましょう。毎日コツコツと取り組むことで、成果が出てきます。自分のデザインを信じる
他人と比較してしまうこともありますが、自分なりのデザインの良さを信じて作り続けることが大切です。最終的には、自分の強みを活かしたデザインが他の人に伝わります。参考サイトの限界を感じたときの対処法
参考サイトが見つからない場合、自分で検索し、Googleや他のリソースを活用してアイデアを広げていくことが大事です。自分のアイデアに自信を持って、新しい方法で解決策を見つけましょう。学んだことを次に活かす
最後には、これまでの経験や学びを活かして、より良い作品を作り上げることができます。どんな困難も成長に繋がると信じてくださいね！
06.最後に
今でちょうど制作開始から１ヶ月が経ちました。大変とは聞いていましたが、より実感しております。いまだにデザインが終わらずこの先にコーディングや発表会には間に合うのかが不安になってきています。特殊なケースのサイトなので頭フル回転しつつ、わかりやすさはもちろんのこと、安心と希望を持てるサイトに近づけるように全力で頑張りたいと思います。
私の後半１ヶ月もまた投稿しますのでお読みいただければ幸いです！