TOP  >  js

Tag : js

2016年05月16日

SVGのボタンに様々なエフェクトが加えることができる「Distorted Button Effects」

WEBサイトのクオリティアップに重要なのが、細かなエフェクトやアニメーションだったりしますが、今回紹介するのはSVGのボタンに様々なエフェクトが加えることができる「Distorted Button Effects」です。

DistortedButtonEffects_800x600

ボタンをクリックすることででシンプルなエフェクトから、ボタンを歪ませたり、ボタン自体に波紋を走らせたりと今までには無い、ユニークな表現が可能となっています。

詳しくは以下

(さらに…)

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

様々なリッチアニメーションアラートを簡単に実装できる「SweetAlert2」

WEBでエラーを始め、様々な注意を促すアラート。標準でも用意されており、簡単に実装は可能ですが、今回紹介するのは、様々なリッチアニメーションアラートを簡単に実装できる「SweetAlert2」です。

alart01

「SweetAlert2」はほぼ標準のアラートと同じような書き方でアニメーション付きのアラートを実装可能です。

詳しくは以下

(さらに…)

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

WEBフローチャートを簡単に制作できる素材キット「Web Layout Flowcharts」

WEBサイトを制作する上で、ワイヤーフレームを書いてWEB全体の構成イメージやユーザーの流れなどを見せた上で実制作に入るという方も多いと思いますが、今回紹介するのはWEBフローチャートを簡単に制作できる素材キット「Web Layout Flowcharts」です。

webwyre01

詳細のワイヤーフレームまでは難しいですが、大枠のサイトの構成、流れなどは把握できるものが簡単に製作できます。

詳しくは以下

(さらに…)

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

各要素ごとのデザインから各コードまで参照できるデザイン集「CodePen Design Patterns」

開発する上で重要なのが各種要素の動きや挙動、見た目だけではなくて、動きもクオリティに大きく関わってきます。今日紹介するのは各要素ごとのデザインサンプル・HTML・CSS・JSのコードまで参照することができるデザイン集「CodePen Design Patterns」です。

codepen

アコーディオン・メニューアイコン、タブ、ドロップメニュー、ローディングといった、WEBサイトのインターフェイスを構成する上で重要な要素ごとにまとめられています。

詳しくは以下

(さらに…)

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

軽量でクリエイティブなツールチップjs「POPPER.JS」

補足やアクセントなど色々なシーンで使えるツールチップ。今回紹介するのは様々な動きの制御が簡単にできる、軽量でクリエイティブなツールチップjs「POPPER.JS」です。

popper01

javascript自体は3.5KBと非常に軽量で、実装方法もjavascriptに普段触れている人であれば簡単に制御が可能です。

詳しくは以下

(さらに…)

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

階層表現が可能なインタラクティブなフロアマップ「Interactive Mall Map」

国内でも商業施設の中でも重要な役割を担うフロアマップ。どうわかりやすく直感的に見せるかというのは商業施設においては一つの課題となっていますが、今日紹介するのは、階層表現が可能なインタラクティブなフロアマップ「Interactive Mall Map」です。

InteractiveMallMap_800x600

こちらのフロアマップは各階層ごとに積み重なっているビューから始まり、各階層ごとに詳しく見ていけるようになっています。

詳しくは以下

(さらに…)

続きを読む
posted 10:46  |  
Category: javascript , WebDesign   
このエントリーをはてなブックマークに追加

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

2017年05月15日

スマートフォンから閲覧する為に最適化されたフォトスライダー「SmartPhoto.js」

スマートフォンの幅広い普及によって、UIや動作周りもスマートフォンに最適化されるようになってきました。そんな中今回ご紹介するのは、スマートフォン向けのフォトスライダーの作り方を紹介する「SmartPhoto.js」です。

SmartPhoto.js_01

スマートフォンで大きな写真を楽しめるフォトスライダーで、横スライドタイプのスマートフォンからの閲覧に最適化したギャラリーを簡単に作ることが出来ます。

詳しくは以下
(さらに…)

続きを読む
2011年10月07日

ダークな色合いのwebサイトデザイン集「Creative and Inspiring Dark Web Designs」

多様化するwebデザイン。常に新しいデザインにアンテナを立てておくことで、自らのクリエイティブ性を高めることができるのではないでしょうか。そこで今回は、ダークな色合いを利用したwebデザインを集めた「Creative and Inspiring Dark Web Designs」を紹介したいと思います。


Blue Collar

イラストメインのデザインや、写真を印象的に利用したデザインなど、さまざまなバリエーションで豊富に紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
2015年07月12日

テキストをグラフィカルかつより魅力的に見せるチュートリアルまとめ「50 Best Text Effect Tutorials」

デザイン上で非常に重要な役割を持つテキスト。内容やフォント選びも重要ですが、イメージに合った加工が必要な場合もでてくると思います。しかしなかなかイメージどおりの表現をどうやって作ったらよいか?技術的な面で苦労してしまうことも多いもの。今回はそんな時参考にしたいチュートリアルまとめ「50 Best Text Effect Tutorials」を紹介したいと思います。

