デザインを開発するという視点でお伝えするクリエイティブ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」からどうぞ。
タイポグラフィ自体にデザイン性を持たせることで、ぱっと華やかなものにしてくれます。今回ご紹介する「Flower Bouquet SVG Font」は、美しい花とともに可変性の高いSVGに対応しているフリーフォントになります。
バラやパンジーなどの色鮮やかで華やかな雰囲気が特徴。デザインを彩り鮮やかに演出してくれます。
詳しくは以下
ビジネスシーンに欠かす事ができない名刺。限られた領域に、自分の情報、コンセプト、メッセージなど様々な事を伝えなければいけない非常に難しいデザインの一つですが、今日紹介するのはそんな名刺のデザインを集めた名刺ギャラリーサイトを集めたエントリー「7 business card galleries to promote your work」です。
ギャラリーの作りはそれぞれですが、多くのページでは検索できたり、フィルタリングできたりとデザインのインスピレーションを得るのに便利な機能が付いています。今回はまとめられたサイト全てを紹介したいと思います。
詳しくは以下
デザイン素材として、さまざまなシーンで活躍するマップ素材。特にアンティークな雰囲気のデザインにはよく利用されているのを見かけます。そんなマップのテクスチャを集めた「A Collection of High Quality Map Texture」を今回は紹介したいと思います。
（Map Texture by ~blacklotus06Stock on deviantART）
さまざななテイストの、質感やマップの描写がそれぞれに特徴的なテクスチャが多数まとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
日本国内でも需要が伸び続けているFacebook。ページをカスタマイズしてオリジナリティの高いファンページの制作するという機会も増えているのではないでしょうか？そこで今回紹介するのが、FacebookファンページGUIデザインのPhotoshopデータを公開している「Facebook Fan Page GUI PSD」です。
ファンページの全体的なデザインはもちろん、設定範囲などの情報が掲載された、使いやすいGUIデザインとなっています。
詳しくは以下
SNSは世界中にユーザーが存在しており写真の投稿数も多いため、その中でどのように人目を惹くかは重要となってきます。そんな中今回は、今までの投稿とは一味違った印象を与えるInstagramマスクセット「Textura Instagram Masks Set」を紹介したいと思います。
投稿写真を簡単な操作でおしゃれに加工できるマスクセットです。
詳しくは以下
もうすぐクリスマス。広告業界ではもうクリスマスは終わりつつありますが、今回紹介するのはクリスマスをデザインするのに最適なフリーphotoshopブラシセットをまとめた「
20 Free Christmas Photoshop Brush Sets」です。
Christmas Tree Branch BrushesT
雪の結晶から、もみの木、ツリーや氷の結晶等々、様々なクリスマスを演出できるフリーブラシが全部で20セット紹介されています。今回はいくつか気になったブラシセットを紹介したいと思います。
詳しくは以下
手軽にアンティークな雰囲気を演出できるスタンプ素材は、デザイン制作で利用することも多いはず。そこで今回は、アナログテイストなスタンプのPhotoshopブラシを集めた「High Quality Stamp & Post Mark Photoshop Brushes」を紹介したいと思います。
スタンダードなスタンプ素材はもちろん、レトロテイストな素材など、さまざまなPhotoshopブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
アイコン素材はユーザーが視覚的・直感的にwebを操作できる要素として役立つ、現在のWebデザインになくてはならない存在。しかし、自作でたくさんのアイコンを制作するのは意外に大変なものです。そんな中今回紹介するのは、モダンなWebデザインによく似合うフリーアイコンまとめ「The Elegant Icon Font – 310 Of The Best Free Icons For The Modern Web」です。
フラットなデザイン感で統一されたアイコンはどれもクオリティが高く、種類も豊富。すぐにでもサイトのデザインに取り入れられるような展開になっています。
詳しくは以下
なかなか普段使わないけど持っていると役に立つ手書き風フォントを配布してくれているのが今回紹介する「ふい字置き場」です。下記のようなゆるーい感じの手書き風フォントが無料でダウンロードできるようになっています。
配布されているのは全部で「ふい字」「まきばフォント」「おひさまフォント 」の3つです。下記にサンプルを貼っておきます。
【収録文字】
ひらがな/全角・半角カタカナ/全角・半角数字/全角・半角アルファベット/ギリシャ文字/ロシア文字/各種記号/シフトJIS第一水準漢字/シフトJIS第二水準漢字/絵文字
【収録文字】
ひらがな/全角・半角カタカナ/全角・半角数字/全角・半角アルファベット/ギリシャ文字（小文字だけ）/各種記号/絵文字/シフトJIS第一水準漢字/シフトJIS第二水準漢字の、わりと使いそうな字
【収録文字】
ひらがな/全角・半角カタカナ/全角・半角数字/全角・半角アルファベット/ギリシャ文字（小文字だけ）/各種記号/絵文字/シフトJIS第一水準漢字/シフトJIS第二水準漢字の、わりと使いそうな字
フォントはすべてttf（トゥルータイプフォント）で配布されています。ダウンロードは「ふい字置き場」から利用はリンク先の配布サイト様の利用規約に従ってください。
いくつ持っていても便利に活用できるフリー素材は、できるだけ多くストックしておきたいもの。今回はそんなストック用に是非参考にしたい、UIやフォントなどのフリー素材を集めた「40 Free Resources For Web Designers」を紹介したいと思います。
Dribbble – Simple Photo And Video Icon Set by Graphics Bay Team
さまざまな種類のフリー素材がピックアップされており、いろいろなデザインシーンで活用することができます。
詳しくは以下
