デザインを開発するという視点でお伝えするクリエイティブBLOG
動画はトラフィックを取られすぎてなかなか展開はできないけどなんとかしたいという思いから、動画部分をGIFアニメーションで代替して利用するというサイトを最近では見かけます。今日紹介するのはFacebookライクなインターフェイスでGIFアニメーションプレビューを実装できる「Facebook Like GIF Preview Using jQuery」です。
こちらはjQueryベースで制作されており、jQueryとライブラリ、CSSを読みこせて、HTMLとjsを追記するという形で、比較的簡単に実装が可能です。
詳しくは以下
GIFのマークをクリックするとGIFアニメーションがスタートし、再度クリックすると元に戻ります。挙動については、デモサイトが準備されていましたので「Gif Preview with jquery」からご覧ください。
クリックでイベントが起きるため、スクロール位置などイベントを作っておけば、表示位置に来たら自動的に再生するなんてこともできそう。使い方次第ではグッとサイトが良くなるかもしれないjQueryプラグインだと思います。ソースコードはgithubにて公開されておりましたので、試してみたい方は「Fork it on Github」からどうぞ。
木の持つ暖かみや味という物は確かにあって、デザインする時も木目を引いたりすると、色下手とは違った雰囲気が作り出せます。今日紹介するのはそんな木の魅力をデザインに取り入れることができる高解像度な木材のフリーテクスチャ集「17 Wood Textures & Photos」です。
全部で17種類のフリーテクスチャが公開されていて、サイズは2256×1496とかなり高解像度でそれにともなってファイルサイズもzipでまとめられた物で26.2MBあります。収録されている素材の中からいくつかサンプルを下記に掲載しておきます。
詳しくは以下
どんどんと新しい種類が生み出され続けているフォント。フリーでダウンロードでき、さらにデザイン性も高いものも数多く配布されています。そんな中今回紹介するのは、種類の豊富さが魅力なデザインフリーフォントまとめ「101 best free fonts, fall 2015」です。
比較的新しいフリーフォントが多数まとめられています。どれも非常に魅力的なものばかり、以下に気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
簡潔な表現でありながら、非常に効果的な役割を果たしてくれるアイコン。自身で制作するよりも、フリーでたくさん配布されているものを使用することで、コスト削減やクオリティアップにつなげることができます。そんな中今回は、多彩な種類が揃ったフリーアイコンまとめ「40 best free icon sets, Spring 2015」を紹介したいと思います。
Dribbble – Free Set Colorful Ficons Icons 42+ by Alexander Kutuzov
さまざまなテーマのフリーアイコンが豊富に紹介されているので、探していた種類のものが見つかるかもしれません。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
非常にたくさんの種類が配布されているフリー素材。膨大な数の中から厳選したり、探したりするのはなかなか大変なもの。今回はそんな時に是非チェックしたい、種類豊富にフリー素材が揃った「40+ Freebies & Goodies For Web Designers」を紹介したいと思います。
5 high-quality photographic mockups – Freebiesbug
いろいろな種類のフリー素材がピックアップされ、まとめられています。気になったものをいくつかご紹介します。
詳しくは以下
日々進化していくWebデザインの表現方法。特にjQueryやHTML5・CSS3においては最新の動向と合わせていくため、たくさん勉強をされているデザイナーの方も多いのではないでしょうか。そんな中今回は、CSS3で実現できる最新のデザイン表現方法をまとめた「20 Useful Fresh CSS3 Tutorials for Web Designers」を紹介したいと思います。
20 Useful Fresh CSS3 Tutorials for Web Designers – DJDESIGNERLAB
奥行きを感じる3D表現、またプルダウンメニューなどに代表される基本機能も一味異なる、最新のWebサイトで見られるような斬新で面白いチュートリアルが揃っています。中でも気になったものをピックアップしましたので、以下よりご覧ください。
詳しくは以下
装飾が施されている書体は洗練された雰囲気は出すことはなかなか難しいですが、その独特の風体から書体一つで世界観を作りあげることができます。今日紹介するのはそんなレトロな書体を集めたエントリー「20 Fantastic Free Retro and Ornate Fonts」です。
いくつか書体が公開されていますが、今日はその中からいくつか気になったモノをピックアップして紹介したいと思います。
詳しくは以下
サイトのメニューやちょっとしたインターフェイスに役立つアイコン。今日紹介する「twotone icons for free! 」は超シンプルなピクトグラムアイコンです。
「twotone icons for free! 」は100パーセント無料でブログ、ウェブサイト、アプリケーションまたはイントラネット上で使用する事が可能ということです。ピクトを見てもお分かりになる通り標準でほとんどのものが網羅されていてバリエーションも豊かなのです。
詳しくは以下
ロゴデザインは企業や団体を表す非常に重要なもので、そのデザインもクライアントの数や業種によっても異なり、多様性を極めています。今日はそんなロゴデザインのインスピレーションを得られるロゴデザインコレクションをさらに集めたエントリー「25 Amazing Logo Collections」を紹介したいと思います。
Logos 08 on the Behance Network
様々な業種、テイストのロゴがまとめられています。今日は公開されているものの中から気になったものをいくつかピックアップして紹介したいと思います。
詳しくは以下
前回「美しいmovabletypeのデザインを集めた「Movable Love」」という記事でMovabletypeの美しいデザインを集めたデザインショーケースを紹介しましたが、今回紹介するのはそのWordPress版とも呼べる「We Love WP」です。「Movable Love」と同じくWordPressのデザインに特化してデザインが収録されています。
こちらは「Movable Love」と違いかなりの数のデザインが収録されていて見応え抜群です。新規でWordPressのテーマを制作するときや、カスタマイズの参考に使えそうです。
詳しくは以下
世界中で利用されているWordpress。その魅力の一つに豊富なクリエイティブなテーマの存在があります。同じコンテンツでもテーマによって大きく印象が変わり、テーマはシンプルなフレームワークのものから細部まで凝ったデザインのテーマもあります。今回紹介するのは2011年の新しく登場したWordpressのテーマを集めた「40 High Quality, Fresh And Free WordPress Themes Of Year 2011」
クオリティが高く、細かい部分まで作りこまれたテーマが多く紹介されていました。今日はその中から幾つか気になったテーマをピックアップして紹介したいと思います。
詳しくは以下
