github ページに sirochro 製 CSS アイコンフレームワーク MellowGlyph を公開しました。
ローンチ時点で 550 種類以上のアイコンがセットになっており、sirochro のサイトや iOS アプリで使われているアイコンは全て MellowGlyph に入っています。
MellowGlyph は無料です。是非使ってみてください。
公式ページは英語のみの対応となっていますので、ここでは日本語による特徴、簡単な説明や使い方を説明したいと思います。
目次
- MellowGlyph の特徴
- MellowGlyph の使い方
- MellowGlyph アイコン一覧
- まとめ
MellowGlyph の特徴
デザイン
アイコンのエッジは面取りを施すことで必要最小限の丸みを持ち、正方形グリッドに収まるように設計されています。
総数 550 種類以上
無料アイコンセットとしては最高クラスのバリエーションを用意しました。この数字には、エイリアス（同じアイコンアートワークの別名称）による重複した数を含みません。
開発者に最適化
MellowGlyph には や のような開発言語や、各種キーボード記号のアイコンが含まれています。開発者同士のコミュニケーションにお役立てください。
ベクターグラフィックス
アイコンはすべてベクターで作成されているので、どのようなサイズでも綺麗に出力・表示されます。
すべて無料
MellowGlyph のダウンロード、ならびに利用は無料です。商用利用も可能です。
CSS で編集可能
アイコンの色、サイズ、シャドウといった要素を CSS で変更可能です。
すべての端末に対応
Mac、PC、スマートフォンやタブレットといったすべての端末で、綺麗に表示されます。
あらゆる現場に
ウェブ制作、アプリ制作、ゲーム開発等、MellowGlyph は、様々な場面での利用を想定し作られています。
アイコンの規格
すべてのアイコンは厳密なルールに基づいて制作されているため、アイコンセットのアートワークに統一感を保証しています。
MellowGlyph の使い方
- ダウンロード
- プロジェクトに配置
- CSS を参照
- HTML で記述
ダウンロード
MellowGlyph 公式ページ にアクセスし Download をクリックしてください。
プロジェクトに設置
ダウンロードしたファイルを解凍し MellowGlyph フォルダ を自分のプロジェクト内の任意の場所へ移動します。
CSS を参照
HTML の head タグ内で mellowglyph.min.css をリンクします。上記 MellowGlyph フォルダ を配置したパスを path/to に記述します。
[code]<link rel=”stylesheet” href=”path/to/MellowGlyph/css/mellowglyph.min.css”>[/code]
HTML で記述
MellowGlyph アイコン一覧 を参照し、該当する HTML を記述すればアイコンが表示されます。
MellowGlyph アイコン一覧
すべてのアイコンのアートワークと CSS クラスは MellowGlyph 公式ページ の アイコン一覧 からご覧いただけます。
ここではその一部を抜粋してご紹介いたします。
まとめ
アイコンは最もミニマルなインフォグラフィックの一つで、情報伝達の目的以外でそれ自体が主張してはいけません。基本的なことですが、これが MellowGlyph 制作時に一番大事にしていたコンセプトでした。
当初は既存のフリーアイコンのディテールが気に入らなかったので、プロジェクトごとに必要なものを１つ、２つ、と作成していたのですが、ある程度実用に耐えられるアイコンセットとなったため、無料公開することにしました。
こんなアイコンがあればいいなというのがあれば、こちら （カテゴリ：MellowGlyph について）からご連絡ください。
アートワークの作成からフォント出力、ダウンロードページの更新とアップデートには時間がかかるので、一つ一つすべてのご要望にお応えすることは不可能ですが、必要だと判断したものに関しては、時間があるときにまとめてアップデートをおこない、アイコンの種類を増やしていきたいと思います。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
