TOP  >  js

Tag : js

2018年09月16日

スワイプでBefore/Afterを表現するスライダー「Beer Slider」

WEB上では限定的な使い方にはなってしまいますが、フィルターのON/OFF・背景のモノクロとカラー、化粧の有り無しなど、全く同じもので異なる状況を比べるというときに便利なのが、今回紹介するスワイプでBefore/Afterを表現するスライダー「Beer Slider」です。

beerslider-intro-752x471

上記のように左右で写真が表示されて、スワイプまたはスライドで写真の表示領域を切り替えることが可能です。

詳しくは以下

(続きを読む…)

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

サイトを彩る、フリーのボタンアクションアニメーションまとめ「Floating Action Buttons: 20 Free Animations for Web Developers」

最早Webデザインに欠かせない存在となってきたアニメーション。デザインに動きをつけることで、より見やすく魅力的なサイトへとクオリティアップすることも可能な魅力的なツールです。今回はそんなWebアニメーションからフローティングアクションボタンのみをまとめた「Floating Action Buttons: 20 Free Animations for Web Developers」をご紹介します。

Floating Action Buttons0507_00
Floating Action Buttons: 20 Free Animations for Web Developers

検索窓から何かと利用シーンの多いプラスボタンのアニメーションまで、全部で20種類ものアニメーションが集められています。その中から数点ピックアップしてご紹介しますのでご覧下さい。

