第一印象を決めてしまうほど、色はとても大切な役割を持っています。 Webデザインのイメージを決める上で、色は最も重要な要素といっても過言ではありません。 配色には様々なルールがありますが、Webデザインの配色は好みやセンスに頼らず、目的や用途に合わせて「調和」と「役割」を持つ効果的な配色をしたいものですね。 そこでWebデザインでも“ 無駄にならない ”色彩心理や色の視覚効果など、配色のセオリーをまとめました。 では、さっそく配色の基本になる「色相」「明度」「彩度」「トーン」それぞれの色彩心理や視覚効果を紹介します。 色相差で配色 【イメージ効果】 暖かい⇔冷たい　動的な⇔静的な　情熱的な⇔理知的な → 色相が違う色同士を組み合わせると、色味の差が大きく感じられます。 背景色の心理補色（黄⇔青 赤⇔緑）の方向に色がずれ、左側の中のオレンジは青みを帯び、右は赤みを帯びて見えます。（色相対比）

Webサイト制作で避けて通れない配色の決定。芸術的素養が絶望的にないのでいつも泣いてるゴロドクさんです、どうも。 所詮素人には理論に基づいた配色など無理ゲーです。先日もちょっとしたデザイン的なゴニョゴニョという場面に出くわしましていつものように悩みつつ、なんか配色決定のためのWebサービスないかなーと思って探してたらこういうのを見つけました。 webでの色指定は基本的にRGB値での指定となりますがこれって光の三原色の混色なんですよね。 実際にCSSなんかで数値いじりつつデザインしてると「なんか違うなー」というときにもっと明るくしようとか、もっと彩度上げようってのが感覚的にどの数値をどんだけいじって良いのかってわからないんですよ。 RGB値直接いじって彩度上げようと思ったらくすんじゃった上に色みかわっちゃってオヤオヤ残念なんて日常茶飯事ですよ（いやそのまえにフォトショなりなんなりでデザインカ

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

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

さて、前回の「撮影編」に続けて、今度は「補正・加工」の話に入ります。 今回は、あんな感じで撮ったOGOの写真の中から使えそうなものを一旦ピックアップし、どれか一つのRAWデータを現像処理した後、同じ現像設定を全てに反映させるというお気楽モードなやり方をしました（その後最終的に個別に微調整）。 では、撮影直後と完成型を見比べてみましょう。 左が撮影したRAWの状態、右が現像・加工処理したあとの状態です。 適正露出じゃなくてもいいからと、とりあえずシャッタースピードだけ優先したので、こんな感じでコントラストも足りないちょっと暗めの写真ができてます。 さ、ここから完成型までの道のりを解説します。 はっきり言って手順よりも余談が長いです、覚悟してください。 その前に全体の流れを説明しておきましょう今回撮影に使ったカメラはNikonのD300なので、現像処理に利用したのは同じくNikonから発売され

先日のOGOのコンテストのための写真を撮って補正するって話は余談も多く（謎）、NikonのCapture NXがベースだったので、今回はママカメラであるPENTAXのK-mで撮った写真を補正してみることにします。 それに2ちゃんねるのK-m関係のスレッドでちょこちょこボクのFlickrも持ち出されてるようなので、そのお礼も兼ねてのエントリーです（笑）。 が、PENTAX純正で付いてくるPHOTO Laboratoyの使い勝手はお世辞にも良いとは思えないので（ごめんなさいね 笑）、今回はAdobeさんのLightroomと二本立てということにしてみましょう。前編の今回は「PHOTO Laboratory編」になります（ついでなのでボクんちのK-mのセッティングの話もおまけに）。 では、早速。 K-mの初期設定の話最初にお断りしておくと、ボクの場合は撮る時に直接JPG保存しているわけではありま