Material icons

2个月前編集 0 0

Material Iconsは、Googleが提供するオープンソースのアイコンセットで、UIデザインにおける一貫性と視認性を向上させるために設計されています。アイコンは無料で使用でき、Web、Android、iOS向けに簡単にインポート可能です。

保存日時：
2024-11-04
公式サイト
Material iconsMaterial icons
Material icons

Material Iconsとは？ – Google、無料アイコン、使い方、ダウンロード

1. Material Iconsとは？

Material Iconsは、Googleが提供する、無料で利用できるアイコンセットです。「Webサイトやアプリに統一感のあるアイコンを使いたい」「Googleのデザインガイドラインに沿ったアイコンを使いたい」「無料で高品質なアイコンを入手したい」という、Webデザイナー、UI/UXデザイナー、アプリ開発者、フロントエンドエンジニアなどの要望に応えます。Material Iconsは、GoogleのMaterial Designガイドラインに基づいてデザインされています。Material Iconsは、シンプルで視認性が高く、さまざまなデバイスや画面サイズに対応できるように最適化されています。Material Iconsは、さまざまなスタイル（Filled, Outlined, Round, Sharp, Two-tone）で提供されています。Material Iconsは、Webフォント、SVG、PNGなど、さまざまな形式で利用できます。Material Iconsは、Google Fontsを通じて提供されており、簡単にWebサイトに導入できます。Material Iconsは、GitHubからダウンロードすることもできます。Material Iconsは、個人利用だけでなく、商用プロジェクトにも無料で利用できます（Apache License 2.0）。Material Iconsは、その使いやすさと品質の高さから、世界中の多くのWebサイトやアプリで利用されています。

【目次】

2. Material Iconsで利用できるアイコンの種類

Material Iconsでは、さまざまなカテゴリのアイコンを提供しています。

  • **Action:**

    • アクションに関連するアイコン（例：検索、設定、共有など）。
  • **Alert:**

    • 警告やエラーに関連するアイコン。
  • **AV:**

    • オーディオ・ビデオに関連するアイコン（例：再生、一時停止、音量など）。
  • **Communication:**

    • コミュニケーションに関連するアイコン（例：メール、チャット、電話など）。
  • **Content:**

    • コンテンツに関連するアイコン（例：コピー、貼り付け、追加など）。
  • **Device:**

    • デバイスに関連するアイコン（例：スマートフォン、タブレット、PCなど）。
  • **Editor:**

    • テキストエディタに関連するアイコン（例：太字、斜体、下線など）。
  • **File:**

    • ファイルに関連するアイコン（例：フォルダ、ドキュメント、ダウンロードなど）。
  • **Hardware:**

    • ハードウェアに関連するアイコン（例：キーボード、マウス、プリンターなど）。
  • **Image:**

    • 画像に関連するアイコン（例：カメラ、画像編集、明るさ調整など）。
  • **Maps:**

    • 地図に関連するアイコン（例：場所、ナビゲーション、ピンなど）。
  • **Navigation:**

    • ナビゲーションに関連するアイコン（例：メニュー、矢印、閉じるボタンなど）。
  • **Notification:**

    • 通知に関連するアイコン（例：ベル、メッセージ、アラームなど）。
  • **Places:**

    • 場所に関連するアイコン（例：カフェ、レストラン、ホテルなど）。
  • **Social:**

    • ソーシャルメディアに関連するアイコン（例：ユーザー、グループ、いいね！など）。
  • **Toggle:**

    • トグルスイッチに関連するアイコン。

また、以下のスタイルでアイコンを提供しています。

  • **Filled (塗りつぶし):** デフォルトのスタイル。
  • **Outlined (アウトライン):** 線で描かれたスタイル。
  • **Round (丸みを帯びた):** 角が丸いスタイル。
  • **Sharp (シャープ):** 角が鋭いスタイル。
  • **Two-tone (2色):** 2色で構成されたスタイル。

3. Material Iconsの使い方

Material Iconsの基本的な使い方を説明します（Webフォントとして利用する場合）。

  1. **Google FontsからMaterial Iconsを読み込む:**

    • HTMLの<head>タグ内に、以下のコードを追加します。
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    • スタイルを変更したい場合は、以下のように指定します。
          <!-- 例：Outlined スタイル -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
  2. **アイコンを表示:**

    • HTMLで、<i>タグにMaterial Iconsのクラス名を指定することで、アイコンを表示します。
         <!-- 例：Filled スタイルの「home」アイコン -->
<i class="material-icons">home</i>

<!-- 例：Outlined スタイルの「search」アイコン -->
<i class="material-icons-outlined">search</i>
  3. **アイコンをカスタマイズ:**

    • CSSを使って、アイコンのサイズ、色などを変更できます。
    • 例:
    <style>
  .material-icons {
    font-size: 48px; /* サイズを48pxに変更 */
    color: blue; /* 色を青に変更 */
  }
</style>

4. Material Iconsのダウンロード方法

Material Iconsは、GitHubからダウンロードすることもできます。

  • GitHubのリポジトリにアクセスします。
  • [Code] ボタンをクリックし、[Download ZIP] を選択して、ZIPファイルをダウンロードします。
  • ZIPファイルを解凍すると、さまざまな形式（SVG, PNGなど）のアイコンファイルが入っています。

5. Material Iconsのライセンスについて

  • Material Iconsは、Apache License 2.0の下で提供されています。
  • 個人利用、商用利用ともに、無料で利用できます。
  • クレジット表記（帰属表示）は必須ではありません。
  • 詳細については、Apache License 2.0をご確認ください。

6. Material Iconsの日本語対応について

  • Material IconsのWebサイト（Google Fonts）は、日本語に対応しています。
  • アイコンの検索キーワードは、日本語でも入力できます。
  • アイコン名や説明は英語ですが、Google翻訳などを利用すれば理解できます。

7. まとめ

Material Iconsは、Googleが提供する、無料で利用できる高品質なアイコンセットであり、Webデザイナーやアプリ開発者にとって非常に便利なツールです。さまざまなカテゴリとスタイルのアイコンが用意されており、WebフォントやSVG、PNGなど、さまざまな形式で利用できます。Material Designガイドラインに準拠しているため、統一感のあるデザインを実現できます。Material Iconsは、WebサイトやアプリのUIを向上させたい方におすすめです。

Material Icons、Googleアイコン、無料アイコンに関する情報をもっと知りたい方は、www.sucoi.jpもおすすめです。役立つ情報が豊富に紹介されています。ぜひチェックしてみてください！

関連ナビゲーション