デザイナーのための フリーAdobe XD用UIキット20種「20 Free Adobe XD UI Kits for Web & Mobile App Designers」
デザイナーのための フリーAdobe XD用UIキット20種「20 Free Adobe XD UI Kits for Web & Mobile App Designers」 数年前まで、UIデザインはPhotoshopとSketchを中心に行われていましたが、2017年に正式リリースをしたAdode XDが着実にアップデートを重ね、新たなUIデザインツールとして頭角を表してきています。今回は、WEBやUIデザインに役立つ、Adobe XDのUIキットを20種をまとめた「20 Free Adobe XD UI Kits for Web & Mobile App Designers」をご紹介します。 Free Adobe XD Collaboration App by Edwin Delgado – Dribbble どのキットも、無料で利用できるので、チェックしておくと重宝してくれそうです
自身で一から作り上げることができるデザインチュートリアルまとめ「38 Best Design Tutorials for Learning Sketch 3」
TOP > Design > 自身で一から作り上げることができるデザインチュートリアルまとめ「38 Best Design Tutorials for Learning Sketch 3」 1つのデザインを完成させるためには、多くの素材の組み合わせが必要になってきます。フリーで配布されているものも多数ありますが、時には自分で作らなくてはいけない、オリジナル性を求められるシーンに遭遇することもあるのではないでしょうか？今回はそんな時に参考にしたい、自身で一から作り上げることができるデザインチュートリアルまとめ「38 Best Design Tutorials for Learning Sketch 3」を紹介したいと思います。 iOS Design using Sketch. Part one: iOS Navigation Bar – YouTube アイコンやイラスト、UI、アニ
フリーで使用できるpsdアイコンを集めた「Free PSD Icons: 800+ Icons for Designers」
TOP > Design > フリーで使用できるpsdアイコンを集めた「Free PSD Icons: 800+ Icons for Designers」 非常に便利なツール・アイコン。さまざまな種類が配付されており、いろいろな種類を集めている方も多いのではないでしょうか？そんな中今回紹介するのは、フリーで使用できるpsdアイコンを集めた「Free PSD Icons: 800+ Icons for Designers」です。 Line icon set on Behance 定番タイプから、個性的なテーマで展開されたものまで、いろんな種類のアイコンが紹介されています。 詳しくは以下 Dribbble – Free Space Icons by Justas Galaburda 宇宙をテーマにしたアイコン。ポップなテイストが特徴ですね。可愛らしいデザインに合わせればより魅力的な作品
HTML・PSD形式のフリーテンプレート集「20 Free HTML and PSD Templates」
TOP > Design > HTML・PSD形式のフリーテンプレート集「20 Free HTML and PSD Templates」 フリーで配布されているテンプレートを使用することで、制作コストのカットやデザインクオリティのアップなど、さまざまな利点を得ることができます。そんな中今回紹介するのは、HTML・PSD形式のフリーテンプレート集「20 Free HTML and PSD Templates」です。 Dribbble – FREEBIE PSD: Flat UI Kit by Nik Pletikos いろいろなタイプのテンプレートがまとめられており、いろいろなシーンで活用することができそうです。 詳しくは以下 Clino UI Kit PSD – Inspirational Pixels いろいろな種類の素材が揃ったUIキット。ベーシックなデザインなどで、多彩なテイ
デザイン性の高いフリーフォントの最新版まとめ「Collection of New & Free Fonts for February 2015」
TOP > Font > デザイン性の高いフリーフォントの最新版まとめ「Collection of New & Free Fonts for February 2015」 デザインが進化するのに伴い、配布されているフリーフォントもどんどんと新しいものが公開され続けています。そんな中今回紹介するのは、デザイン性の高いフリーフォントの最新版まとめ「Collection of New & Free Fonts for February 2015」です。 ONE DAY – Free Font on Behance 新しいタイプの、主流のデザインにもマッチするフォントの数々が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Rhetoric Regular on Behance キレイ目でありながら、柔らかさも持ち合わせたフォント。使い方次第
デザインにハイクオリティなテイストを フリーUIキット集「20+ Flat & Free UI Kits」
1からデザインを手がけることが多いweb制作の世界。しかし時にはコスト面や制作時間の関係でなかなかすべてに手をかけられないこともあるのではないでしょうか？そんな時に参考にしたい、フリーUIキット集「20+ Flat & Free UI Kits」を今回は紹介したいと思います。 Dribbble – Free Sketch UI Kit by Pausrr デザインにハイクオリティなテイストをプラスしながら、高品質なサイトを作り上げることができるUIキットが紹介されています。 詳しくは以下 Dribbble – Retina UI Kit • Download Link by Bradley Bussolini ブルーを基調としたフラットテイストなUIキット。いろいろなパーツが揃っているのが嬉しいですね。 Flat User Interface Kit – Free Download on
丸みを帯びたデザインが特徴のフリーアイコンセット「Essential Generic Free Icons (SVG & PNG)」
デザイン制作に便利な素材の一つとしてあげられるアイコン。種類やテイストにもさまざまな種類が存在しています。そんな中今回紹介するのは、丸みを帯びたデザインが特徴のフリーアイコンセット「Essential Generic Free Icons (SVG & PNG)」です。 ぽってりとした質感が印象的な、かわいらしい雰囲気のアイコンが100個セットでダウンロードできるようになっています。 詳しくは以下 種類としては、定番のファイルや矢印、ダウンロード、チェックマークなどのアイコンがしっかりと揃っており、デザイン的にはベーシックな中にも個性を感じさせますが、いろいろなデザインに使用できそうです。また100種という利用しやすい数、SVG・PNGという多彩な媒体に対応できる形式などがしっかりと押さえられているもの特徴です。 すでに定番アイコンを持っているという方も、ちょっと変化を付けたデザインアイコ
定番として使用できるアイコンが揃った「274 Vector Line Icons for free」
非常にたくさんの種類がフリーで配布されているアイコン。常に新しいものをチェックされているという方も多いのではないでしょうか？そんな中今回紹介するのは、定番として使用できるアイコンが揃った「274 Vector Line Icons for free」です。 アイコンを使う頻度の高い方は是非ストックしておきたい、ベーシックなタイプのアイコンが274個セットでダウンロードできるようになっています。 詳しくは以下 ルーペやソーシャル、メールやペンなどのBASIC、いろいろな表情のEMOTION、天気のWETHER、さまざまなデバイスやマルチメディアをアイコン化したDEVICES、いろいろな形の矢印が揃ったARROWS、ショップカートやクレジットなどECサイトに最適なFINANCEといったようにカテゴリに分類され収録されているので使いやすく、ラインアイコンというシンプルな描写がどんなデザインにもマ
iOS7のガイドラインにそって作成された300個のフリーアイコンセット「RetinaIcon 300 Free Icons」
フラットテイストのデザインが採用されたiOS7。そのデザインに合うように、webサイトやアプリケーションデザインもテイストを合わせて制作することが多くなってきていると思います。今回はそんな時に便利に活用できる、iOS7のガイドラインにそって作成された300個のフリーアイコンセット「RetinaIcon 300 Free Icons」を紹介します。 300個という豊富な種類が魅力的な、アウトラインタイプのアイコンとなっています。 詳しくは以下 メールやファイル、adobeアプリケーション、天気やSNSなどの定番として利用できる種類はもちろん、フェイスやファッションアイテム、フード、宇宙、スポーツといった個性的なジャンルもアイコン化されています。種類が300個も揃っているのが嬉しいですね。非常にシンプルなので、iOS7だけでなく、他のバージョンやイメージのデザインにも当てはめやすいのではないで
ファビコン用データを簡単に作成できる「Favicon Maker」
webサイトを立ち上げる際に必要な素材の一つ、ファビコン。時には設置を忘れてしまいがちですが、サイト自体の完成度を高めるためにはとても重要な要素だと思います。今回はそんなファビコン用データを簡単に作成できる「Favicon Maker」を紹介します。 サイト内にドラック&ドロップするだけで、さまざまなサイズのファビコン用データを一気に生成してくれるとても便利なwebツールとなっています。 詳しくは以下 16×16〜256×256のpngデータ、HTMLデータ、icoデータなどがセットで生成され、自動ダウンロードされます。作成したい画像を正方形で設定しておくことが必要ですが、サイズごとに作成する手間が省けるので、とても便利だと思います。なんといっても時間がかからないため、制作時間を極力短縮したい、けれども精度のしっかりしたものを求めているといった場合には非常に活躍してくれるのではないでしょう
アウトラインデザインのフリーアイコンセットまとめ「1000+ Free Outline Stroke Icons For Designers」
TOP > Design > アウトラインデザインのフリーアイコンセットまとめ「1000+ Free Outline Stroke Icons For Designers」 一口にアイコンといっても、フラットタイプや立体感のあるリアルなタイプなど、いろいろなテイストのものが存在していますが、今回紹介するのは、アウトラインデザインのフリーアイコンセットまとめ「1000+ Free Outline Stroke Icons For Designers」です。 （Dribbble – Free Icon Set by Catalin Fertu） ラインで描き出されたアイコンセット、いろいろな種類が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Dribbble – ilepixeli icons by Piotr Makarewicz
web・スマートフォンアプリ設計に役立つ ワイヤーフレームUIキット「18 Free UI and Wireframe Kits」
TOP > Design > web・スマートフォンアプリ設計に役立つ ワイヤーフレームUIキット「18 Free UI and Wireframe Kits」 デザイン制作を行う際にはまず、全体の設計を行うためにワイヤーフレームを使って構成を考えることが多いと思いますが、本物のイメージにより近づけるため、また提案としてクライアントに提出するために、より現物に近いものをできれば作っておきたいもの。そんな時に役立つワイヤーフレームUIキット「18 Free UI and Wireframe Kits」を今回は紹介したいと思います。 webやスマートフォンアプリの設計をスムーズに進めることができそうな、制度の高いワイヤーフレームが揃っています。 詳しくは以下 Dribbble – A_better_look.jpg by Chris Bannister 定番のレイアウトのwebサイト制
シンプルなデザインが魅力のシングルページワイヤーフレーム「One page website wireframes」
TOP > Design > シンプルなデザインが魅力のシングルページワイヤーフレーム「One page website wireframes」 webサイトのレイアウトの中で、サイト全体にワイド感を出したい時、主流のデザインに仕上げたい時などによく取り入れられるシングルページレイアウト。一から構築しようと思うと、デザインのセンスはもちろん、制作 する時間も必要になってきます。そんな時に活用したい、シングルページワイヤーフレーム「One page website wireframes」を今回は紹介したいと思います。 シンプルなデザインが魅力のワイヤーフレームに、いろいろな要素がセットになっています。 詳しくは以下 基本的なwebサイトのレイアウトはもちろん、スクロールした際のコンテンツ部分のデザインとして、ボックスタイプのレイアウトやアイコン＋テキスト、またメールフォーム、フッター
フラットデザインの制作に活用したい PSD UIキット「15 Latest PSD Flat UI Kits for Designers」
TOP > Design > フラットデザインの制作に活用したい PSD UIキット「15 Latest PSD Flat UI Kits for Designers」 現在主流のフラットデザイン。シンプルなデザインが特徴ですが、これまでに制作したことがない方にとっては、コツをつかむまでに時間を要することもあるのでは？今回はそんな制作シーンに活用したい、PSD UIキット「15 Latest PSD Flat UI Kits for Designers」を紹介したいと思います。 （EAMEJIA | Premium and free graphic design resources | Flat UI Kit PSD） フラットデザインテイストの、さまざまなwebデザインで利用できるUIがセットになって紹介されています。 詳しくは以下 Free Spark Flat UI Kit
パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」
TOP > javascript , WebDesign > パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」 2013年のWEBでは大きく活躍していたパララックス効果。視差効果によってもたらされる体験は、今までのWEBとはまた違った感覚を与えてくれました。今回紹介するのはそんなパララックス効果を簡単に利用できるプラグインをまとめたエントリー「7 Useful Parallax jQuery Plugins」です。 7 Useful Parallax jQuery Plugins 手前と奥にオブジェクトを設置し、遠近感を持たせて画面に奥行きをもたせるものから、スクロールによって背景と手前のオブジェクトを動かす定番のものまで様々なパララックス効果を得られるjQueryプラグインが紹介されています。今日はその中から
2013年に公開された50種のjQueryプラグイン集「50 Most Useful jQuery Plugins from 2013」
TOP > javascript , WebDesign > 2013年に公開された50種のjQueryプラグイン集「50 Most Useful jQuery Plugins from 2013」 高機能なサイトを作りたいけど、一からプログラムを組むのはちょっと…という方に向けて、今回は2013年で人気をあつめたプラグインを50種集めたエントリー「50 Most Useful jQuery Plugins from 2013」を紹介したいと思います。 Salvattore — A jQuery Masonry alternative with CSS-driven configuration レスポンシブサイトに向けたものを中心に、様々なジャンルのプラグインが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。 Jresponsive レスポン
高品質なフリーのPhotoshop素材まとめ「44 Useful Free Photoshop Files For Designers」
TOP > Photoshop > 高品質なフリーのPhotoshop素材まとめ「44 Useful Free Photoshop Files For Designers」 Photoshopは便利な画像加工ソフトですが、クオリティの高いデザインや部品を作ろうとするとどうしても時間が掛かってしまうものです。今回はそんな時に便利なPhotoshopフリー素材のまとめ「44 Useful Free Photoshop Files For Designers」を紹介したいと思います。 Stylish Ribbons PSD | PixelsDaily デザインの骨組みとなるUIから細かなアイコン群まで、数多くの素材まとめられています。中でも気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 iPhone 5 Psd Landscape Mockup | Psd
CSSで実現させるクロスブラウザ対応のドロップシャドウテクニック「Cross-browser drop shadows using pure CSS」
TOP > WebDesign , WebService > CSSで実現させるクロスブラウザ対応のドロップシャドウテクニック「Cross-browser drop shadows using pure CSS」 WEBデザインをよりリッチにそして作り込んでいる感を与えてくれるドロップシャドウ。ドロップシャドウをつける方法は沢山ありますが、様々なブラウザで同じような見せ方をするためには画像を作成したり、背景が複雑な場合は透過PNGをIEでもよみこませるようにして、背景にしたりと色々と面倒です。今日紹介するのはCSSのみでクロスブラウザに対応したドロップシャドウを作るテクニック「Cross-browser drop shadows using pure CSS」を紹介したいと思います。 上記が、各ブラウザでのドロップシャドウの見せ方のサンプルとなります。色の濃さなど細かなところは違う
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
