はてなブックマーク

DMMのエンジニアで『React開発　現場の教科書』の著者でもある石橋啓太さんにお声がけ頂いて『ReactとAtomicDesignからみるコンポーネント開発』でお話をさせて頂きました。 テーマは個人的に関心のあった「Atomic Designの代替」を選びました。Atomic Designと言えば、いまや国内外含めてコンポーネント設計をする際に多くの人が参照する概念ですが、すべての環境に適切かと言えばそれはまだ疑問を残す余地があります。 「Atomic Designを採用してみたけどしっくりこなかったので自分たちに合った概念を考えてみた」という個人・組織がいるのはMediumの記事などを通じて知っていたので、そういった事例を集めてみたら面白いんじゃないかなと思ったのがこのテーマを選んだきっかけです。完全に趣味です。 Atomic Designへの疑問 Atomic Designについて知

The DTA wants to improve people’s experience of government services. This means improving skills in government and helping agencies create services that are simple, clear and fast. Digital Transformation Agency は政府が提供している公共サービスのデジタル化を助けるガイドの役割を担っています。記事中で「再設計された」と書かれていますが、どうやらこれまで https://www.dta.gov.au/ だったのを、試験的に https://beta.dta.gov.au/ へ移行・アップデートしているようです。DTAの役割についてaboutを見ると 政府のサービスに対する人々の経験を向上

「仕事お願いしたいので、誰かいいデザイナー紹介してくれませんか」と尋ねた・あるいは尋ねられた経験がある方もいらっしゃると思います。自分も仕事の相談を頂いたり、仲介役として紹介する機会があるのですが、冒頭のように「デザイナー紹介してください！ / 仕事お願いしたいです！」の一言だけだと正直紹介しづらい実感があります。 この記事では、自分自身がよく質問したり、紹介する方との橋渡しのために整理している情報をまとめてみました。雛形と呼ぶには雑ですが、ぜひデザイナーに仕事の依頼を考えている方は参考にしてください。反対に、仕事の依頼がきたデザイナーさんの質問リストとしても使えるかなと思います。 前提としては、Web・アプリなどのIT系であること、採用目的ではなく発注目的であること、Facebookメッセンジャーなどライトな相談の場であることを意識して書いています。 1. 業態・プロジェクト概要 ざっく

ちなみにAdeleは「The repository of publicly available design systems and pattern libraries」と書かれているようにGithubのリポジトリで管理されており、興味がある人はプロジェクトに参加できるようです。 余談ですがサイト上やGithubでも述べられているように、このプロジェクトはAwesome Design Systemsやstyleguides.ioに影響を受けていることがわかります。 本記事ではAdele上で紹介されているデザインシステム・パターンライブラリについて触れつつ、それらを理解するためにどのような項目が設定されているのかを探ってみます。 Adeleにあるのはデザインシステムだけではない ……とその前に。Adeleの説明にもありますが、サイト上にはデザインシステムの他にパターンライブラリ（スタイルガイ

運が良いことに、自分はこれまで1冊の単著と2冊の共著を書かせて頂くという機会に恵まれました。もともと文章を書くのは好きでしたが、本を書いて出すという経験によって、ブログ記事とはまた違った知見を得ることができました。 昨年とあるイベントで「デザインツール系の書籍を書く時に知っておくといいこと」というLTをしたところ、一部の人にウケがよかったみたいなので少し内容を補足してご紹介します。デザインツールのみならず、文章を書くうえで自分が気をつけていることも折り混ぜていますので、執筆予定ないよ！な方でも何かしら参考になるのではと思います。 本を書く前に なぜ出版するのか？ 技術系の本の場合、紙の本で出すということには様々な制約が付きます。まずはアップデートの問題。校了直後に対象ソフトがメジャーアップデート、という悲劇は多くの著者さんが経験あると思います。電子書籍であれば継続的なアップデートも可能です

この記事は何？ DMMさんで「Atomic Design & Design Systems」をお話させて頂いた時に、自分が読んだ記事をまとめたものになります（いちおう全部目は通してる…ハズ）。デザインシステムについて書かれている記事ってまだまだ少ないのですが、情報源自体もまとまってないんですよね。実際、自分が↑の資料を作る時はほぼ手探り状態でした。 この記事がデザインシステムについてこれから学ぼうと思われている方の力に少しでもなれたら幸いです。例によって海外記事は僕の認識違いが起きている可能性があるので、「これそういう記事じゃないから！」というツッコミがあればぜひお願いします。 （追記：記事執筆後も参考資料が増えてきたため、資料作成時に限らず参考にできるものを追加しています） まずデザインシステムについて学びたい時は Design Systems Handbook InVisionが作成し

DMM.com ラボさまの社内勉強会にお声がけ頂き、「Atomic Design & Design Systems」というテーマでお話させて頂きました。 当日の構成 勉強会のテーマがAtomic Designについてだったので、前半はGUILDさん勉強会でお話させて頂いた内容を少し持ってきました。 後半ではAtomic Designの視点をもう少し広げて、Design System（毎回デザインシステム表記とどっちにしようか悩む）全般について、僕が調べたり考えたことをまとめました。 と言っても自分は何かしらのデザインシステムを取り入れたり実践したりと言った経験はありません。そのため、内容のほとんどは海外の事例や記事の引用・意訳になります。Design Systemについてまとまった情報が知りたい！という方には有益かと思いますが、基本的なことは知ってるよーという方にはあまりお役に立てないと思

今やUIデザインの定番となったSketchの使い方や便利なプラグインについてhttps://www.sketchapp.com/Facebookグループ「Sketch Japan」もぜひ。https://www.facebook.com/groups/1403075229952941/ 公式のサンプルデータということで、これを紐解くことによりSketchを作っている会社がSketchをどのように使っているのかの一端が見えてくるのではと思い、中身を覗いてみることにしました。 全体像 DLした.sketchファイルを開くとApps Pageに各テーマの画面が並んでいます。 解像度のベースはiPhone Xです。5種類のテーマ x 7画面 = 35画面が並んでおり、ある程度のシチュエーションに耐えられるように作られたことが伺えます。 それでは手始めに最上段の「Food」アプリのレイヤー構造を眺め

THE GUILDさまのクライアント向け勉強会にお声がけ頂き、「Atomic DesignとSketch Symbol」というテーマでお話させて頂きました。 せっかくなので、この記事では当日どのような内容をお話させて頂いたかについて軽く触れてみたいと思います。 当日の構成 構成は「Sketchの話→Atomic Designの話→SketchとAtomic Designの話」という流れを意識しました。そもそもSketchとAtomic Designは別軸の話ですから、それぞれの話が最後にうまくリンクする構成ができたらよいんじゃないかなと。ゲームでよく見るAルートとBルートが合流して最終ルートに向かう、みたいなイメージです。うまくできたかは…… なお、当日はディスカッションの材料とするために、オンラインで質問の投稿や質問への投票ができるsli.doというサービスを利用しました。これまではGo