デザインを開発するという視点でお伝えするクリエイティブBLOG
写真を利用する時、撮影されたまま利用するという事はソフトウェアが発達してきた現在まずありませんが、今日紹介するのはレタッチソフトでは無く、CSSで実現するイメージフェクト「20 Image Effects With CSS」です。
水彩風から、黒板に書いた風のエッジを検出したものエアブラシで書いたものなどなど、全部で20ものエフェクトがCSSで指定するだけで簡単にエフェクトを利用することが可能です。
詳しくは以下
街はハロウィンからクリスマスへ変わり、クリスマスの話題も少しづつ出始めていますが、今回紹介するのはクリスマスに最適な3Dキューブアドベントカレンダー「Cubes Advent Calendar」です。
アドベントカレンダー（Advent calendar）は、クリスマスまでの期間に日数を数えるために使用されるカレンダーで、毎日一つづつ空けていくカレンダーとなります。今回の1つ1つがキューブとなっておりクリックすることで開封することが可能です。
詳しくは以下
CSSのみで制作されるアニメーションは軽量でシンプルで非常に使い勝手も良く、国内でもブラウザの制限が商業レベルでも外れてきた今、数多く活用されはじめてきていますが、今日紹介するのはCSSのみで制作されたローディングアニメーションセット「CSS Loader」です。
ローディングアニメーションはWEB制作の現場でも比較的利用頻度が高く、最近の画像中心のWEBサイトでは必ずと言っていいほど実装するためCSSのみで利用できるのは非常に魅力的です。
詳しくは以下
WEB上で何かを選択するときに用いるラジオボタン。様々な場所で実装されており、もはや当たり前のユーザーインターフェースの一つですが、今回紹介するのはそんなラジオボタンにアクセントを付けることができる、CSS3で実現するラジオボタンアニメーション「radiobox css」です。
ラジオボタンの選択時に特定のアニメーションをラジオボタン自体にかける事が可能です。
詳しくは以下
写真加工は現在様々なアプリケーションに搭載されており、もはや写真とは切手は切れない関係にありますが、今回紹介するのはWEB上でも動作する写真加工フィルタを生成できるCSSで実現するフィルタジェネレーター「CSSFILTERS.co」です。
このサービスでは、予め登録されたフィルタもしくは、パラメーターを指定して任意の画像にフィルタをかけるとと共に、WEB上で実現するためのコードも出力してくれるというものです。
詳しくは以下
小気味の良いアニメーションはWEBデザインのアクセントとなり、よりクオリティを高めてくれますが、今回紹介するのはローディングアニメなどに利用できるシンプルなCSSスニペット「SpinKit」です。
このアニメーション画像などは一切利用せずには全てCSSで書かれており、HTMLとCSSを書くだけ簡単に実装することが可能です。
詳しくは以下
世界中で様々なフォントが公開されていて、フォントと一口にいっても様々な種類のフォントがありますが、今回紹介するのはLEDに表示されているようなドットで構成される、デジタルチックなフリーフォントを集めたエントリー「20 Best Useful Digital Fonts for LED Banner Designing」です。
上記のようなフォントが全部で２０個まとめられています。今日はその中からいくつか気になったフォントをピックアップして紹介したいと思います。
詳しくは以下
WEBやアプリを製作する上で便利なアイコン。それだけに素材としても非常に多くのアイコン素材が配布されていますが、今回紹介するのは海外のデザイン事務所が運営するフリーアイコンが日々公開されるWEBサイト「Endless Icons」です。
配布されているアイコンは現在100個ほどで、「Kitchen、Food、Sport、Sport Gear、Doodle、Drink」といくつかのカテゴリーに分類されており、ジャンル別にソートすることもできます。
詳しくは以下
フラットテイストのデザインが採用されたiOS7。そのデザインに合うように、webサイトやアプリケーションデザインもテイストを合わせて制作することが多くなってきていると思います。今回はそんな時に便利に活用できる、iOS7のガイドラインにそって作成された300個のフリーアイコンセット「RetinaIcon 300 Free Icons」を紹介します。
300個という豊富な種類が魅力的な、アウトラインタイプのアイコンとなっています。
詳しくは以下
WEBプロモーションでももはや書かす事ができない、スマートフォンユーザーへの対策。それぞれの端末の使い勝手に応じた最適化されたデザインが求められますが、その設計はPC向けのWEBサイトとは違う技術が必要です。今日紹介するのはスマートフォンサイトデザインのためのインスピレーション集「Mobile UI Design Patterns: 10+ Sites for Inspiration」です。
スマホサイトのデザインが集約されたサイトが10以上まとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
回線も光が多くなってきて大きなファイルをやりとりする機会が本当に増えてきましたが、無料で使えるファイル転送サービスやオンラインストレージはコストがかかる物なので当たり前かもしれませんが、国内にはなかなか無い物です。今日紹介するオンラインストレージサービス「firestorage」は無料でしかも容量無制限、そして1ファイル2GBまでといたせりつくせりのオンラインストレージサービスです。
上記にも書いたとおりこれは便利だと思い早速登録してきました。登録方法は非常に簡単で「 無料会員登録 」でメールアドレスを記入するだけでOKで後は登録したアドレスにIDとPassが送られてきます。
詳しくは以下
グラフィック制作にとても便利なベクターデータ。今までDesigndevelopでは数々のベクターデータ関連の情報を紹介してきましたが、今日紹介するのはベクターデータをまとめて配信しているベクターデータ集サイトとも言えるサイトをまとめたエントリー「25 Best Sites to Download Free Vector Files」です。
今日はその中から今までDesigndevelopで紹介していないベクターデータサイトをいくつピックアップして紹介したいと思います。
詳しくは以下
画像に使われている色をアップロードした画像、もしくはURLで指定した画像から色を解析してくれるオンラインサービスが今回紹介する「Whats Its Color」です。サイトのメインの画像の色に合わせる時、画像とデザインのテイストを統一したい時なんかに使えそうです。
画像を指定するだけで、一番多く使われているカラーとその画像に含まれている割合TOP10の色をWEBセーフカラーで表示してくれます。
詳しくは以下
テクスチャの定番としてさまざまなシーンで活用されている木目テクスチャは、表現がワンパターンにならないようにバリエーションはできるだけ多く所持しておきたいもの。今回はそんなシーンにおすすめな、いろいろな雰囲気の木目テクスチャパックまとめ「10 Free Wood Texture Packs for Your Design」を紹介したいと思います。
（Wood Pack by ~kissbomb on deviantART）
定番として利用できるシンプルなタイプから、木目の個性を活かしたタイプまで、多彩な種類が収録されています。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
様々なデザインでもグラフィックでもポイントもしくはメインとして使われる羽ばたく鳥のイメージ。未来とかスタートとかそういった前向きな印象を与えてくれるモチーフですが、今回紹介するのはそんな羽ばたく鳥のシルエットのベクターデータを集めたセット「BB Free Vectors: Birds in Flight」です。
上記のような様々なシルエットの鳥のベクターデータが全部で12種類収められています。
詳しくは以下
デザインの完成度を高めるために重要な要素の一つでもあるフォント。日々、いろいろなタイプのフリーで使用できるフォントも多く登場しています。そんな中今回は、デザイナーがチェックしておきたい 最新のデザインフリーフォント集「New Free Fonts For Graphic Designers」を紹介したいと思います。
Crazy cat Lady FREE font + Prints FOR SALE on Behance
いろいろなテイストのフリーフォントがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
