Blog

  • デジハリ

デジハリ卒業制作 ー入学して4ヶ月目(WF編)ー

デジハリに入学して半分の期間が終わりました!

入学して4ヶ月目、折り返し地点です!夏休みやお盆シーズンも挟んだためプライベートの優先度が高くなかなか思うように作業が進みませんでしたが、今月から本格的に卒業制作に突入です!やったことをまとめます!

企画書最終調整

8月末にあったオリエンテーション発表に向けて、企画書の最終調整をしました。全体を通しての流れは前月に出来上がってたのですが、配色周りだけ後回しにしてたので配色を決めにかかります。

配色決めが私の中では結構悩んだところ

クライアントからの要望では、空や海、森をイメージできる色合いで。という要望があり、青・緑系を使うことに。

青だけで何色あるのか…?アンミカさん的には200色でしょう。

そこからどう絞るかです…。。。長いこと思考停止をしてましたがちゃんと向き合うことに決心。

まず、ロゴの色である青をメインカラーとして、アクセントカラーに夜景や海、芝生・森がイメージできる紺・緑・黄色を探すことにしました。pinterest見たり、配色本を見たりしましたが最終的にはcoolorsという配色ツールを使いました!

こちらの配色ツールは、指定した色に合う色をスペースを押すとどんどん探してくれるツールでとても使いやすい…!なんだかんだ色に迷ったらいつもこれを使ってます。

色が決まったら、実際に落とし込んだ時に変じゃないかを確認したいので、palettemakerという配色ツールに色を入れて大体のイメージを膨らまし、色を決定。

(その後、ここで決めた配色は盛大にボツになるので、ここの配色決めはふーん。へー。くらいに読み飛ばしてOKです。)

企画書OKが出たのでワイヤーフレーム作成に

ワイヤーフレーム(WF)作成方法

作成方法として、私は最初はどこに何のコンテンツを置くか、長方形にコンテンツ名を書いて置くだけでページ数とコンテンツ内容を確認。オートフレームとかなんにもやってません。

ページ数分、何のコンテンツを置くかを決めた後、次に必要文章(キャッチコピーとかではなく、価格とか最大人数とかの絶対に書かなくてはいけない文章)を書く書く。。。

ここで予約サイトと現行サイトにいくつか噛み合わないところとかが見つかるので、整合性を保つためにも早めにクライアントに確認できるから早めにやってよかった…。と思ってます。

次に写真を置く場所を作ったり、アイコン準備したり、ちょっとだけデザイン性を持たせたWFへと仕上がりました。

最後にキャッチコピーを私は考えました。(時間がかかるし、変わる可能性があるので)

  1. ページとそのページに何のコンテンツを置くかタイトルだけ載せたページを全ページ分作成
  2. 必要文章を記載
  3. 写真、アイコンなどの部分追加
  4. キャッチコピーなども考え、仕上げ

最終的にはWordPress化を見込み、404ページとかも含めると全部で11ページになりスマホ版も含め22ページ分用意しました!

WF作る際にしたこと

WF作成するにあたり、キャンプ場や元気ポップ系のWebサイトやポスターはめっちゃ見ました!レスポンシブした時はどうなるんだろう?今でも悩むと見に行くので参考サイトはChrome上に開きっぱなしです。

あとは、写真の縦横比、適当に作ってたのを今回は黄金比を意識して作ることにしました。

なのでfigma上に黄金比率、プラチナ比率、など必要そうな比率を先に作ってそれをコピーして必要なところに埋めていきました。縦横比を変えなければ問題ない!

そして、Webサイト制作の本を一つ借りて読みました。figmaのコンポーネントやバリアブルが使いこなせてなかったことに気づき、今回はタイトル・ヘッダー・フッターだけではなく、お問い合わせのそれぞれの行などもちょっとした部分にも今回はコンポーネントとして登録して作り上げました。複数ページ作る時にはコンポーネントはとても役に立ちそうだぞ…!


ゼロからはじめてプロになる HTML/CSS&伝わるWebデザイン [ HIROCODE. ]

そんな中、打ち合わせが3回リスケに。。。

クライアントのキャンプ場では、夏に夏祭りなどのイベントがあって、それの準備が忙しいようで。リスケが3回続きました。。。今回の制作は私が依頼ベースであることもあり、想いの強さに差があるような気がしました。

仕方がないことではありますがその時はメンヘラ状態に。フリーランスになったらこんなことが都度起こるのかと思うと立場の弱さやら将来のことを考えたりすると気持ちは落ち込むばかり。

そんな時も話を聞いてくれる旦那さんやクラスのママさん、トレーナーさんのおかげで気持ちが爆発しないで耐えられたかなと思います…!みんなありがとう✨

やはりイベントが続いて忙しいようで現時点ではメールは返ってくるので今は落ち着いてます。笑

確認しないと進めない内容や写真の提供なども必要になるので、ページ数も多いし、これ以上もう待てない!って日程になったら、クライアントワークをやるということに執着しすぎず、自主制作サイトとして進めることも視野に入れ始めました。(完成してから見せて、それで気に入ったら使ってもらおうかなーくらいの軽い気持ちでいようと。)

想像していなかったことも起こり、トレーナーさんにそういうことって現実的によくあるのか?なども相談できていい機会になったと思ってます!!

クライアントワークは転職前に一つはやりたいと思ってたので、お仕事トライという、卒業後にクライアントワークを4ヶ月かけてやるコースを追加する決意をしたので、卒業制作へのクライアントワークではないと!という気持ちが少し軽くなったように感じます。

そんなこんなで卒業制作のオリエン発表会!

オリエン発表会では、どんなサイトを作るよ、を発表する場所です!企画書の詳細については以前の記事で紹介してます!

一人5分で、企画書+WFができてたら説明してね、という感じでした。オリエン授業では授業1時間あって、そのあと発表が続きます。1人5分の発表でもフィードバックを含めると一人当たり15〜20分くらいかかり、2時間じゃ終わらないです。

私たちのクラスは9人で11:00~14:30までかかりました!笑

WFが全てできていても企画書メインでしゃべってトップページのみ紹介、という感じでした。ただここで担任から「企画書OK!」と言われた人は次回の企画書発表会では企画書は軽くでWFやデザインをメインで話してね、という形に。

私たちはmetalifeで2日前にリハーサルをして5分くらいで説明できるか?をやりました!やったおかげで発表にどれくらい時間がかかるかわかったり、この内容を喋ったほうがいいかも?と学べることができ、また本番は緊張もそこそこに発表することができました!

結局のところ、私を含めみなさん時間はオーバーしてました!笑。けど大幅にオーバーすることはなく、そして担任は全体的にめっちゃ褒めてたのも練習したおかげかな?と思います。大成功です。

来月はデザイン月間かなあ

カレンダーを見るとワイヤーフレームに1ヶ月かかってる…!土台が大事だとは思うけどちょっとかけすぎたかな…。実作業だったらこんなにかかっていいものなのか心配。

中間課題が早めに終わって中だるみしてたのかもしれません。けどここからデザインが始まる…!私の苦手なデザイン…!!終わりが見えないデザイン…!トレーナーにガンガン質問して進めていこうと思います…!!気合いだ!!!!

Page Top