2023年のCSSは0ランタイムにしたい - console.lealog();
したいよね？ 事の経緯としては、 とある新規プロジェクトで、技術選定をすることに 開発の土台はViteで、フレームワークはJSXが使えるやつに決まった さてCSSはどうやって書こうかとなる あれこれ考えて、とある方法に決めた というのをまとめた、まあポエムの域を出ないメモです。 CSS ModulesやらTailwindやらCSS-in-JSやら手法はいろいろあれど、どれが今の推しかっていう。 求めるもの 個人的に、CSSつまりはブラウザで表示されるUIをスタイリングするためのツールセットに求めるもの。 0ランタイムである 最終的に`.css`ファイルとしてブラウザで読み込まれる なんでもJSにしない CSSの書き味を損なわない だいたいのCSSセレクタが問題・制約なく動作する マークアップ部と1ファイルにコロケーションできる HTMLとCSSは同居させたい 非同期にロードできる JSと同
定性的ユーザビリティテストの進め方｜ちなつ｜note
🎄Money Forward Design Advent Calendar 2022の20日目の記事です🎄 こんにちは！マネーフォワードでデザイナーをしている三上です。 今回は、私がUI/UXデザインを担当している「マネーフォワード クラウド勤怠」で実施したユーザビリティテストについて、まとめてみました。 何のユーザビリティテストを実施したのか 今回は打刻画面の改修の中で、テストを実施しました。 ユーザーのアンケートから「間違った打刻をしてしまう」といった声が多くあったからです。 打刻の操作は多くのユーザーが毎日行うため、影響も大きいです。そこでリリース前にデザインプロトタイプを用いてユーザビリティを確認しようと考えました！ 旧・打刻画面新・打刻画面（ユーザビリティテスト用）実施手順テストの目的 ・考えたデザインがユーザーが間違えずに安心感を持って打刻できるものになっているか ・↑にな
rootのデザイナー育成 ─デザインプログラムマネージャーの2人が語る現状と理想─｜root Inc.｜note
こんにちは！root採用広報担当です。 rootは「Design Doing for More〜デザインの実践を個から組織・事業へ〜」をVisionに、事業の成長によりそい、デザインを実践しようとする人々を支え、世界をより良く前進させていくことを目指すデザインファームです。 今回は、2021年にrootへジョインし、デザインプログラムマネージャーとしてデザイナーの育成にも取り組んでいる関口と山野にインタビュー。rootではたらく中で感じたデザイナー育成の現状と理想について聞きました。 関口太一（せきぐち たいち） 武蔵野美術大学工芸工業デザイン学科卒業。グラフィック・インテリア・プロダクト・UX/UIデザインの経験だけでなく、ベンチャー企業の経営や大企業の新規事業に多数従事した経験をもとに新規事業のPMFや既存事業のグロースをデザイン面で支援。現在は、デザインラボgood Inc.の経営及
【デザインファイルを属人化させないFigma活用・コラボ方法】 - Qiita
前提情報 開発環境はスクラム、2週間のスプリントですが、デザインに関しては、レビュー、仕様変更、デザイン修正、サクッと実装、リリース！、ユーザーの声を聞きサクッと修正のようなイメージで基本的に超高速に小回りきかせて、顧客への価値提供は担保しつつ、スピードと顧客の体験重視な対応をしています。そこに前述の9時間の時差と1万キロの距離が加わるので、それ相応の工夫が必要なのは必然かと思います。 これらの前提からFigmaのデザインファイルで実現しなければいけないことは主に4点あって： 1. 最新マスターデザインの場所を明白にする プロジェクト内の構成 以上。 超絶にシンプルですね。単純にこのファイル: Master Design Files の中に、自分が担当しているプロダクトの最新マスターデザインを全部入れています。ルールは”このファイル内で常にデザイン更新する”です。 ファイル内のページ構成
2022年もいろいろUXリサーチの教材をつくったので無料配布するよ！｜storywriter
この記事は UXリサーチ/デザインリサーチ Advent Calendar 2022 の 12月24日 の記事です。クリスマスイブ！ 羽山 祥樹です。日中は某大手企業で働きながら、2年前に日本ウェブデザイン株式会社を起業しました。UXデザインやUXリサーチのコンサルティングやコーチングをする会社です。 ここ数年ずっと、自分のもっているノウハウをひたすら外化して、SlideShareやメディアでの連載記事で「このとおりやれば誰でもUXデザイン・UXリサーチができる」という、具体的でやさしい教材にしてガンガン無償公開する、ということを続けています。 30代の前半に「自分の手元にあるノウハウもお金も自分が死んだら灰になるだなあ。だけど、若い人たちを育てるために遣えたら、自分の命もいくらかは未来に何かを遺したことになるかもしれないなあ」と思いました。それ以来、ノウハウやら何やらできるだけ公開して、
腰痛持ちの人必見！股関節を柔らかくする自宅ストレッチ【プロトレーナー監修】
『Esquire（エスクァイア）』は1933年にアメリカで誕生以来、ファッションやライフスタイルにとどまらず、アート・カルチャー・時事ニュースなどの情報を届けてきたインターナショナルマガジン。そんな80年以上の歴史を誇る『エスクァイア』のDNAを具に継承し、さらに日本のユーザーにふさわしい内容へとローカライズしたうえで日々配信する、それが「エスクァイア・デジタル」です。 男のオフビジネス デキるビジネスパーソンは、オンだけでなくオフも充実しているもの。しかし、センスを磨く暇がないのも現状だ。そんな男たちのために、“男磨き”のノウハウを伝授しよう。 バックナンバー一覧 マイロ・ブライアントは、アスリートに必要なアドバイスとサポートを提供するプロのパフォーマンスコーチであり、経験豊かなジャーナリストしての顔も持っています。自身も50代である彼は、著書である（年をとらずに年を重ねるための究極のガ
FigmaプラグインによるFigmaのハックとワークフローの強化｜Hiroki Tani
この記事は2022年5月11日に開催されたFigmaのカンファレンス『Config 2022』のセッション内容を記事として再編集した内容ものです 私は医療系テックスタートアップのUbie株式会社でデザインエンジニアをしている谷（@hiloki）です。 この記事では「デザイン業務を少し楽にしたい」そのために自らFigmaプラグインを作ってみたいと考えてもらえるような話をします。 Figmaの特長FigmaにはAuto LayoutやコンポーネントのVariants、チームでコンポーネントやスタイルを共有するTeam Libraryなどパワフルな機能がたくさんあります。 それら以外で私がFigmaで好きなのは、Figma Communityというコミュニティ機能と、そこに展開されるたくさんのFigma Pluginです。 Unsplashから直接Figma上に写真を読み込めるプラグインや、色の
IllustratorとCSVで大量の名刺データを素早く編集する！｜osanai / ui designer
デザイナーのみなさん、自社の名刺の入稿データってどう管理してますか？ ぼくはデザインデータ（.ai）とテキストデータ（.csv）に分けて管理しています。 最初はデザインデータだけで管理していたんです。というのも2018年にぼくがカンムに入社したときの社員数は十数名で、名刺のデザイン修正時には十数個のデータを修正するだけで済んでいたので、少し手間だったけど数年に1回の頻度だったら「まあいっか」と。 ところが2020年は社員数が30人以上になりまして、ここまで増えると全員分の名刺入稿データをサクッと編集できるような仕組みを作りたいなと。30回以上データを開いて30回以上同じ修正をするのは精神衛生上も良くないですからね。 今回は名刺データの管理方法についてご紹介します。「もっとラクに管理・入稿する方法あるやで」って方は是非教えてください 👨🏻💻 ちなみにこれはカンム Advent Cal
A framework for building Open Graph images
EngineeringProductA framework for building Open Graph imagesWe recently set about creating a framework and service for automatically generating social sharing images for repositories and other resources on GitHub. You know that feeling when you make your latest hack project public, and you’re ready to share it with the world? And when you go to Twitter to post a link to your repository, you just s
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
2021年のTypeScript環境構築で絶対入れるべき「better-typescript-lib」の紹介 - Qiita
こんにちは。この記事は筆者が開発した「better-typescript-lib」を宣伝する記事です。これは、導入するだけでTypeScriptプログラムがより型安全になるという素晴らしいライブラリです。あくまで型定義なので、導入してもランタイムの挙動は何も変わらず、バンドルサイズなどへの影響もありません。 better-typescript-libの導入法 ここに記載されているのはv1 (TypeScript 4.0 〜 4.4向け）のインストール方法です。v2 （TypeScript 4.5〜）ではインストール方法が変わり、最初のnpm installのみで良くなります。詳しくは次の記事をご覧ください。
どのようにPlatformチームの組織変更をしたか
Platform チームの@deeeeeeeetです． Platform チームは2年前にMercariがMicroservicesの移行を始めたときに一緒に立ち上げられたチームです．Platform チームはMicroservicesを動かすための基盤や開発や運用のためのツールセットなど提供しています．立ち上げ時は自分を含めて2-3人で始まったチームですが2年が経ち10人を超えるチームにまで成長しました． チームのメンバーが増えるほど1チームとして動くには限界がきており，またMicroservices化が進めば進むほどチームの負う責任範囲も広くなりCognitive load (認知負荷) も高くなっていました．これらの課題を解決するために組織変更を行い，Platform チームを複数の専門性に特化したチームに分割しました． 本記事ではチームのデザイン，チームが分離しても独立性を保ちつつ
ヘッドレスCMS + S3 静的ウェブページで記事投稿システムをサクッと実装してみた（microCMS + Amazon S3） | DevelopersIO
はじめに みんなが大好きな Amazon S3 の「静的ウェブサイトホスティング」。 サーバー不要でお手軽にウェブページを公開できる便利な機能ですが、HTMLを触らずにちょっとしたお知らせなどを更新できるようにしたい、というケースも多いと思います。 今回はそんな用途にぴったりの「ヘッドレスCMS」を利用して、S3 でホスティングしている静的ウェブページに管理画面から記事を投稿できるシステムを、1 時間ほどの作業でサクッと実装してみました！ ※本記事では「とりあえず動くシステム」をできるだけ簡単に、最短で体験することを目指しているため、セキュリティやフロントエンドの実装技術については掘り下げていません。 ヘッドレスCMSとは？ CMS（Content Management System）とはユーザー管理、記事の投稿、データベースなどがセットになったコンテンツ管理システム全体を指します。 最も
ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話 - ZOZO TECH BLOG
こんにちは。ZOZOTOWN部フロントエンドチームの菊地（@hiro0218）です。 2021年3月、ZOZOTOWNは10年ぶりのリニューアルをしました。この記事では、そのリニューアルで再考したCSS設計について紹介します。 背景 今回のリニューアルでは、ウェブとアプリが部分的に共通のデザインになりました。 アプリ ウェブ このデザイン刷新には、CSSの大規模変更が必要です。チーム内で検討を重ね、最終的に、大きく書き換えるのであればコンポーネント駆動開発1ができるようにCSS設計を見直すべきという結論に至りました。 CSS設計で特別に考慮する点 現在、ZOZOTOWNのフロントエンドは、「Classic ASP」から「React」へのリプレイスを進めています。新規開発や変更のタイミングで、Classic ASPに依存した実装をReactへ改修します。 ただ、今回のリニューアルではClas
これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
実装の仕組みが分かれば簡単！画像の一部を切り取るカットアウトを実装するCSSとSVGのテクニック
Webページやアプリで見かける、通知や注目の役割を担うカットアウト（画像の一部を切り取る）を実装するCSSとSVGのテクニックを紹介します。 画像に小さなバッジをつけたり、画像をグループ化する際に重ねたり、ヘッダやヒーローで画像を重ねたり、さまざまなUIで見かけます。 Thinking About The Cut-Out Effect: CSS or SVG? by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カットアウトとは アバター画像で見かけるカットアウト カットアウトの実装 1: clip-pathを使用する カットアウトの実装 2: CSSのマスク カットアウトの実装 3: SVGのマスク アバター画像を重ねるカットアウト カットアウトの実装 1: clip-pathでマスク カットアウ
移行のメリットはコストを上回るか？ JavaScriptのTypeScript化で気をつけるべき5つのポイント
技術とノウハウを武器に、膨大かつ複雑なデータの「検索」「分析」「可視化」といった課題を解決するフォルシア株式会社が「FORCIA Meetup #2」を開催しました。2回目の今回のテーマは「2020年度にエンジニアが取り組んだこと」。東川翔氏は、マイクロサービスをJavaScriptからTypeScriptに移行したときの気づきについて発表をしました。 JavaScriptからTypeScriptへの移行プロジェクトが始動 東川翔氏（以下、東川）：「JavaScriptからTypeScriptの移行のプロジェクトに関して気を付けた点」について話していきます。 まず自己紹介です。東川と申します。新卒の2年目で新規旅行アプリの開発をしています。興味のある言語はTypeScriptやPostgreSQLです。最近はクライアントアプリケーションの構築にも興味があって、Next.jsに関してアドベン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
蒸し豚｜NHKあさイチ
非エンジニアのSQL学習ことはじめ 〜1日1時間・3か月でSQLがそこそこできるようになる勉強方法とおすすめ書籍〜
noteのフロントエンドApp分割
