世界中の無料素材サイトをまとめて画像検索できるサービス厳選６つ【ブロガー＆Webデザイナー保存版】
誰でも簡単に無料でホームページ作成できるおすすめサイトまとめ。 今やブログや個人Webサイトを運営するとき、記事内のアイキャッチ（サムネイル）に使用する写真素材に困ることはないだろう。ネット上には、無料で高品質な画像が山ほど溢れている。例えば以下のようなサイト。 DesignersPics Unsplash Pexels Pixabay Life Of Pix FindA.Photo MMT これらは全て無料で著作権表示の必要ない写真素材を提供するサイトである。これらもほんの一部で、他にもたくさんある。 しかし人間とは贅沢なもので、少し前までは無料というだけでありがたみを感じていたのに、今ではある特定の写真を探すときこれらのサイトを一つ一つブックマークから開いて検索することに面倒臭さを感じる。 しかし需要があれば供給が生まれる。 上に挙げたような複数の無料素材サイトを横断的に検索して一覧で
無料で使える高クオリティ＆有名人写真。Getty Images (ゲッティ イメージズ)とは。 - スキナモノート
※こちらの写真はイメージです。 はじめに 今はある記事を書いている途中なのですが、その中でどうしても有名人の写真を使いたい。こんな時あなたはどうしていますか？ Googleで検索して拾ってきた画像を使う。←これはいけません。 でもそう言う人って結構多いと思います。こう言う時に使えるサイトを今回はご紹介します。 今更感もありますし、知ってる人は知っていると思いますが、 『Getty Images (ゲッティ イメージズ)』です。 アメリカにある、写真画像代理店ですが、ストックフォトサイトとして、WEB上で写真を購入可能です。 無料で使える高クオリティストックフォトサイト 海外のサイトですが、日本語版もあるので安心して利用する事が出来ます。報道、雑誌、ニュースサイトや有名ブログでも使われる等、写真のクオリティは折り紙付き。 そんな、Getty Images (ゲッティ イメージズ)では、非営利
全部無料！仕事の効率を上げるMacアプリ9選
ども、ゆうせいです。先日、作業効率を上げるショートカットについてご紹介しましたが、今回は「仕事の効率を上げる（効率化）Macアプリ」のお話です。 画像をサクッと編集するアプリ、文字入力が捗るアプリ、そして集中力を高めてくれるアプリなどなど、そんな感じのものを「無料」に絞ってご紹介します。 画像編集が捗るアプリ ほぼ劣化なしで軽量化「ImageOptim」 まず最初にご紹介するのは、ほぼ劣化なしで画像を軽量化するアプリ「ImageOptim」です。これは、画質はそのままで、容量を軽くしてくれるという大変ありがたいアプリです。 使い方は簡単。画像をドラッグ&ドロップするだけ。複数枚を一度にぶっこむことも可能です。 比較してみた 元画像：844KB （画像へのリンク） 「ImageOptim」で軽量化した画像：516KB （画像へのリンク） 40%近く軽量化できましたが、ほぼ劣化していないと言っ
ブログ用の写真加工に何使ってる？JTrimはかなり便利！ - 鈴木です。別館
ブログを書く時の写真加工（フォトレタッチ）のソフトって何使っていますか？ ボクの場合は、先のエントリーで書いた通り人を写り込んでいる場合はモザイク処理をしています。 画像をブログで扱う上で気をつけたい事を自分なりにまとめてみた - 鈴木です。 で、実際に皆さんどんなフォトレタッチソフトを使っているのかな？と思いつつボクが使っているソフトを紹介します。 はてなブロガーはWebデザイン関係を仕事にされている方も多いので、そういう方には釈迦に説法だと思います。あくまで画像加工に詳しくなく、簡単に、安く出来るものを紹介します。また、Windows用のアプリです。 念の為にモザイク処理 前のエントリーに書いていますが、写真に写り込んだ人を画像加工せずにブログ等でアップしてしまうと場合によっては肖像権の侵害等で訴えられる可能性は０ではありません。 そうなると、念の為に顔にはモザイクを入れた方が良いです
[CSS]画像を使わずに、スタイルシートでぎざぎざの線をかくテクニック
画像を使わずに、ノコギリの歯のようなぎざぎざの線をスタイルシートでかくテクニックを紹介します。 下記は、p要素一つだけです。 実装は、こんな感じです。 HTML HTMLはpでもdivでも適当に。 <p>塩レモン</p> CSS ぎざぎざの線はlinear-gradientでかきます。 ぎざぎざのサイズは、4pxを4箇所、それを倍にした8pxを2箇所、変更してください。 p{ padding:1em; background: linear-gradient(-135deg, #4885ff 4px, transparent 0) 0 4px, linear-gradient(135deg, #4885ff 4px, #fff 0) 0 4px; background-color: #4885ff; background-position: left bottom !important; b
あら簡単！写真やウェブページの画像にパースをつけてかっこよく魅せるPhotoshopのアクション -Perspective Actions
あら簡単！写真やウェブページの画像にパースをつけてかっこよく魅せるPhotoshopのアクション -Perspective Actions
全素材ロイヤリティフリーのプロカメラマンが撮影した国内の写真素材が満載！ -パプリカ イメージズ
個人でも商用でも無料で利用でき、加工も自由、クレジット表記も必要無しの写真・イラスト素材がダウンロードできるサイトを紹介します。 パプリカ イメージズ ※2015/4/15: サイトは閉鎖してしまったようです。 中の人に伺ったところ、素材はプロカメラマンが撮影したもので、素材数は現在200点！ ストックは膨大にあるそうなので、「ありそうでなかった、こんな素材が欲しかった」と思う写真を毎日10～20点ずつアップしていく予定だそうです。 無料で利用できる素材は、サイズSの640×480pxのものだけですが、登録も必要無しでさくっと利用できるので重宝するのではないでしょうか。 利用に関しては、下記ページをご覧ください。 ご利用ガイド 素材は現在、6つのカテゴリになっています。
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」:phpspot開発日誌
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 2012年11月22日- Responsive Img - a jQuery Plugin for Responsive Images ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 単に画像をリサイズするだけではなくsrcも置き換えてくれるそう。 PC版を単に縮小するのではなくて、スマホでは別の画像を使う、といった場合にも使えそうですね ブラウザサイズに応じて別の画像に切り替えて最適化したいという場合はそれなりにあると思うので、覚えておいてもよさそうですね 関連エントリ WEBデザインする人なら入れておきたいレスポンシブWEBサイト作成に役立つブックマークレット「Viewport Resizer」 レスポンシブ
画像レイアウト関連で便利なjQueryプラグイン等まとめ:phpspot開発日誌
ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ
iPhone4のRetinaディスプレイで閲覧したらjQueryでRetina向け画像(@2xのやつ)に自動で切り替える - かちびと.net
iPhone4のRetinaディスプレイで閲覧 された際に自動で高解像度の画像に 自動で切り替えるjQueryのコード。 @2xが付くアレです。ちょっと今更 な話題なので誰も見て無さそうな 日曜日に書いて置こうと思います。 jQuery Retinaっていうプラグインがありますが、このライブラリのように色々宜しくやってくれるようなものじゃなく、ただのスニペットです。実際にはもうちょい工夫しないとならないと思いますので参考程度で。というか僕がRetinaなんとかの事を良く分かって無いでｓ コード if (window.devicePixelRatio > 1) $('img').each(function() { var t = $(this); t.attr('src', t.attr('src').replace(/(\.[a-z]+)$/i, "@2x$1")); }); window
面倒なCSS3グラデーションのスタイルシートをグラデーションの画像から簡単に生成するツール -GradienFinder
Photoshopなどの使い慣れたソフトウェアで作成したグラデーション画像から、CSS3グラデーションのスタイルシートを生成するオンラインツールを紹介します。 GradienFinder ドロップすると、すぐにグラデーション画像が反映され、スタイルシートが生成されます。 CSS: 生成されたスタイルシート background: -webkit-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,rgb(128, 128, 128) 100%); background: -o-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,r
img要素でCSS Spriteする方法
「CSS Sprite」は背景画像などの複数の画像ファイルをひとつの画像にまとめて、画像の中から表示させたい部分の座標をbackground-positionプロパティで指定するという手法です。これにより画像ファイルのHTTPリクエスト数を減らすことができます。 この手法は背景画像での利用が一般的なのですが、img要素でも利用することができるようなので、本エントリーで紹介します。 本エントリーでは、次のソーシャルブックマークボタン用の4つの画像を1つにまとめて、CSS Spriteを行ってみます。 背景画像の場合はbackground-positionプロパティでさくっと表示できるのですが、img要素として表示させるのにかなり苦労しました。ということで、コピペで使えそうなサンプルも用意しました。 「そういう場合、背景画像に変更するのが本来では？」というツッコミはなしでお願いします（笑）。
CSSで背景画像をリサイズするテクニック:phpspot開発日誌
How To: Resizeable Background Image - CSS-Tricks Is there a way to make a background image resizeable? CSSで背景画像をリサイズするテクニック デモサイトを見ると、驚くべきことに、背景画像のサイズがビローンと伸びて表示されます。 記事中では３種類の手法について書かれていますが、JavaScriptなしで、CSSだけで実現する３つ目の方法がスマートです。 background-image ではなく、画像に次のようなCSSを宛てることで実現しているみたい。 #img.source-image { width: 100%; position: absolute; top: 0; left: 0; } body { overflow: hidden; } 背景が伸びるというと、ちょっと珍しいので
ダミー画像を超手軽に生成出来るWebサービス・PLACEHOLD.ITがやたら便利 - かちびと.net
昨日知ったWebサービスに久々に感激したので勢いでシェアします。Web制作で必ずと言っていいほど必用になるダミー画像を生成してくれるサービスなんですが、これが個人的にかなり便利でした。 PLACEHOLD.ITはダミー画像の生成サービスなんですが、凄く手軽に生成出来るのでかなりオススメです。 ダミー画像を生成する、というシンプルなサービスですが、これが想像以上に有用的でした。 使い方 使い方は至って簡単。placehold.itというドメインの後にサイズを指定すればいいだけ。 例えば350×150ピクセルの画像が欲しいなら http://placehold.it/350×150 にアクセスすれば指定したサイズの画像が表示されます。 なので、 <img src="http://placehold.it/350x150" /> これで以下のようにダミー画像を表示させる事ができます。 勿論、細か
WebサイトでPNGを使うのは非常識！？ | poyosicom
誤解を与えるタイトルにしてしまったので、訂正しました。ごめんなさい。 こんにちは@poyosiです。PNGを使いまくってコーディングしてますか？ 会社から「WebサイトでPNGを使うのはNGだからGIFにしとけ」とか言われたことないですか？ そうではなくても、「なんとなくPNG使うくらいならGIFにしといたほうが安心」という方もいるのではないでしょうか？ 今日は画像ファイルフォーマットであるPNGをWebサイトに使うのはどうなの？というお話をしたいと思います。 WebサイトでPNGを使ってもいいんじゃない？ 「WebサイトでPNGを使うのは非常識だろ」という事を言われたのですが、仕様書など特に取り決めがない限りでは、それは違うんじゃないかなと思っています。 私はWebサイトでPNGが使われることについては「どんどん使うべき！」と思っています。 そもそもPNGを使わないほうがよいと言われた理
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
[JS]かなりかっこいいアニメーションを使ったスライドショーを実装するチュートリアル
スライドを単に次々と見せるだけでなく、切り替わる時に3Dのダイナミックでかっこいいエフェクトを与えたスライドショーを実装するチュートリアルを紹介します。 Slideshow with jmpress.js [ad#ad-2] デモ 実装 デモ まずは、そのダイナミックな3Dのアニメーションをご覧ください。 スライドは5枚あり、それぞれアニメーションが異なります。 デモページ：別レイアウト 実装 実装に使用しているスクリプトは先日当サイトで紹介した「jmpress.js」です。 紹介記事はこちら。 広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js HTML jmpress.jsのイメージは一枚の広大なカンバスにパネルを設置し、それをアニメーションでスライドする感じです。 実装は一枚の広大なカンバスとなるルート（section要素）に、各パネル（div要
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
よくあるWebデザインにSVGで一手間加え、さまざまな要素がアニメーションで楽しくなる -Elastic SVG Elements
webサイトに、ある画像を入れるだけでアクセス数が3倍になるネット社会*ホームページを作る人のネタ帳
html5-memo.com
