デザインを開発するという視点でお伝えするクリエイティブBLOG
WEB制作で重宝するのがアイコン素材。ベクターで書くこともWEBデザイナーなら難なく可能だとは思いますが、アイデアから制作までの時間を考えると、フリーで利用できるアイコン素材はとても便利な素材の一つです。今日紹介するのはシンプルでミニマルなアイコン素材144個セットにしたアイコンセット「144 minimal icons package 12 A.M」です。
名前の通り非常にシンプルなアイコンなので、どんなサイトでも利用することができそうです。
詳しくは以下
背景やエリアなどに敷くパターン素材。無機質なWEBデザインに質感やクオリティをプラスしてくれる非常に便利な素材です。今日紹介するのはシンプルなフリーパターン素材を集めたエントリー「15+ Free Patterns for your Designs」です。
Subtle Light Tile Pattern Vol5
様々な素材のパターンがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
植物などの自然素材を使用したデザイン制作を行うことも多いと思いますが、身の回りにある植物だけを使用しようとすると、素材の選択の幅が狭くなってしまいます。そんな中今回紹介するのが、さまざまな樹木の樹皮が揃ったテクスチャをまとめた「25 Free Bark Textures For Designers」です。
Old Yew Bark Stock Texture by *aegiandyad on deviantART
若々しい樹木のテクスチャや、朽ち果ててしまいそうな樹木のテクスチャまで、さまざまな樹皮のテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインに質感を与えたり、クオリティを簡単に向上してくれるパターン素材。使い方によっては、単なる図形が全体を引き立てる要素に変わったりしますが、今日紹介するのは、便利に利用できる、クリエイティブで使えるフリーphotoshopパターンを集めたエントリー「40 Unique & Free Photoshop Patterns」です。
様々な種類のphotoshopで利用できるパターンが全部で40種類まとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
イルミネーションがキレイな季節となっていますが、毎日仕事に追われているとなかなかゆっくり風景を眺められる時間も少ないのではないでしょうか？今回はそんな方々におすすめの、デスクトップを美しく飾れる光のウォールペーパーをまとめた「35 Colorful Bokeh Wallpaper for your Desktop」を紹介したいと思います。
NIGHT BOKEH WALLPAPERS | NIGHT BOKEH STOCK PHOTOS
ファンタジックな雰囲気のウォールペーパーからシックで落ち着いた雰囲気のウォールペーパーまで、さまざまなウォールペーパーが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
素材感や質感をデザインに与えてくれる背景テクスチャ、グラフィック・WEBデザイン問わず非常に便利な素材の一つですが、今日紹介するのはクリエイティブな雰囲気を演出するブラーテクスチャ100「100 Free Blurry Textures」。
全部で100種類のブラーテクスチャがzipファイルにまとめられており、シンプルなものから、カラフルなものまで、幅広い質感のものがセットになっています。
詳しくは以下
ファイル形式はjpgで、サイズは2592×1936ピクセルと比較的大きなサイズになっています。さらにありがたいことに、個人利用、商用利用ともに許可されており、広告などの受託のクリエイティブワークにも利用できます。
ダウンロード元には「ビールをおごる」ボタンも設置されているので、本当に役に立ったという方はそちらも是非。
通常CSSはプログラミングのようなifのように条件付けなどはできませんが、今回紹介する「Conditional-CSS」はCSSで条件分岐を実現する画期的なものです。
ブラウザや環境が多様化しているなかでは非常に便利な仕組みだと思います。ブラウザ毎に条件を個別に設定する事もできますし、あらかじめ定義しておけば、cssA、cssXなど複数条件をまとめておく事もできます。
詳しくは以下
Conditional-CSSの「デモ」はこちらからどうぞ、IE、firefox,opera,safariでそれぞれ表示が異なります。コード自体は簡単で公式サイトを見ればすぐにわかるかと思いますが、実装にはサーバー側でプログラムを走らさないといけません。プログラムのダウンロードは「Conditional-CSS | Download」からどうぞ。
かなり便利なものでコチラを使えば、様々な環境で表示を最適化する事が出来るかと思いますが、毎回プログラムを読み込む仕組みなので、アクセスが多いサイトでは注意してください。実装の手順として詳しく説明されているサイトをいくつか紹介しておきます。使ってみたいと言う方はそちらを参考にしながら試してみてください。
【参考サイト】
[CSS]スタイルシートに「if」を使った条件式が利用できる -Conditional-CSS | コリス
CSSの記述に条件文が使えるようになる「Conditional-CSS」:phpspot開発日誌
ユーザーが運営側に問い合わせを行いたい時に利用するコンタクトフォーム。基本シンプルなタイプを見かけることがほとんどですが、デザインにこだわりを見せるwebサイトはフォームも一味違ったクリエイティブ要素の高いものとなっているようです。そこで今回は、デザイン性の高いフォームデザインのあるwebサイト集「25 Excellent Examples of Forms in Web Design」を紹介いたします。
（Contact Vincent Mazza, Morris County’s top Web Site Design and Graphic Designer）
デザインのテイストに合わせて、通常のコンタクトフォームとは一線を置いたユニークかつ、デザイン性の高いフォームを持ったwebサイトがまとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。
webサイトをより効果的に見せるための手段としてjQueryを選択するという事も多いと思います。今回紹介するのは使えるjQueryプラグインまとめたエントリー「10Useful jQuery Plugins」です。
シンプルなものから少し変わったギミックのプラグインまで幅広いジャンルのものが紹介されています。今回はそのなかからいくつかきになったプラグインを紹介したいと思います。
詳しくは以下
arbor.js
グラフの可視化ライブラリにより画面のリフレッシュ処理や仕事の効率化が可能になります。ユーザーが必要な情報を選んで表示させたりと、見る人によって得ることのできる情報が異なるコンテンツ制作ができそうです。シンプルな線で綺麗に系統立てられているので、さまざまな場面で使いやすいと思います。
Mobily Playground – MobilyMap
任意の画像からGoogleマップのような、ドラッグ可能なインターフェイスを作成することができます。地図だけでなく大きな画像を表示させて、画像の細部までじっくり見ることができるようになるのではないでしょうか？
Awkward Viewline
単純な直線上にすべてのメディアタイプを表示するためのプラグインです。例えば、製品ラインをいくつも表示したいときに使用すると便利です。画面のスクロールもとても滑らか使いやすく、インパクトを与えることができそうです。
liteAccordion
最近サイトでよく見かける、クリックすると画像が横スクロールするタイプのプラグインです。わずか4.5キロバイトのデータ量なので、気軽に使うことができます。basicやblackなどのテーマ選択やオートプレイ等の選択ができるというのも嬉しいです。
サイトの表現方法は無限に広がっており、アイデアを形にできる環境が整っているので、JQueryプラグインを効率的に使用して、新たなアイデアを形にすることができそうです。他にもたくさんのテンプレートが紹介されていますので、気になる方は下記よりご覧ください。
YouTubeが国内が問わず大人気で様々な動画が集まっている事から、そこの中から動画を紹介する事自体をコンテンツとしているWEBサイトやブログが多数存在します。
単純にリンクを教えてくれたり、埋め込んで紹介してくれる所もありますが、中には広告テキストリンクと絡めて紛らわしい表現をしている所も多々あります。そこで今回紹介するのはそんな紛らわしいリンクをYouTubeへのリンクかどうか一目で見分ける事を可能にするGreasemonkeyスクリプト「embed YouTube」を紹介したいと思います。
デザイナーとして常にチェックが欠かせないフォント。手書き一つとっても筆のはね具合などでイメージが変わってきてしまいます。今回は幅広いタイポグラフィのデザインがまとめられた「Free Fonts – 17 New Fonts For Designers」をご紹介していきます。
Free Conditional Script Font on Behance
斬新なデザインでインパクトのあるものなど、多彩なフォント。下記にいくつかピックアップしているので、ご覧下さい。
詳しく見る
流行の最先端を行くデザインだけでなく、時にはテーマに合わせてどこか懐かしさが漂うテイストで制作することもあるかと思います。今回はそんなシーンでおおいに活用できる、レトロテイストなデザインのブラシまとめ「21 Sets Of Free Retro Brushes For Photoshop」を紹介します。
一世代前の時代を彷彿とさせる、レトロな雰囲気のブラシが21種まとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
Photoshopでのさまざまな加工に使いやすいブラシ。手軽に表現力をアップさせるためのツールとして利用している方も多いと思います。そこで今回紹介するのは、普段使いにぴったりなフリーPhotoshopブラシを集めた「20 Free Photoshop Brush Set for Designers」です。
（Feathers Photoshop Brush Set – Free Photoshop Brushes | Brush King）
自然のリアルな表情を付けられるものから、飾りや背景テクスチャとして使いやすいものまで、さまざまなブラシセットが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
photoshopのブラシやベクターデータは使い方や用途によってはデザインの作業時間をかなり短縮してくれます。今日はナチュラル系のデザインをしている方にピッタリな、空や、植物、雷など自然系のphotoshopブラシやベクターデータをまとめたエントリー「64 Beautiful And Free Nature Brush Sets And Vectors」を紹介したいと思います。
かなり自然と言っても多種多様な素材が全部で64個用意されていますので、かなり役立つかと思います。今日はその中でも気になるブラシをいくつか紹介したいと思います。
詳しくは以下
デザインのクオリティを高めるために、フォント選びはとても重要な工程。今回はそんなシーンで利用したい、ハイセンスさを感じられるフリーフォントまとめ「Freshest Free Fonts for Designers」を紹介したいと思います。
Bellico Typeface + Bonus Vectors – download free fonts by PixelBuddha
洗練かつデザイン性を感じられる最新のフォントがピックアップされ、紹介されています。
詳しくは以下
webデザイン制作に頻繁に使用するアイコンは、できるだけ豊富に種類を所持しておきたいもの。そんな中今回は、明るい色合いのポップテイストなアイコンセット「Free Icons: Candy UI Icon Set」を紹介したいと思います。
使用頻度の高い定番のデザインを中心に、全部で120個のアイコンがセットになっています。
詳しくは以下
