hato@デザイン勉強記録中

やりたいことを追い求めてデザインの道を走り始めた。 HTML/CSS(SCSS)/ト…

hato@デザイン勉強記録中

やりたいことを追い求めてデザインの道を走り始めた。 HTML/CSS(SCSS)/トレスなどなどデザイン勉強中。 日々の勉強の記録を自分用のメモとして残しています。

記事一覧

【バナー分析09】アクタスプレゼントキャンペーン

【刺さった理由】 ・斜めにカットし情報を伝えるバナーはなかなか見ない配置だったため興味を惹かれた。 ・色が目に優しい。パステルカラーっぽく、背景のウッドチェアと相…

【バナー分析08】ナノケア ドライヤー

【刺さった理由】 ・シンプルなのに伝わる。ドライヤーに欲しい機能(速乾)を一番最初にコピーとして書いているので目を惹いた。 ・コピーを見る⇨「どこのメーカーだろう…

【バナー分析07】天然水だきまくら応募バナー

配色ベースカラー:#5BBED8(水色) メインカラー:#B7DFE8(寝ている人物の背景) 刺さった理由・分析・わかりやすい ⇨「天然水だきまくら」というフレーズを聞いて「ど…

【バナー分析06】JR九州ネット予約

配色ベースカラー:e0101e(赤) アクセントカラー:fef102(黄色) 刺さった理由・分析・わかりやすい ⇨シンプルなフレーズと、色がごちゃごちゃしていないため、情報が…

【バナー分析05】阿寒摩周キャンプ

配色・下部、左側の日付の箇所:#4F5968(グレー) ・下部、右側の申込日:#BB292C(濃い赤) ・周りの枠線:#C2262E(濃い赤) 分析・文字の優先順位は「阿寒摩周」「サ…

【バナー分析04】クロッカンシュー

配色・メイン背景色:#01B0DF(水色) ・左上「ザクザク」#281618(濃い茶色) ・右下「詳しくはこちら」#01AE3F(緑) 構成・クロッカンシューという、耳慣れない言葉だ…

【バナー分析03】ロクシタン×スヌーピーコラボ

配色・「グリーンティーの香り」というサブキャッチコピーを使用しているため、全体的に緑系の色を使用し、「爽やか」「清涼感」「自然」な印象になるようにしている。 ・…

【バナー分析02】ボディスクラブ

配色・左上「数量限定」:#FA8201(オレンジ系) ・商品名等の文字:#B09960(落ち着いた黄土色) ・下部エリア「Special Present」:#8D713E(商品名のフォントよりも濃い…

【バナー分析01】NIWAKA

フォント・使われているフォントはショップ名は「ゴシックで太く」、BRIDAL COLLECTIONは「明朝体で、高級感がある」 分析・宝石をメインにおくことによって、下の文字を…

2022.11.24【バナートレス.08】

かかった時間約80分 配色・今回はグラデーションオーバーレイ使用 #bf7ae6#face82 (紫からベージュ系へ) フォント・游明朝体(エクストラボールド)「Happy Hallowe…

2022.11.23【バナートレス.07】

一昨日ぶりです。 実は昨日もちゃんとバナートレスはしていたのですが、昨日のトレスはどちらかというとフォトショのグラデーション機能をメインに使用していたので、細か…

2022.11.21【バナートレス.06】

かかった時間約60分(※今回から分単位で記載します) 配色・メインカラー:#133f20(背景の緑) ・サブカラー:#9a7a45(右上の日付背景) ・アクセントカラー:#ae2332(プレゼ…

2022.11.20【バナートレス.05】

かかった時間約1時間30分 配色・#929292:グレーの文字 ・#e2bf98:色つきの文字 ・#e6ba92⇨#d69a68:右下の日付の円グラデーション フォント・游明朝体(デミボールド) …

2022.11.19【バナートレス.04】

かかった時間約1時間 配色・メインカラー:#1b3800 ・サブカラー:#162d00 ・アクセントカラー:#bde700 フォント・英語:Essonnes(Text Italic/斜体) ・「新鮮を〜」…

2022.11.17【バナートレス.03】

かかった時間約20分 配色・メインカラー:#ff9a02 ・サブカラー:#ffffff (?) ・アクセントカラー:#00314c フォント・ヒラギノ角ゴ デザインのポイント色 ・最初に大…

2022.11.16【バナートレス.02】

はい、2回目のバナートレースです。 現在いるバイト先のディレクターの上司に以前、商品画像を作成したら「全部作り直しレベル」と言われ、今日もまた同じことを言われる始…

【バナー分析09】アクタスプレゼントキャンペーン

