デザインシステム Advent Calendar 2023 25日めの記事です。 Ubieでデザインエンジニアをしているtakanoripです。 この度UbieのデザインシステムであるUbie Vitalsのウェブサイトを公開しました。 またUbie Vitalsを構成するUIコンポーネントライブラリであるUbie UIをOSSとして公開しました。（こちらはまだWIP） ウェブサイトやコンポーネントライブラリ公開に至った過程を振り返ります。 Ubie Vitalsの出現と失敗 Ubie Vitalsはデザインに関するガイドラインなどをまとめる箱として作られました。 Ubieではデザイン生産基盤の構築を2022年から進めていましたが、当初はデザインシステムという箱をつくらず必要なツールやドキュメントを必要に応じて作っていました。 箱を作らないことで目先の課題を解決することに集中し、できるだけ

Design Principles デザイン上において目指すべき指針を言語化したものがDesign Principles（デザイン原則）です。誰でも、効率よく、迷わずに、Ubieらしい表現をするための基礎です。 Learn More

こんにちは、シフトブレインでエンジニアとして働いている安田（@_yuheiy）です。 先日、株式会社ボーンデジタルから出版された書籍『Every Layout─モジュラーなレスポンシブデザインを実現するCSS設計論』に、監訳者のひとりとして携わりました。 本書は、CSSにおけるレイアウトをテーマとしていますが、同時に、それをあらゆる環境においても破綻することなく、堅牢に実現するための、CSS全般について言える哲学を追求したような書籍です。レイアウトとはどのようにあるべきで、そしてCSSとしてどのように表現されるべきであるかという態度において、首尾一貫した理論を提示するものです。 このように、筆者独自の意見が強く主張される書籍はCSSの文脈では珍しく思えます。しかし本書の主張は、私自身のかねてからの問題意識とも重なるところが多く、また昨今の業界的な常識にアンチテーゼを唱える重要な問題提起だと

なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。

はじめに コロナ前後でボイトレレッスンでどう変わったかまとめました。 多分こういう情報ないので、簡易ではありますがまとめておきます。 どのボイストレーニングを受けているか 僕はボイストレーニングのレッスンを今の先生のところで5年ほど続けています。 この先生から主にハリウッド式ボイストレーニングを教わっています。 ハリウッド式ボイストレーニングは所謂認定団体があり、基本的にはそこで認定されたトレーナーから教わるボイストレーニングになります。 アメリカのセス・リッグス氏が始めた Speech Level Singing という団体とそこから派生した団体があります。 この辺見ると実績が分かるかもしれません。 ja.wikipedia.org このボイストレーニングは高音習得に特化しています。 コロナ前の普段のレッスンの内容 基本的には対面レッスンだけで、実際にレッスンスタジオに行き指導を受けまし

ヘイドン・ピカリングとアンディ・ベルの共著『Every Layout』が日本語に翻訳された。光栄なことに僕も出版前のレビュワーのひとりとして、微力ながらお手伝いさせていただいている。 タイトルが示すとおり、本書はCSSによるウェブデザインのうち「レイアウト」の問題に焦点を絞ったものだ。レイアウトといってもページ全体のグリッドのことだけではなく、ボタンやアイコンのような小さな部品に至るまで、CSSが「ボックス」として扱うあらゆる要素を対象としている。 テーマの根底にあるのは「コンポジション」というコンセプトだ。CSSによってインターフェイス部品を形づくるとき、それらひとつひとつを独自の、独立したものとして捉えるのではなく、基本的で小さなレイアウトの組み合わせたコンポジションとして捉えるべきである、と著者は主張する。そしてそのように組み合わされる小さなレイアウトを「レイアウト・プリミティヴ」と

CSSって面白いと思い始めた人、CSSの難しさが分かるようになった人、そしてCSSが大好物な人にお勧めの解説書を紹介します。 本書は、CSSの経験を積んでいるデベロッパー向けの解説書です。レスポンシブデザインを実現するレイアウトについて実装だけでなく、設計・管理・考え方について詳しく解説されています。 本書の元になっているのは、Relearn CSS layoutです。公開されたのは2019年ですが、現在でも人気が高いサイトで、さまざまなレイアウトを実装するCSSの設計方法について解説されています。その日本語版ともいえるのが本書です。 本書は来週発売！ 一足先に中身を紹介します。

こんにちは、技術広報のyayawowoです。 突然ですが、デザイナーの皆さんはデザインの知識をどのように学ばれていますでしょうか？ スクール（大学、専門など） 会社、仕事 WEB、オンライン（Udemyなど） など、様々あるかと思います。 とはいえ、日々変わりゆくデザインのトレンドをキャッチアップしていくのは時間と労力が必要ですよね。 そんな方に必見！ 弊社にて定期的に開催している、デザイナーによるデザイナーの為のデザインLT大会・・・ 「UI/UXデザイナーLT会」にて発表されたデザインTipsをまとめましたので、ご紹介させていただきます！ 記念すべき第一回目のまとめ記事は以下をご確認ください！ ・【UI/UXデザイナーLT会】を開催しました【登壇者15名御礼】 - RAKUS Developers Blog | ラクス エンジニアブログ 目次 目次 デザイナーとなっておもったこと UI

日本ではなぜかUIとUXの違いだけを語る記事が多く存在していますが、私個人的にはその違いを深く理解するよりUXは深く学ぶことがたくさんあると考えています。今では少なくなったかな？と思っていたのですが、再燃しているようで、かつ、UXの考え方も違った形で理解すると良いのでは？と感じたので記事にしてました。 ミルクボーイがUI/UXを語る？ 引用<a href=httpsnotecomhajipionnn2d59507b2794fbclid=IwAR1H6gmSK 8rlODizDSriJTHROX41dD18KtYiB7lT9Vre8WHJ8IuljMeUJA>httpsnotecomhajipionnn2d59507b2794fbclid=IwAR1H6gmSK 8rlODizDSriJTHROX41dD18KtYiB7lT9Vre8WHJ8IuljMeUJA<a> UXとUIの違いを、お笑

