Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。現在のところ、サポートブラウザはChrome, Firefoxですが、Safari TPに実装されており、次のバージョンでサポート予定となっています。 CSSのlight-dark()関数の基礎知識と実践的な使い方を紹介します。 CSS color-scheme-dependent colors with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSにおけるシステムカラー light-dark()関数の基礎知識 light-dark()関数の使い方 はじめに システムカラーには、現在使用され
Other prompts to tryMother's DayA color combination for AI startupAn ecommerce website selling pet suppliescolor combination for my living room, i want to to be earthy and classiccolor palette bluecolor palette deep autumncolor palette summercolor palette websitecolor palette purplecolor palette skin tonecolor palette with redcolor palette seasonscolor palette yellowcolor palette beigecolor palett
UIデザイン用に、AIで色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツール -AI Color Combination Generator
AIによる便利ツールが増えてきましたね！ WebサイトやスマホアプリのUIデザイン用に、入力されたプロンプトを元に色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツールを紹介します。 AI Color Co...記事の続きを読む
ChatGPTを活用したデザイン制作
2024年3月28日 Webデザイン, 便利ツール ChatGPT、使っていますか？私は有料プランでほぼ毎日利用しています。Google検索が最近アレなんで、ちょっとした調べ物にも、お仕事の簡単な作業にも使っていますよ。今回はデザインに焦点をあてて、日頃のデザイン作業に使っている方法をいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ デザインを0から10までやってもらうのはまだ難しい 結論から言うと、まったくなんの情報もないところから、デザインの完成まで頼むのは、まだ難しいかなと思います。ダミーのWebサイトの画面を作ってもらうとかならまぁまぁなクオリティで作ってはくれますが、それをクライアントに提案できるレベルかと聞かれると、うーん…と唸ってしまいます。 なので、最初から最後まで、素晴らしいクオリティで作ってもらうことは1年後くらいにまた試すとして、2024年現在ではデザイ
異なるカラーを濃くしたり薄くしたりするとき、個別にカラーを設定してもできますが、CSSの相対カラー構文（color: rgb(from green r g b);）を使用すると簡単に実装できます。 下記はそれぞれ元のカラーに対して相対カラー構文1つでそのカラーを濃くしたり薄くしたりしています。1つのカラーに対して複数の濃さが必要な場合に便利です。 CSSの相対カラー構文とは CSSの相対カラー構文のデモ CSSの相対カラー構文とは CSSの相対カラー（CSS Relative colors）構文を使用すると、他のカラーのパラメータを変更してカラーを定義できます。相対カラー構文は設定した色を相対色に変換します。変換には、fromキーワードを使用します。ブラウザはベースのカラーを変換して分解し、新しいカラーの定義で使用する変数として使用できます。
「毎日のように数えきれない数のツールやサービスが登場し、どれが本当に必要なのかわからない」という方へ。 今回は、2024年に入って公開されたデザインに役立つ無料素材やツールをまとめてご紹介します。 「こんなのあったら便利なのに、」を叶える、かゆいところに手が届く便利ツール・素材を中心に、無料で利用、ダウンロードできるものをセレクトしています。 2024年のデザイントレンドでも何度も挙げられていた、「AIの力をうまく利用したツール」も増えています、合わせて確認してみましょう。 配色ツール Color Palette Generator キーワードを入力するだけで、それに合った配色を生成、見つけてくれる直感的なカラーツール。 Colors for Branding | Unlimited Graphic Design – Draftss 人間の感情に基づいて厳選したカラーパレット集。若々しい配
ダイアログやモーダルを表示する時に、コンテンツの上にオーバーレイを使用します。このオーバーレイはコンテンツの上に表示されるように::backdrop疑似要素で最上位レイヤーにするのが簡単です。 先日アップデートされたChrome 122でこの::backdrop疑似要素の値の継承ルールが変更されました。 Changes to CSS ::backdrop inheritance by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 これまでの::backdrop疑似要素 アップデートされた::backdrop疑似要素 これまでの::backdrop疑似要素 フルスクリーンに表示する要素用のAPIを定義するFullscreen APIでは、最上位レイヤーや::backdrop疑
デザインをするときに、頭を抱えがちな「配色どうしよう」問題。いかに手早くイメージに合った色を選べるかがカギになってきます。 各デザイン用途に役立つ配色ツールも十分便利なのですが、AIの力を借りることで誰でもより簡単に、これだ！と感じる色に巡り会えるかもしれません。 この記事では、AIを活用した配色ツールをまとめてご紹介します。 実際にわたしがツールを試した使用感、デザイン制作に役立つと感じた点と一緒にまとめています。 キーワードから配色を提案するColor Magic AIでオリジナルのカラーパレットをつくれるサービスColor Magic。 雰囲気やイメージのキーワードから、今すぐ使える配色を簡単に生成できます。 日本語での入力に対応している点もうれしいポイント。無料版では、5回/日までカラーパレットを生成可能。 使い方はいたってシンプル。キーワードを入力するだけで、5色のカラーパレット
庵野氏がSlackフル活用、Confluenceには100GBの設定資料――「シン・エヴァ」制作支えたITシステム
1984年生まれ。2008年にJAXAに入社し、約9年半勤務した後、2017年にカラーへ入社。有限会社ゼクシズに出向し、『あさがおと加瀬さん。』に制作進行として携わった後、カラーに復帰。『シン・エヴァンゲリオン劇場版』の制作進行を担当。2023年7月にプロジェクトとしての『シン・エヴァ』映画制作を振り返る公式報告書籍『プロジェクト・シン・エヴァンゲリオン』を上梓。2023年11月下旬に株式会社カラーを退社、以降フリーランスとなる。 SNSアカウント：＠Narita_Kazumasa 書籍公式サイト: https://www.khara.co.jp/project-eva/ 電子版詳細：https://www.khara.co.jp/2023/07/10/2023071018/ ニコニコ動画開発者がシステムを再設計 まずビジョンから アニメ制作のデジタル化は1990年代ごろから急速に進んでお
対策とセットで公開しろよボケが まずサンプルは https://www.neo-blood.co.jp/ を見..
対策とセットで公開しろよボケが まずサンプルは https://www.neo-blood.co.jp/ を見れば大体わかる こういう詐欺サイトにはひっかからないようにしような で、対策 見分け方としては https://www.ccj.kokusen.go.jp/jri_sysi?page=sgSite あたりが参考になる 最初から騙されずに買わないのが一番いい。このサイトで予習すればだまされる率も減るだろう で残念ながら騙されてしまった場合。 汎用的な対処法については https://www.ccj.kokusen.go.jp/chatbot_answer?page=mhuhn&ksi=credit の3．クレジットカード会社への相談についてを見ろ 追記を見たが銀行振り込みの場合は https://www.ccj.kokusen.go.jp/chatbot_answer?page=mh
今年もCSSはどんどん進化しそうですね！ 1/24にリリースされたChrome 121に追加された、CSSの新しい機能6つを紹介します。スクロールバーのスタイル、スペルミスや文法的に正しくないテキストをハイライトする疑似要素、SVGのCSSマスキングなど、これからのWeb制作に役立つ機能ばかりです。 New in Chrome 121 Chrome 121 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSによるハイライトの継承 CSSによるスクロールバーのスタイル font-paletteプロパティでカラーフォントをアニメーション CSSのスペルチェック機能 SVGのCSSマスキングの改善 displayプロパティの新しい値 はじめに 1/24にリリースされたCh
2023年もまた、Webサイトやオンラインツール、無料素材、フリーフォントなど、創作活動を支える重要なリソースが数多く登場しました。 年末の慌ただしさで、クオリティの高い素材や便利なツールを見逃してしまった、そんなクリエイターやデザイナーも少なくないでしょう。 この記事では、あなたのクリエイティブな制作活動をもっと効果的、そして楽しくするための年間ベストを一挙まとめました。 「時間がなくて最近チェックできてない」 「大体いつも同じツールを使ってる」 「作業をもっと効率化したい」 そんなひとに使ってほしい、2023年の中から厳選されたベストリソースを公開します。 あなたの制作環境を一気にブーストできるツールや素材を見つけませんか。
【永久保存版】知らないと損をする、悩まない配色えらび講座
あなたは、自分のアイデアや考えを誰かに伝えたいとしましょう。 文字をベースにしたコンテンツはもちろん重要ですが、イラストやチャート図、グラフ、アニメーションGIFなどの画像を作成することで、読者の注意を引き、記事やレポートをより充実させることができます。 成功のカギはずばり、色彩理論を知ることで、コンテンツを際立たせるのに役立ちます。 しかしそうは言っても、あなたもこんな風に悩んだことがあるはず。 「魅力的でかっこいいデザインをする方法がよく分らない。」 「私、クリエイティブじゃないし、。」 私は、”売れるデザインとは？”という究極の悩みを考え続け、このサイトで公開する記事用のビジュアルを作成する日々を、１５年ちかく送ってきました。 ちょっとした配色の違いで、アクセス数が２倍、３倍に変わったことも何度もあります。 このような経験があるからこそ、ハッキリ言えることがあります。 それは、配色で
こんにちは。みなさんはブログでアフィリエイトをされていますか？ 私はグーグルアドセンスと少しだけもしもアフィリエイトで物販アフィリエイトをやっています。 はてなブロガーさんのブログを拝見していると物販アフィリエイトをやっておられる方が多いですが、広告を出すときにこんな工夫をすれば、売り上げが少し上がるかもしれません。 今回は広告の心理学について豆知識をお話しします。 身の回りの広告 目を引く広告とはどのようなもの？ 色で売り上げをアップさせる？ さいごに 身の回りの広告 私たちの身の回りには様々な広告が存在します。 例えば、スーパーのチラシやテレビCMの広告、それ以外にブログでの広告やメール広告もあります。 広告は人に宣伝して、その商品を買って貰えるように分かりやすく表現しなければなりません。それぞれで宣伝方法は違ってきますが、共通して言えるのは目を引くことになります。 では、よく新聞に折
４年間、7色だけでUIをデザインし続けた話｜コウノ アスヤ
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
シドニーを拠点に活躍しているプロのファッションカメラマン Julia Trotti氏のPhotoshop用トーンカーブのコレクションが無料でダウンロードできるので、紹介します。 主にファッション系、特に女性をより印象的に美しく仕上げるものが多く、男性の写真にももちろん使用できます。 かなり前に一度紹介したのですが、最近になって見てみたらトーンカーブのコレクションが増えていたので、改めて紹介します。 まずは、Photoshop用トーンカーブファイルの利用方法を。 ダウンロードとインストールは簡単です。 各ページの左「download」からファイルをダウンロードし解凍、拡張子「.acv」がトーンカーブファイルです。 ※「.atn」のアクション形式もあります。 Photoshopのアプリケーションフォルダ内の「Presets/Curves」内にトーンカーブファイルを移動。これで準備は完了です。
今年も残すところあと少しとなり、振り返ってみると数えきれないほどのツールや素材がリリースされました。 「本当に役立つツールや素材を集める」をモットーに、2016年からおよそ8年間、定期的に最新ツールをまとめ続けています。 数で言えば、３０００個以上。 知っているか知らないかの違いで、作業時間を大幅に短縮し、売り上げが2倍にワープしたことも何度もあります。 このような経験があるからこそ、ハッキリ言えることがあります。 それは、無料で使える素材を知らずに損している人が、あまりにも多いということ。 残念ですが、あなたの素晴らしい商品やサービスの魅力が、ユーザーに全く伝わっていません。 でも、ご安心ください。 この記事では、そんなあなたの役に立つ2023年公開の無料デザインツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。
CSSの:has疑似クラスとCSS Anchor Positioningを使用して、:hoverにマグネットのように追従するホバーエフェクトを実装するテクニックを紹介します。 一昔前なら、JavaScriptなどを使用し...記事の続きを読む
New in Chrome 119 Chrome 119 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 Chrome 119で追加された4つの新しいCSSの機能 CSSの疑似クラス「:user-valid」「:user-invalid」 CSSの相対カラー構文(RCS) CSSのclip-pathで「geometry-box」値 CSSのclip-pathで「xywh()」と「rect()」値 Chrome 119で追加された4つの新しいCSSの機能 11/1にリリースされたChrome 119で4つの新しいCSSの機能が追加されました。対象となるChrome 119は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。 以下、その4つの新
CSS Color Module Level 5に追加された新しい関数light-dark()を使用すると、ライトモードとダークモードのスタイルを簡単に定義できるようになります。 下記のようにlight-dark(#333, #ccc)と記述すると、テキストのカラーにライトモードでは#333が、ダークモードでは#cccが適用されます。 Easy Light-Dark Mode Color Switching with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライトモードまたはダークモードへの対応 light-dark()関数によるライトモードとダークモードの対応 <color>値以外への対応は？ light-dark()関数のブラウザサポート light-dark
Webデザインの配色に悩んだときの参考になる！ UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art
WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。 カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピーして利用できます。 Spectrum.Art Spectrum.Artは魅力的で視覚的にも優れたUIデザインを簡単に実現するために、UIデザイナーが厳選した色の調和に優れたカラースキームをまとめたサイトです。鮮やかで人目を引くカラースキームから、繊細でエレガントなカラースキームまで幅広いオプションが提供されています。 Spectrum.Art 2023年9月現在、カラースキームは16種類あり、各カラースキームはページ全体やコンポーネントごとにまとめられています。 では、Color s
7月14日、宮﨑駿監督の最新作『君たちはどう生きるか』が公開された。宮﨑氏が引退宣言をした前作『風立ちぬ』以来、10年ぶりの長編で、公開17日間で興行収入は46億円を突破。事前に公開された作品情報は「ポスター1枚」のみという、異例のマーケティングが注目を集めた格好だ。 月刊「文藝春秋」は、『君たちはどう生きるか』で作画監督を務めた本田雄氏（55）に制作の舞台裏を独占インタビュー。およそ2時間に渡り、本田氏が語りつくした「宮﨑駿監督との真剣勝負」が8月10日（木）発売の2023年9月号、および「文藝春秋 電子版」（8月9日公開）に掲載される。 『僕にとっては最後の作品になるかも知れない』と言われると断れない 本田氏は、庵野秀明監督の「エヴァンゲリオン」シリーズを担当してきた名うてのアニメーターだ。今回、庵野氏率いるアニメ制作会社カラーからスタジオジブリへの“移籍”については、まず最初に、宮﨑
https://svghub.vercel.app/
もっとも注目されたUIデザインのテクニックの総まとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 これまでの中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of the Best by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 細いフォントは暗いカラーにする 2. 長いフォームは常にラベルを上部に配置する 3. ボタンのラベルは一貫性を保つ 4. 不要なテキストでフォームのUIを乱雑にしない 5. フォームはインタラクションの後、すぐにフィードバックを提供 6. 次のステップの情報を提供する 7. CTA用にカラーを1つ確保しておく 8.
Web制作やデザイン案件など、クリエイティブな業務の効率アップを考えている方へ。 快適な作業環境づくりには、有益なツールや素材を知っておき、いつでも使えることが重要です。 その理由は、圧倒的な作業スピードとクオリティーの違い。 すべてゼロからしようとすると、時間も労力もかかってしまう面倒な作業も、ツールを使えばクリックひとつで完了したり、そのまま使えるオシャレなデザイン素材など、時短につながることばかりです。 ここで紹介する最新ツールを利用して、ストレスのない快適な作業ワークフローを実現しましょう。
「DICとPANTONEの違いについて、色々と調べてブログにまとめましたが、どうもよくわからない。」ということで、PANTONE(パントン・パントーン)の日本総代理店のユナイテッドカラーシステムズさんに直接電話して聞いてみたら、驚きの結果が！これは日本中のデザイナーさんに知って頂きたい。 PANTONE のインキは無い！？ サンコー）「PANTONE(パントン・パントーン)で色指示があり、近似色ではなくPANTONE(パントン・パントーン)のインキで印刷して欲しいので、インキを作ってくれるところを紹介して欲しい。」 ユ：「ユナイテッドカラーシステムズではインキは製造していないのでパントン社とライセンス契約したインキ会社に相談して下さい。」 えっ？・・・ PANTONE(パントン・パントーン)はあくまでカラーシステム（色見本）のみを持っており、実際にインキを作るのはライセンス契約をしている国
CSSのブランドモードは、知っているけどあまり使用したことがないという人もいると思います。そんなCSSのブレンドモードを使用して、さまざまな美しいデモでインタラクティブに学べるサイトを紹介します。 CSSのブレンドモードは、IEを除くデスクトップ・スマホのすべてのブラウザでサポートされています。 CSS Blend Modes Brad Woods' Digital Gardenは、Web上で作成するための設計図になることを目的としたサイトです。CSSをはじめ、HTMLやSVG、JavaScript、WebAPIなど、Webの実装に役立つさまざまなコンテンツが揃っています。 それらの中から最近リリースされた、CSSのブレンドモードを紹介します。ページのデザインも美しく、インタラクティブなデモがたくさんあるので、見ているだけでも楽しめます。 CSS Blend Modes まずは、CSSブレ
デザインに興味があるあなたへ。 デザインは時間との戦い。アイデアを形にする時間を増やすためには、効率的なツールと素材えらびが不可欠です。 ここでは、初心者からプロのデザイナーまで利用したい、120のツールと素材を厳選、わかりやすくカテゴリ別に分けています。 そして何と言っても、これらは全て無料で利用できます。 デザイン制作がスムーズに進み、細部へのこだわりも容易になります。 デザインの効率化の一環として、これらのツールを使ってみてください。 これらのツールを使うことで、あなたのデザイン制作が一層楽になるでしょう。
注目のWebデザイン用AIツール！ テキスト入力でWebサイトやスマホアプリ向けのカラーパレットをすぐに生成 -AI Colors
テキストを入力すると、Webサイトやスマホアプリ向けの美しいカラーパレットをすぐに生成してくれるAIツールを紹介します。 「企業サイト向けのクールで信頼感のあるカラーで、ベースはホワイト」「子供向けキャンペーンサイト、海と夏のイメージ」こんな感じにテキストを入力すると、Webサイトやスマホアプリ向けのカラーパレットを生成してくれます。 AI Colors AI Colorsの特徴 AI Colorsの使い方 AI Colorsを使ってみた AI Colorsの特徴 AI ColorsはOpenAIのGPT-3.5を使用して、テキストからAIによりWebサイトやスマホアプリ向けの美しいカラーパレットを生成します。また、他の人が作成したカラーパレットを検索・編集・視覚化することもできます。 利用にあたっては無料で、登録なども必要ありません。
エヴァ最終回放映当時の反応について
エヴァンゲリオン公式 @evangelion_co #新世紀エヴァンゲリオン 📍いよいよ最終話「世界の中心でアイを叫んだけもの」 本日19:00- TOKYO MXにて これまでの放送をお楽しみ頂きありがとうございました! また再放送の際にはお知らせ致します. 放送エリア外の皆様もNETFLIXにて視聴可能ですので、是非皆で楽しみましょう #MXエヴァ同時視聴 2023-04-11 18:04:28
Copy Code.loader { width: 50px; aspect-ratio: 1; border-radius: 50%; padding: 1px; background: conic-gradient(#0000, #1E4D92) content-box; mask: repeating-conic-gradient( #0000 0deg, #000 1deg calc(360deg/10 - 10deg - 1deg), #0000 calc(360deg/10 - 10deg) calc(360deg/10) ), radial-gradient( farthest-side, #0000 calc(98% - 10px), #000 calc(100% - 10px) ); mask-composite: intersect; -webkit-mask-comp
本日リリースされたChrome 111で、CSSに関する新機能がけっこうたくさんサポートされたので、紹介します。 sin(), cos(), tan()などの三角関数をはじめ、親要素のスタイルに応じて子要素のスタイルを適用できるスタイルクエリ、:nth-child()で「of S」構文が使用できるようになったり、他にもいろいろ盛りだくさんです。 コンテナクエリは先月のFirefox 110ですべてのブラウザで使用できるようになりましたが、今度は三角関数がChromeでサポートされ、すべてのブラウザで使用できるようになりました。 sin()のサポートブラウザ CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。すでに2022年にリリースされたSafari, Firefoxではサポートされています。 202
迷わず決定 Adobeの配色カラーパレット、アイデア101個 90年代「昭和レトロ」など11スタイルから選べる 使いやすくセンスのいい配色101パターン デザインで配色えらびが重要なのは分かっているが、いつも迷って時間がかかるという人も多いでしょう。 この記事では、時短にも役立つAdobeの配色アイデア101個をご紹介します。 人気の「90年代レトロ」や「ネオンライト」、オシャレな「シンプル＆ナチュラル」など、さまざまなデザイン案件に適した、101の色の組み合わせが提案されています。 気に入った配色を見つけたら、そのままAdobe Expressで編集することもできます。 コンテンツ目次 1. 控えめなパステルカラー 2. クリーン＆モダン 3. 光沢メタリック 4. 鮮やかネオン 5. デュオトーン＆モノクロ 6. ナチュラル＆オーガニック 7. 控えめなパステルカラー 8. クリーン＆
この記事では、クリエイターが知っておくと便利な、最新オンラインツールをまとめてご紹介。 昨年末より話題持ちきりの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の便利ツール総まとめ
最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニメーション、コードの管理・品質・デバッグに役立つツールなど、もりだくさんです。 CSS Layout Generator Webサイトでよく使用される「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツール。以前紹介したときは、CSS Gridのみでしたが、Flexboxにも対応しました。
エヴァンゲリオン公式ツイッターが14日に更新され、中国で『シン・エヴァンゲリオン劇場版』が配信されることを記念して公開された告知ビジュアルについて、SNS上で問題が指摘されていることを報告した。
「赤橙黄緑青藍紫（せきとうおうりょくせいらんし）」という覚え方も昔はありました。 覚えやすいほうで覚えてくださいね！ 【５分で分かる色彩】色相環とトーン表 色彩の基礎についてはこちらをご確認ください！ 上記の図ではざっくりしすぎなので、以下でくわしく解説していきます！ デザインで使う色相環・トーン表の基本 PCCS色相環について 色相環とは？ 色相環（hue circle）とはその名のとおり、色相を円環状にならべたもののことです。 色はレインボーカラーのように、光の波長の違いによって変化して知覚されています。 この色の変化をまるい輪っか状に並べたものが色相環なんですね。 PCCS色相環って？ PCCSは日本色彩研究所が著作権を有する、配色に適したカラーシステムのことです！ じつは色相環は「マンセル色相環」や「オストワルト色相環」など種類がいくつかあります。 この記事では色彩検定で使われる「
Web制作に役立つ機能、ルーラー・ガイドを表示したり、ボックスモデルを視覚化したり、カラーピッカーやカラーパレットを取得、気になった要素のHTMLとCSSをCodePenに表示させたりなど、たくさん用意されているChromeの便利な機能拡張を紹介します。 SuperDevはオープンソースで開発されており、SuperDev -GitHubでコードも公開されています。2022年現在、ChromeとEdgeとBraveの機能拡張として利用できます。 SuperDevをChromeで利用する場合は他の機能拡張と同様に、Chrome ウェブストアからインストールできます。
カナエサト@漫画家 @kanae7sato Apple製品は出荷時にキャリブレーション済みって書いたけど確証できる記事見つけられなかったので「キャリブレーション済みらしい」と訂正します。ただWindowsよりは色の誤差が少ない気がする。曖昧ですみません。 2022-12-21 09:23:34 カナエサト@漫画家 @kanae7sato 「永久指名おねがいします！」1億6000万DL突破🎊（ｺﾐｯｸｼｰﾓｱ）連載中。 「スイーツは定時のあとで」（講談社アプリPalcy）連載中。永久指名公式→ @Eikyuushimei 日常→ @kanaesato_2 返信できたりできなかったりです。 https://t.co/rhjZaxBWHK
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのlight-dark()関数の実践的な使い方、ライトテーマとダークテーマの作成方法
AI Color Combination Generator | Muzli design hub
CSSの知っておくと便利な実装テクニック！ 相対カラー構文を使用して、1つのカラーに対して濃く薄くを簡単に設定できます
デザインが楽になる、ずるい最新ツール・素材40個まとめ
CSSでオーバーレイのスタイルが期待通りに表示されない、::backdrop疑似要素の変更された使い方
色はAIで決める、デザイナーが知っておきたいAI配色ツール10選
Web制作者は要チェック！ Chrome 121で新しく追加された6つのCSSの機能
2023年をふり返る 年間ベスト無料素材・フリーフォント・Webツールまとめ
アフィリエイトにとって重要なフレーズと色についてまとめました。 - 雨のち晴れ
プロカメラマン仕様、Photoshopのトーンカーブのまとめ -簡単に写真画像の自然光とカラーを印象的に美しく仕上げる
便利すぎて反則級、ずるい無料デザインツール・素材80選【2023年ベスト】
CSSのみで簡単に実装できる！ マグネットのようにくっついて追従するホバーエフェクトを実装するテクニック
Web制作者は要チェック！ Chrome 119で追加された、疑似クラス、相対カラー構文など4つの新しいCSSの機能
CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しい関数「light-dark()」が便利すぎる！
《ジブリ“大型移籍”の真相》『君たちはどう生きるか』作画監督が初めて明かした宮﨑駿との制作現場 | 文春オンライン
サクサク爆速で作業をこなす最新ツール、素材39個まとめ
PANTONE に直接聞いてみた。DICとの違い。 - 株式会社サンコー：おもいをカタチにする仕事｜印刷・WEB・デザイン
CSSのブレンドモードを美しいデモでインタラクティブに学べる -Brad Woods' Digital Garden
秒速でデザイン！制作時間を半分に削る100の無料ツールと素材まとめ
Pure CSS Loader Generator
Chrome 111のココに注目！ 三角関数やスタイルクエリなどCSSに関する新機能がけっこうたくさんサポートされました
迷わず決定 Adobeの配色カラーパレット、アイデア101個
クリエイター注目の便利な最新オンラインツール46個まとめ
AIでオリジナルのカラーパレットを作成する【ColorMagic】
『シン・エヴァ』中国版ビジュアルがSNS上で問題指摘 公式説明「制作に関与しておりません」詳細調査中
色相環の覚え方から学ぶ！やさしい色彩の勉強【プロが解説】 | MIYAMA OFFICIAL WEB
便利なのが登場！ これ一つでWeb制作に役立つ機能がたくさん使用できるChromeの拡張機能 -SuperDev
カラーのデータを取り扱う際、相手と自分の環境によって見えている色が違う可能性がある、という話