saki

webdesignerになるための成長記録を載せてます!

saki

webdesignerになるための成長記録を載せてます!

記事一覧

WEBサイトトレース #03

第三回目のサイトは"とまとと"さん(https://tomatoto.jp/)のサイトトレースに挑戦 アビルキャンプリゾート ■なんのサイト? →トマトを中心とした食事や観光、宿泊が…

saki
3年前

WEBサイトトレース #02

第二回目のサイトは"アビルキャンプリゾート"さん(https://habilecamp.com/)のサイトトレースに挑戦 アビルキャンプリゾート■なんのサイト? →大自然の中で夜空の空…

saki
3年前
1

WEBサイトトレース #01

今回はXDに慣れる為にサイトのトレースを開始。 第一回目のサイトは"まるざ発芽玄米研究所"さん(https://maruza.jp/)のサイトトレースに挑戦しました。 まるざ発芽玄…

saki
3年前

バナー模写を20回やってみて思った事

3月~4月までまったりではあったが、今まで何故かやってこなかったバナー模写を20回やってみて思った事を書いてみようと思った。 そもそも何故バナー模写をやって来なかっ…

saki
3年前
2

バナー模写 #20

使用ソフト : photoshop 制作時間:1時間42分 反省点・photsohopでのパターン作成に少し時間がかかってしまった。 ・黄色い枠内に文字を綺麗に入れたり、文字同士の行間…

saki
3年前
1

バナー模写 #19

使用ソフト : photoshop 制作時間:29分 反省点・グラデーションがうまく馴染まなかった ・コントラストを上げすぎた 気付いた事グラデーションはいつも2色だけを使用…

saki
3年前

バナー模写 #18

使用ソフト : photoshop 制作時間:23分 反省点・女性の写真に一切加工を加えなかったがもっとコントラストを上げて作るべきだった。 ・今回はスポイトツールを一切使わ…

saki
3年前

バナー模写 #17

使用ソフト : photoshop 制作時間:38分 反省点・同じフォントを探しきれなかった。英語のフォントの横幅が違う為見本と比べて文章全体の横幅が短くなってしまっている…

saki
3年前

バナー模写 #16

今回は少しレベルを上げて色々な作業が必要そうなバナーを選びました。100%完璧に仕上げようとするとモチベと自分のやる気がなくなりそうだったので70〜80%で仕上げていま…

saki
3年前

バナー模写 #15

使用ソフト : photoshop 制作時間:1時間06分 反省点・新規工事費〜やキャッシュバックの文章したに黄色い下線の追加忘れ。 ・丸の中にキラキラの追加忘れ。 ・背景女性…

saki
3年前

バナー模写 #14

使用ソフト : photoshop 制作時間:1時間08分 反省点・ペンツールで見本のような歪な形にするのが少し時間がかかった。 ・一番右の画像の高さが高過ぎたため、文章と画…

saki
3年前

バナー模写 #13

使用ソフト : photoshop 制作時間:58分 反省点・見本と比べて”お得なクーポン〜”の部分が見にくくなってしまった。 ・手作業で長方形を並べて行ったが、効率が悪く場…

saki
3年前

バナー模写 #12

使用ソフト : photoshop 制作時間:53分 反省点・右側のしずくや跳ねた水を表現している丸が見本通りにならなかった。 ・字間や文章の幅が合ってない部分がある。 ・白…

saki
3年前

バナー模写 #11

使用ソフト : photoshop 制作時間:2時間15分 反省点・中央に設置されている図形の背景を小さい水玉模様にできなかった ・時間をかけ過ぎてしまった ・細かい部分が見本…

saki
3年前

バナー模写 #10

以前バナーを作成していたんですが、投稿するの忘れていたので・・・ 使用ソフト : Illustrator 制作時間:恐らく1時間程 反省点・背景の模様が見本と比べて少し暗かっ…

saki
3年前

バナー模写 #09

使用ソフト : Illustrator 制作時間:55分 反省点・背景の色が異なっている。 ・ダイヤモンドの作成方法がわからなかった。 気付いた事注目して欲しい文字の部分は色と…

saki
3年前
1
WEBサイトトレース #03

WEBサイトトレース #03



第三回目のサイトは"とまとと"さん(https://tomatoto.jp/)のサイトトレースに挑戦

アビルキャンプリゾート
■なんのサイト?
→トマトを中心とした食事や観光、宿泊ができるサイト
■ターゲット層
→トマト好きな20代~30代
■配色
メインカラー #FFFBF6
ベースカラー #CB2E27
アクセントカラー 特になし?
■書体
Yu Gothic
■レイアウト
2カラムレイ

もっとみる
WEBサイトトレース #02

WEBサイトトレース #02



第二回目のサイトは"アビルキャンプリゾート"さん(https://habilecamp.com/)のサイトトレースに挑戦

アビルキャンプリゾート■なんのサイト?
→大自然の中で夜空の空間を体験しながら楽しめるキャンプ場サイト
■ターゲット層
→20~30代子持ちの旅行好き家族層
■配色
メインカラー ##000000
ベースカラー #F4F4F4
アクセントカラー #B39A3A
■書体
S

もっとみる
WEBサイトトレース  #01

WEBサイトトレース #01



今回はXDに慣れる為にサイトのトレースを開始。
第一回目のサイトは"まるざ発芽玄米研究所"さん(https://maruza.jp/)のサイトトレースに挑戦しました。

まるざ発芽玄米研究所■なんのサイト?
→自然栽培の発芽玄米専門店サイト
■ターゲット層
→30~40代の健康志向で子持ちの主婦(料理にこだわり有)
■配色
メインカラー #B39A3A
ベースカラー #FFFFFF
アクセント

もっとみる
バナー模写を20回やってみて思った事

バナー模写を20回やってみて思った事

3月~4月までまったりではあったが、今まで何故かやってこなかったバナー模写を20回やってみて思った事を書いてみようと思った。

そもそも何故バナー模写をやって来なかったかwebデザイナーを目指している人や実際に未経験からwebデザイナーになった人などの記事やブログ、SNSを見て大抵の人がまず一番初めに行っているバナー模写を何故やって来なかったか。
今、自分で改めて思うとillustraterやph

もっとみる
バナー模写 #20

バナー模写 #20



使用ソフト : photoshop
制作時間:1時間42分

反省点・photsohopでのパターン作成に少し時間がかかってしまった。
・黄色い枠内に文字を綺麗に入れたり、文字同士の行間や字間の調整が大変だった。

気付いた事良く見ると、”スマホ決済を検討されている〜”の文章とその下にある"15,000円"の幅がぴったり合っておりそこの微調整が大変だった。
あとは15,000円の部分の文章や0

もっとみる
バナー模写 #19

バナー模写 #19



使用ソフト : photoshop
制作時間:29分

反省点・グラデーションがうまく馴染まなかった
・コントラストを上げすぎた

気付いた事グラデーションはいつも2色だけを使用していたが、見本を良く見ると3〜4色ほど使って茶色からどんどん白になる色を組み合わせている。
文字の外側にドロップシャドウがかかっている上に文字が配置された右側には薄くて黒いグラデーションが入っている。その黒のグラデを

もっとみる
バナー模写 #18

バナー模写 #18



使用ソフト : photoshop
制作時間:23分

反省点・女性の写真に一切加工を加えなかったがもっとコントラストを上げて作るべきだった。
・今回はスポイトツールを一切使わず制作認め、若干黄色い下線の色が異なっている。

気付いた事左上と右下に写真を配置する事によってバランスが良くなる。そして余白の場所に文字をそのまま入れてもいいが、単純なバナーになってしまうので、あえて上の文章は写真と文

もっとみる
バナー模写 #17

バナー模写 #17



使用ソフト : photoshop
制作時間:38分

反省点・同じフォントを探しきれなかった。英語のフォントの横幅が違う為見本と比べて文章全体の横幅が短くなってしまっている。
・スポイトツールで色の抽出をする癖がある。

気付いた事画像をただ貼り付けるだけではなく、パス選択ツールなどを使用して少し形を変形させて上を狭める事で文字もその分綺麗に埋まりバランスがよくなる。
個人的に音楽系の広告あ

もっとみる
バナー模写 #16

バナー模写 #16

今回は少しレベルを上げて色々な作業が必要そうなバナーを選びました。100%完璧に仕上げようとするとモチベと自分のやる気がなくなりそうだったので70〜80%で仕上げています。(とりあえず完成させることを目標に)

使用ソフト : photoshop
制作時間:2時間20分(※2日間)

反省点・想像以上に躓く部分が多く、自分のモチベーションが長く続かなかった為2日に分けてた
・すぐ調べたら出てくるこ

もっとみる
バナー模写 #15

バナー模写 #15



使用ソフト : photoshop
制作時間:1時間06分

反省点・新規工事費〜やキャッシュバックの文章したに黄色い下線の追加忘れ。
・丸の中にキラキラの追加忘れ。
・背景女性の顔がはっきりしていなかった。
・丸の右下側のみにグレーの線を追加するやり方が見つからなかった。

気付いた事文字を若干斜めにしたりシアーツールを使用して勢いがあるもじになっている。
(今回はつけ忘れているが)黄色い明

もっとみる
バナー模写 #14

バナー模写 #14



使用ソフト : photoshop
制作時間:1時間08分

反省点・ペンツールで見本のような歪な形にするのが少し時間がかかった。
・一番右の画像の高さが高過ぎたため、文章と画像が重なり文字が見にくくなってしまった
・中央にある自分の字が汚い(笑)

気付いた事商品の画像を右下に配置し、背景に歪な形の画像を配置することによってきっちりした雰囲気を消し緩い楽しげなバナーに仕上がっている。
手書き

もっとみる
バナー模写 #13

バナー模写 #13



使用ソフト : photoshop
制作時間:58分

反省点・見本と比べて”お得なクーポン〜”の部分が見にくくなってしまった。
・手作業で長方形を並べて行ったが、効率が悪く場所によって白い線の幅が異なっている。

気付いた事同いグループの文章でも、上の行と下の行の字間を変えて中央にある長方形の幅に合わせた文章になっている。
キャンペーン期間の曜日は日付のフォントサイズよりも少し小さめで配置さ

もっとみる
バナー模写 #12

バナー模写 #12



使用ソフト : photoshop
制作時間:53分

反省点・右側のしずくや跳ねた水を表現している丸が見本通りにならなかった。
・字間や文章の幅が合ってない部分がある。
・白潤の上にある水滴の配置をしていない。

気付いた事前回のバナーでも同じだが、少し注目して欲しい文章などは吹き出しなどに配置してあしらいを少し足している。
右側にクリック範囲を作りそこからサイトに飛べるようになっている。

もっとみる
バナー模写 #11

バナー模写 #11



使用ソフト : photoshop
制作時間:2時間15分

反省点・中央に設置されている図形の背景を小さい水玉模様にできなかった
・時間をかけ過ぎてしまった
・細かい部分が見本と合っていない(吹き出しの大きさや紙吹雪部分など)
・photoshopではなくIllustratorで作成すればもっと早くできた気がする

気付いた事バナーの中に長い文章が入る時は、優先順で大きい文字の上に小さい文字

もっとみる
バナー模写 #10

バナー模写 #10

以前バナーを作成していたんですが、投稿するの忘れていたので・・・

使用ソフト : Illustrator
制作時間:恐らく1時間程

反省点・背景の模様が見本と比べて少し暗かった。
・”別格”部分のフォントが見つからなかった。

気付いた事和の高級感を出すために背景が市松模様でゴールドっぽい色を使用している。そしてその模様にさらに上からグラデーションをかけて光が掛かっているように工夫されている。

もっとみる
バナー模写 #09

バナー模写 #09



使用ソフト : Illustrator
制作時間:55分

反省点・背景の色が異なっている。
・ダイヤモンドの作成方法がわからなかった。

気付いた事注目して欲しい文字の部分は色とサイズを変えて文字上に丸い点を付け加えている。