色彩音痴と分析に関するHi32のブックマーク (9)

  • これが僕のミニマルウェブデザインの極意 | バンクーバーのうぇぶ屋

    シンプルに最も伝えたいことを伝える。そんなミニマルな広告に魅せられてから、ずっと色々な広告やサイトを見てきました。 ミニマルデザインだからといって、何もシンプルなのが大事じゃないんだと思うんです。無駄な要素を排除して、いかに伝えたいこと簡潔に伝えるかを意識したデザイン。必要最小限の要素を使ってどうユーザーにどう語りかけるかが最も大事だと思っています。 色々なデザインメソッドを組み込むデザインに比べ、考え方が難しく理論詰めて考えなければ出来ないデザイン技法だと僕は思っており、今日ご紹介するのは、この6年くらいずっとミニマルデザイン意識して見てきて、自分なりにミニマルデザインに対する考え方を育ててきた、自分の考え方のまとめとしての記事を書いておきたいなと思い投稿します。 ミニマルデザインの極意1.マージンに“意味”を持たせる ミニマルデザインを考える上でトップを争うくらい重要なことだと思ってい

  • よりよいWebデザインにするための配色のセオリー :: Love & Design ::

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

    よりよいWebデザインにするための配色のセオリー :: Love & Design ::
  • 【保存版】作りたいイメージ別!ランディングページ 「デザインの指南書」 | LISKUL

    どうすれば「リッチな」印象のページになる? ランディングページの製作時、デザインを「こんな印象のページにしたい」というのはあっても、いざ「どんな配色で」「どんなフォントで」「どの程度の派手さで」を決めるとなると、一体どうやったら自社のターゲットに適したデザインに仕上がるのか分からない! ということはありませんか? 今回は、「可愛らしい」「真面目で冷静な」「先進的な」「信頼感のある」といったイメージ・印象ごとに、適した配色・フォント等デザインを実際のサイトを例に出してご紹介します。 あなたの「こんな印象を与えたい」という思いをデザインにするとこうなる! というのを具体的にまとめていますので、デザインの方針を立てる上での参考にしてください。 ※ランディングページ改善に重要な要素を大きく4つに分け(ファーストビュー、ライティング、導線、その他のポイント)それぞれの項目で訴求ポイントのチェックが行

    【保存版】作りたいイメージ別!ランディングページ 「デザインの指南書」 | LISKUL
  • 削除しました : キニ速

  • 色が持つ効果と意味 | デザインの情報を発信するクリマガ

    Sharebar 普段デザインをやっていると切っても切り離せないのが色です。 色はなんとなく使っているし、自然に目にしてますが意味や効果ってわかっていてもちゃんと考えた事がないのでは? 一般的な色による心理効果と、ポジティブ・ネガティブなイメージ効果の項目に分けましたので ※もちろん人によって捉え方が違うので、絶対ということではありませんのでご了承くださいw 飲店は色の効果をうまく利用してますよね?欲が上がる赤系の暖色をつかっているのはそのためです。 デザインや広告だけじゃなくても、好きな色で自分の精神状態や 人に与える印象をを知ることで人間関係や仕事にも使えると思います。 早速いってみましょう! 赤色(レッド)は情熱的で意欲的になる アドレナリンの分泌が盛んになり、元気にさせる効果がある。 自己主張を増加させる。 心拍数を上げ、欲増進させる。 ポジティブなイメージ 女性的、

    Hi32
    Hi32 2013/08/23
    ポジティブなイメージとネガティブなイメージに加え、サイト例が提示されている。
  • CSS Drive: Image to Colors Palette Generator

    Welcome to CSS Drive's Image to Colors Palette Generator! Upload an image to generate a color palette based on the image's primary colors. Useful for quickly grabbing a particular color within an image for inspiration.

    Hi32
    Hi32 2009/04/02
    写真かURLをアップを入力するとパレットを作成してくれる。ライト・ミディアム・コンプレート・ダーク・の4種類。
  • OGOの作品のできるまで – 補正・加工編 – | gaspanik weblog

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

    OGOの作品のできるまで – 補正・加工編 – | gaspanik weblog
    Hi32
    Hi32 2009/03/19
    写真補正の仕方。やっぱり詳しい。用語なんかも勉強しながら熟読しなければ。
  • K-mで撮ったものを補正してみるよ -前編- | gaspanik weblog

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

    K-mで撮ったものを補正してみるよ -前編- | gaspanik weblog
    Hi32
    Hi32 2009/03/19
    ピンクの花で写真の補正実例。いろいろ詳しいく、理論的に。私はいつもいきあたりばったり。同じことは2度と出来ない。
  • 形と色の役割 | 愛子のマーケティングデザイン講座 - 楽天ブログ

    ご覧のように、男性・女性のマークの色を逆転させて、 男性のお手洗いには、男性マークに赤色、 女性のお手洗いには、女性マークに青色、 という看板をお手洗いの入り口に設置をし、どのような反応をするかと隠しカメラで観察をしていました。 ・ ・ ・ 日人は、ほぼ全員が 青 ― 男性 赤 ー 女性 の看板を見て入り、そして、慌てて飛び出してきて看板を確認していました。 その慌てる姿がおかしくて笑いながら見ていましたが、わたしも間違える自信があります。 きっと、赤を選んでいることでしょう。 でも、「お手洗い」という看板としては、

    Hi32
    Hi32 2008/06/08
    形には情報を、色にはイメージを使い、視覚的に設計をすることで「伝わるデザイン」を
  • 1