TOP  >  WebGL

Tag : WebGL

2017年05月02日

スクロールで変化する、美しいWebGLを実装する為のソース「WebGL Scroll Spiral」

WEB上で3Dアニメーションやオブジェクトを表示できる技術WebGL。今回ご紹介するのはそんなWebGLを使った、美しいマウススクロールアニメーションをまとめた「WebGL Scroll Spiral」です。

WebGLScrollSpiral_1

万華鏡のような美しいデザインから、抽象的なモーショングラフィックまで多様なデザイン、全8種類のデモを公開しています。

詳しくは以下

(続きを読む…)

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

Three.jsでここまでできる!実験的なサンプル20選「20 Exceptional Three.js Experiments」

WEBGLをjavasuriptで制御するためのライブラリThree.js。ブラウザで3D表現などを行う際には国内でも有名なライブラリですが、今日紹介するのはThree.jsを利用した実験的なサンプルを集めたエントリー「20 Exceptional Three.js Experiments」です。

Many-Icons
Many Icons in 3D Using Three.js

全部で20個の実験的なサンプルが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:01  |  
Category: javascript , 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   
このエントリーをはてなブックマークに追加

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

2007年11月30日

AJAXで動くシンプルなfavicon制作サービス「Genfavicon」

以前「仕上がりを見ながらFavicon制作できる「favikon」」と言う記事で、仕上がりを確認しながらFaviconを作成できるWEBサービス「favikon」を紹介しましたが、今回も同じく仕上がりを確認しながらFaviconを制作できるWEBサービス「Genfavicon」を紹介したいと思います。

Genfaviconf

操作する順に連番が振ってあるインターフェイスは「Favikon」と比べると親切かなと思いますが、操作、仕上がりなどは「Favikon」と大差はありません。ひとつ異なる点は、16×16、32×32、48×48、64×64、128×128とトリミングのサイズを選んでトリミング後の画像データを生成したfaviconと共に保存できるようになっているところです。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:47  |  
Category: WebService   
2014年08月16日

8カテゴリ・280個展開されたフリーラインアイコンセット「Free Download : 8 Line Icon Sets」

利用頻度の高い定番のアイコンはたくさん所持していても、個性のあるテーマによって選ぶことが必要なアイコンはなかなか揃っていないことが多いのではないでしょうか?そんな時に参考にしたい、8カテゴリ・280個展開されたフリーラインアイコンセット「Free Download : 8 Line Icon Sets」を紹介したいと思います。

icon280_1

8つのテーマで多数のアイコンがダウンロードできるようになっているので、持っているといざという時に非常に役立ってくれそうです。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2014年06月10日

さまざまな種類のフリーアイコンセットを紹介した「40 Free Icon Sets For June 2014」

さまざまなシーンで活躍してくれるアイコン。最近は、パーツやポイントとしてだけでなく、メイングラフィックの要素としての利用も可能なほどハイクオリティなものも多数登場しています。そんな中今回紹介するのは、40種のフリーアイコンセットまとめ「40 Free Icon Sets For June 2014」です。

icon140610_1
Dribbble – Flat Design free icon set by Vivien Bocquelet

いろんな種類の、いろんなwebサイト等で利用できるフリーアイコンが多数紹介されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:37  |  
Category: Design   
2017年10月21日

検索やズーム表現に!デザインに使えるフリーの虫眼鏡PSD・ベクター素材まとめ「10 Free Magnifying Glass Search Icons Sets (PSD + Vector)」

デザインにおける虫眼鏡は、検索や拡大の意味合いをひと目で伝えてくれる重要なアイコンです。その為何かと使用する頻度も高いはず。今回ご紹介するのはそんな「虫眼鏡」の高品質なフリー素材をまとめた「10 Free Magnifying Glass Search Icons Sets (PSD + Vector)」です。

10-free-magnifying-glass1
Zoom Bubbles (free psd) by Mike Dascola – Dribbble

