４年間、7色だけでUIをデザインし続けた話｜コウノ アスヤ
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
やってほしくない緑とオレンジの使い方(カラーUDの話)｜ほうじ | 少数色覚デザイナー
少数色覚者にとって黄緑とオレンジは見分けづらい組み合わせの一つです。この記事のタイトル画像とかなかなか最悪です。 WEB、アプリや印刷物などのメディアではだいぶカラーユニバーサルデザインの考え方が浸透してきており、デザイナーも多様な色覚でも読み違えないように配慮してデザインすることが当たり前になってきていると思います。 Photoshopなどのグラフィックツールには簡単に少数色覚の見え方を確認できるプレビューモードがありますし、AdobeColorを使えば無料で少数色覚の人が混同しやすい色かどうかをすぐに確かめられます。https://color.adobe.com/ja/create/color-accessibility 少数色覚が見分けづらい色の組み合わせだと「-」が表示されるしかし、工業製品の世界では少数色覚にとって見分けづらい緑とオレンジの組み合わせのLEDインジケータ（表示）を
グラフを作ってデータを可視化する時に「見やすい色」を選ぶコツまとめ
ウェブデザインやグラフィックデザインにおいて色の選択は非常に重要かつ難しい作業ですが、デザイナーでなくともグラフを作る際などに色の選択をする必要に迫られることがあります。データを分かりやすく可視化するためには、どのような色の組みあわせを選択すべきなのか、プロでなくともプロのようなグラフを作れるようになるポイントを、ビジュアルコミュニケーションを専門とするLisa Charlotte Rostさんがまとめています。 How to pick more beautiful colors for your data visualizations | Chartable https://blog.datawrapper.de/beautifulcolors/ ◆色相をあれこれピックアップしすぎない カラーホイール上の色を大別すると、赤・オレンジ・黄・緑・青・紫の6つの色相となりますが、データを可視化
パワポっぽさを脱却する〈色彩編〉｜PowerPoint+
■パワポの色はダサいどうも今回は脱パワポっぽさ！ということで、色をテーマにまとめていきたいと思います！ みなさん、パワポでスライドを作る際、色をどのように決めていますか？ 図形を挿入した時のデフォルトの色を使っていますか？ 図形の塗りつぶしから色を選んでいますか？ もちろん、もともとパワポに設定されているカラーでも問題はありませんが、どうしても普段から目にすることが多いので、パワポっぽさを感じる配色になってしまいます。 今回のテーマ「パワポっぽさを脱却する」ということですから、私がいつもやっている方法を紹介したいと思います！ ■色を決めるのはめちゃくちゃ難しいということを自覚する実際に私がおすすめする方法を紹介する前に、色を決めることの難しさについて話したいと思います。 フランスの国旗（イタリアでもルーマニアでもドイツでもチャドでもポーランドでもいいですが笑）で考えてみたいと思います。もし
【配色・色見本 Webサイト紹介】 - 10個のweb配色ツール【色の見本】
ポスターやWebサイトのデザインをする際の配色は奥が深く、デザイナーであっても毎回悩む問題の1つ。 ただ、デザインにおいて配色の役割は大きく、たった1つの色でそのサイトやモノの印象がガラっとかわることはよくあります。 ベースカラーやアクセントカラーの組み合わせが決定しても、その色で本当に正しいのかどうか不安になることもあるかと思います。 今回ご紹介するのは、そんな悩みを一発で解決する、配色を決定する際に役立つ便利なWebツールです。デザイナーの方はもちろん、ディレクター、エンジニアの方でも、覚えておくと使えるものばかりなのでぜひ利用してみてください。 Web配色ツールのご紹介 それでは、Web配色ツールを10個ほどご紹介します。求める色がすぐに見つかったり、色を組み合わせる時の見本となるサイトばかりなのでぜひ訪れてみてください。 HUE/360 HUE/360は、1つのキーカラーと調和する
配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色
Webで見るデジタル色彩見本として 配色の見本帳は無料のインターネットツールです。各色のページでは、Webカラー（RGBカラー）をベースとした色の系統（色相）と色の鮮やかさ（彩度）・明暗の度合い（明度）を数値で表しています。各種カラーモードでの色数値を掲載しています。DTPでチラシや看板を作るとき、ホームページといったWEBサイト作成、パワーポイントでの資料作成など、各種デザインでのカラーマネージメントに便利なカラーコードが一目でわかるWebで見るデジタル色見本です。 色を扱うときに頻繁にぶち当たるのが配色ですが、色の法則に沿った色の組み合わせがテンプレートとなり色彩設計の手助けをしてくれます。 色検索で見つかる新配色 ベースとなる色、キーカラーを選ぶとそこからおすすめな相性の良い色をマッチングしてくれるのが当サイトの色検索です。メインに使う色が決まっているとき求める配色がすぐに見つけられ
ノンデザイナーでも配色に困らないカラーパレットツール10選
色はデザインにおいて重要な役割をもち、色の組み合わせひとつでユーザーに与える印象は大きく変わります。しかし、配色を決めるのはなかなか難しく、悩んでしまいがちです。 今回はそのようなときに役立つ、配色を提案してくれるサイトや、配色がコレクションされているサイトを紹介します。配色のアイデアを与えてくれるサービスばかりなので、ぜひ活用してみてください。 HELLO COLOR http://jxnblk.com/hello-color/ クリックすることで２色の色の組み合わせを提案してくれるサイトです。また、スペースキーを押すことで、提案された２色に合う色を表示してくれます。配色のデザイン知識がなくても使うことができる便利なサービスです。 PALETTABLE http://www.palettable.io/ 提案された色が「好き」か「嫌い」かを選択していくだけで、カラーパレットが完成します。
デザインをセンスアップする“いけてる配色パターン”100選！
色彩はデザインをイキイキさせてくれます。 色は注意を引いたり、雰囲気を作ったりするだけなく、感情や視覚にさえ影響を与えるのです。 しかし、時に、デザインを始めるにあたってカラーパレットを選ぶ時、どこからはじめて良いのかわからなくなりますよね。 そこで、私たちCanvaチームが自然や、食べ物＆飲み物、旅、日用品（日常のモノ・コト）などから着想したカラーコンビネーション（配色）を100通りご用意しました！ このカラーコンビネーション（配色）をCanvaで使いたい？ Canvaへの登録がまだなら、ここをクリックして無料登録を。（まだ登録してないなんてないと思いますけど） Canva上でカラーメニューの６桁コードを入れると、あなたのデザインの色が変えられるようになりました。やり方は下のビデオを見てくださいね。 自然 01. 新鮮＆鮮明 Photo credit: Flickr/u2tryololo
デザインの基本日記 「配色編」｜Design Beginner
配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を
これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
【保存版】デザインを学ぶすべての人に贈る、配色アイデア見本101選
配色は、デザインにおける重要な要素のひとつです。この記事では、デザインプロジェクトの参考にしたい、最新の色の組み組み合わせ101種類をご紹介します。 配色は、どんなデザインでも見る人の認識を形成しながら、雰囲気やトーンを設定します。単色や明るい、涼しい、暖かい、または補色であれ、すべての色合いがデザインの役割を果たします。 デザインに適した色を見つける作業は難しいことです。そこで、配色の参考にしたい101種類の色の組み合わせをまとめています。各カラーパレットは、Shutterstockのイメージ画像にインスパイアされており、HEXコードも一緒に記載しているので、ウェブデザインやソーシャルメディア広告、Eメールデザインなど幅広く利用できます。 コンテンツ目次 1. 単色系カラーパレット 2. 寒色系カラーパレット 3. 鮮やかなカラーパレット 4. 暖色系カラーパレット 5. 補色系カラーパ
【図解】赤文字・青文字はもう古い。細分化される私たちの新しい「カラー」｜最所あさみ
「赤文字系」「青文字系」という言葉をご存知でしょうか。 古くからある女性誌の分け方のひとつで、端的にいうとモテ系か否か、というざっくりした区分です。 赤文字系で代表的なのが、CancamやJJなどのモテ系女子大生向け雑誌。 彼女たちにとっては、「かわいい」が最高の褒め言葉です。 対して、青文字系は「Zipper」や「Cutie」など、個性的な装いを好みます。 洋服選びのポイントは、男性からの評価よりもとにかく「自分らしくあること」。 「おしゃれだね」「個性的だね」が彼女たちの喜ぶワードです。 このように、雑誌を含めた女性向けマーケティングは、赤文字系・青文字系の二軸で語られてきました。 しかし、ネットの発達によって好みがより細分化された結果、私たちはマーケティングにおいて、より多くの「カラー」を意識する必要がでてきました。 そこで今回は、私の主観ベースで最近の新しい「カラー」について解説し
プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】
なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで
デザイナーじゃなくても知っておきたい色と配色の基本 | knowledge / baigie
色は私たちの身近に存在する視覚要素であり、日々の生活や行動に多大な影響を与えています。しかし、美術やデザインの専門教育を受けない限り、これほど身近な色を体系的に学ぶ機会はほとんどありません。 近年、ビジネスの現場でもデザインの重要性がよく語られます。ビジネスレイヤーで語られるデザインは課題解決を意味する広義のデザインであることも多いですが、その概念がプロダクトに落ちる段階では、ビジュアルデザインのような狭義のデザインも考えていかなくてはなりません。自分自身がデザイナーではなくとも、デザインを評価・判断すべき立場になることも、当然あるでしょう。 デザイナーでなくても、仕事の中で色を扱うシーンは他にもあります。PowerPoint等を使ってビジネス文書を作成をするとき、誰もが色を用いるでしょう。色の知識があれば、より効果的なドキュメント作成が可能になります。 このように考えると、色はデザイナー
配色に役立つ11のサイト
WEBデザインを行う上で重要なファクターの一つである配色：カラーリング。ロゴやブランドイメージなどから導きだすケースが多いと思うが、困ってしまうのは明確なイメージがなく、キーカラーが決まらないとか、キーカラーとの組み合わせがイマイチしっくりこないなど、配色で頭を悩ませることは結構あるのではないだろうか。 そこで今回は、そういう時に役立ちそうな10サイトを紹介したい。各サイト共に試してみたが、思わぬ組み合わせや自分では積極的に使わない色や自分の好き嫌いを再確認できて結構面白い。こういったサイトを活用して効率化を図ったり、新境地を開いてみてはいかがでしょうか。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カラー生成のこんな便利ツールがあったとは！ ベタ塗りのカラーと同じに見える半透明のカラーを生成するツール -Alphredo