

#19 ホームページをリニューアルしました!
お久しぶりです。
長らく更新していませんでした…てへ。
ついに、ホームページをリニューアル完了!!やったーー!やっと終わったーー!
てなわけで、今回はリニューアルしたホームページの紹介です。自慢させてください。
トップページ
まずはトップページ。
最初に作り始めたのに、完成したのは最後でした。修正がいっぱいでね…。
サービスの顔となるトップページ。頑張りましたよ~。
ヒーローイメージ
サイトを開いて最初に表示される部分をヒーローイメージといいます。(諸説あり)
第一印象を決める大事なところです。今回は他社さんにはない、e-Liveならではの強みをアピールしたかったので、講師とサポートスタッフをスライダーで表示しています。
また、実際に親御さんからいただいたご感想の「もっと早く始めていれば。と、思いました。」を一緒に表示。e-Liveをご検討していただく方に向けた約束のような宣言です。
その下にはe-Live生徒さんの写真を載せました。会員の方で「私も載せていいよ!」という方は担当までご連絡ください…。
今週の指導
スクロールすると、「今週の指導」というテキストスライダーが上にくっついてきます。これは、e-Live講師が毎授業後に担当に提出する指導報告書から抜粋しています。今日はどういう授業をしたのか、生徒さんはどんな授業態度だったのかなど、実際の授業の様子を知ってもらう目的で設置しました。オンライン家庭教師というサービスが広く知られるようになったものの、イマイチどんな感じなのかわからない…というお声をいただくので、コイツには一役買ってもらいます。
全体の長さ
以前のトップページをご存知の方からすると、「なんか短くなった?」という印象を持たれるかも。その通りです。短くしました。
家庭教師を探されている方の目的は、多岐にわたります。それだけお求めの内容もいろいろあるということです。だもんで、見たい内容を選んで見に行くというサイトにしました。(パソコンでは)メニューを常に表示。UI/UXの観点からも気にして、各ページから他のページに飛べるようにしました。いろいろ飛び回っていただけたら幸いです。
トップページへ➜➜
強みページ
e-Liveの他社さんには無い強みを3つにしぼってアピールしました。
トップページでもそこだけ”重なる”ように表示して、「ここを見てくれ!」とアピールした(つもり)ので、見てくれると嬉しいなあ。
また、挿絵は上司に注文して描いてもらいました。わざわざありがとうございます。
講師と個別指導について
このページはテキスト多めでちょっち反省です。でも他にどう伝えればよいのやら。
その分、ライティングには気を遣ったので、面倒でも読んでほしいです。e-Liveの何が他社よりすごいのか?という内容が詰まっています。
ちなみにこのページで使われている講師の集合写真ですが、私たちは”講師ブーケ”と呼んでいます。花束みたいでかわいいでしょ。
講師と個別指導について➜➜
サポートについて
cssで円状の画像をくるくる回すやつ、あれ大好きなんです。このページは上司が担当したのですが、「くるくるさせて!」と注文しました。
このページでアピールしたいのは、e-Liveのサポート体制の手厚さです。講師に授業を任せっきりにせず、講師と連携をとる独自性を表現したかった!
ので、敢えてスクロールさせずに、ご家庭・サポート担当・講師の関係図とともに説明を表示させています。
ぶっちゃけ、サポートに関してはこれさえ伝われば十分です。というか、結局ご家庭をどうサポートするかはご家庭次第なので、「こういうサポートします!」という詳しい内容を載せられないんです。だもんで短かめ。
サポートについて➜➜
指導料金について
ここは…見やすさ最優先で、そこまで凝っていないです。料金に関しては見やすいのが一番。
それと、以前のページから料金シミュレーションを引継ぎました。実際いくらなんじゃろ?という方はぜひご利用ください。
ちなみにちっちゃいこだわりがあって、料金表とシミュレーションの小学生/中学生/高校生のボタンは連動しています。料金表で中学生に切り替えると、自動でシミュレーションも中学生モードに切り替わります。ドヤァ。
指導料金について➜➜
講師紹介ページ
ここは追々改善したいです…ちょっとUIがよろしくない。
講師がずらーーっと並んでおり、選択すると詳細プロフィールを表示。ここまではいいんだけど、スクロールする箇所が3箇所もある!講師一覧、詳細プロフィール、そしてページ全体。マウスの場所によって何がスクロールするか変わるので、混乱しちゃうなあ。
スマホ表示ではポップアップでモーダルが出るので問題はありません。もしかしたらパソコンでもスマホと同じ表示方法にするかも。
何かいいアイデアがあれば、ご一報ください。
講師紹介ページ➜➜
中学受験ページ
以前の中学受験コースのページは、習得したばっかのcssテクニックを使いたがってUIが犠牲となりました。反省。
今回はシンプルに、通常のe-Liveの内容と重複することは省きました。その結果、合格プランをアピールするページに。
合格プラン
講師紹介ページのように、スマホではポップアップ、パソコンでは表示切り替えを採用。合格プランにボタンをマッピングして、詳細を見れるようにしました。こっちは使いやすいはず…。
ただ、内容があくまで”例”なので、そこがどうかな~といった印象。結局問い合わせていただいて、お子さんのカウンセリングをしないとわからない内容なので難しいですね。
中学受験ページ➜➜
まとめ
今回リニューアルしたことで、もうしばらく大幅なアップデートはしません。変更があればそこだけ変更…といった感じでサイトを育てていきます。
そんなわけで、このブログもしっかり再開しないと…