シームレスなパターンは様々なシーンで活用できるアイテム。デザーナーとしてはいくつか違ったテイストのアイテムを手元に揃えておきたいものです。そんな中今回紹介するのは、POPなカラーが目を惹く8bitの幾何学的パターンセット「8-bit Memphis Patterns Pack」です。 様々な幾何学模様を組み合わせて作られた15種類のパターンセットです。 詳しくは以下 日本ではあまり見かけない個性的な幾何学模様が特徴的で、見る人を楽しませてくれそうなPOPなカラーリングも魅力的。データ形式もEPS、AI、JPGが揃っていますので編集も可能です。個性的なデザイン表現をしたい時に活躍してくれそうですね。 つなぎ目のないシームレスなパターンはWebサイトやバナー、ポスター、グリーティングカードなど様々な場面で使える、シーンに合った使い方ができる便利なアイテムですので、是非使ってみてはいかがでしょう

レスポンシブ設計をスムーズにsuruレスポンシブレイアウトをテストする為のフリーツールまとめ「7 Free Tools For Testing Responsive Layouts」 現代のWebデザインに置いて欠かせない基礎設計となっている、レスポンシブレイアウト。PCとスマートフォンでの見え方の違いを手軽にチェックしたい、そんな時の手助けとなる便利なテストツールをまとめた「7 Free Tools For Testing Responsive Layouts」を今回は紹介したいと思います。 7 Free Tools For Testing Responsive Layouts | Webdesigner Depot 使いやすい全てフリーで利用できるツールが7種ご紹介されています。その中から幾つかおすすめのツールをピックアップしてまとめましたので、是非ご覧ください。 詳しくは以下 XRe

直感的な操作で簡単にアニメーションを作成することができるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」 WEBサイトならではのアクション要素の一つ、アニメーション。取り入れることができれば個性的でインパクトのあるサイトを制作できますが、アニメーションの作成はハードルが高いと感じる方も多いのではないでしょうか。そんな方におすすめできるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」を今回はご紹介します。 使い方が難しそうと思われる方も多いかもしれませんが、汎用性の高い便利なツールとなっています。使用方法をわかりやすく説明してくれている動画が紹介されていますので、まずは下記よりご覧ください。 詳しくは以下 使い方は直感的で、ドラッグで図形や黄緑色の＋印を動かすことで

Webデザインを彩るCSSアニメーション。実装時にはデザインのイメージに合わせて、細かな調整を加えたり、なかなかに手間がかかる箇所でもあります。そんな手間がかかる調整工程を省ける、ブラウザ上でアニメーションが作れるツール「animista」を今回は紹介したいと思います。 ブラウザ上でプレビューしながら細かな動きを調整して、タグをコピペするだけでCSSアニメーションが実装できる便利なツールです。 詳しくは以下 拡大や縮小、スウィングなどの18種類ものアニメーションの雛形から、オプションで数値を変更してアニメーションを細かにカスタマイズすることができます。オプションではアニメーションのスピードだけでなく、ディレイや回転回数など、細かな場所まで弄ることが可能。面倒だった細かな調整作業を、ブラウザ上でプレビューを見ながらできるので、効率的に仕事をこなすことができます。スムーズなアニメーション実装で

デザインのクオリティや良し悪しを決めるのに非常に重要な存在であるフォント。フリーで使用できるものも豊富に配布されていますが、数が多いだけにその中から最適なものを探そうと思うととても大変なもの。そんな時に参考にしたい、デザイン性の高い100種のフリーフォントまとめ「The 100 best free fonts」を紹介したいと思います。 Arkhip font 100種という豊富な種類のフォントがまとめられており、どれもデザイン性の高いものばかり。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Futuracha the font [free] on Behance 細身のラインで描きだされた、どこか記号のような独特な形状のフォント。デザインに個性を演出したい時におすすめです。 Free PSD Goodies and Mockups for Designer

デザインベースを作り上げるのに必要なUI設計。またその先の設計に基づいたデザイン性のあるクリエイティブも重要となってきます。今回はそんなシーンで参考にしたい、デザイン性の高いUIデザインを100日紹介するサイト「100 Days UI」を紹介したいと思います。 いろいろな種類のデザインUIがピックアップされリストギャラリーとなり紹介されています。 詳しくは以下 グラフやチャート、カウントダウン、プロフィール、ソーシャルシェア、電卓、選択画面など、ピックアップされている種類はとても豊富。デザインはスタイリッシュなタイプのものが多く、主流のデザインとして参考にするのに最適です。基本海外のデザインなので、日本のデザインと差を付けたい時にもおすすめです。 100日という形でうたっていることから、100で更新がストップしているようですが、ぜひ今後も続けてほしいプロジェクトですね。UI設計の参考事例を

