- 『けっきょく、よはく。』で有名なingectar-eさんが制作したFullmeの体験記です。
- Web Design 初級コースの Lesson 13 のまとめ！
こんにちは、涼太郎です。
この記事は、デザイン書籍『けっきょく、よはく。』でお馴染みのingectar-eさんが提供するFullme Web Design セットコースの体験記録です。
今回は、初級コース Lesson 13の範囲で僕が学んだことのまとめをしていきます。
Fullmeに興味があってこれから挑戦してみようと思っている方でもネタバレにならずに楽しんでもらえるように、かつ僕自身の振り返りに役立つような内容にしていきたいと思いますので、ぜひ最後までお付き合いくださいね。
Lesson 13 バナー制作（ハンドクリーム）
Fullme Web Designコースの第13回目は「バナー制作（ハンドクリーム）」がテーマです。
実践：日の丸レイアウトを使ったハンドクリームのバナーデザイン
今回はハンドクリームのバナーを制作していきます。
同じ素材を使って300×300の大きさと160×600の大きさのバナーを作りました！
また、色違いでも作成してみましたよ！
300×300
出来上がったものがこちら👇
色違いもありますよ👇
160×600
出来上がったものがこちら👇
使用フォント
全部で3種類のフォントを使用しています。
サンプルに似たフォントを選んでいまして、
「Pomi hand cream」「Pomi series」にはモリサワフォントの BodoniMO Pro を、
「NEW」や縦書きの日本語にはGoogle Fontsの Kiwi Maru を、
「4.5 Debut!」にはGoogle Fontsの Parisienne を選びました！
Fullmeでは基本的にAdobeFONTSからフォントが指定されるのですが、今回は代替フォントの提案がありました。
後で代替フォントの記載を見たらKiwi Maruが一致していました！
画像
今回の画像はunsplashからお借りしております。
こちらの画像をペンツールで切り抜いて使いました。
切り抜きたい形に沿ってペンツールで縁取った後は、線無しにして何色でもいいので塗りのみにする。
縁取り図形を複製しておく（これが後で色を重ねるための図形になる）。
写真の彩度を下げてモノクロにする。さらにその他の編集もしておく。
縁取り図形を写真の後ろに配置して、マスクとして使用を適用すると写真が切り抜ける：⌘ + Ctrl + M
複製しておいた図形の色をつけて、レイヤーの設定を「オーバーレイ」にして写真の上に重ねる。
このようにして、元々はピンクっぽかった写真の商品に自分で色をつけることができました。
感想など
Figmaで縦書き文字を作るには、「フォントサイズ」「行間」「テキストボックスの横幅」を同じにして、和文フォントを選択する。
句読点や伸ばし棒も縦書きにするには、右メニューのテキスト領域にある「…」から「その他の機能」→「Vertical alternates and rotation」にチェックを入れる。
縦書きはAffinity製品にもぜひ欲しい機能！
今回はペンツールを駆使してなめらかな図形や写真の切り抜きをしました。
マウスでペンツールを使うのはちょっと難しいですね。iPadだったらApple Pencilを使って直感的に線を引けるから便利。マウスでの練習もぼちぼちやっていこうと思いました。
完成品
最後に、もう一度作成した画像を載せておきます。
Webデザインを学びたいなら、Fullmeしよう。
バナーサイズや色のバリエーションを複数用意しておいて顧客に提示することでより納得してバナーデザインを決めることができそうですね。
今回は色を変えるのはそれほど労力がかかりませんでしたが、要素が多くなってくると大変なのかなと思うので、その辺りをうまく管理できる方法が知りたいところ。
ここまで読んでくださったあなたもFullme体験しませんか？
こちらの書籍がおすすめ。
