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

Browse By

Category Archives: Icon

[UI Design] The Floppy Disk means Save, and 14 other old people Icons that don’t make sense anymore – 古いメタファーをいまだに引きずる14のアイコン

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

フロッピーのアイコンってよく「保存」ボタンに使われるけど、そもそもフロッピーなんてもう使わないし、若い世代にとってはフロッピーなんて知らないんじゃない?ってのはよく言われる事だけど、フロッピー以外にもそういうのって結構あるYO!という内容の記事。これオモしろいです。例えばブックマーク、カレンダー、ボイスメモ、フォルダー、電話、サーチする際の虫眼鏡、メール、設定によく使われるギアやToolのアイコン、写真で使われるポラロイド風のあしらい、TVアイコンに使われるオールドスタイルなブラウン管のイメージなど。言われてみると確かにこれってどれも一昔前のメタファーであって、全然現代的じゃないですね。記事内ではこれらを「高齢者向けアイコン」と呼んでますが、実際若い世代にはこれらのアイコンの意味がどれだけ伝わっているのか疑問ではあります。だからってすぐに現代的なメタファーに切り替えるってのも、例えば最近のTVなんてただの板っきれだしなぁ・・・みたいなジレンマはあります。UIデザインに関わる人にとってはちょっと考えさせられる内容の良記事かと。

[Icon Design] 85 Photoshop and Illustrator Icon Design Tutorials – フォトショップやイラストレーターを使ったアイコンデザインチュートリアル

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

PhotoshopやIllustratorを使ったアイコンデザインのチュートリアルをまとめた記事。85の作例が紹介されてるようで、かなりの量です。一からアイコンを起こしたり、写真からトレースしたり、その内容はチュートリアルによって様々です。こうしたチュートリアルのまとめ記事はデザインツールの勉強をしたい時にナイスですね。

[Icon] Batch • 300 Icons for Web & User Interface Design – WebやUIデザインに使えるベクターアイコンセット

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

WebやUIデザインの際に使えるアイコンセット。300個のアイコンセットがベクターデータで配布されてます。ダウンロードするとSVG形式でアイコンデータがモリっと入ってます。プレビュー用のPNGも同梱されてます。個数が多く、かつどれもシンプルなピクトグラムなので、アイコン素材としてとっても使いやすそう。

[Icon Design] 45 Fresh and Free High Quality Icons in PSD Format – アイコン作例のPSDまとめ

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

クールなアイコン作例のPSDまとめ記事。最近だと「アイコンPSDまとめ」って言うとiOS Appのアイコンかと思いがちですが、ここで紹介されているのは様々なフォーマットのアイコンです。なので角丸正方形のものばかりではありません。それぞれPSDで配布されてるので、他のデザイナーのテクなりアイデアなどをイイ意味で盗めそうなまとめ記事。ナイスです。

[Icon] A roundup of great icon fonts – クールなアイコンフォントまとめ

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

クールなアイコンフォントをまとめた記事。各項目のリンク先でファイルが配布されてますが、有料のものと無料のものが混在しているのでご注意を。Entypoとか無料な上にデザインも良く使いやすいなぁという印象。多くの配布ファイルは、ベクターデータとウェブフォント形式で配布されてます(中にはttf形式が含まれるものもあります)。シンプルなピクトグラムが多いので、アイコン素材の素体としても使えそうです。

[Icon] Free custom MacOS icons – MacOSのデフォルトアイコンをリプレイスするアイコンセット

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

MacOSのデフォルトアイコンの代替となるアイコンセット。どちらかというと標準を変更するタイプのカスタマイズにはあまり興味がないんだけど、紹介されているアイコンセットの出来があまりに良く、アイデアやテイストもクールだと思ったので紹介。Safariアイコンとかたまりません。ページ下部からダウンロードする事ができ、Zipファイルを解凍すると.icnsファイルになります。各アプリケーションのリソース書き換えで適用できるので、興味のある方は是非。いやー作り込みの丁寧さがハンパないっすねこれ。素晴らしい。

[Icon] Retina Mac Apps – Retinaディスプレイ対応のマック用アプリ

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

vRetinaディスプレイに対応したMac用アプリケーションのアイコンまとめ。アイコンをクリックすると該当アプリのオフィシャルサイトに行く事ができます。新着順、カテゴリ別、アルファベット順にソートする事ができます。Retinaディスプレイに対応してるものばかりなので、質感とかテクスチャの拘りがなかなかアツいです。かっけーアイコン多いです。

[Icon Design] A collection of creative beautiful app icons – 美しいアプリアイコンの作例

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

美しいアプリアイコンの作例をまとめた記事。「美しいアイコン」という時点で当然のようにWinやAndroid用アプリのアイコンは登場しません。MacとiOS用アプリのクールなアイコンが紹介されてます。デバイス上で見るよりも高い解像度でアイコンが掲載されてるので、普段は気付かないような細かいあしらいも見えちゃいます。Tweetbotのアイコンに地味にテクスチャが貼られてる事に気付いたりしてなかなか興味深いです。見えるか見えないか程度のグラデやテクスチャって大好物であります。アイコン制作のアイデア探しに是非これひとつ。Sparrowもかっけーなー。