MellowGlyph: CSS アイコンフレームワーク MellowGlyph を公開しました

github ページに sirochro 製 CSS アイコンフレームワーク MellowGlyph を公開しました。

ローンチ時点で 550 種類以上のアイコンがセットになっており、sirochro のサイトや iOS アプリで使われているアイコンは全て MellowGlyph に入っています。

MellowGlyph は無料です。是非使ってみてください。

公式ページは英語のみの対応となっていますので、ここでは日本語による特徴、簡単な説明や使い方を説明したいと思います。

目次

  • MellowGlyph の特徴
  • MellowGlyph の使い方
  • MellowGlyph アイコン一覧
  • まとめ

MellowGlyph の特徴

デザイン

アイコンのエッジは面取りを施すことで必要最小限の丸みを持ち、正方形グリッドに収まるように設計されています。

総数 550 種類以上

無料アイコンセットとしては最高クラスのバリエーションを用意しました。この数字には、エイリアス(同じアイコンアートワークの別名称)による重複した数を含みません。

開発者に最適化

MellowGlyph には のような開発言語や、各種キーボード記号のアイコンが含まれています。開発者同士のコミュニケーションにお役立てください。

ベクターグラフィックス

アイコンはすべてベクターで作成されているので、どのようなサイズでも綺麗に出力・表示されます。

すべて無料

MellowGlyph のダウンロード、ならびに利用は無料です。商用利用も可能です。

CSS で編集可能

アイコンの色、サイズ、シャドウといった要素を CSS で変更可能です。

すべての端末に対応

Mac、PC、スマートフォンやタブレットといったすべての端末で、綺麗に表示されます。

あらゆる現場に

ウェブ制作、アプリ制作、ゲーム開発等、MellowGlyph は、様々な場面での利用を想定し作られています。

アイコンの規格

すべてのアイコンは厳密なルールに基づいて制作されているため、アイコンセットのアートワークに統一感を保証しています。

MellowGlyph の使い方

  1. ダウンロード
  2. プロジェクトに配置
  3. CSS を参照
  4. HTML で記述

ダウンロード

MellowGlyph 公式ページ にアクセスし Download をクリックしてください。

プロジェクトに設置

ダウンロードしたファイルを解凍し MellowGlyph フォルダ を自分のプロジェクト内の任意の場所へ移動します。

CSS を参照

HTML の head タグ内で mellowglyph.min.css をリンクします。上記 MellowGlyph フォルダ を配置したパスを path/to に記述します。

<link rel="stylesheet" href="path/to/MellowGlyph/css/mellowglyph.min.css">

HTML で記述

MellowGlyph アイコン一覧 を参照し、該当する HTML を記述すればアイコンが表示されます。

MellowGlyph アイコン一覧

すべてのアイコンのアートワークと CSS クラスは MellowGlyph 公式ページアイコン一覧 からご覧いただけます。
ここではその一部を抜粋してご紹介いたします。

まとめ

アイコンは最もミニマルなインフォグラフィックの一つで、情報伝達の目的以外でそれ自体が主張してはいけません。基本的なことですが、これが MellowGlyph 制作時に一番大事にしていたコンセプトでした。

当初は既存のフリーアイコンのディテールが気に入らなかったので、プロジェクトごとに必要なものを1つ、2つ、と作成していたのですが、ある程度実用に耐えられるアイコンセットとなったため、無料公開することにしました。

こんなアイコンがあればいいなというのがあれば、こちら (カテゴリ:MellowGlyph について)からご連絡ください。

アートワークの作成からフォント出力、ダウンロードページの更新とアップデートには時間がかかるので、一つ一つすべてのご要望にお応えすることは不可能ですが、必要だと判断したものに関しては、時間があるときにまとめてアップデートをおこない、アイコンの種類を増やしていきたいと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

    Page Not Found.

Pickup Contents