TOP  >  WEBデザイン

Tag : WEBデザイン

2016年09月28日

WEBの表現をもっと豊かにしてくれるアニメーションまとめ「36 Brilliant User Interface Animations」

WEB上のユーザーインターフェイスの中で行われるちょっとしたアニメーションに驚きと感動をするということがたまにありますが、インターフェイスに即したアニメーションはWEBをより良いものにしてくれます。今日紹介するのはWEBの表現をもっと豊かにしてくれるアニメーションまとめ「36 Brilliant User Interface Animations」です。

dancing_icon
Menu open / tick / close

全部で36ものアニメーションが原文ではまとめられていましたが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 08:30  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2016年09月27日

物を売るために参考になるWEBデザイン集

ECサイトからプロダクトランディングページまで物を売るためには様々なページが必要ですが、その中から決済画面、プライスページ、プロダクトページ、ストアページと大きくカテゴライズしてデザインを収集している、物を売るために参考になるWEBデザイン集を今回紹介したいと思います。

ec_web01

それぞれのカテゴリに特化して、デザインが集められており、スクリーンショットもフッターまでで取得しているため、サイト上でも全てを参照することが可能です。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: WebService   
このエントリーをはてなブックマークに追加
2016年09月18日

CSSで実現するフィルタジェネレーター「CSSFILTERS.co」

写真加工は現在様々なアプリケーションに搭載されており、もはや写真とは切手は切れない関係にありますが、今回紹介するのはWEB上でも動作する写真加工フィルタを生成できるCSSで実現するフィルタジェネレーター「CSSFILTERS.co」です。

cssfilter_01

このサービスでは、予め登録されたフィルタもしくは、パラメーターを指定して任意の画像にフィルタをかけるとと共に、WEB上で実現するためのコードも出力してくれるというものです。

詳しくは以下

(さらに…)

続きを読む
posted 11:58  |  
Category: WebDesign , WebService   
このエントリーをはてなブックマークに追加
2016年09月03日

キャンプ・アウトドアをイメージしたアイコンセット「Camping Free Line Icon Set」

キャンプ・アウトドアなどは、国内でもグランピングという新しい概念もでてきて、さらに注目を浴びているレジャーの一つですが、今回紹介するのはキャンプ・アウトドアをイメージしたアイコンセット「Camping Free Line Icon Set」です。

Camping-Free-Line-Icon-Set-prev01

方位磁石、リュック、オノやマッチなどなど、通常のWEB制作のアイコンセットには無いユニークなアイコンが集められています。

詳しくは以下

(さらに…)

続きを読む
posted 01:56  |  
Category: Design , vector , WebDesign   
このエントリーをはてなブックマークに追加
2016年08月29日

ミニマルでベクターで扱えるフリーアイコンセット「1800 Free Minimal Icons」

デザインやインターフェイスを作りこむ上で重要なアイコン。シンプルなアイコンはどんなデザインにもマッチし制作現場においては非常に重宝します。今回紹介するのはミニマルでベクターで扱えるフリーアイコンセット「1800 Free Minimal Icons」です。

free1800

制作にかなり配慮して制作されたアイコンセットのようで、普通のアイコンセットには無い細かい配慮がなされた上で配布されています。

詳しくは以下

(さらに…)

続きを読む
posted 09:30  |  
Category: Design , vector   
このエントリーをはてなブックマークに追加
2016年08月25日

【商用可】食べ物・飲み物アイコンセットの決定版「100 Colored Food & Drink Icons」

一般的なピクトグラム的なアイコンセットはよく見かけますが、特定の分野で多くのアイコンが収録されたアイコンセットはなかなか無く、合ったとしてもなかなか全てを網羅しているというものは少ないと思います。今日紹介するのは100個の食べ物をアイコン化したアイコンセット「100 Colored Food & Drink Icons」です。

100food01

野菜、魚介、チーズ、香辛料、果物などなど様々な食物をモチーフにアイコンが制作されています。収録アイコンは以下からご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 11:42  |  
Category: Design , vector   
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2017年04月07日

Photoshopで美しいフラクタルが描けるブラシセット20選「20 Beautiful Fractal Brushes for Photoshop」

デザインにちょっとしたエフェクトやニュアンスを足したい、そんな時にはイメージにぴったりの素材を探すよりも、実際に描いてしまった方が楽な場合もあります。そんな中今回ご紹介するのは、自分でテクスチャを作るための美しいフラクタルブラシセットまとめ「20 Beautiful Fractal Brushes for Photoshop」です。

003870-Fractal-Brush-Set-04-by-ekamanganese-on-DeviantArt
20 Beautiful Fractal Brushes for Photoshop

美しいニュアンス表現ができる、高品質なPhotoshopブラシがまとめて紹介されています。気になったものをピックアップしましたので下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
2014年06月05日

リアルなテイストのテクスチャやオブジェクト制作のためのチュートリアル「27 Tutorials for Creating Realistic Textures & Objects in Photoshop」

実物により近い描写はPhotoshopで制作することが可能ですが、技術や方法がわからないと非常に難しく時間がかかってしまうもの。そんな時是非参考にしたい、リアルなテイストのテクスチャやオブジェクト制作のためのチュートリアル「27 Tutorials for Creating Realistic Textures & Objects in Photoshop」を今回は紹介します。

tutorials140605_1
Create an Address Book Icon in Photoshop – Tuts+ Design & Illustration Tutorial

本物を思わせるリアルテイストなオブジェクト・テクスチャをPhotoshopで作り出す方法・手順が丁寧に紹介されています。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Photoshop   
2017年01月22日

テクスチャ画像やグラフィック表現のPhotoshopチュートリアル「20 Free Texture Photoshop Tutorials」

