見出し画像

無料添削デザインスクール #243「ピアノ教室サイトデザイン」

イライジャ｜WEBデザイナー　デザイン添削おじさん

添削

ピアノ教室サイトデザインですね。
柔らかさが出ていますね。

■ヘッダーロゴ

ロゴがギューギューになっているので、サイズを小さくするか帯を大きくしてあげると余裕感が出てきます。
ピアノ教室なので、そこまでファーストビューとか気にしなくていいと思うので、余裕持って余白多めの雰囲気重視で作っても大丈夫です。

■コンバージョン

コンバージョンは右下にある「レッスンに申し込む」だと思われますが、右下に固定されているのもいいのですが、ヘッダーにも入れておくと分かりやすいです。
画面に固定するのは文章の邪魔になったりするので意外と人気がないです。

ヘッダーメニューも多いので、内容に合わせて分けてあげるといいです。

アクセス、お知らせなどの細かい情報はテキストリンクで小さく入れてもいいので、メインで見せたいものをメインのナビゲーションに入れて見やすくしてあげるといいです。

■キャッチの位置

キャッチの位置に違和感を感じますね。
ヘッダーに付いているようにも見えるので、一般的なセンターに置いてあげるといいかと思います。

写真の関係で置けない時は、写真を変えるか加工しちゃいましょう。
今回の女の子は反転しても問題なさそうなので反転してしまうとか。

これはかなり荒業ですがキャッチの位置が変なところになると違和感が出るので、落ち着きのいい場所を見つけてあげるといいです。

■文字間

Webサイトだと横が1000px以上になると横に長くなってしまい読みにくくなります。
ブログなど文章を読むサイトだと、サイドメニューがあるので文章の領域は600～700pxくらいにしていることが多いです。

文字間も空けすぎるとスカスカして読みにくくなります。

これはWebだけではなくて紙媒体などでも言えることです。
読ませるものは読みやすく、読まれなくてもいい装飾としてのテキストは派手に作る。
その切り分けをしてあげるといいです。

■写真の置き方

写真の置き方ひとつでも見え方が大きく変わります。
現状のだともの悲しく見えますね。

横に合わせてあげるだけで写真が大きくなるので印象が強くなります。

思いっ切り画面いっぱいにするとより写真の印象が強くなります。

ブログなどのサイトの時は写真よりも文章が主役なので写真を小さくすることが多いですが、雰囲気重視のサイトでは教室の雰囲気が分かりやすいように写真を大きく見せることが多いです。

■押しの要素

一番押したい要素なので、バナーのように作り込んであげるといいです。
このくすんだ黄色とシャドウなどで全体がボケて文字などが読みにくくなっているように感じます。

シャドウなしでパキっとしたテーマのピンク色だけでまとめて、差し色に黄色くらいがいいかと思います。
黄色は目立つのですが、白文字が読みにくいとか弊害が多いので、メインの背景で使う時は調整が難しいです。

文字のサイズ調整だけでも見やすくなるので、あとはここに色や画像を足してあげるといいです。
さらにすぐ下にアクションにつながる「申し込みボタン」とか置いたらいいかな。

■薄い色

全体的にパステル調で可愛い雰囲気なのですが、部分的に薄すぎてブラウザによっては見えない人が出てくるように感じます。

色盲の人など障害者まで完璧に対応しなくていいとは思うのですが、少しだけ見やすいようにしてあげると誰にでも見やすいサイトになります。

■ベタの強さ

上で使ったピンクのベタ背景は目立たせるために使いましたが、ベタというのは強いです。
多用するとサイトの印象が重くなります。
区分けが分かりやすくベタを使っていますが、線とかでも十分区分けできるように思います。

ベタはここぞというところで使うといいです。
普段使いすると見にくいサイトになります。

■タイトル回り

コンテンツとコンテンツの間が狭いように感じます。
タイトル回りに余白を入れてあげると空間も生まれてゆったりした雰囲気になります。

区分けも分かりやすくなるので見やすいです。

まとめ

全体の雰囲気作りなどはしっかりできているので、あとは細かいパーツの作り込みや、余白の取り方などを作り込んだらもっとよくなりそうです。

パーツなどの引き出しも増やしていくと色んなパターンを作ることができます。

基本はよさそうなサイトのパーツを真似したりして作るといいです。
何度か作っていると体が覚えて、自分のものになります。
そんな感じで引き出しを増やしていくといいです。

デザイン添削のご依頼はTwitterから！

Twitterで投稿された作品を添削しています。
添削を希望される方はTwitterにハッシュタグ「#デザイン添削希望」を付けて投稿してください。


この記事が気に入ったらサポートをしてみませんか？