LINEICONS 4.0 IS HERE! 🎉Celebrating with 20% Flat Discount on All Plans! | Coupon:
![Free Line Icons for Designers and Developers - Lineicons](https://cdn-ak-scissors.b.st-hatena.com/image/square/58662082967c5ba908b73ad63bc61ad6a42937f7/height=288;version=1;width=512/https%3A%2F%2Fcontent.lineicons.com%2Fwp-content%2Fuploads%2F2023%2F10%2Flineicons.png)
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトやスマートフォンアプリにおいてアイコンはとても重要です。全体として統一されていることでユーザが迷いなく操作できるようになります。最近のフラットで単色系のアイコンでは使われるシンボルが共通化されつつありますが、それでも多彩な種類に対応していないと、ぴたりと当てはまる使い方ができません。 今回紹介するClarityは多彩なデザインが用意されたアイコン集となっています。 Clarityの使い方 コアアイコンです。細いラインで描かれており、一筆書きで書かれたようなデザインが特徴です。 コマース系。 使いどころの多そうなアイコンです。 メディア操作系。 ソーシャル系。 トラベル、地図系。 グラフ系。 テキストエディタ。 技術系。 ClarityはSVGとして提供されているので、拡
TOP > Design > シンプルさを追求したデザインにおすすめなアウトラインアイコン「Linea: Free Outline Iconset」 アイコンにはさまざまな種類がありますが、比較的シンプル・ミニマルなデザインが主流の今、癖の少ないデザイン性の素材が求められることが多いのではないでしょうか?そんな今回は、シンプルさを追求したデザインにおすすめなアウトラインアイコン「Linea: Free Outline Iconset」です。 いろいろなテーマのラインアイコンがテーマ別に730個収録された、便利に活用できるアイコンセットとなっています。 詳しくは以下 種類としては、ベーシック、ミュージック、eコマース、ソフトウェア、天気など。それぞれのテーマで数種のアイコンがセットとなっていて、サイズは64×64px。フォーマット形式はPNG, SVG, Web Fontにも対応して
シンプルで種類が揃っているアイコンは、見つけるのが大変。 Webサイトやアプリなど、ビジネスからポートフォリオや個人ブログまで多目的に使えるさまざまなアイテムが揃ったシンプルなデザインのSVGのアイコン素材を紹介します。 タイトルは800種類だとキリがいいのですが、799種類なので約800種類で。 Glyph Glyph -GitHub SVGアイコンをWebページに配置する方法 Glyphアイコン799種類とダウンロード方法 SVGアイコンをWebページに配置する方法 SVGアイコンをimgタグで配置 SVGアイコンを普通の画像のようにimgタグを使って配置します。 <img src="svg/si-glyph-bicycle-man.svg"> SVGアイコンをインラインで配置 SVGアイコンをエディタで開き、コードをコピペして配置します。右向きのアローだとこんな感じに。 <svg v
こんにちは、デザイナーのモモコです。 Webサイト制作をする上で欠かせないアイコン素材。デザイン性にこだわりたくても、「一からデザインしている時間がない!」という方もいますよね。 そこで今回は、数あるアイコン素材の中から、デザイン性に優れたおしゃれな無料アイコンを厳選してご紹介します。 線で構成されたライン系アイコンやシンプルなフラットデザイン、手書き風のアイコンなどをテーマ別に紹介しているので、これから制作するWebサイトの雰囲気に合わせてご活用ください。 なお、今回は基本的にロイヤリティフリーで使用できるものを集めましたが、ご利用になる際は各配布先にて利用許諾範囲を必ずご確認ください。 ※この記事は、2015年に公開されたものを最新情報を踏まえて編集部で再編成しました。 シンプル・フラットなデザインがおしゃれな無料のラインアイコン Streamline https://www.stre
デザインに大胆さとワイド感を演出できる シングルページレイアウトテンプレート「PSD Templates: 20 One Page Free Web Templates」 webサイトの構成で、サイト全体のデザインにワイドな雰囲気を演出できるシングルページレイアウトは、最近特にさまざまなサイトで多く利用されています。今回はそんなシングルページレイアウトのテンプレートまとめ「PSD Templates: 20 One Page Free Web Templates」を紹介したいと思います。 (Arrow | Free One Page Business Portfolio PSD Template on Behance) 20種類の、デザイン性のあるシングルページが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Dribbble – real
WEB制作で重宝するのがアイコン素材。ベクターで書くこともWEBデザイナーなら難なく可能だとは思いますが、アイデアから制作までの時間を考えると、フリーで利用できるアイコン素材はとても便利な素材の一つです。今日紹介するのはシンプルでミニマルなアイコン素材144個セットにしたアイコンセット「144 minimal icons package 12 A.M」です。 名前の通り非常にシンプルなアイコンなので、どんなサイトでも利用することができそうです。 詳しくは以下 まとめられているサイズは上記の通り。かなりの幅で用意されているため、製作時に困ることは無さそうです。アイコンセットは、PNGデータと、ベクターデータで扱えるAIと提供されおり、rarで圧縮されています。ベクターデータが同封されていますので、カスタマイズもサイズ調整も可能となっています。 ダウンロードは下記原文へのリンク先の右カラムの「
JQM向けのイメージギャラリーを 実装する為のjQueryプラグイン です。フリック操作で進める事 が出来ます。特に変わったエフ ェクトも無いのでシンプルで使 いやすい印象でした。 jQuery Mobile向けのシンプルなイメージギャラリーを実装する為のプラグインです。 フリック操作に対応したイメージギャラリーです。スマフォ向けなので凝ったエフェクトもなく、なかなか軽量なライブラリとなっています。JQM自体軽量とは言えないのでこういったスクリプトは軽量であって欲しいトコロです。 JQMに準じたカスタムデータ属性を含むDOM要素を生成したりswipeleftメソッドで送ったり、みたいな感じっぽいです。良く見てませんけど。 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="jquer
クレジット表記なしで無料で商用利用できる60個のシンプルなアイコンセットがWebディレクションやWebデザインの情報を掲載しているArchからダウンロードすることができます。パスの変更・着色・拡大縮小などの加工も可能で、Illustratorなどのソフトで簡単に編集できるSVG形式となっています。 SVG形式のシンプルなアイコン60個セット | Arch http://www.ar-ch.org/mt/archives/2012/09/svg60.html 使い勝手のよさそうな、シンプルなアイコン60個は以下から。 ダウンロードはページ下部の青いボタンをクリックすれば完了します。 なお、禁止事項として以下の3つが挙げられています。 × 再配布、またはダウンロード可能な状態にすること × 販売 × 素材への直リンク
シンプルなパララックス効果 を少しのjQueryコードで作る というTips。プラグイン化さ れていますのでレイヤーの追加 も簡単です。 個人的にはあまり見かけなくなった印象のパララックス効果のあるサイトですが、まだ需要はあるみたいです。 今日は単純なパララックス効果のあるコンテンツを少しのjQueryコードで作るTipsです。 Sample マウスに合わせてレイヤーが動きます。 (function($) { $.fn.paralax = function(container, speed) { var $window = container, t = speed || 1, $object = this; return $window.on("mousemove resize", function(e) { $object.css({ top: -(e.pageY - $window.h
Flickrshow ? A very simple Javascript slideshow for Flickr 超シンプルなFlickr画像のスライドショーライブラリ「Flickrshow」。 APIの使い方が分からなくても数行のJavaScriptをコピペ出来れば実装できるところが楽でいいです。 以下、実装コード。超シンプルです。 flickshow を new する時に色々とパラメータが渡せて、ユーザID、タグ、インターバルや自動再生といった指定が可能となります。 関連エントリ CSS3のみでクロスフェードするワイルドなスライドショー これは新しい!パネルレイアウトが美しいスライドショー実装デモ フルスクリーン背景がスライドショーになるCSS3サンプル PC・スマホ・タブレットで動くクールなHTML5スライドショー実装ができる「Juicebox」
よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify.js" type="text/javascript"></script>jQuery本体とプラグインを読み込みます。 $(do
ソーシャルメディア用のアイコン:23種類 ダウンロードできる素材のフォーマットはPNGで、サイズは32, 128が揃っています。 ソーシャルメディア用はPNG以外にもPDFもあり、サイズも16, 32, 128, 256, 512が揃っています。 [ad#ad-2] 有料版はアイコンの種類が多く、全部で200種類が揃っています。
WEBデザインにおいて便利な素材アイコン。アイコン自体のテイストにもよりますが、汎用性が高く、比較的どんなデザインでも活躍してくれます。今回紹介するのはフリーで利用できる650個以上のシンプルアイコンセット「defaulticon」です。 非常にシンプルなアイコンですが使い勝手がよく、使いやすいアイコンセット。全部で650以上のアイコンが公開されています。 詳しくは以下 データは16×16、32×32、48×48、64×64の、128 × 128、256 × 256のpngデータと編集可能なepsとなっていて、epsで配布されていますので、自由にカスタマイズ可能です。 このアイコンのライセンスは「Creative Commons Attribution-No Derivative Works 3.0 」となっていて、ライセンスに則った形であれば商用、非商用問わず無料で利用でき、WEBから、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く