デザインを開発するという視点でお伝えするクリエイティブ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サイトのコンタクトフォームは、エンターテイメント性もさることながら、見やすさや使いやすさが重要。そんな中今回紹介するのが、思い通りのコンタクトフォームを生成できるWordPressプラグインまとめ「10 Free Contact Form Plugins for WordPress」です。
Contact Form 7 – Just another contact form plugin for WordPress. Simple but flexible.
用途に合わせて使いやすいさまざまなフォームプラグインが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
グラフィックデザイナーであればまず間違いなく毎日のように使うソフトウェア「illustrator」。非常に多機能で、レイアウトだけではなく、様々な表現が可能ですが、今回紹介するのはイラストレーターで描くアイコンチュートリアルを集めたエントリー「55 Adobe Illustrator Icon Design Tutorials」です。
How to Create a Yellow Submarine Icon with Gradient Meshes
立体的なものからステッカーのようなもの非常にリアルなものと様々な表現のイラストレーターによるアイコンの作り方がまとめられています。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
WEB制作やシステム開発をしているとフローチャートを書くことも多く、専用のソフトウェアもリリースされていたりしますが、使い慣れたツールで創るのが一番早いという方も多いと思います。今日紹介するのはフローチャート作成のためのデザインキット「Flowchart kit for Sketch」です。
フローチャートに必要なデザイン素材をSketchで利用できるように、まとめて配布されています。
詳しくは以下
デザインのポイントとして多いに活躍してくれるアイコンは、いくつあっても嬉しいものです。そこで今回紹介するは、ハイクオリティな最新のアイコンを集めた「50 New Free High Quality Icons Sets」です。
（IsoIcons – Workspace | Artdesigner.lv）
非常にクオリティの高い多彩な種類のアイコンが集められています。中でも気になったアイコンセットをいくつかピックアップしましたので、下記よりご覧ください。
次世代の規格として注目され、最新のブラウザでは問題なく認識ができるようになってきているCSS3。今日紹介するのはCSS3を利用してつくるボタン集「10 Awesome CSS3 Buttons to use on your website」を紹介したいと思います。
グラデーション、ドロップシャドウ、角丸など、CSS3の機能をふんだんに使って上記のような全部で10のボタンが公開されています。
詳しくは以下
デザインをする際、自分で素材のすべてを手がけるといったこともあると思いますが、多くが素材を利用して作られているもの。デザインに合わせていろんなタイプの素材が必要となってくると思います。今回はそんなときに参考にしたい「1001FreeDownloads.com: Exclusive FREE Digital Design Resources」を紹介したいと思います。
Free Vectors: Designers table with tools. Vector illustration | Objects
いろいろな種類のフリーデザインリソースを集めた、デザイナー必見のまとめとなっています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBサービスでよく見かける、サービスの形態ごとの価格表、そのプランで何ができるのか？いくら位の差があるのかというのを一瞬で見分けられるように整理されており便利でスタンダードなデザインですが、これがいざ作るとなるとなかなか難しく苦労したというデザイナーの方も多いのではないでしょうか？今日紹介するのは価格表のデザインをまとめたデザイン集「21 Examples of Pricing Pages in Web Design」です。
全部で21もの価格表がまとめられたています。今日はその中から気になったものをいくつかピックアップして紹介したいと思います。
詳しくは以下
デザインのアクセントとして、またタイトルをより印象づけるためになど、コーナーや囲みを利用している方も多いと思います。今回は、そんなコーナーや囲みデザインのバリエーションが広がるブラシをまとめた「25 Lovely Looking Corner Brushes for Free Download」を紹介したいと思います。
Gothic PS corner brushes by ~AmeliaLune on deviantART
植物をモチーフにしたコーナーデザインから、幾何学模様を利用したデザインまで、さまざまなデザインブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
フリーでたくさんのテーマが配布されているWordPress。非常にクオリティの高いものも多く、活用されている方も多いと思います。そんな中今回は、フリーWordPressテーマ20種「20 Fresh and Free WordPress Themes: May 2015」を紹介したいと思います。
Tiles, free masonry style colorful WordPress theme | Viva Themes
20種の厳選されたWordPressテーマが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
