Figma Community file - デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。 デザインシステム構築の目的の詳細はデジタル庁ウェブサイトをご覧ください。 更新履歴 2022.12.28 リンクテキスト、テキストエリアのガイドを更新しました 2022.11.14 軽微な修正を行いましたアイコンを一部修正しましたテキスト入力、テキストエリアの表記揺れとカラー違いを修正しました 2022.11.12 軽微な修正を行いました最新状態ではな...

Figmaを絡めて新たなデザインシステム構築を手伝う仕事が生まれそうなので、調査がてらFigmaに公開されているデザインシステム系ファイルの情報をまとめました。 なお、海外のデザインシステムは大量に公開されており、特に有名企業のシステムはどこの記事でも紹介しているので、この記事では日本で公開されているFigma関連のファイルに限定して取り扱います。 検索する限りでは意外と日本企業が公開しているファイルは少ない。 なお、ここに掲載されている以外で公開されているファイルがありましたら@kgsiまでご連絡いただけると嬉しいです。 FALCON by SPEEDA コンポーネントごとにページを分けている VariantsはDefaultやLargeなどアッパーキャメルケースを採用 *書体はHiragino Kaku Gothic Proを指定 SmartHR UI by SmartHR 全コンポー

ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション

「OOUI（オブジェクト指向ユーザーインターフェース）」という言葉を耳にしたことはあるでしょうか？ 従来からあるユーザーインターフェースの設計論ですが、2020年にソシオメディア様が『オブジェクト指向UIデザイン ― 使いやすいソフトウェアの原理』を発刊されてから多くのデザイナーの注目を集めています。本書籍には18回分の演習課題が収録されており、コンセントでも有志のデザイナーで勉強会を定期開催しています。 オンライン上で開催された有志での勉強会の様子。PC画面を共有し、オンラインデザインツール「Figma」を用いて実際に手を動かしながら演習課題に取り組みました。 ご紹介した書籍を読めばOOUIとは何か、どのように実践するのかということがすべて書いてあるので、詳しく知りたい方はぜひご購入いただければと思います。 本記事では「OOUIの何が良いのか？」について設計実務者以外の方にマンガでお伝え

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 今年公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2021 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 4. ホワイトスペースはたっぷり使用してください 5. アイコンをグリッドシステムで使用する際の注意点 6. アクションを実行

挨拶内海「どうもお願いします。ありがとうございます。今、NFTアートをいただきましたけどもね。ありがとうございます。こんなんなんぼあってもいいですからね」 駒場「いきなりなんですけどね、うちのおかんがね、好きなIT用語があるらしいんやけど」 内海「そうなんや」 駒場「その名前を忘れたらしいねん」 内海「IT用語の名前忘れてまうってどうなってんねん。あれやろ、IT用語ゆうたらどうせ、デザイン思考か、アジャイル開発か、リーンスタートアップやろ！」 駒場「俺もそう思ったんやけどちゃうらしくてな、いろいろ聞くんやけど、全然わからへんねん」 内海「そうなん？」 駒場「うん」 内海「ほんだら俺がね、おかんの好きなIT用語、一緒に考えてあげるから、どんな特徴言うてたかとか教えてみてよ」 定義駒場「おかんが言うには、製品やサービスとの関わりを通じて利用者が得る体験及びその印象の総体やって言うてた」 内海「

ベイジは2010年の創業以来、ウェブ制作事業を中心に事業を展開してきました。この事業では、サービスの質を統一するために2014年頃からワークフローの整備に取り組んできました。 一方ウェブアプリデザイン事業については、事業拡大したのがここ数年で、まだワークフローが整備されておらず、各人の裁量に委ねた進め方になっていました。そこで今後の事業拡大とメンバー増員を想定し作成したのが、業務システムやSaaSのUIデザインに特化した「ベイジの業務システムUIデザインワークフロー」です。 基本的な進め方は国際規格（ISO 9241-210※）の人間中心設計プロセスに基づいて組み立てていますが、細かいタスクの順序や内容は、今までベイジで培ってきたノウハウをふんだんに盛り込み、組み換えています。 そして、様々なプロジェクトでこのワークフローを実用しながら、今もアップデートを続けています。 また今回のワークフ

