ママスペースWebデザイン講座課題 DRINK MENU

提出1回目
素材写真自体がドリンクにフォーカスされていることもあり、
1回目の提出ではポスターのようなイメージで作成していた。　
(後の指摘により認識)

・難しかった点
　①文字を映えさせること
　→背景に暗い箇所と明るい箇所が混在していて
　　部分的に文字が読み辛くなるところがあったため、
　　黒背景を不透明度40%で敷き、文字色を引き立たせた。
　②画像のドリンクを活かしたレイアウト
　→ドリンクに視線をフォーカスしたかったので
　　背景写真の色味を少しだけ変更・不透明度を90%とし、
　　ドリンクの写真だけを切り抜いたもの(色味変更なし)を
　　上から貼り付けて際立たせた。
　→「DRINK MENU」の印象が弱まらないよう
　　白枠をつけてタイトル感を出した。

講師からのアドバイス
今回のバナーはサイトのメインメニューになるような大きなボタンなので
ドリンクの画像を立たせる必要はない。
画像を透過してきちんと「背景」にすることで、文字の視認性を上げる。
なんのために作られたバナーなのか「目的」を考えることが大事。

・知りたいこと
　　トリミング、拡大縮小、色調補正はOKなようなので、
　　その延長で勝手に素材写真を左右反転させてしまった。
　　これは実際にお仕事をする場合に問題ないか。
　　 #人の顔やキャラクターはだめかと思ったが 、
　　 #物ならセーフなのかと思ってやってしまった 。

講師からのアドバイス
画像の反転はほぼしない。
素材のまま活かすデザインを考えるか、素材を変える。

指摘を反映した提出2回目
ボタンとして使用されることを踏まえて修正。

・難しかったところ
　カクテルの主張に負けないように文字を目立たせたこと。
　→背景写真にぼかしをかけ、不透明度を下げることで
　　カクテルを背景に馴染ませた。
・知りたいこと
　不透明度を下げると全体的に画像が白っぽくなってしまい、
　背景に敷いた黒地が浮いたり、白文字が目立たなくなってしまった。
　今回はぼかすことで対応したが、透過やぼかし以外にも手法はあるか。

講師からのアドバイス
不透明度を下げる以外に背景のインパクトを下げる方法として
画像の上に5〜10%くらいの白または黒の長方形を重ねる等がある。

黒透過20%の長方形を背景に重ねたもの

白透過10%の長方形を背景に重ねたもの

→今回はぼかしたり白い長方形を重ねるよりも
　黒い長方形を透過20%でかける方が落ち着いた印象になり
　文字が映えるように感じた。