TOP  >  スライダー

Tag : スライダー

2018年09月16日

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

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

beerslider-intro-752x471

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

詳しくは以下

(続きを読む…)

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

レスポンシブ対応したフリーWordPressスライダープラグイン「Top 10 Free Responsive WordPress Slider Plugins」

Webサイトを閲覧しているとよく見かけるスライダーですが、様々な仕様があり、用途や機能に合わせて構築してく必要があります。そんなシーンで役立ってくれるのが今回紹介する、レスポンシブ対応したフリーWordPressスライダープラグイン「Top 10 Free Responsive WordPress Slider Plugins」です。

sliders00
Slider by Soliloquy – Responsive Image Slider for WordPress — WordPress Plugins

無料でダウンロードできる10種類のスライダープラグインが揃っています。

詳しくは以下

(続きを読む…)

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

CSSだけで使えるスライダー10選「10 Free Open Source Carousel Sliders Built With Pure CSS」

情報を詰め込んだWEBサイト、どれもこれも見せたいのですが、そのためには情報を有効的に見せる事が重要になってきます。今回紹介するのは情報を魅力的に見せることができる、CSSだけで表現されたスライダーをまとめたエントリー「10 Free Open Source Carousel Sliders Built With Pure CSS」です。

OSCSliders01
Pure-CSS Netflix Show Carousel

スライダーとひとことで言っても様々な表現があります。今回は集められているスライダーの中でも気になったものをピックアップしてみました。

詳しくは以下

(続きを読む…)

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

WEBGLで実現するリッチアニメーションスライダー「WebGL image slider transition」

WEBのコンテンツの見せ方の定番中の定番のギミック、スライダー。数多くのスライダーがリリースされており、どれも目を引くための工夫が施されていますが、今日紹介するのはWEBGLで実現するリッチアニメーションスライダー「WebGL image slider transition」です。

sl01

このスライダーはjavascriptとWebGLの技術を使い、画像が崩壊し、再構築しながら画像を切り替わるという今までのWEBでは動画レベルでしか表現できなったアクションが実装されています。

詳しくは以下

(続きを読む…)

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

高機能で扱いやすい フリーjQueryスライダー「Top 30 Fabulous jQuery Sliders for Free」

jQueryによって誰でも簡単にwebサイトに動きをつけることができるようになりました。ですがなかなか意図通りの動きをするプラグインは少ないもの。そんな中今回紹介するのは、高機能で扱いやすいjQueryスライダーを集めた「Top 30 Fabulous jQuery Sliders for Free」です。

slider_0
Top 30 Fabulous jQuery Sliders for Free | InstantShift

変わった動きをするスライダー、シンプルなものまで、たくさんのスライダーが紹介されています。その中でも気になるものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:23  |  
Category: plugin   
このエントリーをはてなブックマークに追加
2012年07月05日

サイトをより効果的に表現できる jQueryスライダーのプラグインまとめ「90 Awesome jQuery Slider Plugins」

動的なサイトを手軽に構築できる jQueryを、サイト構築に利用している方も多いと思います。そんな中今回紹介するのが、サイトをより効果的に表現できる jQueryスライダーのプラグインまとめ「90 Awesome jQuery Slider Plugins」です。


JavaScript – jQuery Banner Rotator / Slideshow | CodeCanyon

インデックスや画面スライドなど、多彩な機能を表現できるプラグインが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

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

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

2011年05月03日

webサイトのボタンデザインに重要な7つの要素「Common elements used in interface button design」

webサイトを制作する際、全体的なデザインの決定も重要ですが、サイト内を自由に動くための動線をしっかりと設計することが、ユーザーを引きつける為にも必要ではないでしょうか?そこで今回は、それぞれのページのドアとなるボタンのデザインに重要な7つの要素を解説した「Common elements used in interface button design」を紹介したいと思います。


Dribbble – Upload button by kailoon

的確な解説、さらに実制作に役立つチュートリアも紹介されているので、すぐにボタン作りに活かすことができそうです。

詳しくは以下

(続きを読む…)

続きを読む
2011年02月09日

WEBデザイナー、開発者が使えるWEBツール集「8 Useful Online Tools for Web Designers and Developers」

多くの業務が必要となるWEB構築、できることなら少しでも時間を短縮したい物。今日はWEBを構築する上で便利なツールを集めたエントリー「8 Useful Online Tools for Web Designers and Developers」を紹介したいと思います。


0 to 255

設計の部分から、デザインの部分、パーツの生成など様々なオンラインツールがまとめられていました。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 01:38  |  
Category: WebService   
2017年03月16日

定番から個性的なデザインまで!シンプルで使いやすいフリーアイコンまとめ

何かとデザインに必要になってくるアイコン。直感的にユーザーに説明することができ、今や欠かせない存在となっています。今回はそんなアイコンの中でも、定番から個性的なものまでをまとめた「A New Collection Of Free Icons For Designers」をご紹介したいと思います。

top
Designbeep

シンプルなテイストのアイコンは馴染みもよく、バリエーションとしてストックしておきたい種類がずらり。気になったアイコンを幾つかピックアップしてご紹介しますので、以下よりご覧下さい。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design , vector   
2015年11月22日

活用することでデザインを魅力的に魅せられるフリーデザイン素材まとめ「38 Freebies & Goodies For Web Designers」

