Font Awesome アイコンの基本的な使い方をはじめ、Webサイトやスマホアプリでアイコンを使う時の便利な機能をまとめて紹介します。 Font Awesome guide and useful tricks you might not know about. by Kiss Patrik 下記は各ポイントを意訳・加筆したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 更新: 2021/2/1現在の最新情報にアップデートしました。 Font Awesomeとは Font Awesomeへの登録方法・アイコンの基本的な使い方 Font Awesome アイコンのサイズの指定方法 Font Awesome リスト用のアイコン Font Awesome アイコンの回転 Font Awesome アイコンのアニメーション Font Awesome アイコンを
A curated list of websites with beautiful free icon design sets that can be used for personal and commercial projects. Icon design can be hard to get right. Creating a set of unified icons that compliment each other can be very challenging. The best designers are able to even add personality to an icon set to match the tone of the project. In this post, we wanted to share some of the best sites to
<svg version="1.1" id="icon-hearbeat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="510px" height="510px" viewBox="0 0 510 510" style="enable-background:new 0 0 510 510;" xml:space="preserve"> <path d="M369.75,21.675c-43.35,0-86.7,20.4-114.75,53.55c-28.05-33.15-71.4-53.55-114.75-53.55C61.2,21.675,0,82.875,0,161.925 c0,96.9,86.7,175.95,219.3,29
ヒューマンピクトグラム2.0は、非常口のあの人のピクトグラムをTopeconHeroesダーヤマの好みで拡張、ストックしていくページです。 このサイトにストックしたピクトグラムは、WEB制作や会議の資料、企画書などのデザイン素材として無料で利用可能です。 ただし素材そのものの再配布、販売はNGっす。なお2.0だからって拡張元のピクトグラムに比べ優れている訳ではありません。 犬の散歩のピクトグラムその３ 飛び膝蹴り 社長、部長 ショートカット 手荷物検査 略奪婚 結婚式のピクトグラム 神父、牧師 ちゃぶ台返し 2 水球 ピクトグラム シンデレラ サムライ 3 サンタクロース 2 サンタクロース バーテンダーのピクトグラム2 バーテンダー 銅鑼 銅鑼をドーン 虫取り少年 少年時代 やり投げ 食事をするピクトさん 演説するピクトさん エスカレーター 下校する子供
「さくらのアイコンセット」とは？ 「さくらのアイコンセット」は、サーバやストレージなどインフラに関連したアイコンをセットにしたものです。当社サービスをご利用をされている方はもちろん、当社サービスをご利用でない方でも、ホワイトペーパー、システム構成図、プレゼンテーション資料など様々な用途にご利用いただけます。 >>こちらからダウンロードできます。 《ライセンス》 SAKURA internet Inc. クリエイティブ・コモンズの 表示 4.0 国際 ライセンスで提供されています。 《アイコンの紹介》 「さくらのアイコンセット」を含まれるアイコンについては、下記のアイコンとなります。 1 ： general 様々な用途でご利用できる汎用的なアイコン集です。 2 ： programming PHPやPythonなどのプログラミング言語のアイコン集です。 3 ： server-parts CPU
「try! Swift」2日目のセッション "Live Design:🎙🎨" （日本語タイトル：ライブデザイニング）で、Sketchを使ってサクサクとアイコンをつくっていく過程を見て、 Sketch使いやすそう。買おう。 #tryswiftconf— Tsutsumi Shuichi (@shu223) 2016年3月3日 と思い *1、さっそくダウンロードして同じ手順をなぞってみることにしました。 Sketch - Professional Digital Design for Mac ちなみに購入する気満々だったのでこういうタイトルにしたものの、Free Trialで30日間は無料で使えるようです。 @niwatako さんの聞き起こし記事を参考に手順をなぞっていきます。 try! Swift ライブデザイニング:🎙🎨 #tryswiftconf Day2-10 - niwat
私がIconfinderに投稿されたアイコンを検討する時には、デザイナーと顧客に対して、サイトで提供する全てのプレミアムアイコンが最高の品質であるようにする責任を負っています。ですが、「あまり良くない出来」と「プレミアムの出来」の違いはわずかである場合も多く、大体は最小限の変更で済むような差です。この記事では、私のデザインガイドラインを「 アイコンデザインを改善するための6つの簡単なステップ 」としてまとめてみました。これらのステップは適切なアイコンデザインの基礎を示していますが、独断的なルール集ではなくガイドとお考えください。聡明なデザイナーは、どんな状況であれば最大の効果を得るためにこのルールを破ってもよいか、判断できるのです。 以下でご紹介する見本の画像では、Kem BardlyというIconfinderユーザが最近投稿した犬（正確にはコーギー）のアイコンを改訂していきます。このアイ
「Nova」はマテリアルデザインに合ったアイコンが4000個手に入るサイトです。基本的には有料になりますが、350個のアイコンが無料でダウンロードできます。マテリアルデザインのウェブサイトを制作する際に使えますね。 以下に使ってみた様子を載せておきます。まずNovaへアクセスしましょう。 アイコンはすべてSketch、Illustrator、SVG、PDFに対応しています。これだけ対応されていると助かりますね。 このようなアイコンがダウンロードできますよ。マテリアルデザインに合ったアイコンだらけです。無料で350個手に入るので試しに使ってみてはいかがでしょうか。ぜひご活用ください。 Nova （カメきち）
この記事は2015年11月09日時点の情報に基づいて書かれています。情報が一部古くなっている場合があるためご注意ください。 プレゼン資料の表現の幅を広げるうえで、あると便利なのがアイコンです。しかし、資料作成の途中でアイコンを探すのに手間どったり、必要な種類がそろわず色や形がちぐはぐになってしまった経験はありませんか？今回紹介するアイコンは数が豊富（331個）なうえ、大きさや色も自由に変更可能。幅広い用途をカバーできること間違いありません！ 実力派アイコンの「iconSweets2」を パワーポイント向けにコンバートしました さて、今回ご紹介するアイコンですが、ウェブデザインに関わる方ならどこかで見覚えがあるかもしれません。ソースは、”Yummygum（http://yummygum.com）”という海外のデザインスタジオがリリースした「iconSweets2」というアイコン集で、これをパ
TOP > Tool > アプリアイコンを手軽かつハイクオリティに仕上げることができるジェネレーター「App Icon Generator」 スマートフォンアプリなどのアイコンは、UIの中で目に留まる・またデザイン的に魅力的で分かりやすくすることがとても重要。いつもデザインに苦戦されているというデザイナーの方は少なくないのではないでしょうか？そんな中今回紹介するのは、アプリアイコンを手軽かつハイクオリティに仕上げることができるジェネレーター「App Icon Generator」です。 用意されたベースを組み合わせていくことで、簡単にデザイン性のあるアプリアイコンを作り上げることができます。 詳しくは以下 ベースとなるフレームワークは、立体タイプとフラットタイプが用意されており、さらにデザインの背景テクスチャ16種ラインナップ。組み合わせの仕方によっていろいろなイメージを作り上げる
アプリの設計・イメージデザインに使用したい フリーベクター素材まとめ「30 Free App Vectors You Should Use In Your Designs」 スマートフォンアプリのデザイン設計シーンは非常に多く、デザインイメージを作り上げることが必要とされる場合もあるのではないでしょうか？今回はそんな時に便利に利用できる、フリーベクター素材まとめ「30 Free App Vectors You Should Use In Your Designs」を紹介したいと思います。 Touch screen technology vector 似たテイストでまとめた、アプリ設計・イメージデザインで活躍してくれるベクター素材が多数紹介されています。 詳しくは以下 Smartphone apps collection さまざまなページデザインがラインナップされており、アプリイメージの設計
Macだとツールバーから、Winだとタスクバーから、14,700個のアイコンがコピペやドラッグ&ドロップでPhotoshop, Illustrator, Sketch, Officeなどのさまざまなソフトウェアで簡単に利用できる無料アプリを紹介します。 14,700個はビジネスからホビーまで全39カテゴリ、すべてIcons8のアイコンなので、同じテイストのデザインで非常に高品質です。下部にはプレゼント企画もあるので、チェックをお忘れなく。 応募期間は、2015年7月30日で終了しました。 Icons8 App Icons8 Appのインストールは、下記ページから。 上部でMac用・Win用を選択すると、下部の「Donwload Icons8 App」がそのOS用に変わるのでダウンロードしてください。 ※ダウンロードにはメールアドレスが必要です。 Icons8 App どんなアイコンが利用で
TOP > Design > スマートフォンでの手の動きを表現したフリーアイコンセットまとめ「11 Free Mobile Gesture Icons Packs」 スマートフォンでの操作には、さまざまな手の動きが必要になってきます。そんなときに便利なのがアイコン。完結な表現で動きを伝えることができる重要なツールとして重宝します。今回はそんなスマートフォンでの手の動きを表現したフリーアイコンセットまとめ「11 Free Mobile Gesture Icons Packs」を紹介したいと思います。 Dribbble – Free Gesture Icons Vol 2 by Abdus いろいろなテイストのジェスチャーアイコンセットがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Dribbble – Gestures by Ju
TOP > Design > 定番としてストックしておきたい フリーアイコンコレクション「Top 50 Free Icon Fonts for Web Design」 さまざまな種類が展開されているアイコン。いろいろなタイプをストックされている方も多いのではないでしょうか？そんな中今回紹介するのは、定番としてストックしておきたいフリーアイコンコレクション「Top 50 Free Icon Fonts for Web Design」です。 Batch • 300+ Icons for Web & User Interface Design ベーシックなテーマのアイコンが多数揃っており、ワンパターンになってしまいがちなアイコン表現にバリエーションを持たせることができそうです。 詳しくは以下 150 outlined icons – PSD AI SVG Webfont – Freebi
Webページやプレゼンの資料やお店のフライヤーなど、法人でも個人でもWebサイト・ブログ・映像・アプリ・ゲーム・紙で無料利用できるフリーのアイコン素材を紹介します。 WebページにはアイコンフォントやSVGアイコン、紙にはPNGアイコン、デザインもベーシックなものからちょっと変わった面白いものまで、見ているだけで楽しめるアイコンばかりです。 Fontello Font Awesome, Entypo, Typicons, Iconicなど、メジャーサイトのアイコンを自由に組み合わせて、自分用のアイコンセットを作成してダウンロードできます。 Webサイトで使うベーシックでシンプルなものなら、ここだけで足りるでしょう。 ライセンスは各アイコンごとに異なりますが、SIL, BSD, MITのオープンソースのものが主です。
アイコンの中でも、可愛らしいテイストのアイコンは、制作しているデザインを明るく・楽しく演出してくれるツールとして活躍してくれます。今回はそんな時にぴったりなアイコンセット「Happycons」を紹介したいと思います。 カラフルな色使いが特徴の、個性的な描写のアイコンがセットでダウンロードできるようになっています。 詳しくは以下 種類としては定番というよりは、個性的なアイテムをアイコン化したものが多く、例えば空に浮かぶ虹や月、雨のしずくといった天体に関するアイコン、宇宙船や潜水艦などの乗り物アイコン、WifiやUSBなどのツールアイコン、ドリンクやアイスクリーム、水などのフード系アイコンなどが揃っています。塗りを線からずらしたデザインが特徴で、ポップさをデザインに加えながらも、デザインに個性やインパクトを与えてくれそうです。 他にはあまりないデザイン性のあるアイコンなので、この機会にダウンロ
「App Icon Resizer」はiOS／Androidアプリに必要なアイコンを一括生成できるサイトです。アプリの申請時には、様々なデバイスに対応したサイズのアイコンを提出する必要があります。それらのアイコンを一括で作成してくれるので便利。Apple Watchにも対応していますよ。 以下に使ってみた様子を載せておきます。まずApp Icon Resizerへアクセスしましょう。一括生成したいアイコンの画像をアップロードします。大きさは512pxまたは1024pxの正方形がベストです。 このように必要な分だけチェックをいれてダウンロードすることができますよ。すべてのサイズをまとめてダウンロードすることも可能。 このように様々なサイズのアイコンを一括生成することができました。元の大きな画像1枚を作っておけば自動でリサイズしてくれるので便利ですね。生成するサイズに漏れもないですし、アプリ開
遂にAppleからiPhone6とiPhone6 Plusが発売になりましたね。 画面が大きくなって、YouTubeやゲームをするときは捗りそうで有り難いことです！ しかし、手放しで喜んでいられない人もいのが、WEb開発やアプリ開発の業界で生きている我々。 新機種が出る度に高解像度化されいく端末に合わせ、仕様を作りなおしていくのも大変な作業です。 そして、この度iPhone6 Plusのデビューに合わせて現れたのが「@3x」！ iPhoneアプリを申請する際は、今までのサイズに加えて「@3x」へも対応した画像を用意しなくてはいけなくなったし、スマフォのサイトを用意する時は、「@3x」サイズも想定して作成する必要がでました。。 筆者も先日、iPhone6 Plus対応のアプリを作っていた際に「@3x」でバタバタしましたので、備忘録を兼ねて画像サイズ一覧を作成しようと思います。 そもそも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
