1年前に作ったサイトをリデザインしてみた
こんにちは!久々の投稿になりました。
今日はいつものサイトレビューと違い、以前に自分で制作した架空のサイトを、もう一度作り直してみました!
制作のきっかけは、自分の成長を感じたいと思ったからです。
私は今から約１年ほど前からWEBデザイナーを目指して勉強を開始しました。最初の頃は本当にデザインについて何も知らず、手探りで色々制作していただけでした。
そこから約1年ほど経ち、今では以前よりもデザイン力がついたと思っています。(ついているといいな)そこで今回は、自分がどれだけ力を付けられたのか知るため、以前に制作した架空サイトのカンプを自分でリデザインしてみます!
以前のデザイン
以前のデザインカンプがこちら↓
かなりひどいですね...。(苦笑)
公開するのも恥ずかしいのですが、ここからどう変わったのか、見ていただきたいです。
【以前制作したサイトの情報】
制作したもの :音楽教室のWEBサイトトップページ
諸情報 :場所吉祥寺3丁目。6つのコースがある。バナーを入れる。
目的 :サイトを通じて新規顧客の増加。新規、既存顧客への情報提供。
ターゲット :①お子さんに音楽を習わせたい親御さん
②子供に音楽を習わせたい
③吉祥寺付近に住んでいる
カラー :「りんご音楽教室」をイメージできるような赤色や、子供をイメージす
るようなオレンジを使用。
コンテンツ :ヘッダー、メインビジュアル、バナー、コース紹介、講師紹介、
よくあるご質問、ご入会までの流れ、お知らせ、ヘッダー
【以前のサイトの課題点】
全体の課題点
【色】メインカラーの赤が効果的に使用されていない。色味の配置に意図が感じられない。全体的にごちゃごちゃしていて見ずらい。
【余白】余白のルールが曖昧になっている。
【フォント】もっと吟味すべき。英語は違うフォントを使う。太字との境界線が曖昧。
【写真】写真のトーンが一定でないので、統一感が感じられない。
【ヘッダー】左右に謎の空白がある。ヘッダーはその配置が本当に適当か。
【コンテンツ】音楽教室のコンセプトや想いを最初に説明した方がよい。
コンテンツごとの課題点
【メインビジュアル】キャッチコピーと写真があまりあっていない。
【バナー】色味が微妙。小さいバナーもそのデザインでよいのか。
【コース紹介】背景がピンクで無理矢理感がある。赤の塗りつぶしも見ずらく、意図していないのに視線が向いてしまう。バナー風にする必要があるのか。
【お知らせ】日付の文字がこんなに目立たなくてよい。他のコンテンツと比べると需要は少ないと思うので、もう少しさらっと見られるようにする。
【お客様の情報】
また上記の概要、課題点に加えて、お客様側の情報を付け加えました。前回のサイトではお客様の情報をざっくりとだけ考えて作ってしまったので、人の「想い」が全く見えないサイトになってしまっていました。サイト制作の上で、お客様の意向を汲むことは何よりも大切だと感じたため、もう一度設定を考え直しました。
・最近はコロナで生徒さんの数が減っているので、なんとか生徒さんを増やしたい。
・音楽の楽しさを子供達に届けたいという想いを表現したサイトにして欲しい。
・コースの先生の紹介もしたい。
・メインのお客さんは子供だが、大人でも通える。
・この教室はできてから10年ほど続いている。
新しいデザイン
上記の課題点を踏まえて、作成したサイトがこちら↓
今回リデザインしたサイトです。あくまで架空サイトなのですが、実際の音楽教室と、サイトを見るユーザーをイメージして作りました。力不足でまだ100点の出来とは言えないと思いますが、前回と比べてかなりよいデザインになったのではないかと思います。
昔と今のデザインを比較
【制作時のこだわり】
今回はビジュアルにこだわり、通ったら楽しそう!と思ってもらえるようなサイトを目指しました。
メインのターゲットが小さいお子さんがいる親御さんと考えていたので、可愛らしい印象を持ってもらえるようにイラストメインにしました。「音楽で世界を変える」をサイト全体のコンセプトとして設定し、音楽を通して色々な世界に触れる子供たちの様子をイラストにしました。
全体的なカラーも、ポップで色味は多いものの、統一感を感じられるように工夫しました。フォントは可愛らしい雰囲気を持つMplus 1pとOverpassを使用しています。
制作後の感想
今回はサイトのリデザインを行いました!最近のサイトレビューを通してピックアップしていたアイデアをたくさん使うことができたので、以前よりもかなりデザインの幅が広がったのではないかと思っています。
制作期間が約1週間ほどかかったので、もっと早くデザインできるように、これからも頑張りたいと思いました!
ご覧いただきありがとうございました🙇♀️