この記事は eureka Advent Calendar 2019 14日目の記事です。 今年リリースしたPairsのスマートフォン向けWeb版のフルリニューアルについて、１開発者の視点から綴りました。 こんにちは！Pairs JP Web Teamの新（@ooDEMi）です。主にPairsのWeb版開発を担当していますが、最近はデザインシステム構築の推進もしています。好きなデザインシステムはShopifyのPolarisとAdobeのSpectrumです。 さて、皆さんはデザインシステムというものをご存知でしょうか。 ここ数年で名前をよく聞くようになったデザインシステム。 いったいデザインシステムとは何なのかなぜPairsにデザインシステムが必要なのかPairsのデザインシステムはどのように作られているのか本記事ではこれらについて語ります。 デザインシステムとは何か最近は様々な企業が自社

styled-componentsとCSS-Grid組み合わせるとなんかいろいろ出来るぞ！みたいな事に気付いて、meguro.cssの枠に空きがあったので「ここで話すしかない！」みたいな感じで参加しました。前回はゴリッとJSなdart-sassの話をしてしまったのですが、今回はかなり趣旨に使い話ができた気がします。 ちょっと前から「もうちょっとUI（UXではなくあくまでUI）についてもう少し素振りしたいなー」みたいなことを思っててDaily UIをCollect UI 見たりしながらチマチマやっていた所でいろいろ脱線したのが今回の産物になります（電卓とかの例はまさにそれです） 元がデザイン素振りのためのものだったりするので、パフォーマンスだったりブラウザ依存とかは考慮してない夢の世界の話ですが、一部は真面目に使えるケースもあるんじゃないか？と思ったりもしています。 画的に地味ですが、タイム

This article is going to assume that you already understand the fundamentals of icon design. And focus on how to prepare and export them for usage on Web, iOS and Android. We will use Sketch to organize, manage and export the icons. We will also focus on monochrome icons that can be tinted dynamically on all platforms. 🎉 🎉 Sketch 42 🎉🎉I started writing this article before Sketch 42 was release

Exporting an SVG file from Sketch is easy—but the process of making an efficient and reliable SVG, tailored to your needs, is a far greater topic. It’s actually such a complex topic that I’ve made a whole course about it, which I’m releasing today after 8 months of development! But this article isn’t a sales pitch; it’s a technical guide to a common question designers ask. A common question when e

http://rosenfeldmedia.com/books/the-user-experience-team-of-one/最近では日本でもUXデザイナー/エンジニアというUXを専門とする職種が見受けられるようになってきました。 しかし、まだまだUXデザイナーの実務までイメージできる人は、少ないのではないでしょうか。 実際に私もそうでした。UXチームを作ったけど、何をすればいいのか分からない。UXを体系的に改善していきたいけど、何から始めればいいか分からない。そういった人は多いと思います。 The UX Team of Oneでは、UXをゼロ(コンセプト含め)から創り上げていくプロセスを実務レベルで解説してくれています。実際に使われているサンプルも多く紹介されていますので、成果物のイメージも付きやすいです。 この本の著者のLeah Buleyは、Adaptive Pathなどを経て10

This case study aims to chronicle how we created a design system at WeWork. I’ll share insight into our process, product design, the tools we used to create and implement the system, and also how we document and share the system with our team.

追記: GatsbyJS@2 以前の古い記事です。最新のチュートリアルはこちら 以前 neet.love というハローワークの対義語みたいなドメインを購入したのですが，こんなクソみたいなドメインに使い道なんてあるわけもなく，あろうことかスクワッティング状態になってしまっていたのでポートフォリオを作ります．求職してなさそうですね． MediumのReactタグで「GatsbyJSでポートフォリオ作ったで」というような記事を拝見したので今回はGatsbyJSを採用します．（どの記事だったかは忘れました） GatsbyJS is 何GatsbyJS（ギャッツビージェイエス）は，React用の 静的サイトジェネレーター です．「静的サイト」というのは与えられるパラメータによって情報が変化したりしない純粋なHTMLページのことですね． 類似プロジェクトとしてGitHub Pagesでよく用いられてい

