デザインを開発するという視点でお伝えするクリエイティブBLOG
さまざまなショッピングを楽しめるECサイトは、サイトデザインももちろん重要ですが、やはり”使いやすさ”がかなり重要視されるのではないでしょうか？そこで今回は、ECサイトで活用できるアイコンセット「Freebie Release: Glossy E-Commerce Icon Set」を紹介したいと思います。
分かりやすいグラフィック表現が求められるECサイトに最適な、立体感でツヤ感のあるカラフルなデザインがとても印象的なアイコンセットとなっています。
詳しくは以下
WEBデザインにおいては非常に使える素材、アイコン。様々なアイコンが制作され、フリーアイコンもかなりの数、種類が世界中でリリースされていますが、今日紹介するのはシンプルなピクトグラム&シンボルフリーアイコン集「25 Free Pictogram and Symbols Sign Icon Sets」です。
DEFAULT iCON
License:Creative Commons Attribution-No Derivative Works 3.0
どんなWEBデザインでも使える汎用性の高いアイコンセットが全部で25セット紹介されています、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
さまざまなデザインシーン、特にwebデザインなどで非常に多く使用する機会の多いアイコンは、バリエーションがいくつあってもありがたいもの。そんな中今回紹介するのは、シンプルな矢印アイコンセット「Matte Blue And White Square Icons Arrows」です。
白地をベースに青や赤、紫色などでいろんな形・種類の矢印が描かれたのアイコンが数多く収録されています。
詳しくは以下
媒体を選ばず、幅広く利用されているクリエイティブツールphotoshop。利用されているシーンも多く、そのため、photoshopのための素材は世界中で数多く公開されていますが、今日紹介するのはWEB制作に便利な60種類のアイコン、ボタンPSD素材をまとめた「60 PSD Icon and Button Templates」です。
WEB制作では、ボタンやアイコン等、細かな素材のクオリティが全体のクオリティを決定づける要素の一つになりますが、細かな処理やデザインを加えるというのは小さな素材といえども時間がかかります。原文では、時間を短縮できる便利につかえるpsdがまとめられていましたが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
WEBデザインには非常に便利な素材の一つアイコン。ユーザーインターフェース的な部分とデザイン的な部分のクオリティを上げてくれる便利な素材ですが、今回紹介するのはデザイナーと開発者のための新しめのアイコンセット「30 Fresh and Free Icon Sets for Designers and Developers」です。
260 Free Vectors Icons (User Interface Design Framework)
グラフィカルなものからシンプルなものまで様々なアイコンセットが紹介されていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
ファビコンを制作するWEBサービスは「仕上がりを見ながらFavicon制作できる「favikon」」や「AJAXで動くシンプルなfavicon制作サービス「Genfavicon」」などいくつか紹介してきましたが、今回紹介する「
Free Favicon」はファビコンサービスでありながらフリーでハイクオリティなファビコンを配布しています。
様々なWEBサービスでファビコンは簡単に作れるようになりましたが、自分で作るのは苦手、アイデアが思い浮かばないと言う方にはピッタリのサイトだと思います。
詳しくは以下
WEBの素材の定番中の定番のテクスチャ。世の中には様々なテクスチャ素材が公開されていますが、自分で作ってみようかなと思った時に便利なのが今回紹介するハイクオリティなテクスチャを作るためのチュートリアル「Ultimate Guide for Creating High Quality Textures」。
いくつかのカメラ、ソフトウェア、シャープ、ライティングなどなどテクスチャを制作する上でのいくつかのキーポイントにわけてそれぞれ詳しく解説されています。今回はその中から一つだけ紹介したいと思います。
詳しくは以下
FLASHでのスライドショーは色々とカスタマイズできて見栄えも良くクリエイティブな感じですが、当然FLASHの取得がある程度必要になってきますし、カスタマイズも普段コードばっかり描いてる人には少し厄介です。今回紹介するのはFLASHのようなクリエイティブなスライドショーをJavascriptで実現させた「COULOIR」です。
写真の切り替えエフェクトやデザインはかなりシンプルでどんなサイトでも合うデザインになっています。機能的にはスライドショーとしての最低限の機能が実装されているという感じです。動作デモは「Couloir.org: Resizing, Fading Slideshow Demo」です。
このスライドショーの実装にはprototype、moo.fx、soundmanagerなどの既存のライブラリが必要ですが、配布元にはこれらのライブラリも含めて配布してくれているのでダウンロードしてすぐに使う事ができます。ソースのダウンロードは下記のリンクの上部「About this Slideshow »」を押して出てくる「Download the source」からどうぞ。
WEBプロモーションでももはや書かす事ができない、スマートフォンユーザーへの対策。それぞれの端末の使い勝手に応じた最適化されたデザインが求められますが、その設計はPC向けのWEBサイトとは違う技術が必要です。今日紹介するのはスマートフォンサイトデザインのためのインスピレーション集「Mobile UI Design Patterns: 10+ Sites for Inspiration」です。
スマホサイトのデザインが集約されたサイトが10以上まとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
印象的なWebサイトに仕上げるには、印象的な写真を取り入れるのが効果的ですが、思い描いている写真の質感を表現するためには、Photoshopの機能を駆使しなければならないことも。今回はそんな時に便利に活用できる、写真を簡単に印象的に仕上げてくれるPhotoshopアクションのまとめ「45 Amazing and Free Photoshop Actions」です。
Free HDR Photoshop Action – PhotographyPla.net
ヴィンテージテイストを中心に、シーンに合わせて選べるさまざまな加工アクションが用意されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
Fontがデザインに与える影響は大きく、書体一つでデザインの印象ががらりと変わってしまうものです。だからこそ、書体はなるべく良いものを揃えておきたいし、使い勝手の良いものを持っておきたい。今日紹介する「37 FREE Must-Have Fonts」と言うエントリーは押さえておきたいフリーフォントをまとめたエントリーです。
全部で37個ものフリーフォントが紹介されていますが、今日はその中から気になったフォントをピックアップして紹介したいと思います。
詳しくは以下
デザインをする際、自分で素材のすべてを手がけるといったこともあると思いますが、多くが素材を利用して作られているもの。デザインに合わせていろんなタイプの素材が必要となってくると思います。今回はそんなときに参考にしたい「1001FreeDownloads.com: Exclusive FREE Digital Design Resources」を紹介したいと思います。
Free Vectors: Designers table with tools. Vector illustration | Objects
いろいろな種類のフリーデザインリソースを集めた、デザイナー必見のまとめとなっています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
webデザイン業界の移り変わりの早い流行と共に、フリーで配布されている素材も常に新しいものがどんどんと登場しています。そんな中今回は、ハイクオリティな最新フリーリソースまとめ集「50 Free Resources for Web Designers from May 2016」を紹介したいと思います。
Free Isometric Stationery PSD Scene Creator by ZippyPixels – Dribbble
UIやフォント、アイコン、モックアップなど、さまざまな種類の素材が多数まとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
現在主流のフラットデザイン。シンプルなデザインが特徴ですが、これまでに制作したことがない方にとっては、コツをつかむまでに時間を要することもあるのでは？今回はそんな制作シーンに活用したい、PSD UIキット「15 Latest PSD Flat UI Kits for Designers」を紹介したいと思います。
（EAMEJIA | Premium and free graphic design resources | Flat UI Kit PSD）
フラットデザインテイストの、さまざまなwebデザインで利用できるUIがセットになって紹介されています。
詳しくは以下
Free Spark Flat UI Kit | Vector Chameleon
エメラルドグリーンのカラーリングが特徴のUIキット。クリーンな印象のデザインにおすすめ。
Robotic UI
フラットテイストの中にも、デザイン効果で立体感もところどころに取り入れたUIキット。デザインを印象的に仕上げたい時に。
Flat User Interface Kit on Behance
4つのカラーパターンがまとめられています。デザインするベースカラーに合わせて使い分けることができるのでは。
まずはUIキットを使ってフラットデザインのイメージをつかみとり、さらにデザインに応用を加えてみるのも方法かもしれません。是非活用してみてください。
PSD Flat UI Kits Free Download | Design | Graphic Design Junction
webサイト制作では、対象ユーザーに合ったUI(ユーザーインターフェイス)デザインの構築が、サイト滞在時間を伸ばすための重要な要素ではないでしょうか？そこで今回紹介するのが、Photoshopで制作されたクオリティの高いUIデザインを集めた「35 High Quality PSD UI Web Design Elements」です。
（UI elements by ~yaruno on deviantART）
シンプルなデザインはもちろん、幅広いユーザーに対応できるデザインテイストのものまで、さまざまなUIデザインが紹介されています。中でも気になったものいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
