メインコンテンツへスキップ

今日のインタビュー

今日のデザインインタビューをあなたのウェブサイトに埋め込む

今日のインタビューは毎日新しい特集を公開しています。画像のアドレスは変わりませんが、その裏にある画像は毎日変わるため、コードを一度追加するだけで、訪問者は自動的に今日の特集を見ることができます。

仕組み

毎日、固定のアドレスに新しい画像が公開されます。あなたのページはそのアドレスを読み込むため、常に最新の特集が表示され、クリックすると訪問者は今日のインタビューの詳細ページに移動します。

スクリプトをお使いになりますか?コンテナとスクリプトを1つずつ追加してください。ウィジェットはdata-dotd-variant(image、cta、card)で選択したスタイルを、スクリプトアドレスの言語が利用可能な場合はその言語で描画します。スクリプトを実行できない場合は、同じバリアントのHTML版をご使用ください。

バリアントA:画像のみ

今日の画像を今日のインタビューにリンク。最も軽量なオプションです。

ライブプレビュー

<a href="https://interviewoftheday.com/ja/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/design-interview-of-the-day/today.png" alt="業界リーダーとの深いインタビューを特集する今日のデザインインタビュー" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="interviewoftheday.com" data-dotd-variant="image"></div>
<script async src="https://interviewoftheday.com/feature.js?lang=ja"></script>

バリアントB:画像とコールトゥアクション

今日の画像の下にコールトゥアクションを表示します。

ライブプレビュー

<a href="https://interviewoftheday.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/design-interview-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="interviewoftheday.com" data-dotd-variant="cta"></div>
<script async src="https://interviewoftheday.com/feature.js?lang=ja"></script>

バリアントC:Bootstrapカード

画像、特集タイトル、短い説明文、コールトゥアクションボタンを備えたBootstrapカードです。ページにBootstrapが必要です。

ライブプレビュー

<div class="card" style="max-width:24rem">
  <a href="https://interviewoftheday.com/ja/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-interview-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://interviewoftheday.com/ja/" class="btn btn-danger" target="_blank" rel="noopener">今日のデザインインタビューを見る</a>
  </div>
</div>
<div data-dotd="interviewoftheday.com" data-dotd-variant="card"></div>
<script async src="https://interviewoftheday.com/feature.js?lang=ja"></script>

オプション3:JSON

開発者、アプリ、自動化向け。JSONには名前、説明、画像アドレス、リンク、日付が含まれます。クロスオリジンリクエストに対応しています。

fetch("https://interviewoftheday.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": "interviewoftheday.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/design-interview-of-the-day/today.png",
    "image_alt": "業界リーダーとの深いインタビューを特集する今日のデザインインタビュー",
    "url": "https://interviewoftheday.com/ja/",
    "feature_url": "https://competition.adesignaward.com/design-interview-of-the-day.html",
    "registry_url": "https://competition.adesignaward.com/design-interviews-of-the-days.php",
    "embed_url": "https://interviewoftheday.com/ja/umekomi/"
}

知っておくと便利なこと

  • 画像のリンクはそのまま残してください。訪問者が特集の全容を発見できるようになります。
  • 常に上記の画像アドレスを使用し、コピーを保存しないでください。ページが常に最新の状態に保たれます。
  • 画像はレスポンシブで、コンテナの幅を超えることはありません。
  • ヘルプやカスタムフォーマットが必要ですか?お問い合わせください。

スポンサー

受賞デザインを発見

今日のデザイン名言

今日のデザイン名言

DesignAdage