You’re Burning Budget on Design: An Argument for Modular Design
I recently wrote an article about how to make your designs as modular as your code. As I explained in the article, Atomic Design is an incredible way to create designs that can be replicated and communicated easily, across your team. Along with increasing your ability to communicate within your team, modular design also makes changing styles across your design incredibly simple. Done properly, mod
No more ガタンッ――React／Redux、Atomic Design、CSS Modulesを取り入れたアメブロのフロントエンド開発の裏側
No more ガタンッ――React／Redux、Atomic Design、CSS Modulesを取り入れたアメブロのフロントエンド開発の裏側：大規模ブログサイト表示速度改善 大解剖（2）（1/2 ページ） 2004年から続くブログサービス「アメブロ」が2016年9月にシステムをリニューアル。本連載では、そこで取り入れた主要な技術や、その効果を紹介していく。今回は、ReactやRedux、Atomic Designなど、フロントエンドを構成する技術について。 2004年から続くブログサービスである「アメブロ」は、2016年9月にシステムをリニューアルしました。本連載「大規模ブログサイト表示速度改善 大解剖」では、そこで取り入れた主要な技術や、その効果を紹介していきます。初回である前回の「アメブロでReactやIsomorphic Web Applicationを採用した理由――その成
Marginalia
すべて Tech Idea Diary 2024-06-26 WebブラウザにおけるOpenTelemetryの自動計装PoC: Trace via Service Worker TechWebOpenTelemetryService Worker 2024-06-23 Cloudflare Image Transformationで画像最適化した TechCloudflareBlog DevAstro 2024-06-20 Angular: Rendering EffectsとBusiness Effects TechAngularSignals 2024-06-14 計画の優先順位ではなく目標の優先順位を決める Idea雑記言語化 2024-06-13 Angular: Model Inputsを使ったカスタムフォームコントロール実装例 TechAngularSignalsForms
Marginalia
すべて Tech Idea Diary 2024-07-03 読んだ本 2024-Q2 Diary読書 2024-07-03 Angular: v18.1で @let 構文が追加される TechAngularTypeScript 2024-06-26 WebブラウザにおけるOpenTelemetryの自動計装PoC: Trace via Service Worker TechWebOpenTelemetryService Worker 2024-06-23 Cloudflare Image Transformationで画像最適化した TechCloudflareBlog DevAstro 2024-06-20 Angular: Rendering EffectsとBusiness Effects TechAngularSignals 2024-06-14 計画の優先順位ではなく目標の優先
ナカザンドットネット
バズレシピAdvent Calendar 2023の25日目です。 adventar.org クリスマスイブで張り切ったので、もう疲れた！ 込み入った料理はしたくねえ！ しかし冷蔵庫には消費期限がギリギリの豚こまと、大量の白菜が眠っておられる！ どうする！ そんなときに役立つのが、「無水白菜カレー」です。 www.youtube.com 食材としては、ほぼ白菜と豚肉とカレールーがあればいけます。すりおろしニンニクも必要ですが、チューブでええんじゃ。後の調味料は家にあるな！ヨシ！ 玉ねぎを切らなくても甘く美味しくなるので、怠いときにめっちゃオススメ。レシピだと甘みのためにお砂糖を追加してるんですが、実はカレールーを甘口のやつにしておけば、お砂糖の工程がなくても全然大丈夫です。我が家は4歳児のためにバーモントカレー甘口のストックが豊富なので、砂糖なしでいけます。 そんなわけで調理工程の様子〜。
自分にとって未知の技術、なんだか怖い。 いずれ身に付けなければならないとは思いつつも、とても難しいものに思えてなかなか踏み出せなかったです。しかし考え方を変えてみたらあっさりとその壁を乗り越えて次の段階へと自分をステップアップさせることができました。 考え方の面から誰かの助けになればと思い、初投稿します。 この記事について JavaScriptについてjQuery全盛期に学習した後、技術的に停滞していた自分がついにReactに触れて個人アプリを作るようにまでなったので、その体験を簡潔に書きます。同じような境遇の人にとって新しい一歩を踏み出せる助けになると嬉しいです。 想定している読者は「ある技術を過去に習得したがレガシーになりつつある人」や「新しい技術を学んだ人が羨ましいが尻込みしてしまっている人」など、新しいことに焦燥感を抱えている人です。 jQuery時代に取り残された焦燥感 私は社会
デザインコラボレーションの最前線（Design & Collaboration イベントレポート）｜のっち Ryosuke Inoue
こんにちは。のっちです。 現在デザインツールが世の中に溢れていますが、その中でも特に注目されているのがデザインと他分野のコラボレーション。 今回は、デザインツールの最新事情やそのコラボレーションについて、各分野の有識者たちがお話ししてくださった『Design & Collaboration』に参加しました。どれもこれから伸びそうだなと思わせてくれるものばかりでした。今回はそちらのイベントレポートです。 （ちなみにトップ画像の文字の周りの円たちは、色々なツールのテーマカラーを散りばめたものとのこと。どれがどれだかわかりますか？） InVision Studioが誰でもアクセス可能にまずはInVision Studioについて、Sketchの書籍でも有名な吉竹さん（@ryo_pan）にお話いただきました。 InVision Studioは、InVision社が新しくリリースするデザインツールで
Webデザインの今が分かる良書「Webデザイン必携。」が、Kindleセールでかなりの激安です。 デザイナーとしてWeb制作で役立つ必須知識、基本的な考え方、効率的なデータの作り方など、制作の現場ですぐに役立つ知識やテクニックを身につけることができる一冊です。 表紙のデザインは、完全に生ビールです！ 参考写真: 写真AC ※版元様に許諾を得ています。 ここ数年で、Webデザインは大きく変わりました。 ビットマップからベクターが主流になり、ページはマルチデバイス対応、パララックスなどのインタラクション アニメーション、最小要素からデザインする「Atomic Design」など、成果物やワークフローも進化を続けています。 本書は制作現場のナマの知識が学べ、Webデザインの初心者だけでなく、現役でバリバリ活躍している人にもオススメの本です。 Kindle月替わりセールで書籍版の半額以下、さらに2
「デザインの歴史」から「Atomic Design」まで。rootが選ぶ、デザイナーとしての資質を高めるオススメ本【6月版】 ｜ブログ｜root｜芯を問い、成長に貢献する
デザインパートナーとして企業の課題解決や事業成長に携わる私たちは、作って終わりではなく、作った後の支援が欠かせません。そのためには、「プロダクト戦略」、「デザイン開発」、「組織デザイン」の3つの領域を横断した知見が求められます。 この記事では、領域を横断するデザイナーとなるためrootメンバーが日々読んでいる本から、今月のオススメをご紹介します。 先月のオススメ本の紹介はコチラ。 姿勢としてのデザイン 「デザイン」が変革の主体となるとき 姿勢としてのデザイン「デザイン」が変革の主体となるとき 著者：アリス・ローソーン デザイン界の歴史と文化を振り返り、直観・創意・問題解決能力に根ざした現代の柔軟なメディアとして、デザインのラディカルな変貌を描いています。現代ではデザインが社会でより影響力を持つ時代が到来しており、事例を元にどのような姿勢でデザインに取り組んでいるかが紹介されています。 少々
Atomic Designを実案件に導入して運用してみた結果はどうなのか - I'm kubosho_
かつてAtomic Designの考え方と利点・欠点という記事を書きました。 この記事内で日本ではAbemaTVで使われていると書きました。そして今でもAbemaTVではAtomic Designの考えに基づいてコンポーネントが作られています。 AbemaTVでの経験を通じて、Webアプリケーションのクライアントサイドの開発者という立場からAtomic Designはどうなのかについて書いていきます。 なおAbemaTVではビューライブラリとしてReactを使っているので、React前提の話になります。 Atomic Designに基づくのは実際どうなのか 基本的には良いです。良い点について書いていたらAtomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comやAtomic Design powered by React @
フロントエンドエンジニアのキャリア戦略
この記事は？ フロントエンド領域が複雑性を増してきており、経営効率化の戦略として部門としてフロント、バック、インフラで完全分業の体制を取る会社が増えてきました。それに伴い、完全未経験からフロントエンドエンジニアになる人たちも増えてきましたが、単にフロントの現場で開発をしているだけではエンジニアリング全般を含む広範な基礎は身につきにくく、能動的に全領域を勉強していく必要があります。その上で、フロントエンドに強みを持つエンジニアとしてバリューを発揮していくには、具体的にどのようなキャリア戦略があるのか？この記事では考えていきます。 著者は？ AWS環境でのフロントエンド開発中心に、エンジニア3年目。新卒2年間は自社サービス系の大企業でフロントエンドを担当。教育ではなく「崖に落とされて自力で登る」。裁量を得るには、先輩方を技術力で倒してロールをもぎ得る、といった競争主義が根付く徹底したハードボイ
アトミックデザインによるスタイルガイドの基本設計 スタイルガイドの書き方にはさまざま方法がありますが、参考になるのが、米国のデザイナーであるブラッド・フロスト氏が提唱する「Atomic Design（アトミックデザイン）」というアプローチです。 http://bradfrostweb.com/blog/post/atomic-web-design/ アトミックデザインでは、スタイルガイドによるCSSの設計を「Atom（アトム）」「Molcules（モルキュール）」「Organism（オルガニズム）」「Template（テンプレート）」「Page（ページ）」という5つのステージに分けて考えます。 Atom（アトム） もっとも小さい粒度 Molcules（モルキュール） アトムが組み合わさってできたモジュール Organism（オルガニズム） 組織-モジュールが合わさったデザイン Templa
かれこれ４、５年くらいAtomic designに触れてきて、こんなに使いづらいのになんで使ってるんんだっけ？ってなったので、脳死と妥協のAtomic designを辞めたいというモチベを高め、重い腰を上げて考えてみました。 前提 今回の趣旨はあくまでも共通コンポーネントにフォーカスしています。なのでpages(人によってはscreens,containersと命名しているかも)は考慮しません。 また、atomic designのデザインサイドの思想そのものについては言及しません。あくまでもディレクトリ構成の運用上の課題にフォーカスします。 ディレクトリを分ける意味とは そもそも、components/配下をフラットに並べずにグルーピングする目的は何でしょうか。 使いたいものが明確な場合はディレクトリ構成はあまり寄与しません。「あのButtonコンポーネントを使いたい」であれば、ディレクト
こんにちは。DMM.comでフロントエンド開発を行っている@ma9toです。 DMMでは各プロダクト毎でフロントエンドの技術選定が違いますが、私が担当しているしているプロダクトでは、一部Reactを採用しています。 この記事では、ReactのComponentの設計をチームで行ったときの反省と、次はどのように行うと良さそうか、現時点で思うところをまとめておこうと思います。 Componentとは まず、Componentとはどういうものか振り返っておきたいと思います。 Componentとは、UIを構成する一部分と考えることができます。 ReactはComponentを組み合わせることので、より複雑なUIを構築していくようなComponentベースのViewライブラリです。 Reactを利用することで、Componentのコードのカプセル化を容易にし、独立したComponentの実装を可能
デザインツール「Figma」を5名のデザインチームに導入して半年経った振り返りとビジネスメリットについて｜Marino yokoi
はじめまして＆こんにちは！株式会社スペースマーケットデザイン部マネージャーの横井 @rinoside です。 2019年4月にSketchからFigmaへの移行を行い、運用をはじめて約半年が経ちました。会社組織で移行を検討している方に少しでも参考になればと思い、移行した経緯やそのメリット・デメリットなどの振り返りをまとめてみました。 主に金銭面などのビジネス的なメリットや移行時・運用時の振り返りをメインとしているため、基本的な使い方などの解説は省いています。 ある程度Figmaの知識がある方で、組織導入を検討している方・どうやって導入・説得するか悩んでる方に参考にしていただければ幸いです。 ※この記事はスペースマーケットアカウントのマガジンにまとめられます Figmaの前に使っていたツールFigmaの前はSketchを使っていました。といってもSketchも実はその年にPhotoshopか
Heavyweight teams up with startups to rethink and design interfaces that drive value. We fuse expertise in CX, UX, and UI design to create seamless experiences across apps, devices, and (physical) touchpoints. Making complex applications seem simple is what we do best. On Medium, we write about our experiences designing great products for start-ups. Learn how you can grow your product. Component B
DevLOVEの「Atomic Design ～堅牢で使いやすいUIを効率良く設計する〜」に行ってきた - hiromitsuuuuu.log();
6/29（金）に開催されたDevLOVEのAtomic Design回に行ってきました。 devlove.doorkeeper.jp 『既存のフローからアップデートする アジャイル・デザインフロー』というタイトルで、アジャイル開発を進めるうえでのUI変更に強いデザインフローについてのお話でした。 Atomic Design本には結構コードが書かれているんだけど、今回はコードの話ではなく、何故Atomic Designの考え方が必要なのか、Atomic Designの構造をどう考えていけばいいか、@ygoto3_ さんが実践してるデザインフローができるまでのステップの話がありました。 内容はスケッチノート置いておきます。 どう分割するかがいまいち理解できていなかったけど、ユーザーの行動と合わせて責務で考えるのがすごく分かりやすかった。スケッチノートに書いてる今までのデザインフローでまだやって
ygoto3.com
現在開発担当している AbemaTV で、昨年末にパナソニックさんのスマートテレビ VIERA 向けにアプリケーションをリリースしました。AbemaTV リモコンボタンで AbemaTV にアクセスできます。今回このアプリケーションの UI を開発するにあたって、新しいデザインワークフローを導入しました。 本記事では、 Story-Assured Design というデザインワークフローを、現在プロダクト開発で直面しているデザインの課題とともに紹介します。 Story-Assured Design とは？ Story-Assured Design はその名前が示しているように、ユーザーストーリーを保証することを目的とした UI デザインのワークフローです。UI デザインを３つのステップに分けて行います。 ストーリーデザイン デザインの構造化 視覚情報デザイン 一番重要なユーザーストーリーの
This document discusses atomic design and introduces the presenter, Yukako Iida. Atomic design is a methodology for building user interfaces that consists of 5 levels - atoms, molecules, organisms, templates, and pages. Atoms are the smallest UI elements, molecules are groups of atoms that form common building blocks, organisms are complex UI components, templates are page layouts, and pages are t
転生会議を支える技術「フロント・サーバー編」〜使ってみたいをふんだんに盛り込んでみた〜 - LIVESENSE ENGINEER BLOG
はじめに この記事は転生会議を支える技術「インフラ編」〜サイト爆速化への道〜の後編になります。 転職会議の2年ぶりのエイプリルフール企画として、「転生」をテーマに転職会議のエンジニアがそれぞれやりたいことを盛り込んだ内容になっています。 無料で豪華商品をゲット！今すぐ転生しろ！ このブログでは、前編と同じく「技術的挑戦をしながら転職会議システムのレンダリング最速を目指す。」について、詳しくご紹介します。 転生会議の技術要素 転生会議は次のような技術に支えられています. GKE Firebase golang Elixir Phoenix Vue Nuxt fastly webp nginx Route 53 今回はフロント・サーバー編です！ フロントを担当した山下と、APIを担当した中村、OGP画像生成を担当したse-yaの3人でお送りします。 やったこと1 Nuxt.js ✕ Atomi
新しいデザインシステムの手法 Atomic Designとは｜NEWS｜株式会社INDETAIL（インディテール）
最近、社内の9階フロアではインフルエンザが蔓延してバタバタと感染者が増えています…。 次は我が身ではないかと内心ビクビクしながら過ごしていますrockdです。 そんな中、今回はAtomic Designについての話をします。 簡単にいうと、デザインを設計するための手法の1つです。 2013年にBrad Frostという人がWebフロンドエンド用に開発しました。 UIの粒度を原子に置き換えて各ステージごとに管理し構築していきます。 [vimeo 109130093 w=640 h=360] Brad Frost: Atomic Design (Webdagene 2014) from Netlife Research on Vimeo. では、実際にどのようなステージに分けられるのか紹介します。 5つのステージ Atomic Designでは5つのステージに分けて管理します。 Atoms(ア
2020年4月に、意匠権に関わる法律「意匠法」が改正されます。 今回の意匠法改正では、UIに関わる部分が大きく変更されます。いろいろ学ぶ機会がありインプットしていく中で、特にWebやスマホアプリに関わるデザイナーに意匠法を知る、または調べるキッカケになればと思ったのと少しの願いを込めて書きました。 何が変わるのか詳しくは特許庁のサイトで自ら確認して頂きたいが、UIに関わる点では、「画像」が保護対象に加わっています。画像という単語には違和感がありますが、この「画像」は、ソフトウェアやアプリ上のネットワークを通じて利用の都度提供される画像や物品以外の場所にに投影される画像が対象となります。WebやスマホアプリのUIからプロジェクターなどで投影されるUIも対象になったことになります。 また、「画像」には、操作画像と表示画像の2つが対象となります。操作画像は「操作の用に供される画像」で、検索や登録
Forkwell さんの勉強会で登壇させて頂きました！フロントエンド最前線という感じの攻めた勉強会だったのですが、話した内容の反響がとても良かったというお話です。 撮っていただいた写真 資料について こちらが発表した資料になります！ 内容ですが、過去にも話した AMESTAGE で使っている Atomic Design について触れているものになります。 Web Components っていうのはかなりイケていて、 Atomic Design っていうのはコンポーネント志向で Web を作っていく上でとっても良い指標なので、みんな是非取り入れてみてくださいね！ツールに振り回されずに、もっと上のレイヤーでものづくりしたらよいのでは？という内容になっております。 フロントエンド最前線な勉強会について思ったこと 資料の中にもありますが、JavaScript 界隈の技術の移り変わりはとてつもなくて
こんにちは。 デザイナーの原です。 さて、皆さんは「Atomic Design」をご存知でしょうか？ 今回は、Sketchを活用した「Atomic Design」の実践方法についてご紹介したいと思います。 Atomic Designとは パーツ・コンポーネント単位でデザインを行っていくデザインシステムのことです。 通常のページ単位のデザイン方法とは異なり、パーツ同士を組み合わせて制作していく方法を指しています。 原子（Atomic）を一番最小のパーツとし、分子（Molecules）、有機体（Organisms）、テンプレート（Templates）、ページ（Pages）の5つの単位に分けられています。 原子（Atomic） パーツの中で一番最小のパーツを指し、UIの基礎的な要素になります。 他の原子と組み合わさることで、分子になります。 分子（Molecules） 2つ以上の原子から構成され
こんにちは、CTOの鈴木です！前回のブログ執筆から気がつけばなんと2年経過！今回はスペースマーケットのメインであるWebサービスとアプリ部分の技術スタックについてまとめてみようと思います。 技術スタックについては定期的にまとめており、変遷については以下の記事に書いています。 2016年 スペースマーケットを支える開発環境とアーキテクチャ – 2016年秋編 2017年 スペースマーケットの技術スタック【2017年末版】 前回2017年からの差分としてわかりやすいように、新規追加は太字、撤退したものに関しては取り消し線をつけてみてます。それでは見ていきましょうー。 Web Frontend 言語 Javascript Typescript GraphQL 言語としては、Universal Javascriptを引き続き推奨し、プロダクト施策などに絡めてTypeScriptへの移行を進めていま
こんにちは、こくぼ @yusuke_kokubo です。株式会社ファントムタイプ @PhantomType から来ました。 ちょっと前の話ですが、宮城県の松島に行ってきました。ちょうど紅葉がきれいな季節でした。 写真は朝日を浴びる福浦橋です。 今回はMisocaの受発注機能がどのようにつくられているのか、という話をしたいと思います。 Misocaの受発注機能とは 皆さんMisocaと言えば「請求書を簡単に作れて取引先に送るところまでやってくれるサービス」というイメージが強いではないでしょうか？ 受発注機能ではそれに加えて、取引先とのコミュニケーションもサポートしています。 Misocaが掲げる「仕組みで世の中をシンプルにする」「事業者間の取引を最適化する」といったビジョン・ミッションを推進するための野心的な取り組みです。 受発注機能のスクリーンショット 例えば、取引先に見積書を送ったとしま
Marginalia
すべて Tech Idea Diary 2024-07-03 読んだ本 2024-Q2 Diary読書 2024-07-03 Angular: v18.1で @let 構文が追加される TechAngularTypeScript 2024-06-26 WebブラウザにおけるOpenTelemetryの自動計装PoC: Trace via Service Worker TechWebOpenTelemetryService Worker 2024-06-23 Cloudflare Image Transformationで画像最適化した TechCloudflareBlog DevAstro 2024-06-20 Angular: Rendering EffectsとBusiness Effects TechAngularSignals 2024-06-14 計画の優先順位ではなく目標の優先
atomic_design
パソコン、タブレット、スマートフォンなどのデジタル家電を複数台所有するのが当たり前になりつつある今日この頃。 あなたはまだページ・スクリーンごとにイチからデザインをしていますか？ アトミックデザインなら、デザイン要素をさまざまなページ、画面サイズ、デバイスに対応させることができ、開発が効率化されます。 アトミックデザイン（atomic design）とは アトミックデザインはモジュラーデザインの考え方を元にブラッド・フロストさんが考案したUIデザイン手法。 モジュラーデザイン(Moduler design)とは、製品の各モジュールを作成した後、それらを繋げて完成品を作る手法。アトミックデザインにおけるコンポーネントがいくつも組み合わさったような製品のパーツをモジュールといいます。 インターフェイス作りは、常に最小の素材 = Atom(原子) の組み合わせであるべき”を基本理念に、原子が分子
異業種からWeb開発者としての生き延び
現在、会社の技術横断組織のメンバー（主にフロントエンド担当）として技術支援（壁打ち的やレビュー）やエンジニアの評価制度・採用、組織を横断したエンジニアのコーチング・メンタリングなどエンジニア組織を良くするための課題解決にそこそこの裁量をもたせてもらって事業に携わらせてもらっています。 そんなことをしている私ですが、そもそも製薬業界（学位も薬学修士を修めています）から業界転職をしており、気がつけば6年ほど経っていたのと、最近は自分のキャリアについて聴かれることも増えたので一度、開発者目線で「どんなことを？どういうモチベーションで？こんなことになったんだっけ？」を少し振り返ってみようと思います。 ※1. 今の自分の視点から振り返りつつ、またカッコでたびたびツッコミを入れながら書いていきますので、文体の時系列に違和感があるかもしれませんがなるべく書いている時の自然な気持ちを大事にしたいのでご了承
この記事は第二のドワンゴ Advent Calendar 2019の10日目の記事です。 この記事の概要 Webフロント開発をしている際に、npmライブラリのマイグレーションって結構コストかかるので自動化したいよねって動機の元、そのためのツールとしてDependabotとかRenovateとかあるけど、どっち使うのが良さそうかなという検討をしました。 ただし、あくまでもnpmライブラリの更新という側面からの記事のため、他の言語やパッケージ管理システムからの側面についての検討はされていないことをご留意ください。 また、時間に追われて書きなぐった内容になっていて後で書き直すかもしれませんがご了承いただければと思います。 結論 先に結論だけ書いてしまうと、Github EnterpriseやArtifactoryなどのprivate npm registryを使っている自分たちの環境ではReno
こんにちはかみむらです。 プロダクト開発で、デザイナーとフロントエンドエンジニアの円滑なコミュニケーションは必要不可欠です。 しかし、実際に開発を進める上で、円滑化する仕組み作りは悩ましい問題です。 そこでStorybookの紹介です。 これはコンポーネントをカタログ化して、管理できるツールです。カタログ化することで、双方の行き違いを限りなく少なくできます。 そして、FigmaやAdobe XDと連携できるなど、開発者とデザイナーの両方に嬉しい拡張機能もあります。 今回はReactにStorybookの導入と、基本的な使い方から便利なアドオン(拡張)を紹介していきます。 Storybookの公式サイト https://storybook.js.org/ 前提create-react-appで作成したプロジェクトを想定しています。あらかじめプロジェクトを準備してください。 npx creat
こんにちは。 iOSエンジニアの廣瀬です。 今日は、"（しら）ずにお金が（たま）る"自動貯金アプリ『しらたま』（ https://sirata.ma/ ）の開発時に実施した エンジニアとデザイナーの相互理解 についてお話しします この記事（Atomic Design を導入してみた話） においての活動でもそうなのですが、このような取り組みを行うきっかけは、何か課題を感じた場合です。 この記事では、エンジニアとデザイナーの相互理解 を実現するために起こしたアクション、および何故アクションをとったか、どういう課題を感じていたのかをお話ししていきます。 コミュニケーション エンジニアとデザイナー間のコミュニケーションについて課題を感じていました。 チームで開発している以上コミュニケーションは欠かせないものです。 コミュニケーション についてどういう風に課題を感じていたか説明します。 iOSアプリ
2022年7月25日紙版発売 2022年7月22日電子版発売 手島拓也，吉田健人，高林佳稀 著 B5変形判／448ページ 定価3,498円（本体3,180円＋税10%） ISBN 978-4-297-12916-3 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 新しいフロントエンドの入門書決定版！ 本書はReact/Next.jsとTypeScriptを用いてWebアプリケーションを開発する入門書です。 WebアプリケーションフレームワークNext.jsはReactをベースに開発されています。高速さに裏付けされた高いUXと，開発しやすさを両立しているのが特徴です。
Structuring your Storybook
The more information you have, the harder it is to find what you're looking for. At first, your Storybook has a handful of components, so it's easy to keep track of things. But as the number of components grows, so does the organizational complexity. You end up with questions like “Where did we put that component again?” and “Is there a story for this state?” That leads to confusion, or worse, dup
独学・未経験のUIデザイナーがコンポーネント指向を勉強してみた - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
はじめまして、デザイナーの小林です。 すっかり暖かくなりましたね。 今日はランチタイムに会社近くの公園で桜を見てきました。毎日春を感じてウキウキしています。 「春」といえば、入学や就職など新しい一歩を踏み出す人が多い季節ですよね。 私も最近、プロダクトオーナーからUIデザイナーの道に一歩踏み出しました。 デザインは独学、未経験でUIデザイナーになったのですが、クラウドワークスではリードデザイナーの上田と一緒にデザインガイドラインのブロジェクトを担当しています。 デザインガイドラインのプロジェクトを担当する中で、まずはじめにAtomic Designなどコンポーネント指向から勉強していきました。独学でも勉強していたつもりですが、UIデザインに関する知見をよりスピーディに得ることができたように思います。 そこで、今回は新人UIデザイナーの私がどのようにコンポーネント指向を勉強していったのかをご
プロダクトマネージャーの鈴木（ @kechol ）です。PMと言いつつフロントエンドを書いたりもしています。 前回の記事でバックエンドとフロントエンドの構成についてご紹介しましたが、選定の理由等まで深堀りできなかったため、今回はフロントエンドの構成についてもう少し詳しく、これまでの技術選定の振り返りも兼ねてご紹介したいと思います。 「Assured」の開発が始まったのは2020年8月頃なので、その頃からの変化を感じながらお読みいただければ幸いです。 前提 新規事業として過去の負債がないまっさらな状態から開発をスタートしている 開発するアプリケーションは Single Page Application の構成である 言語 / フレームワーク 言語は TypeScript、フレームワークは React を利用しています。 現代のフロントエンド開発において、型の恩恵を受けつつより安全に開発が可能
2018年6月6日、DMM.comが主催するイベント「DMM meetup」が開催されました。今回のテーマは「ReactとAtomicDesignからみるコンポーネント開発」。フロントエンド開発において重要性が増しつつあるコンポーネント開発手法について、「React」と「Atomic Design」の2つをキーワードに、各分野のプロフェッショナルたちが自身の知見を語ります。プレゼンテーション「Alternative Atomic Designをさがして」では、よりデザインの吉竹遼氏が登場。 Atomic Designをどう使うか 吉竹遼氏（以下、吉竹）：では、LT2人目の吉竹です。よろしくお願いいたします。 今日来てる方で、エンジニアの方はどれくらいいらっしゃいますか？ （会場挙手） やっぱりさすが、多いですね。デザイナーは……？ （会場挙手） ディレクターさんは？ （会場挙手） ちょっと
要素還元主義的なAtomic Design
2016年7月20日 著 Atomic Designの考え方と利点・欠点という記事を読みました。Braad Frost氏の提唱するAtomic Designについては、個人的に氏を尊敬していることもあり、しばらく前から追いかけています（書籍もプレオーダー済みではあるけど、完成途上のものを読み進めてはいない）。自分の観測範囲の限り、英語圏では比較的普及している一方、Atomic Designについて日本語で読める記事というのはあまり多くない印象を抱いており、そういう意味で貴重というか参考になりました。特に欠点として挙げられている しかしデザイナーからすると、Atomic Designの考え方でデザインすることは難しいかもしれません。 実際、今回デザイナーへAtomic Designについて説明しました。 ただ、デザインしてもらうときはコンポーネント単位ではなくページ単位でデザインしてもらう従
Atomic Designとは 〜Atomic Designを使ったコンポーネント指向のUI開発：序〜 - UGAP Engineer's Blog
はじめに UI（画面）コンポーネントを切り出したいときにどういう粒度で切り出したらいいか迷う時があります。 適切な粒度で切り出しておかないと、位置を組み替えたりデザインを修正したい場合に、使い勝手が悪くて作り直しになってしまうからです。 メンテナブルなUIコンポーネントに切り出すにはどうしたらよいでしょうか。 いろいろ調べた末、Atomic Design（アトミックデザイン）というアイデアに行き着きました。 このAtomic Designを使ったコンポーネント指向のUI開発を（序）（破）（Q）のシリーズを使って紹介したいと思います。 （序）では、Atomic Designがどのようなものかをご紹介します。 （破）では、Atomic Designを導入した際にうまくいかなかった点と工夫した点をご紹介します。 （Q）では、具体的な開発例をご紹介します。 このシリーズが同様に困っている現場の参考
前回 Atomic Design を実案件に導入した話で触れたコンポーネントリストを作り始めたとき、個人的にいろいろと学びがありました。 コンポーネントリストやスタイルガイドは、フロントエンドエンジニアとデザイナーが協業して作る必要がありますが、この協業がなかなかうまくいかず、スタイルガイド運用をワークさせるのは難易度が高い印象がありました。 自分自身、今まで携ってきた開発プロジェクトにおいて、うまくワークしたと思えるスタイルガイド作りができなかったのですが、現在のプロジェクトで開発初期からスタイルガイドを作り、リリース後、運用フェーズまでワークさせることができました。 本記事ではフロントエンドエンジニアとデザイナーが協業してスタイルガイドを作り始めるにあたって気をつけたことについて書いていきます。 共通言語としてのスタイルガイド 開発において、スタイルガイドが欲しい理由は、開発中のコミュ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新技術は怖くない、jQuery時代からReact時代へ勇気を出して踏み出した - Qiita
2016年、Webデザインの考え方、Photoshopの効率的な使い方、制作現場の生のテクニックが分かる生ビールみたいな本
進化するレスポンシブWebデザイン 「SGDD」とは何か？ (2/2)
Atomic designを辞めて利用目的別のディレクトリ構成に移行する
チームで行うReact Componentの設計 - Qiita
How we’re using Component Based Design
Atomic designで助かった人たち
意匠法改正でデザイナーは何に気をつけたらいいのか｜たけてつ
勉強会に登壇した話とデザインエンジニアリングについて
Atomic DesignとSketchの活用 | ajike switch
スペースマーケットの技術スタック【2019年末版】 | スペースマーケットブログ
Misocaの新しい受発注機能がSketchでデザインされてる様子 - 弥生開発者ブログ
DependabotとRenovateってどっちがいいの？ - Qiita
Storybookを使ってReactの開発をX倍早くしよう！！便利なアドオンの使い方を紹介
エンジニアとデザイナーの相互理解 - Money Forward Developers Blog
TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発
フロントエンドの技術選定の振り返り（2022年版） - Assured Tech Blog
Atomic Designから派生した、“オルタネイティヴ”な5つのデザインシステム
フロントエンド視点：デザイナーと協業して作るスタイルガイドの難易度を下げる