デザインシステム｜デジタル庁
デジタル庁では「誰一人取り残されない、人に優しいデジタル化を。」の実現を目指し、ウェブサービス・ウェブアプリケーションの使い勝手や情報の探しやすさ、アクセシビリティ等の向上に取り組んでいます。 その一環として、「デザインシステム」の構築を推進し、官民問わずすべての方が参照できる形で公開しています。よりよいデザインの普及・啓発に向けて拡充と更新を継続的に行い、あらゆる人がデジタル化の恩恵を享受できる社会に貢献します。 2024年5月30日 デザインシステムのコンテンツは専用サイト「デジタル庁デザインシステムβ版」へ移行しました 専用サイトで、ガイドラインやデザインデータ等の各アセットを案内しています。 イラストレーション・アイコン素材 行政手続きをもっとわかりやすくするために作成した素材集です。どなたでもご利用いただけます。 最近の取組2024年5月 専用サイト「デジタル庁デザインシステムβ
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.10
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第10弾は、デザインの原則とフォントやシャドウに関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Ten. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 近接: 重要なデザインの原則です、上手く使いましょう 2. UIに含まれる要素は常に区別できるようにデザインする 3. 見出しと本文の両方に最適なサンセリフフォント 4. 見出しと本文の両方に最適なセリフフォント 5. フォントの組み合わせを探す時はSuperfamilies 6. シャドウは繊細に はじめに 次の
多言語対応のゲームUI注意点覚え書き - デザイナー脂肪
こんにちは！ドイツに住んでるUIデザイナーのいまがわ (@i_magawa)です。 この記事は「GameGraphicDesign AdventCalendar 2019」の23日目の記事になります。 自己紹介 現在はフリーでUIの仕事をやりつつ、夫婦や育児に関するマンガを描いたりしています。以前は東京でスマホゲームの開発やってました。 こういう記事も書いてます（宣伝）↓ 何の記事書くの…！？ スマホゲームUIのローカライズ対応について今回は書きたいと思います。 いくつか案件関わった気がしたりしなかったりするのでまとめてみました。あくまで日本っぽいゲームを海外対応するときの注意点です！ また今回参考として「ポケモンマスターズ」のUIをよく載せています。 ポケモンマスターズはなんと驚異の8言語対応…！殺す気か！ちなみに私は一切運営と関係ないただのファンです。 海外対応の目標 英語ネイティブの
より良い体験を共にデザインしていくために、オブジェクトベースUIデザインを学んだ話｜鈴木 健一 / PLAID & Ex.STANDARD
プレイドのデザイン・エンジニアリングチームにて、ソシオメディア上野さん、藤井さんを講師に招き、オブジェクトベースUIデザインのワークショップを実施いただきました。 内容について詳しくは触れられませんが、参加する前の課題意識と参加後の気付きを残しておきたいと思います。 なぜやったのかプレイドが提供している「KARTE」では、機能として提供していることが多岐にわたり、いわゆる「タスクベース」になっているのではと感じることが増えていました。 具体的には、画面名や操作手順、操作の起点となるナビゲーションやボタンのラベリングなどで、タスクベースとオブジェクトベースが混在しているように感じていました。 オブジェクトベースUIは、そうした状況に対し一定の秩序を与えながらも、道具としての自由度、ユーザーが学んでいくことによる創造性を発揮できる環境を設計できる可能性があるように思いました。 また、プレイドは
ユーザーが自然と目を向ける、視線誘導を意識したUIデザイン｜Goodpatch Blog グッドパッチブログ
Goodpatch Blogでは、人の錯視を考慮したUIデザインの手法「視覚調整」についてご紹介しました。 視線誘導とは 視線誘導とは、ユーザーの視線の流れを意図的にコントロールするために使われる手法の１つです。UIデザインはもちろん、イラストや写真、映像、漫画などアート・デザイン問わず様々な場面で使われています。 視線誘導を使うメリット 視線誘導を意識することで、ユーザーに見せたい情報の順序を意図的にコントロールすることができます。情報の正しい順序を無意識に導き出すことができるので、ユーザーはストレスなく画面を見続けサービスを利用し続けることができます。 情報認知のための視線誘導 視線誘導には大きく分けて２つの目的があります。 ユーザーに情報を認知させるもの ユーザーの視線移動をサポートするもの 情報を認知させるための視線誘導は、ユーザーが注目している部分から注意をそらし、別の部分に視線
「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた｜Tsutomu Sogitani
大阪の実家に帰った時、リビングのテレビの裏側を見たらAmazonのFire Stick TVが挿してありました。このFire Stick TVをテレビに繋ぐと、Amazonのプライムビデオを観ることができるようになります。 プライムビデオには、Amazonプライムの会員であれば、追加費用を払うことなく楽しめる映画やドラマ、アニメなどが豊富に揃っています。さらに個別に追加金額を払うとほとんどの映像コンテンツを観ることができるという、まさにTSUTAYAキラーなサービスです。 うちのおかんは月に2～3回は映画館に行くほどの映画好きなので、プライムビデオのメインターゲットといえるでしょう。本来ならプライムビデオで映画三昧の毎日を送っていてもいいはずです。 しかしながら、Fire Stick TVを挿しているにもかかわらず、プライムビデオを一度も使っていませんでした。初期設定をした私の弟が一通り使
邪悪なUIチェックポイント - その先へ
ハロー、@seto_hiです。 北海道で避暑をしています。 アプリ開発をしていると様々なコンバージョン率がKPIになることは多いですが、誠実さを欠いたUIを作ると数字がよく伸びることが稀によくあります。 そういったものは一時的な利益には繋がりますが、長期的な利益には繋がらないと考えています。 自分が今後そういったUIを作らないための予防線としてこの記事を書きます。 不利益の排除 ・不利益な動線を奥深くに隠す ・ユーザーが設定を変更する手間を増やす ・「メールマガジンの解除にはメッセージを送ってください」 ・「メールマガジンの解除にはログインが必要です」 ・過度に警告を表示する ・「この設定をOFFにするとアプリが正常に動作しなくなる可能性があります」 ・「本当にOFFにしてよろしいですか」 ・不利益な動線を目立たなくする ・不利益な動線のシグニファイアを消す ・スマートフォンならスクロール
Material Designを語りつくす！「Google I/O Extended 2018 Shibuya」資料まとめ｜Goodpatch Blog グッドパッチブログ
ナレッジ・ノウハウ Material Designを語りつくす！「Google I/O Extended 2018 Shibuya」資料まとめ Googleが毎年開催する開発者向けのカンファレンス「Google I/O」。エンジニアなら、参加したことがある方も多いのではないでしょうか。 もちろんGoodpatchからも、毎年メンバーが参加しています。 2017年のレポート：Google I/O 2017レポ &「How Well Do You Know the Web?」紹介 2016年のレポート：Google I/Oに行ってきた！グッドパッチ目線レポート 2017年まではエンジニアのメンバーが参加していましたが、2018年はUIデザイナーのメンバーが参加。現地で得たナレッジを日本のデザイナーコミュニティに還元するべく、報告会「I/O Extended 2018 Shibuya (Mate
つよいUI - transitkix design log
…というものを最近考えていました。「画面デザインのOKももらったし、私の仕事は終わり！あとはエンジニアに指示書を渡すだけ」と一息ついた時にこそ、改めてデザインを見つめなおすべきです。 つよいUIであるための7つの視点 1.本来、そこにあるはずの情報がない場合はどうなりますか？ リストUIで載せる情報が0件、文章が空っぽ、画像がない時など 2.表示する要素が想定よりすごく多い/すごく少ない場合はどうなりますか？ 数字の桁数、文章の行数、文章が入りきれない場合は文中・文末のどこを省略すべきか…など 3.ユーザーさんの立場によって、表示要素に変化はありませんか？ ゲストとログインユーザー、無料会員と有料会員…など 4.ロード中、もしくはロードされるまで何が出ていますか？ 通信中の表示、読み込み中の画像エリア…など 5.予期せぬエラーが起こった時、画面はどうなりますか？ 通信エラー、リンク先のコン
これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
UXとUXデザインの概念｜Toshiya Sasaki
はじめまして。デザイナーのSasaki（@toshiyassk）です。 Fintech企業ではたらきながら、UXデザインやサービスデザインを軸とした研究をしたりしています。 先日会社でUXについての勉強会（初心者向け）をさせていただく機会があったので、UXとUXデザインの概念についての資料の一部を記録しておきます。（参考文献に基づいた内容ですが、表現を変えている部分もあります。） UXとは？UXの定義にはさまざまなものがあるが、決定的な一つの定義はない 2010年に世界のUX研究者30名によってUXの定義について議論され、UXを一つに定義する代わりにUXをとらえる視点が明確にされた。 27件のUXの定義が All About UX に掲載されている。 UXをとらえる3つの視点① 主観的評価 ユーザーが製品やサービスを使った体験を通して、結果としてどのような認識をし、どのような感情や評価を抱
フロントエンドスタイルガイド： 定義と要件、コンポーネントチェックリスト
フロントエンドスタイルガイドは、デザインやテストを効率化し、UIの一貫性を高める。今回は、スタイルガイドの要件8個と、一般的なコンポーネント25個を紹介しよう。 Front-End Style-Guides: Definition, Requirements, Component Checklist by Page Laubheimer on March 27, 2016 日本語版2016年6月23日公開 フロントエンドスタイルガイドとは何か フロントエンドスタイルガイドがUXの現場でますます一般化してきている。Jeff GothelfとJosh Seidenが彼らの著書『Lean UX』で説明しているように、フロントエンドスタイルガイドはアジャイルやリーンな環境で生まれたものである。 定義： フロントエンドスタイルガイドとは、製品のユーザーインタフェースにある全要素のモジュールコレクショ
2017年に注目されたインターフェイスデザインのトレンドを解説
2017年はインターフェイスデザインにとって多様性の一年でした。中でもユーザーフレンドリーに注目された年と言えるでしょう。 2018年これからのWebサイト、スマホアプリのデザインで押さえておきたいインターフェイスデザインのトレンドを紹介します。 Review of Popular Interface Design Trends in 2017 by Marina Yalanska 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 機能的なミニマリズム ブルータリズム 画像に統合されたタイポグラフィ アニメーションするヒーローイメージ オリジナルのイラスト 枠線がないレイアウト さまざまなインターフェースのアニメーション UIに優しいブランディング 単色のUI 進化した暗い背景の使い方 文字を読ませるためのスペース コントラストを
UXデザイナー深津貴之が語る身も蓋もない組織論!? 「ユーザー目線のない会社からは逃げるしかない」「それでもそこでがんばりたいなら……」 | HRナビ by リクルート
PCやスマートフォンを開けば、そこには不愉快なUIが至るところにあふれている。さして文章が長くもないのにページが4分割されているニュース記事（腹立たしいことに4ページ目はたった1行だったりする）、サッカーのハイライト動画でシュートの行方をカメラが追い始めた瞬間に始まる動画広告、場面転換をするたびにCMが挟み込まれ、もはやCMを見ているのかゲームをしているのかわからなくなるアドベンチャーゲームアプリなど……。 さらに不幸なことは、ウェブメディアの編集部や動画配信者、ゲーム制作会社の制作現場にいる人たちにとっても、これは決して愉快な状況ではないということだ。罵詈雑言混じりの苦情が書かれたユーザー評価欄やSNSを見ながら彼らは言うだろう。「誰が好き好んでこんなUIを作るものか」と。 関わる誰から見てもおかしなUIは、それでもなぜ量産され世の中のストレスを増幅させ続けているのだろうか？ その負のス
1ヶ月続けた“勝手にUI改善”の振り返り
他にもairbnbのトレースやTwitterのトレース等も行いました。 ある程度UIを設計する際のルールを掴んではきましたが、自分で能動的に考えて手を動かした訳ではないため物足りなさを感じていました。(トレースからの学びはたくさんあったので、独学から始める方は最初にトレースから始めることをオススメします) その時、カイさんから何かアプリを作ってみるか既存アプリのリデザインをやってみると良いよと言われました。 1からアプリを考えるのも良かったのですが、既存アプリのリデザインの方が手軽に始めることができそうだと思ったので、“勝手にUI改善”を始めることにしました。これが私が“勝手にUI改善”を始めた背景です。 ちなみにアプリのリデザインを継続させるモチベーションとして自分の思考過程をTweetすることにしました。 たまにいいねとかリプライくるので、嬉しくて毎日続けたくなりますw 継続できないよ
読みやすさのデザイン備忘録 | 深津 貴之 (fladdict) | note
noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。 本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック（経験）ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です（現時点では個人の見解です）。基本的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。 書体をサンセリフ系に変えるべきか？デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも
Webサイトに一貫性を持たせるパターンライブラリのすすめ
PaulはUXデザイナーであり、デジタルトランスフォーメーションの専門家。非営利団体や企業のWeb、ソーシャルメディア、モバイルを使ったユーザーとの結びつきを支援しています。これまでに30校を超える大学、大規模な慈善団体や企業を支援し、デジタルに精通した人々の変化し続けるニーズに適応する手助けをしてきました。 Webサイトに一貫性を持たせて、管理しやすくすることは、大規模な組織が直面するもっとも大きな悩みの１つです。幸いにも、このときパターンライブラリが役に立ちます。 大規模なWebサイトが直面する特有の問題に対するソリューションとして、気付けば私はパターンライブラリの作成を提案することが増えていました。それは、クライアントがNestleのような大企業であろうと、ストラクスライド大学のような高等教育機関であろうと、あるいは国境なき医師団のような大きな慈善団体であろうと同じです。 では、パタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドの制作者が知っておきたい、Atomic Designを使用したコンポーネントベースのUI設計が分かる良書
http://www.life-is-bitter.com/entry/ui_checklist
最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger
