デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。 デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。

UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.

Material Design Google I/O 2014 で新しいデザインガイドラインが発表されました。 Google Design その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。 ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。 Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。 イントロダクション まずはじめに Material Design の概要です。本文をそのまま引用します。 We challenge

この記事では、商用利用かつ無料ダウンロードできるイラスト素材、サイトをまとめてご紹介します。 資料作成やサイト作成などあらゆる場面に重宝するフリー素材を揃えています。 国内と海外サイトに分けてまとめています、用途やデザインに応じて、お好みのイラスト素材を見つけてみてはいかがでしょう。 このリストは随時アップデート予定です、ブックマークしておくと便利です。 コンテンツ目次 1. 国内の無料イラスト素材サイトまとめ（56個） 2. 海外の無料イラスト素材サイトまとめ（50個） 3. 当サイト紹介の人気イラスト素材まとめ 4. イラストを活用したデザイン参考例 5. イラスト素材編集のおすすめツール 国内の無料イラスト素材サイトまとめ ここでは、日本生まれのイラスト素材サイトをまとめています。 無料なのはもちろん、商用利用OKで高品質なイラスト素材が揃います。 商用利用可能な素材を中心に紹介して

What we do CREATING VISIONSBUILDING BRANDSGOING DIGITALCONNECTING EXPERIENCESMOVING STORIESVisions that become a compass for growthVisions that unite all towards a shared directionVisions that inspire collective action Brands that cultivate long term relationshipsBrands that communicate an organization’s purposeBrands that are empowered by design Digital touchpoints that open new opportunities for

日頃からTEDなどの動画サイトを著名人のデザイン思想や日々の取り組みを知る場として利用されている人は多いと思います。以前Goodpatch Blogの記事でも幾つかの有益なTED動画を紹介させていただきました。 1. デザインあ デザインあはNHKで毎週土曜と木曜の午前に放送されている知育番組です。キャッチコピーは「こどもたちの未来をハッピーにする「デザイン的思考」をはぐくむ」となっておりますが、大人でも楽しめる内容になっています。 番組紹介ページにもある通り、デザインとは人とモノ、人と人との繋がりをより良くするためのプロセスというまさにUXの本質を説くような番組になっていて、一見難しいと思われるUXの重要性を子どもたちにも分かるように有名クリエイターによって緻密に計算された音楽と映像を使って感覚的に説明しているのがこの番組の特徴です。 個人的にはこの番組を見て育った子どもたちがどういう大

これは designing plus nine Advent Calendar 19日目の記事です。 こんにちは。ritarと申します。 今年の10月頃、YouTubeに大きいデザイン変更がありました。 アイコンの変更、角丸やレイアウトなど全体的に一新されているのですが、中でも自分が仰天したのは「アンビエントモード」という新機能です。 アンビエントモードこのモードをオンにすると、動画の下側のUI領域が、まるで動画部分から光が漏れているかのようにじんわりと色づきます。 これを見たとき自分は度肝を抜かれました。なんたってUIの領域にコンテンツの色が侵食しているのです。 これを踏まえて、最近UIと色について考えたことを、UIデザインの歴史を振り返りながら記していきます。先に要点を言うと、UIはどんどん「無色透明」になっていくと考えます。これは「技術が生活に浸透することによってUIは存在感を減らし

デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。 更新情報2023年12月26日 [バージョン1.4.1]スタイルやコンポーネントの修正・更新を行いました 2023年10月18日 [バージョン1.4.0]スタイルやコンポーネントの追加・修正・更新を行いました 2023年8月31日 [バージョン1.3.4]スタイルやコンポーネントの修正・更新を行いました 2023年7月31日 [バージョン1.3.3]新規コンポーネントを追加、スタイルやアセットなどについて修正と更新を行いました 2023年6月29日 [バージョン1.3.2]コンポーネントを追加、テンプレートやガイドラインの一部修正と更新を行いました 2023年6

LINE Seed Licensing All content of LINE Seed is copyrighted material owned by LY Corp. All fonts are released under the SIL Open Font License, Version1.1. This license is also available with a FAQ at: https://scripts.sil.org/OFL You can use them for any personal or commercial purposes. However, the software font files themselves cannot be sold by the other parties other than LY Corp. For commercia

The State of the IPO Market In an episode of The Markets podcast, Lizzie Reed, global head of the equity syndicate desk in global banking and markets, discusses the strong start to the initial public offering market for 2024 and what it says about investor sentiment and the economy overall.

昭和の雑誌広告を中心に

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー

