Instagramフィルターを再現するCSSスニペット「Instagram.css」
TOP > Design , Tool > Instagramフィルターを再現するCSSスニペット「Instagram.css」 旅先での思い出や美味しいものを撮った写真をSNSに投稿する時、Instagramを活用している人は多いのではないでしょうか。そんな中今回は、Instagramフィルターを再現するCSSスニペット「Instagram.css」を紹介したいと思います。 40種類以上のバリエーション豊かなフィルターを再現できるCSSです。 詳しくは以下 Instagramはモノクロからビビットな印象のものまで、様々な写真加工を簡単に施すことができます。もちろんPhotoshopを使ってこのような加工することも可能ですが、色やトーンの細かい調整も多く、案外大変な作業だったりもします。今回紹介した「Instagram.css」を使えば、スマートフォンで撮影した写真が、フィルターを
水彩の草花の風合いが美しいイラストセット「Botanical Garden Watercolor Set」
高い技術を活かしたデザインがどんどん進化する中、アナログな手描きのデザインは常に根強い人気を誇っています。そんな中今回紹介するのは、水彩の草花の風合いが美しいイラストセット「Botanical Garden Watercolor Set」です。 ボタニカルテイストの植物イラストをセットでダウンロードすることができるようになっています。 詳しくは以下 繊細な雰囲気を持ちつつも、力強いはっきりとした色合いの水彩使いが特徴。イエロー、ネイビー、グリーン、レッドなどの色合いで統一されており、抽象的ではなくリアルな質感が表現されています。そのままグラフィック要素として使ったり、化粧品など女性をターゲットとした美しさを強調するデザインの素材にしたりと、イラストが主役となって作品や商品を演出してくれそうです。 素材はpng形式。使い方次第でいろんな表現ができると思いますので、気になった方はぜひチェックし
スプレーを吹きかけたようなテクスチャ素材「16 Sprayed Vector Textures」
デザインに勢いを付けたいときや、スタイリッシュに魅せたいときなどに非常に役立ってくれる、スプレーや水を吹き付けたようなスプラッシュ表現。自分で1から制作するのは大変ですが、今回ご紹介するのはそんな時に利用したいテクスチャ素材「16 Sprayed Vector Textures」です。 スプレーを吹きかけたようなベクターアートが収録された、ハイクオリティな素材です。 詳しくは以下 素材の中には白地をバックに黒をスプレーしたスプラッシュ素材が8点と、黒字にホワイトのスプレーを散らした素材8点の計16点ものテクスチャーが収録されています。それぞれ飛沫の飛び散り方も異なるので、水滴の目の細かさや密度で使い分けることができそうです。データ形式はEPSとPNGとなっており、ベクターデータも収録されているのでサイズや色の調整が簡単に行えるのも嬉しいですね。 フリーでダウンロードできますので興味をお持ち
JavaScriptモーダルウインドウプラグイン「Best Free JavaScript Modal Window Plugins」
TOP > plugin > JavaScriptモーダルウインドウプラグイン「Best Free JavaScript Modal Window Plugins」 Webサイトを閲覧していると様々なモーダルウィンドウを見かけると思います。使用用途はもちろん、デザインも様々。そんな中今回は、デベロッパーにとって便利な、JavaScriptモーダルウインドウプラグイン「Best Free JavaScript Modal Window Plugins」を紹介します。 SweetAlert2 – a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes モーダル制作に便利なオープンソースが集約されたまとめとなっています。いくつか気になる
支払いフォームデザインのインスピレーション集「30 Amazing Payment Form Designs for Your Inspiration」
TOP > WebDesign > 支払いフォームデザインのインスピレーション集「30 Amazing Payment Form Designs for Your Inspiration」 わざわざ出かけなくても、自宅でショピングができてしまう時代。インターネット利用者の約9割が、ネットショッピングを経験しているとも言われており、もはや日常生活において欠かせない存在といっても過言ではないかもしれません。そんな中今回は、ECサイトに欠かせない、支払いフォームデザインのインスピレーション集「30 Amazing Payment Form Designs for Your Inspiration」の紹介です。 Credit Card Checkout by Patryk Zabielski – Dribbble 払いフォームと言ってもレイアウトやUIデザインは様々。今回はいくつか気になる
レトロな演出に最適なハーフトーンのPhotoshopアクションキット「Halftone Press Photoshop Kit」
レトロな雰囲気を演出する方法はいろいろありますが、今回はそんな中でも簡単にイメージをレトロテイストに寄せてくれる「Halftone Press Photoshop Kit」を紹介したいと思います。 ハーフトーンのパターンにさまざまなバリエーションが揃っています。使用した雰囲気のサンプルをいくつかピックアップしているので、下記よりご覧ください。 詳しくは以下 ドットの大小、かすれ具合などを使い分けることで、レトロな中でもイメージに変化を付けることができます。フォントやグラフィック、イラストなどと組み合わせて使用することで、デザインに変化を持たせることができ、さらにちょっとした含ませ方で、味のあるビンテージな雰囲気を演出できると思います。パターンも60種類と豊富で、このキットひとつで多種多様のレトロ感を作り出すことができそうです。 雰囲気作りに困っていた方は、こういった少しの手間を織り込むこと
様々なチェックボックスを気軽に再現できる「CSS Checkbox Library」
WEBサイトで何かを選択する際に使用するチェックボックス。アンケート機能やメールフォームにはよく利用されていることから、機会が多いのであれば、テンプレートとして所持しておきたいものです。そんな方におすすめできる「CSS Checkbox Library」を今回は紹介したいと思います。 チェックボックスに焦点をあて、いろんなタイプのものがまとめられています。気になったものをいくつかピックアップしているので下記よりご覧下さい。 詳しくは以下 丸と四角のチェックボックスの他に、オンオフ機能で使用しやすいスライド式のボタンも収録されているのは嬉しいポイント。“GET HTML”と書かれているボタンをクリックするとコードをコピーすることができます。エフェクトの付け方やデザインが違うものが多く収録されているので、ブックマークしておくと非常に便利。 チェックボックスやスライド式ボタンはよく使用するもので
最新のiPhoneXまでそろう 全てCSSで描がかれたモックアップ「Devices.css」
モックアップ素材は多く普及しており、使用している方も多いはず。デザイナーにとって重宝できるモックアップ素材ですが、解像度を気にしなくてはならなかったり、新機種が発表されたタイミングなど、中身の入れ替えが面倒な時も。そんなシーンで役立つ、CSSのみを使用してつくられた「Devices.css」を紹介していきたいと思います。 機種も多く収録されており、知っておくと便利に活用することができそうです。 詳しくは以下 CSSで作成されているとは思えないほどのクオリティの高さ。既にビジュアルが発表されている未発売の最新機種まで網羅されているのは非常に嬉しいポイントです。iPhoneやAndroidの他にApple WatchやMacProなど幅広いデバイスも作成されており、必要とされるモックアップがほとんど揃えられています。 使用することで時間短縮もできるかもしれませんね。解像度を気にせず、気軽にモッ
ポップでカラフルなトロピカルベクター素材キット「Tropical Nature Kit」
ネット上ではさまざまな種類の素材が配布されていますが、今回紹介するアイテムは思わず心が躍ってしまう、ポップでカラフルなトロピカル素材キット「Tropical Nature Kit」です。 常夏をイメージさせてくれる可愛らしいイラストレーション素材が揃っており、セットでダウンロードできるようになっています。 詳しくは以下 花や鳥、パイナップルなどカラフルな色合いのイラストは見ているだけで元気を貰えそう。夏らしいペーパーアイテムやエコバックにプリントしてみたり、花輪のフレームを活用した写真立てなど、オリジナルグッズを作ってみるのも良さそうですね。イラスト単体のもの、組み合わせて完成されたもの、シームレスなパターンなど、アイテムの豊富さも魅力的。 デザインに華やかさを加えたい、夏らしい雰囲気を演出したい時にはぴったりの素材だと思います。ベクター形式でダウンロードできますので、色の改変や編集も可能
CSS3でつくるボタンの最新チュートリアルまとめ「50 CSS3 Button Tutorials For Designers [2017]」
TOP > WebDesign > CSS3でつくるボタンの最新チュートリアルまとめ「50 CSS3 Button Tutorials For Designers [2017]」 WEBやアプリ上でのボタンはユーザーにとって大きな意味を持ち、非常に重要な要素。一目でボタンだとわかるようなつくりであることはもちろんのこと、遊び心あるエフェクトはユーザーの目を楽しませます。今回はそういったボタンを探している方におすすめ、最新CSS3ボタンのまとめ「50 CSS3 Button Tutorials For Designers [2017]」をご紹介します。 Off-registration button すべてにデモがついているので、その場でどんな動きをするのかを確認することが可能。50種類もあるボタンの中でも気になったものをいくつかピックアップしていますので、下記よりご覧下さい。 詳し
![CSS3でつくるボタンの最新チュートリアルまとめ「50 CSS3 Button Tutorials For Designers [2017]」](https://cdn-ak-scissors.b.st-hatena.com/image/square/4a0eac86da3ce69645e5e5d5d3e12b459290214f/height=288;version=1;width=512/https%3A%2F%2Fdesign-develop.net%2Fwp-content%2Fuploads%2F2017%2F09%2F50_CSS3_Button_top.jpg)
フェミニンな雰囲気が漂う幾何学模様チックな海藻などの植物テクスチャまとめ「Vector Plants and Textures」
TOP > Design , vector , WebDesign > フェミニンな雰囲気が漂う幾何学模様チックな海藻などの植物テクスチャまとめ「Vector Plants and Textures」 制作の現場においてテクスチャは非常に便利。特に自分の好みにカスタマイズが可能なベクター素材であれば、さらに重宝する存在になると思います。そんな中今回紹介するのは、北欧の雰囲気が漂う“植物”に焦点をあてたテクスチャ素材「Vector Plants and Textures」です。 くすんだパステルカラーが目を引く、柔らかいタッチが印象的な素材です。 詳しくは以下 カラフルな色味ですが、くすみを帯びているので落ち着いた雰囲気でデザインを彩ってくれます。上品さを感じさせるフェミニンな空間を演出する際にぴったり。それぞれのパーツは独特のニュアンスがありながらもシンプルな構造なので、カスタマイ
Webデザインをよりクリエイティブにみせてくれる 複数写真の同時切り替えが可能なグリットスライドショー「CSS Grid Layout Slideshow」
TOP > WebDesign > Webデザインをよりクリエイティブにみせてくれる 複数写真の同時切り替えが可能なグリットスライドショー「CSS Grid Layout Slideshow」 Web上で写真を見せる定番の手法のひとつ、スライドショー。コンテンツを見せるのに利用したり、メインビジュアルに利用したり…とても活用幅が広く便利な存在です。今回ご紹介するのはそんなスライダーを、よりクリエイティブに見せてくれる変則的なスライドショー「CSS Grid Layout Slideshow」です。 グリット上に並べられた複数のイメージを、一気に切り替えることができる美しいスライドショーのフリーCSSソースです。 詳しくは以下 ランダムで大胆な配置に並べられたスライド画像は矢印を押すことで、次の画像へと切り替えることが出来ます。グリットの並び方はスライドごとに異なり、アニメーションと
背の高さが目をひく 見出しを目立たせてくれるデザインフォントまとめ「20 Free Tall Fonts for Catchy Headlines」
TOP > Font > 背の高さが目をひく 見出しを目立たせてくれるデザインフォントまとめ「20 Free Tall Fonts for Catchy Headlines」 人の目を引くために、見出し部分を印象的にするデザイン手法を取り入れている方も多いと思います。その中でフォント選びにもっとこだわりを持たせると、さらに魅力的な演出ができるかもしれない、今回はそんなシーンで参考にしたいフォントまとめ「20 Free Tall Fonts for Catchy Headlines」を紹介します。 Monument_Valley_1.2 font by turbocass – FontSpace 数多くあるタイポグラフィーの中でも今回は、背の高さで見出しを飾り付けてくれることに焦点をあてたものがピックアップされています。 詳しくは以下 GardenPartySans font by
フリーで使えるワードプレスのテーマ「9 Free WordPress Artistic Themes」
TOP > WebDesign , WordPress > フリーで使えるワードプレスのテーマ「9 Free WordPress Artistic Themes」 数え切れないほどのWebサイトが存在する中で、情報が綺麗にまとめられているサイトは見やすく閲覧していてもストレスになりません。多くの情報をいかにシンプルに整理してサイトに反映するのかが重要になってくると言えます。そんな中今回は、フリーで使えるワードプレスのテーマ「9 Free WordPress Artistic Themes」の紹介です。 Optics WordPress Theme | Graph Paper Press シンプルにレイアウトされたテーマが魅力的なサイトから、気になったものをピックアップしましたので是非ご覧ください。 詳しくは以下 Shapely – One Page WordPress Theme
編集可能なベクターで制作された最新の背景デザインアイテムまとめ「10 Fresh & Free Vector (AI, EPS Files) Background」
編集可能なベクターで制作された最新の背景デザインアイテムまとめ「10 Fresh & Free Vector (AI, EPS Files) Background」 デザインを華やかにしてくれる背景素材。紙面でもWeb上でも非常に役に立ってくれます。だからこそ新しいものは常に所持しておきたいもの。今回ご紹介する「10 Fresh & Free Vector (AI, EPS Files) Background」では、最新のアイテムがまとめられています。 Beautiful Painted Floral Illustration Vector Graphic — 全てベクターで制作されているので、非常に使い勝手がよいものとなっています。気になったものをいくつかピックアップしているので、下記よりご覧ください。 詳しくは以下 Vintage Frame and Label Vector | Fr
着古されたTシャツのプリントのような”かすれた”テクスチャ「9 Free “Washed & Worn” Aged T-Shirt Effect Textures」
着古されたTシャツのプリントのような”かすれた”テクスチャ「9 Free “Washed & Worn” Aged T-Shirt Effect Textures」 汚れや経年劣化など、古びたようなテクスチャをデジタルアートワークで表現したいけれど、やり方が分からない・・そんな時に便利に利用できる「9 Free “Washed & Worn” Aged T-Shirt Effect Textures」を今回は紹介したいと思います。 まるで着古したプリントTシャツのような、剥がれやシワを再現できる素晴らしいテクスチャセットです。 詳しくは以下 テクスチャは全部で9種類用意されており、シワの寄り方やテクスチャの剥がれ方などに差が出るよう、それぞれ異なる模様になっています。Photoshopのレイヤーマスクを使ってテクスチャの部分を抜くと、作例のような剥がれたプリントに似た効果を出すことができま
ガーリーなデザイン性が魅力 ピンクカラーのSNS投稿用テンプレート「Peach Social Media Templates」
TOP > Design > ガーリーなデザイン性が魅力 ピンクカラーのSNS投稿用テンプレート「Peach Social Media Templates」 SNSで写真を日々投稿している方も多いかと思いますが、ただ写真を撮って上げるよりも加工やアレンジを施した方が魅力的に見えることも。今回はそんなシーンで活用したいSNS投稿用テンプレート「Peach Social Media Templates」を紹介したいと思います。 ピンクカラーで展開された、ガーリーなデザイン性が魅力のテンプレート集となっています。 詳しくは以下 用意されているのは、InstagramとFacebook、またPinterestなどで使用できるサイズのもの。それぞれ12パターン、テキストや写真エリアなどをアレンジできるよう、PSD形式で制作されています。写真が1枚だけでなく2枚レイアウトできるようになっていた
サイトを彩る、フリーのボタンアクションアニメーションまとめ「Floating Action Buttons: 20 Free Animations for Web Developers」
サイトを彩る、フリーのボタンアクションアニメーションまとめ「Floating Action Buttons: 20 Free Animations for Web Developers」 最早Webデザインに欠かせない存在となってきたアニメーション。デザインに動きをつけることで、より見やすく魅力的なサイトへとクオリティアップすることも可能な魅力的なツールです。今回はそんなWebアニメーションからフローティングアクションボタンのみをまとめた「Floating Action Buttons: 20 Free Animations for Web Developers」をご紹介します。 Floating Action Buttons: 20 Free Animations for Web Developers 検索窓から何かと利用シーンの多いプラスボタンのアニメーションまで、全部で20種類ものア
デザインにインパクトをあたえてくれるフリーのハーフトーンパターン70選「70+ Free Halftone Pattern Texture Resources」
TOP > Design , vector > デザインにインパクトをあたえてくれるフリーのハーフトーンパターン70選「70+ Free Halftone Pattern Texture Resources」 デザインにちょっとしたアクセントを与えてくれるパターン素材。雰囲気を出したいときや、要素を目立たせたいときなど非常に便利です。今回はそんなパターン素材の中でも、王道のハーフトーンパターンをまとめた「70+ Free Halftone Pattern Texture Resources」をご紹介します。 10 Free Detailed Vector Halftone Texture Backgrounds ヴィンテージ風やポップ風、流行の漫画っぽい加工など様々な場面で大活躍のフリーのハーフトーンパターンが、70種類以上もまとめられています。その中からおすすめの素材を3つご紹介
完結した365日アイコンプロジェクト「365cons」
毎日何かを実施していくというプロジェクトは様々なものが世界中で行われていますが、本当に毎日となると、なかなか難しく、続けるということが如何に偉大な事かを理解させられます。今日紹介するのはそんなプロジェクトの中でも365日実行しきったアイコンプロジェクト「365cons」です。 実際に2016年からスタートし、365個のアイコンが並んでいます。全てを紹介するのは難しいですが、いくつかピックアップして紹介したいと思います。 詳しくは以下 同じデザイナーが制作しているため、テイストは一貫しているものがありますが、その中でも様々な表現手法が取られています。アイコンは全てダウンロードができるようになっており、SVG、PNG形式で配布されています。 こちらはシアトルのビジュアルデザイナー「Amy Devereux」によって制作されたもので、個人的なプロジェクトのようです。公式サイトにはその他の作品も掲
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
