『Tailwind CSS実践入門』 出版記念基調講演「Tailwind CSS実践入門」出版記念イベントの基調講演で使用したスライドです。 イベント詳細 → https://pixiv.connpass.com/event/310073/ 書籍 → https://gihyo.jp/book/2024/978-4-297-13943-8
Token StudioとTailwindを導入しているプロジェクトでFigma Variablesをどう使っていくか｜kiiita
こんにちは。UIデザイナーとフロントエンドエンジニアとしてフリーランスでお仕事をさせていただいている北國です。 今携わっているプロジェクトが複数ありますが、以下のようなプロジェクトが多いです。 FigmaにToken Studioプラグインを導入している Webフロントエンド開発にTailwind CSSを導入している 双方において、デザイントークンをベースとした設計・管理をしている 2023年6月のFigma Configにて発表された新機能の中にVariablesという機能があります。Token Studioを使っているプロジェクトでは、Token StudioとVariablesの役割分担を考える必要が出てきました。 今後の方向性の候補は3つです。 このままToken Studioを基幹としてデザイントークンを管理する Variablesにすべて移行する Token StudioとV
課題を捉え、解くための書「Think N1 シート」を公開しました - inSmartBank
こんにちは、スマートバンクCXOのtakejuneです。最近はプロダクト本部という組織を立ち上げ、プロダクトマネージャー、デザイナー、UXリサーチャー、カスタマーサポートのチームをマネジメントしています。このチームでは、各職種の持つノウハウを型化して再現性を持たせる取り組みを行っており、その中で「Think N1 シート」というツールを作りました。このエントリーでは、その中身をご紹介したいと思います。 「Think N1 シート」とは？ 「Think N1 シート」は、新しいプロダクトや機能のWhyとWhatを定義するための設計書です。 これを使うことで、N1インタビューからユーザーの課題を捉えて、それを解決する方法をさがす「スマートバンクらしいプロダクトデザインプロセス」を誰でも実行できるようになることを目指しています。シートと言っても、物理的な紙ではなくNotionのテンプレートとして
最小公倍数のプロダクト戦略（FigJamフォーマット公開）｜広野 萌
プロダクト戦略をたてる際に活用できるフレームワークはこの世に無数に存在します。 時代や業種やフェーズやプロダクトの性質に応じて最適なフォーマットが異なるため、どういったフォーマットを選びとって進めていくか迷う人も多いでしょう。 そこで、私がいままで数々の新規事業立ち上げとプロダクトグロースをおこなってきた経験から、プロダクト戦略をたてる際にほとんどの場合で使っているオレオレFigJamフォーマットをご紹介します。 最小の工数で最大の効用をうみだすという意味で「最小公倍数のプロダクト戦略」と題しました。 （本記事は 2023/3/14 に開催されたFigmaの主催イベント「デザイン経営」のセッションでお話したフォーマットを公開する目的で書いたものです） 新規事業創出のためのFigJamフォーマットスタートアップに限らず新規事業を立ち上げるためには大体の場合「Product Market Fi
Tailwind考 - uhyo/blog
皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ
これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props
これまでとは異なるCSSフレームワークが登場しました！ Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数（カスタムプロパティ）で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。 単独でも他のフレームワークとの併用も可能で、カラーのみグラデーションのみシャドウのみタイポグラフィのみメディアクエリのみといった使い方もできます。 Open Props Open Props -GitHub Open Propsとは Open Propの使い方 Open Propsのデモ Open Propsとは Open PropsはこれまでのCSSフレームワークとは一味も二味も異なる、CSS変数（カスタムプロパティ）ベースのCSSフレームワークです。巧妙に設計されたWebデザイントークンは、一貫性のあるUIコンポーネントを素早く実
事業開発者・プロダクトマネージャーが知っておくべきフレームワーク7選｜Shin
プロダクトマネージャーという仕事はビジネス・デザイン・エンジニアすべてのスキルが求められる総合格闘技のような仕事です。その分、やることも多く忙しくなりがち。 しかし、再現性の高いプロセスというのは仕事が変わってもそのまま活用できます。その代表例がフレームワークです。 今回は世の中に数あるフレームワークのうち、プロダクトマネージャー・事業開発者が絶対知っておいた方が良いと判断したものを厳選してみました。 プロダクトマネージャー向けフレームワーク4選1. Product Prioritization Frameworkhttps://www.product-frameworks.com/Gusto-Product-Prioritization.htmlこちらはもうプロダクトマネージャーであれば無意識に考えていてほしいくらいシンプル、かつ大事なフレームワークです。 expected：期待値の大き
Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Less code. More speedSpend less time writing UI code and more time building a great experience for your customers. import * as React from "react"; import { Box, Center, Image, Flex, Badge, Text } from "@chakra-ui/react"; import { MdStar } from "react-icons/md"; export default function Example() { return ( <Center h="100vh"> <Box p="5" maxW="320px" borderWidth="1px"> <Image borderRadius="md" src="h
デザインに活かせるフレームワーク20｜金 成奎
久しぶりのnote投稿です。今回は自分の勉強がてら、UX・情報設計・アジャイル開発など、デザインに関わる様々な局面で知っておくと役立つフレームワークを集めてみました。 有名なものからデザイン以外にも使えそうなものまで幅広く選んでいますので、気になるものがあれば改めて実作業に生かすなり、掘り下げて研究するなり、資料に生かすなりしてもらえると良いのではないかと思います。 （ちなみにここでいう「フレームワーク」とは共通して用いることのできる考え方や思考の型や枠のようなもので、いわゆるCSSフレームワークの類ではありませんので、その点ご了承ください） 1.UXの5段階モデル まずは有名なUXの5段階モデル。アメリカのUXデザイナーであるJesse James Garrett 氏が著書『Elements of User Experience（ウェブ戦略としての「ユーザーエクスペリエンス」）』にて提唱
色々書き比べた結果Tailwind CSSにしたという話 - Qiita
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
[深津さんから教わった！]フィッシュボーン図で課題を整理する｜Shino | Software Designer
マネーフォワードでは、THE GUILD代表の深津貴之さんをアドバイザリとして招き、日頃からサービスデザインに関する助言をいただいております。 先日は、社内のサービス開発力の底上げを目的とし、フィッシュボーン図を使った課題整理のワークショップを行っていただきました。 PM、デザイナー、ビジネスのメンバーを中心に、100名近くが参加しています。 今回はそこで学んだ内容をご紹介します。 表面的に対処してしまう問題 プロダクト開発の現場には、日々さまざまな要望が届きます。 それらに対処する際に気をつけたいのが「表面的に対処してしまう問題」です。 例えば次のようなケースです。 ユーザーが「検索機能を強化してほしい」と言ったので、パワフルな検索オプションを搭載しました。ユーザーの声にそのまま従っており、その背景にある課題は分からないままです。 機能は追加したが効果がでなかった、効果がよくわからない、
![[深津さんから教わった！]フィッシュボーン図で課題を整理する｜Shino | Software Designer](https://cdn-ak-scissors.b.st-hatena.com/image/square/6523460e346c6d5bcc1abae1a494e29f771cac67/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F48408702%2Frectangle_large_type_2_8c9ce465cde76a27143ab6529dad285c.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
Hacker UI - 開発者向けのWeb UIフレームワーク
Webサイトはシンプルなデザインが好みです。情報量が多いと、どこを見ていいのか分かりませんし、情報の取りこぼし（メールマガジンの送付設定など）があってイライラしたりします。 開発者には開発者に合ったUIがあるはずです。今回紹介するHacker UIはまさに開発者のために作られたWeb UIフレームワークです。 Hacker UIの使い方 スクリーンショット多めで紹介します。 ボタンです。 ボタンをアウトライン化した例。 リスト。 フォーム。 ラジオボタン。 チップ。 ツールチップ。 モーダル。 タイポグラフィ。 Hacker UIはボタンなどがはっきりしており、フラットなデザインになっています。シンプルで、何が何を行うUIなのかが分かりやすいです。開発者以外の人にとっては殺風景に見えるかも知れませんが、開発者にとってはこれくらいのデザインがさっぱりしていて、使いやすいのではないでしょうか。
コンセプトダイアグラム | Dentsu Isobar – デジタルエージェンシー
電通デジタルは、クライアント企業と社会・経済の「変革と成長」にコミットする総合デジタルファームです。<br />\r\n生活者に寄り添うクリエイティビティと高度なテクノロジーを軸に「トランスフォーメーション」「テクノロジー」「クリエイティブ」「コミュニケーション」の4つサービスを統合的に提供しています。</p>\r\n"}}" id="text-b2952da908" class="cmp-text"> 電通デジタルは、クライアント企業と社会・経済の「変革と成長」にコミットする総合デジタルファームです。 生活者に寄り添うクリエイティビティと高度なテクノロジーを軸に「トランスフォーメーション」「テクノロジー」「クリエイティブ」「コミュニケーション」の4つサービスを統合的に提供しています。
事業の戦略や分析を円滑にするビジネスフレームワーク20選
ビジネスの現場において、物事を的確に、素早く把握するにはフレームワークと呼ばれる型を使うのが有効です。フレームワークには戦略の方向性や分析を行うものなど様々なパターンがあり、上手く活用すれば状況判断や意思決定のスピードを一気に上げられます。 しかし、どんなときにどのフレームワーク使えば良いかわからないというかたもいらっしゃるのではないでしょうか。今回は、事業戦略や経営戦略、企業分析に役立つ便利なフレームワークを紹介します。 事業戦略や企業分析に役立つフレームワーク20選 1.SWOT分析（スウォット分析） 自社を取り巻く環境の現状分析をすることができる手法です。内部環境（強み、弱み）、外部環境（機会、脅威）の観点から経営環境を整理していきます。通常、外部環境の脅威、機会、内部環境の弱み、強みの順に周りの社員などの客観的な意見も含めて分析します。経営環境を棚卸しすることで、経営戦略の改善・革
Scooter - Scooter has been deprecated
Scooter was a SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox. You can still find Scooter on Github. Big thanks to Dan, Abraham, Hugo, Taylor, Muhammad, Alexander, Kaelig, Patrick, and Seiei for contributing. License Created by and copyright Dropbox, Inc. Released under the Apache license.
Scooter - Dropbox社製のデザインフレームワーク
企業でWebサービスを作る際に、決まったデザインフレームワークがあると全体的に統一感が出て、かつデザインに対する悩みが少なくなるのが利点です。その結果、開発がスムーズに進むことでしょう。 今回はその一つ、Scooterを紹介します。作成したのはDropbox社になります。 Scooterの使い方 ScooterはSCSSで作られているので変数やMixinなどが定義されています。実際のデザインについて紹介します。まずはグリッド。 写真と説明。 リスト。 右寄せ。 アラート。 ボタン。 吹き出し付き。 フローティングカード。 フォーム。 アイコン。 こんな感じで文字だけのアイコンも表現できます。 モーダル。 ツールチップ。 ラベル。アイコン付きなのが良い感じ。 塗りつぶしたラベル。 タブ。 カレンダー。 Scooterはデザインはもちろんのこと、カラーリングにもDropboxっぽさが溢れていま
ペライチも複数webページもすばやく作り始められるやつ「Rin 4」作った - MEMOGRAPHIX
Rin 4 というのを作った。 Rin 4 - A lean, gulp-based HTML and SASS boilerplate by sanographixRin 4 は「ペライチのWebページをすばやく作り始められるboilerplate」である Rin3.0 をアップデートしたもの。 Rin は、僕が普段 web サイト制作時に使っているフレームワークというかBoilerplate的なやつです。CSS の汎用コンポーネントをできるだけ持たないフレームワークを目指していて（ペライチとかだと結局各サイトでデザインの要件が大きく異なる場合が多いため）、環境構築だけ gulp ですばやく行うことに特化してつくっている。 バージョン4の新機能Rin 4 では、複数ページが素早くつくれるようになった。今までペライチのサイトばかり作っていたんだけど、そうでなく複数ページ作るときも使えるよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tailwind UI - Official Tailwind CSS Components & Templates
NiceGUI
GitHub - dropbox/scooter: An SCSS framework & UI library for Dropbox Web.
