AIによる便利ツールが増えてきましたね! WebサイトやスマホアプリのUIデザイン用に、入力されたプロンプトを元に色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツールを紹介します。 AI Color Co...記事の続きを読む
2024年3月28日 Webデザイン, 便利ツール ChatGPT、使っていますか?私は有料プランでほぼ毎日利用しています。Google検索が最近アレなんで、ちょっとした調べ物にも、お仕事の簡単な作業にも使っていますよ。今回はデザインに焦点をあてて、日頃のデザイン作業に使っている方法をいくつか紹介します。 ↑私が10年以上利用している会計ソフト! デザインを0から10までやってもらうのはまだ難しい 結論から言うと、まったくなんの情報もないところから、デザインの完成まで頼むのは、まだ難しいかなと思います。ダミーのWebサイトの画面を作ってもらうとかならまぁまぁなクオリティで作ってはくれますが、それをクライアントに提案できるレベルかと聞かれると、うーん…と唸ってしまいます。 なので、最初から最後まで、素晴らしいクオリティで作ってもらうことは1年後くらいにまた試すとして、2024年現在ではデザイ
「毎日のように数えきれない数のツールやサービスが登場し、どれが本当に必要なのかわからない」という方へ。 今回は、2024年に入って公開されたデザインに役立つ無料素材やツールをまとめてご紹介します。 「こんなのあったら便利なのに、」を叶える、かゆいところに手が届く便利ツール・素材を中心に、無料で利用、ダウンロードできるものをセレクトしています。 2024年のデザイントレンドでも何度も挙げられていた、「AIの力をうまく利用したツール」も増えています、合わせて確認してみましょう。 配色ツール Color Palette Generator キーワードを入力するだけで、それに合った配色を生成、見つけてくれる直感的なカラーツール。 Colors for Branding | Unlimited Graphic Design – Draftss 人間の感情に基づいて厳選したカラーパレット集。若々しい配
デザインをするときに、頭を抱えがちな「配色どうしよう」問題。いかに手早くイメージに合った色を選べるかがカギになってきます。 各デザイン用途に役立つ配色ツールも十分便利なのですが、AIの力を借りることで誰でもより簡単に、これだ!と感じる色に巡り会えるかもしれません。 この記事では、AIを活用した配色ツールをまとめてご紹介します。 実際にわたしがツールを試した使用感、デザイン制作に役立つと感じた点と一緒にまとめています。 キーワードから配色を提案するColor Magic AIでオリジナルのカラーパレットをつくれるサービスColor Magic。 雰囲気やイメージのキーワードから、今すぐ使える配色を簡単に生成できます。 日本語での入力に対応している点もうれしいポイント。無料版では、5回/日までカラーパレットを生成可能。 使い方はいたってシンプル。キーワードを入力するだけで、5色のカラーパレット
はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。 ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー~」シリーズでは「知っているとちょっと得するデザインTIPS」や「話のネタになるデザイン豆知識」をお伝えしていこうと思います。 今回のテーマ「色」と「特性」 今回は色の見え方、なかでも色覚特性について書いていこうと思います。 色覚特性はさまざまな理由から、多数派とは違う色の見え方・感じ方をする状態のことを言います。色
神戸大学大学院工学研究科の田中悠暉大学院生、杉本泰准教授、藤井稔教授らの研究グループは、独自に開発した「構造色インク」を用いることにより、世界最軽量クラスの構造色塗装が可能であることを実証しました。近年、退色しない「構造色」が注目されていますが、見る角度によって色が変わる、配列など周期構造が必要である、などの理由により従来の塗料に置き換えることが困難でした。本研究では、Mie共鳴という現象で発色するナノメートルサイズの粒子をインク化し、わずか1層分だけ基材に塗ることで、角度依存性の小さいカラフルな着色が可能であることを実証しました。この成果は、従来の塗料よりはるかに少ない量で着色塗装が可能であることを示しており、例えば、数100キログラムといわれる大型航空機の塗装を、1/10以下に軽量化できる可能性があります。 この研究成果は、1月30日 (米国時間) に、国際科学誌「ACS Appli
はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。 ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー~」シリーズでは「知っているとちょっと得するデザインTIPS」や「話のネタになるデザイン豆知識」をお伝えしていこうと思います。 今回のテーマ「色」 デザインの構成要素にはいくつかの考え方がありますが、非デザイナーがUIやバナー制作で特に意識する必要があるのは以下の4つだと思います。 色 フォント オブジェクト(写真・
あなたは、自分のアイデアや考えを誰かに伝えたいとしましょう。 文字をベースにしたコンテンツはもちろん重要ですが、イラストやチャート図、グラフ、アニメーションGIFなどの画像を作成することで、読者の注意を引き、記事やレポートをより充実させることができます。 成功のカギはずばり、色彩理論を知ることで、コンテンツを際立たせるのに役立ちます。 しかしそうは言っても、あなたもこんな風に悩んだことがあるはず。 「魅力的でかっこいいデザインをする方法がよく分らない。」 「私、クリエイティブじゃないし、。」 私は、”売れるデザインとは?”という究極の悩みを考え続け、このサイトで公開する記事用のビジュアルを作成する日々を、15年ちかく送ってきました。 ちょっとした配色の違いで、アクセス数が2倍、3倍に変わったことも何度もあります。 このような経験があるからこそ、ハッキリ言えることがあります。 それは、配色で
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
「このWebサイト、素敵。」と感じさせるモノとは、一体何でしょう。 それはデザインなのか、それとも機能性なのか、または「このフォント、配色が好き」といった特定のデザイン要素かもしれません。 ずばり、この問題の答えはポンと出せるほど単純ではなく、これらの要素を組みあわせることで、素晴らしいWebサイトは生まれます。 この1年間で、デザイン制作の参考にしたいWebサイトを200以上紹介してきました。 製品やサービスを販売、紹介するサイトや、実験的なサイト、情報を提供する教育的なサイト、政治的なサイト、そして夢中になる体験型サイトまで、業種もさまざまです。 この記事では、デザインアイデアにしたり、トレンドを分析したり、2023年の振り返りに最適な50のWebデザインを厳選してご紹介します。
今年も残すところあと少しとなり、振り返ってみると数えきれないほどのツールや素材がリリースされました。 「本当に役立つツールや素材を集める」をモットーに、2016年からおよそ8年間、定期的に最新ツールをまとめ続けています。 数で言えば、3000個以上。 知っているか知らないかの違いで、作業時間を大幅に短縮し、売り上げが2倍にワープしたことも何度もあります。 このような経験があるからこそ、ハッキリ言えることがあります。 それは、無料で使える素材を知らずに損している人が、あまりにも多いということ。 残念ですが、あなたの素晴らしい商品やサービスの魅力が、ユーザーに全く伝わっていません。 でも、ご安心ください。 この記事では、そんなあなたの役に立つ2023年公開の無料デザインツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。
WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。 カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピーして利用できます。 Spectrum.Art Spectrum.Artは魅力的で視覚的にも優れたUIデザインを簡単に実現するために、UIデザイナーが厳選した色の調和に優れたカラースキームをまとめたサイトです。鮮やかで人目を引くカラースキームから、繊細でエレガントなカラースキームまで幅広いオプションが提供されています。 Spectrum.Art 2023年9月現在、カラースキームは16種類あり、各カラースキームはページ全体やコンポーネントごとにまとめられています。 では、Color s
こんなとこにそんな情報置いても仕方ない気はするが 役に立つかも人もいるかもしれんので置いておく まず農林系の役所の窓口に行って ・堆肥撒いてくれる組合はあるか ・色彩選別機持ってる農家で外注受けてくれるとこはあるか を聞く。 堆肥撒いてくれるとこがあったら撒いてもらってそれだけで稲作する。そしたら環境保全型直接支払交付金で堆肥代が浮く。 窓口でこれも斡旋してくれる。 牛糞なら反当たり3トン毎年入れればそれだけで米取れる。 鶏糞は反当たり300kgくらいかな?やってないからわからん。 これで圃場内では有機肥料のみで育てた美味しいお米作れる。 JAで買う苗にふりかける箱材といわれる殺虫剤と殺菌剤はやらなくていい。無駄。 除草剤は絶対いるがかならずフロアブルという液体タイプにする。 水鉄砲に入れてスプラトゥーンすれば簡単。 粉やら投込むタイプのティーバッグみたいなやつは効きません。濃度が上がるま
「作りたい資料に適したフォントがわからない」 「どの色を選べばいいかわからない」 「スライド資料のデザインをもっと洗練させたい」 スライド資料をデザインするとき、こんな悩みを持つ方は多いのではないでしょうか? スライド資料の印象は使用する「フォント」と「色」によって大きく変わり、うまく活用すれば見る人の心を動かし、行動を促す資料を作成できます。 そんな効果的な資料を作成するには、フォントと色の基本知識が必要不可欠です。それぞれについて学ぶことでデザインセンスが高まり、あなたのスライド資料に適した色とフォントを、効率よく選べるようになるでしょう。 ということで、この記事ではスライド資料のデザインに役立つ「フォント」と「色」の基本知識から、適切な種類を選ぶポイント、もっとデザインを学びたい方におすすめの書籍まで、フォントや色に関するノウハウをたっぷり紹介していきます! デザインに苦手意識がある
最近Webサイトやスマホアプリを利用していてふと気づいたことがある。 「あれ、さっき見てたのどれだっけ?」と思うくらい無意識のうちにどれだったかがわからない状態。そう、アイコンがどれも似ている。その感覚自体は以前にもあったのだが、今回は趣が少し違う。 以前は「アイコン全てカラフル問題」だったのが、今回は「アイコンどんどん黒くなっていく問題 = ブラック化現象」が発生している。 そう、最近は白と黒のアイコンがあまりにも多くないか?そんな気がして少し考察してみることにした。 【トレンド分析】最近のアイコンのデザインが似通ってきている問題 X → Twitterへのドラスティックなリブランドの衝撃まずその傾向の代表が、爽やかな水色からシックなモノトーンになった Twitter、いや、Xだろう。
https://archive.is/AQuYS この記事は検証自体がネットストーカー的な話で怖さがあったりますが……。まずこのファミマ自体は該当アカウントの「実家の近所」だとのこと*1。では、ということで「実家」でキーワード検索すると浦安市であると判断できます。で、さらに実家の近所の店についてのツイートがあり*2、それが浦安の堀江6丁目。で、ここまで来たらあとはグーグルストリートビューでしらみつぶしにしていけばいいわけで、そしてその該当店舗が「ファミリーマート 浦安海楽店」となるわけです。 https://goo.gl/maps/TAmUC5aidKdLVrJV8 さて、上記のストリートビューは2022年9月の時点のものです*3。うちゃか氏はおそらくの文意としてLGBT理解増進法などの時によく見られた「消える女子トイレ」的な話があると思われますが、去年時点で消えてるならこの話には関係ない
配色本の中で日本一(もしかしたら世界一)売れている(担当者様談)配色アイデア手帖、現在も好調に売れ続けている中、完全保存版となるべく改訂第2版が発売されました! この第2版では、収録されているカラーすべてのスウォッチデータ、CSSファイル、ポケット版PDFと豪華ダウンロード特典が満載で、さらに新しい配色テーマやコラムが増え、紙面は最新版にブラッシュアップされています。まだ持っていない人はもちろん、すでに持っている人にもお勧めします。 本書は、本日発売の最新刊! 5年ほど前に発売された配色アイデア手帖の第2版です。読者からの要望で多かった、カラー値を入力するのが面倒というのを解消するべく、さまざまなソフトウェア用のスウォッチファイルがサポートサイトからダウンロードできます。 Adobe Photoshop用のスウォッチ(CMYKとRGBの2種類): .aco Adobe Illustrato
しゅう@人間だした @S_Rhinoceros 子供のラッシュガードの色を決めるのに調べてたらHITしたんだけどさ!赤がダメなのは知ってたけど(海辺育ちなので)、オレンジ以外と目立つねえ!オレンジ、黄色、蛍光よりの黄緑かな…ピンクも悪くなさそう、流行りのくすみカラーは絶対ダメだろうな…蛍光で選ぼう…… twitter.com/kurorabukyouzy… 2023-07-26 09:41:35 リンク 日本最大級の水着が揃うAi(アイ)スクウェア - 水着は全品送料無料、日本最大級の水着が揃うAi(アイ)のブログやコラムが閲覧できますサイトです。 ラッシュガードとは?意味やメリット、目的別の選び方やポイントを完全ガイド - 日本最大級の水着が揃うAi(アイ)スクウェア ラッシュガードとは? ラッシュガードとは、ポリエステル・ポリウレタン・ナイロンの素材を使って作られたスポーツウ 1 us
「スーパーマリオ」でスターを取ったときの光り方は,地上と地下で違う。そこにはファミコンゆえの理由があった 編集部:荒井陽介 本日(2023年7月15日),発売40周年を迎えたファミリーコンピュータで最大のヒットタイトルといえば,全世界での販売本数が4000万本を超えたとされている「スーパーマリオブラザーズ」(以下,スーパーマリオ)だろう。 当時生まれていなくても,「バーチャルコンソール」や「ニンテンドークラシックミニ ファミリーコンピュータ」「ファミリーコンピュータ Nintendo Switch Online」などで触れた人は多いはずで,家庭用ゲーム史上,もっとも多くの人がプレイしたタイトルかもしれない。 そんなスーパーマリオなので,特定のブロックを叩くと出てくる「スター」を取ると,マリオの体が激しく光り,無敵状態になる……ということは,今さら説明するまでもないだろう。 だが,その「マリ
藤村シシン🏛神話受容史講座 @s_i_s_i_n 古代ギリシャの錬金術に対する論文でずっと「要するに日本のShakudō!」って書かれててなんでわざわざ日本語で表現するのかな、と思ってたら「赤銅」って日本特有の合金だったんだ。 まさかの古代ギリシャ経由で日本の合金について知れたのと、ここに来て日本の刀剣をちゃんと見てこなかったツケが 2023-07-03 22:15:29 藤村シシン🏛神話受容史講座 @s_i_s_i_n 古代ギリシャの錬金術師が金属を「至高の紫化」してテンション爆上がってるのが日本の刀剣とかの「赤銅8分挿し」に近いってことか……!? これは日本にいるならいくらでも現物が見れそうだぞ。こんなに日本刀を見たいの初めて。 2023-07-03 22:25:47 リンク Wikipedia 赤銅 (合金) 赤銅(しゃくどう)は、銅に3 - 5%の金を加えた合金である。象嵌細工
「DICとPANTONEの違いについて、色々と調べてブログにまとめましたが、どうもよくわからない。」ということで、PANTONE(パントン・パントーン)の日本総代理店のユナイテッドカラーシステムズさんに直接電話して聞いてみたら、驚きの結果が!これは日本中のデザイナーさんに知って頂きたい。 PANTONE のインキは無い!? サンコー)「PANTONE(パントン・パントーン)で色指示があり、近似色ではなくPANTONE(パントン・パントーン)のインキで印刷して欲しいので、インキを作ってくれるところを紹介して欲しい。」 ユ:「ユナイテッドカラーシステムズではインキは製造していないのでパントン社とライセンス契約したインキ会社に相談して下さい。」 えっ?・・・ PANTONE(パントン・パントーン)はあくまでカラーシステム(色見本)のみを持っており、実際にインキを作るのはライセンス契約をしている国
テキストを入力すると、Webサイトやスマホアプリ向けの美しいカラーパレットをすぐに生成してくれるAIツールを紹介します。 「企業サイト向けのクールで信頼感のあるカラーで、ベースはホワイト」「子供向けキャンペーンサイト、海と夏のイメージ」こんな感じにテキストを入力すると、Webサイトやスマホアプリ向けのカラーパレットを生成してくれます。 AI Colors AI Colorsの特徴 AI Colorsの使い方 AI Colorsを使ってみた AI Colorsの特徴 AI ColorsはOpenAIのGPT-3.5を使用して、テキストからAIによりWebサイトやスマホアプリ向けの美しいカラーパレットを生成します。また、他の人が作成したカラーパレットを検索・編集・視覚化することもできます。 利用にあたっては無料で、登録なども必要ありません。
対話型AIの話題が尽きない。火付け役となったのは「ChatGPT」だ。質問や指示を投げかけると、AIが回答を生成する。デザインでの活用も可能だろうか。サントリー『特茶』のロゴデザインなどを手がけたアートディレクター小杉幸一氏が、「ChatGPT」にディレクションをしてみた。 AIのお手並み拝見 小杉 「色」は、商品やサービス、企業ブランドなどの〈コミュニケーション人格〉を構成する重要な要素のひとつです。〈コミュニケーション人格〉とは、ターゲットとなる生活者と関係を築くための、ブランド側の〈人格〉のことです。 コミュニケーションする側の商品やサービス、企業ブランドはどんな〈人〉なのか。ターゲットとする人たちに話しかけたとき、ちゃんと聞いてもらえる人格はどのようなものかを考えるところから、デザインは始まります。 「ChatGPT」とは 「ChatGPT」は入力した質問や指示などに対して回答とな
今回は、Microsoftのオープンソース系アプリケーションの動向を見ていくことにする。対象はとしたのは、 ●Windows Terminal https://github.com/microsoft/terminal ●PowerToys https://github.com/microsoft/PowerToys ●Winget https://github.com/microsoft/winget-cli の3つ。リンク先は、GitHubのページである。以下の表に、それぞれのプレビュー版や安定版の情報を示す。そのほかにも「電卓」や「PowerShell」などもあるが、「電卓」は大きな動きがないこと、「PowerShell」に関しては毛色も異なるため、別の機会としたい。 「Windows Terminal」は安定版が四半期リリースに変更 Windows Terminalは、プレビュー版
迷わず決定 Adobeの配色カラーパレット、アイデア101個 90年代「昭和レトロ」など11スタイルから選べる 使いやすくセンスのいい配色101パターン デザインで配色えらびが重要なのは分かっているが、いつも迷って時間がかかるという人も多いでしょう。 この記事では、時短にも役立つAdobeの配色アイデア101個をご紹介します。 人気の「90年代レトロ」や「ネオンライト」、オシャレな「シンプル&ナチュラル」など、さまざまなデザイン案件に適した、101の色の組み合わせが提案されています。 気に入った配色を見つけたら、そのままAdobe Expressで編集することもできます。 コンテンツ目次 1. 控えめなパステルカラー 2. クリーン&モダン 3. 光沢メタリック 4. 鮮やかネオン 5. デュオトーン&モノクロ 6. ナチュラル&オーガニック 7. 控えめなパステルカラー 8. クリーン&
※こちらの記事がはてブの総合人気エントリに入りました! こんにちは。くるしばです。 元々コンサルタントの仕事をしていましたが、独学でプログラミングを学習し、Webサービスを作って起業しました。 その後個人で開発したサービスを売却したり、また別のIT系の会社を創業したりしています。 去年の8月から下記のTwitterにてプログラミング学習に関して発信し始め、ありがたいことに8000人の方々にフォローして頂きました。 プログラミング初心者に絶対覚えてほしい、ググる時の効率が10倍上がるコツ pic.twitter.com/hK1ZhNavwh — 苦しんでプログラミングを学んだ柴犬(くるしば) (@shiba_program) September 13, 2022 僕は普段はいわゆるPMやエンジニアとして仕事をすることが多いのですが、業務でも個人プロジェクトを作っている時でも 「最低限の見栄え
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか? それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇
この記事では、クリエイターが知っておくと便利な、最新オンラインツールをまとめてご紹介。 昨年末より話題持ちきりのAI関連ツール、特に増えています。 また、Webサイト制作が楽になる時短ツールやデザインツールなど、あらゆるクリエイティブな案件、プロジェクトで活躍しそうな新ツールが中心。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. AIツール 2. Webデザイン便利ツール 3. 配色ツール 4. デザインツール 5. プロトタイプ・アイコンツール 6. クリエイティブ・面白ツール Web制作の効率、生産性アップ!話題の最新オンラインツールまとめ AIツール Hotpot 写真の背景を削除したり、拡大ししたり、不要なものを消したり、古い写真のカラー化などを、AIがまとめて行う自動ツール。 加工した写真は、InstagramやTwitt
2023年1月29日 便利ツール, 色彩 配色ってなかなか思った通りのイメージにならず、難しいと感じる方も多いでしょう。そこで今回は、AIでオリジナルのカラーパレットをつくれるサービスColorMagicを紹介します。キーワードからかんたんに配色を生成してくれますよ! ↑私が10年以上利用している会計ソフト! ColorMagicを使ってみた ColorMagicのWebサイトの「パレットをつくる」ボタンから始めましょう。日本語で利用できるのが嬉しいですね!入力欄に作成したいイメージを入力します。ここではヨガと入力してみました。「生成する」ボタンをクリック。 いい感じに配色が提案されました!「同じワードで再生成」ボタンから別の配色を提案してもらえます。ただしアカウントを作成しない場合は3回まで。色の調整や保存もアカウント登録が必要です。 アカウントを作成すると、毎日10回まで無料で配色の生
最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニメーション、コードの管理・品質・デバッグに役立つツールなど、もりだくさんです。 CSS Layout Generator Webサイトでよく使用される「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツール。以前紹介したときは、CSS Gridのみでしたが、Flexboxにも対応しました。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く