タグ

web design-colorに関するklovのブックマーク (15)

  • カテゴリー別配色アイデア100

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

    カテゴリー別配色アイデア100
  • テーマカラー1色をメインに用いたWebサイト50

    2018年10月11日 Webデザイン, インスピレーション, 色彩 前回の記事「WebデザイナーにおすすめのEvernote活用術」で紹介したように、私はEvernoteに素敵なデザインをストックする際、使われているテーマカラー別にタグをつけて分類しています。気がつけば各色のデザインストックが増えてきたので、その中でも厳選した5サイト×10色の合計50サイトを紹介します。単色をデザインに使う時のポイントも一緒に読んでみてくださいね! ↑私が10年以上利用している会計ソフト! 追記:リンク切れサイトを削除したため、数が減ってます… テーマカラーをメインに取り入れる時のポイント 「配色に自信がなくても!Webデザインが好きになる配色ツールと使い方」でも紹介したとおり、きれいな配色でもベタ塗りしただけではデザインの魅力が半減してしまいます。特に今回のようにテーマカラーを使う面積が広ければ広いほ

    テーマカラー1色をメインに用いたWebサイト50
  • 配色パターンからWebデザインを考える

    2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト! まずは色彩の三属性について 色は彩度・明度・色相の三属性(三要素とも呼ぶ)から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い=明るい色はさわやかで爽

    配色パターンからWebデザインを考える
  • http://www.themeflash.com/color-theory-in-web-design-blue-color-scheme/

  • ECサイトの色やデザインと購買意欲の関係 | Webクリエイターボックス

    色と消費者 色はデザインの重要な要素のひとつです。しかし、全世界において共通しているとは言えません。北アメリカで注目されやすい色がインドでも同じとは限りませんよね。下記は北アメリカのオンライン消費者への色の働きです。 黄色 楽観的・若々しさ。ウィンドウショッピングをしている人の注意を集めるために使われます。 赤 エネルギッシュ。心拍数を高める色。緊急性があり、セール中の商品に使われます。 青 信頼と安全の色。銀行や企業のメインカラーとして使われます。 緑 裕福・リラックスを連想させる色。目に優しく、一連のプロセスを容易に見せます。 オレンジ 活発・活動的な色。「購入する」「購読する」などのCTAボタンに使われる事が多いです。 ピンク ロマンチック・女性的な色。若い女の子や女性に向けたECサイトで使われます。 黒 パワフル・滑らか・光沢など。高級な商品を扱うサイトで使われます。 紫 落ち着き

    ECサイトの色やデザインと購買意欲の関係 | Webクリエイターボックス
  • 非デザイナーのためのデザイン基本テクニック その1 | 07design.blog

    デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、実はデザインというものは数々のルールによって成立しています・・・デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。 デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、 実はデザインというものは数々のルールによって成立しています。 そのルールの知識があればデザイナーレベルとはいかないものの、見た目がきれいなグラフィックは作れるはずです。 デザインという言葉の定義やソフトの使い方から始めてしまうとややこしくなるので、 今回はあくまでも「とりあえず見た目をキレイにする」ということに重点を置いて説明します。 記事内で

  • 最適なテキストリンクの色は? | ウェブ力学

    青系統の色が使われていることに変わりはありませんが、検索エンジン以上にバラつきが見られます。特に、Yahoo!の場合は、各ジャンルごとのページでも微妙にテキストリンクの色が変わっていました。それぞれのサイトデザインの特徴に合わせて変化させているのだろうと思います。 楽天のようにデフォルト色を使用しているサイトもありましたが、全体からすると少数派のようです。 Q&Aサイトの最大手OKWaveはGoogleと同一でした。また、ユーザビリティといえばビービットさん、ということで調べてみましたが、やや暗めの青を使用していました。ビービットさんのことなので何か意味があるのかもしれません。 クックパッド クックパッドは、日最大級のレシピ検索のサイトです。ユーザービリティには細心の注意を払っていて、ユーザー一人当たりの平均PVが高いことでも知られています。 そんなクックパッドですが、サイトをのぞいてみ

  • miyahan.com | 液晶ディスプレイとカラーマネージメント

    液晶ディスプレイとカラーマネージメント 編 このページは、Apple MacBook Pro に関するトピックをまとめた「myLife with MacBook Pro」で、 大変反響を呼んだ WUXGA ワイド液晶ディスプレイに関するトピックを独立させたものです。 ◆ ページが正常に表示されていない可能性があります ◆ もしこのメッセージが表示されている場合、ページの表示に必要なファイルが読み込まれていないか、あなたがレガシーウェブブラウザを使用している可能性があります。 このウェブサイトは比較的新しいテクノロジーで制作されているため、Netscape 4、Internet Explorer 6 などの旧世代Webブラウザでは閲覧に支障を来すおそれがあります。 またこのようなブラウザは、セキュリティが不十分な可能性があります。当サイトでは、Firefox、Opera、Safari 等の安

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

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

    よりよいWebデザインにするための配色のセオリー :: Love & Design ::
  • Nitram+Nunca リアル・グラデーションの作法

    写真を撮る機会は実に多くありますが、特に結婚写真は一生の記念になる大事な写真ですので、できるだけ良いものを残しておきたいものですね。 結婚前は何かと忙しくなりますが、疲れが残らないよう、写真撮影の前にはしっかり休息を取っておきたいですし、エステなども利用して、できるだけきれいな状態で撮影にのぞみたいものです。 そして、結婚写真は挙式当日に撮影されるカップルも多いですが、やはり慌しいこともあり、せっかくの写真も表情が硬くなってしまったという経験をお持ちの方もいらっしゃるのではないでしょうか。 結婚写真は最近は前撮りでゆとりを持って撮影される方も増えているようです。 メイクや着付けも時間をかけられますし、時間にも余裕がありますので、より自然な表情で撮影ができるのもメリットです。 そして、式当日とは違う衣装を選ぶことができるのも良いですね。 スタジオ撮影はもちろん、ロケーション撮影などで屋外での

  • ColorJack: 色の発電機

  • 覚えておきたい配色のワザと便利なツール :: Love & Design ::

    Webデザインや配色に役立つ(かもしれない)テクニック、便利なツールを紹介しています。 /*無駄にエロいのは仕様です*/ 01 About 02 Blog 03 Color 04 Design 05 Love 06 etc 色の3つの要素 配色を行う前に、色に関する基礎知識をおさらい。色は「色相・彩度・明度」の3つの要素によって成り立っています。明度だけの性質を持つ無彩色に対し、有彩色は色相、彩度、明度の3つの性質を持っています。これを「色の3属性」と呼びます。 色相(しきそう:Hue) 色相とは、赤・橙・黄・緑・青・紫などの色みのこと。 (色相はつながりあって色相環という輪になります。) 彩度(さいど:Saturation:Chroma) 色の鮮やかさ、強弱の度合いのこと。 彩度が高い(鮮やか)⇔彩度が低い(鈍い) 明度(めいど:Value:Brightness) 色の明るさの度合いのこ

    覚えておきたい配色のワザと便利なツール :: Love & Design ::
  • 『色の決まりを知っていれば「センス」がよくなる』

    システム会社に「色はとりあえず適当にお願いします」と言ってあがってきたものを見ると「えーっ」という配色になってあがってくることがよくある。「適当に」と指定していない自分が悪いのだが色をすべて指定しないと使ってはいけない色の組み合わせを使ってきてしまうのだ。 という私も初めて自分でチラシのデザインを作った時は「韓国風の色遣いだね」とつっこまれたが、緑や赤の原色を多様してしまった。(韓国の色づかいが悪いと言っているのではありません)そこでデザイナーさんに進めてもらったのは配色辞典。そこにあげられている色を使えばたちまちセンスの良い色遣いができるようになるのだこれホントに。 たとえば参考サイトは http://www.colourlovers.com/ これを見ると3色とか5色の色があげられているのでその色の組み合わせを使ってあげるとセンスがよくなる。 ああ、なんと便利な。ちょっと知ってるだけで

  • Japanese Traditional Colors

    桜色 (さくらいろ) # 薄桜 (うすざくら) # 桜鼠 (さくらねず) # 鴇鼠 (ときねず) # 虹色 (にじいろ) # 珊瑚色 (さんごいろ) # 一斤染 (いっこんぞめ) # 宍色 (ししいろ) # 紅梅色 (こうばいいろ) # 薄紅 (うすべに) # 甚三紅 (じんざもみ) # 桃色 (ももいろ) # 鴇色 (ときいろ) # 撫子色 (なでしこいろ) # 灰梅 (はいうめ) # 灰桜 (はいざくら) # 淡紅藤 (あわべにふじ) # 石竹色 (せきちくいろ) # 薄紅梅 (うすこうばい) # 桃花色 (ももはないろ) # 水柿 (みずがき) # ときがら茶 (ときがらちゃ) # 退紅 (あらぞめ) # 薄柿 (うすがき) # 長春色 (ちょうしゅんいろ) # 梅鼠 (うめねず) # 鴇浅葱 (ときあさぎ) # 梅染 (うめぞめ) # 蘇芳香 (すおうこう) # 浅蘇芳 (あさすお

  • 背景色と文字色の見やすさをチェック

    以前色を決めるときに使っていて便利だった Color Schemer が Windows 用しかないので、Mac で使えるカラーピッカーはないかなぁと探していたら、とっても高機能で使いやすいツールを発見! 配色を自動的に計算してくれるツールはいろいろありますが、今回はアクセシビリティを考えた優しいツールをご紹介します。 ColorSelector5.0 : FUJITSU Japan ColorSelector は、アクセシビリティの高い背景色と文字色の組み合わせを、リアルタイムに確認することができるツールです。 サイトやディスプレイ上に表示される色をスポイト機能を使って簡単に取得し、文字色と背景色の見やすさを診断してくれます。 こんな感じ↓(クリックで拡大) 全ての人のために読みやすく アクセシビリティを考えるのは、色覚障害を持つ人や高齢者のためだけではありません。 サイトでの滞在時間は

    背景色と文字色の見やすさをチェック
  • 1