Takramは統合型経営プラットフォームを提供するfreee株式会社のリブランディングをお手伝いしました。リブランディングにあたっては、経営層や現場へのインタビューを重ね、freeeがサービスを通して提供しようとしている価値や体験をブランドコアおよびデザイン原則として言語化。それらをもとに、ブランドロゴ・イラストシステム・デザインガイドラインなどを手掛けました。 freee 公式ブランドサイト freee株式会社はこれまで、会計や人事労務などのバックオフィス業務を支援するサービスをクラウドで提供してきました。この度そのビジョンを「だれもが自由に経営できる統合型経営プラットフォーム」に刷新、バックオフィスだけでなく、あらゆる人々の経営をサポートしていくことを宣言しました。新しいブランドデザインはこのビジョンに呼応するものとなっています。 プロジェクトをはじめるにあたり、freeeのミッション

デジタル庁では、将来的に省庁サイト等への適用も視野に入れた「デザインシステム」の構築を行っています。 その一環として、デザインシステムについてのご意見をいただくため、7月29日に有識者を集めたデザインシステム勉強会を開催しました。 デザインシステムとは？ 現状、各省庁の Web サイトは個別に構築されており、各 Web サイトの情報構造や見た目がそれぞれ異なっています。 利用者にとっての使いやすさ・求める情報へのたどり着きやすさ、また開発の効率化・管理コスト削減の観点で改善の余地が大きいと考えています。 その解決に向けて、デザインやコンテンツ構成等の標準化・統一化を図るためのデザイン原則案を策定することが、「デジタル社会の実現に向けた重点計画」にも定められました。 「各府省庁のウェブサイトのデザインやコンテンツ構成等の標準化・統一化を図る。令和3年 (2021年) 秋までに、各府省庁のウェ

New year. Big goals. Bigger savings. Unlock a year of unlimited access to learning with Coursera Plus for $199. Save now. Get on the fast track to a career in UX design. In this certificate program, you’ll learn in-demand skills, and get AI training from Google experts. Learn at your own pace, no degree or experience required.

生まれ変わったらデザインシステムになりたいと思っているくらい、デザインシステムが好きなエンジニアの乗田です。 僕の入社の経緯や業務内容についてはこちらからご覧いただけます！ デザインシステムとは デザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの原則や指針と、それらを実現するための仕組みの集合体です。デザインシステムのメリットは、低コストで高速に一貫性のあるデザインを実現しやすくなるという点にあります。 一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トーンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイントークンなどが含まれます。 しかしデザインシステムにおける必須要素の定義はありません。それ故にデザインシステムは、各組織にとって必要なデザイン原則やデザインアセットが集合した物と言い換えることもできるでしょう。 古い物ですと1975年に

デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。 ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイン仕様書とは デザイン仕様書に使用するツール デザイン

Make your ideas look awesome, without relying on a designer.Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer's point-of-view.

UX-movは様々なアプリのUIを動画で集めたギャラリーサイトです。

200+ DESIGN behindsCocodaは、デザインの裏側をまとめた事例集です。 日本を代表するデザイン組織から、200以上の事例が公開されています。 CONTENTS デザインの裏側をまとめた 200以上の事例ブランドから、プロダクト設計、デザイン組織の立ち上げ...。様々なデザイン領域の深い事例が、日本で最高峰のデザイン組織によって掲載されています。 RECOMMEND あなたの興味に合わせて デザイン事例をおすすめあなたの興味に合わせて、豊富なデザイン事例の中から ピッタリなコンテンツをおすすめします。 MY LIST 自分好みのリストに まとめるコンテンツの中でぴったりなものを見つけたら、あなただけのリストを作って、いつでも見返すことができます。 GET STARTED さっそくはじめる

サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 （例）30ページの場合は 030 と入力 ※黄色本をご購入の方：7-2「検索」の表紙ページ数 ※ピンク本（実践編）をご購入の方：9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 （jQueryのバージョン、プラグインのソースコードの書き方を含む） ソースコードの書