咲子@花咲くデザイン

✏️ Webデザイン｜生成AI 学習中
📚 学びを整理し、やさしく届ける
🌱 日々の気づきを発信しています

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

今日は、バナーの課題に挑戦！

バナーの遷移先である
デイトラのLPを意識し、
逆算して制作したつもりです。

AIの添削結果は58点😅
情報過多にならないよう、修正します。

🌱 今日も、一歩ずつ。

#デイトラ #Figma #初級編バナー課題

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

🎗️あしらい ⑶
背景で雰囲気づくり

・背景がシンプルで寂しい時
→ 英語のあしらいを追加。

・複数の情報を整理したい時
→ 背景を分割。

・デザインに奥行きを出したい時
→ 水玉やストライプなどの模様を追加。

🌱 今日も、一歩ずつ。

#デイトラ

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

🎗️あしらい ⑵
アイコン化で要素を際立たせる

「9/1発売開始」や
「期間限定」のような、
強調したい要素を視覚的に際立たせる。

情報の優先順位を明確にして、
伝えたいところに目を向けてもらう。

🌱 今日も、一歩ずつ。

#デイトラ

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

　 ・・・・
🎗️あしらい ⑴
ワンポイントでテキストを強調

図形やマーカー、文字の装飾で
リズムのあるデザインをつくる。

適切なあしらいで、
伝わるバナーに。
デザインにも臨場感を！

🌱 今日も、一歩ずつ。

#デイトラ

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

🎗️あしらい

⑴ ワンポイントでテキストを強調
⑵ アイコン化で要素を際立たせる
⑶ 背景で雰囲気づくり

どんなターゲット層に何を伝えたいのか、
しっかりと考えてあしらいを選ぶ。
「意図して作る」を心がけます。

🌱 今日も、コツコツと。

#デイトラ

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

✏️ カーニング ⑵

◾️間隔を広げると生まれる印象

・軽やかで開放的
・高級感
・落ち着き・ゆったり感
・上品・洗練された

同じ「高級感」でも、
表現される雰囲気が違う。
目的意識が大事なんですね。

🌱 少しずつ、自分のものに。

#デイトラ

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

✏️ カーニング ⑴

◾️間隔を狭めると生まれる印象

・高級感・重厚感
・スピード感・勢い
・緊張感・緊迫感
・モダン・プロフェッショナル

目的に合わせて、
文字間隔を調整できるようになりたい。

🌱 今日も、一歩ずつ。

#デイトラ

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

✏️ 文字を斜めにすると...

「躍動感」や「スピード感」、
「前向きな印象」を
与えることができる。

文字で雰囲気を演出するって、
とても大事ですね。

🌱 今日も、一歩ずつ。

#デイトラ

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

✏️ タイポグラフィ

・太字で視認性を上げる
・フォントで雰囲気をつくる
・文字を傾ける、斜めにする
・カーニングで雰囲気を変える
・数字は基本大きく！

文字周りを整える時は、
視認性と可読性を意識したいです。

🌱 今日も、コツコツと。

#デイトラ

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

伝わるバナーの、
「王道レイアウト」を学びました。

・縦並び型
・縦並び＋分割型
・分割型

視線誘導の基本を踏まえ、
クリックしたくなるバナーを
作れるようになりたいです。

🌱 今日も、コツコツと。

#デイトラ

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

👀「視線誘導」について

・N／Z／Fの法則
・人物の視線の先へ
・大きい → 小さい
・高彩度 → 低彩度

視線の流れには傾向があると知った。
目的に合った印象を持ってもらえるよう、
上手く誘導できるようになりたい。

🌱 今日も、一歩ずつ。

#デイトラ

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

「伝わるバナー」にするための、
代表的な構図を学びました。

・三分割
・日の丸
・対角線
・トライアングル
・シンメトリー

見た目の美しさと、
情報量のバランスも考えた
デザインを目指していきたいです。

🌱 今日も、一歩ずつ。

#デイトラ

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

🎨 デザインの作り方
① 森を作る（全体像）
② 木を作る（説得力）
③ 葉を作る（テクニック）

「抽象→具体へ」
1つ1つのテクニックを
言語化できるデザインにする。

🌱 今日も一つ、学びを育てました。

#デイトラ #デザイン研究所

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

🎨 デザインの見方
① 葉を見る（要素の発見）
② 木を見る（コンセプト）
③ 森を見る（法則化）

「具体→抽象へ」
テクニックを見つけるだけでなく、
他のデザインにも応用できる
法則を考える。

🌱 今日も、一歩ずつ。

#デイトラ #デザイン研究所

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

今日は「あしらい」の作成動画を
視聴しました。

あしらいは、自作することで
後から調整もできる模様。

シンプルなものは、
自分で作れるようになりたいです。

🌱 今日も、一歩ずつ。

#デイトラ #Figma

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

4原則をもとに、
チラシを作ってみました。

目的：卓球場の認知・来店
対象：20〜30代男性
雰囲気：かっこいい

お手本とは似ても似つかない出来に🥲
いつか「ここから始まった」と
振り返るために残します。

🌱 今日も、一歩ずつ。

#デイトラ #Figma

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

デザインの4原則を使って、
バナーのトレースをしました。

初めは自分で考えながら
作ってみましたが、結構難しくて
お手本を参考にしました。

Pinterest、たくさん見よう✨

🌱 今日も、コツコツと。

#デイトラ #Figma

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

❹ 近接（グループ化）

情報をグループ化して、
見やすく整理する。

関係値の深いものは近くへ、
浅いものは遠くへ配置する。
行間しかり、写真しかり。

「疲れさせない」が肝心ですね。

🌱 今日も一つ、学びを育てました。

#デイトラ #Figma

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

❸ 整列（余白）

人の視線は左上から右下へ、
「Z」に流れていく。

だから、基本の配置は左揃え。
目線の戻る位置が一緒だと疲れにくい。

綺麗な余白は、
整列によって意図して作るもの！

🌱 今日も一つ、学びを育てました。

#デイトラ #Figma

[咲子@花咲くデザイン @8739_webdesign]

📚 今日の学び

❷ 反復（繰り返し）

同じ要素を繰り返し使うことで、
統一感とリズムを生み出す。

あらかじめ繰り返す項目を考え、
要素の多いものを先に作り込んで
複製すると、デザインが崩れにくい。

🌱 今日も一つ、学びを育てました。

#デイトラ #Figma