texteffect0713_1
Create a Glowing Liquid Text with Water Splash Effect in Photoshop – PSD Vault

テキストをグラフィカルかつより魅力的に見せてくれる、ハイセンスなチュートリアルがまとめられています。

詳しくは以下

(さらに…)

続きを読む
posted 02:03  |  
Category: Design   
2012年01月11日

クオリティの高いフリーフォントまとめ「New High-Quality Free Fonts」

オリジナリティを追求したデザイン制作に欠かせないフリーフォント。クオリティの高さを追求し、さらにあまり利用されていないフォントを探すというのは大変な作業だと思います。そこで今回は、最近発表されたフリーフォントの中からクオリティの高いフォントを集めた「New High-Quality Free Fonts」を紹介したいと思います。


CASSANNET

シンプルなフォントから存在感の強いフォントまで、さまざまなフォントが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 11:49  |  
Category: Font   
2011年03月09日

インクやペイントで描く photoshopブラシまとめ「Collection Of 600+ Free Ink & Paint Photoshop Brushes」

表現に多彩な幅を生み出すブラシツールですが、通常デザインソフトに付属されているブラシだけでは、細かい表現ができないことも多いと思います。そこで今回紹介するのは、優れたインク表現やペイント表現を描くことができるphotoshopブラシまとめ「Collection Of 600+ Free Ink & Paint Photoshop Brushes」です。


Ink and Paint (39 brushes)

ダークでリアルなブラシから、水彩画をイメージさせるブラシまで、約300種類のブラシが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:51  |  
Category: Design , Photoshop   
2015年10月16日

最新のフリーモックアップを26種集めた「New Free PSD Mockup Templates (26 New Mock-Ups)」

製作中のデザインが実際にリアルに展開された時、どんなイメージになるのか確認する時に使用されるモックアップはとても便利な存在。そんな中今回は、最新のフリーモックアップを26種集めた「New Free PSD Mockup Templates (26 New Mock-Ups)」を紹介したいと思います。

mockup1016_2
ShowItBetter – photo mockups | Free MacBook Pro photo mockup

さまざまな使用シーンを想定した、いろんな種類のモックアップが厳選され紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 01:52  |  
Category: Design   
2013年09月29日

普段の制作でも役立つイラストレーターチュートリアル「20 Useful Adobe Illustrator Tutorials and Resources」

多くのクリエイターに利用されているソフトウェアAdobe Illustrator。レイアウトするだけではなく高度なグラフィック表現も可能ですが、奥が深すぎてその機能を活かしきれていないという方も多いはず。今日紹介するのは質感再現から基礎まで学べるイラストレーターチュートリアル「20 Useful Adobe Illustrator Tutorials and Resources」です。

illustrator_tutorials_2
How to Create a Beautiful Mixed Media Illustration

様々なテイストのグラフィックのチュートリアルが紹介されていますが、今日はその中から幾つかピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 02:29  |  
Category: Design , vector   
2010年01月11日

プレゼン資料のインスピレーション集「Note & Point」

企画職ではなくても、デザイナーなら制作を避けては通れないプレゼン資料や企画書。パワーポイントで実用的にというのも有りですが、デザイナーならプレゼン資料や企画書もこだわりたいもの。今回紹介するのはそんなプレゼン資料のデザインを集めた「Note & Point」を紹介したいと思います。

notepoin_01

グラフィカルなものから、ちょっと固めなものまで、様々な内容のプレゼン資料が公開されています。プレゼン資料はすべて、パワーポイント形式、またはPDFでダウンロードできるようになっており、表紙だけではなく、中身も見る事ができます。数多くの資料が公開されていますが、今回は評価が高いプレゼン資料のなかからいくつか紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 10:42  |  
Category: Design   
tag: Design
2017年05月08日

スタイリッシュな名刺デザインテンプレートまとめ「27 New Professional Business Card PSD Templates」

社会人になれば多くの人が持つことになる名刺は、少しでも個性的な名刺で自分や会社をアピールしたいところ。特にクリエイティブな業界の方なら尚更スタイリッシュに決めたいものです。そんな中今回ご紹介する「27 New Professional Business Card PSD Templates」では、デザイン性の高い名刺デザインが多くまとめられています。

名刺オレンジ
Business Card by jpixel55 | GraphicRiver

編集可能な形式になっているので自分好みにカスタマイズもできる、とても便利な名刺デザインテンプレートコレクションとなっています。

詳しくは以下

(さらに…)

続きを読む
posted 06:25  |  
Category: Design , Tool   
2014年02月16日

フォント表現の可能性を広げるjQueryプラグイン 「20 jQuery Typography Plugins」

webサイトをより魅力的に演出するために利用されることの多いjQuery。プラグインの種類にもさまざまなタイプがありますが、今回紹介するのはフォント表現の可能性を広げるjQueryプラグイン 「20 jQuery Typography Plugins」です。

jqfont0
Textillate.js

独特の動きや文字組・文字列を表現できるクリエイティブなフォントのjQueryプラグインがまとめられています。

詳しくは以下

(さらに…)

続きを読む
posted 01:59  |  
Category: plugin   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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