ママスペースWebデザイン講座課題 DRINK MENU
提出1回目
素材写真自体がドリンクにフォーカスされていることもあり、
1回目の提出ではポスターのようなイメージで作成していた。
(後の指摘により認識)
・難しかった点
①文字を映えさせること
→背景に暗い箇所と明るい箇所が混在していて
部分的に文字が読み辛くなるところがあったため、
黒背景を不透明度40%で敷き、文字色を引き立たせた。
②画像のドリンクを活かしたレイアウト
→ドリンクに視線をフォーカスしたかったので
背景写真の色味を少しだけ変更・不透明度を90%とし、
ドリンクの写真だけを切り抜いたもの(色味変更なし)を
上から貼り付けて際立たせた。
→「DRINK MENU」の印象が弱まらないよう
白枠をつけてタイトル感を出した。
講師からのアドバイス
今回のバナーはサイトのメインメニューになるような大きなボタンなので
ドリンクの画像を立たせる必要はない。
画像を透過してきちんと「背景」にすることで、文字の視認性を上げる。
なんのために作られたバナーなのか「目的」を考えることが大事。
・知りたいこと
トリミング、拡大縮小、色調補正はOKなようなので、
その延長で勝手に素材写真を左右反転させてしまった。
これは実際にお仕事をする場合に問題ないか。
#人の顔やキャラクターはだめかと思ったが 、
#物ならセーフなのかと思ってやってしまった 。
講師からのアドバイス
画像の反転はほぼしない。
素材のまま活かすデザインを考えるか、素材を変える。
指摘を反映した提出2回目
ボタンとして使用されることを踏まえて修正。
・難しかったところ
カクテルの主張に負けないように文字を目立たせたこと。
→背景写真にぼかしをかけ、不透明度を下げることで
カクテルを背景に馴染ませた。
・知りたいこと
不透明度を下げると全体的に画像が白っぽくなってしまい、
背景に敷いた黒地が浮いたり、白文字が目立たなくなってしまった。
今回はぼかすことで対応したが、透過やぼかし以外にも手法はあるか。
講師からのアドバイス
不透明度を下げる以外に背景のインパクトを下げる方法として
画像の上に5〜10%くらいの白または黒の長方形を重ねる等がある。
黒透過20%の長方形を背景に重ねたもの
白透過10%の長方形を背景に重ねたもの
→今回はぼかしたり白い長方形を重ねるよりも
黒い長方形を透過20%でかける方が落ち着いた印象になり
文字が映えるように感じた。
この記事が気に入ったらサポートをしてみませんか?