アプリの操作方法やサービスの使い方を説明するときなどに利用することがあると思うジェスチャーアイコンのまとめです。 シンプルなデザインのものが多めですが、中には100種類以上が詰まった大容量なものや手だけでなくデバイスも込みで作られているもの、タップ・スワイプ・ピンチインといったようにそれぞれの動作がどのような呼び名なのかわかりやすくしてくれているものもあります。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。
![操作説明時などに利用できる、フリーのジェスチャーアイコンセット 10 - NxWorld](https://cdn-ak-scissors.b.st-hatena.com/image/square/589ad9e3c97c2a48e93ceefb483b6f57ad1fa0c7/height=288;version=1;width=512/https%3A%2F%2Fwww.nxworld.net%2Fthumbnail%2F10-free-gesture-icons.png)
ウェブページでよく見かけるアイコンをクリックやタップした時に、ちょっとしたアニメーションを加えたデモを紹介します。 かわいいアニメーションで楽しくなるだけでなく、アイコンをクリックしてどうなるのかが伝わる役目も果たしています。 無くても困らないけど、あると嬉しい演出っていいですね。 Animated Shopping Cart Icons デモではフルーツショップのサイトを例に、カートに商品を入れたり、ギフトを選択したり、商品をファボったりした時に、ちょっとしたアニメーションを加えて、ユーザーを楽しませます。 たくさんあるデモの中から、少しだけアニメーションGIFにしてみました。
表情豊かな顔アイコンを、顔の5つのパーツを自由に組み替えることで自由に作れるようになるアイコン素材が「Emoticons」です。無料で配布されており、商用利用も可能で、パーツの組み合わせは300万通り以上あります。 Free Download: Avatars and Emoticons Vector Set | Web Resources | WebAppers http://www.webappers.com/2014/03/26/free-download-avatars-and-emoticons-vector-set/ アイコン素材は上記リンクの下部にある「Click Here to Download Now」からダウンロード可能。 頭の輪郭・髪の毛・目・口・アクセサリーの5つをそれぞれ自由に変更可能で、組み合わせは1000通り以上あります。 顔アイコンの作例はこんな感じで、ひょ
ウェブサイトやアプリで使うさまざまなアイテムが揃った、シンプルな美しいアウトラインで作成されたミニマルなアイコン素材を紹介します。 フォーマットはPSD, AI, SVG, Icon Fontと全て揃ってます! 150 outlined icons – PSD AI SVG Webfont ダウンロードできるアイコンのフォーマットは全てベクターで、4種類が揃っています。 .psd .ai .svg フォント(.woff, .eot, .ttf, .svg) あらゆる作業環境でそのまま使用できますね。 アイコンのアイテムは全部で、150種類! ウェブサイトやブログ、アプリでよく利用するアイテムが揃っています。
freepik.comはウェブやグラフィックデザイナーのためのベクターやイラストやPSD素材の検索エンジンで、日本語環境でももちろん利用できます。アイコンに特化したflaticon.comも運営しており、こちらには現在38,000個以上のアイコンが登録されています。 freepik.comでアイコンの検索する時は、下記のページからが便利です。 freepik.comでアイコンを探す freepik.comは、そのブログだけのオリジナルの素材を配布するコラボをしています。日本ではコリスが初!今回はその第4弾です。 第1弾:コリスのビジターのアンケートを元にしたアイコン150種類 第2弾:1,400種類の汎用的に利用できるアイコンセット 第3弾:プレゼンや企画書で使える!インフォグラフィック用のベクター素材 ダウンロードできるアイコン素材のフォーマットは、ベクター完備! .svg .ai .e
ページ下部にもたくさんのアニメーションが! アニメーションはAnimate.cssを使用しているので、さまざまなものが利用できます。 どのようなアニメーションががあるのか、実装方法など、当ブログで以前紹介した記事をご覧ください。 classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css WOW.jsはデモ以外にも、他のサイトで実際に使用されているさまざまな例があります。 どのサイトもアニメーションが楽しく、とても印象的です。 Stream Line Icons WOW.jsのつかいかた Step 1: 外部ファイル 当スクリプトを</body>の上、Animate.cssをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/libs/animate.css"> </
最近Webサイトでアニメーションしながら表示される所が増えています。かといってかつてあったFlashのようにスプラッシュ的なものではなく、表示構成要素がさりげなくアニメーションしながら配置されていくといった感じです。 それはCSS3のアニメーションで作られているのですが、スクロールと組み合わせて容易に実現してくれるのがWOW.jsです。 何はともあれ動画を見てもらうのが良いと思います。 犬や猫のアイコンがアニメーションしながら表示されていきます。スクロールの感知はJavaScriptで行っていますが、実際のアニメーションはCSSアニメーションによるものです。 実用的にどうなの、と思ったのですが以下のサイト(利用例)を見るとかなりいけてることが分かります。 さりげないアニメーションで表示されます。 1640 iOS7 Icons for designers & Developers | St
レトロちっくなかわいいアイコンを探している、そんな人にぴったりの素敵なアイコン素材を紹介します。 個人でも商用のプロジェクトでも無料で利用できます。
今回はデザインの細部までこだわりを感じる、操作性が面白い、そんなアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。 コンテンツファースト、Off Canvas、1ページ垂直スクロールがキーワードです。 また各サイト、ナビゲーションが非常に変わっていますが、初めてでも迷うことなく操作できると思います。ゆっくり時間かけて楽しんでください! Amanda Gerhardsen ノルウェーの写真家さんのポートフォリオ、ダイナミックな四方向のナビゲーション、各UIエレメントの繊細な動きが楽しめます。左上の「Remix」で落書きもできるとても楽しいサイトです。 iArk ノルウェーのインテリアデザインのコーポレートサイト、サイト全体のトーン&マナーが非常にかっこよく、レイアウトやタイポグラフィ、写真全てが美しくデザインされています。右サイドのOff Canvasも面白い使い方です。
ウェブサイトやアプリで使うさまざまなアイテムが揃った、ミニマルな美しいアウトラインで作成されたシンプルなアイコン素材を紹介します。 ベクターなのも嬉しいポイントです。 150+ Outline Vector Icons Pack ダウンロードできるアイコンのフォーマットは.epsで、ベクターなのでサイズ変更やカラー変更しても利用できます。 アイテムは全部で168種類! ウェブサイトやアプリでよく利用するアイテムが揃っています。
SAP、業務アプリ用のJavaScript製UIライブラリ「OpenUI5」を公開。レスポンシブ対応でモバイルデバイスにも 業務アプリケーション最大手の独SAPは、業務アプリケーションのためのJavaScript製JavaScrit UIライブラリ「OpenUI5」をオープンソースとして公開しました。 OpenUI5は、同社のモバイルアプリケーションなどに用いられているJavaScript製ライブラリ「SAPUI5」の主な機能をオープンソース化したもの。jQuery、CSSプロセッサのLESS、ODataライブラリのdatajsなどが使われています。 ボタンやアコーディオン、メニュー、テーブル、ダイアログと言った部品だけでなく、レスポンシブ対応のグリッドレイアウトなどのレイアウト用部品も含まれており、モバイルデバイスに対応するレスポンシブデザインのUI構築が可能になっています。 JavaS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く