爆速のアイコン検索サイトを作ったので、遊んでみてください。 (1) まずは自分が使いやすいアイコン検索サイトを作りたかったので作りました。(2) 様々なアイコンを爆速で横断検索し、サクッとアイコンをコピーできるようにしました。単純ながら意外とその部分が面倒なサイトは多い気がします。(3) また応用とメンテがしやすい実装にして、非常にサポート範囲の広い DB を GitHub Pages 上で構築しました。公開時点では 120+ のアイコンセットと、130,000+ のアイコンをサポートしており、サポート数も観測範囲では No.1 です。 開発動機 アプリ/サイト開発ではまずお世話になるであろうアイコン。私はこれまで Material Icons と Bootstrap Icons ばかり使っていました。これは検索が面倒だったからです。検索が面倒だと知名度の高いものだけに閉じてしまうので、良

新たな一年を前に引っ越しを終えたけど、新しい部屋がなんだかしっくりこない……そんな人は、「ジャパンディ（Japandi）」を参考にするといいかもしれない。 ジャパンディとは、「Japan」と北欧を意味する「Scandinavia」の造語。日本のミニマリズムと、北欧のヒュッゲに代表される居心地のよさを掛け合わせたインテリアのことである。2021年からじわじわと流行の兆しを見せ、同年だけでPinterest（ピンタレスト）の検索数は世界で2倍に増加した。今年もトレンドは続きそうだ。 「和モダン」として馴染みがある人もいるだろうが、ジャパンディのポイントはいくつかある。まず、大きなベッドやダイニングテーブルなど欧米のライフスタイルはそのままに、竹や石、木、和紙などの日本らしい素材を取り入れる。これらは、持続可能性の観点からも注目が高まっている素材だ。 次に、ニュートラルな色味を取り入れてみよう。

1997年生まれ。大学院で教育学を勉強しつつ、チェーン店やテーマパーク、街の噂について書いてます。教育関係の記事についても書きたいと思っているが今まで書いてきた記事との接点が見つからなくて途方に暮れている。 前の記事：マクドナルドの看板には2種類ある ＞ 個人サイト Note 店内に多く貼られたPOP。独特の主張の強さがある。この感じがドンキらしいのだ。 インタビューに伺った松本和史子さん。ドンキ練馬店の専属POPライターで、練馬店の開店当初からPOPを書き続けているプロフェッショナル。 さっそく話を聞いてみよう。 メモの字がドンキの文字だった 松本　今日の質問にお答えしたものをメモにしたんですけど 谷頭・林　おお！ メモがドンキの文字だ！ 谷頭　すでにメモの字がドンキの文字ですね、すごい！ 松本　あ、それは全然意識していなかったです（笑） ドンキの文字って独特で、この文字を書くための研修

ページコントロール（ドット）、ページトップの「送信」、プラス（＋）アイコン、並べ替えアイコンの4つは、テストでユーザビリティ上の問題を引き起こすことの多いiOSデザインパターンである。 4 iOS Rules to Break by Aurora Bedford, Raluca Budiu, Kara Pernice, and Amy Schade on July 9, 2015 日本語版2015年8月31日公開 巨大ソフトウェア会社（たとえば、AppleやMicrosoft、Google）はユーザーとデザイナー双方のためにデザインガイドラインを作成している。 おかげで、デザイナーや開発者側は、恵まれた条件のもとで、きちんとしたものになることが期待できるインタフェースの作成を始められるようになり、まったく新しいUI要素を考案する（そしてテストする）必要がない。 一方、ユーザー側も、すべての

Rhizomatiks ライゾマティクスは、技術と表現の新しい可能性を探求し、研究開発要素の強い実験的なプロジェクトを中心に、人とテクノロジーの関係について研究しながらR&Dプロジェクトや作品制作を行うクリエイティブチーム。アーティスト、デザイナー、エンジニアで構成され、ハード・ソフトの開発からオペレーションまで、プロジェクトにおける全ての工程に責任を持ちます。また、外部のアーティストや研究者・科学者などとのコラボレーションワークを通じ、カッティングエッジな表現作品、研究を世の中に発表しています。 研究開発を中心にさらなる挑戦を目指す 2006年の設立以降、メディアアート・広告・エンターテインメント・建築・都市開発まで、様々な領域でリアルとバーチャルを横断しながら活動の幅を拡張し、統合的なクリエイティブ力を培ってきた株式会社ライゾマティクス。数多くのプロジェクトやコラボレーションを通じて活

この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では

「フォントの関係性はそんなのだったの！？」リアルに9割の人が気づいていない「游ゴシック」の話 https://togetter.com/li/1662198 のブクマ https://b.hatena.ne.jp/entry/s/togetter.com/li/1662198 わかりづらいとかキョトーンな人が散見されたので、蛇足とは思うけど解説をこころみる。 正直なところ説明として元ツイがいちばんシンプルだと私は思うので、この解説は元ツイが言ってることを別の言い回しで回りくどく言い換えるだけになる。つまり逆にわかりにくいかもしれない。 なお私は発端のツイートのひとではない。善意のいちハテナーである。 さらに言えば私は組版の専門家でもない。仕事で多少フォントを扱う機会がある程度の素人＋毛である。 太字には２種類あるまず、コンピューターの画面に映し出される「太字」には２種類ある。 ひとつは、最