TOP  >  Design  >  自身で一から作り上げることができるデザインチュートリアルまとめ「38 Best Design Tutorials for Learning Sketch 3」 1つのデザインを完成させるためには、多くの素材の組み合わせが必要になってきます。フリーで配布されているものも多数ありますが、時には自分で作らなくてはいけない、オリジナル性を求められるシーンに遭遇することもあるのではないでしょうか？今回はそんな時に参考にしたい、自身で一から作り上げることができるデザインチュートリアルまとめ「38 Best Design Tutorials for Learning Sketch 3」を紹介したいと思います。 iOS Design using Sketch. Part one: iOS Navigation Bar – YouTube アイコンやイラスト、UI、アニ

TOP  >  Font  >  デザインをもっと魅力的に演出できるフリーフォント14種「14 New Free Fonts for Designers」 デザイン性のあるフォントを使用するだけで、いままでどこか物足りなさを感じていたデザインが一気に魅力的見えてくることも。今回はそんなシーンに最適な、デザインをもっと魅力的に演出できるフリーフォント14種「14 New Free Fonts for Designers」を紹介したいと思います。 Rhombus on Behance 14種の厳選された、とてもデザインセンスに優れたフォントがピックアップされています。気になったものを以下よりご覧ください。 詳しくは以下 Stellar Free Font シンプルなテイストのフォントは、デザインに洗練さとスマートさを与えてくれそうです。定番として活用できるのではないでしょうか？ Oko Fre

webサイトのデザインだけでなく、スマートフォンへの対応が必須の現代。またスマートフォンアプリのデザインを手がけることも多くなっていると思います。今回はそんな時に参考にしたいUIキット「DO App UI Kit」を紹介したいと思います。 フラットテイストなデザイン性が特徴。洗練された印象のデザイン設計にぴったりなキットとなっています。 詳しくは以下 さまざまな種類のデザインが用意されており、ログイン画面、ホーム画面、カレンダー画面、リスト、プロフィール、設定といったようにソートしてサムネイルを見ることができるので、ほしいデザインのUIがすぐにチェックできるというのも嬉しいところ。全体的にビビット寄りの淡いカラーが使われているので、優しい印象のデザインを求めている方にぴったりかも。 UIを利用することで、手軽にデザインクオリティを高められるのも魅力。まだ使用したことがないという方もぜひ一度

webサイトの動きや表現などのクオリティ向上を図るためのツールまとめ「50 CSS and JavaScript Tools, Frameworks and Libraries」 webサイト上の仕様を自身ですべて開発するには時間やコストが必要であり、どうしても限界があることが多いと思います。今回はそんな時に参考にしたい、webサイトの動きや表現などのクオリティ向上を図るためのツールまとめ「50 CSS and JavaScript Tools, Frameworks and Libraries」を紹介したいと思います。 SassyFlags – Simple Sass Library for flags CSSやJavaScriptなどのツール、非常に多彩な種類が紹介されており、サイトを今よりもっと魅力的に演出することができます。気になったものをピックアップしましたので、下記よりご覧くだ

TOP  >  Design  >  サークル状のデザインフリーアイコンまとめ「35 Free And Fresh Round Icons Designers Should Have」 アイコンにもいろいろな形が存在しており、特にサークル状のタイプは基本の形としてよく使用することが多いかと思います。そんな中今回紹介するのは、サークル状のデザインフリーアイコンまとめ「35 Free And Fresh Round Icons Designers Should Have」です。 Dribbble – Free Icon Pack – Volume 1 by Robin Kylander ソーシャル系の定番アイコンから、ちょっと変わった表現のものまで、さまざまな種類が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Dribbble – Freeb

インフォグラフィック等のグラフィックデザインに活用できるフリーデータまとめ「Free Infographic Vector Graphics Design Elements」 デザイン制作をする際には、さまざまな素材が必要になってきますが、1からすべてを制作していると時間と手間がかかってしまうもの。今回はそんな時に利用したい、インフォグラフィック等のグラフィックデザインに活用できるフリーデータまとめ「Free Infographic Vector Graphics Design Elements」を紹介したいと思います。 Dribbble – Freebie – Vector UI Components by Balraj Chana さまざまな種類のVector形式の素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Dribbble

TOP  >  Design  >  夏をテーマとしたポップなデザインに利用したいアイコンセット「New Summer and Vacation Icons」 もうすぐ暑い夏がやってきます。デザインシーンでも夏向けのデザインをすでに手がけている頃だと思いますが、今回紹介するのは夏をテーマとしたポップなデザインに利用したいアイコンセット「New Summer and Vacation Icons」です。 カラフルで明るい印象が特徴の、夏をイメージさせるモチーフが揃ったフリーアイコンセットとなっています。 詳しくは以下 夏のレジャースポットの定番でもある海や山をイメージさせる、水着や浮き輪、シュノーケルなどのビーチグッズから、アイスクリームやすいか、ドリンク、パイナップルなどの夏に登場する食べ物、帽子やサングラス、サンダルなどのウェア関連など、いろんな種類が揃っています。カラフルに見えますが、

