Movatterモバイル変換

[0]ホーム

サクサク読めて、
アプリ限定の機能も多数！

アプリで開く

はてなブックマーク

閉じる

テクノロジー
シンプルなカラーで作る失敗知らずのウェブデザイン

気に入った記事をブックマーク

気に入った記事を保存できます
保存した記事の一覧は、はてなブックマークで確認・編集ができます
記事を読んだ感想やメモを書き残せます
非公開でブックマークすることもできます

シンプルなカラーで作る失敗知らずのウェブデザイン

テクノロジーカテゴリーの変更を依頼記事元:

gigazine.net

適切な情報に変更

エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます

コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

次回からTwitterへ自動リダイレクト

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

441usersがブックマークコメント

コメントするにはログインが必要ですブックマークを追加

ブックマークを追加

よく使うタグ

シンプルなカラーで作る失敗知らずのウェブデザイン

441 users

gigazine.net

よく使うタグ

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント21件

注目コメント
新着コメント

eriottoGIGAZINEが言うかよ

2016/04/07リンク

その他

chago色彩感覚がないのでツールに頼む…

2016/04/07リンク

その他

istb165色もきついです "シンプルなカラーで作る失敗知らずのウェブデザイン"

2016/04/08リンク

その他

ippatsu2009これは実践的。

2016/04/07リンク

その他

adstyシンプルなカラーデザインで失敗しないデザイン論。

2016/04/07リンク

その他

yuzutas0「まず灰色だけでモックを作ってから様々な色を試す」これいいかも。IAやスタイルガイドの整理に加えて、CSSの疎結合化に寄与しそう。プレゼンスライドにも応用できるのでは。

2016/04/07リンク

その他

yoshimatsutakeshiシンプルいずざベスト！

2016/04/07リンク

その他

cosacog1278、

2016/04/07リンク

その他

sakra00備忘録として

2016/04/07リンク

その他

mawatarinWebサイトのカラーパターン等。シンプルでスマートなサイト作りの参考に。

webデザイン

2016/04/07リンク

その他

eriottoGIGAZINEが言うかよ

2016/04/07リンク

その他

simabuta『「ベースカラー」「白」「暗い灰色」「明るい灰色」「アクセントカラー」の最大5色でデザイン性のよいサイトを作れると述べています』

デザイン

2016/04/07リンク

その他

soret便利そう

2016/04/07リンク

その他

rindarinda5いいねシンプルなカラーで作る失敗知らずのウェブデザイン - GIGAZINE - Pressoからシェア

2016/04/07リンク

その他

itouhiro「最初はベースカラー決め。思いつくまで特徴を単語羅列。近い色を比較」「ベースカラー以外は白暗い灰色（文字）明るい灰色（一部背景）で十分」「例外のアクセントカラーで最大5色」「まず灰色1色でモック作る」

2016/04/07リンク

その他

snowlong"実際に色をつける前に全体の構成や階層についてより見やすくするために、まずは「灰色」1色でサイトを作ってみる"

2016/04/07リンク

その他

gntaこの記事載せてるGIGAZINEのカラーとデザインが…

2016/04/07リンク

その他

aiza_wai“さまざまな青色基調のサイトを参考にするのも大いにアリ。ColorZillaのようなサービスを使ってサンプルサイトからHEX値を調べれば同じ色を再現” ← サイトの色調考えるにあたって、他事例を色指定でのぞけるのは貴重。

デザイン

2016/04/07リンク

その他

ta2ya112webデザインに最適

2016/04/07リンク

その他

masayoshinym“ベースカラー以外に使う色について、エリザベスさんは「白」「暗い灰色」「明るい灰色」の3色で十分だと述べています。”救われた気持ちになった。

2016/04/07リンク

その他

masakiplusウェブデザインにおいて、サイトイメージに大きな影響を与える「カラーパターン」は重要です。ついつい色にこだわって色数を増やして全体のバランスを崩してしまいがちなカラーデザインを、極力少ない色だけで、バ

2016/04/07リンク

その他

sakurai00310色見は大事

2016/04/07リンク

その他

chago色彩感覚がないのでツールに頼む…

2016/04/07リンク

その他

コメントするにはログインが必要ですログインしてコメント

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー

はてなブックマークボタンを作成して埋め込むこともできます

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

usersに達しました！

さんが1番目にブックマークした記事「シンプルなカラー...」が注目されています。

気持ちをシェアしよう

ツイートする

シンプルなカラーで作る失敗知らずのウェブデザイン

ウェブデザインにおいて、サイトイメージに大きな影響を与える「カラーパターン」は重要です。ついつい...ウェブデザインにおいて、サイトイメージに大きな影響を与える「カラーパターン」は重要です。ついつい色にこだわって色数を増やして全体のバランスを崩してしまいがちなカラーデザインを、極力少ない色だけで、バランスの整った見た目に美しい仕上がりにする方法論がウェブデザイナーによって解説されています。 ASimple Web Developer'sGuide To Color – Smashing Magazine https://www.smashingmagazine.com/2016/04/web-developer-guide-color/ Design Academyを主催するウェブデザイナーのローラ・エリザベスさんは、シンプルなカラーデザインで失敗しないデザイン論「simple colorworkflow」を提唱しています。エリザベスさんは多くの色を複雑に使いこなすよりも、サイトのカ