Webスクールサイト

概要

【学校課題】WEBスクールの認知度と相談会の申込者数を増加させる為のサイト制作。
ターゲットやデザインのワイヤーフレームについてグループで話し合い、デザインカンプ作成・コーディングは個人で行いました。

使用ツール

Illustrator Photoshop XD HTML/CSS JavaScript

制作期間

2週間

担当範囲

企画 / デザイン / コーディング

制作について

目的・ゴール

WEBサイトを作成することで、スクールの認知度を上げ、WEBサイト経由での相談会への申し込みを促すこと。

ターゲット

転職を検討しているが、スキル不足で不安を感じている未経験者の30歳前後の方をターゲットとしています。
フリーランスや在宅勤務を目指し、手に職をつけたいと感じている若年層に向けて、未経験から即戦力になる為のスキルを身に着けられる点をアピールしようと考えました。

要望

・年齢・性別を問わないデザイン
・信頼感が伝わるすっきりとした印象で（カラフルやポップという印象はNG）
・爽やかで、明るく、学ぶことが楽しいと伝わる色使い
・企業カラー（＃1E2C5B）を使用し、フォントはゴシック体
・画像の支給はないが、実写写真を使ったサイトにしてほしい
・レスポンシブ対応予定だが、まずはPC版を作ってほしい

配色 　使用を希望されている企業カラーがかっちりとした印象のカラーだったので、全体のフォント色とフッター部分に使用することで、ページ全体を引き締めて信頼感が出るようにしました。
　また、さわやかで明るいイメージにするために、ファーストビューには明るい水色・緑で柔らかいグラデーションを使用しています。
　押してほしいボタンなどには補色である黄色を採用し、注目をひけるように意識しました。

全体像 　「年齢を問わないすっきりとした信頼感のあるデザインに」という依頼だった為、トップページ・下層ページのすべてでデザインの反復をさせ、統一感を出すことで安心して見られるようなWebサイトになるよう心掛けました。
　あまり固すぎるデザインだと「学ぶことが楽しい」という部分が伝わりづらいと思い、背景の枠を角丸にするなど、色使いの面以外でも柔らかな印象を与えられるようにしています。

こだわり 　こちらの学校の強みが「最短2か月でスキル取得できる」「未経験から即戦力を目指せる」という2つの部分だと考えた為、一番目立つファーストビューに見出しとして採用しました。
　ページ下部まで見ていただけるように、スクロールに応じて要素がふわっと現れるようにし、繰り返しのデザインでも単調にならないように工夫しています。
　見た方が学校に興味を持つ部分はどこかを考えた時、どのような学校かを説明している「はじめての方へ」のページが重要だと感じました。その為、全体のデザインとしてはセクションの背景色は薄いグレーにしていますが、該当ページの「選ばれる理由」の部分だけ、目を引く黄色を使用した特別な配色にしています。

　ヘッダーやフッター、ページ内のセクションの部分は、共通したデザインだったので、下層ページのコーディングの作業時間の短縮ができました。
　相談会の予約申し込みページの作り方に悩みましたが、自身でweb上で検索し、inputタグを用いて入力フォームなどを見た目上実装ができたりと、初めてのコーディングながらデザインカンプ通りに仕上げられて良かったです。
　反省点としては、トップページのNEWS部分の要素の表示位置の調整に時間がかかったことです。背景のずらしやページの端まではみ出すようなデザインは、今回は疑似要素で再現しましたが、要素の重なり順が複雑でコード自体もすっきりとしていないので、もっと簡潔に再現できるように努めます。

　まず、ペルソナの設定や学校の強みの洗い出しなどをチームで行いましたが、自分とは異なる意見やアイディアを聞くことができ、さくさくと進めることができました。
　下層ページを含むデザインカンプ作成は初めてでしたが、依頼者の要望を念頭に置きつつ、ターゲットに合わせたデザインを作成できたと思います。デザインの反復は安心感や信頼感を与えるだけではなく、作業効率自体も上がるので良かったと思える点です。
　レスポンシブを考えずに絶対値で指定していたり、コードが煩雑になっている部分があるので、反省点として次回に活かしていきたいです。

• 作品一覧へ