デザインを開発するという視点でお伝えするクリエイティブBLOG
WEB制作を行う上で、非常に有益な素材の一つアイコンセット。質の高いインターフェイスを気軽に実現できる便利で実用的な素材の一つです。今日紹介するのは、柔らかいラインで描かれたベクターアイコンセット「Linecons Free – Vector Icons Pack」
シンプルなデザインなのでどんなデザインにも応用が効きそうです。スマートフォンのインターフェイスに活用されている例が公開されていましたので下記からごらんください。
詳しくは以下
CSSで実現できる範囲は確実に広がってきており、様々な試みがWEB上ではプロジェクト化され公開されていますが、今回紹介するのはオープンソースライセンスで利用できるCSSリソースのまとめ「Collection of Useful Open Source CSS Resources」です。
上記の他にフレームワークから、ボタン・パーツ系まで様々なサイトがまとめられていましたので、今日はその中からピックアップして紹介したいと思います。
詳しくは以下
インターフェイスを補助したり、デザインの質を上げてくれる、便利な素材アイコン。WEBデザインでは、メニューだったり、その他付随する機能を表すときには非常に重宝しますが、今日紹介するのはシンプルで上質な280個ものアイコンセット「Steadysets – 280 free icons」です。
こちらは普段利用しそうなインターフェイス系のアイコンから、宝石やハート、注射器といったグラフィック系のアイコンまで、全部で280個ものアイコンがセットになったアイコンセットとなっています。
詳しくは以下
WEBサイトを制作していると様々な要件があり、コンテンツの一つとして天気を表示させてほしいなどのオーダーを受ける場合もあると思います。今日紹介するのは無料で利用できるお天気アイコンセット30「30+ Sets of High-Quality Weather Icons for Free」です。
Sketcy Weather Icons Glow ed. by AzureSol
シンプルなものから、かなり書き込まれたものまで、様々なアイコンセットがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
誰もが手軽にWEB制作を行えるようになっていきていますが、個人で制作する際に、ユーザーへの配慮が行き届いたWEBサイトを制作するのはなかなか難しいかもしれません。そんな中今回紹介するのが、最近発表されたPSD UIキットをまとめた「20 New Free PSD UI KITs」です。
Free PSD: Dark Gloss UI Kit | | FreeUIKits.comFreeUIKits.com
WEBサイトからアプリまで、さまざまなシーンで利用できるUIキットが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEB制作で重宝するのがアイコン素材。ベクターで書くこともWEBデザイナーなら難なく可能だとは思いますが、アイデアから制作までの時間を考えると、フリーで利用できるアイコン素材はとても便利な素材の一つです。今日紹介するのはシンプルでミニマルなアイコン素材144個セットにしたアイコンセット「144 minimal icons package 12 A.M」です。
名前の通り非常にシンプルなアイコンなので、どんなサイトでも利用することができそうです。
詳しくは以下
さまざまなデザインの完成度を上げてくれるパターン。上手く利用すればデザインをより作りこんだ形に変えてくれますが、今回紹介するのはパターンを探すときに役立つリソース源を集めたエントリー「20 Great Resources to Download Free Patterns」です。
WEBで使える背景用のパターンから、デザインデータを起こすときに使えるphotoshopパターンまで様々なパターンの配布元が紹介されていました。今回はその中からいくつか気になったサイトをピックアップして紹介したいと思います。
詳しくは以下
デザイン制作シーンで欠かせない存在となっているPhotoshopブラシは、さまざまなコンセプトのものが発表されており、実際のデザイン制作に利用している方は多いのではないでしょうか？そんな中から今回は、Photoshopで利用できる鳥のブラシセットをまとめた「30 Cool Bird Brush Sets for Photoshop」を紹介したいと思います。
Bird Brushset by ~paranoidstock on deviantART
さまざまな種類の鳥が表現できるブラシ素材が多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEB制作に非常に便利なアイコン。内容の説明だったり、インターフェイスの向上だったり様々な側面で寄与してくれますが、今回紹介するのは様々なシーンで使えるプロユースなフリーアイコン集をまとめたエントリー「40 Free Professional Useful Icon Sets for Web」。
Free Mobile Berries Icon Set by templay-team
様々なタイプのフリーアイコンがまとめられています。今日はその中から特に気になったものをいくつかピックアップして紹介したいと思います。
詳しくは以下
jQueryによって誰でも簡単にwebサイトに動きをつけることができるようになりました。ですがなかなか意図通りの動きをするプラグインは少ないもの。そんな中今回紹介するのは、高機能で扱いやすいjQueryスライダーを集めた「Top 30 Fabulous jQuery Sliders for Free」です。
Top 30 Fabulous jQuery Sliders for Free | InstantShift
変わった動きをするスライダー、シンプルなものまで、たくさんのスライダーが紹介されています。その中でも気になるものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
さまざまな機能が追加され、より効率的にデザインワークが進められるようになっているIllustrator。しかし、デザイナーによって機能の使い方は大きく異なり、更に利用できる機能を全てチェックするというのは至難の業。そこで今回紹介するのが、Illustratorのさまざまな機能や技が学べるチュートリアルをまとめた「Illustrator Tutorials: 70+ Awesome Hot New Tips」です。
Astute Graphics Blog : How to Create Vector Denim Texture Using Adobe Illustrator
タイポグラフィの制作からポスター・ポストカードの制作まで、さまざまなチュートリアルが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインテイストやグラフィックによってももちろんですが、webデザインをする際には”色”もデザインの方向性を決めるのにかなり重要な要素となってくるのではないでしょうか？そこで今回は、茶系のwebサイトの実例を集めたインスピレーションデザイン集「A Showcase of Astounding Brown Websites」を紹介したいと思います。
（Web Design Company – Lounge Lizard | Internet Marketing | Web Site Development）
落ち着いた印象の強いブラウン系のwebデザイン、色の使い方によって変化するさまざまなバリエーションを楽しむことができます。今回はその中から気になったものをいくつか紹介いたします。
ビジネスシーンでは資料作りなどでアイコンを使う機会も多くあるかと思います。そんな時にすぐに使える素材、フリービジネスアイコンセット「Free Line & Flat Business Icon Set (50 Icons, PNG & SVG)」を今回は紹介したいと思います。
ポップで明るい印象を与えてくれるアイコンのセットです。
詳しくは以下
WEB制作のデザインにおいて非常に便利なFireworks。最小単位が1pxのため、スライス時にもぶれなく正確に素材が制作できたり、その他様々な面でWEB制作が便利になるように作られているソフトウェアのため、多くのWEBクリエイターが手にしていますが、今回紹介するのはそんなFireworksのテクニックやチュートリアルを集めたエントリー「50+ Excellent Adobe Fireworks Tutorials」です。
画像系から、パーツ作りまで様々なチュートリアルが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
日本では互換性を重視する傾向がつよくまだあまり、特殊なフォントをjavascriptなどで作り出すような手法はスタンダードではありませんが、中には、挑戦的なサイトもあり、フォントをjsやCSSで見せるそんなサイトもあります。今日紹介するのはWEBタイポグラフィ関係のjQueryプラグイン集「jQuery plugins for awesome web typography」です。
FitText – A plugin for inflating web type
フォントを加工するもの、テキストの組を特殊にしてくれるものなど、様々なフォント関連のjQueryプラグインが紹介されていますが、今回はその中から気になったものをピックアップして紹介したいと思います。
詳しくは以下
Lettering.js – A jQuery plugin for radical web typography.
自動的にclassを割り当てて、傾けたり、色を変えたり色々な処理が可能です。
It's Bacon! A jQuery plugin that allows you to wrap text around a bezier curve or a line.
オブジェクトにそって文字組を行なう事ができます。WEB上で紙のようなデザインが可能になります。
Arctext.js – Curving text with CSS3 and jQuery
文字をパスで並べたような、処理をjavascriptで可能にする。
上記の他にもいくつかのタイポグラフィ関連のjQueryプラグインが公開されています。文字をJS側で制御したいと言う方は是非原文もご覧ください。
デザイナーなら一度は手がけたことがあるであろうロゴデザイン。しかし時にはコストや時間の関係で、デザインが難しいシーンもあるかもしれません。今回はそんなシーンで利用できる、さまざまなデザインのロゴデザインテンプレート「130+ Logo Templates To Absolutely Grab For Free」を紹介したいと思います。
3 Vintage Logo Templates – Graphic Delivery
ヴィンテージ風から、ナチュラルなテイストまで、いろんなタイプのロゴデザインがセットでまとめられています。
詳しくは以下
