４年間、7色だけでUIをデザインし続けた話｜コウノ アスヤ
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
視認性に配慮した色の識別！JIS安全色彩
JIS（日本工業規格）よって規定された安全を確保するために決められた色がJIS安全色です。赤、黄赤、黄、緑、青、赤紫に、対比の補助色となる白、黒を加えた8色があり、危険防止や緊急事態への対応といった行動がきちんと行えることを目的として定められています。禁止や危険を示す赤、注意を示す黄、救護や誘導を示す緑など各色に意味があります。JIS安全色は、道路の交通標識や公共の場の案内板など様々な場で使われています。 色はマンセル値で定められています。ベースがマンセル値なのは標識や案内板でのペイント塗装を前提にしているためです。そこから各カラーモードでの推奨値が選定されています。マンセル参考値、CMYK、RGB・HTMLカラーの各カラーモードで色合いは少し異なっていますが、これは各カラーモードで安全色として視認性が高く見やすいように調整されているためです。 JIS安全色の推奨値は次のようになっています
日本の伝統色が一目で分かり三原色・カラーコードも調べられる「NIPPON COLORS」
紅・山吹色・橙など日本古来の色の名称は実際にどんな色なのかイメージしづらいときがあるもので、そんな時に色を調べるのにもってこいなのが、様々な「日本の色」を知ることをできるサイト「NIPPON COLORS」です。 NIPPON COLORS - 日本の伝統色 http://nipponcolors.com/ NIPPON COLORSのトップページはこんな感じ。最初の画面は「櫨染(はじぞめ)」に設定されています。 知りたい色にカーソルを合わせてクリックすればOK。今回は撫子(なでしこ)をクリック。 クリックすると全画面が撫子色に変化。 撫子色の部分を良く見ると、カラーコードの番号も書かれています。撫子であれば「DC9FB4」。 色の三原色の配合も画面に表示されており、撫子色はC(シアン)が2、M(マゼンタ)が43、Y(イエロー)が3の配合。絵の具を混ぜて色を作ったりするときなどに参考になり
RGBカラー209万7152色を1枚の画像に入れるとこうなる
RGBによって画像が表現される液晶ディスプレイなどのディスプレイは小さな光の点で構成されていて、その1つ1つが赤・緑・青の3色の組み合わせで表現されています。1つの点にある赤・緑・青の明るさを調節することでより多くの種類の色を表現できるのですが、「生粋のギークである」というJozsef Fejesさんは、RGBで表現できる209万7152色を1枚の画像に入れるというチャレンジに挑戦し、作成した画像およびムービーを公開しています。 All RGB colors in one image | Joco blog http://joco.name/2014/03/02/all-rgb-colors-in-one-image/ まず、Fejesさんが取り組んだのは、1原色当たり32階調の明るさを割り当て、合計3万2768色になる15ビットカラーで解像度が256×128pxの画像の作成です。画像は全
入力した言葉に合わせてイメージカラーを自動生成してくれる「色色 [:iroiro]」
どんな服を着ようか迷ったり、お絵描きやデザインでどんな色を使うか迷ったりした時に使えるサービスが「色色 [:iroiro]」。入力した言葉のイメージカラーを自動生成して表示してくれます。 色色 [:iroiro] http://synthsky.com/iroiro/ 使い方はとても簡単で、画面下部にテキストボックスがあるので…… こんな感じに文字を入力してルーペアイコンをクリックすればOK。 すると、その文字からイメージされる色を表示してくれます。これらの色は、入力した文字で画像検索をし、出てきた画像から主要な画像成分を抜き出してできあがるようです。 というわけでいろんな文字で検索してみます。 「ガチャピン」のイメージカラーはこんな感じ。 「ムック」は少しイメージと違います。 適当に文字を入力して、その日のコーディネートに利用したりしてもOK。 言葉のイメージ通りの色が出てくることもあれ
![入力した言葉に合わせてイメージカラーを自動生成してくれる「色色 [:iroiro]」](https://cdn-ak-scissors.b.st-hatena.com/image/square/2ace35add2db160e7dd1d9291fd853da90027ea9/height=288;version=1;width=512/https%3A%2F%2Fi.gzn.jp%2Fimg%2F2014%2F02%2F05%2Firoiro%2F00.png)
CMYK変換にGIMP？？なんて超絶面倒くさいことを…今どきのPhotoshopレスCMYK分解はこれ！フリーウェア！
CMYK変換にGIMP？？なんて超絶面倒くさいことを…今どきのPhotoshopレスCMYK分解はこれ！フリーウェア！ というわけでタイムリーにCMYK変換で阿鼻叫喚な時期なので、少しでも負担を減らしてゆっくり寝ましょう。 GIMP+プラグイン導入して「分版」して…ってそれで入稿画像全部やるの？？ ものすごく面倒くさくないですか…？GIMP導入してプラグイン入れて、「分版」してごにょごにょして あなたそれ、マゾいですよ。 もっと簡単にやってしまいましょう。そして寝ましょう。体力温存。 Winの場合 @yamma_ma さん作成のColon : やんま まのblog（仮）を使ってみませんか。ドラッグ＆ドロップして書き出すだけ、Photoshopにも搭載されているAdobeCMMでCMYKに変換できます。 ▼作者によるインストール方法解説動画 むちゃくちゃ簡単ですね… ちなみに @yamma_
プログラマのためのカラーパレットツールを作りました - shoya.io
Paletta - HSV Color palette for every Programmer 背景 フラットデザインの台頭によって、昨今のアプリ/サービス開発において「色選び」が重要視されています。例えば上の写真は次のトイレの時刻を機械学習で予測するRestCastというアプリですが、「いい感じの青」を基調としたタイルを敷くことで、トイレというワードをニオワセないデザインに仕上がるよう心がけてつくりました。 デザイナー/プログラマーの皆さんは普段どうやって色を選んでいるのでしょうか。多くの場合、既存のカラーパレットをぽちぽち選択したり、#123456のようなカラーコードを調整するのではないかと思います。実は、この方法で「いい感じの色」を選ぶのは難しいのです。その理由を色の表現方法を踏まえて説明します。 混色系と顕色系 色を数値で表現する方法を表色系といいます。オストワルト表色系やマンセ
配色に悩んだときに、きっと役立つ7つの配色技法【基本】
私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います！ 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色
FM 100 Hue Test
色の正確な認識に影響する要因はたくさんあります。テストの結果が毎回異なる場合は、下記の理由が考えられます。 照明：照明は色覚に大きく影響する要因の一つです。脳が認識する色は、照明色によって左右されていることをご存知でしたか？照明装置などを用いて、常に管理された光源下で色を判断するようにしましょう。 背景色の影響：人間の目が認識する色は、周囲の色に影響されます。この現象を同時対比と呼びます。色を判断する際、常にニュートラル色の環境で行ってください。 目の疲労：私たちの目は疲れやすく、物体を2、3秒以上眺めると目の化学物質が消耗され、間違ったカラー情報が脳に送信されてしまいます。色の目視評価を行う際は、再度観察する前に目を休めてください。 乏しい色の記憶力：どんな色でも、詳細を記憶するのは非常に難しいことです。わずかな色差を効果的に判断するには、サンプルが人の心を動かす程に印象的でなければいけ
普段あまり使わないカラーの組み合わせを効果的に使う方法
Purple bud - EXPLORE - グリーンとパープルの組み合わせがよく見えると思ったことがあるでしょうか？ グリーンとパープルを使う時は、あまり暗くならないようにします。ダークパープルやペイルグリーンは良さそうには見えません。 カラースキームとしてもっとも良いのはあまり暗くないパープルと暖色系のグリーンです。 ブルーとイエロー yellow strings [ad#ad-2] ブルーを使おうと考えた際、一緒にイエローを使おうと思うのは非常にまれです。しかし、この二つを使って作られるエフェクトに驚くでしょう。これらのカラーでウェブサイトをデザインするとき、もしブルーをメインに使うのであれば、もっとも良い見栄えになるでしょう。イエローを多く使うとより明るくなり、サイトがあまりにもブルーが多すぎる時に効果的です。 イエローを使う時は、単に明るいイエローではなく、際立っていない薄いイエ
配色初心者でも効果的なカラーデザインが出来るようになる4つの工程 / Maka-Veli .com
タイトル間違えました。 「僕みたいなクソデザイナーが配色する時に騙し騙しデザインする手法」です。 配色には色々作法があります。そして言葉もあります。加法、減法、色の三属性、伝統、政治的意味合い、などなど。厳密に出したらキリがありませんし、プロじゃないので、細かい事は抜きにして、個人的に抑えておく簡単なポイントをまとめてみました。 雰囲気のキーワードを出す なんとなくのキーワードを出します。 カッコイイ！ うぉ！すっげ！って感じ クール とにかく渋く。鳥肌立つ感じで 可愛いっぽく。 やっぱ少し可愛くが良い ラブリー♡ もうワクワクーって感じで♥ シンプルに。 余計な物はいらん インパクトどーん とにかく覚えてもらいたい！ 爽やかーーー キレイに見せたい！ 楽しい！ ﾁｮｰﾊｯﾋﾟ ｽｰﾊﾟｰﾊｯﾋﾟ ﾉ…(ry など。 ここで決めたキーワードがベースになります。 常に頭に入れてお
日本の伝統色 和色大辞典 - Japanese Traditional Color Names
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
asada's memorandum (ゴッホの本当のすごさを知った日)
先日、北海道カラーユニバーサルデザイン機構（北海道CUDO）のイベントで、「色覚体験ルーム」というのを経験した。特殊な分光特性を持つライトに特殊な光学フィルタを被せたものを照明として使用しているその部屋の中では、一般型の色覚の人でも、P型（1型）やD型（2型）色覚の人と同様に色が見えてしまうのだ。つまり、特定の色の組合せにおいて、色の区別がつかなくなってしまう。こんなすごいものをよく作れたと思う。その部屋の中でいろいろなものを見たが、裸眼で色覚体験を行うのは、シミュレータを使ってディスプレイ上で見るのとはまた違った臨場感がある。貴重な体験だった。 部屋の中にフィンセント・ファン・ゴッホ（Vincent van Gogh）の絵のコピーがあった。その絵は、なんだか僕がいつも見ているゴッホと違って見えた。僕はゴッホの絵が大好きで、いろいろな美術館で実物を何点も見たことがある。ちょっと変わった色の
色彩センスのいらない配色講座
3. 自己紹介 職業：デザイナー 物心ついたときには絵を描くのが好きだった そのままの勢いで某美大某デザイン科に進学 社会に出たらデザインの話が通じなさすぎて悶絶 そんな社会に対して、デザインの効果をりろんてきに説明して説得しようとしている marippe_
サイトの「色」選びに役立つ20のツール
色選びに困ったときに助けてくれるウェブツールを20個紹介します。具体的な配色アイデアが紹介されているもの、選んだ色と関連する色が表示されるもの、画像から色を抽出するもの、という感じに分けてみました。 配色アイデア タイプ 投稿された配色アイデアが紹介されているサイトです。アイデアから編集できるサイトもあり、取っ付きやすいと思います。 Color Trends + Palettes :: COLOURlovers kuler ColoRotate: Colors come to life in 3D. Color Theory @ ColorJack カラーピッカータイプ 好きな色を選ぶと、その色と相性のよい色や関係性の高い色などが表示されます。 ウェブ配色ツール Ver2.0 Color Scheme Designer 3 [ws] Color Scheme Generator 2 Col
北米WEB屋なら誰でも知ってるんじゃないかって思うサイトをまとめてみた - バンクーバーのWEB屋
他人のブックマークって気になりませんか？特に同じ業界の人のブックマークってすごく気になりますよね。 興味本位でWEB屋友人のブックマークしてるサイトを教えてもらうことも多いですが、なんだか狙いすましたように、いろんな人が同じようなサイトをブックマークしていることに気がついて、「あぁー、このサイトはみんな良く見てるのかも」って思ったサイトがいくつかあったんですね。 そこで、WEB屋のブックマークをまとめて、北米WEB屋ならこれはたぶん皆みてるんだろうなってサイトをまとめてみましたので（独断と偏見で）ご紹介。 海外でWEB屋をやる方、いち早く海外のWEBデザイン情報をゲットしたい方、知っていて損はないと思います。 Smashing Magazine まずは王道？Smashing Magazine。このサイトは日本でも有名かなと思います。よくWEBまとめ記事とかで取り上げられてますよね。WEBの
カテゴリー別配色アイデア100
カテゴリー別配色アイデア100配色によってそのデザインの印象は大きく変わると思います。色は大切な要素のひとつですね！ということで、色の持つ印象別に配色アイデアをずらりと並べてみます。配色はおなじみ（？）のCOLOURloversから、「これは！」と思うものを選ばせて頂きました。素敵な配色がいっぱいのこのサイト、ぜひ覗いてみてください！また、今回紹介するのはあくまで一例ですので、自分なりにアレンジしてみるのも楽しいと思います。サイトの雰囲気にあう配色を探してみてください。 配色に関するおすすめサイトCOLOURlovers色をテーマにしたコミュニティサイト、COLOURlovers。自分の考えた配色を登録したり、お気に入りの配色を保存しておくことができます。今回はこちらから配色アイデアを選びました。 ウェブ配色ツール Ver2.0以前「配色に自信がなくても！Web デザインが好きになる配色ツ
第2回 sRGBとAdobe RGBを理解する
デジタルカメラで撮影した画像を、PCの液晶ディスプレイにて正しく色再現するには、駆動方式の選択も大切な要素だ（→第1回 液晶の特性を知り、写真向けの液晶を選ぶ）。液晶ディスプレイは一般的に駆動方式としてTN、VA、IPSのいずれかが利用されており、色再現の正確性は視野角による影響が少ないが、IPSは最も有利で、次にVAが続き、TNは不利となる。 実際にはパネルの品質などによって色再現性は大きく変わるが、一般的には、色再現性を重視するならばIPS方式の液晶ディスプレイを選択するのがベターといえるだろう。ただ、単純にIPS液晶を選べば正しい色を表示できるかといえば、そうではない。今回は「正しい色」を理解するために重要な「色域」について説明したい。 sRGBとAdobe RGB PCのディスプレイにおける「色域」とは、そのディスプレイが表現できる色再現範囲を指す。この色を数値的に規定することで、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Colorbase
not found