友人の腹筋ローラーの力を信じろさんと共に監訳を担当した書籍『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』が出版されます。現在、Amazonで予約受付中です。当初の予定よりもかなり遅れてしまいましたが、内容はいまだ鮮やかなままに思えます。 目次: 日本語版に寄せて 監訳者まえがき Chapter 1: 基礎 1–01: ボックス 1–02: コンポジション 1–03: 単位 1–04: グローバルスタイルとローカルスタイル 1–05: モジュラースケール 1–06: 公理 Chapter 2: レイアウト 2–01: Stack 2–02: Box 2–03: Center 2–04: Cluster 2–05: Sidebar 2–06: Switcher 2–07: Cover 2–08: Grid 2–09: Frame 2–10: Reel 2

でゅら @rahandu アプリケーション全般でそうなんだけど、モニターの解像度がでかくなるにつれて、デザインは余白を作りたがるのなんなんだろう 広くなった意味がないし古いデバイスで作業しづらいし良いことないと思う twitter.com/ichirowo/statu… 2021-10-05 18:00:54 Lacnor @Lacnor_JP ボタンを、形はそのままで、グラデーションと枠を無くして、コントラスト強めな単色で構成してくれれば、使い勝手そのままでナウくなると思いましたまる twitter.com/ichirowo/statu… 2021-10-05 15:57:32

新卒向け研修資料「テスト文字列に”うんこ”と入れるな」を公開しました 代表の松井です。 弊社インフィニットループでは、近年「新卒ファースト」を合言葉に社内教育に力を入れています。 先日、主に新卒向け（それ以外の参加者も多くいましたが）に、「テスト文字列に”うんこ”と入れるな」という講義を行いましたので、その資料を公開します。 なぜ人は入力欄に「うんこ」と入れてしまうのでしょうか。 それはどういう経路で社外に漏れ、防ぐには何をすべきなのでしょうか。 タイトルはアレですが、内容は至って真面目に書いています。 悲しい事故を防ぐために「仕事中にはふざけないこと」など、新社会人に必要なメッセージを強く込めたつもりですので、ぜひ本資料をあなたの会社での研修にも役立てていただければと思います。 ツイート

原曲よりもイケてるカバー曲を知るのが好きで 俺が原曲よりもイケてるって思ってるカバー曲は １，フェイウォン　- 夢中人（原曲　クランベリーズ - dreams) ２，エルレガーデン - FunnyBunny (原曲 pillows - FunnyBunny ３， I Will Always Love You - Whitney Houston ( 原曲 ドリー・パートン - I Will Always Love You ４，鮎川麻弥 - Ζ・刻をこえて (原曲 Neil Sedaka - Better Days Are Coming って感じだけど、 オススメの曲はあるかね？

GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。 TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに TablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック

こんにちは、スマートニュース株式会社の紀平です。 SmartNews のアプリ内では、最近 WebView を使った機能を多数公開しております。そのうちの一つにショッピングチャンネルという機能があるのですが、今日はそのショッピングチャンネルのタイムセール枠で以前発生した、謎のプチフリーズ問題の調査手法をご紹介します。 tl;dr 特定の Android 端末でプチフリーズが発生した 再描画領域を減らすことで現象は改善した Chrome の Tracing 機能を利用し、ブラウザのソースコードまで参照して、ついに根本原因まで突き止めた タイムセールで起こった問題 タイムセールは、SmartNews のショッピングチャンネル内において WebView で提供されている、期間限定のお得な商品をアグリゲーションした機能です。EC サイト各社のご協力の上にご提供しております。内部は HTML5 で開

margin-bottomではなくmargin-topを使う派である旨をツイートしたら理由を尋ねられたので、それに対する回答です。大きくは次の3つです。 末尾の要素の存在が任意である場合が多いため Stackレイアウトとの取り合わせやすさのため 隣接セレクターを使った場合分けができるようにするため CSS、基本コンポーネントの上にマージン取る派と、下にマージン取る派がいると思うですけど、自分は今までずっと下で。というのは、その方が直感的だと感じるからなんですけど、見出しの下って結構縮めるよね？それを上マージンでやると結構頭こんがらがらない？って思うんだけどどうなんだろう — Takazudo (@Takazudo) January 12, 2021 上です — 全部入りHTML太郎 (@_yuheiy) January 12, 2021 なぜですか? — u (@uknmr) Januar

イエソドのコアメンバー。中央が創業者で CEO の竹内秀行氏。 Image credit: Yesod 各種 SaaS のアカウント発行・権限設定を自動化するクラウドプラットフォーム「YESOD（イエソド）」 を開発・提供するイエソドは17日、プレシリーズ A ラウンドで DNX Ventures と ANRI から2億円を調達したと発表した。同社にとって、初めてのベンチャーキャピタルからの調達となる。 イエソドは2018年9月、竹内秀行氏（現在 CEO）らにより創業。竹内氏は東京工業大学大学院在学中に2社を起業、その後、ユーザベース（東証：3966）で SPEEDA、NewsPicks、FORCAS の基礎開発に携わった人物だ。現在は、ユーザベースのグループ各社のチーフテクノロジスト、UB Ventures のテクノロジーパートナーを兼任する。竹内氏は以前、Excel 上でデータ可視化を