デザインを開発するという視点でお伝えするクリエイティブBLOG
ワイヤーフレームは新しいWebサイトやサービスのUIを考える時、その構造を可視化するもので、制作する前には必ず作るというクリエイターも多いのではないでしょうか？今回紹介するのは改めて参考にしたいクリエイター達のワイヤーフレーム集「UI & Wireframe Sketches to Keep You Inspired」です。
Dribbble – App design | Phase 1: Sketching by Alex Deruette
軽めのタッチのものから、細かく描かれたものまで、さまざまなワイヤーフレームが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
インターフェイスは日々進化しており、デザインの流行り廃りデバイスの進化などを含めて多様化そして変化してきています。今日紹介するのは、最近リリースされているユーザーインターフェイスをセットにして利用できるインターフェイスキットを集めたエントリー「10 Free UI Kits」です。
最近流行りのフラットデザインからスタンダードなものまで、様々なユーザーインターフェイスキットが紹介されていますが、いくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
回線環境も機器も整ってきて、快適な環境であればほぼストレス無くWEBを閲覧できますが、本当に大きなデータを読み込ませたり、通信環境も考慮すると必要になってくるのがローディングです。ユーザーの待ち時間のストレスを緩和してくれるものですが、今日紹介するのはクリエイティブなローディングが簡単に実装できるjs「Creative Loading Effects」です。
幾つかのエフェクトが予めセットされており、それぞれのエフェクトを指定することで、簡単にローディングを実装することが可能です。幾つかエフェクトの種類についてキャプチャがありますので下記からご覧ください。
詳しくは以下
iOS7もそろそろ配布され、フラットデザインを目にする機会も今後増えてくると思います。今日紹介するのは可愛くてPOPなフラットアイコンセット「Free Flat Icons」です。
どれも単色ですが、細かな陰影も付けられていて、可愛いいながらも高いクオリティのアイコンセットとなっています。
詳しくは以下
WEBの重要な要素の一つリンク。ユーザーが最も利用する機能であり、見せたいものを見せる、次のページに誘導したりそのクリエイティブには気を使わなければいけない部分でもあります。今日紹介するのはマウスオーバー時にクリエイティブなリンクエフェクトを可能にするjavascript「CREATIVE LINK EFFECTS」です。
いくつかのリンクエフェクトが準備されており、フォーカスがあたったり、下線がアニメーションとともについたり、反転したりなどなど面白い動きを簡単に実現してくれます。
詳しくは以下
最近のWEBのトレンドとして、露出が増えてきているフラットデザイン。多くのWEBサイトがそのフラットデザインを取り入れ、国内でも徐々にその流れが見えるようになってきているような気がします。今日紹介するのは、フラットデザインに便利なフリーフラットアイコンを集めたエントリー「20 Free Flat Icon Sets」です。
基本的なものからグラフィカルなものまで、様々なフラットアイコンセットが紹介されています。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
Webサイトを閲覧していると様々なモーダルウィンドウを見かけると思います。使用用途はもちろん、デザインも様々。そんな中今回は、デベロッパーにとって便利な、JavaScriptモーダルウインドウプラグイン「Best Free JavaScript Modal Window Plugins」を紹介します。
モーダル制作に便利なオープンソースが集約されたまとめとなっています。いくつか気になるものをピックアップしてみました。
詳しくは以下
音楽だけではなく、感情や楽しさ等、それに付随する印象を与える事ができるモチーフ音符。一般的なスタンダードな素材ながら、自分で描くとなると結構面倒だったりします。今日紹介するのはそんな音符関連のフリーベクターデータ「Music Notes Vector」です。
ト音記号から、音符もそれぞれ4部音符、8部音符、休符まで一式揃っています。そのままでも、加工しても使えるシンプルで素材としては持っておくとかなり便利なデータだと思います。
詳しくは以下
さまざまな種類の素材がインターネット上で配布されており、その種類の豊富さからどんな素材をピックアップして良いか迷ってしまうこともあるのでは？そんな時にチェックしておきたい、11種の最新素材まとめ「11 Best Design Resources Released This Week」を今回は紹介したいと思います。
iPhone 5s MockUp | GraphicBurger
アイコンやバックグラウンド、モックアップといった便利でクオリティの高い素材が揃っており、どれもダウンロードしたくなるデザインのものばかり。気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
今まで、WEBデザインの細かい部分に絞ったデザイン集を「コメント部分のデザイン集「30 Must See Comment Designs」」や「日付表示のデザイン集と素材集「Gallery Of Date Stamps And Calendars」」などと紹介してきましたが、今日紹介するのは404ページのデザイン集「49 Nice And Creative Error 404 Pages」です。
通常404ページというのはエラーページであり、本来なら余り好ましくない所なのですが、「49 Nice And Creative Error 404 Pages」で紹介している404ページはクリエイティブ性が高く本来ならガッカリさせてしまうページを素晴らしい形で演出しています。今日はいくつか紹介されている中から気になるものをピックアップして紹介したいと思います。
詳しくは以下
マルチデバイス対応がWEBサイトについては大きな課題の一つ。最近ではレスポンシブでレイアウトが組み変わる、WEBサイトが主流になりつつありますが、今日紹介するのはレスポンシブなデザインやサイトに便利なWordpressプラグインをまとめたエントリー「40+ Responsive WordPress Plugins」です。
Ether Content Builder WordPress Plugin
一部有料のものもありますが、全部で40種類ものプラグインがまとめられていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
1日の日照時間が長くなってきたりと、少しずつ春の気配を感じられるようになってきているように思います。そんな中今回は、春の優雅な雰囲気作りにぴったりな蝶のベクター素材をまとめた「25 High Quality Vector Butterfly for Free Download」を紹介したいと思います。
Butterfly Vector Set2 (42 colored butterflies) | DragonArtz Designs
リアルな蝶を表現した素材から、イメージ力の高い美しい素材まで、さまざまなベクター素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
この夏の暑さで、夏バテ気味という方もいらっしゃるのではないでしょうか？そんな時は誰でも、涼しげな雰囲気を楽しみたいと思うもの。そんな中今回紹介するのが、さまざまな水の表情が楽しめるテクスチャまとめ「Useful High Quality Water Textures for Photoshop Users」です。
COLORED WATER MACRO STOCK by =ArwenArts on deviantART
水々しさを感じられるテクスチャが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
先日発売され、日本でも話題を振りまいたiphone3Gですが、今回紹介するのはそのiphoneやipod touchに使われているインターフェイスの素材集「iPhone GUI PSD」です。
これはその名の通り、iPhoneで使われているユーザーインターフェイスのパーツを素材として使えるようにPSDファイルにし、配布されている物です。上記の写真のようにかなり細かく作り込んであり、忠実に再現されています。
詳しくは以下
WEBサイトを構築する時にphotoshopを使っている方にはオススメなデザインパターン集が今回紹介するシンプルなphotoshopカスタムパターン素材「wwwusic Simple Patterns」です。どんなデザインにもあうシンプルで汎用性の高いパターン素材がフリーで公開されています。
使い方は様々ですがシンプルなだけに既存のデザインや、オリジナルのデザインなんかと組み合わせても上手く使えるかと思います。
詳しくは以下
世界には様々なフォントが存在し、デザイナー、WEBデザイナーであれば商売道具なだけにフォントの名前からフォントのカタチを想像するなんてこともできると思いますが、微妙な違いのフォントもあります。狭小紹介するのはフォントを視覚的に見比べることができるWEBツール「Tiff」です。
このWEBツールでは、フォントAとフォントBを選択し、それぞれを見比べることができるというサービスとなっています。
詳しくは以下
