何かとデザインに必要になってくるアイコン。直感的にユーザーに説明することができ、今や欠かせない存在となっています。今回はそんなアイコンの中でも、定番から個性的なものまでをまとめた「A New Collection Of Free Icons For Designers」をご紹介したいと思います。 Designbeep シンプルなテイストのアイコンは馴染みもよく、バリエーションとしてストックしておきたい種類がずらり。気になったアイコンを幾つかピックアップしてご紹介しますので、以下よりご覧下さい。 詳しくは以下 300+ line icons – PSD, AI, EPS – Freebiesbug 定番のシンプルな細いラインで構成された単色アイコン。他の邪魔をしない取り入れやすいデザインです。300越えの豊富な収録数も魅力的。 Smashing Magazine 明るい青赤黄緑の4色で綺麗に

フラットテイストなデザインが主流となり、使用される素材もそれに伴いフラット化しています。そんな中今回紹介するのは、レトロな色合いが特徴の、110個のフラットアイコンセット「Meroo icon」です。 デザイナー・Hesham Mohamed氏手がける、かわいらしいデザイン感が特徴のアイコンセットです。 詳しくは以下 書類やレター、パソコンディスプレイ、カメラといった比較的定番として使えるものもありますが、どちらかというと個性的なイラストが多い印象。ポップコーンやハンバーガー、ポテトなどの食べ物から、浮輪、パラソルなどの海グッズ、ニワトリ、くじら、人間などの生き物といった具合に、幅広いバリエーションが展開されています。ポイントとしてはもちろん、グラフィックのメインとして使用しても様になりそうです。数が豊富なのも嬉しいですね。 素材はpsd形式。個人・商用どちらでも利用可能なようですので、い

太陽やライトなどのきらめきなど、Photoshopなどのソフトで思い通りの形に作り出すことはなかなか難しいもの。今回はそんな光源を手軽に表現できるテクスチャまとめ「17 High Quality Lens Flare Textures」を紹介したいと思います。 （Pink Lens Texture by bluezircon-graphics on deviantART） いろいろな形の光源がまとめられており、デザインに光のニュアンスを与えることができます。 詳しくは以下 Zircon Graphics – 3 Lens Flare textures 比較的定番として利用できそうなテクスチャ。どんなデザインにも合いそうですね。 Lens Flare Pack by daWIIZ on deviantART シャープな印象を与えることができそうです。4種のパターンがあるので、いろいろ使い回す

線画や面だけで表現されるアイコンは、利用するだけで簡単に機能や意味が表現できるとても便利な存在。より多くの種類をストックしておけば、デザインの幅が広がります。今回はコレクションに是非加えたい、最新のアイコンセットまとめ「33 New and Free Icon Sets」を紹介したいと思います。 Dribbble – Free Icons by Fabrizio del Gaudio フラットタイプから、リアルな表現を施したものまで、さまざまなテイストのアイコンがまとめられています。 詳しくは以下 Free Star Wars Icons by Sensible World スターウォーズに登場するキャラクターをアイコン化。ファンにはたまらないセットではないでしょうか？ Dribbble – Line Icon Set by Natalia ラインのみで表現された非常にシンプルなアイコン。

Illustratorの表現の幅が広がるIllustratorブラシセットまとめ「75+ Illustrator Brush Sets for Download」 クオリティの高いデザイン制作のために、細かいパーツを一つ一つ制作したり、パーツの加工をPhotoshopで行うことも多いと思いますが、一手間も二手間もかかり、制作時間も増えてしまいます。そんなシーンに是非活用したい、Illustratorの表現の幅が広がるIllustratorブラシセットをまとめた「75+ Illustrator Brush Sets for Download」を紹介したいと思います。 （illustrator brush set 3 by ~nrmb on deviantART） さまざまな罫線を制作できるブラシや、繊細なモチーフやパーツを表現できるブラシが多数紹介されています。中でも気になったものをいくつか

TOP  >  Design  >  時代を感じさせるような演出がしやすいテクスチャまとめ「20 Free High Quality Vintage Texture Packs」 高級感のある雰囲気を表現できるビンテージ素材は、デザインの奥行きを感じさせるのにとても使いやすいのではないでしょうか？そんな中今回紹介するのが、時代を感じさせるような演出がしやすいテクスチャをまとめた「20 Free High Quality Vintage Texture Packs」です。 Vintage Paper II TEXTURE PACK by ~Knald on deviantART 質感や時代を感じられるテクスチャ素材が多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Victorian grunge texture pack

