【自主制作】オンラインスクールの紹介サイト

OVERVIEW

自主制作:WEBサイトのデザインカンプ

YEAR 2024 - 2024

■制作期間

2024年3月30日~2024年6月5日


①要件定義

  2024年3月30日~2024年4月1日 (7日間)

②情報設計

 2024年4月8日~2024年4月30日 (22日間)

③デザイン・コンセプト

 2023年4月30日~2024年5月4日 (5日間) 

④メインビジュアル

 2024年5月6日~6月6日 (30日)

⑤ブラッシュアップ

 2024年6月3日 Total 3ヵ月


■使用ツール

要件定義:Excel

情報設計:ノート・Photo Shop

ビジュアルデザイン:Photo Shop


■目次

1)要件定義

2)制作物

3)工夫したこと

4)制作で学んだこと


1)要件定義

  • 制作概要・目的

 ①WEBサイト制作講座の実技試験

 ②オンラインスクールの紹介サイト

 ③オンラインスクールの理解促進・ターゲット層の集客


  • ターゲット

     25歳~30代前半女性

    ・「自分らしさがあまりわからない方」

    ・スキルを身に付けて、自分を変えたい方

    ・1人で過ごしている事が多く、人と繋がりたい方

    ・学ぶことで「自分」を見つけて、日々充実感を味わいたい方

    ・キャリアチェンジのTipsを見つけたい方


  • デザインイメージ 

     【デザインテイスト】

     どんな女性にも合うような、さわやかな白や青系のカラー

     情熱を持った太陽のカラー(オレンジ)も入れていきたい

     全体的に高級感・爽やかさ・シンプルを入れたデザインにしたい


  【操作性】

   CTAやQ&Aはわかりやすい操作(UIデザイン)も取り入れる

      フッターに関しても少しだけUIを入れてターゲットにストレスないデザインにする


2)制作物

【WF】

①PC版

②SP版

【デザインカンプ】

①PC版

②SP版

3)工夫した点

①情報設計

 スクールの概要が分かるように、概要やサービス、価格といった情報をいれ、

閲覧者がより深く情報を知ることができるようなセクションを設計した。

 ヘッダーとCTAセクションにCTAボタンを配置することで、ページを詳細に閲覧し

無料体験に申し込む行動を促し、一通り閲覧してから申し込む方もいることを想定し

2か所にCTAボタンを配置した。


②デザインコンセプト

 伝えたい印象・イメージを要件定義シートに書き、そこから連想する写真・カラーを

Pinterestや画像サイトから引用し、デザインコンセプトを設計した。


【Document】

P1

p2

P3

P4

4)制作で学んだこと

 伝えたい印象やイメージを単語を書き出すことで、ビジュアルデザインのアイデアが

膨らむことが分かった。

 スクール名と詳細を確認し、WEBサイト・Pinterest・画像サイトを見て連想できる

物を探すのがとても幅が広がることが分かった。


 閲覧者やターゲット層の方がサイトを見て、関心を持って申込に遷移できるように、

情報を設計することが難しいことが分かった。

 ターゲットや閲覧者目線で競合サイトを見て、どのような情報知りたいのか、

入会検討するときにどのような悩みを抱えて、変化したいと思うのか、閲覧者が

どのような悩みをスクールで解決したいのかをノートに書き出して案を出すことで、

サイトに載せる情報や構成を練ることができることを学ぶことができた。