• 英会話教室架空サイト

    英会話教室架空サイト

    制作サイト情報

    ※ドメインを解約したため、現在画像でのみ閲覧可能です。もし閲覧ご希望でしたら当方PCに当時の作成データがございますので、そちらをお送りすることは可能です。

    制作時期・期間

    2018年9月21日~2018年10月19日の約一ヶ月。作業人数1人、作業時間約100時間(企画構想、英会話教室業界の情報収集、デザイン、コーディング含む)。尚、この間就職活動も行っているためあくまで目算となっております。

    制作サイト概要

    英会話教室「artoss」のクライアントからサイトリニューアルの依頼を受けたという事を想定し、シングルページのサイトを制作しました。

    サイトの目的

    売上アップ・認知度アップによる集客としました。

    ターゲット

    30、40代の親御さん。とりわけ子供のお受験を考えている比較的裕福な層の親御さんに設定しました。
    ターゲットの設定理由はまず通常の家庭ではそもそもお受験という選択肢はあまり一般的でないため富裕層の親御さんに設定。また受講料も他社よりも比較的高めに設定してある点。

    コンセプト

    将来グローバル社会で活躍できる人材を育成する英会話教室としました。
    コンセプトに関してはページ内の「選ばれる3つの理由」内で述べている「artoss」最大の持ち味である高い有名校輩出率(93%)、定着率(退校率4%)を提示することによりターゲットを納得させる狙いがあります。

    意識した点

    ターゲットの世代は仕事や家庭と時間にタイトで忙しい人が多いことを想定したため、シンプル、見易さ、機能性を重視。更に年齢層も決して若くはなく比較的富裕層に設定したため高級感や基本モノトーンで落ち着いたデザインを意識。また、どこでも閲覧できるようにするためマルチデバイス対応も意識。

    高級感や落ち着いた雰囲気を出すのに明朝体、中央揃え、余白をしっかり取る、黒色が効果的であるという情報を見聞きしたのでこれらの事を意識してレイアウトをしてみました。

    フッターのカラフルな装飾はグローバル社会で活躍できる人材を育成するといったコンセプトに沿い、実際に各国の国旗で使用されている色を幾つか使用しモノトーン調のサイトにアクセントとして取り入れました。

    参考・参照サイト

    今後の目標

    アイコン等を除く画像は今後必ず大きいもの(少なくとも元々1000px以上)を採用したいと感じました。講師紹介部分に使用した画像のタブレット表示の際画像サイズが足りなかったため適切な調整が行えませんでした。今後は使用する画像だけでなくサイズも意識していきます。

    スマホやタブレットの通常表示(縦)は特に問題を感じませんでしたが、端末を縦から横に変化した際講義内容・料金の背景画像が足りていなかったり、メインビジュアルが切り替わらない等の不具合を確認。現状の自分で修正できた箇所もありますがマルチデバイス対応の難しさを経験することが出来ました。

    また、chromeの検証では問題なく表示されていましたが、サーバー上で各端末(当方iphone6=スマホ,d-tab/d-02H=タブレット,ノートPC,デスクトップPC=1920×1080)にて確認するとそれぞれ違った挙動が発生することも知ることができ今後に活かしていきたいと感じました。

    やはり経験勉強不足が原因か余分なコードが多い(特にCSS)と感じているので今後も勉強を継続し少ない時間とスマートなコードを目指していきたいと考えております。もし当サイトをご覧になられた方がいらっしゃればご意見等お待ちしております。