（2019.02.23に書いたブリコルールのブログ記事の引越しです） 写真をイラストっぽく使いたいなどの局面はいろいろありまして、備忘録も兼ねて。 会社の近所で撮影した写真をこんな感じでイラスト風にして、弊社のキャラクターと合わせてみました。まあまあアニメのワンシーンのようにも見えなくもない？？ 最近だと、アプリで簡単に写真をイラスト風に変換できるものもありますが、photoshopを使います。 ベースとなるレイヤーを作成・調整する もとの写真はこちらです。 なんの変哲もない、何年か前に撮ってフォルダの奥底で眠っていた写真ですが、空を抜きやすい写真を選ぶとよいです。 【イメージ】＞【色調補正】＞【HDRトーン…】を選択します。 他のサイトなどでもHDRトーンを使って紹介しているところは多いです。私もこれを使います。HDRトーンの正しい使い方は正直なところ自分はわかっていません…。調整がまと

デザインをする際に欠かせない要素の一つとして、カラーの配色がありますよね。しっくりこない、これであってるのかな？などで悩んだ経験は1度や2度はある事と思います。 今回はWEBサイトをデザインする際に必要な、ベースカラー、メインカラー、アクセントカラーの配色や配分についての基本ルールをまとめてみました。 3つのカラーとは？その比率とは？ WEBサイトの配色は役割別に３つあり、それぞれに、ベースカラー、メインカラー、アクセントカラーと呼びます。各々の比率をベースカラー70％、メインカラー25％、アクセントカラー5％の割合にすると、美しい配色に仕上げることができます。 ベースカラー 最も大きな面積を占める基本となる色で、余白や背景などに用いることが多い色です。メインとアクセントのカラーを引き立てる脇役的な立ち位置。 メインカラー その名の通りサイトの印象を決定づける主役の色です。 アクセントカラ

はじめにこのnoteは、私がTwitterで発信した「デザインの思考＆Tips」のなかから、配色に関する内容を編集してまとめたものです。 僕自身、配色はあまり得意ではありません。だからこそ書籍などで学ぶのはもちろんですが、それ以外で普段取り組んでいることや、仕事を通して気づいた視点や発見、実例について、まとめてみたいと思います。 カラーパレットに「トーン」を自力で用意する色を決めるとき、当然カラーパレットを使うのですが、デフォルトのままという人も多いかもしれません。ただ、なんの基準もなくカラーピッカーをグリグリいじくって彷徨っていても、迷っちゃわないかなぁと思うのです。 そして、配色に慣れていない人は、赤かな？青かな？緑かな？…と、色相（かつ彩度の高い色）だけで選んでいるような気がします。ハッキリとした色だから“決まった”感がすぐに得られるのだけど、そこから抜け出さないと、明度や彩度を組み

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

なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで

Choose your favorite colors and get your Material Design palette generated and downloadable.

先日、イラストレーターの 中村佑介（なかむら ゆうすけ) 先生 のツイッターで公開アドバイスが行われました。 『アイデア』 『色のバランス』 『塗り方』 『構図』 のデザインの基本ついて分かりやすく解説されています。 凄く勉強になると思いますので 将来イラストレーターを目指している人は必見です。 その中の一部をご紹介したいと思います。 ※この記事はツイッターからの引用になります。 この記事は、中村佑介 先生　ayamick さん　すなつ さんに公開許可を頂いております。 それらを踏まえたうえでお読み頂ける様にお願い致します。 【良い構図は大・中・小を使い分け】 【ayamick さん】 私は18歳です。 描いた動機は どの年齢の方が見ても楽しめるような絵を描きたかったからです。 コンセプトはなるべくたくさんの色をつけて、 全体的に賑やかにしているところです(^^) こんな感じですm(__)

シンプルかつ記事が読みやすい素敵な国内ブログデザインを10サイト、主観で紹介させて頂きます。 可愛いデザインのブログをお探しの方はこちらの記事へどうぞ。 ブログのデザインって作ってみると思っているよりバランスをとるのが難しくて苦戦します。 下記のサイトは記事内に画像が無くテキストオンリーでも余白の取り方が美しくて読みやすかったり、装飾の使い方が絶妙だったりと、ブログのデザインを作る上でとても参考になりますので是非目を通してください。 アインシュタインの電話番号 本の目次のようなトップページは一覧性が高くて見やすく、記事内も余白がしっかりとられていて読みやすいです。アクセスの度に変わる配色は統一感があってとても綺麗。

By OliBac コンピュータが色に名前を付ける時、数字やアルファベットを6つ並べた1677万7216通りの組み合わせで表される16進数カラーコードが使われます。カラーコードは他のコンピュータ言語と同じく論理的なシステムに基づいて作られるため、Webデザインを行う人間にとって16進数カラーコードを知っておくことは非常に助けになるとして、WebデザイナーのBen Gremillionさんがカラーコードの仕組みや便利なテクニックをまとめているのが「The Code Side Of Color」です。 The Code Side Of Color | Smashing Coding http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/ そもそもスクリーン上のカラーは指定がない場合は黒いままで、16進数カラーコ

ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の

プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう！ | UXデザイン基礎セミナー 第4回Yoshiki Hayama

2017年6月30日 色彩 配色によってそのデザインの印象は大きく変わると思います。色は大切な要素のひとつですね！ということで、色の持つ印象別に配色アイデアをずらりと並べてみます。配色はおなじみ（？）のCOLOURloversから、「これは！」と思うものを選ばせて頂きました。素敵な配色がいっぱいのこのサイト、ぜひ覗いてみてください！また、今回紹介するのはあくまで一例ですので、自分なりにアレンジしてみるのも楽しいと思います。サイトの雰囲気にあう配色を探してみてください。 ↑私が10年以上利用している会計ソフト！ 配色に関するおすすめサイト COLOURlovers 色をテーマにしたコミュニティサイト、COLOURlovers。自分の考えた配色を登録したり、お気に入りの配色を保存しておくことができます。今回はこちらから配色アイデアを選びました。iPhoneアプリは「ColorSchemer」と