※本記事は旧版です。最新版（2019年9月）はオフィシャルサイトからPDFをダウンロード可能です。 この作品は The Kanban Guide for Scrum Teams の翻訳です。クリエイティブ・コモンズ 表示 — 継承 4.0 国際 ライセンスの下に提供されています。 目的カンバンにおけるフローベースの考え方は、スクラムフレームワークとその導入を強化・補完する。チームがこれからスクラムを使う場合でも、これまで長年スクラムを使ってきた場合でも、カンバンは適用可能である。 この「スクラムチームのためのカンバンガイド」は、Scrum.orgのコミュニティのメンバーとカンバンのコミュニティのリーダーがコラボレーションして生み出した結果である。その両者が協力して「スクラムチームのためのカンバンガイド」を支援している。カンバンとスクラムを組み合わせれば、プロのソフトウェアの実践者が恩恵を受

以下はJeff Crossmanさんの同名の記事を翻訳（一部縮約）したものです。 GEのデザインシステムは2012年にGE社内の多数の利用者と多様なデザインパターン（UIコンポーネントとインタラクションパターン）を支援するために作成された。これは世界に散在している40,000人のソフトウェアエンジニアが一貫性のあるソフトウェアを作れることを目標に１０人のデザイナーで構成されたチームによって作られたものだった。dave croninの発表を見るとこのチームが直面した課題に関して知ることができる。 最初のデザインシステムは内部的には成功だったがそれには成長痛もあった。ボタンやテキストボックスなど、一般的なケースでは問題なかったけど、マッピングやデータヴィジュアライズなど、より複雑なニーズにも対応する必要があった。アプリケーション単位の修正や拡張の要求はデザインシステム本来の目的に反しており、非

We all make buttons. They are everywhere in our site and application designs. In Sketch, there is really no easy way to handle buttons. Once you have made one, you are good until you have to make the next one, then you have to resize that rectangle so that it fits your new label, constantly checking the distances to make sure it is all spaced correctly. Creating a dynamic button in Sketch with Pad

Hey, I would like to share my experience on the process of creating a digital product for UI marketplaces, briefly describe the initial development stages and showcase Sketch hacks that could provide you a significant time saver while producing a decent resource for sale. IntroOver the past few years, the complexity and time-consuming costs of creating a UI kit or an Inspirational kit have signifi

https://dribbble.com/shots/1679085-Mobile-UI-Blueprint-freebie私の職場ではUIについてのマニアックな談義が行われることがあります。アプリやwebだとかのデザイン会社なので周囲にはUIやUXのプロフェッショナルが集まっていて、『UI談義』の文化が根付いています。 UIを解剖するためのUI談義UI談義とは、UIオタクで集まってUIのことをひたすら考察し合うだけの集まりです。ここには職種問わず誰でも参加が可能で、UIデザイナーはもちろん、iOSデベロッパー、Androidデベロッパー、PM、マネージャーなどなど、あらゆるタイプの人が集まります。 UI談義のテーマは突如設定されます。普段利用しているアプリのちょっとしたインタラクションが気になったらそこでUI談義が始まります。iOSのアップデートでApple純正アプリのUIが変わったタイ

サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。

When I applied to intern at IBM Design in June 2015, I didn’t know what I was getting myself into. Of course I’d heard of IBM, but I didn’t really know much about their products or what their designers were actually doing. As it turned out, I joined IBM right in the midst of a massive transformation, as the Big Blue dinosaur looked to reinvent itself as a design-led business, investing more than $

We got our first glimpse of Apple’s new san-serif typeface, San Francisco, when the Apple Watch was unveiled in September of 2014 — a new typeface designed specifically for legibility at small sizes on a tiny, high-resolution screen. Big news for type nerds and Apple fans alike. San Francisco was the first publicly released, Apple-designed typeface in over 20 years. Its name is familiar, harking b