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...

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

2017年03月28日

30種類以上の便利な無料ブックカバーモックアップ「30+ Convenient Book Cover Mockups For Free」

デザインを見せる際に、より魅力的に見せることができる手段の一つとして、モックアップを仕様する場面が多くあります。そんな中今回は、今回は書籍の装丁デザインを手がける方におすすめのモックアップ集「30+ Convenient Book Cover Mockups For Free」を紹介します。

mockup01
Book Hard Cover Mockup Vol 4 – Graphicboat

本が置かれているビジュアルが、さまざまなシーンでまとめてられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Tool   
2010年02月02日

ポートフォリオをデザインするためのインスピレーション集「50 Inspiring Portfolio Designs」

デザイン業に関わらず、WEBの一つの使い方として、自分達はどんなことをやっているのか?どんな事をやってきたのかを伝えるポートフォリオというものがありますが、多くの場合中身ももちろんサイト自体のクオリティも見られます。今日紹介するのはポートフォリオをデザインするためのインスピレーション集「50 Inspiring Portfolio Designs」です。

portfolios01
Notorious Design

様々なかたちのポートフォリオのデザインが集められています。今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:06  |  
Category: WebDesign   
tag: 
2008年02月04日

1000個以上のフリーCSSレイアウトテンプレートが利用できる「freelayouts」

WEBデザインのベースが欲しい、簡単なWEBページを作りたい、そんなときに便利なのが今回紹介するフリーのCSSレイアウトテンプレート集「freelayouts」こちらのサイトでは1000個以上のCSSベースのテンプレートが収録されています。

WEBフリーテンプレート

デザインは数が多いだけあってかなり豊富なので、きっと探しているイメージに近いテンプレートが見つかるかと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:44  |  
Category: WebDesign   
tag: webdesign
2013年07月07日

スタンプで押したような形が特徴のフリーフォントまとめ「Stylize Your Designs with these Free Stamped Fonts」

多数のフォントがフリーで展開されており、デザインに合わせてさまざまなバリエーションが選べるということもあり、日々重宝されている方も多いのではないでしょうか?そんな中今回紹介するのは、スタンプで押したような形が特徴のフリーフォントまとめ「Stylize Your Designs with these Free Stamped Fonts」です。

stamp2
Rubber Stamp font by Marta van Eck Designs – FontSpace

アナログテイストな質感を出したい時におすすめな、かすれたような雰囲気が特徴のスタンプフォントが多数まとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:43  |  
Category: Font   
2009年04月27日

JQueryを使ったスライド表現を集めた「10 Best jQuery Sliders」

一枚のページにたくさんの情報をまとめたい時に便利なのがスライド表現。今日紹介する「10 Best jQuery Sliders」はコンパクトで高機能なAjaxライブラリjQueryを使って実装するスライド機能を紹介するエントリーです。

jqueryslides00
loopedSlider

いくつかのスライド表現のサンプルが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:56  |  
Category: WebDesign   
2009年04月17日

CSSで作る素晴らしいナビゲーションテクニック「30 Exceptional CSS Navigation Techniques」

サイト構築には書かせないナビゲーションメニュー。頻繁に使う部分だけにデザインや使い勝手でサイトのクオリティーにも影響を与える重要な要素の一つです。今日紹介するのはCSSで作るナビゲーションのテクニックとサンプルをまとめたエントリー「30 Exceptional CSS Navigation Techniques」です。

13-09_menu_menu01
The Menu menu

様々な種類のCSSを使ったナビゲーションが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:08  |  
Category: WebDesign   
tag: CSS webdesign
2013年04月20日

webでのニュースレター申し込みを誘導できるフリーpsdデザインまとめ「32 Beautifully Designed Newsletter Subscription Form PSD」

webサービスでさまざまな情報をユーザーに提供する時に使用するニュースレターは、非常に便利なツール。より多くの人に登録を促したいもの。今回はそんな時に是非利用したい、ニュースレター申し込みを誘導できるフリーpsdデザインまとめ「32 Beautifully Designed Newsletter Subscription Form PSD」を紹介したいと思います。


Vintage Newsletter Form

どうしてもワンパターンで簡素になってしまいがちな入力フォームが魅力的にデザインされたpsd素材が多数まとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:50  |  
Category: Design , Photoshop   
2013年09月21日

アプリやモバイルサイトのためのモックアップフリーPSD「10 Free PSDs for Perspective App Mockups」

iOS7もリリースされ、さらにiPhoneも新機種がでて、今後ますます注目されそうなスマートフォンアプリですが、今日紹介するのは、アプリやモバイルサイトのためのモックアップフリーPSD「10 Free PSDs for Perspective App Mockups」です。

psds01
iGravertical Screen Layers + iOS 7 Screen Converter

こちらのエントリーでは、iOS7のUIを利用したアプリスクリーンのモックアップから、最新のiPhone5cの筐体のPSDまで、今後アプリやモバイルサイトのデザインに利用できそうなpsdがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

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

ペンで描いたような太めの手書きフォントまとめ「20 Handy Bold Script Fonts」

タイトルや注目させたい部分に利用すると効果的な手書きフォントは、鉛筆や細いペン、マジックなど、画材によってさまざまな表情が楽しめます。そんな中から今回は、ペンで描いたような太めの手書きフォントをまとめた「20 Handy Bold Script Fonts」を紹介したいと思います。


Machine Script Font | dafont.com

ロゴやタイトルとしても使いやすそうなフォントが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:04  |  
Category: WebService   
2014年08月07日

最新でピックアップされたさまざまな種類の素材をまとめた「Top 50 Free Resources for Web Designers from July 2014」

デザイン制作にはたくさんの素材が必要であり、すべてを手作りしているとどうしても時間が必要になってしまいます。今回はそんな時に参考にしたい、最新でピックアップされたさまざまな種類の素材をまとめた「Top 50 Free Resources for Web Designers from July 2014」を紹介したいと思います。

free050807_1
Andrea Galanti | WebDesign

フォントやアイコン、UIやテクスチャといった、定番の素材をピックアップし紹介しています。

詳しくは以下

(続きを読む…)

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

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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