Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: Icon

[Icon] 20 Gorgeous Free Icon Fonts to Use in Your Designs – フリーで配布されているアイコンフォントまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

フリーで配布されているアイコンフォントをまとめた記事。20セット紹介されてます。よくあるシンプルなピクトグラムっぽいのから、手書き風のもの、天気や家具など特定のジャンルに特化したものなど色々あります。Webフォントとしてサイトに組み込んでしまえば、サイト内の装飾にサクっと使えるようになるので、こういうの便利ですな。

[Icon] PaymentFont – 支払いに関するアイコンのWebフォント

  • Pocket
  • このエントリーをはてなブックマークに追加

支払いに関するアイコンをWebフォント化したもの。フリーで配布されており、SVGやTTF、CSSが一式入った形でダウンロードできます。空Spanタグ内にClass指定するだけで任意のアイコンを表示できるので、1度導入しさえすれば簡単に使えます。VisaやPaypal、Master Cardなどメジャーどこはひと通り揃ってるので、日本向けのサービス展開時にも使えそうです。Bitcoinなんかもあります。常用フレームワーク一式の中に加えておくと良さそうです。

[Freebie] Download 400+ Free Design Resources With Commercial Use Licence – デザイン素材の詰め合わせパック

  • Pocket
  • このエントリーをはてなブックマークに追加

テクスチャやアイコン、フォント、パターン、UI PSD、Photoshop用ブラシ、レイヤースタイル、印刷用のテンプレートなどのデザイン素材がパックになって無料で配布されています。試しにDLしてみたところ1.4GBオーバーでした。なかなかの量です。普段は99ドルで販売されているようですが、今日だけ無料みたいです。この手のデザイン素材が欲しい人はお早めに。

[Generator] Free Icon Maker – Appアイコンをデザインできるオンラインツール

  • Pocket
  • このエントリーをはてなブックマークに追加

アイコンをデザインできるオンラインツール。iOSやAndroidのアプリ、またホーム画面に置いた際に表示されるFaviconなどに向いてます。ツールとしては結構多機能で、まずはモチーフとなるアイコンを選び、併せて枠を選びます。iOSで一般的な角丸正方形以外にも色々なシェイプがあります。そしてアイコンや枠の色やシャドウなどを調整し、気に入ったものができた時点でダウンロードできます。試しにダウンロードまでやってみましたが、128 ✕ 128の透過PNGフォーマットでした。アプリのアイコンとしてはちょっとサイズが足らないけど、Faviconとしては使えそうです。自分で作った画像のアップロード機能などはないので、自分でデザインできる系の人にはツールとして物足らないかもしれません。

[Freebie] Web Design Freebies – Webデザインに使える素材をまとめたサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Webデザインに使える素材を集めたサイト。置いてある素材はアイコンやモックアップPSD、フォント、HTMLテンプレート、テクスチャ、インフォグラフィック素材など。アイコンがわりと多めな印象。まだ若いサイトらしく紹介されてる量はそれほど多くはないけど、今後増えて行くんでしょう。素材探しに使えそうです。

[Icon] SVG Icons – コードのコピペで使えるベクターアイコン

  • Pocket
  • このエントリーをはてなブックマークに追加

コードのコピペで使えるSVGアイコン。使いたいアイコンをクリックすると、アイコンを描画するためのHTMLコードが出てきますので、基本これをコピペするだけで使えます。pathという見慣れないタグで描画されてるんだけど、これはSVGでシェイプを描画する際に使われるタグだそうです。また導入に関してはベーシックCSSファイルの併記も必要です。用意されているアイコンはどれもモバイル環境などで一般的な、UIとしてよく使われる類のアイコンばかりです。コードのコピペだけでアイコンを導入できるので便利ですね。

[Icon Design] Realistic iOS App Icons – リアル志向なiOSアイコン

  • Pocket
  • このエントリーをはてなブックマークに追加

リアル志向なiOSアイコンの作例をまとめた記事。最近じゃフラットデザインの波にグっと押されて、すっかり影をひそめてしまったスキューモーフィックデザインの手法で作られたアイコン達です。こういうの最近じゃ見る機会減っちゃいましたが、ここで紹介されているものはどれもクオリティが高く、しみじみとスゲーなぁって思うものばかりです。ディテールの細かさ、情報量の多さ等、仕事の細かさがはんぱないです。プロトタイプも併せて掲載されているので、アイコンデザインの参考にもなりそうです。

[Mac] Inspecting Yosemite’s Icons – Yosemiteアイコンに関する考察

  • Pocket
  • このエントリーをはてなブックマークに追加

Yosemiteで大きく変わるインターフェースの内、Appアイコンに関する考察をした記事。奥行きのあるデザインからフラットなものに置き換わったDock、アイコンのシェイプとグリッドの変化について、シェイプによるアプリの位置付けの違い、ライティングについてなど、それぞれ論じられています。興味深かったのはシェイプの違いによるアプリの位置付けの違いという点。ヘビーなアプリは円形で、システムに関わるものはスクエア、ちょっとした小物アプリは斜めの長方形になってるんですね。アイコンデザインのプロセスにおいても、iOS 7のデザインに寄ってるんだなーと思いました。あー早くYosemite使ってみたいよYosemite。