TOP  >  Design , Photoshop  >  デザインに手軽に質感をプラスできるグランジブラシまとめ「Ultimate Collection Of Grunge Photoshop Brushes」 グラフィック制作をする際に非常に役立つブラシ素材。アレンジによく使用されるという方も多いのではないでしょうか。今回紹介する「Ultimate Collection Of Grunge Photoshop Brushes」でも、ぜひコレクションに取り入れたい、クオリティの高いブラシ素材がたくさん紹介されています。 （Urban Squares Photoshop Brushes） シンプルで定番として活用できるタイプから、グラフィックにインパクトや個性を持たせたい時に役立つタイプなど、たくさんのブラシがまとめられています。中でも気になったものをピックアップしましたので、下記より御

TOP  >  Design , Font  >  デザイナーに必須のフリーフォント集「20 High Quality Free Fonts Every Designer Should Own」 フリーで配布されているフォントでも、クオリティーが高く使いやすいフォントは多数存在しています。そんな中今回紹介する「20 High Quality Free Fonts Every Designer Should Own」は、普段のデザイン制作に是非取り入れてみたいフリーフォント集です。 （The League of Moveable Type – Sorts Mill Goudy） 基本ベースはシンプルですが、少し遊び心が詰まったフォントが多数紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Lost Type Co-op | ONRAMP

TOP  >  WebDesign  >  様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 WEBでは様々なデザインレイアウトがあり、クリエイティブで大きな差はできますが、基本のレイアウトはある程度決まっており、制作する上で、ベースとなるレイアウトテンプレートがあるだけで随分と楽になります。今日紹介するのは様々なCSSレイアウトをダウンロードできるサイトをまとめたエントリー「465+ Useful CSS Layouts for Download」です。 Nice and Free CSS Templates/Layouts by My Celly 基本的な1カラム、2カラム、3カラムといったベーシックなものから、シンプルなものまで様々なCSSテンプレートがダウンロード可能です。今日は紹介されている中か

デザイン制作に欠かせない自然素材のテクスチャは、いつでも手軽に利用できるようにストックしておきたいもの。そこで今回紹介するのが、幅広い材質の木材テクスチャを集めた「25 Handy Wood Textures」です。 （Wooden planks by *IncineratedMortality on deviantART） ベクターで描かれた木材から、古木・炭のテクスチャまで、さまざまな種類が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Wooden Hedge – Seamless by ~artbees on deviantART シームレスに利用できる平木のテクスチャです。シンプルな素材なので、デザインテイストを選ばず利用することができそうです。 ■Different Wood Textures Vector »

ページ移動が必要なwebページを快適に閲覧してもらうために重宝する素材アイコン。WEBサイトの内容によっては、分かりやすく表現するために多くの種類のアイコンが必要になります。そこで今回紹介するのが、webデザインに必要なアイコンが500個もまとめられたアイコンセット「「500+ web icons pack」です。 上記のとおりシンプルで使いやすいデザインのアイコンセットとなっています。 詳しくは以下 「500+ web icons pack」には、ホームや設定・電話などを表す一般的なUIを示すアイコンはもちろん、大型ショッピングモールに表示されているような案内アイコン、ビジネスシーンで使いやすい時計やグラフを示すアイコンなど、生活のあらゆる状況がアイコンとしてセットになっています。 シンプルなシルエット素材になっているので、流行などに関係なく利用できるというのが嬉しいですね。PSDデータ

TOP  >  Design  >  デザインが整ったフリーCSSテンプレート集「20 Beautiful Free CSS Web Templates」 webサイト制作に欠かせないCSSですが、度重なるバージョンアップや活用方法の多様化で、常に新しい技術の習得が必要になります。そこで今回は、デザイン性の高い整ったフリーCSSテンプレートを集めた「20 Beautiful Free CSS Web Templates」を紹介したいと思います。 （Darkness Free Website Template | Free Website Templates | OS Templates） シンプルで洗練されたCSSや機能的なCSSなど、さまざまなCSSが紹介されています。中でも気になったものをいくつかピックアップしてみましたので、下記よりご覧ください。 詳しくは以下 ■Web Templa

TOP  >  WebDesign  >  ダークな印象のwebデザイン集「35 Creative Dark Web Designs for Inspiration」 カラーの使い方がユーザーに与える印象を大きく左右するwebデザイン。そんな中今回紹介するのは、ダーク色を基調にしたwebデザイン集「35 Creative Dark Web Designs for Inspiration」です。 （Soranji…All Beauty is Lost） ダーク色を用いることで画像やテキストを効果的に見せているwebサイトが、多数紹介されています。中でも特に気になったwebサイトをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■unaghii / Otherwise known as Victor Abadio マウスオーバーした部分だけが明るく見えるデザインとなって

