デジハリ卒業制作について
こんにちは！デザイナー就職活動中のフジショーです。
今回はデジハリ在学生の方達に聞かれることが多かった卒業制作について、
まとめていこうと考えています。自分の場合、周りに知り合いが誰もいない状況下でのスタートだったので、これから卒業制作に悩んでいる方たちの参考になれれば幸いです。
概要
私が制作させていただいたのは、神戸の元町にある人気カフェ
カフェデアゲンダさんです！（サイトは非公開になっています。）
Instagramのフォロワーが一万人以上、年間100種類のケーキを制作している昭和レトロでおしゃれなカフェ屋さんです。
当時やっていた制作の流れとしては、以下のとおりです。
4/17 クライアント様決定
4/17~20 提案書・企画書作成
-------------- 制作期間 --------------
4/21 直接お店に行き、ヒアリング
4/22〜5/1 ワイヤーフレーム作成
5/1〜5/24 デザイン作成
5/24～6/20 実装
提案書→企画書→ヒアリング→デザイン→コーディングといった流れで進めて行きました。実装については担当トレーナーさんからの確認・修正を経て、実装しました。
この頃は毎日、ずっと学校にこもって、昼の13時〜夜の21時まで制作をしていました。魅せ方や構成を考えたりデザインを作り込んでいくのは大変でしたが、いろんなことを学べて個人的にはすごく楽しかったです。
完成したデザインを先生方に見せたら、「これ、結構コーディング難しいよ」と言われてビビりましたが、なんとか納品1週間前に完成できました。以下はその詳細になります。
自分が作ってみたいサイトを作る
当時通っていた美容師さんのサイトを作ろうと思っていたのですが、サイト運用の仕方や、レンタルサーバー代のこととかも含めて、自分の説明や準備不足のせいで断られてしまいました。なので、急遽卒業2ヶ月前に新しいクライアントさんを探すことになりました。大分遅めのスタートだったと思います。
いろんなデザイナーの方やフリーランスの先生に相談した結果、「自分の作りたいサイトを作った方がいい！」ということになり、当時レトロなデザインにハマっていたので、神戸の有名なレトロなカフェのサイトを作ろう！と決めました。
情報収集
まずはとにかく情報収集から始めました。
ネットでホームページを持っていなさそう、かつ、インスタグラムのアカウントを持っているカフェにターゲットを絞りました。
有名なカフェや飲食店は必ずといっていいほど、インスタグラムのアカウントを持っています。なので、まずはお店に直接DMを送って、反応がなければ、「直接お店に凸る」を考えていました。
以下が当時送っていたメールの内容です↓
二日間、10件以上のお店にDMを送っても、案の定返信は返ってきませんでした。なので、お店に凸ることにしました。
飛び込み営業
いきなりお店にいって、「Webサイトを作らしてください！」といっても、ただの不審者になるので、忙しくない時間帯を狙い、まずはお客さんとしてお店に赴こうと考えました。そして会計終わりに名刺を渡して、「もしよろしければWebサイトを作らしてください」とお願いしていました。
その時に渡した名刺です↓
営業用の名刺デザインです🌱
— フジショー｜Web Design (@fujishou4) April 19, 2023
制作時間：4時間
コンセプト：青色と四角形で信頼感、誠実さを表現し、ぼかしを入れて全体的に柔らかい印象にしました。#今日の積み上げ pic.twitter.com/dJ39vu5XvN
その結果、2件目にして、オーナーさんから直接、「Webサイトを作ってほしい」という電話でのご連絡をいただき、無事に卒業制作先のクライアントさんが決まりました。本当に運が良かったとしか言えないです。
ちなみに一軒目のカフェ屋さんでは、以前はホームページを持っていたそうですが、商品の追加や更新が手間だと感じ、そのため手軽にできるインスタグラムで十分だとおっしゃっておりました。
今回のカフェデアゲンダさんも例外ではなく、インスタグラムでほぼ集客はできているので、ホームページはいらないとおっしゃっていました。でも自分が学生ということもあり、無料で作ってくれるのなら一度任せてみようということになったそうです。
このことから、ホームページとインスタグラムとの差別化とWebサイトのメリット、デメリットをしっかり伝える必要性を感じました。
企画・提案
前回の失敗の経験を踏まえた上で、まずは提案資料とヒアリングシートをしっかり用意しました。
今まで提案資料やヒアリングシートといったものを、一度も作ったことがなかったため、先に卒業制作が決まっているデジハリの同期の方や先生に聞きまくっていました。（あの時は助けていただいて本当にありがとうございました🙇）
以下が当時制作した提案資料とヒアリングシートになります。（今見ると色々詰めが甘すぎますが…）
①DMが1日に20件以上。
②お店の場所が分かりづらい。
③どこに車を止めたらいいのかわからない。
というお問い合わせがよく来るということで、お問い合わせフォームはなし、マップを乗せようという感じで、サイト構成を決めていきました。
クライアントさんとのやりとりについては、週に一回ほど進捗報告を含めて、直接お店でしていましたし、お仕事が忙しい時は、LINEでデザイン画像を送って、「これくらい進んでます！」という報告をまめにしていました。
ときには、お客さんが空いている時間を狙って、クライアントさんと昔から仲良くしているというカフェのオーナーさんに直接話を聞きにいったりしました。
そんな感じで、ワイヤーフレーム→デザインという流れで制作していき、つhぎはいよいよコーディングに移ります。
コーディング
デザインも大変でしたが、コーディングが一番大変でした。というのも、レスポンシブのことを全く考えていないデザインを作ってしまったからです。
クライアントさんの意見や要望を何でもかんでも「いいですね！」と採用した結果、完成した後に「これどうしたらいいんだろう…」と悩みました。
しかし、「なんとかなるだろう！」と思ってやってみたら、結果なんとかなりました。この経験から、人間は思い込みが大事だなと学びました。
ただ、今になって思うのは、デザインやコーディングの技術を勉強することも大事ですが、それ以上に保存されているコンテンツのカテゴリーや内容をわかりやすくする工夫が重要だということです。このときにディレクトリの構造やCSS設計をきちんとしておく癖を身につけておくべきだったと思います。
ディレクトリ構造を分かりやすくすることで、サイトが管理しやすくなり、バグやエラーが発生したときに問題の発生場所を迅速に特定することができます。これを意識しておくだけで、後々の実務で役立つと思います。
CSSも、それぞれのクラスに対して「margin-top: 10px; margin-bottom: 5px;」のような記述をせずに、「mt_20px」といったクラス名を予め決めておく方が、重複した記述を避けるために便利です。
一人でやる分には何を書いても問題はありませんが、自分が書いたコードがどこにあるのか分からない！となると、上司やチーム全体の時間を奪ってしまいます。ですので、自分だけが分かるクラス名はあまりお勧めしません。
納品
実装が終わり、完成したサイトをクライアントさんに見てもらうと、クライアントさんはとても喜んでくれたので、ホッと一安心しました。「藤本君にサイト制作を頼んでよかった！」とありがたい言葉もいただき、デザインを作る楽しさを当時はすごく実感しました。
今はクライアントさんの状況の変化もあり、サイトは非公開となってしまいましたが、デザインを勉強したてのひよっこが、神戸の人気カフェのホームページを作らせていただけたことは一生の宝物になりました、
振り返り
今になって卒業制作を振り返ると、本当に数多くのことを学びました。デザインやコーディングのスキルだけでなく、クライアントとのコミュニケーションやプロジェクトの進行管理など、多岐にわたる経験をデジハリ学生時代に積むことができて本当に良かったと思います。
最初は知り合いもいない状態でスタートし、色々な困難にも直面しましたが、なんとか乗り越えることができました。この経験を通じて、思い通りにいかないことも多いプロジェクトの現実を学ぶことができました。
これからもさらなるスキルアップを目指して頑張りたいと思います。
最後まで読んでいただき、ありがとうございました。
フジショー
この記事が気に入ったらサポートをしてみませんか？