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

Browse By

Tag Archives: Icon

[CSS] CSS ICON – CSSだけで描画できるアイコン

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

画像を使わずに、CSSだけで描画できるアイコンセット。アイコンをクリックすると、HTMLとCSSコードが表示されるので、あとはそれをコピペして使うだけ。HTMLタグはdivが使われているようです。またCSSコードにマウスオーバーすると、そのコードでアイコンのどの部分が描画されているのかも分かるようになってて、なかなか興味深いです。使い勝手の良さ以外に、サイトの軽量化という目的でも使えそうです。

[Freebie] App Icon Template for Sketch – iOS, Android用のアイコンテンプレート

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

Sketch用の、iOS / Andoroidアイコンテンプレート。編集から各サイズへの書き出しまで行う事ができます。またアイコンのコアな部分はシンボル化されているので(Photoshopで言うスマートオブジェクトみたいなもの)、1つ変更すれば全部変わります(iOSとAndroidでは共有化されていないようです)。それぞれデバイスのホーム画面やAppStoreではどのように見えるかのプレビューもできるようになっているので、確認しながら作りこむ事ができます。アイコン制作する時に使えそうです。

[Generator] The App Icon – iOSとAndroid用のアイコンファイルを一括で書きだしてくれるサイト

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

1枚の画像からiOSとAndroid用のアイコンファイルを一括で書き出す事のできるサイト。1024 x 1024の画像ファイルを放り込むだけで、各プラットフォームの開発や申請に必要なアイコンファイルをまとめて生成する事ができます。またiOS用のフォルダ内にはwatchOS用の画像ファイルも自動で作られるため、Apple Watch App制作の際にも使えます。PhotoshopではPSDとアクションの組み合わせでできたりするけど、自動処理系がそれほど充実していないデザインツール使っている人にとっては、この手の一括書き出しツールは便利ですな。

[Freebie] Bjango App Icon Templates – 各種モバイルAppのアイコンテンプレート

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

モバイルAppとか作ってるBjangoが、各種モバイルデバイス向けAppアイコンのテンプレートファイルを配布しています。iPhoneやiPadなどのiOSに加え、AppleTVのtvOS、Apple WatchのwatchOS用テンプレートも入ってます。あとAndroid用のものも。ダウンロードするとフォルダごとに各種フォーマットが整理されており、PhotoshopやIllustrator以外にSketchやAffinity Designer用のものまで入ってます。最近じゃSketchやAffinityでデザインする人も多いですからね。対応デバイスの数やフォーマットの多さを考えると、コレ系のアプリアイコンテンプレートとしては最強なんじゃないでしょうか。ホーム画面に置いた時のシミュレートとかを考えるとPixelresortのテンプレートとかもイイんですけどね。

[Icon] Iconsfeed – iOS Appアイコンのデザインギャラリー

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

iOSアプリのアイコンデザインをまとめたサイト。こうしてズラっと並んでいるを見ると、iOS 7以前のスキューモーフィックデザインの頃に比べてデザインの流行も様変わりしたなー、なんて風に思います。このサイト便利なのが、アプリのカテゴリ分け以外にも色ごとに抽出して閲覧できる点。ズラっと並んでるカラーパレットをクリックすると、例えば赤系のアイコンだけを抽出する事ができます。カラーテーマ優先でデザイン作例を探したい時なんかに便利です。

[Icon] Simple Icons – メジャーなWebブランドのSVGロゴデータ

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

メジャーなWebブランドのSVGロゴデータをまとめたサイト。各企業やサービスごとのイメージカラーも併せて紹介されていて、色順でソートされているようです。個別にダウンロードするのが面倒な時はGitHubからまとめてダウンロードできます。こうして見ると青系多いっすね。SVGフォーマットなので汎用的に使える点が便利です。

[UI Design] ICNS – iOS Appのアイコンデザインに役立つアプリ

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

アプリのデザインに役立つアプリって、なんだかややこしいですね。まぁ早い話が、アイコンデザインする時にiPhone使って簡単にプレビューができるから便利だYO!というアプリです。デザインツールは好きなものを使えば良くて、Dropboxに保存するだけでiPhone側がシンクロして保存した画像をアプリアイコンとして表示してくれるものだそうです。Dropboxに保存するだけでプレビューできるというのはスゴい便利。最近やってないけど今度アプリアイコン作る時に早速使ってみようと思いました。

[Icon] Public Icons – パブリックドメインのアイコン検索サイト

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

パブリックドメインのアイコン素材検索サイト。パブリックドメインなので使用に際して著作権等の表記もいらず、またシンプルなシルエットデザインのものばかりなので使い勝手が良さそうです。素材はSVGとPNGが用意されています。SVGコードも掲載されているのがナイスです。