引用ブロック

引用や重要なテキストを強調するには引用ブロックコンポーネントを使用します。このコンポーネントは特定のコンテンツを視覚的に強調し、重要な情報や推薦文に注目を集めます。

設定 あなたのブロック引用

タイトルを追加(任意)

タイトルは引用テキストの文脈や帰属を示します。

  • 入力する内容: 引用されている人物の名前、引用の出典(例:書籍、記事、ウェブサイト)、または引用の主旨をまとめた短い見出しなどが考えられます。

  • 使用する場面: 引用そのものから出典や文脈がすぐには明らかでない場合にタイトルが役立ちます。

引用文を入力してください

これはブロック引用スタイルで強調したい主要なテキストです。

  • 入力する内容: 顧客の推薦文、レポートの重要な要点、記事の抜粋、力強い発言、または強調したいその他のテキストなどが該当します。

  • ベストプラクティス:

    • 引用は簡潔で要点を押さえてください。

    • 引用が周囲のコンテンツと関連していることを確認してください。

スタイル(バリアント)を選択

引用のトーンや目的に合う視覚スタイルを選んでください。"バリアント"設定はブロック引用の全体的な外観を制御します。

  • 利用可能なバリアント:

    • デフォルト: 一般用途に適した中立的なスタイル。通常、インデントと明確なフォントで引用を区別します。

    • ブランド: ブランドの色やスタイルをブロック引用に適用し、全体のデザインと視覚的一貫性を作ります。

    • 警告: 注意喚起や助言を強調します。注目を集めるために特有の背景色や境界線を使うことがあります。

    • エラー: 重大な情報やエラーを強調します。太字のフォントや赤のような強い色を使用することがあります。

    • 成功: ポジティブなメッセージや成果に注意を引きます。緑や青のような視覚的に好ましい色を使うことがあります。

アイコンを追加(任意)

関連するアイコンを追加してブロック引用の視覚的インパクトと意味を高めます。

  • 選び方: 引用の内容を補完し、そのメッセージを強めるアイコンを選んでください。

  • 例: 顧客満足についての引用には「親指を立てた」アイコンや笑顔アイコンを伴わせることができます。警告に関する引用には感嘆符のアイコンを使うことができます。

  • 配置: アイコンは通常、選んだバリアントやデザインの好みに応じて、引用テキストの前または後ろなど引用文の近くに配置されます。

ブロック引用コンポーネントを使用する理由:

  • 重要な情報を強調: 重要な引用、推薦文、または主要な要点に注意を引きます。

  • 読みやすさを向上: 長いテキストの塊を分割し、コンテンツを視覚的に魅力的にします。

  • 視覚的な階層を強化: 明確な視覚構造を作り、読者の視線を導きます。

  • 信頼性を追加: 顧客の推薦や専門家の意見を強調して信頼を築きます。

使用例:

  • 顧客の推薦: 満足した顧客からの肯定的なフィードバックを紹介します。

  • 主要な発見: レポートや調査からの重要な洞察を強調します。

  • 行動喚起: 特定のメッセージを強調したり、特定の行動を促したりします。

  • コードスニペット: コード例を視覚的に区別して表示します。

ブロック引用コンポーネントをダイナミックコンポーネントに組み込むことで、重要な情報を効果的に強調する魅力的で情報豊かなユーザーインターフェースを作成できます。

最終更新

役に立ちましたか?