サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
noteのロゴがリニューアルされてから、プライマリーカラー（サービス内のベースとなるカラー）を緑色から黒色に変更するプロジェクトが進行していました。 右上の投稿ボタン、中段のフォローボタンの色が違いますnoteのベースとなる色を変えるプロジェクトは、どのように進められたのでしょうか。この記事では、オープン社内報として、CDOの宇野さんとデザインエンジニアの臼井さんにお話を伺いました。 オープン社内報とは？ 一般的には社員しか見ることのできない「社内報」をだれでも見られるように公開することで、会社の中の様子を感じとってもらう記事企画です。本日の担当：デザイナー zackie プライマリーカラー変更のきっかけ──このプロジェクトが始まったきっかけを教えてください。 宇野さん プライマリーカラーの変更は、2段階にわけて進めています。まずは2022年12月にロゴをリニューアルしたタイミングで、プ
映像制作において「シーンを制作する設計図」ともいえる絵コンテ。 講義の第1回目は、この絵コンテを制作するにあたっての経験則に基づいたルール、用法について「ヱヴァンゲリヲン新劇場版」監督・鶴巻和哉氏に語っていただきました。 とりあえず、始める前に一つ。僕は正式な絵コンテの描き方というものを習ったこともないし、入門書で勉強したこともないんです。完全に、見よう見まねだけなんですね。なので、映画学校などで教えていることとは、ずれていることもあると思います。ひょっとしたら、完全に間違っていることもあるかもしれません。まあ、それくらいのものだと、理解した上で聞いてください。 絵コンテの描き方といっても、最小限のルールがあるくらいで、後は自由です。 同じ脚本から絵コンテを起こしても、今石君（注1）、大塚さん（注2）、庵野さん（注3）では、全く違うものが出来るはずです。僕自身が描いたとしても、今日描いたも
「このボタンは目立たせたいから、オレンジにしよう！」 そう思ってデザインすると、「このオレンジはアクセシビリティ未達です」と指摘が入る。 目立つ色を使ったのに、アクセシビリティに達していない。そんなちょっと腑に落ちない経験をしたことないでしょうか。 ここではデザイナーさんがひっかかりやすいwebアクセシビリティ問題No.1（個人調べ）といえる緑オレンジ問題を詳しくみていき、解決方法を考えます。 「緑オレンジ問題」とは冒頭のように、ボタンを目立たせようとしてオレンジ色を選んだ瞬間、アクセシビリティ上で問題が発生する可能性があります。 ↓ 以下のボタンをご覧ください。 良い感じのオレンジだと感じる人が多いかと思います。 しかし、このオレンジはアクセシビリティ基準をクリアしていません。 （ここでいう「アクセシビリティ基準」とはWCAG2.2レベルAAを元にします。初心者の方は「なんかみんなが基準
記事の中で映画、ゲーム、漫画などのネタバレが含まれているかもしれません。気になるかたは注意してお読みください。 ジークアクスを見てきた。 以下、完全にネタバレなので、視聴した人だけ読み進めることを願う。 －－－－－－－－－－－－－－－－－－－－－－－－ 物語のレールが切り替わる瞬間 冒頭、テレビ版機動戦士ガンダム第1話というレールの上を滑りながら、ムサイやザクが新しくリファインされて出てくるので「ははあ、ビックリしたけど、これは最初のガンダムを繰り返すのだな」とミスリードされる。 異なるのは、ジーンの暴走が無かったことだ。1stガンダムで「シャア少佐だって、戦場の戦いで勝って出世したんだ」「手柄を立てちまえば」と彼は言う。ルウム戦役で５隻の戦艦を沈めたシャアの武勲に、憧れたのだ。 この部下の暴走を目にして、シャアは「認めたくないものだな、自分自身の、若さ故の過ちというものを」と言う。彼はそ
RefactoringUIで公開された「Building Your Color Palette」より許可をもらい、日本語抄訳しています。 これまでに以下のように鮮やかな色の配色ツールを使ったことはあるでしょうか？ ベースとなる色を選び、「補色」や「類似色」などいくつかの配色オプションを調整すると、ホームページを構築するために使用すべき５つの色見本が表示されるというものです。 完璧な配色を選ぶためのこの計算された科学的アプローチは、とても魅力的に見えますが、実はあまり役に立ちません。 自分のサイトをこんな風にしたのなら話は別ですが… 実際のホームページに必要な配色 ずばり、５つのHEXカラーコードだけでは何も作れません。 実際にホームページを制作するには、もっと包括的な色のセットが必要です。 インターフェースにはこれだけたくさんの色が使われている 良いとされる配色カラーパレットは、3つのカ
はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。 既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。 今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多かったため、自分が知らない誰かの知見に助けられたように、微力ながらコミュニティに貢献するべく、未完の状態でお見せすることにしました。 Framework byFigma登壇資料 後でFigma Communityにも掲載します シチュエーションにおける最適解繰り返しますが、今回説明するような煩雑で、複雑で、面倒な、プロセス
CIE LCh カラーモデルベースの色相環カラーピッカーを作りました。 https://luncheon.github.io/lch-color-wheel/ この記事はその経緯です。 HSL 色表現と色相変数CSS で使える色表現の 1 つに HSL カラーモデル があります。 HSL では色相（Hue）、彩度（Saturation）、輝度（Lightness）の 3 軸で色を表現します。 色相をCSS カスタムプロパティ（変数）にすれば、彩度と輝度を固定して色相だけ変えることが簡単にできます。 .btn { background-color: hsl(var(--hue), 100%, 60%); border: 2pxsolid hsl(var(--hue), 100%, 40%); } .btn:hover { box-shadow: 0 0 8px hsl(var(--hu
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー～」シリーズでは「知っているとちょっと得するデザインTIPS
このFigmaプラグインは何？このプラグインはメジャーなカラーパレット設計のツールからExportできるJSONを、FigmaのVariablesに取り込むプラグインです。2023年11月11日時点で対応しているのは下記です。 Primer Prism Huetone それぞれのツールの補足も一応書いておきます。 Primer Prism PrismはGitHubのデザインシステムであるPrimerのチームが開発したツールです。HSLの値あるいはカーブを操作して色を決められます。また同じ色相の組み合わせをWCAG 2系のコントラスト比を元に評価できます。彼らの設計に基づくツールなので、柔軟性はないですがシンプルなツールと言えます。 Exportする方法Exportは画面の右上にあるExportからできます。表示されるJSONをクリップボードにコピーしてください。Figma Variab
こんにちは！atama plus プロダクトデザイナーのヌマタ @n_m_ta です。 この連載は、スタートアップのインハウスデザイナーたちが、デザインシステムを1から構築する様子をまとめ、誰かの参考になればという趣旨ではじめました。デザインシステムの構築に至るまでの経緯や、プロダクトの概要についてはこちらをご覧ください。 前回は、ムードボードを作りました。今回は、コントラスト比を意識しながら色を決めた話についてお伝えします。本記事は、2019年に実施した取り組みをまとめたものです。 これは atama plus Advent Calendar2023 とデザインシステム Advent Calendar2023 の5日目の記事です。 コントラスト比が足りないムードボードを作り、言葉と見た目の両面から「らしさ」の認識合わせができました。次に、私たちは色を決めることにしました。このタ
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