デザイナー必見 いろいろな種類の最新フリー素材をピックアップしたまとめ「50 Free Resources for Web Designers from March 2015」 インターネット上には膨大な数の素材が存在しており、時にどこから探して良いのか迷ってしまうこともあるのではないでしょうか？そんな時参考にしたい、いろいろな種類の最新フリー素材をピックアップしたまとめ「50 Free Resources for Web Designers from March 2015」を紹介したいと思います。 Dribbble – Free SVG Device Templates by Max Burnside アイコンやフォント、ブラシ、テンプレートなど、多彩な種類の素材が厳選され、1つの記事にまとめられています。 詳しくは以下 Dribbble – Free Brushes! (v2) by

デザイナー必見　ロイヤリティフリーの素材まとめ「Royalty Free Images, Fonts, Icons & Brushes for Designers」 デザイナーにとって、ロイヤリティフリーの素材は非常に重宝する存在。いろいろな種類をストックされている方も多いのではないでしょうか？そんな中今回紹介するのは、ロイヤリティフリーの素材まとめ「Royalty Free Images, Fonts, Icons & Brushes for Designers」です。 Free Vectors: Easter backgrounds | Abstract さまざまな種類のフリーロイヤリティフリー素材が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Free Vectors: Wedding vector illustration | F

TOP  >  Font  >  レトロ&ヴィンテージテイストのフリーフォントまとめ「40 Free Fonts Best For Retro And Vintage Designs」 さまざまなテイストで、種類豊富に配布されているフリーフォント。いろいろな種類をストックされている方も多いかと思います。そんな中今回は、新しいコレクションとして是非加えておきたいフリーフォントまとめ「40 Free Fonts Best For Retro And Vintage Designs」を紹介します。 Gist Rough Upr Exbold Two Demo font by Yellow Design Studio – FontSpace レトロ&ヴィンテージテイストのフリーフォントが40種ピックアップされ、まとめられています。 詳しくは以下 QWERLY font by harder type

TOP  >  Design  >  秀逸なデザイン・機能のGUIテンプレート集「Top 50 Web & Mobile GUI Templates from 2014」 webサイトやモバイルサイトの制作に便利なテンプレート。すでに精度の高いデザインとして完成されているので、使用するだけでハイクオリティなデザインに仕上げることができます。今回はそんな秀逸なデザイン・機能のGUIテンプレート集「Top 50 Web & Mobile GUI Templates from 2014」を紹介したいと思います。 Dribbble – Diagram Template .Sketch File by ismail köse いろいろなテイスト・種類のGUIテンプレートがまとめられており、どれもすぐに使ってみたくなるものばかり。いくつか気になったものをピックアップしましたので、下記よりご覧ください。

デザイン制作に便利な素材の一つとしてあげられるアイコン。種類やテイストにもさまざまな種類が存在しています。そんな中今回紹介するのは、丸みを帯びたデザインが特徴のフリーアイコンセット「Essential Generic Free Icons (SVG & PNG)」です。 ぽってりとした質感が印象的な、かわいらしい雰囲気のアイコンが100個セットでダウンロードできるようになっています。 詳しくは以下 種類としては、定番のファイルや矢印、ダウンロード、チェックマークなどのアイコンがしっかりと揃っており、デザイン的にはベーシックな中にも個性を感じさせますが、いろいろなデザインに使用できそうです。また100種という利用しやすい数、SVG・PNGという多彩な媒体に対応できる形式などがしっかりと押さえられているもの特徴です。 すでに定番アイコンを持っているという方も、ちょっと変化を付けたデザインアイコ

webサイトの制作をスタートする前には、レイアウトの構築やサイトマップの作成が必須。それをすることで、サイトの全体像を把握しながら計画的にデザインをすることができます。今回はそんな企画時に是非利用したい便利なUIキット「Website Flowcharts」を紹介したいと思います。 いろいろなレイアウトのフォーマットUIイメージが72種揃っており、組み合わせをすることでサイトイメージをふくらませることができます。 詳しくは以下 カラムレイアウトやグリッドレイアウト、ランディングページやブログ、カレンダーやユーザープロファイル、コメント欄、タブ、404エラーなど、サイトを制作する上で想定されるレイアウトUIがラインナップされており、わざわざ1つ1つ書き起こす必要がありません。時間短縮にもなりますし、企画書のクオリティも高められるのではないでしょうか？ いろんなシーンで活躍してくれると思います

TOP  >  Design  >  デザイナーが知っておきたい最新フリー素材まとめ「50 Free Resources for Designers from November 2014」 日々多くの多彩な種類の制作物を手がけるデザイナーにとって、フリー素材はもはや欠かせない存在となっているのではないでしょうか？今回はそんな方におすすめの、最新フリー素材まとめ「50 Free Resources for Designers from November 2014」を紹介したいと思います。 Dribbble – 4 Free Mockups by Shakuro さまざま種類のフリー素材がまとめられており、どれもストックしておきたくなる魅力的なものばかり。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Dribbble – Free Subtle Vector