背景素材として活躍するテクスチャや、複雑なグラフィック表現。完成されているものも便利ですが、時にはオリジナルで作成したいこともあるのではないでしょうか。今回はそんな時に参考したい、テクスチャ画像やグラフィック表現のPhotoshopチュートリアル「20 Free Texture Photoshop Tutorials」を紹介したいと思います。

tutorial0122_2
Create a Surreal Photo Manipulation by Mixing Ice and Fire Textures – Photoshop Tutorials, Digital Art Tutorials and Showcase – PSD Vault

Photoshopを使って、いろいろなテクスチャ表現の手法が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 07:58  |  
Category: Photoshop   
2010年10月17日

写真を効果的に見せるjQueryプラグイン集「7 Awesome JQuery Photo Plugins for Developers」

様々なサイトで利用されている高機能なjavascriptライブラリjQuery。扱いやすく多くのプラグインがでていることもあり、定番のライブラリとなっていますが、今日紹介するのはそのなかでも、写真を効果的に見せるjQueryプラグイン集「7 Awesome JQuery Photo Plugins for Developers」。


2.Thumbnails Navigation Gallery with JQueryDemo

CSSとjQueryを上手く使って、写真を効果的に見せることができるプラグインがあつめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 08:42  |  
Category: WebDesign   
2008年08月03日

配色から、素材、CSSまでWEB制作者のためのデザインリソース集「21 cool webmaster resources」

今まで「ロゴデザインのリソースサイト集「105+ Logo Design Tuts And Resources」」や「様々なWEBデザインエレメントのデザイン集「Pattern Tap 」」と様々なデザインリソースを紹介しましたが、今日紹介「21 cool webmaster resources」と言うエントリーは配色からレイアウト、テクスチャからアイコン素材まで、WEBデザイン、WEB制作の為に利用できるデザインリソースを集めたまとめエントリーです。

タイトルの通り全部で21個のサイトが紹介されており、どれも、一つ一つが目的に特化したサイトを紹介しています。今日は紹介されている中から特に気になった物を紹介したいとお思います。

詳しくは以下

(さらに…)

続きを読む
posted 01:49  |  
Category: WebDesign   
2013年09月12日

思い通りの写真補正ができる Photoshopアクションとチュートリアルのまとめ「20 Free Effective Photoshop Action Tutorials and Resources」

Photosnopにはさまざまなツールが用意されていますが、その中でも”アクション”は、手軽に思い通りの写真補正ができるツールとして非常に便利な存在。今回はそんなアクションセットと写真加工のチュートリアルをまとめた「20 Free Effective Photoshop Action Tutorials and Resources」を紹介したいと思います。

action_0
actions 1 by ~allthebesthere on deviantART

ヴィンテージな古い写真を思わせる補正や、はっきりと綺麗に見せる補正まで、たくさんのアクションがまとめられています。中でも気になったものをピックアップしたので下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
2015年04月29日

美しい色合いが魅力的なポリゴン柄フリーテクスチャまとめ「35 High-Res Low Poly Background Textures For Free」

幾何学柄の中でも人気の高い、ポリゴン調のデザイン。web業界でもさまざまな場所で取り入れられていますが、いざ制作しようと思うと意外にバランスやカラー配色などが難しいもの。そんな時に参考にしたい、美しい色合いが魅力的なポリゴン柄フリーテクスチャまとめ「35 High-Res Low Poly Background Textures For Free」を今回は紹介します。

poly0501_4
Dribbble – FREE 10 low-poly polygonal textures by Lumberjacks

さまざまなカラー配色で構成されたいろんな表情のポリゴンテクスチャがまとめられています。

詳しくは以下

(さらに…)

続きを読む
posted 09:26  |  
Category: Design   
2009年09月18日

スクロール終端で出現するTOPに戻るボタン「jQuery Scroll to Top Control v1.1」

WEBはどうしてもその性質上縦に長くなってしまう傾向があり、縦にスクロールして見ていくと言うサイトも多いかと思います。よくユーザーインターフェイスをよくするためにページ下層にTOPに戻るボタンが用意されていて、読み終わった後に一瞬でTOPに戻れる仕組みを取っているサイトも多いのですが、今回紹介するのは常に表示させておくのではなく、スクロール終端で出現するTOPに戻るボタン「jQuery Scroll to Top Control v1.1」です。

topcontlol01

ユーザーがページ下部に戻ったときだけ、フェードインで登場し、逆にスクロールで上部に戻ると言った時には消えると言う仕組みになっています。

詳しくは以下

(さらに…)

続きを読む
posted 09:49  |  
Category: WebDesign   
2018年04月01日

花のモチーフが可愛らしいウェディングイメージのベクター素材「Free Floral Wedding Vector Labels」

最近では結婚式やパーティーで必要なアイテムを自分たちで作る人も多いようです。2人の個性や雰囲気に合ったものを手作りで準備するのも一つの醍醐味かもしれません。そんな中今回は、花のモチーフが可愛らしいウェディングイメージのベクター素材「Free Floral Wedding Vector Labels」をご紹介します。

FloralWedding_01

ウェディングアイテムに使える便利なベクターデータです。

詳しくは以下

(さらに…)

続きを読む
2015年12月10日

さまざまな種類のアイコンが揃った「325+ Best flat premium & free vector icons」

特にwebデザインシーンで重宝するアイコン素材には、非常にたくさんの種類やテーマのものが存在し、フリー配布されてます。そんな中今回紹介するのは、さまざまな種類のアイコンが揃った「325+ Best flat premium & free vector icons」です。

icon1211_3

描写やテーマなど、多彩な表現のアイコンセットがまとめられており、どれも魅力的で個性的なものばかり。気になったものをピックアップしましたので、下記より御覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る