デザインを開発するという視点でお伝えするクリエイティブ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を制作しているとたまにではありますが来るかと思います。そんな時に役立つのが国旗に絞って様々なアイコンを公開している「All the Flags of the World」です。
上記のようなスタンダードものから少し変わった物まで現在9つのアイコンが公開されています。
詳しくは以下
自然をテーマにしたテクスチャは、人の手では作り出せない表情が魅力です。そんな中今回紹介するのは、泡の質感を楽しめるテクスチャ集「30+ Collection of Free Popping Bubble Textures」です。
（Spheres 1 by ^FantasyStock on deviantART）
湧き上がる泡や、石けんや洗剤などによって生み出された泡まで、さまざまなタイプの泡テクスチャが紹介されています。気になったものをいくつかピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
CSSのメニューを生成してくれるWEBサービスは今まで「プレビューしながらテキストのCSSスタイルを簡単に設定できる「CSS Type Set」」や「CSSベースのクールなリストが簡単に作れる「List-O-Matic」」と紹介してきましたが、今回紹介する「IzzyMenu」はWEB上で簡単にプレビューしながらCSSメニューが作れるWEBサービスです。
基本言語は英語ですが、わかりやすいく明快なインターフェイスですので英語が苦手なんて言う方もあまり苦なく使えるかと思います。AJAXを使用しているみたいでスムーズに生成結果を見ることができます。
詳しくは以下
一般的なピクトグラム的なアイコンセットはよく見かけますが、特定の分野で多くのアイコンが収録されたアイコンセットはなかなか無く、合ったとしてもなかなか全てを網羅しているというものは少ないと思います。今日紹介するのは100個の食べ物をアイコン化したアイコンセット「100 Colored Food & Drink Icons」です。
野菜、魚介、チーズ、香辛料、果物などなど様々な食物をモチーフにアイコンが制作されています。収録アイコンは以下からご覧ください。
詳しくは以下
スマートフォンやミュージックプレーヤーで音楽を持ち歩く方も多く、音楽は生活の必需品ともなっているのではないでしょうか？今回はそんな音楽を連想できるパターンをまとめた「40 Noteworthy Musical Patterns For Free」を紹介したいと思います。
Pattern / Queen’s music :: COLOURlovers
ポップな雰囲気のイラスト素材から、五線ノートをモチーフにした素材まで、さまざまなパターンが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
アラートを出したり、案内をだしたり非常に多様な使い方で便利に使えるモーダル。それだけに多くのWEBサイトで利用されています。今日紹介するエントリーは、便利なjQueryモーダルプラグイン15選「15 Cool jQuery Modal Plugins」です。
SimpleModal / Eric Martin / ericmmartin.com
シンプルなものから、ギャラリー的なら利用ができるものまで幅広く収集されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
写真は色や明るさの調性を行うだけでも雰囲気をガラッと変えることができます。処理を加えることで全く違った印象を与えることができるので、いくつか手軽に加工できるアイテムをストックしておきたいものです。そんな中今回は、どんな写真も簡単にレトロな印象に変えることのできる光素材「Retro Light Leaks Set」を紹介したいと思います。
色や表現の異なる光の素材がセットになったアイテムです。気になった方はチェックしてみてください。
詳しくは以下
ブランディングやパッケージデザインを提案する時に重要な役割を果たすモックアップ。その精度が高ければ高いほど、クライアントにリアルなイメージを提供することができます。そんな時に役立ってくれるのが今回紹介する、クオリティの高いフリーで使えるパッケージモックアップまとめ「20 Realistic Free Food Packaging Mockups」です。
Ice Cream Cup Mockups | MockupWorld
パッケージモックアップが20種類紹介されていますが、どれも精度の高いものばかりです。中でも気になったものをピックアップしてみました。
詳しくは以下
photoshopの作業でももっとも多い作業の一つ色補正。色合いや風合いで、印象は全く変わるため、時間もかかるかと思います。今回紹介する「140 Amazing Photoshop Actions sets and Tutorials」は色補正を簡単に行なってくれるアクションを中心にあつめたエントリーです。
様々な色調の補正アクションが公開されています。今回ははその中から今までDesigndevelopで紹介していないもので、気になったものをいくつか紹介したいと思います。
詳しくは以下
数年前に比べて現在のWeb業界は、便利な機能や面白い仕組みが増え、Webサイトの表現の幅も広がってきました。今回紹介するのはそんな便利な機能を手軽に実現できる、jQueryを利用した20の開閉式メニュープラグイン「20 jQuery Side Sliding Panel Plugins (show-hide) For Your Website」です。
単なる開閉に留まらず、さまざまな使い方が想定された素敵なメニューが揃っています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
