商用利用無料、UIデザイン用のSVGアイコンが220種類！改変・再配布も可の太っ腹ライセンス -System UIcons
システムとプロダクトのUI用にデザインされた、オープンソースのSVGアイコンを紹介します。Webサイトやスマホアプリに最適です！ アウトラインのシンプルなデザインで、220種類のアイコンが揃っています。SVGなので、サイズやカラーなども簡単に変更して利用できます。 System UIcons System UIcons -GitHub System UIconsの特徴 System UIconsのダウンロード System UIconsの使い方 System UIconsの特徴 System UIconsは、システムとプロダクトのUIによく使用されるアウトラインのアイコンです。フォーマットはSVGなので、使いやすいと思います。 ライセンスはThe Unlicenseで、商用プロジェクトでも無料で利用できます。改変・再配布もOKです。
種類豊富でカラーバリエーションも豊かなアイコンセット「Freebie: Funkies Icon Set (100 Icons, SVG & PNG)」
種類豊富でカラーバリエーションも豊かなアイコンセット「Freebie: Funkies Icon Set (100 Icons, SVG & PNG)」 ユーザーを視覚的に誘導してくれるアイコン。1つの種類でカラーバリエーション豊かなものがあると、アイコンのばらつきで雰囲気を損ねることなくデザインに統一性を持たせることができます。今回ご紹介する「Freebie: Funkies Icon Set (100 Icons, SVG & PNG)」は、5つのバリエーションでデザイナーの役に立ってくれるアイコンセットです。 シンプルでミニマルなテイストのアイコンが100種、セットでダウンロードできるようになっています。 詳しくは以下 フルカラーのもの、枠線にグラデーションがかかったもの、くすんだ色味など、さまざまなバリエーションが収録されており、表現したいテイストによって使い分けることができそう。
シンプルでハイクオリティなミニマルデザインのフリーアイコンまとめ「11 Free High-Quality Line Icon Sets」
TOP > Design , vector , WebDesign > シンプルでハイクオリティなミニマルデザインのフリーアイコンまとめ「11 Free High-Quality Line Icon Sets」 最低限の情報を、シンプルなまとめた構成が魅力的なミニマルデザインに欠かせない素材として、情報要素をすっきりとまとめてくれるアイコンは非常に役立つ存在。そんな中今回ご紹介するのは、ミニマルデザインに合わせて使いたい、シンプルでハイクオリティなアイコンまとめ「11 Free High-Quality Line Icon Sets」です。 Goodies Icon Set | Best PSD Freebies 細ラインで描かれたシンプルなフリーアイコンが11種類紹介されています。その中からおすすめのアイコンを幾つかピックアップしてご紹介していきます。 詳しくは以下 54 Fre
PDFなど、CSSのみで拡張子によって自動でアイコンを表示する
WordやExcelなどをサイトにアップして、アイコンをつけることは多いと思います。 <a href="word.pdf" class="iconWord">PDFファイル</a>など、いちいちクラスをつけるのは面倒です。 そんな時は、属性セレクタで指定して自動でアイコンを表示させると便利です。 拡張子によって、アイコンを変更したい場合 拡張子がPDFの場合です。 属性セレクタで、拡張子.pdfを指定します。 a[href$=".pdf"]::before { padding-right: 10px; display: inline-block; content: url("icon_pdf.png"); vertical-align: middle; } PDFファイル（PDF:20KB） 実行結果 下記のようにPDFアイコンがつきます。 PDFファイル（PDF:20KB） 拡張子によっ
これぞプロのデザインテクニック！簡単なのにすごい、アイコンを作るテクニックのまとめ
オリジナルのアイコンを作るシンプルで簡単なデザインテクニックを紹介します。 円や矩形などの基本的な形を組み合わせたり、変形させたりして、さまざまなアイコンを作成します。 作業に慣れてしまえば、どれも1分もかからずにアイコンを作成できます。 The Super Simple Guide to Iconography 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 目のアイコンの作り方 矢印のアイコンの作り方 バッテリーのアイコンの作り方 箇条書きリストのアイコンの作り方 クラウドのアイコンの作り方 次に進むのアイコンの作り方 ファンネルのアイコンの作り方 プレイ・ポーズのアイコンの作り方 位置矢印のアイコンの作り方 位置ピンのアイコンの作り方 サウンドのアイコンの作り方 ウェーブのアイコンの作り方 Toptalのアイコンの作り方
9,900個ものアイコンをダウンロードできる「IconPharm」
デザイン業務で欠かせないアイコン。いろいろなサイトで配布されており、多種多様に星の数ほどありますが、今回は9,900個ものアイコンをダウンロードできる「IconPharm」を紹介したいと思います。 オープンソースのシンプルで使いやすいテイストのアイコンが揃っており、とにかく収録数が多いのが嬉しいところ。 詳しくは以下 アイコンサイトで多いのが、アイコンビジュアルがずらっと並んでいるもの。「IconPharm」ではアイコン一つ一つに名前が付けられており、検索時にアイコンと一緒に表示されるため、ひと目でどんなアイコンかが判別できるのも、さりげない機能ではありますが、検索する側にとっては嬉しい機能。検索はフリーワード検索の他、ジャンル別に探したい人のために、サイドナビでカテゴライズもされています。モノクロベースでミニマルなデザインなので、さまざまなデザインに合わせやすいのも特徴です。 アイコンは
Googleのマテリアルアイコンは軽量・デザイン・アクセシビリティOKの優れモノ | 初代編集長ブログ―安田英久
このマテリアル・アイコンを使えば、画像ファイルを自分で用意しなくても、accessibility（accessibility）やassignment（assignment）、face（face）、directions_run（directions_run）、smoking_rooms（smoking_rooms）、search（search）なんてアイコンを、カンタンにWebページに設置できます。 アイコンはWebフォントファイルで実現されていて、フォントファイルのサイズは最小42KB。サイズを変えたりdirections_run、色を付けたりdirections_runも自由です。 使えるアイコンは900個以上。Material iconsのページに一覧が示されています。 しかも、この仕組みはアクセシビリティにも優れていて、文字読み上げソフトを使うと、アイコンの部分は上記例のかっこで囲ん
フラットデザインのアイコンを無料でDLできるWebサービス4選
iOS7やアプリではすでにお馴染みの「フラットデザイン」。 平面的なレイアウトや、均整が取れた配色にシンプルなデザインはウェブやアプリ開発では主流になりつつあります。 ただ、いくらシンプルとはいえ、Webデザイナーでない限りアイコン1つ作成するにしても難しいと感じる方は多いのではないでしょうか。 今回は、ノンデザイナーの方でも気軽にフラットデザインを取り入れられるよう、無料でダウンロードできるフラットデザインのアイコンをご紹介します。 フラットデザインアイコンの特徴 フラットデザインのアイコンはシンプルの中にしっかりとした象徴的モチーフや、ユーザーが見て一目で意味が理解できるものなのでとても質の高いアイコンです。それを自分で考えて制作するのはとても大変ですよね。 フラットデザインはレイアウトにしてもフォントや色の均整が取れていて、平面的なデザインが特徴です。 そのため、アイコンもすっきりと
ミニマルテイストなアイコンセット10選「10 Free Minimalist Icon Design Sets」
TOP > Design > ミニマルテイストなアイコンセット10選「10 Free Minimalist Icon Design Sets」 いろいろな種類のアイコンがフリーで配布されていますが、重宝するのはやはりシンプルなもの。そんな中今回は、ミニマルテイストなアイコンセット10選「10 Free Minimalist Icon Design Sets」を紹介したいと思います。 Free Wilderness/Camping Icons by Anita Peeples – Dribbble さまざまなデザインに合わせることができるアイコンセットが10種という厳選された数ですが紹介されています。気になったものをピックアップしましたので下記よりご覧ください。 詳しくは以下 Open Iconic, a free and open icon set 223種のアイコンがダウンロード
IllustratorとIcoMoonでSVGスプライトのラクラク設定！
2016年2月9日 Illustrator, SVG, 便利ツール 繰り返し使うSVG形式のアイコン等を表示する際に便利なSVGスプライト。しかし、symbol タグで囲んで…一つ一つにIDを付けて… viewBox 属性をコピペして…と、本当にコーディングがめんどくさい！新規プロジェクトを始める度に設定するのが煩わしくなり、いろいろと楽する方法を試した結果、アイコンジェネレーターツールの「IcoMoon App」を使う方法に落ち着いたので、やり方を紹介したいと思います。 ↑私が10年以上利用している会計ソフト！ SVGスプライトとは？ SVGスプライトは、ロゴやアイコンなどの複数のSVG画像をひとつのファイルにまとめて保存し、使いたい時に呼び出す方法です。SVGなので、拡大縮小しても画質が劣化しません。詳細は過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」に目
画像なしで表現するリストマークのサンプルいろいろ ｜ Tips Note by TAM
行頭記号やリストマークなどの装飾を、画像なしで実現する方法で普段よく使うものをリストアップしてみました。 今回は、 先頭に何かしら装飾をつける 2行目以降の先頭を1行目と揃える 以上の2点をリストアップの条件にしました。 サンプルはこちらです。 sample1 装飾文字を直接記述（全角のみ対応） サンプルはこちら まずはシンプルに、直接HTML上で行頭に「※」を挿入する方法。 2行目以降の先頭が1行目と揃うように、text-indentで「※」の1字分下げてやります。 そのままだと行の先頭が1字分左に寄ってしまうので、その分左マージンを取って調整します。 p { text-indent: -1em; margin-left: 1em; } ※ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト sample2 装飾文字を直接記述（全角・半角どち
200種類の汎用性に優れたSVGアイコンとその使い方が勉強になる！新しいデザインに役立つUIコンポーネント素材 -WPF UI
今までとは一味違う新しいデザインを組み立てるのに役立つ、美しくデザインされたUIコンポーネント素材を紹介します。アイコンを得意としているクリエイターの制作なので、汎用性に優れたアイコンが素材に含まれているだけでなく、その使い方にも注目です。 素材は商用無料で、ライセンスは良い子だけが使える「Good Boy License」。 手を洗わない子は使っちゃダメ！ WPF UI Framework WPF UI Framework -GitHub ダウンロードできる素材のフォーマットは、2種類。 .psd (Photoshop用) .sketch (Sketch用) アイコンは、200個の.svgファイルで含まれています。 コンポーネントにはWindows 8をテーマにしたさまざまなものが揃っています。 200種類のSVGアイコン オフキャンバス メニュー ソート機能付きのグリッド ツールバー
画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 - NxWorld
いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。 最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。 はじめに 最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet,
可愛らしさとデザイン性を兼ね備えた フラットデザインのフリーアイコンセット「40 New Free Flat Icons」
今主流となっているフラットデザイン。対応する素材も多数配布されており、すでにいくつもストックされているという方も多いのではないでしょうか？そんな中今回紹介するのは、可愛らしさとデザイン性を兼ね備えたフラットデザインのフリーアイコンセット「40 New Free Flat Icons」です。 シンプルな中にかわいらしい質感も兼ね備えた、使いやすいテイストのアイコンセットとなっています。 詳しくは以下 ファイルやプリンタ、スマートフォンなどを始め、ギター、ロケット、サングラス、スニーカー、あひる、信号機、トロフィーといったような、基本的な種類のアイコンというよりはちょっと変わったタイプが多いのが特徴。形式としては、AI・EPS・SVG・PNG、サイズは32px・64pxが用意されています。 すでに定番タイプは持っていて、変化とデザイン性のあるものを求めている方には特におすすめだと思います。すべ
ポップなテイストのフリーアイコンが80種揃った「Medlee – 80 Fancy Icons」
比較的小さく使用することの多いアイコン。単体使いでも印象的に見せるためには、アイコン自体にも個性が必要です。そんな中今回紹介するのは、ポップなテイストのフリーアイコンが80種揃った「Medlee – 80 Fancy Icons」です。 スロバキアのデザイナー・Luke Mynus Kovac氏手がける、個性を感じさせるかわいらしいテイストが特徴のアイコンが80種セットでダウンロードできるようになっています。 詳しくは以下 ファイルやペンなどの文具類、天気といった定番として利用できそうなものから、バッグ、Tシャツ、リュックなどのファッション系、ドリンクや肉といったフード系、その他アイコンとしてあまり見かけないような個性的なものまで収録。aiとeps形式で収録されているので、いろいろな媒体で使用できます。データ上でグリッドで仕切りカテゴライズされているので、非常に分かりやすいというのも特徴で
さまざまな建物をアイコン化した「Building Icons Set」
世界にはいろいろな形の建物が存在しており、時にデザインシーンで建物を表現するためにイラストを使用することもあると思います。そんなときに便利に活躍してくれそうな、さまざまな建物をアイコン化した「Building Icons Set」を今回は紹介したいと思います。 40種の建物をモチーフとし展開。アイコンとしてセットでダウンロードできるようになっています。 詳しくは以下 定番として利用できそうな一般的なビル、学校、病院といった建物から、ガソリンスタンドや美容院といった商業性施設、工場や鉄塔などの工業系建築物、お城やお寺などの文化的建物といったように、ジャンルが多岐にわたっているのが特徴。アイコン自体はシンプルですが、細かなところまで表現されているので、比較的リアルなイメージでアイコンを使用したいときに活躍してくれそうです。もちろん、アイコンとしてなくイラスト的な扱いとしての使用もおすすめだと思
UI構築に使用するための必要最小限のアイコンがセットになった「Essential Icons」
デザイン構築に必要な素材として重宝されているアイコン。セットでいろいろな種類がまとまっているものが多数配布されており、さまざまなタイプをダウンロードしストックされている方は多いと思います。そんな中今回紹介するのは、UI構築に使用するための必要最小限のアイコンがセットになった「Essential Icons」です。 フランクフルトを拠点にアートディレクターとして活動するDaniel Swoboda氏によって提供、ベーシックに定番として頻繁に使用すると想定される種類のアイコンがまとめてダウンロードできるようになっています。 詳しくは以下 矢印や吹き出し、再生停止、ズームやダウンロード、ファイル、クリップといった、使用頻度の高いものがピックアップされラインアイコン化されており、非常にシンプルな作りなので、どんなデザインにも合わせることができます。レギュラーと細身のライトと、2つのウエイトがセット
iOS7用のアイコン製作テンプレート（ピクセル最適化済） | fladdict
WWDCの発表を受けて、Appleが発表したiOS7用アイコンのイラストレータ用テンプレートを作ってみた。 すでにいくつか先行作成されたものがあるものの、ストアサイズ1024pxを基準としたものが多い。 だけどこのサイズは実機表示には都合がわるい。 120pxにリサイズするとデータが滲んでしまう。 そこでこのテンプレートでは、実機サイズ120pxの10倍スケールの1200px基準にしてみた。 10px単位で要素を配置すれば、パッキリとピクセルパーフェクトなアイコンになるはず。 検証に写真アイコンのコピーを作ってみたが、問題なく表示されるはず。 あわせて黄金比分割ガイドも、実機表示でピクセルが滲まないように端数調整している。 外枠のコーナーに関しては、どうも手動の視覚補正つきコーナー為、もう少し使い込んでアップデートしてみたい。 （アップデートしました）。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP