デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
Visual Studio CodeでWeb制作・開発のコードを書く時に役立つ設定・テーマ・機能拡張、知っておくと便利なテクニックを紹介します。 My Web Development VS Code Settings, theme, Extensions, tips and tricks br lampewebdev(@lampewebdev) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私がVSCodeを使用している理由 VSCodeのテーマ・アイコン・フォント VSCodeの機能拡張 VSCodeの設定 VSCodeの便利な使い方 私がVSCodeを使用している理由 私はプログラミングを始めて以来、たくさんのエディタやIDEを使ってきました。Eclipse、Netbeans、Notepade ++、Brackets Ed
シンプルな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/ ◆：読みやすさ ダークモードとライトモードに対する視認性を比べた調査によると、正常な視力を持つ人であれば、ライトモードの方がパフォーマンスは高かったとのこと。 人間は日中に狩りをするよう進化しており、これは「明るい背景に暗い物体」を見る
こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、コメントをもらえたりして嬉しいです。ありがとうございます！ PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 peaks.cc 概要 WWDC 2019で新しく発表されたiOS13でOSレベルでのDarkMode設定が搭載されることになりました。MacOSの方は以前より追加されていましたが、iOSではなかったので個別のアプリが各々対応していました。 今回、iOSにもDarkMode設定が標準搭載されたことによって、iOSアプリのダークモード対応が必然的に迫られることになって来るのではないかと思っています。 ダークモードを好んで使う人は一定数存在していて、かく言う私もダークモードを好んで使っています。目に優しいだっ
秋のブログ週間連載の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。ダー
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.now.sh/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="https:
なぜ日本語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の作り方👁👄👁💗
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. Principles#Get to know our foundational thinking and how we put it into action across our design system. Learn about our principles
Create VS Code Themes with Theme Studio!
デスクトップにダークモードが登場。使用方法をチェックしよう！Slack ですべてのデスクトップアプリ、Mac、Windows、Linux でダークモードが利用可能に Slack チーム一同作成2019年9月12日イラスト: Josh Cochran 夜間や暗めの環境で仕事をしたい？アクセシビリティ目的（視覚障害、片頭痛、その他の視覚障害など）でダークモードを利用したい？または、ただ単にダークモードが好きなだけ？その理由が何であれ、ダークモードをご希望の皆様に朗報です。ついに Slack でダークモードが利用可能になりました！ わかりやすく、疑問点にいくつか答えられるよう、いくつかのセクションに分けてこの機能を説明します。 どんな機能？すべてのプラットフォームのアプリでダークモードを使用できるようになりました。 利用できる場所は？もちろん、Slack です。具体的には、本日のリリースはすべて
GitHub - primer/github-vscode-theme: GitHub's VS Code themes
Clone and open this repo in VS Code Run yarn to install the dependencies. Press F5 to open a new window with your extension loaded Open Code > Preferences > Color Theme [⌘k ⌘t] and pick the "GitHub ..." theme you want to test. Note: It seems this has to be done 2x because the first time it switches back to the default light theme. This might be a bug? Make changes to the /src/theme.js file. UI: Fo
モバイル開発をしている上でデザインとの関係性は切手は切れない関係だとお思います。 また、プロダクト自体も成長に伴い複雑性がましてきました。そのときに私はデザインシステム に注目して様々なアプローチしてきました。 本発表ではあまり馴染みではない「デザインシステム」はどういうものなのかという基本的な話から ではどのようにしてプロダクトにデザインシステムを導入し、どこまで何をしていったのか エンジニアリングを持って何を解決していったのかを解説します。
【2024年版】目的別WordPressおすすめ無料テーマ6選
PICK UP A8フェスティバルオンラインセミナーで「売れるサイトmakerに聞く！サイト作成スタートアップガイド」というテーマでセミナー講師としてお話しさせていただきました。 個別指導Webスクール 個人事業主様・経営者様・起業副業など自分のビジネスのためにホームページの作り方を習得するスクール
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
Ever wonder why conversational AI like ChatGPT says “Sorry, I can’t do that” or some other polite refusal? OpenAI is offering a limited look at the reasoning behind its own…
プログラミングってば、こう、ネストの中にネストネスト。 関数（関数（関数）） ループ（ループ（ループ）） 配列（配列（配列）） モジュール（モジュール（モジュール）） 変数（変数（変数）） というのを延々と繰り返すようなイメージが出来た...。 【追記】...ゴメンゴ。マトリョーシカ人形だったね。 純粋なネストではないけど、 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
はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。 既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。 デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。 今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多かったため、自分が知らない誰かの知見に助けられたように、微力ながらコミュニティに貢献するべく、未完の状態で状態でお見せすることにしました。 Framework by Figma登壇資料 後でFigma Communityにも掲載します シチュエーションにおける最適解繰り返しますが、今回説明するような煩雑で、複雑で、面倒な、プ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
VSCodeでコードを書く時に役立つ設定・テーマ・機能拡張、知っておくと便利なテクニック
シンプルなHTMLで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワーク -new.css
Zoom飲み会とぜんぜん違う！ 「距離」をオンライン飲み会に導入する「SpatialChat」 「あっちの話題のほうが面白そう！(すすすす……と場所移動)」を実現
DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ
PlantUMLのテーマ（思わぬ展開） | フューチャー技術ブログ
商用でも完全に無料！ プレーンなHTMLとCSSで実装された、ランディングページ用のテンプレート -Uisual
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ
CSSファイルを読み込むだけ！クラスなしCSSフレームワークいろいろ
https://nocomplexity.com/documents/arplaybook/index.html
CSSのCascadingに追加されようとしているLayerという概念 - araya's reservoir
VS Codeの見やすいテーマが登場！GitHubのデザインでコードも快適に -GitHub VS Code theme
デジタル庁公開のデザインをhtml/cssに落とし込んでみた。 - Qiita
モバイルアプリ日本語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のアカウント情報を盗むため」に悪用される可能性
TechCrunch | Startup and Technology News
プログラミングってば、マショートリカ人形かよっ【訂正：マトリョーシカ人形】
RubyKaigi 2024デザインを担当した話｜mmito
Figma製スライドテンプレ集「わぶんスライド」を公開しました｜Miwa Kuramitsu
Slackのダークモード、Mac/Windows/Linuxのデスクトップアプリでも提供開始【週刊Slack情報局】
IPの世界観に寄り添う、マルチブランドなカラーシステム設計論｜TORAJIRO
7-24blog.com
rio6.lo.gob.jp
newsinfomation.net
detail.chiebukuro.yahoo.co.jp
kushiro4foodie.blog.fc2.com
www.ytv.co.jp