デザインに興味があるあなたへ。 デザインは時間との戦い。アイデアを形にする時間を増やすためには、効率的なツールと素材えらびが不可欠です。 ここでは、初心者からプロのデザイナーまで利用したい、120のツールと素材を厳選、わかりやすくカテゴリ別に分けています。 そして何と言っても、これらは全て無料で利用できます。 デザイン制作がスムーズに進み、細部へのこだわりも容易になります。 デザインの効率化の一環として、これらのツールを使ってみてください。 これらのツールを使うことで、あなたのデザイン制作が一層楽になるでしょう。

ウェブデザインを作成するとき、アイデアが足りず、頭を抱えることもあるでしょう。 そんなときは、他のウェブサイトをのぞいてみましょう。 理由はずばり、インスピレーションを得られるのはもちろん、最新のデザイントレンドや人気テクニックを知るのに最適だから。 どのようなレイアウトや配色、フォントを使うべきか、ベストプラクティスを実例から学ぶこともできます。 この記事では、話題となっている最新ウェブデザインを国内外からセレクトしてご紹介。 ウェブデザインを改善したいひと、ウェブサイトをこれから作りたいというひとには、ぜひ参考にしてみましょう。 アイデアの宝庫！見逃せない最新ウェブデザイン30選 Hotel 23 南米コロンビアになる、建物全体が植物で囲まれた、ボタニカルなブティックホテルの公式サイト。 Unseen Studio スクリーン上でマウスが通過した部分は、時空が歪むような、ユニークで未来

海外デザインブログCanva Design School Blogで公開された「20 Typography Mistakes Every Beginner Makes」の著者より許可をもらい、日本語抄訳しています。 背景に合わせてアレンジをただ加える見た目以上に、文字テキスト（英: Typography）はデザインにおいて重要な役割があり、プロジェクト全体のデザインを良くも、悪くもします。 文字テキストに関する間違いは、全体のイメージとうまくブレンドされ、よく考えられた文字組み合わせに比べて、目立ちやすくなりがちです。フォントをデザインするときに間違いやすいポイントを学び、デザイン案件の最終チェックリストとして活用してみましょう。 詳細は以下から。 01. 文字間が詰まりすぎ: トラッキング 限られたスペースにテキストを挿入する必要があるとき、どうするでしょう。文字間（トラッキング（英:

全て無料、本当は教えたくないフリーフォント無敵リスト【商用OK】 商用利用OK、日本語や英語、スタイル別にまとめた完全ガイド この記事では、無料ダウンロードできるフリーフォントを、カテゴリやスタイル別にご紹介。 「フォントを探すときに、どこを見たらいいか分からない」 備忘録として活用できる、フリーフォント一覧ガイド集。 人気の高い記事を中心に、定期的にアップデートしています。 コンテンツ目次 好きに選べる、好きなだけ使えるAdobe Fonts ✨ すべてのCCユーザーが対象で、すべてのフォントが使い放題 おすすめフリーフォント ✨ 漢字も使える、オススメ日本語フリーフォントまとめ ✨ 手書きでナチュラルな無料フォント ✨ 筆記体フリーフォント11年分をまとめた秘密リスト Adobe フォント ✨ Adobe Fonts オススメ日本語フォント35選 ✨ Adobe Font オススメ英語

こんなやり方が！フォトショップ時短テクニックや役立つヒント・裏技15個まとめ あまり知られていない、だれでも簡単な便利テクニックが集合 フォトショップをもっと使いこなしたい、と思っている人は多いでしょう。 しかし、フォトショップ経験が長くなってくると、いつも同じやり方ばかりで、新しい方法を取り入れていない、ということが結構あります。 そこでこの記事では、フォトショップを使う上で欠かせない、時短テクニックや役に立つヒント・裏技15個をご紹介します。 「こんなやり方があったのか」と思ってしまう、あまり知られていない、だれでも簡単な実用テクニックを中心にあつめました。 トーンカーブ二重使いの、直感的な写真レタッチ術 カンバスの向きをくるくる回転 ホットキーと隠しスライダーで不透明度を調整 スマートオブジェクトの調整はいつでも編集可能 選択したレイヤーのみ新規レイヤーに結合する方法 柔軟で思い通り

AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。 「これどうやる？」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集 ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。 ユーザーの視線を奪うアニメーションやレイアウ

ウェブサイトの印象を大きく左右する「動き」。 現役Webデザイナーがこれは外せない！というCSSアニメーションライブラリをまとめてご紹介。 任意の要素にクラスを付与するだけで、用途に応じたアニメーションを実装できる便利なライブラリを整理しています。 フワフワやユラユラ、ポヨンといった弾む系の動きから、背景アニメーションなどWebサイトの印象づくりに欠かせない動きが揃います。GitHubレポジトリのスター数が多いものを中心にセレクト。 コンテンツ目次 1. 万能CSSアニメーション 2. 文字エフェクト向け 3. ホバーエフェクト向け 4. 画像、背景向け 5. ふわふわ、ゆらゆら、面白系 6. ハンバーガーメニュー向け 7. クリエイティブなアニメーション 8. よりなめらかな動きを表現するには 9. アニメーションの参考リソース一覧 万能CSSアニメーション Animista 基本となる

手書きイラストレーションは、最近よく見かけるデザイントレンドとして、ウェブサイトやソーシャルメディア、プレゼン資料などあらゆるシーンで利用されています。 しかし、イラストをしっかり手書きできるというデザイナーはあまり多くはないでしょう。新しくアップデートされたイラスト素材サイトOuchでは、追加された数千に及ぶベクターイラストにだれでも無料でアクセスできます。 イラスト素材を無料ダウンロードできるサイトは、以下の記事でも紹介しており、国内向けの日本発イラストもまとめています。 全て無料、本当は教えたくないフリーイラスト素材サイト83個まとめ【商用OK】 イラスト素材サイトOuchの特長 初代Ouchは、2年前に300種類ほどのイラスト素材ライブラリの無料公開をスタートしました。最近メジャーアップデートを行い、数千ものプロフェッショナルなイラスト素材が追加され、だれでも無料でダウンロード可能

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。 これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好

Photoshopをつかって継ぎ目のないパターンテクスチャを作成するのは、なかなか面倒な作業で、時間もかかってしまいます。この記事では、繰り返しパターンをラクラク作成できるPhotoshop向け拡張プラグイン Adobe Textile Designer のインストール方法から詳しい使い方、利用上の注意点までまとめてご紹介します。 コンテンツ目次 1. Adobe Textile Designer プラグインとは？ 2. 入手、インストール方法は？ 3. 詳しいプラグインの使い方 4. 編集したアートファイルの保存について 5. Photoshopを使うならフォトプランがおすすめ Adobe Textile Designer プラグインとは何？ Aodbe Textile Designer プラグインとは、継ぎ目のないパターンテクスチャを瞬時に作成できるAdobe謹製のフォトショップ拡張プ

この記事では、商用利用かつ無料ダウンロードできるイラスト素材、サイトをまとめてご紹介します。 資料作成やサイト作成などあらゆる場面に重宝するフリー素材を揃えています。 国内と海外サイトに分けてまとめています、用途やデザインに応じて、お好みのイラスト素材を見つけてみてはいかがでしょう。 このリストは定期的にアップデートしており、現在5年目の大公開。ブックマークしておくと便利です。 コンテンツ目次 1. 国内の無料イラスト素材サイトまとめ（56個） 2. 海外の無料イラスト素材サイトまとめ（60個） 3. 当サイト紹介の人気イラスト素材まとめ 4. イラストを活用したデザイン参考例 5. イラスト素材編集のおすすめツール 国内の無料イラスト素材サイトまとめ ここでは、日本生まれのイラスト素材サイトをまとめています。 無料なのはもちろん、商用利用OKで高品質なイラスト素材が揃います。 商用利用可

ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。 ゼロから作ると時間のかかってしまいそうなことも、これらのツールを使うことで大幅に制作時間を短縮できるツールが揃います。今後のデザイン制作のワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. モックアップツール 2. デザインツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. サウンドツール 6. アイコン素材パック 7. コラボレーション、共同作業ツール 8. 面白ツール 9. フォント、書体ツール ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ モックアップツール Design Camera アニメーション付きの３Dモックアップを数秒で作

