TOP  >  パララックス

Tag : パララックス

2014年01月02日

パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」

2013年のWEBでは大きく活躍していたパララックス効果。視差効果によってもたらされる体験は、今までのWEBとはまた違った感覚を与えてくれました。今回紹介するのはそんなパララックス効果を簡単に利用できるプラグインをまとめたエントリー「7 Useful Parallax jQuery Plugins」です。

1
7 Useful Parallax jQuery Plugins

手前と奥にオブジェクトを設置し、遠近感を持たせて画面に奥行きをもたせるものから、スクロールによって背景と手前のオブジェクトを動かす定番のものまで様々なパララックス効果を得られるjQueryプラグインが紹介されています。今日はその中から気になったものをピックアップして紹介したいと思います。

(さらに…)

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

パララックスを実現するためのチュートリアル&リソース集「Parallax Scrolling Tutorials & Resources」

大きな話題を呼び、国内でも様々なPRサイトに実装されたパララックス(視差効果)。今までには無い体験は多くの人の注目をあつめました。今日紹介するのはパララックスを実現するためのチュートリアルやリソースをあつめた海外のチュートリアル&リソース集「Parallax Scrolling Tutorials & Resources」です。


Behind The Scenes Of Nike Better World

ソースで開示されているところや、根幹の考え方等、示されている方法は様々ですが、今回はその中から比較的分かりやすいと思うチュートリアル、リソースをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

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

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

2015年08月14日

写真表現をもっと豊かにしてくれるフリーPhotoshopアクションまとめ「Best Free Photoshop Actions」

写真に手軽に、ハイクオリティな加工を施すことができるPhotoshopアクション。高い技術を簡単に写真に導入することを可能にした、Photoshopの便利な機能の一つとなっています。今回はそんな、写真表現をもっと豊かにしてくれるフリーPhotoshopアクションまとめ「Best Free Photoshop Actions」を紹介したいと思います。

action0813_1
Lomocam – Lomo Effects + Polaroid Frame Generator by pstutorialsws on DeviantArt

さまざまな種類のアクションが紹介されており、ぜひ取り入れてみたくなるものばかり。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:15  |  
Category: Photoshop   
2017年05月17日

個性的なフリーアイコン20種がまとめられた「20 Free Product Feature Icons Sets」

webサイト制作などに欠かせないアイコン。これ一つで情報をわかりやすく伝えることができるためスペースの削減にも繋がります。今回ご紹介するのはそんなアイコンの中から個性的なデザインのものをまとめた「20 Free Product Feature Icons Sets」です。

スクリーンショット 2017-05-16 17.27.01

こんなの欲しかったと思えるようなアイコンが紹介されています。その中からおすすめのアイコンを幾つかピックアップしましたので、以下よりご覧下さい。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: vector , WebDesign   
2014年02月11日

バレンタインday用デザインに活用できるアイコンセット「Free download: 40 Valentine’s icons」

まもなく迎える1年に1度のイベント・バレンタインday、楽しみにされている方も多いかと思います。そんなバレンタイン用のデザインに活用できるアイコンセット「Free download: 40 Valentine’s icons」を今回は紹介したいと思います。

valent

かわいらしいテイストのバレンタインイメージアイコンが40個セットになって、フリーでダウンロードできるようになっています。

詳しくは以下

(さらに…)

続きを読む
posted 09:33  |  
Category: Design   
2016年09月11日

ベクターで描かれたカテゴリー別アイコンセット「Cagoicon Free Vector UI Icons」

制作する上で、非常に便利なアイコン素材。今回紹介するのは、File&Document、Location、Userなどよく利用しそうなカテゴリ別に生成されたカテゴリー別のアイコンセット「Cagoicon Free Vector UI Icons」です。

Cagoicon-Free-UI-Icons-Prev02

アイコンは全てベクターで描かれており、カテゴリでまとめられているため、便利に利用することが可能です。実際に収録されているアイコンは以下からご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 04:19  |  
Category: Design , Photoshop , vector   
2011年03月26日

デザインにアナログ感を演出できるグランジphotohopブラシ「1000 Grunge Photoshop Brushes (40 Sets)」

デザインに雰囲気や味のある質感を出すことができるグランジ素材は、自分で素材として作成しようと思うとなかなか大変な作業になってしまうかと思います。そこで今回は、手軽にアナログ感を演出できるグランジphotohopブラシ「1000 Grunge Photoshop Brushes (40 Sets)」を紹介したいと思います。


Floral Photoshop Brushes – Free Photoshop Brushes | Brush King

デザインがどこか寂しい、もっとデザインに厚みを出したい時などに活躍してくれるデザインブラシが多数収録されています。中でも特に気になったものをピックアップしました。下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 11:19  |  
Category: Design , Photoshop   
2017年01月10日

Photoshopチュートリアルを分かりやすく動画で紹介した「20 Awesome Photoshop Tutorials on Phlearn」

いろいろな加工技術が集約されたPhotoshop。実にさまざまな表現が可能ですが、どうやって機能を使ったら良いか分からないことも多いはず。そんな中今回は、Photoshopチュートリアルを分かりやすく動画で紹介した「20 Awesome Photoshop Tutorials on Phlearn」を紹介したいと思います。

tutorial0109_1
How to Use Virtual Copies in Lightroom

すべてムービーで解説されているチュートリアルを集めているので、操作する画面上の場所なども把握しやすく、初心者にもおすすめの内容となっています。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Photoshop   
2009年10月12日

イラストレーターで描くアイコンチュートリアル55「55 Adobe Illustrator Icon Design Tutorials」

グラフィックデザイナーであればまず間違いなく毎日のように使うソフトウェア「illustrator」。非常に多機能で、レイアウトだけではなく、様々な表現が可能ですが、今回紹介するのはイラストレーターで描くアイコンチュートリアルを集めたエントリー「55 Adobe Illustrator Icon Design Tutorials」です。

icontutorial01
How to Create a Yellow Submarine Icon with Gradient Meshes

立体的なものからステッカーのようなもの非常にリアルなものと様々な表現のイラストレーターによるアイコンの作り方がまとめられています。今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 01:30  |  
Category: Design , vector   
2015年09月21日

最新のフリーフォントを厳選し紹介した「15 New Innovative Free Fonts for Designers」

常に新しいタイプが公開されているフリーフォント。トレンドに合わせて、いろいろな種類が展開されています。今回はそんな最新のフリーフォントを厳選し紹介した「15 New Innovative Free Fonts for Designers」を紹介したいとおもいます。

font0921_3
STOKED (free font) on Behance

15種の、デザイン性に優れたフリーフォントがピックアップされています。気になったものをDesigndevelopでもピックアップしましたので、以下よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Font   
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   
2009年06月30日

ワンページにすべてをおさめるWEBデザイン集「41 Sleek Single Page Websites」

国内で一般的なWEBページの構造を思い浮かべるとしたら皆さんはどんなものを思い浮かべるでしょうか?スタンダードな例として、ページが複数ページがあってそれをグローバルナビゲーションでまとめているといった作りがあります。今日紹介する「41 Sleek Single Page Websites」は先ほどあげたスタンダードな例ではなくて、すべてのコンテンツを1枚のページに集約したWEBの構成をとっているWEBページを集めたエントリーです。

onepweb01
Pictureghjk 8

まとめているからと言って、コンテンツが充実していないという訳ではなく、機能的には問題ない形で1ページに落とし込んでいます。今回はいくつか収録されているもののなかから気になったものをいくつかピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 06:15  |  
Category: WebDesign   
tag: webdesign

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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