イラストレーション・アイコン素材｜デジタル庁
素材集の活用で、行政手続きをもっとわかりやすく専門的でわかりにくい行政手続きの改善へマイナンバーに関連するデジタル手続は専門用語が多く、イラストレーションやアイコンなどを活用して、ひと目でわかりやすく伝える必要があります。しかし、これまでは政府として公式に配布する専用の素材がありませんでした。 そのため、地方自治体や民間サービスの方々が独自に作成する必要があり、表現が伝え手によってバラバラになる課題を抱えていました。 コストを抑えて、わかりやすい表現が可能にイラストレーションやアイコン素材の作成には、専門的な知識と多くの時間が必要です。視認性が高く保たれているか？ 日本に暮らす人、訪れる人が理解しやすい表現になっているか？ など、さまざまな検討事項があります。どなたでもご利用できる素材を配布することで、別々の機関が同じものを制作したり、検討する時間を省くことができます。 また同時に、素材制
現役デザイナーが教える、アイコンデザインがより良くなる８個のヒント
この記事では現役デザイナーDmitriy Buninが、より良いアイコンをデザインするときに心がけている8個のポイントをまとめてご紹介します。 WebサイトのUIインターフェースにおいてアイコンは重要なデザイン要素のひとつです。 アイコンは、コマンドやコンテンツを視覚的にあらわし、背後にある意味合いを伝える言語と言えます。ユーザーがすぐに理解、認識できるようにシンプルで効果的なビジュアル、メタファーを表現する必要があります。 現役デザイナー直伝、アイコンデザインがもっと良くなる８個のヒント ヒント１ – グリッドを設定しよう アイコンはひとつだけ作るのではなく、ほとんどの場合はセットでデザインすることになります。アイコンセットの統一感を持たせるにはグリッドが必要となります。 以下サンプル例のようにセーフゾーンを決め、キーラインを設定しましょう。アイコンのまわりには、少しの余白スペース（Bo
公益財団法人交通エコロジー・モビリティ財団 | バリアフリー推進事業 > 標準案内用図記号 > 標準案内用図記号（公共・一般施設）
案内 Information 案内所 Question & answer 病院 Hospital 救護所 First aid 警察 Police お手洗 Toilets 男女共用お手洗（備考） All gender toilet 男性 Men 女性 Women 飲料水 Drinking water 喫煙所 Smoking area 喫煙所（※1） Smoking area ※1火災予防条例（例）で使用が規定されている場所には、こちらの図記号を使用する必要があります 備考文字に補助表示を付ける場合は、「男女共用 All gender」またはそのどちらかとする。 色彩はモノトーンとすることが望ましい。 チエックイン／受付 Check-in／Reception 忘れ物取扱所 Lost and found ホテル／宿泊施設 Hotel／Accommodation きっぷうりば／精算所 Ticket
商用利用無料！オープンソースで利用できる、SVGアイコンのライブラリのまとめ
無料のアイコンはたくさんありますが、中でもオープンソースで利用できるアイコンは非常に使い勝手がよく、重宝します。商用のプロジェクトでも無料で利用できる、オープンソースのSVGアイコンのライブラリを紹介します。 10 open source SVG icon libraries that you can use for your next project by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私は先日、reddit上でお気に入りのアイコンライブラリはどれですか？というスレッドを立ち上げました。このスレはすぐに人気がでて、私が知らないオープンソースの素晴らしいアイコンライブラリがたくさんあることを知りました。スレに基づいて、オープンソースのアイコンライブラリのベスト10をリストしたいと思い
SVG, Favicons, and All the Fun Things We Can Do With Them | CSS-Tricks
SVG, Favicons, and All the Fun Things We Can Do With Them Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks. One very new trick is the ability to use SVG as a favicon. It’s something that m
Are you using SVG favicons yet? A guide for modern browsers.
You should be using SVG favicons. They’re supported in all modern browsers right now. Also, you probably don’t need all these icon links and sizes you’re copying from projects to projects. Let’s find out what’s the absolute minimum required, word by word. IconThe main favicon can be an SVG of any size. The type type=”image/svg+xml” is unnecessary. <link rel="icon" href="favicon.svg">Mask iconFor S
Bootstrap 5の新しいアイコンとFont Awesomeアイコンのそれぞれの使い方と使いやすさを比較
WebサイトやスマホアプリのUIでアイコンを使用する際に候補になるのが、アイコンのライブラリです。中でも無料で利用できるFont Awesome（有料版もあり）の人気が高いです。 Bootstrap 5用に最近リリースされたSVGアイコンとFont Awesomeアイコンの使い方と使いやすさを比較した記事を紹介します。 Bootstrap 5 icons vs Font Awesome: comparison based on design, variety and usability by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Font Awesomeのアイコン Font Awesomeアイコンの使用方法 Bootstrapのアイコン Bootstrapアイコンの使用方法 結論 はじめに
ソリッドとアウトライン、認識しやすいアイコンはどちら？
UX Movementの創立者、ライターです。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始めました。 モバイルアプリをデザインするとき、ソリッド（塗りつぶし）かアウトライン、どちらのアイコンを使用するか決めなければいけないときがあります。ユーザー体験にはどちらが最適なのでしょうか。 単なる好みの問題だと考える人もいますが、研究によると、認識の速さに違いがあることがわかっています。 ソリッドアイコンとアウトラインアイコンのどちらを使うべきかがわかれば、モバイルアプリの操作がしやすくなります。ユーザーはアイコンをより早く認識し、正しい選択をすることができるのです。 「Filled-in vs. Outline Icons: The Impact of Icon Style on Usability」という調査で、アイコンのスタイルは作業効率
Before Gutenberg – ブロックのアイコンをカスタムSVGにする – Capital P – WordPressメディア
今年もアドベントカレンダーの季節がやってきた。12/24まで毎日ブログを更新する予定である。もちろん、筆者一人ではかなり辛いものがあるので、Capitalistの皆さんにもご助力をお願いしたい。 さて一発目の内容だが、例によってGutenbergネタである。前回があまりに複雑な内容だったためか、ほとんど反応がなかった。よって、今回はシンプルな内容にとどめたい。今回は、ブロックのアイコンをカスタムSVGにする方法である。 この真ん中の「アフィリエイト」みたいなやつ。 カスタムブロックのアイコンプロパティ これまでの連載を読んできた方ならご存知の通り、カスタムブロックを作成する場合、アイコンを指定することができる。 registerBlockType( 'capitalp/block', { title: 'Capital Pのブロック', icon: '', // ←これ category:
Favicon & App Icon Generator
Generate icons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps Generate only 16x16 favicon.ico What are Favicons? Favicons are small 16x16 icon files that are displayed next to the URL of your site in a browser's address bar. Additionally they're often displayed next to the name of your site in a user's list of open tabs and bookmark listings making it easier for the user to quickly id
美しいアイコンを簡単に作れる！SVG形式のアイコンフォントシステムを作成する方法
ホームページを作成するときに、最もやっかいなパーツの一つが*「アイコン」*です。 昔はアイコンをとても小さな画像スライスにして、imgタグを使って貼り付けていました。 若干のマージンのズレでレイアウトが崩れたりして、数多くのWebデザイナーたちを困らせたものです。 そこで救世主のように現れたのが、Font AwesomeなどのWebフォントを利用したWebサイト用のアイコンシステムでした。 Webフォントは多くのブラウザでサポートされており、アイコンを、色をつけたり大きさを変えたり影をつけたりと、フォントと同じように扱うことができたので、非常に役立っていました。 そして、近年改めて注目されているのが、SVGを使ったアイコンシステムです。 ブラウザのサポートが改善されているおかげで、SVGもほとんどのブラウザで表示することができるので、インラインSVGは世界中のWebデザイナーの中でも非常に
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のページに一覧が示されています。 しかも、この仕組みはアクセシビリティにも優れていて、文字読み上げソフトを使うと、アイコンの部分は上記例のかっこで囲ん
脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips
このブログでも何度か細々登場してきたアイコンWebフォントの Font Awesome。使い方の基本を知っていることで、利用できる幅がかなり広がるので、今日はその使い方のと活用のための Tips を幾つか書いておきます。 Font Awesome, the iconic font designed for Bootstrap ※ なお、本エントリーはバージョン4.0.3をもとに書いているため、バージョンアップによって、掲載しているコードも変わっている可能性があります。利用前に、使うバージョンとそのスタイルを確認してから使うことをオススメします。 Font Awesome とは？Font Awesome は サイト上で使われるようなさまざまなアイコンを Webフォント として利用できるようにしたものです。フォントとして利用できるため、サイズや色などすべて CSS で調整して利用することができ
良くあるメニュー・アイキャッチのアイコンに使えそうなFontAwesomeのまとめ
たくさんのWEBアイコンフォントが使えるFontAwesomeですが、種類が豊富故に『あのアイコン使いたいけど名前なんだっけ・・・』ということも増えてきました。 htmlコードと、擬似要素で使いたい場面もあると思うのでcontentで指定する文字コードもまとめていきます！ 5.0とは合わないようですが、検索のコツは同様に学ぶことができます。 FontAwesomeの使い方まとめようかと思いましたが、こちらのサイト様より丁寧にできる自信がありません！ 使い方については↓を！ http://h2ham.net/font-awasome おんなじWEBアイコンフォントはGenericonsを使っていたのですが、いまいち文字とのベースラインが合わないのが気になって、最近はAwesomeをよく使っています。 Genericonsについての記事はこちらをどうぞ！ Twenty Fourteenに標準装
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Health icons
Icons - Material Design
Google Design
Icons | Font Awesome
Sketchでアイコンフォントを手軽に使えるようにするプラグイン・「sketch-iconfont」