フリーでダウンロードできる素材は非常に多く、常にいろいろなタイプをチェックされている方も多いと思います。そんな中今回紹介するのは、活用することでデザインを魅力的に魅せられるフリーデザイン素材まとめ「38 Freebies & Goodies For Web Designers」です。

designers2
24 Flat Mockups Free | Free PSDs & Sketch App Resources for Designers – uipixels

どれもデザイン性の高い、フリーでダウンロードできる素材がピックアップされまとめられています。気になったものをピックアップしましたので、下記より御覧ください。

詳しくは以下

(続きを読む…)

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

フリーダウンロード可能なデザイン性の高いフォントまとめ「16 New Free Fonts for Designers」

デザイン制作をする上で非常に重要な要素となってくるフォントは、選定からがとても大切だと思います。今回はそんな選定時にリストとして加えたい、デザイン性の高いフォントまとめ「16 New Free Fonts for Designers」を紹介したいと思います。

font1020_2
RACER: Free Font on Behance

どれもクリエイティブなテイストが嬉しい、フリーダウンロード可能なフォントが揃っています。気になったものをピックアップしましたので、下記よりご覧下さい。

詳しくは以下

(続きを読む…)

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

世界の有名ランドマークをアイコン化した「12 Free Icons」

世界には有名なランドマークが多数存在しており、その中でもひときわ有名なものは国を象徴する存在として、多くの人に知られています。今回はそんな世界の有名ランドマークをアイコン化した「12 Free Icons」を紹介したいと思います。

landmark

おなじみのランドマーク12種が集結。アイコン化されたものがダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2017年04月29日

デベロッパーのためのフリーweb開発ソースまとめ「Fresh Resource for Web Developers – April 2017」

Web技術は日々めまぐるしく進化しており、一日経てばどこかで新しいものが生まれている世界。忙しい毎日の中で新しいものを追いインプットし続けることはとても大変ですが、そんな時だからこそ是非参考にしたいまとめ「Fresh Resource for Web Developers – April 2017」を今回は紹介したいと思います。

top 11.45.27
mini.css – Minimal, responsive, style-agnostic CSS framework

役に立つアプリケーションからデザインパターンの参考まで、非常に便利なツールの数々が紹介されています。いくつか気になったものをピックアップいたしましたので、下記よりご覧下さい。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: plugin , Tool   
2013年06月09日

さまざまな羽のビジュアルを美しく表現できるブラシセットまとめ「21 Sets Of Free Photoshop Wing Brushes」

鳥や天使などに共通しているのが、背中に持っている羽。デザイン素材としてリアルかつきれいに表現するのには、高い制作クオリティが求められます。今回はそんな時に是非利用したい、さまざまな羽のビジュアルを美しく表現できるブラシセットまとめ「21 Sets Of Free Photoshop Wing Brushes」を紹介したいと思います。

wing1
feathered wing brushes by ~dark-dragon-stock on deviantART

本物を思わせる質感のものから、平面でイメージ的に表現されたものまで、いろいろなタイプの羽ブラシが公開されています。気になったものをピックアップしてみましたので下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:42  |  
Category: Photoshop   
2007年11月08日

【FreeFont】商用利用可なティーン風手書き文字を無料配布「ふい字置き場」

なかなか普段使わないけど持っていると役に立つ手書き風フォントを配布してくれているのが今回紹介する「ふい字置き場」です。下記のようなゆるーい感じの手書き風フォントが無料でダウンロードできるようになっています。

配布されているのは全部で「ふい字」「まきばフォント」「おひさまフォント 」の3つです。下記にサンプルを貼っておきます。

■ふい字

ふい字

【収録文字】
ひらがな/全角・半角カタカナ/全角・半角数字/全角・半角アルファベット/ギリシャ文字/ロシア文字/各種記号/シフトJIS第一水準漢字/シフトJIS第二水準漢字/絵文字

■まきばフォント

まきばフォント

【収録文字】
ひらがな/全角・半角カタカナ/全角・半角数字/全角・半角アルファベット/ギリシャ文字(小文字だけ)/各種記号/絵文字/シフトJIS第一水準漢字/シフトJIS第二水準漢字の、わりと使いそうな字

■おひさまフォント

おひさまフォント

【収録文字】
ひらがな/全角・半角カタカナ/全角・半角数字/全角・半角アルファベット/ギリシャ文字(小文字だけ)/各種記号/絵文字/シフトJIS第一水準漢字/シフトJIS第二水準漢字の、わりと使いそうな字

フォントはすべてttf(トゥルータイプフォント)で配布されています。ダウンロードは「ふい字置き場」から利用はリンク先の配布サイト様の利用規約に従ってください。

ふい字置き場

続きを読む
posted 01:53  |  
Category: Design , Font   
tag: Design Font
2014年07月02日

グラフィカルな表現を可能にする写真加工チュートリアルまとめ「22 New Photo Manipulation Tutorials for Photoshop」

写真をさまざまな表情に加工できるPhotoshopは非常に便利なソフト。プロの現場でほとんどの方が利用したことがあるのではないでしょうか?そんな中今回紹介するのは、グラフィカルな表現を可能にする写真加工チュートリアルまとめ「22 New Photo Manipulation Tutorials for Photoshop」です。

manipulation1
Photoshop Tutorial: Retouching Photos in Ten Minutes or Less | Tutorials | Graphic Design Junction

Photoshopを使ってできる、多彩な加工方法を紹介した記事がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

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

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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