デザイン性の高いWEBサイトphotoshopチュートリアル「25 Excellent Photoshop Web Design Layout Tutorials」 WEBサイトデザインをする方法は様々でクリエイターによって利用しているソフトウェアも異なると思いますが、今回紹介するのはphotoshopを利用して制作するデザイン性の高いWEBサイトphotoshopチュートリアル「25 Excellent Photoshop Web Design Layout Tutorials」です。 25 Excellent Photoshop Web Design Layout Tutorials 洗練されたものからPOPなものまで幅広いデザインのWEBデザインのphotoshopチュートリアルがまとめられています。今日はその中からいくつか気になったチュートリアルをピックアップして紹介したいと思いま

TOP  >  Design , Photoshop  >  【商用可】様々な印象を演出できるカラービンテージテクスチャ「Colored Vintage Paper: Texture Pack」 デザインの雰囲気をガラリと変えてくれるテクスチャ。今回紹介するのは、グランジ感のあるシンプルなカラービンテージテクスチャ「Colored Vintage Paper: Texture Pack」です。シンプルながらもカラーバリエーションが豊富なので、使いやすく、どんなデザインにでも活躍してくれそうです。 全部で20種類のカラーリング収録されています。いくつかのカラーをピックアップして紹介したいと思います。 詳しくは以下 Colored Vintage Paper Texture 01 (Aqua) Colored Vintage Paper Texture 03 (Brown) Colored V

TOP  >  WebDesign  >  オレンジ色を効果的に利用したwebデザイン「Examples of Orange in Web Design」 テーマカラーを取り入れることで、より印象的なwebサイトに仕上げることができると思います。今回紹介する「Examples of Orange in Web Design」は、オレンジ色を効果的に利用したwebデザイン集です。 オレンジ色といってもさまざまなカラーバリエーションがあり、サイトのテイストやイメージに合わせて上手に使い分けられています。気になったwebサイトをいくつかピックアップしました。下記よりご覧ください。 詳しくは以下 ■TEDxToronto 2011 Conference | Ideas Worth Spreading ポイントカラーとしてビビットなオレンジ色が使用されています。シンプルなデザインの中に映えるカラーの

TOP  >  Design , Photoshop  >  便利で使いやすいベクターPhotoshopブラシ集「250+ Useful Vector Photoshop Brushes」 デザインを作成する際には、さまざまなデザイン用ソフトを利用します。中でも使用頻度の高いPhotoshopは、ラインのきれいなベクター画像を素材として描くにはテクニックが必要になります。そこで今回紹介するのが、Photoshopで手軽に利用できるベクターブラシセットを集めた「250+ Useful Vector Photoshop Brushes」です。 （Flower Brush Set 1 by ~gvalkyrie on deviantART） 未来的なデザインから、ポップなデザインまで、イラストレーターで作成したかのような使いやすいベクターブラシが豊富に紹介されています。中でも特に気になったものを

TOP  >  WebDesign  >  webサイト制作のアイデアソースとなるポートフォリオサイト30選「30 Portfolios to Inspire You」 自信のこれまでの作品やアートワークを、多くの人に見てもらう為に作成するポートフォリオサイト。作品はもちろん、サイト自体のデザイン性やクリエイティブ性も、センスを問われる重要な要素の一つです。そこで今回は、ポートフォリオサイト制作の参考となりそうなwebサイトまとめ「30 Portfolios to Inspire You」を紹介したいと思います。 （Rickard Sund） 素材や色使いへの配慮が行き届いたポートフォリオサイトが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Veronika Goldberg 白背景のすっきりとしたデザインとなっており

TOP  >  WebDesign  >  スライドショーを用いたwebデザインまとめ「30 Inspiring Examples of Slideshows in Web Design」 商品の写真や、メインのグラフィックを効果的に見せてくれるスライドショーはwebデザインのさまざまなシーンで活躍してくれます。今回はそんなスライドショーを用いたwebデザインまとめ「30 Inspiring Examples of Slideshows in Web Design」を紹介したいと思います。 （Print Mor – NYC – Since 1987 | Home） シンプルな横スライドから、サイト全体を動かすような個性のあるものまで、いろいろなタイプのスライドショーを楽しむことができます。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■rel

WEBサイトには欠かせないフォーム。様々な情報のやりとりに利用されていて、多くのWEBサイトで利用されていますが、今回紹介するのは一般的なコンタクトフォームから、ログインフォーム、EC用のフォームまで、様々なフォームに対応したjQueryベースのWebフォームライブラリ「jFormer」です。 「jFormer」はバリデーション機能も備えたフォームのフレームワークで、AJAXを使ったページ遷移や、入力データのレジュームなど、細かな機能も標準で備わっており、フォームの開発の時間を短縮してくれます。 詳しくは以下 基本的にフォームの部分はphpで作られており、デザインをCSSで、動きなどはjavascriptを利用しています。 多彩なデモは「Demos – jFormer」からご覧いただけます。またベーシックなコンタクトフォームのつくり方は「Installation and Documenta