TL;DR 結論：アトミックデザインを意識して作ると良いです。 はじめに Unity2018.3で抜本的に仕組みが変わったUI(Prefab)システム. そこで過去の経緯を含めて今時の効率よくUIを開発する方法を解説してみました。 また、UIは一般的に「簡単に作れる」と思われがちですが、設計を考えないで開発した場合、 あらゆる問題を引き起こします。 そのため、設計を行わないで作った時のアンチパターンも紹介していきます。 対象読者 Unity 初心者〜中級者 UNITE 基準ならBeginner ~ Intermidiate 過去の歴史的経緯 ~Unity5 時代 Unity4~Unity5時代 (AD2014~2016) ではUnity4.6 でuGUI は存在こそしましたが、殆どが NGUIという有償アセットを購入して開発されることがほとんどでした。 そのころはPrefabの子要素に別の
『Designing Interfaces - Patterns for Effective Interaction Design』の第3版が2020年2月にオライリー社から発売されました。第2版はUI設計の際に辞書的にとても参考にさせてもらっているし、そこから10年後の改訂版なのでとりあえず手に入れてみました。が、分厚い英語本をサクサク読める能力が自分にはないので、紹介されているUIパターンの変化だけでも押さえておきたく、目次ベースで変更がある場所を自分なりに洗い出してみました。10年前の版との比較をすることで、いまのUIのトレンドも少し見えてくるかもしれない。 第3版どころか第2版も完全に読み込んでいるわけではないので、間違ってるところがあったらごめんなさい、指摘してください。あと比較しているのはパターンのみで、前段となる理論編には触れていません。理論編あんまり読んでない。 前書き第3
Designer X Engineer Development とは デザイナーとエンジニアでどのように開発を進めていくか。 デザインをプロダクトに落とし込むプロセスについて、どのような設計方法・ツール・コミュニケーションを行なっているかなどを共有し、よりよいプロダクトを作るために議論をする勉強会です。 Roppongi Designersとは 2018年9月に誕生したばかりの新しいデザイナーコミュニティです！ 「共創しながらチームを目的を達成に導くUIデザインの実現」をテーマに、日々現場で試行錯誤しているメンバーと一緒に、学びながら考えてみませんか？ もちろん勤務地が六本木でない方、これからデザインにチャレンジしたい方、デザイナーを目指す学生の方も大歓迎です。お気軽にご参加ください！ Slackグループもあります！参加自由です！ https://roppongi-designers.no
module.exports = { build: { postcss: { preset: { autoprefixer: { grid: true, }, }, }, } } かんたん🍟 ただし、Grid でマージンをコントロールするプロパティの gap に関しては、ポリフィルを適用することができません。 なので、悲しいけれど、これは捨てるという感じですね、IEでは。。 20180515 追記 とか嘆きましたが、なんと autoprefixer v8.5 から、 gap に対応してくれるようになりました＊ これで、gap のIE用のポリフィルも自動で実装できるようになりました！！いい時代！！！ 参考 autoprefixer の Grid 対応に関しては @tonkotsuboy_com さんが、詳細を丁寧に解説してくださっています。 AutoprefixerがパワーアップしてCSS
Atomic Designとはこんにちは。 デザイナー間で話題にされだしてから結構時間も経ってきましたが、UIデザインにおいてAtomic Design（アトミックデザイン）という考え方があります。 Atomic Designの詳しい説明は別のブログに譲ろうと思いますが（逃げ）、ざっくりいうと、UIコンポーネントをAtoms（原子）、Molecules（分子）、Organisms（有機体）、Templates（テンプレート）、Pages（ページ）の5つの単位に分けてデザインを構築していくという方法論です。 メリットとしては ・無駄なUIコンポーネントが増えなくなる ・一貫性のあるデザインをつくることができる ・UIコンポーネントが一覧化され、チームでコラボレーションしやすくなる と言ったことが挙げられます。 とりあえず導入してみるかなり前の話ですが、Sketchバージョン41でシンボルを入
ReactやVueの普及に伴い、ボトムアップで小さなコンポーネントを組み合わせてページを作る「コンポーネント駆動開発」がスタンダードになりつつあります。 このコンポーネント駆動開発は、複雑度がそれなりに高くページ数も多い中・大規模システムで採用される事例をよく見かけます。 小さな規模の画面開発でコンポーネント駆動開発を実践するとどうなるのか？ 実装やテストでどのような恩恵が得られるのか？ 保守開発を踏まえてコンポーネント駆動開発でやる価値はあるのか？ といった話はあまり聞かないので、弊社ネットプロテクションズのNP後払い事業における支払い画面のフロントエンド開発事例を記事にしてみました。 実際にやってみた感想として、小さな画面開発でもコンポーネント駆動開発の恩恵は十分に受けることができました。 Atomic Designは難しい コンポーネント駆動で開発するために、まず最初に考えるのは「ど
こんにちは Androidエンジニアの富田です。先日、I/O Extended 2018 ShibuyaにBlog枠として参加させていただきました。I/O Extended 2018 ShibuyaとはMaterial Designに特化したイベントで、IO2018で発表された新しいMaterial Designについてのお話が多く大変興味深かったので内容をレポートしたいと思います。間違いや認識の違いがありましたら、ご指摘いただけますと幸いです。 goodpatch.connpass.com Material update Google合同会社 鈴木拓生さんによる「リデザインされたMaterial Design」についてです。 そもそもMaterial Designって？ Material DesignとはGoogleが2014年に発表したデザインフレームワーク。元々は社内用のフレームワー
こんにちは！株式会社プラハCEOの松原です。 PrAha Inc.では日々「エンジニアの設計力の強化」に取り組んでいます。 今年の冬には2ヶ月ほど毎週2時間近くかけてDDDにまつわる質疑応答会を実施したり、設計に関する技術書籍の輪読会を行ったり、3人ずつの小さなグループに別れて全社員でモデリングに取り組んだり... 会社のみんなと内定者でDDDモデリング勉強会なう DDDって「集約を跨ぐ時」の扱いが一番難しいのに、同時に一番手法が幅広くて意見が割れやすいので、チームで基本方針を決め打ちしちゃうのが良いんだろうなぁ pic.twitter.com/crNHL6GwTe — dowanna @PrAha Inc. CEO兼エンジニア (@dowanna6) August 20, 2020 なぜPrAha Inc.では設計を学ぶのでしょうか？ 設計を学ぶ事は無駄にならない WEBサービスを作る
Visual Regression Testを導入して、手間と時間を節約した話 - SmartHR Tech Blog
こんにちは！SmartHRで人事評価機能の開発を担当している、エンジニアのkanekoです。Visual Regression Testを導入して、安心・安全にUIライブラリのアップデートやリファクタが行える環境を整備したので、その取り組みをご紹介します。 「Visual Regression Test 」とは変更前と変更後のコードで対象画面のスナップショットを比較することで、発生したUIの差分を検知して、見た目のリグレッションが発生していないかを検証するフロントエンドのテスト手法の一種です。 差分検知のイメージ Visual Regression Testを導入するに至った経緯 チームの課題感 私達のチームでは、意図しないレイアウト崩れなどの確認にかなりの手間と時間を取られる問題に悩まされていました。 外部ライブラリをRenovateを使って自動更新するようにしているのですが、リリース前
2022年上半期の振り返り フロントエンド定例 2022/7/1 | ランサーズ（Lancers）エンジニアブログ
こんにちは、フロントエンドチームの谷（@high_g_engineer）です。 今週のフロントエンド定例の内容を記載します。 フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。 以下、今週の内容です。 本日から7月ということで上半期が終わりました。2022年も半分が終わりです。 光陰矢の如し、時間が過ぎ去るのは早いですね。 2022年も残り半分ということで、良い区切りなので、 今年に入ってから今まで何をやっていたかを振り返ろうと思います。 1月 年末年始で新プロジェクトでNext.js導入を行う為、技術調査を行う 調査期間が超短期間だった為、諸々の調整がつかずにNext.jsの導入は見送り CakePHPを中心とした
はじめに この記事は、これからReactを学びたい方向けに書かれています。 複数記事の構成になっているので、#1から始めることを推奨します。 また、Reactが初めてであれば、環境構築なしでReactについて学べる以下の記事から始めると、 より躓かずに進められるかと思います！ Reactの公式チュートリアルがCreat React Appからフレームワーク推奨になったことを受け、 Next.js 13を利用してReactを学んでいきます。 本ワークショップのゴール 学べる内容 (進捗次第で変わる可能性があります...) Next.jsの環境構築 && コンポーネントについて 今ここ アトミックデザインとHooksの基礎 API呼び出し(Fetch API) スタイリング(Tailwind CSS) 最終的な成果物 沖縄で開催されるエンジニアイベント一覧 ConnpassのAPIを利用して
どうも、よこけんです。 Web アプリ開発の現場から離れて１０年くらい経つのですが、思うところあって最近のフロントエンド開発についてプライベートで勉強しました。今日はその成果をアウトプットしようと思います。 本記事では主に、VSCode の Remote-Container を使ったフロントエンド (React) 開発を行うための環境構築方法を解説します。 オールインワンのためかなり長い記事になってしまいましたが、大半の作業はファイルのコピペとコマンドのコピペなので作業自体はシンプルです。ただし、各要素の理解こそが重要なので、この記事をきっかけに各要素の理解を深めていっていただければと思います。 本記事では特に下記の要素を押さえています。 開発環境のコンテナ化 常にコンテナの中で 生活 開発していきます。 開発者間での開発環境の統一ができます。 開発環境のリセットが容易です。 本番環境に
神は万物にアフォーダンスを与え、 悪魔は人にシグニファイアを与えた。 ※この記事は SmartHR Advent Calendar 2019 24日目の記事です。 あ゛〜が〜ぞ〜だ〜い゛〜も゛〜ん゛〜（挨拶） SmartHR デザイナーのおうじです。 生まれたときから顔面白塗り、手足は鋲だらけなのでこの時期になると身体が粟立ちます。 アドベントカレンダー。ブラックメタルの本場ノルウェー風に言うとユール・カレンダー（Julekalender）、にはこれまでとんと縁がなかったのですが、会社の好意でサタニストの私が参加させてもらうことになりました。 SmartHR はとてもオープンでサタニックな会社ですね。 ちょうど先日は同僚のデザイナーが UI デザインにおける構造・設計の話を書いていたので、この記事ではそのあとの工程、表層を表現するにあたっての精神論を悪魔的に書ければと思います。 UI デザ
デザインシステム、パターンライブラリ、コンポーネントライブラリ、スタイルガイドという言葉は、よく同じ意味で使われているのを見かけます。これら４つの概念は関連していますが、同じものではありません。 また、デザインシステムとコンポーネントライブラリの違いについてもわかりづらいと思う方も多いかもしれません。デザインシステムにはコンポーネントライブラリがありますが、コンポーネントライブラリもまた、独立したエコシステムです。（例：MUIやReact-Bootstrapなど） 上記の違いが現時点でわからないという方も、ご安心ください！この記事では、これらの４つの用語を定義しながら違いをわかりやすく説明していきます。また、デザインシステムとコンポーネントライブラリの各メリットや、デザイナーと開発者がこれらをどのように使い分けるかについても解説してきます。 世界で最も種類が豊富であるコンポーネントライブラ
Atomic Designとフロントエンドのインピーダンスミスマッチ / Impedance mismatch in atomic design
# URL あとがき: https://nrslib.com/postscript-impedance-mismatch-in-atomic-design/ HP: https://nrslib.com Twitter: https://twitter.com/nrslib # Summary 2019/2/8「第２回AtomicDesignについて考える会（https://thinkatomicdesign.connpass.com/event/115574/）」にて行った LT 用のスライドです。 アトミックデザインをフロントエンドに適用したときのインピーダンスミスマッチとそれに対する向き合い方についてお話しています。
はじめに この記事はかの素晴らしいA brief look at Atomic Componentsの和訳です。 https://medium.com/joeydinardo/a-brief-look-at-atomic-components-39cbe71d38b5 Vue.jsでアトミックデザインをやって上手く行かなかった時に出会った記事です。 著者から直接翻訳許可は得ています。 我々日本のフロントエンドエンジニアがわかりやすいように多少表現を変えている部分もあります。 それでは記事をお楽しみください。 Atomic Componentsの簡単な見方 モックアップを簡単にリアルタイムアプリに変える方法 Atomic Componentsは、扱うデータが多い、スケーラブルなWebアプリケーションとモバイルアプリケーションの作成と管理を容易にするためにPatternlab.ioのチームによ
![A brief look at Atomic Components[和訳] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7c9e815a44f76b99a958b0808f60828205037fc9/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9QSUyMGJyaWVmJTIwbG9vayUyMGF0JTIwQXRvbWljJTIwQ29tcG9uZW50cyU1QiVFNSU5MiU4QyVFOCVBOCVCMyU1RCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MjllYWIyMTMzNGM0Y2MzMWQxNDU1YmUzNmVhMzI5N2M%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBrYWhpcm9rdW5uJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1iMGNhYjBlZjU5ZjZkYzEzMTBhY2QzNzM4YzE5Zjg1MQ%26blend-x%3D120%26blend-y%3D445%26blend-mode%3Dnormal%26txt64%3DaW4gQ3JhZnRzbWFuIFNvZnR3YXJl%26txt-width%3D972%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25233A3C3C%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D134%26txt-y%3D546%26s%3Ddb0ea6c2c0ac7cd5386fac90e1a8322d)
この記事は第2のドワンゴ Advent Calendar 2018 24日目の記事です。 ドワンゴでニコニコ生放送のWebフロントエンジニアをやっています、 @misuken です。 14日目の React + TypeScript における ViewComponent の美しい合成技術 18日目の 超簡単に数値を 1,234 1.2万 12.3万 123万 1,234万 1.23億 ... に整形する方法 23日目の AtomicDesign の atom より小さな世界の扉を開く に続いての投稿です。 今回のお題 今回は AtomicDesign でハマりがちなコンポーネントの粒度問題、ならびにコンポーネント名やディレクトリ構成の問題を解決するLayerdAtomicDesign(階層化アトミックデザイン) という考え方を紹介します。 AtomicDesign に階層の概念を取り入れる
【2023年11月更新】学生さん向け：ゲームUIデザイナー用語集【204語】 - ゲームアプリのUIデザイン
（最終更新：2024/1/17） こんにちは、ちょこです。 このページでは、ゲームUIデザイナーを目指す学生さんが知っておいた方が良さそうな用語をまとめています。紹介する用語の基準としては、比較的初学者向けの書籍に登場する言葉を中心にしています。参考にした書籍についてはAmazonのリンクも併記しておくので、より詳しく知りたい方は読んでみても良いかもしれません。 言葉を知ることで人に伝えやすくなったり、検索しやすくなるため、覚えておいて損は無いかと思います。 感覚的ですが、ゲームUIデザイナーに必要な要素は以下の３つの要素を掛け算している印象なので、その項目ごとにまとめています。 【グラフィックデザイナー】×【UIデザイナー】×【ゲーム業界】 グラフィックデザイン 基礎…1語 1：デザイン４大原則 グラフィック…5語 １：あ…アイコン ２：い…インフォグラフィック ３：さ…サムネイル ４：
Atomic Design for a UI/UX design and programming workflow (アトミックデザインによるUI/UXデザインとプログラミングのワークフロー)｜F Lab｜Fixel株式会社
デザイナーはアプリケーション全体をデザインしてから細かい部分を調整して行きます。先ずは生命体を作り、それを原子までに分割して調整しているような作業です。一方、プログラマーはデザインされた画面から再利用できる部品を作り、それらを組み合わせることで動くアプリケーションを構築して行きます。原子を組み合わせて、生命体を作っていくような作業です。全体から細かい部分に精度を上げながら設計して行き、また細かい部分から作り始め、徐々に全体に組み合わせて行く、一連の流れのようなプロセスと捉えることができます。 本記事では上記のプロセスの例として、デザイナーがワイヤーフレームを作り、画面の各要素を分割します。次にプログラマーは各要素を部品として作り始めるます。見た目を左右するビジュアルデザインに対してはスタイルを簡単に変更できるようにして、デザインの変更を適用しやすくなります。このようなプロセスを実現するには
デザインフェーズ Figmaの真骨頂とも言えるデザイン制作のフェーズ。機能を使いこなせばレスポンシブを考慮した画面作成、アニメーション作成、プロトタイプ作成など、再現性が高いUIデザインを制作できるため、デザイナーはしっかり習熟したいところです。再現性が高いデザインを作成すれば、エンジニアがFigmaを見るだけでデザインの詳細まで確認と判断が可能になるということに繋がります。 レスポンシブの作り方 デザインガイド・コンポーネント作成の重要性 UI制作を進める際、最初にカラーやフォントなどのスタイル、デザインガイド、アトミックデザインに則ったコンポーネントの形成が重要です。これを最初にFigmaで用意しておくことで、ページデザインを作成する際にコンポーネントを組み合わせ、カラーやフォントをスタイルから選択して設定することでデザイン制作を効率的に進められるようになります。 アトミックデザインと
数ヶ月Atomic Designを採用したNuxt(Vuexパターン)アプリケーション開発を行ってみて、思ったことのメモ。 Atomic Designとは bradfrost.com 概要だけ知りたい人に説明すると、基底となるコンポーネント(原子)を作り、その原子を組み合わせて分子コンポーネントを、さらに分子を組み合わせて有機体コンポーネント、そして最終的にそれらを組み合わせたページを組み上げる、というボトムアップ的アプローチのデザイン手法である。 Nuxt(Vuex)におけるコンポーネント分割方針 Atomic Design手法の肝は、 Atoms/Molecules/Organisms のコンポーネント設計にある。 この設計が抽象的なままだと、アトミックデザインの恩恵は十分に得られない。 コンポーネント設計で、まず最初に頭に入れておきたいのは、 Stateless or Statefu
前々から気になっていた Storybook を試して、プロダクトでも採用してみたので所感を書く。 ちなみに、Next.js を使っているけれど、.babelrc の設定とかをやっていれば start-storybook の -s ./ オプションで問題なく動いた。 動機 ここ数年、React を使って component ベースでウェブページを設計することを何度かやってきているが、未だにパスタコンポーネントが出来上がってしまう。そしてパスタコンポーネント群は往々にして開発がつらくなっていく...。 Storybook について Storybook は動的にスタイルガイドを生成できるツールで、React だけではなく Vue や Angular にも対応しているよう。 @storybook/react をインストールして CLI から起動するだけでホットロードしてくれる画面が立ち上がって便利
DevLOVE「Atomic Design ～堅牢で使いやすいUIを効率良く設計する〜」の参加レポ - UGAP Engineer's Blog
2018-06-29 DevLOVE「Atomic Design ～堅牢で使いやすいUIを効率良く設計する〜」の参加レポートです。 著者の五藤さんご本人から書籍「Atomic Design ～堅牢で使いやすいUIを効率良く設計する〜」の解説と本には載っていないお話を聞けるイベントでした。 devlove.doorkeeper.jp 直近で書いたAtomic Designに関する弊社のブログはこの日に合わせてまとめたところもあり、独自で考えた観点や手順が五藤さんが携わってこられた現場と比べてどれくらい一致しているか、答え合わせのような気持ちで参加しました。 アトミックデザインを使ったコンポーネント指向のUI開発：序 - UGAP Engineer's Blog アトミックデザインを使ったコンポーネント指向のUI開発：破 - UGAP Engineer's Blog 印象に残った話 結論として
Next.jsを利用する機会はますます増えていると考えていますが、適切なディレクトリ構成について疑問を持ったことがある方も多いかもしれません。 最近では、特定のディレクトリ構成とそれに基づくスタイルが定着し始めているため、それを紹介したいと思います。 なお、以下のディレクトリ構成はNext.jsのバージョン12系を基準としていますので、13系とは大きく異なることに注意してください。 01.設計時に参考にした構成 後述しますが、このディレクトリ構成では、`Features`というレイヤーが非常に重要な役割を果たしています。 02.これまでこれまで、クリーンアーキテクチャーやアトミックデザインなど、さまざまな構成でプロジェクトを作ってきました。 API層、Presenter層、Props注入層、Data表示層のように細かく分けるアプローチもありましたが、冗長さや再利用性の難しさに直面しました。
# URL 勉強会情報: https://nrs-seminar.connpass.com/event/122208/ HomePage: https://nrslib.com Twitter: https://twitter.com/nrslib # 概要 アトミックデザインの実践に向けた入門の手引きです。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Unity】いまさらUnityのUIの効率的な開発手法を解説してみた【UI】 - Qiita
Designing Interfaces の 第2版と第3版をざっくり比較する｜toofu
Designer X Engineer Development #01
《Nuxt.js》CSSのオートプレフィクスをカスタマイズする方法。GridのIE対応も！ - Qiita
おまえは原子か分子か。Atomic Designで扱いに迷うUIコンポーネントたちをどうするか｜きたじぃ
難しく考え過ぎないコンポーネント駆動開発 - Qiita
I/O Extended 2018 Shibuyaに行ってきました - コネヒト開発者ブログ
なぜPrAha Inc.のエンジニアは設計を学ぶのか - PrAha Inc.
【React入門】絶対に躓かないReact（Next.js 13）ワークショップ #1 - Qiita
開発コンテナで快適！<del>ひきこもり生活</del>フロントエンド開発 - Qiita
断罪！サタニズムによるインターフェースデザイン思想｜oujimiyahara
デザインシステム、パターンライブラリ、スタイルガイド、コンポーネントライブラリの違い
A brief look at Atomic Components[和訳] - Qiita
LayeredAtomicDesign でコンポーネントの粒度問題を解決する - Qiita
デザインからコードへの再現も容易！ プロトタイピングツール「Figma」の開発フェーズ別便利機能【要件定義・画面設計編】
Nuxt(Vuex)でAtomic Designを採用するときのメモ - Do Something
Storybook Driven Development を試している
Next.jsディレクトリ構成を設計再考してみる｜ryry_w
入門！アトミックデザイン / A beginner's guide to Atomic Design