【バナー分析09】アクタスプレゼントキャンペーン

【刺さった理由】
・斜めにカットし情報を伝えるバナーはなかなか見ない配置だったため興味を惹かれた。
・色が目に優しい。パステルカラーっぽく、背景のウッドチェアと相性の良い配色で商品のイメージを崩していないので、情報が自然に入ってきやすい。
・一番読ませたい付近の箇所の色をさりげなく変え、その場所のテキストが目に入りやすくなっている。
⇨「20名様に〜」の背景部分、若干色が変化しておりその部分に目が

もっとみる
【バナー分析08】ナノケア ドライヤー

【バナー分析08】ナノケア ドライヤー

【刺さった理由】
・シンプルなのに伝わる。ドライヤーに欲しい機能(速乾)を一番最初にコピーとして書いているので目を惹いた。
・コピーを見る⇨「どこのメーカーだろう?」⇨「パナソニックさんだ!」⇨「なら信頼できそう…他にどんな商品があるだろう?」と、お客さんの購入までの動きが想像できる。

・背景をグレー(#CCCCCC)にしているので、男女ともに手を伸ばせそうな商品イメージとなっている。
・左側の

もっとみる
【バナー分析07】天然水だきまくら応募バナー

【バナー分析07】天然水だきまくら応募バナー

配色ベースカラー:#5BBED8(水色)
メインカラー:#B7DFE8(寝ている人物の背景)

刺さった理由・分析・わかりやすい
⇨「天然水だきまくら」というフレーズを聞いて「どんなものだろう?」「大きさは?」「どうやって使うの?」「色は?」と言った疑問を、実際に使用している画像を一枚使うだけで解消できるようにしている。
⇨人物と現物の対比がわかりやすい。

・ブランドのイメージを崩していない

もっとみる
【バナー分析06】JR九州ネット予約

【バナー分析06】JR九州ネット予約

配色ベースカラー:e0101e(赤)
アクセントカラー:fef102(黄色)

刺さった理由・分析・わかりやすい
⇨シンプルなフレーズと、色がごちゃごちゃしていないため、情報が入ってきやすい
⇨重要な「6分前」「24時間」という、時間(目立たせたい箇所)にアクセントカラーを使っているため情報の整理ができる
・綺麗、収まりがいい
⇨左側の文字の組み方が綺麗。四角にきちっと収まっており、整列されていて

もっとみる
【バナー分析05】阿寒摩周キャンプ

【バナー分析05】阿寒摩周キャンプ

配色・下部、左側の日付の箇所:#4F5968(グレー)
・下部、右側の申込日:#BB292C(濃い赤)
・周りの枠線:#C2262E(濃い赤)

分析・文字の優先順位は「阿寒摩周」「サスティナブルキャンプ」「全国旅行支援」「日付」「クーポンゲット」の順で大きい
・旅行のバナーに関しては、「見どころや名所を背景に分割して持ってくる」というパターンが多い気がする
・背景の上にグレーを敷いて不透明度を下

もっとみる
【バナー分析04】クロッカンシュー

【バナー分析04】クロッカンシュー

配色・メイン背景色:#01B0DF(水色)
・左上「ザクザク」#281618(濃い茶色)
・右下「詳しくはこちら」#01AE3F(緑)

構成・クロッカンシューという、耳慣れない言葉だが、『扱っている商品』や、『置く棚』など、お店の雰囲気がわかる写真を置いていることによって、「原宿にあるスイーツを扱うお店が3/29に閉店する」という情報がわかる
・「閉店」は寂しい印象になってしまう言葉だが、ポップ

もっとみる
【バナー分析03】ロクシタン×スヌーピーコラボ

【バナー分析03】ロクシタン×スヌーピーコラボ

配色・「グリーンティーの香り」というサブキャッチコピーを使用しているため、全体的に緑系の色を使用し、「爽やか」「清涼感」「自然」な印象になるようにしている。

・最上部キャッチコピー:#08442F(深緑)
・左上「数量限定」:#FF9A8E(薄いピンク)
・下部エリア:#F9EEC0⇨#FCF1C7のストライプ
・右下「数量限定」、下部テキスト:#F80251(薄い赤)

構成・まず一番上の最初

もっとみる
【バナー分析02】ボディスクラブ

【バナー分析02】ボディスクラブ

配色・左上「数量限定」:#FA8201(オレンジ系)
・商品名等の文字:#B09960(落ち着いた黄土色)
・下部エリア「Special Present」:#8D713E(商品名のフォントよりも濃い黄土色)
・下部エリア:#00A19C(エメラルド系)

構成・NEW LIMITED EDITIONとあるので、「新規の期間限定アイテム」の宣伝バナー
⇨そのため、大きく中心に新商品のイメージ画像を載

もっとみる
【バナー分析01】NIWAKA

【バナー分析01】NIWAKA

フォント・使われているフォントはショップ名は「ゴシックで太く」、BRIDAL COLLECTIONは「明朝体で、高級感がある」

分析・宝石をメインにおくことによって、下の文字を読まなくても「宝石店である」ことがわかる。
・「じゃあどんな宝石を扱っているのか?」と思い視線を動かすと下に「BRIDAL COLLECTION」と書いてあるのでシンプルだけど「何のバナーなのか」が伝わりやすいデザインとな

もっとみる
2022.11.24【バナートレス.08】

2022.11.24【バナートレス.08】

かかった時間約80分

配色・今回はグラデーションオーバーレイ使用 #bf7ae6#face82 (紫からベージュ系へ)

フォント・游明朝体(エクストラボールド)「Happy Halloween」の箇所
・TBUDゴシック Std

デザインのポイント色

・ハロウィンカラーである紫、オレンジ、薄茶色が混じっていた。
・上部のお化けの部分は真っ黒ではなく、色をブラウンにすることで目に優しい配

もっとみる
2022.11.23【バナートレス.07】

2022.11.23【バナートレス.07】

一昨日ぶりです。
実は昨日もちゃんとバナートレスはしていたのですが、昨日のトレスはどちらかというとフォトショのグラデーション機能をメインに使用していたので、細かい箇所は合わせておらず…。
そのトレスはまた後日、記録をまとめるときにでも上げたいと思います。

さて、そんなわけで本日のトレスは以下に↓

かかった時間約30分

配色・#bfac89(「クリスマス限定〜」の円の背景色)

フォント・小塚

もっとみる
2022.11.21【バナートレス.06】

2022.11.21【バナートレス.06】

かかった時間約60分(※今回から分単位で記載します)

配色・メインカラー:#133f20(背景の緑)
・サブカラー:#9a7a45(右上の日付背景)
・アクセントカラー:#ae2332(プレゼントキャンペーンの箇所の赤)

フォント・小塚ゴシック Pr6N(B)
・源ノ角ゴシック JP(Bold)

デザインのポイント色

・クリスマスに絡んだキャンペーンということもあり、全体的にクリスマスの色

もっとみる
2022.11.20【バナートレス.05】

2022.11.20【バナートレス.05】

かかった時間約1時間30分

配色・#929292:グレーの文字
・#e2bf98:色つきの文字
・#e6ba92⇨#d69a68:右下の日付の円グラデーション

フォント・游明朝体(デミボールド)
・游明朝体(ミディアム)
・游明朝体+36ポかな(ミディアム/日付)

デザインのポイント文字

・日付のフォントを探す際に、斜めになっている書体を探すのに時間がかかったが、フォントを斜体にすることで

もっとみる
2022.11.19【バナートレス.04】

2022.11.19【バナートレス.04】

かかった時間約1時間

配色・メインカラー:#1b3800
・サブカラー:#162d00
・アクセントカラー:#bde700

フォント・英語:Essonnes(Text Italic/斜体)
・「新鮮を〜」:小塚明朝 Pro(L)
・「カラダにやさしい〜」:筑紫A丸ゴシック(ボールド)
・「ローソン フレッシュ」:小塚ゴシック Pr6N(B)
・「生鮮食品、日用品から〜」:凸版文久ゴシック(レギ

もっとみる
2022.11.17【バナートレス.03】

2022.11.17【バナートレス.03】

かかった時間約20分

配色・メインカラー:#ff9a02
・サブカラー:#ffffff (?)
・アクセントカラー:#00314c

フォント・ヒラギノ角ゴ

デザインのポイント色

・最初に大部分を占める#ff9a02を目で見て色を選んだが、自分の方は少し明度の低い色になってしまった。
⇨自分が「これだ」と思う色よりも、もう少し明度を上げた色を選ぶと合うのかもしれない。

・メインカラーの#f

もっとみる
2022.11.16【バナートレス.02】

2022.11.16【バナートレス.02】

はい、2回目のバナートレースです。
現在いるバイト先のディレクターの上司に以前、商品画像を作成したら「全部作り直しレベル」と言われ、今日もまた同じことを言われる始末。

デザインの知識を身につけておらず、的確に配置ができていない私のせいでもあるのですが、あまりにイラッと悔しく思ったので、泣きながら内心ではずっと「ぶっ殺してやるからな!」のテロップが表示されていました。

冗談はさておきそんなわけで

もっとみる