無料で利用できるベクター素材は、制作時間のかかりそうなイラストやパーツなどを手軽に利用できる、グラフィックデザインでも重宝するアイテムです。 今回は、さまざまなシーンで利用可能な、高品質なベクター素材を無料ダウンロードできるサイト22個を国内、海外編に分けてご紹介します。 ベクター素材のクオリティが高いのはもちろん、商用利用にも対応したフリー素材が数多く公開されています。制作時間が短縮したいというときにいかがでしょう。 デザイン力で勝負する！ベクター素材を無料ダウンロードできるWebサイト厳選22個まとめ 海外編（全12サイト） unDraw デザイン性の高さだけでなく、豊富なジャンルを網羅したスタイリッシュなベクターイラストを多数公開しています。すべてのイラストのタッチが統一されているので使いやすく、その場で配色を変更、確認することも可能。 Humaaans 着せ替え人形感覚で、人間のイ

毎月新しく公開されたフリーフォント素材をまとめてご紹介しています。今回は、2015年4月度まとめとなります。 今年に入り、人気が出てきているビンテージ系や手書き系、筆記体アイテムなどが多く収録されています。またシンプルで、どんなデザインにも合わせやすいモダンな書体は、持っていると何かと便利なアイテムのひとつです。どれも無料でダウンロードすることができるので、デザインコレクションに追加してみてはいかがでしょう。 詳細は以下から。 今っぽいデザインを表現する！すごいフリーフォントまとめ Waterlily 水彩絵の具でペイントしたような質感を、そのままフォントに落とし込んだユニークな作品。 ※　個人、商用利用可能 Teardrop Typeface 文字が水滴でかすれたようなエフェクトは、ビンテージテイストにも最適。 ※　個人、商用利用可能 Bough Typeface 手書きでデザインされた

※ 2021年8月31日に新しい素材18種類を追加し、合計100個の無料Photoshopアクション素材となりました。 ※ 2020年1月6日に新しい素材18種類を追加し、合計92個の無料Photoshopアクション素材となります。 ※ 2019年3月6日に新しい素材16種類を追加し、合計74個の無料Photoshopアクション素材となります。 フォトショップのアクションは、デザインに自信がないというひとでも、ボタンひとつでプロ顔負けの圧倒的なデザインを作成できる便利ツールです。 そこで今回は、写真加工を手軽に楽しむことができる、無料Photoshopアクション素材100個を、カテゴリー別にまとめてご紹介します。 作業ペースを格段に上げる時短ツールとして、あらゆるスタイルの写真加工をだれでも簡単に作成できます。 すべて無料でダウンロードできるので、気に入ったアクション素材はぜひ試してみまし

配色は、デザインにおける重要な要素のひとつです。この記事では、デザインプロジェクトの参考にしたい、最新の色の組み組み合わせ101種類をご紹介します。 配色は、どんなデザインでも見る人の認識を形成しながら、雰囲気やトーンを設定します。単色や明るい、涼しい、暖かい、または補色であれ、すべての色合いがデザインの役割を果たします。 デザインに適した色を見つける作業は難しいことです。そこで、配色の参考にしたい101種類の色の組み合わせをまとめています。各カラーパレットは、Shutterstockのイメージ画像にインスパイアされており、HEXコードも一緒に記載しているので、ウェブデザインやソーシャルメディア広告、Eメールデザインなど幅広く利用できます。 コンテンツ目次 1. 単色系カラーパレット 2. 寒色系カラーパレット 3. 鮮やかなカラーパレット 4. 暖色系カラーパレット 5. 補色系カラーパ

