デザインを開発するという視点でお伝えするクリエイティブBLOG
デザインの基本設計を示すワイヤーフレームは初期段階での打ち合わせや、提案などでのデザインのすり合わせには欠かせない存在です。今回ご紹介するのはそんなワイヤーフレームを、制作する際に是非活用したいハイクオリティなワイヤーフレームテンプレート「iBlocks – iiOS Wireframe Kit」です。
iBlocks – iOS Wireframe Kit Freebie | Day 61/365 – Project365 by Kishore – Dribbble
スマートフォンのワイヤーフレーム作成時に役立つ、使用頻度の高い基本設計が24種類集められています。
詳しくは以下
(さらに…)
写真にミステリアスな雰囲気をプラスしたり、食品を美味しそうに見せたり、何かと利用する機会の多い霧や湯気の効果。写真の雰囲気を一気に高めてくれますが、一から作るのは少々手間。そんな中今回ご紹介するのは、そんなときに利用したい霧や煙が立ち込めるようなテクスチャー素材「20 Mysterious Fog Overlays」です。
20 Mysterious Fog Overlays — download free effects by Pixelbuddha
霧や煙などの白い靄を簡単に表現してくれる、ハイクオリティな素材が集められた素材セットです。
詳しくは以下
(さらに…)
Webサイト閲覧中によく見かけるプログレスバーですが、最近は動きや形も様々で遊び心のあるものも増えてきています。そんな中今回は、プログラマーにとって便利なプログレスバーのJavaScript Plugins「 9 Free Progress Bar JavaScript Plugins For Web Designers」の紹介したいと思います。
Animated Goal Progress Bar jQuery plugin
ベーシックなものから、ちょっと変わったものまで9種類のプログレスバーがピックアップされています。
詳しくは以下
デザインをする上でインパクトのあるものを仕上げるためには、フォントや装飾アイテムがポイント。イメージにあった素材をうまく選定する必要があります。そんな時に参考にしたい、個性的な印象でインパクトを与えるタイポ&ベクターセット「Pool Riders Typeface + Bonus Vector Cut-Outs」を紹介したいと思います。
タイポとベクター素材がセットになった使い勝手のよいアイテムです。
詳しくは以下
デザインの良し悪しの決め手ともなるフォント選び。デザイナーにとって重要なアイテムとなるので、様々なジャンルに対応できる最新のフリーフォントは必見です。そんな中今回紹介するのは、グラフィックデザイナーのためのおしゃれなフリーフォント「21 Fresh Free Fonts for Graphic Designers」です。
MINDFULLY – FREE CALLIGRAPHY FONT — Pixel Surplus | Resources For Designers
柔らかな印象を与えてくれる手書きフォントから、スタイリッシュに決まるものまで、21種類のフリーフォントを紹介しています。
詳しくは以下
近年幅広い世代でSNSが活用され、日常生活に欠かせないものになってきています。中でもインスタグラムに投稿される写真の数は数え切れないほど。そんな中今回紹介するのは、多くの投稿の中で一際目を惹くことができるInstagramテンプレートキット「Mono Instagram Templates Kit」です。
POPなカラーが魅力的な120種類の豊富なインスタグラム用のテンプレートがセットになったアイテムです。
詳しくは以下
フリーで配布されているフォントには実に多彩な種類が存在しており、制作しているデザインにあわせて、選ばれていることと思います。そんな中今回紹介するのは、チョークで書いたような雰囲気を再現できるフォントまとめ「25 Free Chalk Fonts to Enliven your Designs」です。
（Varsity Playbook font by KC Fonts – FontSpace）
かすれたようなアナログな質感を、フォントで簡単に演出することができます。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
ものすごくシンプルで無駄を削ぎ落としたCSSレイアウトテンプレートサイト「Nice and Free CSS Templates」を紹介したいと思います。ゴチャゴチャしたメニューは一切無く、サイトにアクセスすると12の代表的なCSSのレイアウトサムネイルが並んでいます。
テンプレートは1カラムから3カラム、4カラムと標準的なものはもちろん。中央表示なんかもありました。
詳しくは以下
WEBデザインでもグラフィックデザインでも欠かせないソフトウェアの一つphotoshop。使いこなすことができれば様々な表現を可能にしてくれます。今日紹介するのはグラフィックデザインのためのphotoshopのチュートリアルをまとめたエントリー「Top 50 Graphic Design Photoshop Tutorials」です。
全部で50ものチュートリアルが紹介されていますが、今日はその中から気になったものをピックアップして紹介いたします。
詳しくは以下
Underwater, Vector-Style Illustration
ベクターアニメのような表現をphotoshopです。
Flaming Car
炎に包まれた車を表現。応用が効きそうなチュートリアル。
Creative Block Text Effect
壊れるテキストをクリエイティブに
上記の他にも様々なクリエイティブなチュートリアルが紹介されています。photoshopの腕をもう一ランク上げたい方は是非ご覧ください。
WEB上で何かを選択するときに用いるラジオボタン。様々な場所で実装されており、もはや当たり前のユーザーインターフェースの一つですが、今回紹介するのはそんなラジオボタンにアクセントを付けることができる、CSS3で実現するラジオボタンアニメーション「radiobox css」です。
ラジオボタンの選択時に特定のアニメーションをラジオボタン自体にかける事が可能です。
詳しくは以下
デザインに文字が入る場合、その文字が持つイメージによって大きくデザインが左右されます。そのためデザインにおいてフォントというのは重要な物になってくるかと思います。国内外で様々なフォントがフリーで公開されていますが、今日は海外のデザインサイトabduzeedoが選んだフリーフォントをまとめた「15 Awesome Free Fonts 」を紹介したいと思います。
Fonce Sans Regular—Trial by $liquisoft on deviantART
フォントはすべて「deviantART」で公開されているものから選別してきているみたいで、様々なフォントが紹介されています。今日はその中から気になったものをいくつか紹介したいと思います。
詳しくは以下
WEB制作に関わらず制作の現場では非常に役立つアイコン素材。様々なテーマで世界中で制作されていますが、今回紹介するのは近代のモチーフを集めたベクターアイコンセット「Free Pack 60 Vector Icons」です。
PCやスマートフォンなどといったものから人工衛星や原子・サングラスや注射器などなど様々な分野のアイコンがまとめられています。全部で60ものアイコンがセットになっており収録されている全アイコンは下記からご覧ください。
詳しくは以下
繊細な素材感や風合いを表現するために高度な技術やセンスが必要とされる”羽”ですが、いざ素材として作成しようと思うとなかなか大変なもの。そこで今回は、鳥や蝶などさまざまな羽を収録したphotoshopブラシまとめ「44 Free Wing Photoshop Brush Sets」を紹介したいと思います。
（Wings – Photoshop Brushes by *ruby-proudfoot on deviantART）
さまざまな質感・種類の羽を描くことができるブラシが収録されており、デザインのクオリティをアップさせるのにもとても便利なツールとして活用できそうです。いくつかピックアップしてみましたので、下記よりご覧ください。
デザインを制作する際、すべて自作できれば良いのですが、手の混んだ表現を作るのにはそれなりに時間がかかります。そんな時は、グラフィック素材をうまく利用して、時間を短縮しながらデザインのクオリティを上げるのも、一つの方法です。今回は、スプレーで描いたようなグラフィティアート風の素材「Spray Art Graphics Toolkit」をご紹介します。
シンプルな形ですが、スプレー独特の質感があり、密度を出したい時にうまく利用できそうです。
詳しくは以下
wordpressには、フリーで利用できるテーマがインターネット上で多数配布されており、デザインやコンテンツ内容に応じて使用したことがある方も多いのではないでしょうか？そんなwordpressテーマを20種集めた「20 Free WordPress Themes」を今回は紹介したいと思います。
（Future – Free WordPress Theme | DesignOrbital）
ベーシックなタイプから、ワイド感のあるタイプまで、さまざまなレイアウトのテーマがまとめられています。
詳しくは以下
主流のフラットデザイン。一からデザインをすると、手間も時間も多くかかってしまうもの。そんな時に利用したい、フリーPSDテンプレート集「35 Free and Flat PSD Web Templates」を今回は紹介したいと思います。
Mod Portfolio to Tell a Story of Your Art – MonsterPost
さまざまなレイアウト、テイストのフラットデザインテンプレートがまとめられています。
詳しくは以下
