sakito

Design Technologist at Cybozu. デザインシステム作ってま…

sakito

Design Technologist at Cybozu. デザインシステム作ってます。内容は個人の見解も含みます。

マガジン

  • Cybozu Designers&Researchers

    • 227本

    サイボウズのデザイナーとリサーチャーのnoteをまとめたマガジンです。デザイン、リサーチ、アクセシビリティなど様々な取り組みについてお伝えしていきます。 サイボウズ デザイン&リサーチ:https://design.cybozu.co.jp/

  • kintone Design Magazine

    • 43本

    kintoneデザインチームのメンバーの、日々の業務や学びなどを発信しています!

最近の記事

Stacking ContextとElevationを活用して視覚と構造の階層をデザインをする

デジタルプロダクトのデザインをにとって、Stacking Contextは重要な概念です。本記事ではStacking Contextを理解し、Elevationという概念を用いて視覚と構造の階層化をデザインするということについて説明します。 Stacking Contextとは何か?Stacking Contextは、Webページ上の要素が積み重なる順序を決定する概念です。CSSのz-indexプロパティと密接に関連しています。Stacking Contexは、ページ上での

    • デジタルプロダクトデザインにおける「質」と「スピード」~ SaaS Designer Advent Calendar 2023 1日目 ~

      どうも!今回はSaaS Designer Advent Calendar 2023の1日目の記事です。 ソフトウェア開発の「質」と「スピード」は @t_wada さんのスライドがとても有名です。 では、ソフトウェア開発の中でデザインにフォーカスするとどうでしょうか? デザインにおいても、質とスピードは常に対立する要素のように見えます。しかし、両者を対立構造として捉えずにどちらも大事にしていくことで、非常に効果的な成果を生み出すことができると考えています。 本記事ではデジ

      • 「私たちがデザインシステムを作っている理由」のドキュメントを公開

        どうも、kintone Design Teamのsakitoです。 今回は私たちがデザインシステムを作っている理由を社内向けに説明しているドキュメントを公開します。デザインシステム作ること自体を言語化するのに役に立ててれば幸いです。 ここからが実際に社内に公開しているドキュメントになります。 デザインシステムとは?まずはデザインシステムにそのものについてです。デザインシステムは独自の用語ではなく、プロダクトを構築するにおいて世界的に使用される概念になります。例えば有名なも

        • デザイナー向けに行なったHTML勉強会の資料を公開します

          今回はChatwork株式会社のデザイナー向けに行なったHTML勉強会で使用した解説資料をお伝えします。私は3年ほど前からChatwork株式会社の開発のサポートやデザイン基盤活動のアドバイザーとして参画しており、その活動の一環で会を開催しました。 開催の意図と目的開催概要は@emimさんが、UI設計はHTMLの理解からというタイトルでnoteに書いてくれています。企画の意図は下記のとおりです。 私としてもHTMLを知ることは、Webプロダクトのデザインに欠かせないことだ

        Stacking ContextとElevationを活用して視覚と構造の階層をデザインをする

        • デジタルプロダクトデザインにおける「質」と「スピード」~ SaaS Designer Advent Calendar 2023 1日目 ~

        • 「私たちがデザインシステムを作っている理由」のドキュメントを公開

        • デザイナー向けに行なったHTML勉強会の資料を公開します

        マガジン

        • kintone Design Magazine
          43本
        • Cybozu Designers&Researchers
          227本

        記事

          デザインシステムを育てていく

          はじめに ここ最近はデザインシステムの構築や支援を行なっています。そこで、デザインシステムを作ることが目的になっていることを感じることがあります。私はデザインシステムは作ることよりも、育てていく考え方が重要だと思っているので、その考えについてお伝えします、どなたかの参考になれば幸いです。 デザインシステムとは?まずはデザインシステムそのものについてです。デザインシステムの事例から学んでみます。 GoogleのMaterial Design GoogleのMaterial

          デザインシステムを育てていく

          Figma Config 2023に現地参加してきたレポート

          先日2023年6月にサンフランシスコで行われたFigmaのイベントConfig 2023に現地参加してきました。今回はそのレポートになります。 サイボウズとして自分と、@__amishiratori, @0b1tkの3名で参加しました。自分は英語ができなくて、一緒に行った2人は英語でコミュニケーションができるので、とても助かりました。感謝。 いざ、サンフランシスコへ!日本時間の6月18日にサンフランシスコへ飛び立つ飛行機へ! 実は初海外でもあるので、とてもドキドキしながら出

          Figma Config 2023に現地参加してきたレポート

          デザイナーチームからデザインチームへ!ユーザー体験を最高にするチームへの生まれ変わり

          こんにちは!kintone Design Teamのsakito(@__sakito__)です! 私は2023年1月からkintone Design Teamのチームリードやプロダクトのデザインプロセスなどを考えることになりました。その中の1つとしてkintone Design Teamの構成を大きく変更しました。 今回はチームの構成を変更した経緯や課題だったこと、変更してから感じている手応えを紹介します。 似たような課題を抱えている方の参考になれば幸いです。 チーム

          デザイナーチームからデザインチームへ!ユーザー体験を最高にするチームへの生まれ変わり

          2022年振り返り ~ デザインシステム,Design Technologist,デザイナーチーム,デザイン室 ~

          2022年もラストスパート。今年は自分にとってさまざまな変化を起こした年なので振りつつ、2023年になにをするのか残しておく。個人的な振り返りなので、個々の詳細はあらためて記事にする予定。 大まかに次の目次通り、4つの単位で振り返る。 デザインシステムチームのプロダクトオーナーになった年初にデザインシステムチーム(通称:Mantleチーム)ができ、そこのプロダクトオーナーになった。チームを明示的にリードするポジションになったのはこれが初めてだった。2022年の最初はかなり手

          2022年振り返り ~ デザインシステム,Design Technologist,デザイナーチーム,デザイン室 ~

          デザインシステム構築におけるオーナーの重要性

          こんにちは。ユーザー体験を最高にする活動をしているチーム、通称 Mantle チームのプロダクトオーナー(PO)をしている sakito です。 Mantle チームでは、ユーザー体験を最高にする活動の 1 つとして kinotne のデザインシステムを作っています。この記事では、デザインシステムを作る上での PO の役割や、PO がいることによる効果を実際の事例と合わせて紹介します。 デザインシステムは成長するものデザインシステムは作って終わりというものではありません。

          デザインシステム構築におけるオーナーの重要性

          ユーザー体験を最高にするkintone Design Systemsをつくってます

          ユーザー体験を最高にするチームプロジェクトオーナーのsakitoです。 以前、kintone フロントエンドリアーキテクチャプロジェクトをスタートさせたブログ記事が公開されました。 今回はこの取り組みの一つのチームである「ユーザー体験を最高にするチーム 」について紹介します。 ユーザー体験を最高にするチームとは?kintoneのフロントエンドリアーキテクチャのアプリケーション構成はMonorepoを採用し、チーム単位でオーナーシップを担うことを意識しています。開発者視点

          ユーザー体験を最高にするkintone Design Systemsをつくってます

          5月7日~8日に開催されるWeb24のFrontend Toolingセッションについて

          Web のことをただひたすら 24 時間議論する 5/7 18:00 ~ 5/8: 18:00 YouTube Live, 無料, アーカイブなし 登壇者の発言は個人のものであり所属する組織とは関係なし 5月7日~5月8日にかけてWebについて24時間議論するオンラインイベントが開催されます。 私はこのイベントの5月7日23時30分から1時の時間帯でFrontend Toolingのセッションオーナーを務めます。 この記事はFrontend Toolingセッションについ

          5月7日~8日に開催されるWeb24のFrontend Toolingセッションについて

          2020から2021

          2020年もあと数日で終わるので今年を振り返ってみる。 年単位の振り返りではなく、印象に残っている出来事単位で振り返る。 カンファレンスを企画して、中止にした コロナの発症が日本で確認される前の2019年から、日本でReactの技術コミュニティを盛り上げたいと仲間内で話をしていて、React Conf Japanを企画していた。 同時にReact Japan User Groupを立ち上げ、数名のメンバーで打ち合わせを行い、2020年が始まる頃にはReact Conf

          2020から2021

          サイボウズに転職して1年が経ったので1年間意識したことを残す

          (サムネはサイボウズから見える好きな景色) ヤフー株式会社からサイボウズ株式会社に転職して、今日で1年になった🎉 このツイートからもう1年、まだ1年か〜という感じ。 サイボウズで4社目になるが、どの会社でも1年目は組織に慣れるために色々と意識して行動したことがあるので、書き残そうと思う。 多少自分語りも入るが、いま転職したばかりの人や、これから転職する予定の人など組織に慣れるために工夫をしていこうとしている人の助けになれればなという感じ。 最後にサイボウズで感じたことも

          サイボウズに転職して1年が経ったので1年間意識したことを残す

          Design Systems community conference 「Clarity2019」 報告会に参加してきた

          9/24にdesignsystems.tokyo主催のサイバーエージェントさんで開催されたds.t #Clarity2019 Redux in Tokyoに参加してきました。 この会はClarity2019というデザインシステムのカンファレンスに参加してきた人たちの報告会です。 ハッシュタグは、#designsystems_tokyo なのでこれでツイッター検索すると実況が追えます。 Clarityとは まずClarityというカンファレンスはなんなのか?とい

          Design Systems community conference 「Clarity2019」 報告会に参加してきた

          2018年振り返りと、2019年にしたいこと

          2018年を振り返って、2019年の抱負的なことを書いてみる。 転職して2年目になったヤフー株式会社に入社して、Reactを始めて2年目の年でした。 今年はコードを書くよりも、チームのコードレビューや技術方針を決めることが多かった。 来年はコードを書けるように頑張る! もうひとつ今年から始めたものとして、Bonfire_Frontendがある。 2018年3月に1回目を行い、現在3回行なっており、幸いにも豪華な登壇者の方に協力頂き、多くの方にお越し頂けている。 2019年

          2018年振り返りと、2019年にしたいこと

          We Are JavaScripters!に初めて登壇して約1年半経った

          どうも、sakitoです。今回初noteです。 この記事は「We Are JavaScripters!【執筆初心者歓迎】 Advent Calendar 2018」の13日目の記事です。 よくWe Are JavaScripters!には参加させて頂いており、最初に登壇したのはいつだろう?と振り返ってみると、2017年6月6日に行われた8回目の会での、「ルールのあるJavaScript」というLTでした。 今の会社でフロントエンドを始めたのが2017年3月1日で、東京で初

          We Are JavaScripters!に初めて登壇して約1年半経った