テキストの色と装飾

テキストの色と装飾の設定を使えば、

テキストをより魅力的に、視覚的にわかりやすくできるよ！

まずはテキストの色から見ていこう！

3つの方法があるよ：

• カラーパレット: ビジュアルで色を選択

• カラーコード: #FF0000 のように直接入力

• スポイト: 画面上の色を抽出

色選びのポイントを教えるね：

• 本文: 濃いグレー（#333333）が読みやすい

• 見出し: 黒（#000000）でメリハリを

• リンク: 青系（#0066CC）が一般的

• エラー: 赤系（#E53E3E）

• 成功: 緑系（#38A169）

いい質問！真っ黒だと、コントラストが強すぎて目が疲れるんだ。

濃いグレー（#333333 や #222222）を使うと、

柔らかく、読みやすい印象になるよ。

カラースタイルは、サイト全体で統一された色のセットだよ！

あらかじめ定義した色を使うことで、一貫性のあるデザインになるんだ。

カラースタイルを使うメリット：

• 一貫性: サイト全体で統一感が出る

• 効率性: 色の選択に迷わない

• 変更が簡単: スタイルを変更すると、全部のテキストの色が一括で変わる

もちろん！プロジェクトの設定から、

カラーパレットを自由にカスタマイズできるよ。

ブランドカラーを登録しておくと、とても便利なんだ。

テキストに影を付けると、立体感が出るよ！

大丈夫！主な設定は4つだけだよ：

• X軸: 影の横方向の位置

• Y軸: 影の縦方向の位置

• ぼかし: 影のぼかし具合

• 色: 影の色

よく使う影の設定例を紹介するね：

その通り！背景が複雑な画像の上にテキストを配置する時、

影を付けると格段に読みやすくなるよ。

UnderLine 設定で簡単に下線を引けるよ！

下線には3つのスタイルがあるよ：

• なし: 下線なし（デフォルト）

• 下線: 実線の下線

• 取り消し線: テキストの中央に線

用途によって使い分けるよ：

• 下線: リンク、強調したいテキスト

• 取り消し線: 割引前の価格、訂正箇所

ただし、下線は「リンクである」という印象が強いから、

リンクでないテキストに下線を引くと、ユーザーが混乱することがあるよ。

注意して使ってね！

素晴らしい！色と装飾を組み合わせれば、

印象的で記憶に残るデザインが作れるよ。

最後に、色と装飾を使う時のポイントを教えるね！

コントラストを意識しよう：

背景色とテキスト色のコントラスト比は、少なくとも 4.5:1 以上が推奨されているよ。

• ⭕️ 濃いグレー (#333) on 白 (#FFF)

• ⭕️ 白 (#FFF) on 濃い青 (#003366)

• ❌ 薄いグレー (#AAA) on 白 (#FFF)

やりすぎ注意：

影、下線、グラデーションなど、装飾を詰め込みすぎると、

逆に読みにくくなるよ。1つか2つに絞ろう。

カラースタイルを活用：

サイト全体で色を統一することで、プロフェッショナルな印象になるよ。

メインカラー、サブカラー、アクセントカラーを決めて、

カラースタイルに登録しておこう。

お疲れ様！次は、画像やアイコンの編集について学んでいこうね。