４年間、7色だけでUIをデザインし続けた話｜コウノ アスヤ
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
「終了前に、ただ伝えてほしい」――多くの開発者に届きますように。
オープンソースの集まりで1度しか実際にお会いしていませんが、お願いがあります。 富士通アクセシビリティ・アシスタンスというサービスが、2013年8月20日で提供終了します。つまり、あと20日。このソフトは視覚障がい者や色覚障がい者の方がどのように色を見ているかを確認できるツールです。Webサイト制作をしている人なら、今は必要なくても、いつか必要になるソフトです。 8月20日までにダウンロードすれば、8月21日以降もローカル環境で普通に使えるので、なんとかメディアで紹介して頂き、提供終了するまでに、少しでも多くの人に知ってもらいたいと考えています。 紙媒体だと、とても間に合わないのですが、ネット媒体なら、なんとかなるかも！と思い、お願いしたいと思いました。 視覚障がい者や色覚障がい者という障がいに興味がないかもしれませんが、外見では判断できない障がいなので、気付いていないだけなのです。 よか
サイトの背景色を灰色にすると、読者はコンテンツに集中する - PLROG
ブログの背景を灰色に設定すると、読者はコンテンツに集中して読めるそうです。 みなさんは、ブログの背景色を何色に設定していますか？ このサイトは見ての通り、白です。真っ白です。アルティメットホワイトです。 ブログに限らず何らかのものをデザインするとき、 パーツごとに色を設定してしまうと喧騒にあふれたデザインになってしまいます。 われわれデザイナーは、全体の調和を保ちつつ、適切な色を設定していきます。 多くのブロガーはそこまでデザインについて学ばないため、 上記のような調和のとれたWebデザインを実現することは難しいものです。 そこでちょっと耳にしておきたいのが、 背景を灰色に設定すると読者はコンテンツに集中する、ということ。 デザイン知識がなくとも、 背景を灰色にすると多くの読者に読んでもらえるかもしれません。 威張らない“背景”となる色 灰色というと、“色や味が一切無く中途半
配色に悩んだときに、きっと役立つ7つの配色技法【基本】
私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います！ 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色
FM 100 Hue Test
色の正確な認識に影響する要因はたくさんあります。テストの結果が毎回異なる場合は、下記の理由が考えられます。 照明：照明は色覚に大きく影響する要因の一つです。脳が認識する色は、照明色によって左右されていることをご存知でしたか？照明装置などを用いて、常に管理された光源下で色を判断するようにしましょう。 背景色の影響：人間の目が認識する色は、周囲の色に影響されます。この現象を同時対比と呼びます。色を判断する際、常にニュートラル色の環境で行ってください。 目の疲労：私たちの目は疲れやすく、物体を2、3秒以上眺めると目の化学物質が消耗され、間違ったカラー情報が脳に送信されてしまいます。色の目視評価を行う際は、再度観察する前に目を休めてください。 乏しい色の記憶力：どんな色でも、詳細を記憶するのは非常に難しいことです。わずかな色差を効果的に判断するには、サンプルが人の心を動かす程に印象的でなければいけ
普段あまり使わないカラーの組み合わせを効果的に使う方法
Purple bud - EXPLORE - グリーンとパープルの組み合わせがよく見えると思ったことがあるでしょうか？ グリーンとパープルを使う時は、あまり暗くならないようにします。ダークパープルやペイルグリーンは良さそうには見えません。 カラースキームとしてもっとも良いのはあまり暗くないパープルと暖色系のグリーンです。 ブルーとイエロー yellow strings [ad#ad-2] ブルーを使おうと考えた際、一緒にイエローを使おうと思うのは非常にまれです。しかし、この二つを使って作られるエフェクトに驚くでしょう。これらのカラーでウェブサイトをデザインするとき、もしブルーをメインに使うのであれば、もっとも良い見栄えになるでしょう。イエローを多く使うとより明るくなり、サイトがあまりにもブルーが多すぎる時に効果的です。 イエローを使う時は、単に明るいイエローではなく、際立っていない薄いイエ
日本の伝統色 和色大辞典 - Japanese Traditional Color Names
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
北米WEB屋なら誰でも知ってるんじゃないかって思うサイトをまとめてみた - バンクーバーのWEB屋
他人のブックマークって気になりませんか？特に同じ業界の人のブックマークってすごく気になりますよね。 興味本位でWEB屋友人のブックマークしてるサイトを教えてもらうことも多いですが、なんだか狙いすましたように、いろんな人が同じようなサイトをブックマークしていることに気がついて、「あぁー、このサイトはみんな良く見てるのかも」って思ったサイトがいくつかあったんですね。 そこで、WEB屋のブックマークをまとめて、北米WEB屋ならこれはたぶん皆みてるんだろうなってサイトをまとめてみましたので（独断と偏見で）ご紹介。 海外でWEB屋をやる方、いち早く海外のWEBデザイン情報をゲットしたい方、知っていて損はないと思います。 Smashing Magazine まずは王道？Smashing Magazine。このサイトは日本でも有名かなと思います。よくWEBまとめ記事とかで取り上げられてますよね。WEBの
Twitterの脆弱性3連発 - ma<s>atokinugawa's blog
最近僕が発見し、修正されたTwitterの脆弱性を3つ紹介します。 1.旧Twitterの文字列処理に絡んだXSS 去年の夏くらいに、Twitter Web上で € 〜 ÿ の文字参照が含まれるツイートをXMLHttpRequestで読み込んだ際に表示が乱れるという問題に気付き*1、その時はこれは脆弱性には繋がらないだろうという判断をしたのだけど、今年の4月になって改めて調べたところ貫通しました。 表示が乱れるというのは、€ 〜 ÿ の文字参照が含まれるツイートがあると、一部の文字が\XXXXの形式に化けたり、ツイート周辺の「"」が「\"」になったりするものだったのですが、今回は「"」が「\"」になる点が脆弱性を発生させていました。 この条件でXSSさせようと思ったら、ツイートを細工してURLや@や#などオートリンクが作成される部分にうまいことイベン
カテゴリー別配色アイデア100
2017年6月30日 色彩 配色によってそのデザインの印象は大きく変わると思います。色は大切な要素のひとつですね！ということで、色の持つ印象別に配色アイデアをずらりと並べてみます。配色はおなじみ（？）のCOLOURloversから、「これは！」と思うものを選ばせて頂きました。素敵な配色がいっぱいのこのサイト、ぜひ覗いてみてください！また、今回紹介するのはあくまで一例ですので、自分なりにアレンジしてみるのも楽しいと思います。サイトの雰囲気にあう配色を探してみてください。 ↑私が10年以上利用している会計ソフト！ 配色に関するおすすめサイト COLOURlovers 色をテーマにしたコミュニティサイト、COLOURlovers。自分の考えた配色を登録したり、お気に入りの配色を保存しておくことができます。今回はこちらから配色アイデアを選びました。iPhoneアプリは「ColorSchemer」と
Web上の膨大な画像に基づく自動カラリゼーション - A Successful Failure
2010年11月03日 Web上の膨大な画像に基づく自動カラリゼーション Tweet 以前『Web上の膨大な画像に基づく自動画像補完技術の威力』において、Web上の膨大な画像から欠損部分を自動的に補完する手法*1について紹介した（図1）。 図1：Scene Completion Using Millions of Photographs これは、Flickr等から大量にかき集めてきた画像から類似度の高い画像を自動的に抽出し、欠損部分にハメ込むことで違和感の無い補完画像を生成するアプローチであり、そのアイデアと、生成される補完画像のクオリティが話題になった。素材の量が質に変化する、まさにWeb時代に適したアプローチである。 本エントリでは同様の手法を用いて、失われた色を取り戻すカラリゼーション(colorization)について紹介したい。カラリゼーションとはコンピュータを用いたモノクロ画像
国産限定・カラー選定、配色支援などに役立ちそうなカラーツールいろいろ
カラースキーム、配色関連のツールの 大半は海外サイトのものです。僕も海外 のサイトを利用していますが、やはり 日本語の方が良いよねという方も少なく 無いかと、ふと思いましたので国産の サイトでカラー選定、配色支援に役立ち そうなツールを探してみましたのでシェア。 海外のは海外ので似たような機能のカラースキームツールばかりにもなっているので国産に目を向けてみるのも良いかもしれませんよ。ツールの前に配色を学びたいという方はwebデザイナーの色彩スキルを磨くエントリーまとめというエントリをご参照ください。 NIPPON COLORS – 日本の伝統色 まだ出来たばかりのツール。和の色専門ツールですよ。デザインも使用感もかなり素敵です。環境によってはうまく表示されないかもです。 NIPPON COLORS – 日本の伝統色 色サンプル(色見本と配色) もっと評価されて欲しいツール。明暗や、系統でカ
色覚障がい者に配慮したWebサイトの作り方
2017年4月11日 Webサイト制作, アクセシビリティ, 色彩 今持ってるプロジェクトの中で、視覚・色覚障がい者にも配慮したWebサイトの制作があります。視覚障がい者向けのサイト制作についてはいくつか記事を発見できたのですが、色覚障がい者に向けたWebサイト制作についてはなかなかヒットしなかったので、断片的に読んだものを記事にまとめました。参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 追記: 一部表記の仕方を変更しました。 色覚障がいについて 目の、色を認識する細胞の変異で、色の識別が異なることを「色覚障がい」「色覚異常」と呼びます。色覚障がいといってもいろいろな種類があり、ここでは人口の多い赤系統や緑系統の色の識別が困難な、赤緑色覚異常の場合について書いてみます。 困難な点としては 灰色だと思ったらピンクのシャツだった 焼肉の際、生肉と焼けている肉の区別がつきに
Web上で最も強い力を持つ色は？
下の画像は有名なサーチエンジンからポルノサイトまで、あらゆるコンピューター関連の会社のロゴを色別にまとめたものです。 こうして見ると、同じカテゴリーのトップブランドは似た色のロゴを使う傾向にあるような気がします。紫のロゴが少ないのは何かわけがあってのことなのかな？ ランキングの上位2社はロゴにレインボーを採用していますね。 さて、何か傾向を発見できましたか？ [Colourlovers] Jesus Diaz（原文／あんね）
色の組み合わせでもう迷わないためのカラーセオリー | ライフハッカー・ジャパン
Webデザインでも企画書でも、色使いや色選びというのはなかなか悩ましいものです。デザインブログ「Before & After」に、デザインのプロでなくても上手な色選びができる、PDFのカラーセオリーのパンフレットがありました。 そのパンフレットによると、色相、濃淡、カラーパレットに関して少しでも知識があると、色の組み合わせがグッと良くなるということです。写真周辺に持ってくる色を上手くコーディネートするには、ちょっとした芸術的＆科学的センスと、ちょっとした色に関する知識があれば十分。全25ページのパンフレットを読めば、なんと完璧な色選びができるようになるそうです。 パンフレットの中では、まず写真のデジタルデータから自然なカラーパレットを作成する方法が載っています。そのカラーパレットの中から、ポイントとなる色を選び、寒色系や暖色系、トーンや色相などを揃えながら、自分好みに組み合わせていきます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
自然をイメージさせる配色のカラースキーム | Web カラー 配色パターン 一覧リスト | iso.labo