Generate beautiful color palettes for your design system.
Generate beautiful color palettes for your design system.
ドライバー向けに設計するへようこそ。これは、次の 2 つの自動車向け Android システムを扱うアプリ デベロッパーと自動車メーカー向けの設計ハブです。 Android Auto: 対応する自動車の画面に投影されるスマートフォン ベースのインフォテインメント システム Android Automotive OS（AAOS）: 自動車メーカーがカスタマイズして自動車に組み込み、（GAS パートナーの場合は）Google Automotive Services（GAS）と統合できるインフォテインメント プラットフォーム このサイトでは、これらのシステムの設計ガイダンスを提供しています。（技術的なガイダンスをお探しの場合は、Android for Cars の関連ドキュメントのリストを使用して、適切なソースを見つけてください）。 ニーズに合った以下のトピックをご覧ください。または、新機能をご
こんにちは、Holmesでデザイナーをしています竹内です。 この記事は Holmes Advent Calendar 2020 - Qiita 22 日目の記事です。 今回は、私がデザインをする上で、思考の基準となっている、ディーター・ラムスの「グッド・デザインに必要な10の原則」について、自分の考えを交えながら語っていきたいと思います。 ディーター・ラムスとは グッド・デザインに必要な10の原則 語ってみる 1. Good Design is innovative. 2. Good Design makes a product useful. 3. Good Desgin is aesthetic. 4. Good Desgin makes a product understandable. 5. Good Desgin is unobtrusive. 6. Good Desgin is
こんにちは、タイミーのプロダクトデザイナーの横田です。 誰でもFigmaからデザインをAIで正確に実装することができるツールをつくりました。 最近、AIを活用した開発フローが注目されています。 デザインデータから直接コードを生成したり、レビューを自動化したりといった試みも増えてきました。しかし、FigmaのデザインデータをLLMに正確に理解させるには、まだ工夫が必要だったり、ツールが制約されたりするのが現状です。Figmaでは公式のMCPのような仕組みはまだありません。 AIを活用した取り組みをやっている会社はちらほらあるけど、うちでやるにはどうやれば…？という方は多いのではないかと思います。 そこで今回、Figmaのデザインノード情報を詳細なJSON形式で出力するプラグイン「Figma Raw」を開発し、公開しました。 一言でいえば、FigmaのデザインをいろんなAIでコーディングできる
historydesignersdevelopersaboutget rid of grid“Blasphemy, I need structure and order!” The web is good at these things, just not in the ways that designers have been accustomed to working. We'll take a look at how we got here and how we might change our perspective. Let's think outside of the grid and allow other guidelines to provide a comprehensive layout. History of the design grid Back to top
Build your own bundle!Our discount kicks in as you go. Just add items to your cart and watch the price drop. The more you grab, the more you save — up to 40% off with no codes, no hassle. アイスランド (ISK kr) アイルランド (EUR €) アセンション島 (SHP £) アゼルバイジャン (AZN ₼) アフガニスタン (AFN ؋) アメリカ合衆国 (USD $) アラブ首長国連邦 (AED د.إ) アルジェリア (DZD د.ج) アルゼンチン (USD $) アルバ (AWG ƒ) アルバニア (ALL L) アルメニア (AMD դր.) アンギラ (XCD $) アンゴラ (USD
STUDIOのアニメーション設定にはループさせる機能がありませんが、2023年1月に追加されたカルーセルの自動再生機能を応用することで、一定速度で要素が無限ループするデザインを実装することができます。...
マスターカードはリブランディングの際に、ロゴから「Mastercard」という言葉を省くこと発表し、話題を呼びました。しかし、この決定は、ブランドが自らを表現する方法においてより広範なトレンドの兆候なのか、それとも単にマスターカードが変化する市場に対処しているだけなのか、どちらなのでしょうか？ ワードマークを持たないロゴとは ワードレスなロゴを採用するブランドはマスターカードだけではありません。 例えば、Apple、McDonald’s、Starbucks、Nikeなどです。企業がビジネスと顧客関係の急速なデジタル化に適応する中で、私たちはデジタルエクスペリエンスに焦点を当てたリブランディングに方向性をシフトしていく企業をいくつも見てきました。Mastercardの具体的なケースでは、そのデジタル化の中に、名前のルーツである物理的なクレジットカードが存在しない未来も含まれています。それは、
こんにちは、iDID Magazine編集部です。先週ぐらいからめっきり寒くなってきましたね…。そして師走。あらゆるところで忘年会が行われていることと思います。もう少しでお仕事納め、もうひとふんばりですね。お仕事が公開されたら、見にいきますね。 これを書いているのは12月21日。ちょっと遅くなってしまいましたが、これが今年最後のまとめサイト記事になりました。これらのサイトがリリースされたのは11月なので、秋から冬に変わる季節感を楽しめるかもしれません。 今回は「秋冬の落ち着いた感じ」と「ポップでにぎやかなカラー」が混在していますね。いずれにしても変わらないのは、どれもがすてきで、最高なサイトばかりということ。 あたたかいコーヒーでも飲みながら、それではいってみましょう。 11月、話題だったサイトです。 1. 404 NOT FOUND｜SHIBUYA SAKURA STAGEきづいたら「遊
HEX Contrast Ratio Calculator HEXの2色（前景色と背景色）のカラーセットからコントラスト比を計算し、WCAG2.2が定める基準を達成しているかを検証します。 コードとの変換
本書は Figma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、Brand Guidelineに則った内容となっております。(Brand Guideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォン
Figmaを絡めて新たなデザインシステム構築を手伝う仕事が生まれそうなので、調査がてらFigmaに公開されているデザインシステム系ファイルの情報をまとめました。 なお、海外のデザインシステムは大量に公開されており、特に有名企業のシステムはどこの記事でも紹介しているので、この記事では日本で公開されているFigma関連のファイルに限定して取り扱います。 検索する限りでは意外と日本企業が公開しているファイルは少ない。 なお、ここに掲載されている以外で公開されているファイルがありましたら@kgsiまでご連絡いただけると嬉しいです。 FALCON by SPEEDA コンポーネントごとにページを分けている VariantsはDefaultやLargeなどアッパーキャメルケースを採用 *書体はHiragino Kaku Gothic Proを指定 SmartHR UI by SmartHR 全コンポー
A最低限の基準です。この基準を達成しないとWebサイトを閲覧できない人が存在しうるとされます。 AA望ましい基準です。この基準を達成すればWebサイトの閲覧が困難なケースは多くないとされています。 AAA発展的な基準です。この基準を満たすと最も閲覧しやすいWebサイトと言えます。
本日（2023/2/14）、ついに Firefox でコンテナクエリ（container query）に対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ @containerを使うと任意の要素を基準にできるので、「A要素の横幅が 500px 以下のとき、子要素のレイアウトを変える」などが手軽に実現できます。 とくにコンポーネントベース開発が主流の現在においては、コンテナクエリをマスターすることで、より柔軟でラクなレスポンシブ対応が可能になります。 本記事では、コンテナクエリの基本、メリット、デモまでをできるだけ詳しく解説し、コンテナクエリを理解することを目標としま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
