デザインを開発するという視点でお伝えするクリエイティブBLOG
角丸、ドロップシャドウ、グラデーションなど今までは画像と組み合わせたり、様々な工夫を用いて表現してた手法が簡単に実装できるCSS3。対応ブラウザも増えてきて、すでに利用されていると言う方も多いと思いますが、今日紹介するのはCSS3のみで実現する先進的なフォトギャラリー集「10 Pure CSS3 Image Galleries and Sliders」です。
Turn Your Images Into Polaroids with CSS3
FLASHのような派手なアクションなどはありませんが、CSSだけでここまで表現できる、CSS3の良さを感じることができます。全部で１０個のCSS3ギャラリーが公開されていますが、今日はその中から幾つか気になったものを紹介したいと思います。
詳しくは以下
WEBデザインをする際、どのような手法で行っているでしょうか？人それぞれだとは思いますが、多くの場合はいきなり作り始めるのではなく、構想をまとめてラフに落とし込む場合が多いとは思います。今回紹介するのはラフを制作するのに便利な手書きで使えるワイヤーフレームテンプレートをまとめたエントリー「10 Free Printable Web Design Wireframing Templates」です。
プリントアウトしてそこに書き込んでいけるような様々なテンプレートが多数集められています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
オフィスにいれば何の問題も無い作業も、環境が整っていないPCなどでは、非常に困難で時間もとられてしまいます。制作ツールはadobeを始め、基本的にインストール型となっていて、PCから簡単に持ち運びができない状態です。今日紹介するのは外出先でも対応出来る持ち運び可能な制作アプリケーションを集めた「12 Portable Apps for Web Designers」というエントリーです。
画像加工やグラフィク作成アプリから、HTMLコーディングなど様々な持ち運び可能なアプリケーションがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
WEBサイトの要素の中でも追加いやすさなどのユーザービリティから、全体の印象にまで影響を与えるナビゲーションメニューですが、今回紹介するのはWEBサイトを便利に快適にしてくれるナビゲーションを拡張してくれるツールを集めたエントリー「Website Navigation Menu Toolbox」です。
Sexy Drop Down Menu with jQuery and CSS
ドロップダウンからタブメニュー、プルダウンまで様々なメニューのソースがまとめられています。今日はその中からいくつか気になったナビゲーションをピックアップして紹介したいと思います。
詳しくは以下
WEBでコーディングをしていくときにとても便利なフレームワーク。上手く使えばデザインからのコーディングが劇的に早くなります。有名なものもあり、いくつか実務に使っていると言うWEBデザイナーさんも多いかと思います。今日紹介するのはWEBレイアウトを便利にしてくれるフレームワークをつくるWEBサービスやツールを集めた「Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks」というエントリー。
グリッドを自由にカスタマイズして作れるWEBサービスから、テンプレートまで様々なレイアウトに便利なものがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
画像で作るボタンと違いCSSで作るボタンはデザインの殆どが数値やパラメーターで制御でき、画像で作るボタンにくらべて表現の幅に多少の制約はでるものの、後からの修正などを考えると非常に使い勝手も良いのですが、一つのボタンをつくるのにもそれなりのコードを書かないとクオリティの高いCSSボタンはできません。そこで今回紹介するのは簡単にCSSのボタンを生成してくれるボタンマーカー「Button Maker」です。
ボタンのデザインの制御はバーをいじることで簡単に反映され、上からボタンのpadding、ボタン自体の大きさ、角丸の大きさに分かれていて、グラデーションやベースの色、テキストのカラーもカラーピッカーで簡単にそれぞれの色別に直感的に操作ができるようになっています。
詳しくは以下
グローバル感を出すために世界地図をイメージに使ったり、地域性を出すために地図の形をつかったりと商業広告デザインではなにかとお世話になる地図ですが、いちいち書くのはものすごい労力です。今日紹介するDingbat「GeoBats Font | dafont.com」は世界地図の形を収録したフォントセットです。
フォントで使えるので思い立ったらすぐ使えるのが良いですね。世界地図から、アジア、ヨーロッパ、アメリカ、アフリカ等の地域、各国と様々なタイプの世界地図のシルエットが収録されているみたいです。
詳しくは以下
難しい内容を分かりやすくグラフィックを使って見せる時などに利用されるインフォグラフィック。今ではいろいろなシーンで活用されていますが、いざ1から作るとなるとなかなか大変なもの。今回はそんな時に活用したいフリー素材セット「25 Must-Have Free Infographic Sets」を紹介したいと思います。
Successful business infographic Vector | Free Download
フラットテイストから、立体感のあるリアルなテイストまで、さまざまなデザイン性のインフォグラフィック素材がまとめられています。
詳しくは以下
さまざまなテイストのデザインフォントが展開されており、いろいろな種類をストックされている方も多いかと思います。そんな中今回紹介するのは、幾何学的にデザインされたフリーフォント「20 Gorgeous Free Geometric Fonts to Download」です。
PIER SANS // FREE TYPEFACE with 4 New Styles on Behance
幾何学的とありますが、シンプルなテイストをベースに個性が演出されたフォントが揃っています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBを制作するにあたって欠かせない技術の一つCSS。工夫や発想次第で様々な表現が可能ですが、今日紹介するのはCSSを使ったテクニックをジャンル別に紹介するエントリー「40 Outstanding CSS Techniques And Tutorials」です。
Cross Browser Multi-Page Photograph Gallery
イメージギャラリー、ナビゲーション、ボタンなどシーンに併せたテクニックが全部で40個紹介されています。今日はその中からいくつか気になったものピックアップして紹介したいと思います。
詳しくは以下
近年Web業界で話題を呼んでいるHTML5とCSS3。今まで画像やFlash、JavaScriptに頼っていた表現方法を、かなりカバーできるようになりました。そんな中、今回はCSS3だけで実現可能な219種類のアイコンデザイン集「CSS3 Icons」を紹介したいと思います。
よく見る虫眼鏡のアイコンや、扱いやすいグラフ関連のアイコンなど、どれも実用に耐えられるだけの種類とクオリティで219種類ものアイコンが取り揃えられています。
数多く配布されているフリーフォントの中から、思い通りのクオリティの高いものを探すのは意外に大変なもの。今回はそんな時に参考にしたい、厳選されたハイクオリティフリーフォントを集めた「45 Best Free Fonts for Designers」を紹介したいと思います。
Free font family: SkolaSans on Behance
デザイナーに向け、利用することでデザインの質を向上させてくれるフォントが紹介されています。
詳しくは以下
色々な意味を持たせて、様々なデザインに利用される地図の表現ですが、地図を一から描いているというデザイナーの方は極々まれだと思います。今日紹介するのはイラストレーターなどでベクターデータで利用できる地図データを集めたエントリー「Vector World Map Collection (Redux)」を紹介したいと思います。
EPS Vector Maps for Designers (.eps format)
同じ世界地図でも国や地域で色が付いたもの、国境などなく、世界がシルエットになって表現されているものなどなど様々なタイプの世界地図のデータがまとめられています。今日はその七からいくつかピックアップして紹介したいと思います。
詳しくは以下
クリエイティブの業界では世界的に利用されているphotoshop。数多くの便利な機能が実装されていますが、そのなかでも記録した動作をボタンひとつで再現してくれるアクションはとても便利です。今日紹介するのは写真補正に使えるフリーphotoshopアクションを集めたエントリー「500+ Free Professional Photoshop Actions」です。
sa-cool actions 2.08 colors by ~sa-cool on deviantART
写真補正、色補正のアクションを中心に様々なphotoshopアクションが公開されています。今日はその中から気になったものをいくつか紹介したいと思います。
詳しくは以下
個人でも企業でもエコを意識することが重要になっている現代では、エコな雰囲気を表現できる自然や木を素材として利用することも多くなっています。そんな中今回紹介するのが、さまざまな表情の木を表現できるPhotoshopブラシをまとめた「25 Useful Tree Brushes for Photoshop」です。
Leaves brush by =altergromit on deviantART
自然のイキイキとした表情や柔らかな雰囲気まで、木のさまざまな表情を捉えたPhotoshopブラシが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
新着やおすすめの情報などを届ける際に活用されるニュースレターの申し込みや、お問い合わせメッセージなどを送付する際に利用されるフォームデザイン。比較的シンプルにまとめてしまいがちですが、今回紹介するのは、デザインされたニュースレター用フォームまとめ「40 Wonderfully Designed Newsletter Subscription Form Photoshop Files」です。
（Subscribe to Newsletter Form (Psd) | Blugraphic）
シンプルな中にもデザイン性を加えているもの、レターの雰囲気をしっかりと感じられる凝ったデザインなど、さまざまなパターンがまとめられています。気になったものをピックアップしましたので下記よりご覧ください。
詳しくは以下
