第三回目のサイトは"とまとと"さん（https://tomatoto.jp/）のサイトトレースに挑戦 アビルキャンプリゾート ■なんのサイト? →トマトを中心とした食事や観光、宿泊ができるサイト ■ターゲット層 →トマト好きな20代~30代 ■配色 メインカラー #FFFBF6 ベースカラー #CB2E27 アクセントカラー 特になし？ ■書体 Yu Gothic ■レイアウト ２カラムレイアウト 気付いた事 長い文章 size 11~15px 最大フォントsize
第二回目のサイトは"アビルキャンプリゾート"さん（https://habilecamp.com/）のサイトトレースに挑戦 アビルキャンプリゾート■なんのサイト? →大自然の中で夜空の空間を体験しながら楽しめるキャンプ場サイト ■ターゲット層 →20~30代子持ちの旅行好き家族層 ■配色 メインカラー ##000000 ベースカラー #F4F4F4 アクセントカラー #B39A3A ■書体 Sawarabi Gothic ■レイアウト １カラムレイアウト 気付いた事 長
今回はXDに慣れる為にサイトのトレースを開始。 第一回目のサイトは"まるざ発芽玄米研究所"さん（https://maruza.jp/）のサイトトレースに挑戦しました。 まるざ発芽玄米研究所■なんのサイト? →自然栽培の発芽玄米専門店サイト ■ターゲット層 →30~40代の健康志向で子持ちの主婦（料理にこだわり有） ■配色 メインカラー #B39A3A ベースカラー #FFFFFF アクセントカラー #B39A3A ■書体 Noto Serif #231815 ■レイア
3月~4月までまったりではあったが、今まで何故かやってこなかったバナー模写を20回やってみて思った事を書いてみようと思った。 そもそも何故バナー模写をやって来なかったかwebデザイナーを目指している人や実際に未経験からwebデザイナーになった人などの記事やブログ、SNSを見て大抵の人がまず一番初めに行っているバナー模写を何故やって来なかったか。 今、自分で改めて思うとillustraterやphotoshopのスキルがないため、「どうやったらいいか分からない」が一番の原因だ
使用ソフト : photoshop 制作時間：1時間42分 反省点・photsohopでのパターン作成に少し時間がかかってしまった。 ・黄色い枠内に文字を綺麗に入れたり、文字同士の行間や字間の調整が大変だった。 気付いた事良く見ると、”スマホ決済を検討されている〜”の文章とその下にある"15,000円"の幅がぴったり合っておりそこの微調整が大変だった。 あとは15,000円の部分の文章や0円の文字の背面にはストライプ上でさらに影が付いており賑やかに見せている。 背景に
使用ソフト : photoshop 制作時間：29分 反省点・グラデーションがうまく馴染まなかった ・コントラストを上げすぎた 気付いた事グラデーションはいつも２色だけを使用していたが、見本を良く見ると3〜４色ほど使って茶色からどんどん白になる色を組み合わせている。 文字の外側にドロップシャドウがかかっている上に文字が配置された右側には薄くて黒いグラデーションが入っている。その黒のグラデを背景に加える事によって文字が目立ち左側に配置された食べ物（松茸）も綺麗に目立つ
使用ソフト : photoshop 制作時間：23分 反省点・女性の写真に一切加工を加えなかったがもっとコントラストを上げて作るべきだった。 ・今回はスポイトツールを一切使わず制作認め、若干黄色い下線の色が異なっている。 気付いた事左上と右下に写真を配置する事によってバランスが良くなる。そして余白の場所に文字をそのまま入れてもいいが、単純なバナーになってしまうので、あえて上の文章は写真と文字を被らせているのではないかと思っている。 そして文字と中点の間は少々字間の幅が
使用ソフト : photoshop 制作時間：38分 反省点・同じフォントを探しきれなかった。英語のフォントの横幅が違う為見本と比べて文章全体の横幅が短くなってしまっている。 ・スポイトツールで色の抽出をする癖がある。 気付いた事画像をただ貼り付けるだけではなく、パス選択ツールなどを使用して少し形を変形させて上を狭める事で文字もその分綺麗に埋まりバランスがよくなる。 個人的に音楽系の広告あるあるなのか文字を長方形で囲っている物が多い気がする。 高音質の上に丸い点を追加
今回は少しレベルを上げて色々な作業が必要そうなバナーを選びました。100%完璧に仕上げようとするとモチベと自分のやる気がなくなりそうだったので70〜80%で仕上げています。（とりあえず完成させることを目標に） 使用ソフト : photoshop 制作時間：2時間20分（※2日間） 反省点・想像以上に躓く部分が多く、自分のモチベーションが長く続かなかった為2日に分けてた ・すぐ調べたら出てくることを何度かめんどくさがってしまっていた。 ・フォントサイズや影などが見本とかなり
使用ソフト : photoshop 制作時間：1時間06分 反省点・新規工事費〜やキャッシュバックの文章したに黄色い下線の追加忘れ。 ・丸の中にキラキラの追加忘れ。 ・背景女性の顔がはっきりしていなかった。 ・丸の右下側のみにグレーの線を追加するやり方が見つからなかった。 気付いた事文字を若干斜めにしたりシアーツールを使用して勢いがあるもじになっている。 （今回はつけ忘れているが）黄色い明るい線を付け足すことによって文字の注目度が上がる。 下と上を比べてもそうだが、円
使用ソフト : photoshop 制作時間：1時間08分 反省点・ペンツールで見本のような歪な形にするのが少し時間がかかった。 ・一番右の画像の高さが高過ぎたため、文章と画像が重なり文字が見にくくなってしまった ・中央にある自分の字が汚い（笑） 気付いた事商品の画像を右下に配置し、背景に歪な形の画像を配置することによってきっちりした雰囲気を消し緩い楽しげなバナーに仕上がっている。 手書きで書かれた文字を配置することによって親しみやすいバナーになっている。
使用ソフト : photoshop 制作時間：58分 反省点・見本と比べて”お得なクーポン〜”の部分が見にくくなってしまった。 ・手作業で長方形を並べて行ったが、効率が悪く場所によって白い線の幅が異なっている。 気付いた事同いグループの文章でも、上の行と下の行の字間を変えて中央にある長方形の幅に合わせた文章になっている。 キャンペーン期間の曜日は日付のフォントサイズよりも少し小さめで配置されている。 ”！”感嘆符は基本的に日本語のフォントと少し字間が離れているので調整
使用ソフト : photoshop 制作時間：53分 反省点・右側のしずくや跳ねた水を表現している丸が見本通りにならなかった。 ・字間や文章の幅が合ってない部分がある。 ・白潤の上にある水滴の配置をしていない。 気付いた事前回のバナーでも同じだが、少し注目して欲しい文章などは吹き出しなどに配置してあしらいを少し足している。 右側にクリック範囲を作りそこからサイトに飛べるようになっている。 白潤という化粧水などの商品なので水を表現されているあしらいがいくつかある。 想
使用ソフト : photoshop 制作時間：2時間15分 反省点・中央に設置されている図形の背景を小さい水玉模様にできなかった ・時間をかけ過ぎてしまった ・細かい部分が見本と合っていない（吹き出しの大きさや紙吹雪部分など） ・photoshopではなくIllustratorで作成すればもっと早くできた気がする 気付いた事バナーの中に長い文章が入る時は、優先順で大きい文字の上に小さい文字を配置したり右下に吹き出しとして文字を入れたりしている。 商品画像の背面に紙吹雪
以前バナーを作成していたんですが、投稿するの忘れていたので・・・ 使用ソフト : Illustrator 制作時間：恐らく１時間程 反省点・背景の模様が見本と比べて少し暗かった。 ・”別格”部分のフォントが見つからなかった。 気付いた事和の高級感を出すために背景が市松模様でゴールドっぽい色を使用している。そしてその模様にさらに上からグラデーションをかけて光が掛かっているように工夫されている。 ビールの名前の部分（別格）は文字を大きく字間も大きくしてありこの文字だけ少し特
使用ソフト : Illustrator 制作時間：55分 反省点・背景の色が異なっている。 ・ダイヤモンドの作成方法がわからなかった。 気付いた事注目して欲しい文字の部分は色とサイズを変えて文字上に丸い点を付け加えている。
