「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ
ロゴを特別なものにするのは何でしょう？ロゴを魅力的にするには、デザイントレンドがどのように進化しているのか、きちんと把握しておくことが大切です。 この記事では、2019年にかけて注目したい、ロゴデザインの人気トレンド9個を予想し、まとめてご紹介しています。たくさんのデザイン事例と一緒にまとめているので、今後のデザイン制作の参考にしてみてはいかがでしょう。 デザイナーが押さえておきたい、2019年のウェブデザイントレンド10個まとめ【完全ガイド】 2019年に注目したい！グラフィックデザインの最新トレンド10個まとめ コンテンツ目次 1. 可変ロゴデザイン 2. 新世代の幾何学模様 3. 目の錯覚を利用したロゴ 4. 目的のある配色 5. ネガティブ・スペースの応用 6. ミニマリズムの変化 7. 歴史のあるロゴ 8. 重なり合うロゴデザイン 9. ディテールを最大限に活用 01. 可変ロゴ
色彩検定資格、通信講座、独学、カラーコーディネーター、2級 3級色彩検定対策の勉強法、過去問、解答速報など。 Webスクールレベルの授業が格安で学べるWebデザインのオンライン講座。 色彩検定初心者のための色彩検定ガイドです。 初めて色彩検定を受検する人を対象に色彩検定勉強法と合格のコツをわかりやすく解説しています。 色彩検定に関する、独学、通信講座、カラーコーディネーター、資格、過去問、体験談などもまとめていきます。 色彩検定に挑戦し、一発合格するための情報収集にお役立て下さい。 2010年夏季色彩検定試験日程は6月27日（予定）です。 カラーコーディネーター合格講座 試験対策 資料請求（無料）はオンラインで。 ユーキャンカラーコーディネート講座 ▼色彩検定２級・３級の程度と内容を把握し勉強法を決める。 では、早速色彩検定受検の準備を始めます。 合格を勝ち取るには効率よく必要な情報を集め
「カラーユニバーサルデザイン推奨配色セット」は、サインやグラフなど、比較的小さな面積でも見分けやすい、高彩度のアクセントカラー9色、案内図や地図の塗り分けなど、広い面積に用いる高明度・低彩度のベースカラー7色、これらの色と誤認しにくい無彩色4色の合計20色（塗装用のみ代替色2色を含む22色）のカラーパレットです。 特徴はC型の人が同じ色のグループに感じる色の中から、C型とP型とD型色覚の人に見分けやすく、またP型D型色覚の人が色の名前を間違えにくい色を選んでいます。 実際に使いやすいように、RGB指定値、CMYK指定値、日本塗料工業会の色票番号、そして参考にマンセル値も表記しました。 ガイドブックの入手 １）有償印刷版 CUD推奨配色セット ガイドブック 頒価と送料 一冊 100円＋配送料 〔配送料〕 ・1冊————— 配送料 210円 （内訳 定形外郵便210 円） ・2冊————— 配
トイレに入ろうとして、こんなマークを見つけたら、右と左どちらに入りますか？ 女性は左へ、男性は右へ…と、とっさのことなので、間違えて入ってしまう人も多いのではないでしょうか。 このように私たちは、日常生活の情報を無意識のうちに色に頼って判断しています。しかし、ある人の色の見え方と別の人の色の見え方は同じではないのです。色を使って情報伝達する場合には、さまざまな人たちへの配慮が必要になります。 色のバリア より多くの人が快適に暮らせる社会づくりのために「バリアフリー」や「ユニバーサルデザイン」が重要なキーワードとして定着してきました。 そのおかげで、障がい者やお年寄り、妊婦、外国人、子どもなどがこれまで感じていた不便なことが、少しずつ解消されてきています。 しかし、そうした中で「色」のために不都合を感じている人たちのことは、見過ごされがちでした。「色盲」「色弱」「色覚障がい者」などと
カラーユニバーサルデザイン（英: color universal design, CUD）とは、色の見え方が一般と異なる（先天的な色覚異常、白内障、緑内障など） 人にも情報がきちんと伝わるよう、色使いに配慮したユニバーサルデザイン[1]。 これは「NPO法人カラーユニバーサルデザイン機構（CUDO〈クドー〉）」が作った名称であり[2]、一般名称としてはカラーバリアフリーや色そのものを指してユニバーサルデザインカラーという呼び方も使われている。 2007年の時点で色の受け取り方が異なる人は、日本全体では300万人以上、世界では2億人もいるとされている[2]。 1994年、調査書の色覚欄が廃止され、色覚異常を持つ人も国立大学の理科系学部への入学が可能となった。公立・私立大学も追随し、大学入学の制限がほとんどなくなった。 一方で、コンピュータの技術躍進でカラー化が進み、テレビにおける津波警報、天
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
「デザイン」に対して興味のあるすべての人を対象に、いつまでも長く利用できるデザインの基礎テクニックを、これまで当サイトで紹介したエントリーの中から、各ポイントごとにまとめました。デザイン入門編として覚えておきたい基本から、サンプル例を見ながら理解できる、より実践的なデザインテクニックまで幅広く網羅しています。
背景の色に悩んだり、なんとなく決めてしまうことはありませんか？ Webサイトやスマホアプリの背景に適した色の選び方、明度と彩度を最適化するデザインのテクニックを紹介します。 Why You Shouldn’t Use Bright, Saturated Colors for Backgrounds 下記はUX Movementの記事を意訳したものです。UX Movementでは他にもUXデザインに関する記事が掲載されています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 背景に明るく彩度の高い色を使用してはいけない理由 1. 明度と彩度 2. 注目と喚起に対する色の効果 3. ボタンのために明るく鮮やかな色を予約しておく 4. 背景に濃くて不鮮明な色を使用する 5. 背景に適した色の選び方 6. 見にくい背景と見やすい背景の例 7. 美しさとユーザビリティ 背景
「配色えらびのベストな方法が知りたい」 「イメージにあった色をもっと手軽に選びたい」 「色がなかなか決まらない」 「配色えらびにAIを活用してみたい」 この記事では、配色えらびが苦手なひとに役立つ無料ツールをまとめてご紹介します。 ２０１６年８月の初投稿から９年かけてわたしが見つけた、実践向けの配色ツールをカテゴリ別に揃えました。 リンクの切れたツールは削除し、新しいデザインツールを追加した最新版にアップグレード。 配色の基本ルールを頭に入れておけば、お気に入りの色を効果的に見つけることができますよ。 コンテンツ目次 普段使いできる便利ツール（17個） ワンクリック、人工知能系ツール（20個） マテリアルデザイン系ツール（4個） Webデザイン・UIデザイン関連ツール（21個） 写真から抽出系ツール（2個） インスピレーション系ツール（14個） グラデーション関連ツール（29個） 配色カラ
Facebookのブランドカラーが青色なのは、マーク・ザッカーバーグが色盲だったから、という話を知っているでしょうか。 「青は私にとって、もっともリッチな色で、すべての色合いを識別することができる。」とザッカーバーグ氏は述べています。配色を決める作業は、まったく科学的には見えないかもしれませんが、配色に関してたくさんの研究やアイデアが用いられています。 商品に対する評価の90%以上は、色によって判断されていると Buffer では紹介されている通り、どんなデザインにおいても、いかに配色をじっくり検討するべきか分かります。特にウェブサイトでは、ユーザーが配色を気に入らなかった場合、あまり長くはサイトに滞在してくれないでしょう。 ウェブデザイン制作で配色の参考にしたい、さまざまなWebサイトから集められた、50種類の美しいカラーパレットを今回はまとめています。コピー＆ペーストで利用できる、カラ
280 handpicked colors ready for COPY & PASTE
Circle Controller HUE/360 Ver.0.1.3 © 2012 SAUCER.JP
色の見えやすさ 背景との明度差が高ければ高いほど、視認性は高くなる。 視認性の高い配色は背景が黒で図色が黄色を使った配色。
使っている色の同色相でトーン違いの色を使うときわざわざ色を作るの面倒だなと思ったので、それを好きな色から作るSassの変数を作ってみました★ 色を選ぶときって皆さんはどうしているでしょうか。カラーチャートから選んだり、ピッカーで都度作る人もいると思います。 私はイメージにあったメインの色を選んだあとでそのトーン違いの色、色相違いの色という風に色の数値をずらすような感じで色を作ります。ですがそれをカラーピッカーでやるのは正確でなかったりしますし、数値を入力していくのもちょっと面倒です…。そこで、Sassの関数を使って数値を自動的に作り、さらにそれをそのまま使えれば良いなと思って作ってみましたー！ デモ どんなものなのか、とりあえずデモです。 See the Pen [Demo] Sass Variables Color tone by You Sakai (@webcre8) on Code
前回、WEB上で画像やテキストなどのカラーを識別できるGoogle Chromeの機能を紹介しましたが、今回は色を識別してから、 色彩センスがないけど、きれいな配色が作りたい！！ この色には何色と合うんだろう？ とお困りではないですか。 【色を識別する記事】これ何色？画像やテキストなどWEB上の色を簡単に識別するGoogleChromeの機能 今回は、どんな色か特定できてもその色がどんなものなのか、相性の良い色はどの色なのか、配色を検討する参考にできる無料のオンラインツールを紹介します。 紹介する記事の中でこのサイトのロゴなどのテーマカラー「#d86e3a」をもとに紹介します。 簡単にきれいな配色デザインが作れるColorHexaって？ 前述していますが、「どんな色か特定できてもその色がどんなものなのか」、「相性の良い色はどの色なのか」、配色を検討する際に参考にできる無料のツールで、色彩セ
COLORSはCSS2.1で設定されている標準カラーを少し変えて綺麗なカラーパターンにする為のCSSです。17色のうち、whiteを除く16色に手を加えてみたよ、みたいなの。W3Cが標準とするには理由があると思いますので標準色は標準色として守られるべきではあるでしょうが、まぁ確かにこちらはオッサンである自分の目には優しいかも。一つのカラースキームのアイデアという事みたいですし、こういう提案も面白いですね。個人的にはoriveとredとmaroonはもう少し標準に近いほうが良い気はします。本CSSを考案された方は他にも色にまつわるリソースを公開しているのでチェックしてみてくださいね。Webサイト下部にリンクがあります。 COLORS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
