デザインを開発するという視点でお伝えするクリエイティブBLOG
優れたUIデザインをスピーディ制作することがほとんどの場合望まれますが、中には時間がなくて制作できないことも。そんな時に多種多様のデザインテンプレートが手元にあれば非常に便利です。今回はそんなシーンで参考にしたい、探す手間をなくすことに役立つ最新UIデザインまとめ「New Web & Graphic Design Freebies : 28 Resources」を紹介します。
Free E-Commerce Apps – part 05 by Haxon – Dribbble
アイコンからフォント、モックアップまで幅広くまとめられています。気になったものをいくつかピックアップいたしましたので、下記よりご覧ください。
詳しくは以下
Webデザイン上においてユーザインターフェースというのは非常に重要なもの。操作性がわかりにくいストレスは、ユーザーが離れていく要因の一つです。それらを解消したいときに便利なアイコンのまとめ「1700+ Free Icons for Web, iOS and Android UI Design」を今回はご紹介していきたいと思います。
シンプルなミニマルアイコンからカラフルで存在感のあるデザインアイコンまで、幅広く紹介しているまとめになっています。
詳しくは以下
編集可能なPSD素材は様々な場面で役に立ってくれる存在。できれば最新の素材を手元に置いてきたいもの。そんな中今回ご紹介する「36 New Free Photoshop PSD Files for UI Designers」は、ロゴやアプリのUIから名刺テンプレートまで含まれた最新のまとめとなっています。
Daily UI #029 – Music player by Marko Nedeljkovic – Dribbble
どれもクオリティの高い、さまざまな種類のPSD素材がまとめられています。気になるものをいくつかピックアップしているので以下よりご覧ください。
詳しくは以下
トレンドを取り込んだUI設計を行うことは非常に重要ですが、一から行っていくことはとても大変。そんなときに知っておくと便利なUIキット「Clippers UI Kit Free Sample」を今回は紹介いたします。
UIキットには様々な種類がありますが、最新のトレンド感あふれるデザイン性が魅力のUIキットです。
詳しくは以下
デザインに動きをつけてより見やすいUIを作り上げるとこができる、UIアニメーション。上手に利用すれば良いUIを制作できますが、動きという印象に残る要素になるため、取り入れるにはコツが必要です。今回ご紹介するのは、そんな時に役立つ、UIデザインにアニメーションを盛り込むコツをまとめた「4 Ways Use Functional Animation in UI Design」です。
アニメーションを採用するための4つの覚えておきたいポイントが、非常にわかりやすく実例も踏まえて解説されています。
サイトテンプレートからUI設計、アイコン、出来上がったデザインを実際に見せるためのモックアップに至るまで、WEBサイトを制作するにあたって、必要となる材料や要素は数多く存在します。そんな中今回紹介するのは、デザインを進めるにあたって必要不可欠となるツールをフリーでダウンロードできるサイト「UIPIXELS」です。
iPhone 6s Plus Mockups | Free PSDs & Sketch App Resources for Designers – uipixels
サイトの構成を決めるテンプレートから細かなパーツまで、制作する中で活躍してくれるであろうアイテムが網羅されているのが、とても魅力的なサイトです。サイトでダウンロードできる素材をいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
タブ型のメニューはページナビゲーションとして取り入れられている方も多いかと思います。今日はWEB2.0っぽい今時のデザイン感のカスタマイズ可能なタブ型のナビゲーションメニュー「Pure Css Horiontal Menus」を紹介したいと思います。
作りは非常に単純で、リストで構成されています。配布は全部で6色こちらの「デモページ」で動作を確認する事が可能です。各メニュー項目はテキストデータなので日本語メニューも自由に作れるようになっています。またリスト形式でマークアップされていますのでタブを増やす事も簡単にできます。
動きに派手さはありませんが、デザインもシンプルで配色もスタンダードな物が揃っていますので、あわせやすいかと思います。配布は各色ごとにzipファイルでダウンロード可能で圧縮ファイルの中には各画像とCSS、メニューだけ表示させてあるHTMLが同封してあります。組み込み方法はHTMLファイルのソースを見て頂ければ簡単にサイトに実装可能だと思います。
今年の干支でもある龍(ドラゴン)は、世界中で神秘的な存在として人気があり、さまざまなデザイン制作に利用されています。しかし、躍動感のある動きの表現は難しく、デザイン制作には時間もかかるもの。そこで今回紹介するのが、さまざまなテイストのドラゴンを表現できるPhotoshopブラシをまとめた「30 Collection of Dragon Photoshop Brushes」です。
（draco brush by ~hanyasatu on deviantART）
手書きタッチの美しいドラゴンから、モチーフとしても使いやすいアイコン的なドラゴンまで、さまざまなドラゴンが表現できるブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
メインビジュアルや見出しを作るときなど、打ち文字だけでは物足りない…そんな物足りなさを補ってくれる、テキストエフェクトをまとめた「25 Insanely Creative Text Effects You Can Use For Free!」を今回は紹介いたします。
シンプルで使いやすいエフェクトから、特殊な表現に使える質感が作り込まれたものまで多数のエフェクトが紹介されています。幾つか気に入ったエフェクトをご紹介しますので、ご覧ください。
詳しくは以下
(さらに…)
デザインをわかりやすくしたり、デザインにアクセントを添えてくれるイラストはとても便利な存在。しかし一からイラストを描くとなると、時間やスキルが必要とされ、実現が難しい場合も。今回ご紹介するのは、そんなイラストを手軽に利用できる素材をまとめた「Graphical Frenzy Collection」です。
手書き風の可愛らしいイラストが数多くまとめられた、デザインのアクセントに使いやすい素材です。
詳しくは以下
(さらに…)
デザインのクオリティを高めるために、フォント選びはとても重要な工程。今回はそんなシーンで利用したい、ハイセンスさを感じられるフリーフォントまとめ「Freshest Free Fonts for Designers」を紹介したいと思います。
Bellico Typeface + Bonus Vectors – download free fonts by PixelBuddha
洗練かつデザイン性を感じられる最新のフォントがピックアップされ、紹介されています。
詳しくは以下
デザインの変更の手間を防ぐ為にWEB制作時にはコーディングしていないモックアップをデザイン案として見せるのが主流だと思います。今日紹介するのはラフなモックアップをドラッグ＆ドロップで簡単に作成できるWEBツール「Balsamiq Mockups」です。
パーツをおいていくような感覚で簡単に作成できます。実際「Balsamiq Mockups」を使って制作しているイントロムービーがYouTubeにアップロードされていましたので、下記に貼付けておきます。
動画は以下から
DesignDevelopではWordPressを使用していますが、その魅力の一つにテーマファイルがあれば簡単に様々なデザインが設定できる所があります。今日紹介する「WordPress Themes Archive」は2000個以上のテーマファイルが公開されています。
テーマファイルは「Fitness」や「City」などイメージ別や使用されているカラー別、サイドバーの位置などかなり細かく区分けされていますので、自分が思い描くテーマを見つけやすくなっています。
詳しくは以下
常に新しいデザインのものが配布されているフリーフォント。よくチェックされている方も多いのではないでしょうか？そんな中今回紹介するのは、最新のフリーフォントを集めた「Collection of New & Free Fonts for January 2015」です。
デザイン性の高い、是非デザインに取り入れてみたいフリーフォントがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザイン制作、画像合成など、さまざまな場面で利用されるテクスチャは、できるかぎりバリエーション豊富にストックしておきたいもの。そこで今回紹介するのが、インスピレーションの広がるテクスチャをまとめた「Various Textures That You Might Find Interesting – 38 Items」です。
（Nebulous by `pendlestock on deviantART）
実写の風景からクリエイター制作によるテクスチャまで、さまざまなテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBで表示されるテキストは、各々のユーザーのフォント環境に左右されるため、システムフォントなどが基本となっていますが、@font-face は、Web ページを製作者がWeb フォントを指定し、フォントを提供。ユーザのコンピュータにインストールしているフォントの数に依存しないテキスト表示が可能な技術ですが、今日紹介するのはそんな@fontfaceで使えるフリーフォント25「25 Free Fonts Perfect for @fontface (Revived)」です。
Dekar Download Page →Freeware License
いくつかのフリーフォントがまとめられていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
