- 『けっきょく、よはく。』で有名なingectar-eさんが制作したFullmeの体験記です。
- Web Design 初級コースの Lesson 12 のまとめ！
こんにちは、涼太郎です。
この記事は、デザイン書籍『けっきょく、よはく。』でお馴染みのingectar-eさんが提供するFullme Web Design セットコースの体験記録です。
今回は、初級コース Lesson 12の範囲で僕が学んだことのまとめをしていきます。
Fullmeに興味があってこれから挑戦してみようと思っている方でもネタバレにならずに楽しんでもらえるように、かつ僕自身の振り返りに役立つような内容にしていきたいと思いますので、ぜひ最後までお付き合いくださいね。
Lesson 12 バナー制作（焼き菓子ギフト）
Fullme Web Designコースの第12回目は「バナー制作（焼き菓子ギフト）」がテーマです。
実践：３分割レイアウトを使った焼き菓子ギフトのバナーデザイン
今回はスイーツギフトセットのバナーを制作していきます。
同じ素材を使って600×300の大きさと300×300の大きさのバナーを作りました！
600×300
出来上がったものがこちら👇
左右の三分割構図になっています。
300×300
出来上がったものがこちら👇
こちらも三分割構図ですが、各要素のサイズを小さめに配置しています。
使用フォント
全部で3種類のフォントを使用しています。
サンプルに似たフォントを選んでいまして、
「BAKE SWEETS」「2024」にはモリサワフォントの BodoniMO Pro を、
「焼き菓子ギフト」にはモリサワフォントの A-OTF A1明朝 Std を、
「Summer」にはフリーフォント(?)の Snell Roundhand を選びました！
サンプルで使われていた貂明朝は、Adobeフォントなのでいつも羨ましいです。
A1明朝は太さが変わらないウェイトがひとつのフォントなので、あまりよくないことかもしれませんが文字に線を追加して太く見せています。
画像
今回の画像はunsplashからお借りしております。
焼き菓子の種類を調べて、クッキーとマカロンとフィナンシェの画像を配置しました。
背景が白っぽい画像を選んでバナー全体の色が明るめになるようにしています。
また、花柄の画像は以前Design Cutsで購入したセットの中からこちらを選択しました。
レイヤー効果の「輝度」を使うことで、背景に置いている四角形の色相・彩度はそのままに、重ねた花柄画像の輝度を採用することができるみたいです。そのため上に乗せている花柄画像のオレンジっぽい色は無くなっているんですね。
そのほか工夫したところ
焼き菓子ギフトの文字とお菓子の画像の間にある図形を少し透過させることで、お菓子が見える広さを大きくしています。300×300だと画像の表示領域が小さくなってしまうのでそれを補えればいいなと思っています。
感想
600×300のバナーはもう一方に比べると少し作りづらかったです。なんでだろう、バナーの大きさに対して載せる内容がそんなになくて間延びする感じがあったからかな？余白とどう違うのかよくわからないですけどなんとなくそんな印象を持ちました。
他には、サンプルに似すぎてしまってオリジナル感を出しきれないのがもうちょっと頑張らなきゃと思いました。
結果、どちらも上手くできたからよかったです＾＾
完成品
最後に、もう一度作成したページの画像を載せておきます。
Webデザインを学びたいなら、Fullmeしよう。
依頼を受けたバナーのサイズと提供された画像の相性が良くないとかそういう困ったことがありそうだなと思いました。
色々な経験を積んで対応力を高めるのが大事ですね！
ここまで読んでくださったあなたもFullme体験しませんか？
こちらの書籍がおすすめ。
