
vol.26 WEBデザイン勉強奮起 -デザインのドリル編-
こんばんは、
今日も1日お疲れ様です。
数日空いてしまいもうしわけありません。
体調を崩していました。
インフルも流行っているので、みなさんも体調を崩さないよう気をつけてください!!
さて、本日は2つの要素を組み合わせて、ショップカードのデザインを作成する内容になります!
1.課題内容
・要素1 写真
・要素2 ロゴ
・要素追加OK
・色は2色まで
上記の内容で、日本茶専門店のショップカードを作成します。
2.私のデザイン

ロゴを引き立てるように組み合わせなければいけないのに、いまいち見にくいものばかりですね。
①どちらかというと写真の方が目立っている…
②視認性が悪い…
③左下は、ロゴが見やすいけれど、写真との繋ぎが不自然で目がチカチカする…
④右下は、もはやロゴより写真…
Photoshopの画面ではいい感じにできたかなと思ったけれど、悪いところばかりが気になってしまう…。
できたと思っても一回、並べて見てみるとと改善点も見えてきますね。
といいうことで、それぞれやり直してみました!!

① 写真を広角にして、ロゴより目立っていたメインの画像を少し小さめにしてみました。
お茶の画像とロゴのバランスを考えて配置することで、心なしかロゴが際立つようになったかと思います!
②写真とロゴの間に、1枚シェイプをおいていましたが、色を変えてみました。
白から、暗めの色に変更しました。
白の時よりも、画像に奥行きを感じるような気がします。
ロゴとの明度に差をつけることで、よりロゴを目立たせることができるようになりました。

③右側の透明度を下げて、目のチカチカするのを抑えました。グラデーションも自然になったかなと思います。
ただ、こう見るとちょっと写真の色が半分褪せているみたいにも見えますね…。
④ロゴが全く目立っていなかったので、ロゴを大体的にしました。
ロゴが丸いシェイプなので、お茶の器に沿って丸く切り抜き水玉のように配置してみました。
なんか物足りなさと、せっかくの写真の良さを打ち消してしまっている感じが否めないですね…。
3.さいごに
ロゴの見せ方は、写真の使い方や要素の追加の仕方次第で結構印象が変わりますね。
ちょっとの事でも、位置を調整したり画像の大きさや向きを変えるだけでよくも悪くもなります。
ちょっとした違和感は、きっと私だけでなく見た人も同じように感じるはず!!
むしろ私の方が気づいてないことの方が多そう…。
でも気が付けたことは、しっかり修正することでよくなりますね。
1回目のまま終わらなくてよかったです!
今回も最後までお付き合いいただきありがとうございました!
では、また明日~!