最近はアイコンデザインの進化もめざましいものがあります。 かわいいアイコン、かっこいいアイコン、面白いアイコン、そのデザイン・設計や見せ方がすばらしいアプリ用のアイコンを紹介します。

パスワードを忘れた方はパスワードの再設定を行ってください。 初めての方ははてなID登録 (無料) してください。 うまくログインできない方はお問い合わせをご覧いただき、Cookieの設定をご確認ください。

アニメーションするCSSのみのハンバーガーメニューアイコン Animating CSS-Only Hamburger Menu Icons Hamburger menu icons have become a staple in many websites and web apps, and whether you like them or not, they are becoming a familiar and recognizable UI action button. Users are associating this icon with the showing and hiding of menus, and its compact, space-saving nature makes it a desirable style, particularly on smaller

アイコン素材は、いろいろなシーンで活躍してくれる非常に便利な存在。たくさん持っているほど表現にバリエーションを持たせることができます。そんな中今回紹介するのは、100種のラインアイコンセット「Iconomous」です。 フラットテイストなデザインにぴったりと合う、シンプルベースのアイコンが100種まとめてダウンロードできるようになっています。 詳しくは以下 矢印やファイル、データ、ツール、グラフといったビジネスデザインシーンで活躍する定番のアイコンから、フードやファッションアイテム、乗り物といった頻繁には使用しないけれどあると便利なアイコンまで、種類が豊富。アウトラインが太めで、中の描写は細めのラインを使って描かれており、アイコン1つ1つから表情のある強弱を感じることができます。 100種という豊富さも魅力、定番としてストックしておけば何かと活躍してくれそうですね。以下リンクよりダウンロー

公開日 : 2014年9月11日 カテゴリー : ユーザビリティ iPhone 6 や Apple Watch といった新製品の発表に合わせて、Apple のサイトもリニューアルされました。ナビゲーションメニューやメインコンテンツ内の見出しを含め、文字組みが基本的にすべて (画像文字ではなく) HTML テキスト化されたり、最近の新製品情報ページで多く採用されていた「スクロールハイジャック (scroll hijack : ブラウザ標準のスクロールバーを意図的に非表示にするデザイン手法)」が軒並み排除されたり...といった改良が見られますが、もっとも衝撃的と言えるのが、Apple サイトのモバイル対応ではないでしょうか。 アクセスしてくるデバイスの種類を判別しているのだと思いますが、手元の iPhone 5 や Nexus 7 で Apple のサイトを開くと、下図のようにモバイルサイトの

どうも、平成の☆　やな☆ぎさわです。 デザインや資料作成などで素敵なアイコンをサクッと配置したり、ワンポイントで使いたい時ってありますよね。 そんなとき、自分で作ると時間がかかるし、そもそも作れないよぉなんて悩んでる方は多いのではないでしょうか。というわけで、王道中の王道ですが、今回は素敵なアイコンサイトのご紹介と行きたいと思います。 もはや何番煎じだかわからないからこそ、全力で厳選しました。ぜひ。 ありとあらゆるアイコンが無料＆超激安で手に入る金字塔的サイト「ICONFINDER」 ICONFINDER >>サイトはコチラ 僕は、資料を作る際に必ずと言っていいほどこのサイトに依存してます。 検索は英語限定ですが、JPG、PNG形式はもちろん、ベクターデータや3D系まで異常なほど豊富なアイコン収録数が魅力。 本職のデザイナーさんでここを知らないって人はもはやいないと思いますが、非デザイナー

汎用性が高いUIアイコンなどと比べると使う場面は少ないものの、いざ使いたいときに便利そうなものやあまり見かけないタイプだと個人的に思ったアイコンセットのまとめで、過去に紹介してきたものをひとまとめにしました。 既に公開・配布終了しているものも一部あるのですが、ファイルダウンロード自体はできなくともデザイン的にはそのまま参考になることもあるので、そういったものはキャプチャが小さめではありますがリンク設定のみ解除する形で紹介します。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。 リンクが未設定で配布形式も記載されていないものは公開・配布終了しているものです。

現在でも、新型コロナウイルスの影響がすごいですからお盆期間の墓参りもオンラインということで話題になっているようです。 何でもかんでもオンラインというのは現状では仕方のないことですが、墓参りもということについてはびっくりしました。 オンライン墓参りというのは何だか罰当たりな気持ちでありますが、里帰りできない点ということを考えると自宅のお墓の様子など確認できることはいいことです。 オンライン墓参りでは、Zoomを使用をしてしてくれるそうなので「オンライン帰省」「オンライン飲み会」と言った感じでできることはいいですね。 オンライン墓参りのサービスは、ネットニュースで話題になっているのでわかると思いますが「有限会社かの石材」という広島県福山市にある墓石店がしたそうです。 こういったサービスを思い付くのがすごいなと思いますが、15年前から墓の掃除代行サービスをしていたようです。 それが、世の中大変な

