【保存版】配色アイデアに迷わない、すごい配色カラーパレットツール107個まとめ
「配色えらびのベストな方法が知りたい」 「イメージにあった色をもっと手軽に選びたい」 「色がなかなか決まらない」 「配色えらびにAIを活用してみたい」 この記事では、配色えらびが苦手なひとに役立つ無料ツールをまとめてご紹介します。 ２０１６年８月の初投稿から９年かけてわたしが見つけた、実践向けの配色ツールをカテゴリ別に揃えました。 リンクの切れたツールは削除し、新しいデザインツールを追加した最新版にアップグレード。 配色の基本ルールを頭に入れておけば、お気に入りの色を効果的に見つけることができますよ。 コンテンツ目次 普段使いできる便利ツール（17個） ワンクリック、人工知能系ツール（20個） マテリアルデザイン系ツール（4個） Webデザイン・UIデザイン関連ツール（21個） 写真から抽出系ツール（2個） インスピレーション系ツール（14個） グラデーション関連ツール（29個） 配色カラ
AIで完全自動！複雑な人物の切り抜きを5秒で行う無料ウェブサービス remove.bg - PhotoshopVIP
写真の中から人物を切り抜く作業は、Photoshopをつかったテクニックが有名ですが、人工知能が自動でやってくれる時代も、そう遠くないのかもしれません。 今回ご紹介する Remove.bg は、写真をアップロードして5秒待つだけで、背景から人物を自動で切り抜いてくれる無料ウェブサービスです。背景や前景レイヤーを選択するなど面倒な作業もなく、クリックひとつする必要もありません。 AI切り抜きサービスRemove.bgとは？ Remove.bg は、背景から人物の顔を自動検知するAI技術を活用し、その精度をより高めるために、複数のアルゴリムを組み合わせることで実現したWebサービスです。このAIは、まず人物を前景レイヤー、次にその他すべてを背景レイヤーとして検知する仕組みとなっています。 Remove.bgの使い方 操作はいたってシンプルで、「Select a Photo」ボタンで画像を選択す
Bootstrap アーカイブ
メルマガ登録 HTMLテンプレート·2023年6月15日·Last updated:2023年6月16日商用OKの無料HTMLテンプレート120個以上をダウンロードできる Templates Jungleウェブデザイン·2021年2月15日·Webサイト制作の時短テク！便利な最新オンラインツール48個まとめウェブデザイン·2021年1月27日·どう書くんだっけ？ を一発解決！コピペ用コードスニペットを集めたオススメWebサイトまとめHTMLテンプレート·2020年5月14日·ニューモーフィズムをBootstrapで再現！無料UIコンポーネント200個セット Neumorphism UIHTMLテンプレート·2020年4月24日·無料のおすすめ最新HTML5テンプレート厳選45個まとめ【2020年版】HTMLテンプレート·2019年9月25日·無料で商用可！Bootstrapでできた高品質な
コピー＆ペーストで使える！実践的なBootstrapスニペット12個まとめ
海外デザインブログTutorialzineで公開された「12 Time-Saving Bootstrap Examples」の著者より許可をもらい日本語抄訳しています。 人気のHTMLフレームワークBootstrapを使った案件に便利な、コピー＆ペーストで使うことができるコードスニペット12個をまとめてご紹介します。実践的なウェブサイト案件で活用することができ、制作時間の短縮にもつながるコードを集めています。 HTMLとほんのすこしのCSSをコピーするだけで、より自由なレイアウト、コンテンツ表現を可能にしてくれます。 詳細は以下から。 コピー＆ペーストで使える！実践的なBootstrapスニペット12個まとめ スニペット１ ログインフォームをモーダルボックスで表示 ボタンをクリックすることでモーダルボックス（英: Modal）を展開します。「続きを読むにはログインしてください。」などのポッ
無料でオススメ！WordPressの参考にしたいテーマ40個まとめ【日本語対応】
世界中で利用しているウェブサイトやブログの数も増えている、WordPress。テーマを切り替えることで、デザインや機能を自由にカスタマイズできる点も人気の理由でしょう。 しかし、テーマの種類もとても多く、どれを利用したらいいか分からないというひとも多いのではないでしょうか。 今回は、これからWebサイトを制作しようと考えているひとにオススメしたい、無料で利用できる高機能WordPressテーマ40個をまとめました。どれも日本語に対応しており、ページの読み込みスペードやSEOを考慮したものなど、カスタマイズしやすく実用的なテーマを集めています。 詳細は以下から。 無料でオススメ！WordPressの参考にしたいテーマ40個まとめ【日本語対応】 Philomina 写真イメージをたくさん利用するブログやウェブサイトに適したテーマで、ファッション系のクリエイティブコンテンツに重宝します。 デモペ
入力するだけでデザインが良くなる、新作フリーフォント素材40個まとめ 2016年11月度
文字を入力するだけでデザインがグッと良くなり、デザイン制作も楽しくなる、無料ダウンロード可能な新作フリーフォント素材をまとめてご紹介します。 人気の高いナチュラル系の筆記体や筆ブラシ文字、ウェブサイトでも可読性の高いスタイルの他、ひらがなやカタカナ、漢字も使える日本語フォントなど幅広いデザインに活用できるアイテムを中心に揃えています。 詳細は以下から。 入力するだけでデザインが良くなる、新作フリーフォント素材まとめ Cool Sans Family Free Demo ゴージャス＆ミニマルなデザインに最適なフリーフォントで、今回は Regular スタイルを無料ダウンロードできます。 ※ 個人利用可能 Sagona Typeface Demo 19世紀頃に利用されていた書体を元に作成されたセリフ書体で、あらゆるデザイン制作に活躍してくれるでしょう。 ※ 個人、商用利用可能 Five Bor
すぐ使える！クリスマスデザインの最強フリー素材55個まとめ【2022年版】
すぐ使える！クリスマスデザインの最強フリー素材55個まとめ【2022年版】 クリスマスを彩る、無料イラストやグラフィック、フォント大集合 この記事では、クリスマスに使える無料デザイン素材をまとめてご紹介します。 そのまま印刷できるクリスマスカードやベクターイラスト、ラベルバッジやアイコン、Photoshopブラシやレトロスタイルのキャラクター、招待状テンプレートや話題の3Dデザインまで完全網羅。 クリスマスが近くなったけど、デザインにあまり時間をかけることができない、そんなひとにオススメしたいフリー素材を中心に揃えています。 紹介しているデザイン素材は、フォトショップやイラストレーターを使って、自由に編集できます。すべてのツールを利用できる、Creative Cloudがおすすめです。 Creative Cloudのプランを見てみる めっちゃ使える！クリスマスデザインの最強フリー素材まとめ
デザインに自信がない人も大丈夫！無料UIキットでWeb制作スピードをアップしよう。
ウェブサイトのデザインが決まらないときは、PhotoshopやSketchで編集できる、UIコンポーネントやPSDテンプレートを活用してみましょう。アイデアを形にしやすくし、写真や文字テキストを編集するだけ手軽にデザインを完成させることができます。 今回は、2016年のデザイントレンドを盛り込んだ、無料ダウンロードできる UI コンポーネントや PSD テンプレート素材をまとめてご紹介します。本格的にデザインをはじめる前のモックアップやワイヤーフレームとしても活用できるアイテムを中心に揃えています。 詳細は以下から。 Web制作スピードをアップする、無料UIコンポーネント、PSDレイアウト素材まとめ Chat UI Kit ミニマルなレイアウトに、カラフルな配色を活用したUIコンポーネントは、Photoshop と Sketch 用ファイルがそれぞれ用意されています。 Carbon Mat
ほんの数クリックで完成！文字をかっこよくするPSテキストエフェクトまとめ
Photoshopを利用し、短時間で手軽に、みんながあっと驚く高品質なデザインを作成する方法はいくつかあります。 そのなかでも、文字を挿入し、ボタンを数クリックするだけで、見違えるほど魅力的にするテキストエフェクトは、グラフィックデザインにぜひ活用したい素材です。今回は参考にしたい PSD ファイルを、ファイルの基本的な使い方、カスタマイズ方法と一緒にご紹介します。 詳細は以下から。 ファイルの編集、カスタマイズ方法 では実際にファイルをダウンロードし、どのように編集するのか具体的に見ていきましょう。今回はデモとして以下のファイルを利用しています。 Molten Text Effect – DealJumbo まずPhotoshopでファイルを開き、レイヤーパネルを確認します。パネルの一番上に配置された、サムネイルの右下にアイコンが表示されているレイヤーは、スマートオブジェクトレイヤーであ
モバイルの使いやすさを劇的向上！参考にしたい7つのポイントまとめ
アプリはコンテンツやサービスを提供するために、信用できる主流の方法となっています。しかし、さまざまなサービスが乱立する市場では、どのようなモバイルアプリが役立ち、関連性が高く評価され、ユーザーを楽しませてくれるでしょう。 今回は、本当に素晴らしいモバイルユーザーエクスペリエンスを生み出す鍵となる、7つのUXデザインのヒントを見ていきましょう。 コンテンツ目次 1. ひとつのスクリーンに、ひとつの課題を。 2. 見えないユーザーインターフェース 3. たっぷりの余白スペースを。 4. ナビゲーションはシンプルに。 5. 片手による操作 6. アプリの表示時間を早く。 7. プッシュ通知を賢く使おう。 01. ひとつのスクリーンに、ひとつの課題を。 ユーザーが望む結果を得るために必要な労力をできるだけ軽減しましょう。 アプリのために設計したすべてのスクリーン画面は、それを使っているユーザーが本
サイト設計の手間を大幅に削減する、実用HTMLテンプレート素材30個まとめ 2016年10月度
Bootstrapなどのフレームワークの登場によって、ウェブサイト制作は以前よりも手軽に、そして身近になってきています。特にデザイントレンドをうまく採用したHTMLテンプレートを利用することで、モバイル端末へのレスポンシブ対応はもちろん、簡単にサイトデザインを作成できるようになっています。 今回は、無料ダウンロードできる新作HTML5/CSS3テンプレート素材をまとめてご紹介します。どの素材も高品質なだけでなく、テキストエディタで編集しやすい仕様となっており、サイト制作が捗るアイテムが揃っています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 サイト設計の手間を大幅に削減する、実用HTMLテンプレート素材まとめ Material Design for Bootstrap Google 公式のデザインガイド「マテリアル・デザイン」をコンセプトに、人気フレームワーク B
テキスト加工にオススメ！Photoshop無料レイヤースタイル素材まとめ
Photoshopで写真加工を行うとき、ボタンひとつで仕上げてくれる、アクションツール機能があります。同様に、テキスト加工を行うとき、クリックひとつで完了のレイヤースタイル機能を利用してみましょう。プレーンなテキストに、手軽な操作のみで、素敵なエフェクトを演出してくれます。 海外デザインブログBlog.SpoonGraphicsで、コレクションに追加しておきたい、Photoshop無料レイヤースタイルをまとめたエントリー「20 Free Photoshop Styles to Create Stunning Text Effect」が公開されていたので、今回はご紹介します。 詳細は以下から。 レイヤースタイルのインストール方法 まずお好みのレイヤースタイルをダウンロードしましょう。ほとんどの場合、zipファイルなどで圧縮されているので解凍しておきましょう。フォトショップを開き、メインメニュ
Photoshopで映画「トランスフォーマー」のロゴテキストエフェクトを作成する方法
Photoshopの便利で、効果的な使い方のひとつに、レイヤースタイルを利用したデザイン方法があります。 特にロゴなどのテキストエフェクトで利用されており、スタイルを保存することで次回以降、クリックひとつでエフェクトを完成させることができます。 そんなレイヤースタイルを使って、映画「トランスフォーマー」のタイトルロゴ風テキストエフェクトを、Photoshopで作成するチュートリアル「Create a “Transfarmers” Text Effect Using Layer Styles in Photoshop」が公開されていたので、今回はご紹介します。 サンプル用PSDファイルをダウンロード可能となっているので、実際にサンプルを見ながらデザインすると分かりやすいかと思います。 詳細は以下から。 チュートリアル情報 [info_box] プログラム : Photoshop バージョン
【テキスト・エフェクト】 - フォトショップで本物のような輝きがまぶしい黄金文字をつくる方法
↑ クリックすると原寸拡大表示されます。 今回は、フォトショップで本物のような輝きがまぶしい黄金文字をつくる方法をご紹介します。 本当に光が当たって反射しているようなテキストエフェクトをフォトショップのレイヤースタイルを適用するだけで作成できます。 最後にサンプル用PSDファイルを公開していますので、スタイルを保存しておけばクリックひとつで完成してしまうお手軽チュートリアルです。 詳細は以下から。 チュートリアル情報 プログラム : Photoshop バージョン : CS4で作成 （古いバージョンでも可能） 難易度 : 初級者から中級者 所要時間 : 5分から10分ほど チュートリアルをはじめる前に今回使用したフォントをダウンロードしておきましょう。 今回は「ダウンロードしておきたい25個の高品質な筆記体フリーフォント完全まとめ」で紹介した「Exmouth」フォントを使用しています。 チ
著作権フリーで実用度高め！商用OKなオシャレ無料写真ストックサイト Skuawk
ウェブサイト制作や資料づくりなどに活用したい、高品質でロイヤリティーフリーの無料写真を公開している、新しいフォトストックサイト Skuawk をご紹介します。もちろん商用利用も可能で、圧倒的なクオリティーは、写真選択の時間を短縮してくれるでしょう。 他のフォトストックサイトまとめと一緒に利用すれば、写真素材に困ることも少なくなるかもしれません。 「フリー写真」カテゴリを確認する 詳細は以下から。 著作権フリーで実用度高め！オシャレな無料写真ストックサイト Skuawk Skuawk は無料で、美しく芸術的（Free, Beautiful and Artistically Loud）をモットーにしたフォトストックサイトです。公開されている写真はパブリックドメインとなっているので、クレジット表記も不要でコピーや複製、商用利用にも対応しています。 食べものや風景、都市、テクノロジー、人など使いや
マテリアルデザインを手軽に！CSS/HTML/JSコンポーネント「Material Design Lite」の使い方まとめ
数日前にGoogleは、マテリアルデザインの考えを取り入れた公式フレームワークフレームワーク「Material Design Lite」を公開しました。マテリアルデザインの見た目や操作性に重点をおいた、CSS，HTML、JavaScriptコンポーネントで、より手軽にウェブサイトやブログ、ランディングページなどを作成することができます。 今回は、Material Design Liteの基本的な使い方と、公開されている素材やテンプレートを、個人的な備忘録としてまとめています。 詳細は以下から。 Material Design Liteの使い方 ダウンロードしたCSS/JavaScriptを、HTMLファイルに読み込むだけでなく、GoogleがCDNホストしているファイルを読み込むことも可能です。 <link rel="stylesheet" href="https://storage.go
Illustrator をしっかり学びたいひとへ。参考にしたい入門チュートリアル、つくり方39個まとめ
クリエイティブなプロデザイナーが実践する、デザインテクニックを身につけるチュートリアルやつくり方をまとめています。 豊富すぎるツールは Illustrator ビギナーにとって、戸惑うことも多いでしょう。そんなときは順番ごとにデザインを進める、実践的なチュートリアルを参考に、基本的なツールを学んでみましょう。テクニックが増えていくことで、Illustrator をより自在に操作することができるでしょう。 詳細は以下から。 Illustrator をしっかり学びたいひとへ。参考にしたい入門チュートリアル、つくり方まとめ 夏をテーマにしたカラフルなアイコンを作成する方法 ペンツールを使ってデザインする、シンプルでかわいいアイコンパックのつくり方。 惑星アイコンのつくり方 銀河系の惑星をひとつずつ、色鮮やかな配色のフラットスタイルで描いたアイコン素材セット。 ゲームに出てくるファンタジーな武器を
Googleマテリアル・デザインをはじめよう！参考にしたい無料素材やアイデアまとめ
[fancy_box]海外デザインブログDesignModoで公開された「Material Design Resources and Inspiration」の著者 Paula Borowskaより許可をもらい日本語抄訳しています。Thank you so much again, @paula & @designmodo![/fancy_box] マテリアル・デザイン（英: Material Design）は、Googleが発表した新しいビジュアル言語で、より良いユーザー体験を実現するための新しいテクノロジーに、どんな環境でも使える理想的なデザインを組み合わせようとしています。マテリアル・デザインのコンセプトはまだまだ新しく、参考になる資料やサイトが少なく、手が出しにくいのではないでしょうか。 今回は、マテリアル・デザインをはじめるきっかけになりそうな、HTML/CSSやPSD，AIファイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Photoshop VIP