タグ

配色に関するyuma_sunのブックマーク (10)

  • デザインの基本日記  「配色編」|Design Beginner

    配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を

    デザインの基本日記  「配色編」|Design Beginner
  • 【保存版】デザインを学ぶすべての人に贈る、配色アイデア見本101選

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

    【保存版】デザインを学ぶすべての人に贈る、配色アイデア見本101選
  • コピペで使えるオシャレな配色パターン見本 25 (全組み合わせWebカラーコード付) - LITERALLY

    今回はひたすら配色パターンを紹介していく。探しやすいように色ごとに分け、使いやすいように解説とWebコードも合わせて紹介する。プレゼン資料、Webデザインなどで目的に合った配色をそのままコピペして使って頂ければと思う。 ▼ 目次 カラフルな配色パターン 橙系の配色パターン 青系の配色パターン 緑系の配色パターン 黄色系の配色パターン 赤系の配色パターン 高級感を表現する配色 わび・さびを表現する和風配色 シンプルに格好良いグレーの配色 カラフルな配色パターン 1. 淡い「カラフル」 ■ #FF7D7D ■ #FFD580 ■ #B3E2B4 ■ #ABE7FF ■ #B8B2EA ■ #DBDBDB 淡いカラフルな配色は、白の背景に合わせると「透明感」を出すのに効果的。カラフル系の配色は扱いづらいので、上のコードをそのままコピペして使って頂くのが良いかと思う。 2. 力強い「カラフル」 ■

    コピペで使えるオシャレな配色パターン見本 25 (全組み合わせWebカラーコード付) - LITERALLY
  • 配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう!|Webpark

    自分が作ったウェブサイトを見て、「センスないな」とへこむことはありませんか? 私はよくあります。色使い、レイアウト、写真、文章などなど、どれをとってもセンスないなとへこんでいました。 けど、センスがないのではなく、単に基礎を勉強していないだけということに最近気づきました。センスはもっと高い次元の話でした。 ということで、センスを言い訳にしてしまいがちな分野の基礎を学べるすばらしい記事を集めました。この記事自体単なるまとめ記事ですが、できるだけ厳選し、読んでほしい順に並べました。皆さん、あきらめずに一緒に勉強しましょう。 配色 アクセントになる色を使うのが苦手で、同色系の色ばかり使ってしまうのですが、これらを読めば恐れずに使えそう。 色彩センスのいらない配色講座 ベースカラー、メインカラー、アクセントカラーに分類してどのような色を選ぶべきか分かりやすく解説してくれています。具体例もあって分か

    配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう!|Webpark
  • 日本の伝統色の組み合わせ、襲色目(かさねいろめ)の色コードまとめ

    MS Office カテゴリ MS Office (104) 関連タグ Access (35) Excel (87) OfficeScripts (1) PowerPoint (8) Python (2) VBA (85) YouTube (6) 入門 (37) Web カテゴリ Web (85) 関連タグ facebook (4) jQuery (10) linux (3) Photoshop (18) PHP (24) tips (22) twitter (10) WordPress (76) YouTube (6) アプリ (29) イラスト (42) デザイン (15) ブログ (39) 入門 (37) 分析 (20) Adobe カテゴリ Adobe (28) 関連タグ facebook (4) Fresco (2) Illustrator (8) JavaScript (7)

    日本の伝統色の組み合わせ、襲色目(かさねいろめ)の色コードまとめ
  • サービス終了のお知らせ - NAVER まとめ

    サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

  • 配色に悩んだときに、きっと役立つ7つの配色技法【基本】

    私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基的な7つの配色技法を紹介したと思います! 基的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色

    配色に悩んだときに、きっと役立つ7つの配色技法【基本】
  • 最低限覚えておきたいWEB配色の基本2大原理と6つの配色パターン

    ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WEBサイトのデザインは、誰もが頭を悩ませる部分だ。 「どういう配色なら良い印象を持ってもらうことができるのか?」「どのレイアウトならコンバージョンが上がるのか?」など、様々なところまで考えを張り巡らさなければいけないからだ。 そこで日は、The Art of Color Coordination というインフォグラフィックをご紹介する。これを見れば、WEB配色の基の2大原理と、今すぐに使える6つの配色パターンがすぐに分かる。 そして、初心者でも、統一感のある配色のWEBサイトを作るための大きな助けとなるはずだ。 WEB配色の2大原理と6つの配色パターン画像を拡大して表示する ※追記:インフォグラフィックの最後のクレジットの部分が途切

    最低限覚えておきたいWEB配色の基本2大原理と6つの配色パターン
  • 色彩センスのいらない配色講座

    UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回

    色彩センスのいらない配色講座
  • 選んだ二色をブレンドした色を教えてくれるサイト「ColorBlendy」*二十歳街道まっしぐら(FC2ブログ時代)

    「ColorBlendy」は二つの色を掛け合わせると何色になるか教えてくれるサイトです。 様々な掛け合わせ方がありますよ。 色はカラーコードで指定できます。 ブレンドした色のカラーコードも教えてくれます。 以下に使ってみた様子を載せておきます。 まず「ColorBlendy」にアクセスしましょう。 左側と右側に混ぜたい色のカラーコードを入力します。 すると、真ん中に混ぜあわせた色が完成! 混ぜ方はたくさんあります。 ・MULTIPLY … 合成 ・SCREEN  … MULTIPLYして反転 ・OVERLAY  … 輝度50%を基準に、暗い部分はMULTIPLY、明るい部分はSCREEN ・DODGE   … 覆い焼き ・BURN   … 焼きこみ (たぶんこんな感じかと…) 色を掛け合わせたいときにささっとできるので便利です。 (記事で紹介したサイト:ColorBlendy)

  • 1