引用シェアカードのデザイン

出典が見える2行の引用

このグラフィックはOpenDesign Communityライブラリで配布されており、HTMLAnythingがアップストリームとして宣言されています。ひとつの出典付きの主文を軸に構成されています。見える構図は、小さな「✦ QUOTE」ラベルから始まり、ラテン文字の技術名を含む大きな中国語の引用文へ進み、Tom Panのアイデンティティブロックで終わります。この順序により、SNS投稿である前にまず引用として読めるようになっています。

サンプルの主文は、著者のための形式としてのMarkdownと、読者のための形式としてのHTMLを対比させています。「Markdown」が1行目の冒頭、「HTML」が2行目の冒頭に置かれ、二つの技術に並行した視覚的な重みを与えています。ゴールドの強調は選ばれた中国語の語に付けられ、この対比は別のチャートやバッジ、データビジュアライゼーションではなく、エディトリアルな強調として機能します。これはひとつの中国語の引用の中に複数の文字体系が混在しているのであって、英語版と中国語版が並んでいるわけではありません。

ソースのCSSは、アスペクト比16:9、最大幅96vwの1600pxのカードを指定しています。この比率は、プレゼンテーションのような横長の読み面を支えます。主文はフレームの大部分を占められ、アイデンティティブロックは小さな二次的領域として読みやすさを保ちます。トレードオフは意図的な密度で、より長い文章に置き換える場合は、改行位置と文字サイズのバランスを調整し直す必要があります。

描かれている出典はTom Panで、ハンドルは@tompan、社内文書をHTMLに変換するエンジニアという説明と、2026.05という日付が含まれます。これらの詳細は、中心の主文と競合せずに、名前、役割、公開日のような日付を伝えます。あくまでサンプルの引用クレジットであり、検証済みの個人の経歴でも、OpenDesignを推薦する発言でも、テンプレートが宣言するHTMLAnythingのアップストリームに代わるものでもありません。

引用シェアカードの活用シーン

この構図は、出典を示せる短いアイデアを視覚的に際立たせたい場合に向いています。エディトリアルなSNS投稿、カンファレンスやコミュニティの引用シリーズ、単独の画像として公開する社内の原則などに使えます。いずれの場合も、カードの2行の読みのリズムを保てるよう、元の文章は十分に短い必要があります。

アイデンティティブロックは、著者自身がメッセージの一部である場合にも、この形式を有効にします。ここでは肩書きの行が、社内文書をHTMLに変換するエンジニアと説明しており、引用に職業上の文脈を与えています。新しい用途に意味のある著者、ハンドル、日付がない場合は、左下のブロックを装飾として残すのではなく、別の情報目的を持たせる必要があります。

複数の文字体系を扱う出版では、このアーティファクトが実用的な関係を示しています。ラテン文字の技術名は見つけやすいまま、中国語の文言が文の構造を担います。トレードオフは、文字数やフォントメトリクスによってバランスがすぐ変わることです。再現する際は、現在の改行がそのまま通用すると仮定せず、実際の文言で確認してください。

複数文字体系の主文の構成

視覚的な階層は、複数のインターフェースコントロールではなく、スケールと配置によって作られています。小さなアウトラインのゴールドの「✦ QUOTE」ピルが左上近くにあります。主文は特大の白とゴールドの文字で中央エリアに広がり、「H」と「html-anything」は右上にコンパクトな文脈ラベルとして現れます。この対角線状の配置が、カードが中央揃えのテキストブロックになることを防いでいます。

引用の2行は入れ替えられません。1行目は「Markdown」で始まり、2行目は「HTML」で始まるため、読み手は中国語の文を読み終える前に、直接的な視覚上の対を目にします。両行にわたる選ばれた中国語の語のゴールド処理が、繰り返されるアクセントとなり、対比をひとつにまとめます。強調を外せば、カードはより落ち着きますが、対比を導く視覚的な手がかりを失います。

背景は、見えるグリッドを持つ暗い面で、左側に暖かいブラウンの照明、右下にオリーブゴールドの領域があります。グリッドは余白に計測されたような構造を与え、色の移り変わりは大きな黒い領域が空虚に見えるのを防ぎます。この雰囲気は技術的な主題を支えますが、明るい文字が両方の暖色領域の上で読めなければならないというコントラスト上の制約も生みます。

左下では、「T」のイニシャルが著者名、ハンドル、肩書き、日付に添えられています。この肖像写真のないアイデンティティ表現は、フッターを引用に結びつけつつ、特大の主文に対して二次的に保ちます。コンパクトである分の限界もあり、読み手が得るのは描かれた短い出典表記だけで、完全なプロフィールも、引用の真正性を裏づける証拠もありません。

範囲と機能の境界

このアーティファクトは、デザイン専用のグラフィックサンプルです。提供された根拠が確認しているのは、ローカルHTMLプレビュー、CSSで定義されたカード比率、見えているタイポグラフィ、描かれたテキストです。ライブのSNS連携、公開ワークフロー、接続されたデータソース、測定可能なシェア実績は確認されていません。したがって、引用に含まれる名前、肩書きの説明、日付は、別途検証されない限り例示的な内容として扱ってください。

このテンプレートはOpenDesign Communityを通じて配布され、HTMLAnythingをアップストリームのソースとして宣言しています。描かれた引用では、別途Tom Panがクレジットされています。同梱のマニフェストはサンプルプラグインにMITライセンスを宣言していますが、描かれているすべてのアセットに個別のライセンスが成立するわけではありません。改変する場合は、アップストリームのクレジットを保持し、使用する引用、著者の身元、外部フォントの権利を確認してください。