カード、パネル、タイルの違いは何ですか？
現代のいくつかのフロントエンド開発フレームワークでは、さまざまなタイプの「コンテナー」要素間にぼやけがあるように見えます。これが実装からデザインを抽象化しようとする試みなのか、用語の標準化がないためなのかはわかりませんが、一部のデザインフレームワークではカードではなくパネルが使用されているのがわかります。 （例Bootstrap 3）他にはカードという用語は存在するが、パネル（例：Iconic）は存在しない、そしておそらく両方が他に存在するのか？
デザインの観点から見ると、カードとパネルはどちらも単なるコンテナのようです。カードがどれだけ大きくて、パネルがどれだけ小さいかを定義するものは何もないので、本当に違いがあるのかと思います。実装の観点から見ると、カードは小さいサイズのデザイン要素に使用する必要があり、モバイル固有のアプリケーションに適しているようですが、パネルはより広い範囲のデザイン要素に使用され、デスクトップ固有のアプリケーションに適しています。
違い（の欠如）を説明または強調するのに役立つ証拠/リファレンス/例はありますか？何らかの理由で、カードとタイルは互いにより密接に関連していると思いますが、そのパネルは少し異なるクラス/ファミリにあるように見えますか？
違いはないと主張すると、人々が「タイル」をMicrosoftの「メトロ」スタイルのホームページに関連付ける理由を理解するのは困難ですが、GoogleおよびAndroidアプリでは「カード」であり、 JavaおよびGnomeアプリケーションの場合は「パネル」です。おそらく、コンテキストまたは実装にいくつかの違いがありますか？
[〜＃〜] update [〜＃〜]：Bootstrap 4のリリースでは、カードは基本的にパネルに相当するようです（1つのコンポーネントが他のコンポーネントを置き換えたため）。ただし、これには、一貫性のある実装を困難にする、より柔軟なコンテナを維持するためのコストが伴います。ブートストラップによると：
柔軟で拡張可能なコンテンツコンテナ。ヘッダーとフッターのオプション、さまざまなコンテンツ、状況に応じた背景色、強力な表示オプションが含まれています。
更なる更新： Bootstrap 5とMaterial.ioが、レスポンシブモバイルの新しいファースト/マルチデバイスエコシステム設計システムの新しい世界でカードUIコンポーネントを採用しているようです。タイル」は、Microsoft Fluent Design Systemで非常に特定の意味を持っています。
タイルは、スタートメニュー上のアプリの表現です。すべてのアプリにはタイルがあります。 Microsoft Visual Studioで新しいユニバーサルWindowsプラットフォーム（UWP）アプリプロジェクトを作成すると、アプリの名前とロゴを表示する既定のタイルが含まれます
パネルは、少なくともUIコンポーネントに関しては、もはや語彙の一部ではないようですが、MicrosoftとJavaの世界では、UIコンポーネントの組織レイアウトの抽象的な概念を表しています。
コンテナ動物園
カード、パネル、タイルなどの用語は同じ意味で使用されることが多いため、それらの定義は正確ではなく、会社ごと、またはエコシステムごとに異なる場合があります。しかし、さまざまなコンテナーに対してゆるい固有の定義があります。
なぜそれが重要なのですか？
実際には、名前を付けることが重要であるため。コンテナ名が重要である理由の例を次に示します（画像をクリックして展開）：
ここで、これらのコンテナ名の一部が交換されたと想像してください。たとえば、cardがpanelまたはtoolbarがtileに置き換えられました。これは、かなり混乱するUXの議論につながります。
この思考演習では、コンテナの用語はすべて大まかに交換可能ですが、それらの意味については大雑把な規則があることを示しています。
また、コンテナに異なる用語を使用することが重要である理由も示しています（すべてのコンテナに「パネル」という名前が付けられている場合、このレイアウトで作業するのがどれほど難しいかを想像してください）。
固有の定義
ここでは、用語の用法の大まかな定義を示します。上の図は、各コンテナの例の適切なリファレンスです。
ウィンドウ
- 一般的なエコシステム：MS Windows、Mac OS、Ubuntu、およびその他のオペレーティングシステム
- 通常は、アプリケーションビューの最大のビジュアルコンテナを指し、通常はオペレーティングシステムによって定義されます。
フレーム
- 一般的なエコシステム：すべてのデジタルUI
- 通常は、単一のコンテンツ本文を含む外部要素または境界オブジェクトを指します。
- 例えばHTMLでは、多くの場合、パネルはフレームオブジェクト内にラップされます。これにより、フレームをパネルのコンテンツとは別にスタイル設定できます。
パネル
- 一般的なエコシステム：すべてのデジタルUI
- 通常、関連する複数の要素を含むウィンドウ内のコンテナを指します。たとえば、パネルには、フォーム、一連の情報、データテーブルなどが含まれます。
- パネルは、視覚的な編成を容易にするためにウィンドウのコンテンツを分割するためによく使用されます。
カード
- 一般的なエコシステム：ウェブ、Google Material Design、モバイル、テーブルアプリケーション
- 通常、ページに複数回表示される可能性がある複数の関連要素を含む長方形のコンテナを指します。たとえば、ニュース記事、検索結果、レストランのリストはすべて、複数の要素（画像、タイトル、説明）を含む可能性があるアイテムであり、カードのレイアウトに適しています。
- カードは、グリッドレイアウトでコンテンツを分割して整理するための便利な方法であり、複雑で階層的な情報の提示を容易にします。
- カード（タイルとは異なります）には、複数のインタラクティブな要素を含めることができます。たとえば、上の図では承認/拒否ボタンがあり、ユーザーはカードのタイトルをクリックして詳細を読み込むことができる場合があります。
- カードは多くの場合、コンテナとして操作できます。多くの場合、ユーザーはカードを破棄、ドラッグ、スワイプ、または再配置できます。
タイル
- 一般的なエコシステム：Microsoft Metroインターフェイス
- タイルは通常、小さな単一目的コンテナーを表します。タイルは、単一の情報（アプリケーションのアイコンなど）または関連する情報の小さなクラスター（気象の温度や湿度など）を表示しますが、広範囲の情報を表示することはめったにありません。
- 多くの場合、タイルは1回の使用....で区別されます。MicrosoftWindows 8以降では、タイルはクリック可能で、ユーザーを単一のアプリケーション、ビュー、またはWebに送信しますページ。
繰り返しになりますが、これらの用語は大まかに定義されているだけであり、使用法は組織ごとに異なる可能性があります。
ただし、上で概説した理由により、緩やかで非公式な定義を持つことは依然として有用です。コンテナーを名前で区別することは、UXプロフェッショナルにとって実際に非常に役立ちます。
この質問に対する客観的な答えはおそらくありません。あなたが言ったように、マイクロソフト、グーグル、またはオラクルが同意しないようなら、どうすればよいでしょうか？
私の見解は、主に カード上のGoogleマテリアルデザイン および Microsoft Metro tiles に基づいています。私にとって、カードはGoogleがカードと呼ぶものに近いものです。 Metroタイルと一般的なタイルは、いくつかのアクションが関連付けられている可能性があるより均質なアイテムです。 Googleでは、タイルの使用例として画像ギャラリーを使用しています。
外観
Googleマテリアルデザインカードのコレクション内の幅は常に一定です。
カードの幅と高さは一定です。最大の高さは、プラットフォームで利用可能なスペースの高さに制限されますが、一時的に拡張することができます（たとえば、コメントフィールドを表示するため）。
Googleマテリアルでは、デザインカードの角は常に丸くなっていますが、タイルの角は常に四角です。
Microsoft Metroタイルは、コレクション内で可変サイズにすることができます。
ユーザーはタイルのサイズをいつでも変更できます。現在使用されているサイズをプログラムで確認する方法はなく、現在のサイズに一致する通知のみが表示されます。
タイルアセットとトーストビジュアルアセット（Windowsランタイムアプリ）
コンテンツ
Microsoft Metroタイル：
このトピックでは、アプリタイルを囲む概念と用語について説明します。これは、アプリを表し、起動するスタート画面のタイルです。アプリタイルは単なる大きなアイコンではありません。アプリが実行されていないときに、そのアプリに関連付けられたイベント（新しいソーシャルネットワーキングの投稿、新しいニュースのヘッドライン、株価など）をユーザーに知らせるために使用できる、絶えず変化するコンテンツのセットを表示する機能があります。
Googleマテリアルデザインカード：
カードは、より詳細な情報へのエントリポイントとして機能する固有の関連データが含まれた紙です。
[...]
カードは、さまざまな要素で構成されるコンテンツを表示する便利な手段です。また、さまざまな長さのキャプションが付いた写真など、サイズやサポートされるアクションが異なる要素を紹介するのにも適しています。
したがって、コンテンツに関してはMetroタイルは少し制限されています。アプリケーションのロゴのみが表示され、場合によってはアプリケーションから送信される通知も表示されます。 Googleカードは、動的または静的の複数のタイプのコンテンツをサポートできます。
つまり、ある意味でGoogleカードはJavaのパネルのようなものです。 From パネルのJava APIドキュメント ：
Panelは最も単純なコンテナークラスです。パネルは、アプリケーションが他のパネルを含む他のコンポーネントを接続できるスペースを提供します。
ただし、Javaのパネルとは異なり、GoogleカードまたはMetroタイルには、他のカードまたはタイルを含めることができません。
行動
Metroタイルには1つのアクションがありますが、アプリケーションを開始しますが、Googleカードはカードのプライマリアクションに加えて複数の補足アクションをサポートできます。
カードの主なアクションは通常、カード自体です。
補足アクションは、コンテンツタイプと予想される結果に応じて、コレクション内のカードごとに異なります。たとえば、映画を再生することと本を開くことです。
Metroアプリケーションには、同じアプリケーションを起動するが、異なるコンテンツまたは異なる状態のセカンダリタイルを含めることができます。
セカンダリタイルを使用すると、ユーザーはスタート画面からアプリの特定の場所やサブエクスペリエンスに直接起動できます。アプリはピン留めオプションとして提供するコンテンツを決定しますが、ユーザーはセカンダリタイルを作成するか削除するかを選択します。
パネル上
パネルは、カードやタイルとは明らかに異なるものであると常に考えていました。私にとってパネルもコンテナですが、カードやタイルが使用されるような方法でコレクションとして使用されることはありません。
パネルは、主にCTAのアクションを含むことができるコールアウトとして使用されます。パネルには、カード/タイルよりもはるかに多くの情報が含まれており、ほとんどの場合、カード/タイルよりもサイズが大きくなります。これが Foundationフレームワークのパネルの例 です。これは、パネルについて言及するときに私が思うことです。ただし、これらのパネルはカード/タイルの作成に使用できます。
Googleのマテリアル仕様によると...タイルの角は四角で、アクションは2つまでで、再配置または却下することはできません。カードは角が丸く（トランプのように）、複数のアクションがあり、再配置または却下できます 
1.カード-2.タイル-3.パネル
簡単に言えば、これらの用語に違いはありません。これらはどれも任意のサイズにすることができ、私はさまざまなプロジェクトで用語を交換可能に使用しました。
それらを区別しようとする支出サイクルから得られるものはほとんどないため、チームの他のメンバーが使い慣れている用語を使用するように適応する必要があります。
カードレイアウトは、データを一口サイズに分割するのに非常に優れており、レスポンシブデザインでうまく機能します。 cardsとtilesはあまり一般的ではありませんが、ほとんどの人はカードを財布に入れて持ち歩くので、私はpanelsという言葉を好みます。
タイル、カード、またはパネルと呼ばれるものを使用するアプリをドキュメント化しています。プログラミングの観点から見ると、おそらくその違いは許容できるほど曖昧です。ドキュメンテーションの観点から、論理的に意味のある参照用の説明的なハンドルが必要です。
私が見たほとんどのコメントについての私の読みは、違いはあまり重要ではないということです。ドキュメンテーションの分類学的観点から、違いは非常に重要であることをお勧めします。
これを念頭に置いて、1）タイル-他のコンテンツへのポインターとして使用される単一目的の静的画像2）カード-他のコンテンツまたは機能へのリンクを含む可能性のあるライブデータのサブセットを表示する多目的のマルチ要素コンテナー3 ）パネル-特定のコンテキストではWordドキュメントと同等であり、他のコンテキストではデータまたはクエリ結果の行の順序付けされたレイアウトと同等である複雑なドキュメント
たぶん、現時点では気づいていないデータベース設計の既存のUI用語があります。ただし、フォームとクエリの結果は、ここでレイアウトするモデルに適合しません。