TOP  >  デベロッパー

Tag : デベロッパー

2018年04月23日

WebGLによる 歪みの効果を与えるスタイリッシュなホバーエフェクト「WebGL Distortion Hover Effects | Codrops」

WEBデザインならではのエフェクトは、私たちの目を楽しませてくれたり、あっと驚かせてくれたりします。今回ご紹介する「WebGL Distortion Hover Effects | Codrops」は、WEBの中でもよく目にするホバーアクションのエフェクト集になります。

DistortionHoverEffect_top

歪みの効果を与え、滑らかに動くスタイリッシュなホバーアクションです。

詳しくは以下

(さらに…)

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

デベロッパーなら知っておきたい30秒でできるCSSスニペット集「30 Seconds of CSS」

毎日コーディングでさまざまなコードを書くデベロッパーにとって非常に便利なスニペット。知っているだけで作業効率が格段にアップするもの。そんな方におすすめできる「30 Seconds of CSS」をご紹介していきたいと思います。

30SecondsofCSS_top

先進的な知識を多く取り込むためにも、基礎的な業務内容をいかに短縮して行っていけるかは非常に重要なポイント。デベロッパーの方はぜひ下記よりチェックしてみてください。

詳しくは以下

(さらに…)

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

知っていると便利なCSSで創るハーフトーンエフェクト「Pure CSS Halftone Effect」

モダンな雰囲気からスタイリッシュな雰囲気まで、幅広い演出をしてくれるハーフトーン。今まで画像としてWebサイトに取り込むことが多かったのではないでしょうか。今回ご紹介する「Pure CSS Halftone Effect」ではWebならではの動きを楽しむことができるエフェクトを通したハーフトーンになります。

PureCSSHalftoneEffect

美しい動きで視線を惹き付ける、ぜひ取り入れてみたいエフェクトとなっています。

詳しくは以下

(さらに…)

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

デベロッパーであれば知識として取り入れておきたいCSSで作るVR「CSSVR: Progressive VR experiences」

他の世界に入り込むような没頭感を味わうことができるVR。気軽にデモを作成ができたらと、デベロッパーであれば1度は感じたことがあるかもしれません。そんな中今回紹介するのは、CSSで作るVR「CSSVR: Progressive VR experiences」です。

css-vr-skybox-demo

VRの複雑な動きをどう再現していくのか、その再現率の高さはどうれくらいなのか。デベロッパーであれば気になるところ。下記にデモを載せているのでご覧ください。

詳しくは以下

(さらに…)

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

水のような動きが鮮やかで目をひくエフェクト「Liquid Distortion Effects」

Webデザインの中でもユーザーの目を簡単に引くことを可能にするエフェクト。動きがつくだけでサイト内がぱっと華やかになります。今や様々なエフェクトをつけることが可能ですが、ついついワンパターン化してしまいがち。そんな方におすすめできる、水のような動きに焦点をあてた「Liquid Distortion Effects」を今回はご紹介致します。

LiquidDistortion_Featured

水のような動きは優雅さと洗練された雰囲気を与えてくれます。下記にデモをいくつかピックアップ致しましたので、ご覧ください。

詳しくは以下

(さらに…)

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

日付選択ピッカーのプラグイン「10 Free Open Source Date Picker Plugins」

予約フォームや等で、webサイトで日付の選択を行う機会は意外に多いもの。だからこそ、ユーザーの使いやすさを意識したUIの工夫が必要となってきます。そんな中、今回ご紹介する「10 Free Open Source Date Picker Plugins」は、日付選択のプラグインが集められたまとめです。

01-flatpickr-plugin-js
Introduction

使いやすさや、見やすいデザインが考慮された日付ピッカーのプラグインがまとめられています。

詳しくは以下

(さらに…)

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

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

2010年06月29日

WEBのユーザー動向を確認できるヒートマップが作成できるサービス色々「7 Incredibly Useful Tools for Evaluating a Web Design」

アクセス解析によって、様々なデータを見ることができ、解析していくと、様々な傾向をしることができるのですが、ユーザーがどの部分を見ていて、どんな動向をしているのかというところまで読み取るには時間がかかります。今日紹介するのはユーザーのクリックの位置をヒートマップで見せてくれるサービスをまとめたエントリー「7 Incredibly Useful Tools for Evaluating a Web Design」。

07_clicktale_example
ClickTale

ASPサービスから、オープンソースまで、幅広く紹介されていますが、今日は紹介されているヒートマップツールのなかからいくつか紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
2013年04月27日

【商用可】面で描かれた、POPでキュートなアイコンセット「Flat Design Icons Set Vol1」

WEBの素材としてアイコンセットは珍しいものではなく、様々なものがリリースされており立体的なものから、ピクトグラムライクな平面的なものもあります。今回紹介するのはすべて面で描かれた、POPでキュートなアイコンセット「Flat Design Icons Set Vol1」を紹介したいと思います。

アイコンはシンプルながらも細かいところまで作り込まれており、面で描かれながらも陰影や光も表現されており、立体的に見えます。

詳しくは以下

