デザインを開発するという視点でお伝えするクリエイティブ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」からどうぞ。
WEBの技術は日々進歩していて、様々な技術、技法が世の中には溢れていますが、今回紹介するのはjQueryやCSS、PHP、ASP、Ruby on Railsなどなど項目毎に、WEB開発に役に立つチュートリアルを30以上まとめたエントリー「30+ Eye-Opening Web Development Screencasts」です。
どれも実用的で、役に立ちそうなものが多いのですが、今回は紹介されている中から特に気になったチュートリアルをピックアップして紹介したいと思います。
詳しくは以下
何かを伝える時に、または広告の定番ツールとして広く利用されているメディアポスター。今回紹介するデザイン集はそんなポスターをデザインする上でデザインのアイデアソースとなるようなデザイン集「30 Inspiring Poster Designs」です。
紹介されているポスターは商業的なデザインはあまりというかほとんど無いので、有る意味広告としてのポスターという意味では難しい面もありますが、面白いデザインのポスターが並んでいます。今日はその中からいくつかピックアップして紹介したいと思います。
詳しくは以下
webサイトを手軽かつハイクオリティに仕上げることができ、さらにその後のweb管理のしやすさから、数多くのシーンで重宝されているWordPress。今回はそんなWordPressの、実用的なフリーテーマ「45 Free WordPress Themes for Winter 2014」を紹介したいと思います。
（Stargazer – Free Responsive WordPress Theme）
そのままの利用はもちろん、アレンジもしやすそうなWordPressテーマがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
様々なデザインでもグラフィックでもポイントもしくはメインとして使われる羽ばたく鳥のイメージ。未来とかスタートとかそういった前向きな印象を与えてくれるモチーフですが、今回紹介するのはそんな羽ばたく鳥のシルエットのベクターデータを集めたセット「BB Free Vectors: Birds in Flight」です。
上記のような様々なシルエットの鳥のベクターデータが全部で12種類収められています。
詳しくは以下
WEBを制作するにあたって、非常に便利な素材、アイコン。もちろんアイコンもフルオリジナルで作る時間と予算があれば良いのですが、毎回そうも言っていられない現場では、非常に重宝する素材の一つです。今日紹介するのは無料でダウンロードできるフリーアイコンセットをまとめたエントリー「24 Free Mini Icon Sets To Download」です。
ある程度数があるアイコンセットが全部で24個まとめられていましたので、今日はその中から気になったアイコンセットをピックアップして紹介したいと思います。
詳しくは以下
波形や水面のきらめき、透明度など、写真の種類の中でも表情が非常に豊かな水のテクスチャ。シンプルに背景、また幻想的な空間を作り上げるためのパーツとしても力を発揮してくれます。今回はそんな水テクスチャを集めた「20 Refreshing Still Liquid Textures」をご紹介します。
ManaXmomo-Water blue by ~stocks-by-manaXmomo on deviantART
さまざまなアングル・シチュエーションで撮影された写真がテクスチャとなり、豊富に展開されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
新芽が芽吹く春が近づいてくると、自然を意識したデザイン制作も多くなってくるのではないでしょうか？今回は、そんな自然な雰囲気を感じられるデザイン制作にぴったりな、葉をモチーフにしたパターン素材をまとめた「70+ Leaves Pattern for Nature Inspired Designs」を紹介したいと思います。
グリーンの葉はもちろん、さまざまな季節を感じられるパターンが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
商品カタログや会社案内などのパンフレットは紙からWebへと大きく移行しています。そうは言っても紙のパンフレット需要がゼロになったわけではありませんので、様々なレイアウトやデザインの参考になるものはあると便利です。そんな時に役立ってくれるのが今回紹介する、40種類のパンフレットテンプレート「40 Print-Ready Brochure Templates | Free and Premium」のです。
A4 Portfolio Brochure by meenom | GraphicRiver
シンプルな1ページパンフレットから2つ折り、3つ折りに至るまで40種類のテンプレートが紹介されています。
詳しくは以下
いろいろな素材が配布される中、フリーでダウンロードできるものも非常に豊富。そんな中今回紹介するのは、フリーで使用できる高品質で便利なツール・素材まとめ「50+ incredible freebies for web designers」です。
Expire PSD Theme | Best PSD Freebies
テンプレートやアイコン、UI、プラグインなど、さまざまな種類のフリー素材が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
webデザイン制作に欠かせない素材のひとつ・アイコン。いろいろな種類やテーマのものが存在しており、いろいろとストックされている方も多いかと思います。そんな中今回紹介するのは、フラットテイストのフリーアイコンが多数そろった「40 Flat and Free Icon Sets for May 2015」です。
定番として利用できそうなものから、個性的なテーマのものまで、さまざまな種類が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