昨日「エンジニアだけでアプリアイコンを作る」を書いたのですが、500はてブ以上と思わぬ反響をいただいて驚いています。 ほぼツールの紹介だったので大方予想はできていたのですが「で、結局絵はどう書くの？」といったコメントを多くいただきました。 このあたりについてもどのようにやってきたかをざっくりですが紹介しておきたいと思います。 アイコンを書けるようになるまで 模写する 勉強する 自分なりに作る（ゴール） ざっくり言うとこの３つの手順です。 あくまで「なんとか書けるようになるまで」なのでデザイナーさんから見ればまだまだなレベルにしか到達しないでしょうが、やれないよりはマシなはずです。 模写する まずは今あるアイコンと同じものをとにかく作っていきます。 ここでの主な目的はツールの使い方を把握することです。（前記事ではInkscapeを紹介しました） 10個ほど作ればおそらくツールの使い方はほとん

著者：アラ・コルマトヴァ（Alla Kholmatova） 翻訳者：浅野 紀予 インターフェース上のアイコンを、ただの装飾要素ではなく、その価値を高める要素にするのはどんなポイントでしょうか？ 直感的であること、美的価値があること、記憶しやすいこと、それとも文化の違いを超えて知覚できること？ 効果的なアイコンはそれらの特徴をいくつも持ちあわせていますが、私はあるひとつの尺度に注目したいと思います — それは認識速度、つまりそのアイコンをどれくらいの速さで発見し識別できるか、という尺度です。 単純な暇つぶしアプリなら、認識速度の違いは大した問題ではなく、体験全体を揺るがすほどの影響を与えはしないかもしれません。 でも、複雑なトレーディングアプリでは事情が異なるでしょう。その場合、アイコン表現に求められる要件は、一段とスピード優先の傾向を強めます。個々の要素の処理時間が、インターフェース全体

この記事はAndroidAdvent Calendarのエントリーです。 はじめにAndroidが国内に出回って5年が経ちました。 当初の標準アイコンのままアプリがAndroid Marketに公開されるような状態は落ち着き、時代とともにデザインも洗練され一定の秩序が見られるようになってきました。 しかし、未だにデザイン面を考察した形跡が見えないアプリも少なくありません。 スマートフォンは多数のアプリを使うため、ルールに基づいたプラットフォームで一貫性のあるデザインを土台にするのが操作性の良さにつながります。 独自性を出すためや新たな操作性を開拓するためにあえてルールを守らないと言う事もありますが、まずはデザインルールを知りその上で設計することが大原則になります。 ランチャーアイコンアプリデザインについて語る上でランチャーアイコンから入らない訳には行きません。 ランチャーアイコンはアプリの

インストールされるデバイスの種類が増えたことで、デベロッパーはたくさんのアイコンをつくる工程が増えました。アイコンを実機に入れてみては、チェックし、変更したりしていると、差し替えるだけでも大変な作業です。そんな時に役立つのが「IconKit」です。 アイコンを一つ準備するだけ 最大サイズのアイコンを一つ準備して「IconKit」にドラッグするだけ！ そうすると… こんな感じで、いろいろなサイズのアイコンを作ってくれるのです。 最終的に書きだす際に、どのデバイス用なのかを選択します。 そうると、アイコンがずらっと作られます。 500円(2013/12/13時点)の有料アプリですが、アップデートもきちんと行われ続けていますし、デベロッパーにはおすすめのMacアプリです。 IconKit [sc name=”ios”][sc name=”engeneer”]

（編集部注：2013年12月4日に公開された記事を再編集したものです。 ※無料で商用利用可のところばかりですが、中にはアイコン1個1個でライセンスが違うものやコピーライト記載が必要なものもあるので、ご使用の際には随時ご確認ください。） こんにちは。デザイナーの白浜です。 フラットデザインが流行りなこともあり？最近何かとピクトグラムアイコンを探す機会が増えました。（余裕があれば自作モノも増やしたいところですが！） でも、いつも同じところだとマンネリになりがち……。 他のデザイナーさんはみんなどこみてるんだろう？？とアンケートをとってみたところ……今まで知らなかったところが結構出てきました！ メモがてら、まとめてみたいと思います。 【こちらもおすすめ】 ☞ 質高すぎ！ベクター素材をフリーでダウンロードできるサイトまとめ LIGデザイナーが厳選！使えるフリーのピクトグラムまとめ Endless

リガチャなアイコンフォントを自作しようとするとけっこう大変そうで、そのためのアプリを揃えて操れるようになったり、リガチャの仕様を把握したり、専用のCSSを書いたりする必要がある。そういった正攻法のやり方としては、このページがとてもわかりやすかった。また、実際にそのページの方法によって制作されたLigature Symbolsも魅力的。 ところが自分が欲しいのは、Twitterで使っているアバターアイコンと、ブログのボタン等で使う5〜6個のアイコンを含んだ最小のセットで良くて、そのために前述のような本気を出して作るのは、なかなか重い腰があがらずにいたところ、アイコンフォントを手軽に生成できるサービスIcoMoonの中に、そのリガチャを作成する機能もあることに気がついた。^1 それを使ってみたら、予想以上に簡単にリガチャなアイコンフォントをサクッと作れた。 上のはそのIcoMoonを使って作っ