おすすめのテキストリンク色について考察。Googleなど大手サイトが使用するカラーコード一覧
こうやって並べてみると、意外にも様々な色が使用されていることが伝わるかと思います。 青系統の色を使っているサイトでも、2018年4月時点ではデフォルト色である #0000ff が使われておらず、主張が強すぎない青色が選ばれている印象です。 またクックパッドでは、全く違った色である #330000 が使用されています。料理レシピに関するサイトなので、彩りを想起させる意図があると思われます。 はてなが使用する #333333 の意図ですが、テキストリンクの色でユーザーの目を引かせるのではなく、周りの装飾に適切な色を使用することで黒いテキストを際立たせているように感じました。 おすすめのテキストリンクの色 大手10サイトのテキストリンクで使用されているカラーコードをまとめてみましたが、果たしておすすめのテキストリンクの色はどれなのでしょうか。 青系統が主流 やはり多くのユーザーに「リンク＝青色」
保存必須！代表的なSNS＆Webサービスのブランドカラーコード29選
デザインに関する業務をしていると、よくWebサービスやSNSなどのブランドカラーを調べることがあります。そこまで頻度は高くないとはいえ、毎回調べるのは面倒だと感じた経験がある方も多いのではないでしょうか。 また、同じサービスでも検索すると過去のデザインが含まれるなど複数のカラーコードが出てくることがあり、混乱してしまいがちです。 そこで今回は、主要なSNS＆Webサービスのブランドカラーコードをまとめてご紹介します。 今後カラーコードを使用する機会がある方は、ぜひ参考にしてみてください。 注意： 公式でカラーコードを記載しているものもありましたが、明記がないものなど、中には画像からスポイトで色を抽出しているものがございます。微妙に色が異なる恐れもありますので、ご了承ください。 目次 主要SNS＆Webサービスのブランドカラーコード 4. LINE Instagram Facebook Tw
ブランドカラー選定に必要な4つの基本プロセス｜Goodpatch Blog グッドパッチブログ
デザイナーのみなさま、突然ですがこんな悩みはありませんか？ ブランドカラーを何色にするべきか、どのように決めたらよいか迷ってしまう。 いつも無難な色を使いがちでデザインの幅が広げづらい。 なぜこの色なの？と聞かれた時にロジカルな回答ができるか心配。 デザインをしていると、このような悩みを一度は持ったことがあるのではないでしょうか。 プロセスの中で必要とされるカラーの選定は、1つの難関ですよね。 0→1フェーズのデザインを得意とするグッドパッチでは、目には見えないサービスのコンセプトを決定するところから、ブランドカラーやサービスロゴなどで実際の形にする提案までを担当させていただくことが多々あります。 実際に私が担当したプロジェクトでは、とある企業さまの新規デジタルメディアの立ち上げを担当させていただき、その際Webサイト内とサービスロゴに使用するブランドカラーの提案をさせていただきました。
メインカラーとアクセントカラーを、 簡単にセンス良くまとめる方法
パワーポイントデザインで失敗しないために、これだけはおさえておきたい「色の知識」では、簡単な色の知識や、配色するときのポイントなどについて説明させていただきました。この記事では、PowerPointで使う色を実際に選んでみたいと思います。前の記事を読んでいない方は、まずそちらをご覧いただいたほうが、より効果的にこの記事の内容を理解、実践できると思います。 ノンデザイナーの人たちが、いきなり色を選んで組み合わせまで考えるなんて、難しいのは当たり前ですよね。この記事を書いている僕も別にデザイナーじゃないので、色選びはあまり得意とは言えません。しかし、世の中にはたくさんの便利なWebサイトやツールであふれています。なので、まずは全面的にそれらに頼ってみましょう。
カオス化したスタイルシートから卒業！CSSでカラーを管理する効率的な方法
テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。 Create your design system, part 3: Colors by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに カラーをCSSで効率的に管理するために セマンティックにするか、宣言型にするか 基本的なカラーパレットの作成 セマンティックカラーの追加 このアプローチを採用する理由 テーマに使用するカラー はじめに 元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとして利用できるので、一足先に公開します。 Web Components|CodyHouse カラーをCS
ステキなデザインのWebサイトから実践的な配色テクニックを学んでみる ｜ 福岡のホームページ制作会社・メディア総研株式会社 マグネッツ事業部
どうもかわさきです。あと数日で博多の事務所に引っ越してきて丸1年…早いものです。桜の花の蕾もふくらんできて、開花が待ち遠しいですね。 さて、今回のテーマは配色です。 デザイナーであれば誰でも一度は躓くこのテーマ…。「私はなんてセンスが無いんだ…！」と枕を濡らした夜は数知れず…とまではいかなくても、常日頃パソコンを前にうんうんお悩みの方は多いのではないかと思います。 世の中には配色テクニックを解説した書籍や、カラーコーディネーター検定など体系的に色を学べる手段や、「○○なイメージ」「2018年トレンドの配色」など、配色パレットを集めた本やサイトは多数ありますよね。 しかし、頭の隅にあってもいざ自分のデザインに落とし込もうと思ったら「で、これ、どう使ったらいいの？？」となること、ないでしょうか？（自分は特にオシャレな配色パレットを活かしきれたことがないんですが…） 知識だけではなかなか身につか
WEBデザインで押さえるべき配色（ベース、メイン、アクセント）の基本「3つのカラー」｜BLOG｜株式会社エムハンド
WEBデザインで押さえるべき配色（ベース、メイン、アクセント）の基本「3つのカラー」 デザインをする際に欠かせない要素の一つとして、カラーの配色がありますよね。しっくりこない、これであってるのかな？などで悩んだ経験は1度や2度はある事と思います。 今回はWEBサイトをデザインする際に必要な、ベースカラー、メインカラー、アクセントカラーの配色や配分についての基本ルールをまとめてみました。 WEBサイトの配色は役割別に３つあり、それぞれに、ベースカラー、メインカラー、アクセントカラーと呼びます。各々の比率をベースカラー70％、メインカラー25％、アクセントカラー5％の割合にすると、美しい配色に仕上げることができます。 ベースカラー最も大きな面積を占める基本となる色で、余白や背景などに用いることが多い色です。メインとアクセントのカラーを引き立てる脇役的な立ち位置。 メインカラーその名の通りサイト
UI用のカラーシステムを構築する新しい方法とツール
少人数で一回限りのプロジェクトであれば、カラーシステムは割と簡単に構築できます。しかし、大人数や長期間のプロジェクトになると、そう簡単ではありません。 Webサイトやスマホアプリで、長期的に使用でき、拡張性があり、アクセシブルなUI用のカラーシステムを構築する新しい方法を紹介します。 Re-approaching Color 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに カラーの名前の付け方 カラーの選択方法 カラーのアクセシビリティ はじめに カラーとは世界を認識するのに役立ち、そしてインターフェイスにとっても重要な存在です。わたし達が予測して、そして理解し、意思決定するのをカラーは導きます。 例えば、レッドの文字は注目し、グリーンの数字はリラックスし、グレーの文章の前にブラックの文章を読むでしょう。ブルーの文字は
W3CのWCAGが定めるテキストと背景のコントラスト比を簡単にチェックできるMac用カラーピッカー「Contraste」がリリース。 | AAPL Ch.
W3CのWCAGが定めるテキストと背景のコントラスト比を簡単にチェックできるMac用カラーピッカー「Contraste」がリリースされています。詳細は以下から。 ContrasteはSketchアプリを開発するオランダBohemian CodingのデザイナーChristopher Downerさんが公開したMac用カラーピッカーアプリで、色覚異常の人もWebに掲載されたテキストを読めるようW3CのWeb Content Accessibility Guidelines (以下、WCAG)が定めるテキストと背景のコントラスト比を計算し表示してくれる機能があります。 Contraste is a simple app for checking the accessibility of text against the Web Content Accessibility Guidelines
テキストの読みやすいカラーを決めるにはこれが大切！Webデザインにおける良いコントラストのつくり方
読みやすい本文テキストのカラー、分かりやすいリンクのカラー、目立たせたいボタンのカラーなど、Webデザインのカラーを決める時にもう一歩進めた良いコントラストのつくり方を紹介します。 Webデザインでカラーパレットを作成する時、カラーの組み合わせをコントラストのためにテストしていますか？ テストをしてないのであれば、あなたのデザインはリーダビリティを考慮せず、潜在的なビジターを失っているかもしれません。 私はこれまでに数多くのプロジェクトでカラーコントラストとリーダビリティについて取り組んできました。いくつかの有用なカラーコントラストのアクセシビリティツールのおかげで、私は仕事をすることができ、それを多くの人たちと共有したい思います。 私はアクセシビリティの専門家ではありません。私の目指すところはシンプルで、最適な読みやすさを念頭においてカラーを選ぶことです。完全な説明が必要であれば、W3C
キャンセルボタンに色をつけてはいけない理由
キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WCAG - Contrast Checker