MENU

Web制作30日チャレンジDAY15

【DAY15】無料テンプレート「仮想英会話教室」作成①
  • URLをコピーしました!

30日でWebスキルを獲得して副業で稼ぐことができるようになるための30日チャレンジ!
本日はDAY15!

本日からいよいよサイトを実際に作成をしていきます!
新しい知識が必要!とかは徐々になくなってきますが、今まで学習してきた知識をフルに活用をしていきますので、適宜今までの学習内容も復習しながら進めていきましょう!

それでは、今日も引き続き頑張っていきましょう!

デイトラWeb制作チャンネル

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日チャレンジも半分が終了したところです!引き続き頑張っていきましょう!

課題に挑戦!

本日の課題は

  • ピンタレストで英会話教室のサイトについて調べてみる
  • 英会話教室以外にもさまざまなサイトを見てみる

デザインを決めるにしても、いきなりアイディアが湧いて出てくるもではありません!
色々と調べたり、実際に触れてみて自分の中にストックが蓄積されるにつれて、さまざまな素敵なデザインアイディアが出てきますので、最初はなにをすれば良いんだ…ってなると思いますが、皆さんその段階を経て今活躍をされているので、少しずつレベルアップしていけるように引き続き学習を続けていきましょう!

それでは今日も頑張っていきましょう!

【DAY15】無料テンプレート「仮想英会話教室」作成①

この記事が気に入ったら
いいねしてね!

#デイトラ30日チャレンジ でシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次