30日でWebスキルを獲得して副業で稼ぐことができるようになるための30日チャレンジ！
本日はDAY23！
昨日は大ボリュームの課題お疲れ様でした！
今日からは最後のサイト制作を行っていきましょう！2つ目のサイトはFree Blocksを使って作成を進めていきましたが、今回はFree Kitsを使って作成をしていきましょう！Free Blocksを使った作成もだいぶん素早く作れたと思いますが
Free Kitsを使うともっと早く作成をすることができますのでそちらを学習していきましょう！
それでは、今日も引き続き頑張っていきましょう！
Dave(Xアカウント)
【記事作成者プロフィール】
オーストラリアのラグビーとサッカーのチームでメディカルトレーナーとして活動したのち、Web系フリーランスに加えて、デイトラ公式YouTubeチャンネル運営として活動中。
DAY23のポイント
- 「仮想カフェサイト」ゴールを確認する
- ピンタレストで類似サイトを調査する
- 構成の確認をする
いよいよ最後のサイト作成ですね！
このFree Kitsもとても便利なツールですのでこちらを活用して学習を進めていきましょう！
「仮想カフェサイト」ゴールを確認する
今回は、Free Kitsと言われるサイト全体のテンプレートを活用して行きましょう！
それではいつも通り類似サイトの確認とサイト構成の確認からやって行きましょう！
ピンタレストで類似サイトを調査する
早速今回も、1つ目と2つ目のサイト制作の時と同様に、以下のような依頼があったと想定して、どのようなサイト構成がいいか、コンテンツを追加すべきかを考えていきましょう！類似サイトの調査も前回同様に「ピンタレスト」を活用していきましょう！
基本情報
| 詳細 | |
| 名前 | Dave |
| 年齢 | 28歳 |
| 職業 | カフェ飲食の経営者 |
| 所在地 | 愛知県 |
ビジネス状況
| 詳細 | |
| 規模 | オフィス街にあるカフェを運営 |
| 特徴 | いつもと少し違った海外風の 雰囲気作りを意識したカフェです |
| 現状 | 新しくカフェをオープンしたので それに合わせてサイトを作って行きたい |
Webサイトを制作の目的
| 詳細 | |
| 目的 | お店のコンセプトや雰囲気や どんなメニューが提供されているかを伝えたい 気軽に問い合わせをしてもらえるようにしたい |
希望するサイトの特徴
| 詳細 | |
| イメージ | 海外風なオシャレな異空間 |
| その他要望 | お問い合わせ機能を追加して欲しい お店の様子がわかる写真を多く載せたい |
予算と納期
| 詳細 | |
| 予算 | 20万円程度 |
| 納期 | 1ヶ月半〜2ヶ月程度 |
懸念点・不安
| 詳細 | |
| 懸念点 | お問い合わせ機能にお金はできるだけかけずに作成をしたい |
| その他 | デザインに詳しくないので丸っと 上の特徴などを踏まえて基本的にはお任せをしたい |
実際のお仕事ではこう言った内容を実際に、制作を行う前にクライアントとMTGを行い内容を決めていきます！
このMTGでいかに共通認識にできるかどうかがで作成のしやすさはもちろんのこと、完成後の修正も少なく済ませることができます。そのため事前打ち合わせはとても大事なところの一つです！
そしてこれらのヒアリングの内容をもとに、構成を考えて行く段階では是非ピンタレストなどを活用してみてください！
構成の確認をする
カフェのサイトってたくさんあってそれぞれの個性やお店の雰囲気によってサイトも異なりますよね！
今回のお題では海外風をイメージした異空間のカフェという題材なのでそれを意識した内容にしつつ
コンテンツとしてはお店の雰囲気が伝わるギャラリービューのような画像一覧を配置していきたいですね、あとはお問い合わせフォームも入れられるようにしましょう！
入れ込むコンテンツ
- FV（ファーストビュー）
- Feature(お店の特徴)
- Gallery(写真一覧)
- Farm fresh(扱っている商品の特徴)
- menu（商品メニュー）
- お店の情報（アクセス）
- お問い合わせ
- フッター
カラー設計
今回はテンプレートのデザインカラーを活用していきますので、ここは省力させていただきます！
ですが最後の作成課題でもあるので、デザインの学習の回の動画やChatGPTなども活用して自分オリジナルの色に変更していただいても大丈夫です！
フォント
- 日本語フォント：Noto Sans JP
- 英語フォント：テンプレートのフォントを活用
まとめ
いよいよ明日からこの30日間チャレンジの期間中3つ目の作成でそして、最後の制作物を作って行きます！
明日と明後日の2日間が大きな山場ですので、あと少し乗り越えて行きましょう！
それが終わってからも大事な内容を学習して行きますので楽しみにしていてくださいね！
それでは引き続き頑張って行きましょう！
課題に挑戦！
本日の課題は
- 「仮想カフェサイト」ゴールを確認する
- 要件を確認して画像を用意する
明日以降の課題作成でカフェの画像を多く使用しますので、カフェのメニューっぽい画像などをいくつか用意しておきましょう！もちろん明日以降の作成のタイミングでその都度用意していただいても大丈夫です！
それでは、今日も頑張って行きましょう！