2016年、今年もたくさんのフリーフォントが公開され、当サイトで紹介しただけでも600個を超えており、実際どれを使おうか迷ってしまうほどです。 今回は2016年に公開された素材の中から、商用利用可能で無料ダウンロードできるフリーフォントのみを、カテゴリ毎に分けてまとめています。ますます増えているフリーフォントの中から、お好みのアイテムをデザインコレクションに追加してみてはいかがでしょう。 詳細は以下から。 目次コンテンツ デザインの用途、種類に応じてカテゴリー分けしています、目次として活用してください。 サンセリフ書体 セリフ書体 スクリプト・筆記体書体 ディスプレイ書体 日本語フォント サンセリフ書体 Affogato 8種類の異なる太さが用意された万能スタイルで、参考ページではWebフォントとして、レイアウトに活用しています。 目次へ戻る Apple Sans Adjectives デ

毎月世界中で公開されているフリーフォントの中から、特に使い勝手の良い素材やデザイン性の高いアイテムを厳選し、まとめてご紹介しています。今回は、2017年8月度フリーフォントまとめとなります。 今月は、特に入力するだけでスタイリッシュに魅せる素敵な素材が数多く収録されています。また、幅広く活用できる万能スタイルや人気のブラシフォントや筆記体、ミニマルデザインなどデザインの捗るアイテムばかり。プレミアム素材にも負けない素材を、今後のデザインプロジェクトにも利用してみましょう。 デザイナーが持っておきたい、すごいフリーフォント70個まとめ 2017年7月度 使うだけでオシャレに魅せる！素敵なフリーフォントまとめ Spectral Font Family 太さの異なる14スタイルが収録された万能セリフ書体で、小さな画面スクリーンでもはっきりと読めるように工夫され、Googleウェブフォントにも対応

Illustrator がもっと簡単に、楽しくなる無料ベクター素材をまとめています。 オールジャンルの素材が揃っており、どれもベクターなので自由に編集、加工することができるスグレモノ。急なイラスト発注や納期までギリギリ、といったときにも活躍してくれる便利アイテムです。 アナログな素材の風合いや、味のある質感を表現できるビンテージ素材、さくっとオシャレなロゴを作成できるキット、人気の水彩ペイント、キラキラの黄金スタイルなど実用的な無料ベクター素材が揃います。Illustratorがより便利になるお気に入りアイテムを探してみてはいかがでしょう。 Illustratorをもっと面白くする！すごい無料ベクター素材30個まとめ 2016年4月度 大人ナチュラルな西海岸スタイル！無料の手書きイラスト、文字フォント素材集 Illustrator の即戦力！デザイン力がアップする無料ベクター素材まとめ I

テクスチャやパターン素材は、さまざまなデザインに対応できるお役立ちアイテムのひとつで、常に新しい素材を手元にコレクションしておきたいもの。 今回は、デザインの幅がグンと広がる、無料ダウンロードできるテクスチャ＆パターン素材をまとめてご紹介します。人気の高い水彩ペイントや黄金テクスチャ、大理石など旬なアイテムから、ずっと使える万能テクスチャなどさまざまな素材が揃います。またプレミアムアイテムにも負けないほどの高品質なクオリティーもポイントです。 デザインの現場で使える、持っておきたい無料テクスチャ素材40枚まとめ Photoshopに役立つ、無料の万能パターンテクスチャ厳選40枚 2017年4月度 無料ダウンロード！デザイナー注目の極上テクスチャとパターン素材まとめ 10 Watercolor Textures vol.4 水をたっぷり含んだ水彩ペイントの色の混ざり方を、見事に表現したテクス