詳しくは以下
(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2017年03月22日

クリエイティブなマウスオーバーアニメーション「Stack Motion Hover Effects」

Webデザインに欠かせない様々なエフェクトやアニメーション。使い方次第でWebサイトを魅力的なものに仕上げてくれますが、今回紹介するのは、クリエイティブなマウスオーバーアニメーション「Stack Motion Hover Effects」です。

StackMotionHoverEffects_800x600

全部で30種類の立体的なマウスオーバーアニメーションがサンプルとして上がっており、サイトの雰囲気や印象に併せて選択することが可能です。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2017年01月13日

一つのオブジェクトをミラーリングして表現できるライブラリ「Mirror Effect」

WEB制作ではスプリットスクリーンなどが極端な例ですが、中央線を軸に左右を大胆に振り分けて使う手法が流行の一つになっていますが、今日紹介するのは、異なるものではなく、一つのオブジェクトをミラーリングして表現できるライブラリ「Mirror Effect」です。

MirrorEffect_03-1
Mirror Effect | Demo 3 | Codrops

単純に全く同じものを出現させることもできますし、上記のように背景を切り分けて表示することもできます。いくつかのパターンが公開されていましたので以下からご覧ください。

詳しくは以下

(続きを読む…)

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

HTML、CSS、JSが同時に編集できるシンプルなオンラインエディタ「playcode.io 」

フロントエンドエンジニアの多くの方は、自分が利用するエディタというのを決めているとは思いますが、緊急の時だったり、どうしても自分のPCが手元に無い環境でコードを書かなくてはいけないなんて事も極稀ではありますがあると思います。今回紹介するのはそんな、もしもの時のためのHTML、CSS、JSが同時に編集できるシンプルなオンラインエディタ「playcode.io」です。

playcode01

この「playcode.io」非常にシンプルなツールで順番に左からコントロールパネル、HTML・CSS・Javascript、HTMLプレビューと並んでおり、結果を見ながらコーディングすることが可能です。

詳しくは以下

(続きを読む…)

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

サイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」

WEBサイトのクリエイティブのクオリティはデザインは然ることながら、どんな動きをさせるかというところでも、大きく影響がありますが、今日紹介するのはサイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」です。

RevealerEffect_800x600

「Block Reveal Effects」ではまず、はテキストや写真の出現エリアに色ベタのエリアが出現し、それがズレながら、本来描画されるオブジェクトに変わっていくというものです。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:58  |  
Category: WebService   
このエントリーをはてなブックマークに追加
1234...10...

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

2016年01月14日

種類豊富に揃うフリーアイコンセットがまとめられた「1100+ Free UI Icons for Web, iOS and Android UX Design」

アイコンは同じテーマやテイストでセットになって配布されていることが多く、シリーズで統一性をもたせられるのも嬉しいところ。そんな中今回紹介するのは、種類豊富に揃うフリーアイコンセットがまとめられた「1100+ Free UI Icons for Web, iOS and Android UX Design」です。

icon0114_3
Image Editing Icons – EpicPxls freebie

非常に多彩なテーマのアイコンセットがフリーでダウンロードできるようになっています。気になったものをピックアップしましたので、下記より御覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2015年08月09日

フリーで利用できる いろいろな種類が揃ったリソース集「Fresh Free Graphic Design Resources for Designers」

フリー素材には種類がいろいろ存在していますが、数が膨大すぎてどれを選んで良いのか迷ってしまうこと、意外に多いのではないでしょうか?今回はそんなときに参考にしたい、いろいろな種類が揃ったリソース集「Fresh Free Graphic Design Resources for Designers」を紹介したいと思います。

freebie0809_1
Free PSD Goodies and Mockups for Designers: 7 FREE FRESH HANDMADE PATTERNS IN VECTOR

フリーで利用できる素材が集められており、さまざまな場面で活躍してくれそうです。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:19  |  
Category: Design   
2015年10月12日

デザイン性の高いUIデザインを100日紹介するサイト「100 Days UI」

デザインベースを作り上げるのに必要なUI設計。またその先の設計に基づいたデザイン性のあるクリエイティブも重要となってきます。今回はそんなシーンで参考にしたい、デザイン性の高いUIデザインを100日紹介するサイト「100 Days UI」を紹介したいと思います。

dailyui

いろいろな種類のデザインUIがピックアップされリストギャラリーとなり紹介されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2011年01月25日

サインアップ画面デザインのまとめ「Showcase of 40 Pricing Tables and Signup Pages」

オンラインの有料サービス登録時に出現するサインアップ画面。普段何気なく使用していますが、内容や値段等の分かりやすさがとても重要になってきます。そこで今回紹介するのは、サインアップのwebページデザインまとめ「Showcase of 40 Pricing Tables and Signup Pages」です。


Eleven2 – Sign Up

プライスやプラン、その内容などをデザイン性を保ちながら明確に表現した例が多数収録されています。下記にいくつかピックアップしましたので、ご覧下さい。

(続きを読む…)

続きを読む
posted 11:51  |  
Category: Design   
2018年05月22日

動画で紹介する分かりやすいIllustratorチュートリアル「30 Free Adobe Illustrator Video Tutorials On Web Design」

Illustratorは様々な機能を備えた、デザイナーにとって必要不可欠な万能ツールです。イラストからWebサイトの制作まで幅広く活用できるので、卒なく使いこなしたいもの。そんな中今回は、動画で紹介する分かりやすいIllustratorチュートリアル「30 Free Adobe Illustrator Video Tutorials On Web Design」の紹介です。

illustrator_tutorial01
[Web Design] Site Flat UI Design – Food/Cafeteria Website UI Illustrator Walkthrough/Tutorial – YouTube

様々な操作方法が動画で紹介されているので、初心者の方も安心して参考にできます。

詳しくは以下

(続きを読む…)

続きを読む
2018年03月28日

世界のさまざまな人々の文化を表現した30種のフリーアイコン「 Diversity Avatars: 30 Free Icons」

アイコンは様々なシーンで役に立つアイテムです。文字や写真ではなくアイコンで表現することでイメージも随分変わるもの。そんな中今回は、世界のさまざまな人々の文化を表現した30種のフリーアイコン「 Diversity Avatars: 30 Free Icons」の紹介です。

avatar_icon01

世界各国の文化の象徴である衣装をまとったアバターアイコンのセットです。

詳しくは以下

(続きを読む…)

続きを読む
2015年06月16日

宇宙をテーマにしたフリーアイコンセット「Free Space Icon Set」

デザインをわかりやすくしてくれる役目をすることが多いアイコン。種類やデザインは非常にさまざまなものが配布されています。そんな中今回紹介するのは、宇宙をテーマにしたフリーアイコンセット「Free Space Icon Set」です。

space1

幻想的な世界観が特徴の宇宙を、ポップなテイストのアイコンでシリーズ化。かわいらしいデザインが特徴のアイコンセットとなっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2007年10月16日

被ブックマーク数を表示+ランキング生成プラグイン「SBM Popular Entry」

はてなブックマークを始めポータル系を中心にソーシャルブックマークサービスが運営されていて、効果的に利用されている方は記事の周辺に下記のようなボタンを設置して、人気の目安だったり、ブックマークを促してアクセス数アップにと利用されていますが、今回はそんなーシャルブックマークボタンを簡単に設置してくれるプラグイン「SBM Popular Entry」の導入から利用方法までを紹介したいと思います。

こちらのプラグインは上記のようにブックマーク数を表示するだけでは無く、ブックマーク数を基準としたランキングも生成してくれて、コード一行追加するだけで表示できるようになっています。

ソーシャルブックマークボタンを設置してみたいけど面倒だ、またはソースをいじる自信が無いと言う方にはオススメのプラグインです。ちなみにWordpress2.3でも問題なく動作していますが、現在Yahoo!ブックマークで不具合が出ているようです。

導入方法は以下
(続きを読む…)

続きを読む
posted 11:23  |  
Category: plugin , WordPress   
2013年08月22日

Webサイト・モバイルのUIに便利なデザインセットのまとめ「45 Fresh Web And Mobile UI Kits With PSD Files For Designer」

Webサイトやモバイルサービスの開発において、UIは品質と統一感を求められる重要なもの。0から作ることもできるけれど高品質なデザインセットがあれば、迅速かつ効率的に開発を進めることができるのではないでしょうか。今回はそんなシーンに是非オススメのUIデザインセットのまとめ「45 Fresh Web And Mobile UI Kits With PSD Files For Designer」を紹介したいと思います。

ui_1
45 Fresh Web And Mobile UI Kits With PSD Files For Designer | Free and Useful Online Resources for Designers and Developers

iPhoneやメトロデザインなものまで、さまざまなテーマにそって作られたUIデザインが多数まとめられています。中でも気になったものをピックアップしましたので、以下よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:30  |  
Category: Design   
tag: 
2007年11月29日

【FreeFont】デザイナー向けのフリーフォントポータル「Fawnt」

デザインの印象を大きく決定する要素の一つとして書体、フォントが上げられる。直線的でカクカクしている書体は堅いとか信頼感があるイメージをあたえ、逆に曲線的な書体は柔らかく、遊びのある印象を与えます。ビジュアルの上に重ねる場合はそのビジュアルと書体とのマッチングが重要になってきます。

デザイナー向けのフリーフォントポータル「Fawnt」

今日紹介する「Fawnt」は柔らかい書体から堅い書体までクオリティの高いフリーフォントが集められているフリーフォントポータルサイトです。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:21  |  
Category: Design , Font   
tag: Design Font

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る