30日でWebスキルを獲得して副業で稼ぐことができるようになるための30日チャレンジ!
本日はDAY15!
本日からいよいよサイトを実際に作成をしていきます!
新しい知識が必要!とかは徐々になくなってきますが、今まで学習してきた知識をフルに活用をしていきますので、適宜今までの学習内容も復習しながら進めていきましょう!
それでは、今日も引き続き頑張っていきましょう!

Dave(Xアカウント)
【記事作成者プロフィール】
オーストラリアのラグビーとサッカーのチームでメディカルトレーナーとして活動したのち、Web系フリーランスに加えて、デイトラ公式YouTubeチャンネル運営として活動中。
DAY15のポイント
- ゴールの確認
- 同ジャンルのサイト調査
- お題の確認



今回作成するサイトの元となるテンプレートはDAY14で導入が完了していると思いますのでそれを活用して作成を進めていきましょう!
ゴールの確認
こちらが今日から作成をする初めてのサイトです!
「仮想英会話教室」を作っていきましょう!
※サービスの特徴の上の余白だけ少し大きく入ってしまっているので、完成系では調整をしていきます。
※サイトの色味についても完成系は変更されております。
同ジャンルのサイト調査
ここからは実際に依頼があった場合も同様の流れになります!
例えば以下のような設定のクライアントさんであると想定をして、実際に見てみましょう!
(サイト作成の流れなども後日学習をしていきますので、まずは少しステップを飛ばして作成の段階から進めていきます!)
基本情報
詳細 | |
名前 | Dave |
年齢 | 42歳 |
職業 | 英会話教室の経営者 |
所在地 | 愛知県 |
ビジネス状況
詳細 | |
規模 | 小規模な英会話教室を運営(生徒数30名程度) |
特徴 | 大手スクールとの差別化として、アットホームな雰囲気と個別対応を強みとしている |
現状 | SNSは活用しているが、Webサイトは持っておらず、問い合わせがDMや電話経由のみ |
Webサイトを制作の目的
詳細 | |
目的 | 教室の基本情報(アクセス・コース・講師紹介)をまとめたシンプルなサイトを作りたい |
希望するサイトの特徴
詳細 | |
イメージ | シンプルでわかりやすいデザイン(派手な装飾は不要) |
その他要望 | 最低限のコンテンツ構成 WordPressなどのCMS導入は不要 |
予算と納期
詳細 | |
予算 | 10万円程度(低コストで抑えたい) |
納期 | 1ヶ月程度(急ぎ目) |
懸念点・不安
詳細 | |
懸念点 | Webに詳しくないため、専門用語はわかりづらい |
その他 | 運用後の管理を簡単にしたい |
この内容をもとにWebサイトにどのようなコンテンツを盛り込んでいくか、どんなデザインで作っていくかを決めます。また、この他にも同ジャンルの会社さんやサービスサイトがどのようなコンテンツを盛り込んでいるか、どんなデザインを採用しているかの調査を行います。(内容をコピーすることはNGです)
1つ1つ検索をして調べるのはなかなか現実的ではないのでそんな時に役に立つのが
「ピンタレスト」というツールです。百聞は一見にしかずということで実際に見てみましょう!
数多くの英会話教室のWebサイトやLPサイトが見ることができたんじゃないでしょうか?色々みてみて、どんなコンテンツや内容が記載されていることが多かったですかね?どんなデザインが目を引きましたかね?
このようにして調べていき、どのようなコンテンツを入れた方がいいのか、クライアントにもこちらから提案することによって喜ばれたりもしますし、何より充実したサイトを作ることができるのでこの工程も必須ですね!
それではこれまでの情報をもとにお題を決めてきましょう!
お題の確認
ここまで定まったところで、サイトに入れ込むコンテンツやデザインなどをまとめていきます。
入れ込むコンテンツ
- FV(ファーストビュー)
- 私たちについて
- サービス紹介
- スクールの特徴
- 受講生の声
- 広告欄
- アクセス
カラー設計
- メインカラー:ネイビー(#2C3E50)
- サブカラー:ライトブルー(#3498DB)
- アクセントカラー:オレンジ(#E67E22)
フォント
- 日本語フォント:Noto Sans JP
- 英語フォント:Roboto
以上の内容を踏まえてサイトを作成していきましょう!
今回のコンテンツだとあまりカラーを変更するところは少ないですが、実際ではもっとコンテンツ内容も多いので本番を想定してやっていきましょう!フォントに関しても、今回のテンプレートでは英語のみが記載されていますが、日本人向けのサイトですので日本語も使用するため、フォントもそれに合わせて変えてみましょう!
まとめ
明日からは本格的にサイト完成を目指して作成をしていきます!
本当のお仕事ではここまでさくさく内容が決まっていくことはあまりないかもしれませんが(詳しいサイト作成の手順などは改めて後日解説をしていきます!)
それでは明日からまた難しい内容になると思いますが、今日でちょうどこの30日チャレンジも半分が終了したところです!引き続き頑張っていきましょう!
課題に挑戦!
本日の課題は
- ピンタレストで英会話教室のサイトについて調べてみる
- 英会話教室以外にもさまざまなサイトを見てみる
デザインを決めるにしても、いきなりアイディアが湧いて出てくるもではありません!
色々と調べたり、実際に触れてみて自分の中にストックが蓄積されるにつれて、さまざまな素敵なデザインアイディアが出てきますので、最初はなにをすれば良いんだ…ってなると思いますが、皆さんその段階を経て今活躍をされているので、少しずつレベルアップしていけるように引き続き学習を続けていきましょう!
それでは今日も頑張っていきましょう!