Magic UI50+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. Perfect companion for shadcn/ui.
４年間、7色だけでUIをデザインし続けた話｜コウノ アスヤ
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
カラーユニバーサルデザインとは？ | DICグラフィックス株式会社
現代社会では、公共施設の案内表示・工業製品・情報機器・印刷物・報道・教科書など、ほとんどのものがカラーで表現されています。しかし、色の見え方には個人差があるため、人によっては一部の色の組み合わせが区別しにくく、不便さを感じるケースもあります。こうした背景から、多くの人が等しく情報を認識できる配色を用いたデザインが社会的に求められており、鉄道の路線案内図や災害時の気象情報の表示をはじめ、公共性が高く安全性に関わる分野を中心に見分けやすい配色やデザイン上の改善がなされています。このような、色覚の多様性に配慮して、より多くの人に利用しやすい製品や環境、サービス、情報を提供するという考え方を「カラーユニバーサルデザイン」と呼びます。 カラーユニバーサルデザイン推奨配色セット ver.4 DICグループは、2007年より東京大学 伊藤啓准教授監修のもと、一般社団法人日本塗料工業会、石川県工業試験場、
UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？ それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇
アートディレクター吉田ユニさん独自の感性から生まれたミッキーマウス＆ミニーマウス - UT magazine
ディズニーが誇る世界のアイコン、ミッキーマウスとミニーマウス。離れて見るといつもの姿、でも近くで見ると...? アートディレクターの吉田ユニさんがデザインしたコレクションは、大胆な発想と緻密な計算が織りなす、夢の世界だった。 「これだけ全世界に知られていて、ひと目でわかるフォルムは強み。その特性を生かして、できるだけ見たことがないミッキーを目指しました」。吉田ユニさんが作り出したのは、見たことのある造形なのに、まったく見たことがない表現のミッキーマウスとミニーマウス。リボンを形作るのはスカートをはいた女性たちの姿だし、黒いシルエットにはハシゴやプードルが潜んでいる。「人物や動物とかフルーツや花、植物のような、何か命が感じられるものが入っているのが好き」という作風が、新感覚のミッキーマウスたちを誕生させたのだ。ほのかな違和感が好奇心を掻き立てる作品の数々。隅々まで眺めれば、そのたびに新しい発
【入門】非デザイナーのための「デザインのルール」
僕はデザイナーとして、これまで多くのインフォグラフィックスやスライド形式の記事を作ってきました。その関係で、一般的なビジネスに使うスライドについて聞かれることがよくあります。そんな時の回答は大抵の場合、次の3つです。 ・情報を減らすこと ・ルールを守ること ・装飾をしないこと こう答えると、見た目のカッコ良さを期待していた人には、がっかりされることもあります。（笑） でも、ビジネスの資料で、最も優先すべきことは「わかりやすさ」です。そして、資料のわかりやすさに、装飾的なカッコ良さは関係ありません。むしろ、余計なあしらいが、わかりにくさを生んでしまうことも多いのです。 では、「資料にデザインは必要ないのか？」というと、そうではなくて、資料のデザインとは、グラフィック的な装飾ではなく、（視覚的に）情報を整理することなのです。 一般的に、デザインをフィニッシュワーク（清書や化粧のようなもの）と考
6個の南京錠でがちがちにロックされたこの鍵…よく見ると面白い仕組みになっていた : らばQ
6個の南京錠でがちがちにロックされたこの鍵…よく見ると面白い仕組みになっていた こちらは、とある鉄筋の「大はり部分」を固定してあるところの写真だそうです。 南京錠6個で複雑にロックしてあるので、解除が大変に見えますが……。 よく見ると、ある面白い仕組みが施されているのがわかるでしょうか？ 写真を90度横にして拡大したもの。 こっちの端にもあっちの端にも、計6個の南京錠が取り付けられています。 ところが不思議なことに、実は1個を外せば開くことができます。しかもどの南京錠を選んでもいいのです。 セキュリティが目的ならもっと大きな錠前にすればいいのに、いったいなぜこんな仕組みになっているのでしょうか？ 海外掲示板のコメントをご紹介します。 ●いろいろなゲートが、この仕組みでロックされているのを見たことがあるよ。特に道路へのアクセスでよく見かける。 複数の公益事業の会社が開けられないと困るので、み
俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
フォームをデザインするときのポイント
前提 自分が嫌だと思う項目を作らない。 曖昧を許容できるようにする。 なぜその項目が必要なのかを説明する、もしくは予想できるようにする。 倫理的に、そして法的に問題ないものか確認する。 HTMLの仕様とブラウザの挙動を活用する。 システムの都合が優先される場合があるが、なるべくそれに引っ張られないように工夫したい。 分割しない 姓名、郵便番号、電話番号、年月日、時分など、入力フィールドが分かれていることがあるが、なるべくこれを避ける。フォーカスの移動が、面倒だからだ。なるべくユーザーの手間を減らしたい。 フォーム送信後のデータベースの都合や、事務処理、または運用にて必要不可欠である場合を除いて、分割しないようにしよう。 年月日や時分などは <input type="date"> <input type="time"> <input type="datetime-local"> のように標準
デザイナーじゃなくても知っておきたい色と配色の基本 | knowledge / baigie
色は私たちの身近に存在する視覚要素であり、日々の生活や行動に多大な影響を与えています。しかし、美術やデザインの専門教育を受けない限り、これほど身近な色を体系的に学ぶ機会はほとんどありません。 近年、ビジネスの現場でもデザインの重要性がよく語られます。ビジネスレイヤーで語られるデザインは課題解決を意味する広義のデザインであることも多いですが、その概念がプロダクトに落ちる段階では、ビジュアルデザインのような狭義のデザインも考えていかなくてはなりません。自分自身がデザイナーではなくとも、デザインを評価・判断すべき立場になることも、当然あるでしょう。 デザイナーでなくても、仕事の中で色を扱うシーンは他にもあります。PowerPoint等を使ってビジネス文書を作成をするとき、誰もが色を用いるでしょう。色の知識があれば、より効果的なドキュメント作成が可能になります。 このように考えると、色はデザイナー
GitHub Dark Mode is Too Dark - blog.karenying.com
GitHub Dark Mode is Too DarkIf you hate it too this is why. Using color theory to show why GitHub dark mode is disappointing Shared on Hacker News and Twitter This past week, GitHub released a long-awaited feature — dark mode. Like many devs around the world, I was hype. In 2020, a dark mode toggle for anything remotely related to tech seems like a requirement. So I flipped the switch. My immediat
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コピペで簡単に使える！CSSで作る動くトグルアニメーションデザイン14選【チェックボックス/ラジオボタン/スイッチ】
れきちず
Spindle UI | Figma
Scrollbar.app
Iconic — Free “do wtf you want with” pixel-perfect icons