デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
シンプルなHTMLのみを使用して、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 シンプルなブログや自己紹介ページなどをさくっと作成したい時に便利で、CSSリセットとして利用するのもありかもしれません。 new.css new.css -GitHub new.cssの特徴 new.cssのデモ new.cssの使い方 new.cssの特徴 new.cssは、HTMLのみを使用してモダンなWebサイトを作成するためのclassレスのフレームワークです。HTMLの実用的なデフォルトのスタイルを活かし、美しく見えるようにスタイルされています。 超軽量4.8KbのCSSフレームワーク。 用意するのは、HTMLファイルのみ。 マークダウンで生成されたHTMLのレンダリング。 シンプルなブログや自己紹介ページに最適。 MITライセンスで、商用プロジェクト
「ダークモード」に意味はあるのか？
黒を基調としたレイアウトにする「ダークモード」は、画面を見やすくして眼精疲労を予防したり、端末のバッテリー節約に役立ったりしてくれると考えられているため、OSやブラウザ、アプリなどさまざまなソフトウェアがダークモードに対応しています。しかし、いろいろと調べた結果ダークモードを使うのをやめたという開発者のKev Quirk氏が、なぜその結論に至ったのかを解説しました。 Is Dark Mode Good For Your Eyes? | Kev Quirk https://kevquirk.com/is-dark-mode-such-a-good-idea/ ◆：読みやすさ ダークモードとライトモードに対する視認性を比べた調査によると、正常な視力を持つ人であれば、ライトモードの方がパフォーマンスは高かったとのこと。 人間は日中に狩りをするよう進化しており、これは「明るい背景に暗い物体」を見る
秋のブログ週間連載の7本目です。 はじめにPlantUMLで使えるテーマについてのご紹介です。 以前、チームで機能設計するためのPlantUML標準化の記事でも書かせていただきましたが、PlantUMLのデフォルトカラーって少しドライですよね。 色の好みは人それぞれで、あれはあれでカッコよさはありますが、複雑な図は少しでも可愛く描きたい・楽しく見たいものです。 この記事ではPlantUMLのテーマについて、いくつかのオプションを紹介していきます。「PlantUMLの色を変えてみたい！」という方は是非ご活用いただければ嬉しいです。 前提 PlantUMLでは、skinparamを利用して図のビジュアル各要素を定義しますが、「テーマ」はskinparamの集合体です この記事ではテーマの作り方や、各運用方法等については触れません この記事で紹介するオリジナルテーマはシーケンス図のために作られた
JavaScriptはなし、プレーンなHTMLとCSSで実装されたランディングページ用のテンプレートを紹介します。 テンプレートはスマホ・タブレット・デスクトップのレスポンシブ対応。ワイヤーフレームのような白黒のシンプルなデザインなので、カスタマイズも簡単です。 Uisual -Free Landing Page Templates Uisual -GitHub UisualはプレーンなHTMLとCSSで実装された、ランディングページ用のテンプレートです。他のCSSフレームワークやJavaScriptなどは一切必要ありません。 MITライセンスで、商用プロジェクトでも無料で利用できます。
「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
このダークテーマは目に優しく、コードも見やすい！ VS Codeのエレガントなモノクロームのテーマファイル -Sequoia
ダークテーマは好きだけど、#000のブラックだったり、テキストが派手なカラーだったりすると、目が疲れませんか？ 背景のブラックはほんの少しだけブルーがかった夜空のように落ち着いた色合いで、グレーの濃淡だけのMonochromeと淡いカラーで構成されたMoonlightの2種類の配色が用意された、VS Code用のテーマファイルを紹介します。
2021年12月14日 CSS, Webサイト制作 BootstrapでおなじみのCSSフレームワークでは、各要素に決められたクラス名を指定してスタイルを適用していました。ですが最近クラスを指定せず、HTMLを書くだけで整ったスタイルを適用してくれる「クラスなしCSSフレームワーク」が続々と登場しています。headタグ内にCSSファイルを読み込む記述を追加するだけでOK！学習コストもかからずとっても便利です。日本語版のデモも用意したので、どんな表示になるか確認してみてください。 ↑私が10年以上利用している会計ソフト！ デモはちょっと長いので、デモパネルをスクロールするか、パネル右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてくださいね！ Water.css GitHub｜デモ クラスなしCSSフレームワークとして最初に目立っていたのがこのWater.css。ダー
2021 年 1 月に CSS Cascading and Inheritance Level 5 の First Public Working Draft が公開された。 CSS Cascading and Inheritance はその名の通り、CSS の Cascade や継承などについての仕様を定義しているもので、つい先日 Level3 が晴れて W3C Recommendation となった。 CSS Cascading and Inheritance Level 3 is a W3C Recommendation そして、新たに First Public Working Draft が公開された Level5 では、今までの Cascading に、新たにLayerという概念の導入が検討されている。 本記事では CSS の Cascading についておさらいし、新しい概念であ
はじめに デジタル庁が公開したデザインシステムがよさそうなデザインでしたので、適当に遊ぼうかと思いました。 html/cssで公開してくれればすぐに使いやすいと思ったんですが、どうやらFigmaでしか配っていない。。 ということでhtml/cssに落とし込んでみました。 注意事項 趣味程度に作ったものを、使いたい人がいればどうぞというものです。 細かい部分は間違っていることもあるかと思います。(ラジオボタン難しかったので、何とか再現した感じです。) 自分用に目的もなくつくっていましたので、命名等のポリシーもめちゃくちゃです。許してください。 大変つかれましたので、厳しいコメントは受け付けません。 気が向いたら、もう少しきれいにするかもしれません。 ソースコード 以下、に載せています。 完成概要 ページとしてはこんな感じ
VS Code用のGitHubのテーマを待っていた人も多いと思います。 GitHub Plus Themeも人気ですが、ここで紹介するGitHub VS Code themeは、ライトモード・ダークモードの配色も備えています。
LaTeX.css
Abstract This almost class-less CSS library turns your HTML document into a website that looks like a LaTeX document. Write semantic HTML, add <link rel="stylesheet" href="https://latex.vercel.app/style.css"> to the <head> of your project and you are good to go. The source code can be found on GitHub at https://github.com/vincentdoerig/latex-css. Getting Started Add <link rel="stylesheet" href="ht
なぜ日本語UIキットを公開するのか？ デザインチームの研究活動のひとつとして、体験設計やUIデザインの品質を高めたり、デザインチーム内の協働を円滑に行うために、汎用的なデザインテンプレートやデザインアセットを作成し、体験デザインプロセスの仕組み化と共有を行っています。 UIデザインにおいても、Figma Communityをはじめとした様々な媒体でUIキットが共有・配布されており、UIキットを参考にデザインワークを行うというケースが増えてきているかと思います。 一方でUIキットの多くが欧文フォントで構成されているため、日本語フォントに変換する必要があり、場合によってはサイズやレイアウトを微調整しなくてはなりませんでした。 このUIキットも、単にAppleやGoogleのUIコンポーネントを日本語化しているだけと言えばそうかもしれませんが、これを活用することでデザイナーやプロダクト開発に携わ
世界を変えるためのデザインシステム
フロントエンドカンファレンス福岡 #fec_fukuoka での登壇資料です https://frontend-conf.fukuoka.jp/
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
かわいいVScodeの作り方👁👄👁💗
かわいくないワ...👁👄👁 これではテンション上がりません。コーディングに置いてモチベーションは最も大事な栄養素です。 テーマを変更してモチベを上げていきます。 テーマを変更 illusion お好みのテーマをダウンロードしてテーマを有効にします。 ...いいんじゃない？👁👄👁 まだそこまでかわいくありません。 コーディングにおいて、インデントは最も大事な要素です。そんなに重要なものが光っていないのは怠慢という言葉を禁じ得ません。インデントを光らせていきます。 indent-rainbow 拡張機能を有効にしたらこうなっているはずです。 トーンが暗いわネ...👁👄👁 setting.jsonでハイライトの色を変えていきます。 "indentRainbow.colors": [ "rgba(128, 64, 64, 0.5)", // 1インデント目の色 "rgba(128
こんにちは、freeeのUXチームでデザインシステム “Vibes” を作っている id:ymrl です。 ダークモード流行ってますよね。私は最初はしっくりこないなと思っていたんですが、食わず嫌いは良くないと思って試しているうちに、いつの間にかダークモードのほうが落ち着くようになってしまいました。 そしてそうなってくると、だんだん「自分たちの作っているWebサービスもダークモードに対応するべきなのか？」という気持ちになってきてしまい、最近はずっとダークモードのことを考えています。ということで今回はダークモードをやるべきなのか、実現する方法はどうなっているのか、UIデザインで気をつけるべき点何かというのを考える記事を書いてみます。 ※「ダークモード」はApple製品で使われている呼び方で、Androidでは「ダークテーマ」と呼ばれていて、Windowsでは「ダーク○○」のような呼び方をしてい
new.css
Write modern websites using only HTML. This site is made from vanilla HTML and the default new.css theme. View Source new.css is a classless CSS framework to write modern websites using only HTML. It's ~4.5kb. It's perfect for- A dead-simple blog Collecting your most used links Making a simple "about me" site Rendering markdown-generated HTML The web was made for semantic HTML—let's start using it
Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.
ダークモードは人気があるが、必須ではない。ユーザーはダークモードを好むが、ダークモードなしでも行動は変わらない。ダークモードをアプリケーションレベルではなくシステムレベルで考えているからだ。ダークモードをサポートする場合は、ダークモードでよくある問題を避けるために、そのデザインをテストしよう。 Dark Mode: How Users Think About It and Issues to Avoid by Tanner Kohler and Amy Zhang on August 27, 2023 日本語版2024年1月15日公開 ダークモードがかつてないほど流行している。少なくともこのトピックに関する多くのウェブデザインの記事を読む限りでは、ダークモードは必要不可欠とさえ思うかもしれない。しかし、ダークモードを完全にサポートし、「うまく活用する」ためには貴重な時間とリソースを必要とす
modus-vivendi DAP Mode 今回は見た目、テーマについてです。 あくまでも私の印象ですが、Emacsには「これぞEmacs」というようなEmacsを代表するようなテーマがなかなか見当たらないように思います。VimにはSolarizedを初めとしてVimから始まったテーマがたくさんありますし、Electron系のエディタはオリジナルのデフォルトのテーマからしてとても見映えが良いです。一方Emacsはと言えば他のエディタのテーマの移植モノばかりで、Emacsから始まってチヤホヤされているテーマが見当たりません（私の調査力も当てにならないので何かありましたら教えてください）。 Doom系のテーマ群は見映えはするのですが、主に他のエディタで名を馳せたテーマの移植組で構成されていたので見送りました。Spacemacsのデフォルトテーマはアリかもと思いましたが、DoomもそうですがS
Create VS Code Themes with Theme Studio!
GitHub - primer/github-vscode-theme: GitHub's VS Code themes
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
モバイル開発をしている上でデザインとの関係性は切手は切れない関係だとお思います。 また、プロダクト自体も成長に伴い複雑性がましてきました。そのときに私はデザインシステム に注目して様々なアプローチしてきました。 本発表ではあまり馴染みではない「デザインシステム」はどういうものなのかという基本的…
【2024年版】目的別WordPressおすすめ無料テーマ6選
PICK UP A8フェスティバルオンラインセミナーで「売れるサイトmakerに聞く！サイト作成スタートアップガイド」というテーマでセミナー講師としてお話しさせていただきました。 個別指導Webスクール 個人事業主様・経営者様・起業副業など自分のビジネスのためにホームページの作り方を習得するスクール
by DobaKung WindowsではUIの色やサウンド、マウスカーソル、壁紙などを自由にカスタムした組み合わせ「カスタムテーマ」を作成でき、Windowsユーザーは、OSの外観を変更するために、必要に応じて異なるテーマを切り替えることができます。そんなWindows 10のテーマを使って攻撃を実行することで、何も知らないユーザーからWindowsアカウントの認証情報を盗めるようになる恐れがあると指摘されています。 Windows 10 themes can be abused to steal Windows accounts https://www.bleepingcomputer.com/news/microsoft/windows-10-themes-can-be-abused-to-steal-windows-accounts/ Windowsのテーマ設定は、「hogehog
New GitHub Themes for VS Code
April 14, 2021 New GitHub Light Default, GitHub Dark Default and GitHub Dark Dimmed themes matching the official github.com themes are now available in VS Code. To start using the new themes, go to the VS Marketplace, click on the "Install" button, and select one of the themes in VS Code. GitHub's classic VS Code themes GitHub Light and GitHub Dark are still available. Markdown files will now auto
トップ - IKYU Design Guideline
IKYU Design Guidelineは「一休らしいデザイン」のガイドラインを定義します。一休のプロダクトは、これに基づいてデザインし、一貫した体験提供を目指しています。
Naming Tokens in Design Systems
Design tokens have provided a visual foundation of many design systems since Salesforce pioneered the concept in 2014. I wrote an impassioned article on design tokens in 2016, and my energy on the topic continues to grow. As systems of visual style spread across a widening landscape of components, platforms and outputs, design tokens — and their names — are increasingly important. Effective token
プログラミングってば、こう、ネストの中にネストネスト。 関数（関数（関数）） ループ（ループ（ループ）） 配列（配列（配列）） モジュール（モジュール（モジュール）） 変数（変数（変数）） というのを延々と繰り返すようなイメージが出来た...。 【追記】...ゴメンゴ。マトリョーシカ人形だったね。 純粋なネストではないけど、 pythonやったら、辞書の中に、リストって記述のパターンがあって、 キーで、値を呼び出すだけで無くて、リストも入れるんだぁみたいな。 入門から、初級の壁の厚さ？っていうのか、なんだかなぁ。 例えば、モジュールや関数は、別のファイルに書いて読み出しなんだろうけど。 （ブコメにあったように、ネストの中身を見せないとか、条件分岐if文をややこしくさせせないとか） SQLとの連携とか、理解出来るようになるまでに、この調子だと10年ぐらい掛かりそうだよ。。
はいさ〜い！「B/43(ビーヨンサン)」を提供するスマートバンクでコミュニケーションデザイナーをしているmmitoです✌️ 2024年5月に沖縄で開催された「RubyKaigi 2024」。これはプログラミング言語Rubyに関する国際テックカンファレンスであり、今年も世界各国から1,000人以上のエンジニアが集いました。 実は、本カンファレンスのデザインを同僚のゆっきーさんと一緒に担当する機会をいただきました。 https://rubykaigi.org/2024このnoteでは、RubyKaigi 2024デザイナーになった経緯、メインデザイン作成フロー、デザイン意図、その他の作成物などを紹介します！ RubyKaigi 2024デザイナーになった経緯2023年10月末、私が働くスマートバンクはKaigi on Rails 2023でRuby Sponsorとして協賛し初ブース出展をし、
日本語でいい感じに見えるFigmaスライドテンプレ集を自分用に作成したので、「わぶんスライド」という名前でFigma Communityに公開しました。 きっかけは、講師を担当していたDesignship Doの講義資料作成にFigma Communityのスライドテンプレを使おうとしたところ、欧文前提で作成されたスライドテンプレしかなく和文を入力するとどうも間延びした印象になってしまう…と悩まされていたのがきっかけです。 Figma Communityで日本語でいい感じのプレゼンテーションテンプレートが見当たらず、結局いちから作ってる…いいから中身をはよ… — Miwa Kuramitsu (@transitkix) June 1, 2021 「わぶんスライド」の特徴 きほんのレイアウト 1920x1080px、16:9、6カラムで基本レイアウト6パターンを用意しました。画像の有り無しを
WordPress フルサイト編集対応のブロックテーマ unitone について – WordPress テーマ unitone
はじめまして、unitone を開発しているキタジマタカシと申します。Snow Monkey という WordPress テーマも開発しています。 なぜ unitone を開発しようと思ったのか、unitone で何を解決しようとしているのかについて書きたいと思います。 unitone を開発した経緯 WordPress 6.0 以降、フルサイト編集の機能を強化するためのアップデートがすごい勢いでおこなわれています。サイトエディターの UI の改善やパターンの機能向上、ブロックのロック機能の強化など、ウェブサイト全体がブロックで組みやすく、そして壊れにくくなり、かなり実用レベルに近づいてきています。 Snow Monkey はフルサイト編集に対応していないクラシックテーマで、他の主要な WordPress テーマもクラシックテーマのものがほとんどですが、今後（主流にまでなるかはわかりません
はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。 既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。 デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。 今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多かったため、自分が知らない誰かの知見に助けられたように、微力ながらコミュニティに貢献するべく、未完の状態でお見せすることにしました。 Framework by Figma登壇資料 後でFigma Communityにも掲載します シチュエーションにおける最適解繰り返しますが、今回説明するような煩雑で、複雑で、面倒な、プロセス
やってやろうじゃないかメカアジャイル！ / Let's do it, mechanical agile!
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
シンプルなHTMLで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワーク -new.css
Zoom飲み会とぜんぜん違う！ 「距離」をオンライン飲み会に導入する「SpatialChat」 「あっちの話題のほうが面白そう！(すすすす……と場所移動)」を実現
PlantUMLのテーマ（思わぬ展開） | フューチャー技術ブログ
商用でも完全に無料！ プレーンなHTMLとCSSで実装された、ランディングページ用のテンプレート -Uisual
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
CSSファイルを読み込むだけ！クラスなしCSSフレームワークいろいろ
https://nocomplexity.com/documents/arplaybook/index.html
CSSのCascadingに追加されようとしているLayerという概念 - araya's reservoir
デジタル庁公開のデザインをhtml/cssに落とし込んでみた。 - Qiita
VS Codeの見やすいテーマが登場！GitHubのデザインでコードも快適に -GitHub VS Code theme
モバイルアプリ日本語UIキットの公開｜Japan Digital Design, Inc.
GitHub - bensadeh/tailspin: 🌀 A log file highlighter
Webのダークモードを実現するには - freee Developers Hub
Spectrum, Adobe’s design system
ダークモード：ユーザーの考え方と避けるべき課題
【Emacs入門】②バージョン28で新たにビルトインされるModus Themesを使おう
Theme Studio: Create VS Code Themes!
サービスにおけるDesign Systemの構築
Windows 10のカスタムテーマが「Windowsのアカウント情報を盗むため」に悪用される可能性
https://jp.techcrunch.com/2020/08/11/2020-08-06-wordpress-com-launches-new-p2-to-take-on-internal-communication-tools/
プログラミングってば、マショートリカ人形かよっ【訂正：マトリョーシカ人形】
RubyKaigi 2024デザインを担当した話｜mmito
Figma製スライドテンプレ集「わぶんスライド」を公開しました｜Miwa Kuramitsu
IPの世界観に寄り添う、マルチブランドなカラーシステム設計論｜TORAJIRO
WordPress_テーマのつくりかた.pdf
アフター・アフターデジタルの世界で理解すべき 「UXは経営課題」の意味