(さらに…)

続きを読む
posted 09:26  |  
Category: Design , Photoshop , WebDesign   
2018年06月02日

細部にまでこだわったクオリティの高いイラスト素材セット「117 Essential Tokens Set」

ちょっとした空間やスペースをおしゃれに飾りたいとき、手軽に使えるイラスト素材はとても便利です。そんな中今回紹介するのは、さまざまな種類のイラスト素材がセットになった「117 Essential Tokens Set」の紹介です。

Essentia01

植物から幾何学模様まで、様々なイラストがまとまった素材セットです。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: Design   
2012年09月06日

ニュースレター用のパーツデザインが揃うPSD素材まとめ「30 Beautiful Free Newsletter Subscribe Box PSD Designs」

ポータルサイトなどの情報系サイトでは特に、どれだけ多くのユーザーにリピーターになってもらえるかが重要だと思います。そのためには、ニュースレター申込やRSS部分のデザインには、特に力を入れたいところ。そこで今回紹介するのが、ニュースレター用のパーツデザインが揃うPSD素材をまとめた「30 Beautiful Free Newsletter Subscribe Box PSD Designs」です。


Subscription form design | Psdblast

定番のエアメールをモチーフにしたデザインをはじめとした、さまざまな素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:23  |  
Category: Design   
2017年10月24日

レトロな雰囲気作りに ヴィンテージ風の加工が出来るテキストエフェクト「Hometown Vintage Effects Pack」

レトロや格調高い雰囲気などをデザインに落とし込みたい際に役立つのが、ヴィンテージ風加工。しかしいざ自作するとなると、凝った加工を行うのは中々難しいもの。そんな時に利用したい、ヴィンテージ風加工を楽に行うことが出来るテキストエフェクト「Hometown Vintage Effects Pack」を今回は紹介します。

hometown-vintage-effects-pack1

PSD形式の完成されたヴィンテージ風のエフェクトを楽しむことが出来る、おすすめのエフェクトセットです。

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

続きを読む
2009年06月27日

もう色には迷わない!配色補助ツールのまとめ「Online Color Tools For Web Developers」

デザインする上で重要な要素の一つ色。色彩感覚については各々個人で異なると思いますが、色が与える印象と言うのはとても大きく、同じレイアウト、同じコンテンツだとしても配色次第で気持ちよくも気持ち悪くもなります。今日紹介する「Online Color Tools For Web Developers」は色を決めていく上で役に立つオンラインツールを集めたエントリーです。

color
4096 Color Wheel

様々な「色」にまつわるオンラインツールが集められていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 10:10  |  
Category: WebService   
2012年11月14日

さまざまなアイコンデザインに出会えるアイコン紹介サイトまとめ「10 Websites for Finding iOS App Icon Design Inspiration」

デザイン制作をしているとさまざまなアイコンが必要になりますが、クオリティを追求したアイコンを考えるというのはなかなか時間のかかる作業です。そこで今回紹介するのが、さまざまなアイコンデザインに出会えるアイコン紹介サイトをまとめた「10 Websites for Finding iOS App Icon Design Inspiration」です。


Pinterest / Search results for iOS Icon

iPhoneアプリのアイコンデザインをまとめたサイトが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 11:59  |  
Category: Design   
tag: 
2017年04月17日

レトロな雰囲気のフィルムのアナログ感を演出できるテクスチャ「25 Film Dust Textures」

フィルム独特の味わい深い色の歪み、塵による巧妙な光加減は、写真にレトロな雰囲気とノスタルジー感を与えてくれます。そんな画像加工を手軽に手に入れることができる素材「25 Film Dust Textures」を今回は紹介したいと思います。

dust-top

独特なグラデーションの色合いが味わい深い、25種類のテクスチャ素材がまとめられてます。

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

続きを読む
posted 09:34  |  
Category: Design   
2007年11月15日

仕上がりを見ながらFavicon制作できる「favikon」

Faviconを作成してくれるサービスはかなりの数がリリースされていますが今回紹介する「Download Favicon」は画像を見ながら、トリミングしてFaviconが作れる画期的なサービスです。

トリミングしてfaviconを作成できるfavikon

従来のFaviconジェネレーター系のサービスだと横長の画像だと間延びしてしまったりおかしくなってしまいますが、上記のように自分でトリミングしながら仕上がりを決められるため、どんな画像からもFaviconを作ることができます。

詳しくは以下

(さらに…)

続きを読む
posted 01:57  |  
Category: WebService   
2014年05月22日

ショッピングサイトに是非利用したいアイコンセット「Ecommerce Shopping Icon Set」

インターネット上で買い物をする際に利用するショッピングサイト。非常に情報量が多いため、いかにユーザーが使いやすい構成にするかがポイントとなってきます。今回はそんなショッピングサイトに是非利用したいアイコンセット「Ecommerce Shopping Icon Set」を紹介したいと思います。

eccicon

ショッピングサイトで便利に利用できる種類のアイコンが70パターン、セットになってダウンロードできるようになっています。

詳しくは以下

(さらに…)

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

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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