Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
![Material icons - Material Design](https://cdn-ak-scissors.b.st-hatena.com/image/square/35f222ecb54ad2a863fb888e3df6793e90aa4e5f/height=288;version=1;width=512/https%3A%2F%2Fmaterial.io%2Fstatic%2Fassets%2Fresult.png)
汎用性が高いUIアイコンなどと比べると使う場面は少ないものの、いざ使いたいときに便利そうなものやあまり見かけないタイプだと個人的に思ったアイコンセットのまとめで、過去に紹介してきたものをひとまとめにしました。 既に公開・配布終了しているものも一部あるのですが、ファイルダウンロード自体はできなくともデザイン的にはそのまま参考になることもあるので、そういったものはキャプチャが小さめではありますがリンク設定のみ解除する形で紹介します。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。 リンクが未設定で配布形式も記載されていないものは公開・配布終了しているものです。
最近よくアイコンフォントを使っています。 アイコンフォントのメリットですが、 フォントなのでテキストとのベースラインが合わせやすい フォントなので拡大縮小はcssのfont-sizeで指定出来る フォントなのでcssで簡単に色を変えられる ベクターデータなので背景色があるときなどのエッジの処理を気にしなくていい。 があります。 デメリットとして単一の画像よりは一度に複数のアイコンデータを読み込むので、データ量が多くなる(重くなる)というのがあります。 とはいえ、レスポンシブとかサイズとかカラーバリエーションを考えてpngを作るのも手間です。 今回は、自分がよく使うアイコンフォントを備忘録代わりに書いておきます。 なお、この手のアイコンフォントはアップデート(主にアイコンの追加)が多いので、最新版やIE7以下での対応などは各公式サイトでご確認ください。 アイコンフォントの基本的な使い方 ダウ
TOP > Design > 是非ストックしておきたい フリーアイコンセットまとめ「20 Fresh and Beautiful Icon Sets for Free」 常に新しいデザインのものがリリースされるアイコン。主流のフラットデザインから、立体感のあるデザインまで、いろいろなタイプが登場しています。今回はそんなフリーアイコンセットまとめ「20 Fresh and Beautiful Icon Sets for Free」を紹介したいと思います。 (Dribbble – Outline Icons Part 3 by Adrian Goia) さまざまなデザインシーンで活用できる種類のアイコンが紹介されています。気になったものをピックアップしましたので下記よりご覧ください。 詳しくは以下 Tab Bar Icons iOS 7 Vol3 | Media Icons | Pix
ウェブサイトやアプリで使うさまざまなアイテムが揃った、ミニマルな美しいアウトラインで作成されたシンプルなアイコン素材を紹介します。 ベクターなのも嬉しいポイントです。 150+ Outline Vector Icons Pack ダウンロードできるアイコンのフォーマットは.epsで、ベクターなのでサイズ変更やカラー変更しても利用できます。 アイテムは全部で168種類! ウェブサイトやアプリでよく利用するアイテムが揃っています。
デザインとの相性や使いたいものが同セットになっているかなど少しでも選択肢は多い方が良いので、ダウンロードできるサイトを見つけてはメモしていたのですが、結構な数になってきたのでそれらの整理も兼ねたアイコンフォントについての備忘録です。 有償だけど高品質で種類も豊富みたいなセットもあったりするんですが、今回は基本的にフリーで使用できるもので、国内外合わせると全部で34サイトまとめています。 また、アイコンフォントの使用方法についても簡単にですが紹介するので、まだ使ったことがないけど実装したいという場合はそちらを参考にしてみてください。 アイコンフォントについて レスポンシブwebデザインが広まったなどをきっかけに、多くのサイトやブログでも取り入れられているのを見かけるようになったアイコンフォント。 実際に使用したことがある人ならわかると思いますが、本当に手軽に実装できて且つメリットもいろいろと
ウェブページのメニュー、ボタンなどをはじめ、ボックス、スライダー、アイコン、背景パターン、リボン、バッジ、エフェクト、テンプレートなど、トータル2,000くらい?のPSD素材がダウンロードできるByPeopleを紹介します。 そんなに数多くダウンロードできないよ、って人も大丈夫! 全素材まとめてダウンロードできます。 ByPeople ダウンロードできる素材はほとんどがPSDで、モノによってはAIだったりします。 ダウンロードはページ下のメール欄にメールアドレスを入力して、ダウンロードボタンをクリックします。しばらくすると、ダウンロードのURLがメールに送られてきます。 素材の利用にあたっては個人でも商用でも無料、とのことです。 詳しくは、Use Licenseをご覧ください。 数多くありすぎる素材から、いくつか紹介します。 本当に、ごく一部です。
わかりやすく、統一感のあるウェブサイトをデザインする時にあると便利なのがUIキットですが、ウェブ開発・デザインに関する情報やコンテンツを扱うブログBest Open Source Resourcesがそんな美しいデザインのUIキットをリスト化しています。明るいグレーやダークなカラー・木目調など、さまざまなパターンのPSDファイルが無料でダウンロードできるため、頭の中のイメージに合わせてコンテンツを選ぶことが可能です。 A Comprehensive Collection of Free UI Kits & Templates | Web Resources | WebAppers http://www.webappers.com/2012/11/12/a-comprehensive-collection-of-free-ui-kits-templates/ ◆01:"Pizza" UI K
アイコンやシンボルなどの形をしたフリーフォント のまとめ。なかなか使い勝手が良いものがいつ のまにか増えていたので色々とまとめてダウン ロードしましたのでその過程で良さそうに感じた ものをシェアしてみます。まだお盆明けだったり お休み中な感じなので軽めの話題で・・ というわけでシンボルタイプのフリーフォントのまとめ。サクッとアクセント加えたい時にアイコン作ったり、というのも面倒なのでフォントで済むならそのほうが早いですし、いくつか覚えておくと便利なんじゃないかなと。 順不同です。ライセンスは各々でご確認ください。 SYMBOL SIGNS ピクトグラムとか標識でよく見かけるシンボルのフォント SYMBOL SIGNS NOTICE こちらも標識で見かけるタイプの角丸フォント NOTICE DINGBESTS 鉛筆や消しゴム、電話機など使い勝手の良いデザインフォント DINGBESTS GL
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
イーコマース用のアイコン「Kaching」、子ども向けウェブサイト用のアイコン「Childish」、各種ソーシャルメディアのアイコンをベクター形式で揃えた「Buddycons」、モノクロベースで208種類もある実用アイコン「Reflection」、ベクター形式のソースファイルを同梱したRSS用のアイコン「Supra」、ブルーとブラックを基調にしたベクター形式も収録済みのアイコン「Primo」、ベクター形式とPNG形式の両方を揃えたTwitter用各種アイコンセットなどなど、とにかく山ほど無料で商用利用も可能なオリジナルデザインのアイコンを配布しているのがウェブデザインを扱うブログ「Webdesigner Depot」です。 というわけで、各種アイコンのダウンロードは以下から。 Kaching - Exclusive Free eCommerce Icons | Webdesigner De
商用でも使っていいよと言ってくれて いるアイコンセットのまとめです。商用 でもOKだけど、要リンクタイプのクリエ イティブコモンズライセンスや、リンク シェア等の「リンク必須」な商用可アイ コンと、あまり使う機会の無い、ソーシ ャルメディアのアイコンセット、RSSア イコンのみのセットなどは割愛しています。 個人的に実用できる、リンク不要のアイコンに絞っています。一応商用OKを確認してはいますが、さらっとしか見ていないので間違ってたら教えていただければ幸いです。また、ご利用の際はご自身でライセンスを確認してからご利用下さい。 200+ Exclusive Free Icons: “Reflection” リフレクションを与えたモノクロアイコンのセット。 ※リンクウェアでした・・・大変失礼致しました 200+ Exclusive Free Icons: “Reflection” Simpli
ブログ用からEコマース用まで、極小サイズ、手書き風、折り紙風などシンプルでかわいいフリーのアイコンをIconDockから紹介します。 IconDock キャプチャのアイコンは「20 Free Marker-Style Icons」 IconDockで配布されているアイコンから、フリーのものだけを下記にピックアップしました。 有償のアイコンでは更に素敵なアイコンセットが用意されています。 Stock Icon(有償のアイコンページ)
Brushes get a lot of attention for Photoshop users. There are large amount of high quality resources that are freely available but for the appropriate situations Custom Shapes are also extremely useful. Custom Shapes can save your time in your design. There are lots of varieties of Custom Shapes available. In the post I highlighted 60+ Attractive Photoshop Custom Shapes in several different catego
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く