今日の注目デザイナー
今日の注目デザイナーをあなたのウェブサイトに埋め込む
今日の注目デザイナーは毎日新しい特集を公開しています。画像のアドレスは変わりませんが、その裏にある画像は毎日変わるため、コードを一度追加するだけで、訪問者は自動的に今日の特集を見ることができます。
仕組み
毎日、固定のアドレスに新しい画像が公開されます。あなたのページはそのアドレスを読み込むため、常に最新の特集が表示され、クリックすると訪問者は今日の注目デザイナーの詳細ページに移動します。
スクリプトをお使いになりますか?コンテナとスクリプトを1つずつ追加してください。ウィジェットはdata-dotd-variant(image、cta、card)で選択したスタイルを、スクリプトアドレスの言語が利用可能な場合はその言語で描画します。スクリプトを実行できない場合は、同じバリアントのHTML版をご使用ください。
バリアントA:画像のみ
今日の画像を今日の注目デザイナーにリンク。最も軽量なオプションです。
ライブプレビュー
<a href="https://designerhighlightoftheday.com/ja/" target="_blank" rel="noopener">
<img src="https://competition.adesignaward.com/highlight-of-the-day/today.png" alt="グローバルなデザインコミュニティの一員である卓越したデザイナーを紹介する今日の注目デザイナー" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="designerhighlightoftheday.com" data-dotd-variant="image"></div>
<script async src="https://designerhighlightoftheday.com/feature.js?lang=ja"></script>
バリアントB:画像とコールトゥアクション
今日の画像の下にコールトゥアクションを表示します。
ライブプレビュー
<a href="https://designerhighlightoftheday.com/ja/" target="_blank" rel="noopener" style="display:block;max-width:100%;color:inherit;text-decoration:none;text-align:center">
<img src="https://competition.adesignaward.com/highlight-of-the-day/today.png" alt="グローバルなデザインコミュニティの一員である卓越したデザイナーを紹介する今日の注目デザイナー" loading="lazy" style="display:block;max-width:100%;height:auto;margin:0 auto">
<span style="display:block;margin-top:.5em;font:600 15px/1.3 system-ui,sans-serif">今日の注目デザイナーを見る</span>
</a>
<div data-dotd="designerhighlightoftheday.com" data-dotd-variant="cta"></div>
<script async src="https://designerhighlightoftheday.com/feature.js?lang=ja"></script>
バリアントC:Bootstrapカード
画像、特集タイトル、短い説明文、コールトゥアクションボタンを備えたBootstrapカードです。ページにBootstrapが必要です。
ライブプレビュー
<div class="card" style="max-width:24rem">
<a href="https://designerhighlightoftheday.com/ja/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/highlight-of-the-day/today.png" class="card-img-top" alt="グローバルなデザインコミュニティの一員である卓越したデザイナーを紹介する今日の注目デザイナー" loading="lazy"></a>
<div class="card-body">
<h5 class="card-title">今日の注目デザイナー</h5>
<p class="card-text">A' Design Awardは、第一線で活躍するデザイナー、スター建築家、トップクリエイター、イノベーターを毎日「今日の注目デザイナー」として取り上げ、その功績、クリエイティブな作品、デザイン界への貢献を紹介します。</p>
<a href="https://designerhighlightoftheday.com/ja/" class="btn btn-danger" target="_blank" rel="noopener">今日の注目デザイナーを見る</a>
</div>
</div>
<div data-dotd="designerhighlightoftheday.com" data-dotd-variant="card"></div>
<script async src="https://designerhighlightoftheday.com/feature.js?lang=ja"></script>
オプション3:JSON
開発者、アプリ、自動化向け。JSONには名前、説明、画像アドレス、リンク、日付が含まれます。クロスオリジンリクエストに対応しています。
fetch("https://designerhighlightoftheday.com/feature.json?lang=ja")
.then(function (r) { return r.json(); })
.then(function (d) {
// d.name, d.feature, d.paragraph, d.image, d.url, d.date ...
});
レスポンス例
{
"domain": "designerhighlightoftheday.com",
"name": "今日の注目デザイナー",
"feature": "今日の注目デザイナー",
"paragraph": "A' Design Awardは、第一線で活躍するデザイナー、スター建築家、トップクリエイター、イノベーターを毎日「今日の注目デザイナー」として取り上げ、その功績、クリエイティブな作品、デザイン界への貢献を紹介します。",
"description": "「今日の注目デザイナー」は、第一線で活躍するデザイナー、スター建築家、トップクリエイター、イノベーターを毎日取り上げ、その功績、クリエイティブな作品、デザイン界への貢献を紹介します。権威あるA' Design Award and Competitionが認定した人物です。",
"call_to_action": "今日の注目デザイナーを見る",
"date": "2026-11-08",
"language": "ja",
"image": "https://competition.adesignaward.com/highlight-of-the-day/today.png",
"image_alt": "グローバルなデザインコミュニティの一員である卓越したデザイナーを紹介する今日の注目デザイナー",
"url": "https://designerhighlightoftheday.com/ja/",
"feature_url": "https://competition.adesignaward.com/designer-highlight-of-the-day.html",
"registry_url": "https://competition.adesignaward.com/designer-highlights-of-the-days.php",
"embed_url": "https://designerhighlightoftheday.com/ja/umekomi/"
}
知っておくと便利なこと
- 画像のリンクはそのまま残してください。訪問者が特集の全容を発見できるようになります。
- 常に上記の画像アドレスを使用し、コピーを保存しないでください。ページが常に最新の状態に保たれます。
- 画像はレスポンシブで、コンテナの幅を超えることはありません。
- ヘルプやカスタムフォーマットが必要ですか?お問い合わせください。