「Design Systems」輪読会まとめ - UGAP Engineer's Blog
はじめに WEBサイトのページを効率よく開発したり、ブランド毀損なく拡張していくためには、 そのページで使われているパーツ（ボタンや、色、フォントなど）を繰り返し使い回せるように管理しておくことが重要です。 ただ、その繰り返して使うパーツをどの粒度で作成、保存、共有、使用するかをプロジェクトメンバー間で決めておかないと、だんだんと崩壊していきます。 どのようなモチベーションでデザインし、それを変更、保存、共有、使用するかのルールを定めて明文化することを「デザインシステム」といいます。 今回、この「デザインシステム」について、具体的にどのようなことを明文化するべきかをデザイナーとフロントエンドエンジニア間で認識合わせるをするために「Design Systems」という本の輪読会を行いました。 この記事は本のまとめと感想の記事になります。 業務時間内で毎週１時間をつかって１章ずつ声に出して読み
Atomic Designとは 〜Atomic Designを使ったコンポーネント指向のUI開発：序〜 - UGAP Engineer's Blog
はじめに UI（画面）コンポーネントを切り出したいときにどういう粒度で切り出したらいいか迷う時があります。 適切な粒度で切り出しておかないと、位置を組み替えたりデザインを修正したい場合に、使い勝手が悪くて作り直しになってしまうからです。 メンテナブルなUIコンポーネントに切り出すにはどうしたらよいでしょうか。 いろいろ調べた末、Atomic Design（アトミックデザイン）というアイデアに行き着きました。 このAtomic Designを使ったコンポーネント指向のUI開発を（序）（破）（Q）のシリーズを使って紹介したいと思います。 （序）では、Atomic Designがどのようなものかをご紹介します。 （破）では、Atomic Designを導入した際にうまくいかなかった点と工夫した点をご紹介します。 （Q）では、具体的な開発例をご紹介します。 このシリーズが同様に困っている現場の参考
Atomic Designの導入に際して工夫したこと 〜Atomic Designを使ったコンポーネント指向のUI開発：破〜 - UGAP Engineer's Blog
本稿は（序）（破）（Q）のシリーズの2番目の記事（破）になります。 シリーズ（序）ではAtomic Designの概要 を、 シリーズ（Q）ではAtomic Designの実装例を説明していますので、そちらをご覧ください。 Atomic Design（アトミックデザイン）とは、UI（画面）をコンポーネント単位で設計し、それらを組み合わせて使い回し可能なUIを作成するための手法です。 Atomic Designの考えのものとUIコンポーネントを切り出していくことはいくつかの利点があります。 しかし、Atomic Design はUIを構築するための方法論でしかありません。 つまり、デザインや実装方法、運用方法は独自に考える必要があります。 実際に導入してみるといくつか乗り越えなくてならないハードルが存在することがわかりました。 本稿（破）ではそのハードルを乗り越えるために、どのような工夫した
Atomic Designの実装例 〜Atomic Designを使ったコンポーネント指向のUI開発：Q〜 - UGAP Engineer's Blog
本稿は（序）（破）（Q）のシリーズの3番目の記事になります。 本稿では前回（破）で説明したAtomic Designを導入する際に工夫した点をふまえた実装例をJSフレームワークを使用する場合と使用しない場合の２つの場合について紹介します。 シリーズ（序）ではAtomic Designの概要 シリーズ（破）ではAtomic Designの導入に際して工夫した点 について説明していますので、そちらをご覧ください。 実装例題材 下のサイトテンプレートを題材に実装していきます。 https://html5up.net/prologue シチュエーションとしては、デザイナーからもらったデザインカンプをエンジニアが実装する想定で説明します。 コンポーネントの分割 エンジニアはデザインカンプをAtomic Designのコンポーネント単位に分割していきます。 コンポーネントの分割フロー図は（破）で以下の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