10種類ものテイストの異なるPSDまたはベクターの虫眼鏡素材が紹介されています。その中から幾つか気になった素材をピックアップしてご紹介しますので、是非ご覧ください。

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

続きを読む
posted 07:20  |  
Category: Photoshop   
2015年10月23日

ハイセンスさを感じられるフリーフォントまとめ「Freshest Free Fonts for Designers」

デザインのクオリティを高めるために、フォント選びはとても重要な工程。今回はそんなシーンで利用したい、ハイセンスさを感じられるフリーフォントまとめ「Freshest Free Fonts for Designers」を紹介したいと思います。

font1022_1
Bellico Typeface + Bonus Vectors – download free fonts by PixelBuddha

洗練かつデザイン性を感じられる最新のフォントがピックアップされ、紹介されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Font   
2017年03月17日

筆で描かれたような力強い欧文フリーフォントまとめ「20 Free Watercolor Font Styles For Designers」

手書き風デザインが流行している今、アナログで描かれたようなフォントも数多く発表されています。そんな中今回ご紹介するのは、デザインに華を添えるの手書き風欧文フォントまとめ「20 Free Watercolor Font Styles For Designers」です。

16-modern-watercolor-font
20 Free Watercolor Font Styles For Designers | Naldz Graphics

水彩絵具や油彩、筆を使い描かれたような雰囲気のあるフォントが20種類も揃っています。おすすめのフォントを幾つかピックアップしましたので、下記よりご覧下さい。

詳しくは以下

(続きを読む…)

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

ユーズド感のある質感が特徴のフリーベクターパック「Graphic Monkee Exclusive Free Goods」

素材はいくつ持っていても、たくさんの種類やバリエーションがあるほどデザインの幅は広がるもの。常にチェックしてストックしておきたいものです。そんなストックコレクションにぜひ加えておきたい、ユーズド感のある質感が特徴のフリーベクターパック「Graphic Monkee Exclusive Free Goods」を今回は紹介したいと思います。

gm_free_goods_grid

使い古した素材感が表現できる、さまざまな描写のユーズド素材がまとめてダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:08  |  
Category: Design   
2017年01月20日

9,900個ものアイコンをダウンロードできる「IconPharm」

デザイン業務で欠かせないアイコン。いろいろなサイトで配布されており、多種多様に星の数ほどありますが、今回は9,900個ものアイコンをダウンロードできる「IconPharm」を紹介したいと思います。

iconpharm

オープンソースのシンプルで使いやすいテイストのアイコンが揃っており、とにかく収録数が多いのが嬉しいところ。

詳しくは以下

(続きを読む…)

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

WEBデザインに役立つ手書きで使えるワイヤーフレームテンプレート「10 Free Printable Web Design Wireframing Templates」

WEBデザインをする際、どのような手法で行っているでしょうか?人それぞれだとは思いますが、多くの場合はいきなり作り始めるのではなく、構想をまとめてラフに落とし込む場合が多いとは思います。今回紹介するのはラフを制作するのに便利な手書きで使えるワイヤーフレームテンプレートをまとめたエントリー「10 Free Printable Web Design Wireframing Templates」です。

printable_wireframes_01
960 grid template

プリントアウトしてそこに書き込んでいけるような様々なテンプレートが多数集められています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:16  |  
Category: WebDesign   
tag: webdesign
2008年03月13日

JavaScriptでCoverFlowを実現するスクリプト「ProtoFlow」

ITunesを初めとして、Appleの製品には幅広く利用されているユーザーインターフェイス、CoverFlow(カバーフロー)直感的かつグラフィカルなのが特徴的ですが、今回紹介する「ProtoFlow」はprototype.js&script.aculo.usを用いてそのカバーフローを実現するという物です。

カバーフロー風ギャラリー
デモページ

まずはデモページをご覧ください。スライドバーでも画像をクリックでも画像を動かすことができるようになっていて、画像のキャプションも表示される見たいです。

詳しくは以下

(続きを読む…)

続きを読む
posted 01:59  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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