hato@デザイン勉強記録中

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

hato@デザイン勉強記録中

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

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

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

hato@デザイン勉強…

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

      【刺さった理由】 ・シンプルなのに伝わる。ドライヤーに欲しい機能（速乾）を一番最初にコピーとして書いているので目を惹いた。 ・コピーを見る⇨「どこのメーカーだろう？」⇨「パナソニックさんだ！」⇨「なら信頼できそう…他にどんな商品があるだろう？」と、お客さんの購入までの動きが想像できる。 ・背景をグレー（#CCCCCC）にしているので、男女ともに手を伸ばせそうな商品イメージとなっている。 ・左側の文字と、右側のドライヤーのお尻側、詳細を見るの囲いの位置が縦に揃っているので、綺

      hato@デザイン勉強…

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

        配色ベースカラー：#5BBED8（水色） メインカラー：#B7DFE8（寝ている人物の背景） 刺さった理由・分析・わかりやすい ⇨「天然水だきまくら」というフレーズを聞いて「どんなものだろう？」「大きさは？」「どうやって使うの？」「色は？」と言った疑問を、実際に使用している画像を一枚使うだけで解消できるようにしている。 ⇨人物と現物の対比がわかりやすい。 ・ブランドのイメージを崩していない ⇨『サントリーの天然水』のイメージを壊さない配色（透明感のある配色）になっているの

        hato@デザイン勉強…

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

          配色ベースカラー：e0101e（赤） アクセントカラー：fef102（黄色） 刺さった理由・分析・わかりやすい ⇨シンプルなフレーズと、色がごちゃごちゃしていないため、情報が入ってきやすい ⇨重要な「６分前」「２４時間」という、時間（目立たせたい箇所）にアクセントカラーを使っているため情報の整理ができる ・綺麗、収まりがいい ⇨左側の文字の組み方が綺麗。四角にきちっと収まっており、整列されていて読みやすい ・人物の左側、「ネット予約チャンス」が立体感があるため、のっぺりした

          hato@デザイン勉強…

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

        hato@デザイン勉強記録中

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

          配色・下部、左側の日付の箇所：#4F5968（グレー） ・下部、右側の申込日：#BB292C（濃い赤） ・周りの枠線：#C2262E（濃い赤） 分析・文字の優先順位は「阿寒摩周」「サスティナブルキャンプ」「全国旅行支援」「日付」「クーポンゲット」の順で大きい ・旅行のバナーに関しては、「見どころや名所を背景に分割して持ってくる」というパターンが多い気がする ・背景の上にグレーを敷いて不透明度を下げてるので、白文字が見やすくなっている ・全体的にゴシック体を使用 ・あしらいの

          hato@デザイン勉強…

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

          hato@デザイン勉強記録中

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

          配色・メイン背景色：#01B0DF（水色） ・左上「ザクザク」#281618（濃い茶色） ・右下「詳しくはこちら」#01AE3F（緑） 構成・クロッカンシューという、耳慣れない言葉だが、『扱っている商品』や、『置く棚』など、お店の雰囲気がわかる写真を置いていることによって、「原宿にあるスイーツを扱うお店が3/29に閉店する」という情報がわかる ・「閉店」は寂しい印象になってしまう言葉だが、ポップに表現することで、暗い・寂しいという印象にならないようにしている。 ⇨「なんでポ

          hato@デザイン勉強…

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

          hato@デザイン勉強記録中

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

          配色・「グリーンティーの香り」というサブキャッチコピーを使用しているため、全体的に緑系の色を使用し、「爽やか」「清涼感」「自然」な印象になるようにしている。 ・最上部キャッチコピー：#08442F（深緑） ・左上「数量限定」：#FF9A8E（薄いピンク） ・下部エリア：#F9EEC0⇨#FCF1C7のストライプ ・右下「数量限定」、下部テキスト：#F80251（薄い赤） 構成・まず一番上の最初に目がいく箇所にキャッチコピーを大きく配置 ・次に左上の「数量限定」を目に留まる

          hato@デザイン勉強…

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

          hato@デザイン勉強記録中

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

          配色・左上「数量限定」：#FA8201（オレンジ系） ・商品名等の文字：#B09960（落ち着いた黄土色） ・下部エリア「Special Present」:#8D713E（商品名のフォントよりも濃い黄土色） ・下部エリア：#00A19C（エメラルド系） 構成・NEW LIMITED EDITIONとあるので、「新規の期間限定アイテム」の宣伝バナー ⇨そのため、大きく中心に新商品のイメージ画像を載せ、全体的なカラーをパッケージと同形色で揃えているため、商品とイメージに違和感が

          hato@デザイン勉強…

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

          hato@デザイン勉強記録中

          【バナー分析01】NIWAKA

          フォント・使われているフォントはショップ名は「ゴシックで太く」、BRIDAL COLLECTIONは「明朝体で、高級感がある」 分析・宝石をメインにおくことによって、下の文字を読まなくても「宝石店である」ことがわかる。 ・「じゃあどんな宝石を扱っているのか？」と思い視線を動かすと下に「BRIDAL COLLECTION」と書いてあるのでシンプルだけど「何のバナーなのか」が伝わりやすいデザインとなっている。 今後参考にできること・余白を多く取り、落ち着いた印象、高級感のある

          hato@デザイン勉強…

          【バナー分析01】NIWAKA

          hato@デザイン勉強記録中

          2022.11.24【バナートレス.08】

          かかった時間約80分 配色・今回はグラデーションオーバーレイ使用 #bf7ae6 ⇨ #face82（紫からベージュ系へ） フォント・游明朝体（エクストラボールド）「Happy Halloween」の箇所 ・TBUDゴシック Std デザインのポイント色 ・ハロウィンカラーである紫、オレンジ、薄茶色が混じっていた。 ・上部のお化けの部分は真っ黒ではなく、色をブラウンにすることで目に優しい配色となっていた。 ・5名様の箇所、周りに境界線で白色をつけることによって目立つよ

          hato@デザイン勉強…

          2022.11.24【バナートレス.08】

          hato@デザイン勉強記録中

          2022.11.23【バナートレス.07】

          一昨日ぶりです。 実は昨日もちゃんとバナートレスはしていたのですが、昨日のトレスはどちらかというとフォトショのグラデーション機能をメインに使用していたので、細かい箇所は合わせておらず…。 そのトレスはまた後日、記録をまとめるときにでも上げたいと思います。 さて、そんなわけで本日のトレスは以下に↓ かかった時間約30分 配色・#bfac89(「クリスマス限定〜」の円の背景色) フォント・小塚ゴシック Pr6N　(BとRを使い分けつつ) デザインのポイント色 ・今回は

          hato@デザイン勉強…

          2022.11.23【バナートレス.07】

          hato@デザイン勉強記録中

          2022.11.21【バナートレス.06】

          かかった時間約60分(※今回から分単位で記載します) 配色・メインカラー：#133f20(背景の緑) ・サブカラー：#9a7a45(右上の日付背景) ・アクセントカラー：#ae2332(プレゼントキャンペーンの箇所の赤) フォント・小塚ゴシック Pr6N(B) ・源ノ角ゴシック JP(Bold) デザインのポイント色 ・クリスマスに絡んだキャンペーンということもあり、全体的にクリスマスの色合い（緑、赤、白、薄茶）で作成されている。 ・「フォロー＆RT〜」の箇所をワー

          hato@デザイン勉強…

          2022.11.21【バナートレス.06】

          hato@デザイン勉強記録中

          2022.11.20【バナートレス.05】

          かかった時間約1時間30分 配色・#929292:グレーの文字 ・#e2bf98:色つきの文字 ・#e6ba92⇨#d69a68:右下の日付の円グラデーション フォント・游明朝体（デミボールド） ・游明朝体（ミディアム） ・游明朝体+36ポかな（ミディアム/日付） デザインのポイント文字 ・日付のフォントを探す際に、斜めになっている書体を探すのに時間がかかったが、フォントを斜体にすることで、トレス元と似たような表示になることに気が付いた。 ・日付の「まで」を7の下に

          hato@デザイン勉強…

          2022.11.20【バナートレス.05】

          hato@デザイン勉強記録中

          2022.11.19【バナートレス.04】

          かかった時間約1時間 配色・メインカラー：#1b3800 ・サブカラー：#162d00 ・アクセントカラー：#bde700 フォント・英語：Essonnes（Text Italic/斜体） ・「新鮮を〜」：小塚明朝 Pro（L） ・「カラダにやさしい〜」：筑紫A丸ゴシック（ボールド） ・「ローソン　フレッシュ」：小塚ゴシック Pr6N（B） ・「生鮮食品、日用品から〜」：凸版文久ゴシック（レギュラー） デザインのポイント色 ・最初は背景のメインカラー：#1b3800だ

          hato@デザイン勉強…

          2022.11.19【バナートレス.04】

          hato@デザイン勉強記録中

          2022.11.17【バナートレス.03】

          かかった時間約20分 配色・メインカラー：#ff9a02 ・サブカラー：#ffffff (?) ・アクセントカラー：#00314c フォント・ヒラギノ角ゴ デザインのポイント色 ・最初に大部分を占める#ff9a02を目で見て色を選んだが、自分の方は少し明度の低い色になってしまった。 ⇨自分が「これだ」と思う色よりも、もう少し明度を上げた色を選ぶと合うのかもしれない。 ・メインカラーの#ff9a02はオレンジ系の色で、にぎやかさやエネルギッシュなイメージを持っている。

          hato@デザイン勉強…

          2022.11.17【バナートレス.03】

          hato@デザイン勉強記録中

          2022.11.16【バナートレス.02】

          はい、2回目のバナートレースです。 現在いるバイト先のディレクターの上司に以前、商品画像を作成したら「全部作り直しレベル」と言われ、今日もまた同じことを言われる始末。 デザインの知識を身につけておらず、的確に配置ができていない私のせいでもあるのですが、あまりにイラッと悔しく思ったので、泣きながら内心ではずっと「ぶっ殺してやるからな！」のテロップが表示されていました。 冗談はさておきそんなわけで、あまりに悔しかったので、一日1トレス…ふ、二日に1トレス…を目標に、バナーのト

          hato@デザイン勉強…

          2022.11.16【バナートレス.02】

          hato@デザイン勉強記録中