デザインを開発するという視点でお伝えするクリエイティブBLOG
ディスプレイ領域が多様化し、対応する最小解像度次第では、背景部分が大きく見えることも多く、背景のデザインがWEBサイト構築に置いても、印象を決定づける大きな要素の一つになりつつありますが、今日紹介するのは一枚でクリエイティブ感を演出するブラー背景素材をまとめたエントリー「Useful Blurred Background Resources」です。
こちらは、雰囲気のある光がボケたような表現の背景素材をまとめたエントリーです。いくつか紹介されていますが、今日はその中から幾つかきになったものをピックアップして紹介したいと思います。
詳しくは以下
12 Blurred Backgrounds
1600×1200のjpgで背景素材が12枚まとまっています。落ち着いた感じの光です。
Blurred Landscape Images
こちらは光ではなくて、写真をぼかしたもの。背景に置くことで遠近感も演出できます。
Light Kit Ps
様々なひかりの演出の写真セット。
上記の他にも様々なボケが効いた背景素材がまとめられています。サイトの印象をガラリと変えてみたいという方は是非どうぞ。
A Handy Collection Of Useful Blurred Backgrounds Resources | DesignWoop
アラートを出したり、案内をだしたり非常に多様な使い方で便利に使えるモーダル。それだけに多くのWEBサイトで利用されています。今日紹介するエントリーは、便利なjQueryモーダルプラグイン15選「15 Cool jQuery Modal Plugins」です。
SimpleModal / Eric Martin / ericmmartin.com
シンプルなものから、ギャラリー的なら利用ができるものまで幅広く収集されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
web制作の際には、ユーザビリティの高い設計に加え、視認性の高いデザイン素材を使用する事も重要。今回はそんなデザイン制作の際にチェックしたい、WEBとモバイルのUIキットをまとめた「40+ Fresh and Free Web UI and Mobile Kits for Developers and Designers」を紹介したいと思います。
シンプルなUIはもちろん、シーンに合わせて使いやすいUIデザインが、たくさん紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
インスタグラムやスマートフォンアプリで一気に身近になったフォトフィルター。写真に色を乗せたり、色を抜いたり、様々な加工を施して写真の印象を簡単に変えてくれるものですが、今回紹介するのはフォトレタッチソフトを利用したものではなく、CSSで実現するphotoフィルタ「Create a Trendy Retro Photo Effect Purely with CSS」 です。
こちらは現状webkitベースのsafariやChromeしか正しく動きませんが、CSSのみで実現しているため。classを指定するだけで、WEB上の写真にフィルタがかけられるようになります。
詳しくは以下
直感的に利用できるタッチパネルのスマートフォン。操作には独特のアクションを用いる場合があり、タップ、ダブルタップ、ピンチインなどの単純なものから。三本指でスワイプしたり5本指全てを利用したタッチ操作もあります。今日紹介するのは、そんな様々な操作方法があるタッチデバイスの操作説明に使えるジェスチャーアイコンセット「TOUCH GESTURE ICONS」です。
全部で30のジェスチャーアイコンが登録されています。非常に分かりやすくアイコン化されており、利用しやすいものになっています。
詳しくは以下
WEB以上にUIが重要視される、モバイルアプリ開発。当然情勢も刻一刻と変わっていきスピード感も求められます。今日紹介するのは直感的にスマートにモバイルアプリのUIが作れるモックアップサービス「fluid」。
ブラウザ上で、用意されたパーツを並べていくだけで簡単にUIを設計することができます。非常に直感的に操作できるようになっており、海外のサービスですが、説明やチュートリアル無しで制作していくことができました。
詳しくは以下
特にwebサイトを制作する際に欠かせない存在といっても過言ではないアイコン。種類やテイストにもさまざまなものが存在しています。そんな中今回は、デザイナーのためのフレッシュなアイコンセットまとめ「20+ Fresh and Free Icon Sets for Web Designers」を紹介したいと思います。
いろんなテイストやテーマのアイコンが多数まとめられており、状況に応じて使い分けることができるようになっています。
詳しくは以下
photoshopのブラシを使うと表現の幅はかなり広がります。今回紹介する「100 Awesome High Resolution Photoshop Brushes」はフォトショップのブラシが100個集められていてそのブラシで作られたイメージサムネイルを見ながら選べると言う物です。
ペン先でずらーっと並ぶよりも上記のようなイメージ画像の方がかなり分かりやすいです。種類もグラフィカルなものから可愛らしいものまで様々な種類のブラシが集められています。これらの配布されているブラシを駆使すればアーティステックな作品が作れそうです。
詳しくは以下
サイトを構築する際のグラフィカルインターフェイスとして活躍するアイコン。今までDesigndevelopでは様々なフリーアイコンを紹介してきましたが、今回紹介するのは1000種類以上のアイコンを収録したフリーアイコンセット「Fugue Icons」です。
アイコンのデザイン感は統一されて制作されていますので統一して使えばデザインのクオリティは高まるかと思います。コレだけの数が揃っていて種類も豊富なので、どんなサイトでも対応できるはずです。
詳しくは以下
インターネット上にはさまざまな種類の素材が配布されていますが、決められたテーマだけでなく、いろんなパターンから選択したい時も時にはあるのではないでしょうか？そんな中今回紹介するのは、デザイン制作の参考資料・素材として活用できるコンテンツツール「9 Awesome Free Tools To Make Unique Creative Content」です。
デザイン制作をする時に活用すれば、よりクオリティの高い制作物を完成させることができそうな便利なツールが紹介されています。
詳しくは以下
WEBではユーザーと運営者をつなぐもっとも一般的な手段であるコンタクトフォーム。何が目的でコンタクトを取っていただくかにもよりますが、その使い勝手やデザインは、途中で離脱させないためにも様々な工夫が必要であると言われていますが、今日紹介するのはクリエイティブでセンスのあるコンタクトフォーム集めたエントリー「Inspiring & Creative Contact Forms」です。
Contact • Café Evoke // Coffee, Wine, Beer, Eats, and Catering in Edmond & Oklahoma City
一般的に国内でよく見るコンタクトフォームでは無く、海外のものが中心で、どれもクリエイティブなものとなっています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
内容をPRしたり、注目度をアップさせたいときに利用することの多い矢印ですが、その表現方法はとても多彩です。そんな中今回は、さまざまな矢印が表現できるPhotohsopブラシをまとめた「55+ Useful Sets of Photoshop Arrow Brushes」を紹介したいと思います。
110824_arrow17_by_eleven by ~eleven1627 on deviantART
手書きの可愛らしい雰囲気のブラシから、アイテムをモチーフにしたブラシまで、いろいろなブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
web上で非常にたくさん配布されているフリーフォント。デザインに合わせてさまざまなバリエーションが選べるようになっています。そんな中今回紹介するのは、幅広いデザインに汎用できるフリーフォント「25 Beautiful Free Headline Fonts」です。
（Prime free font | Fontfabric™）
個性を主張しすぎることなく、いろいろなテイストでアレンジ可能なフォントが多数まとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
WEBページでページが見つからない時に表示されるエラー404。通常ブラウザに表示されるものはありますが、あまりにもあっさりしすぎていて、表示された場合がっかりしています。今日紹介するのはそんなネガティブな404ページをクリエイティブに製作されている事例を集めたエントリー「50 Professional and Creative 404 Error Page Designs」です。
上記の他にも様々なクリエイティブな404エラーが紹介されています。幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
特定の絵柄を敷き詰めていくことができるパターン。デザインを作りこんでいく上で、簡単に質感を高めたりディテールを高めたりすることができます。今日紹介するのは制作に便利な、photoshop、illustratorパターン集「50 Tileable and Seamless Pattern Sets (500+ Patterns)」というエントリー。
Seamless Paper Patterns – 6 Patterns (Photoshop & JPG)
photoshop、illustratorと制作には欠かせないソフトで利用出来るパターンが集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
アイコンを利用することは、ユーザーがサイトをより快適に利用するための手段の一つ。こだわりを持って選びたいものです。そこで今回紹介するのが、デザイン制作に使いやすいノートアイコンばかりをまとめた「25 Sets of Useful Notes Icon」です。
デフォルメされたデザインがかわいらしいアイコンから、立体感の美しいアイコンまで、さまざななノートアイコンが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
