以上が Atomic Design で提唱されている5段階です。 よく見ると Atoms, Molecules, Templates はレイアウトとしてのまとまり、 Organisms と Pages はコンテンツベースでのまとまりになっています。 「レイアウトとしてのまとまり」は、中に入る情報に関わらず、見た目・機能単位でのまとまり、 「コンテンツベースでのまとまり」はコンテンツ（データ）単位でのまとまり という分け方になります。 「レイアウトに関心が高い」「コンテンツに関心が高い」それぞれのまとまり方を コンポーネント設計に当てはめると、次のように言い換えられると思います。 ・Atoms, Molecules, Templates はユーザーインターフェースや、 親コンポーネントから渡されたデータをどう表示するかに専念する。 ・Organisms と Pages はコンテンツに関心が高
はじめに UI（画面）コンポーネントを切り出したいときにどういう粒度で切り出したらいいか迷う時があります。 適切な粒度で切り出しておかないと、位置を組み替えたりデザインを修正したい場合に、使い勝手が悪くて作り直しになってしまうからです。 メンテナブルなUIコンポーネントに切り出すにはどうしたらよいでしょうか。 いろいろ調べた末、Atomic Design（アトミックデザイン）というアイデアに行き着きました。 このAtomic Designを使ったコンポーネント指向のUI開発を（序）（破）（Q）のシリーズを使って紹介したいと思います。 （序）では、Atomic Designがどのようなものかをご紹介します。 （破）では、Atomic Designを導入した際にうまくいかなかった点と工夫した点をご紹介します。 （Q）では、具体的な開発例をご紹介します。 このシリーズが同様に困っている現場の参考
①デザインの効率が格段に上がる Atomic Design では画面要素を細かくコンポーネント化しています。ですので、一度作成したコンポーネントを配置するだけで、画面に表示することができました。特に効率が格段に上がった場面として、画面開発中にUIが追加された際に、すでに作成済みのコンポーネントを再利用することで、新たなパーツをすぐに作成※することができたという場面がありました。 ※すでに作成済のボタンコンポーネントとテキストコンポーネントを組み合わせて、ボタンテキストコンポーネントをデザインできたこと ②ページデザインに統一感が生まれる 今回複数人で複数の画面開発を行いました。全員が同じ画面を実装したわけではないため、画面によって必要なコンポーネントは異なります。しかし、画面の実装方法が定まっていたため、誰が実装しても画面の統一感を保つことができました。実際に、手順に沿って開発するだけで初
はじめに みなさんはAtomic Designと聞いてすぐにイメージできますか？ 私は最近仕事でAtomic Designに触れるようになり、なんとなーくイメージは掴んできていますが、分かりやすく他者へ説明できるかなと少し不安でした。そこで今回はAtomic Designについて簡単に言語化してまとめてみます。 今回の記事は二本立てとなっております。初心者でも理解できるような内容ですので、ぜひ読んでみてください！ Atomic Designとは Atomic Designとは、webページや画面をパーツ・コンポーネント1単位で定義し、それらを組み立てて作るUIデザイン手法の一つです。画面構成要素を段階的に分解・部品化することで、画面部品の統⼀性や再利用性を高める手法となっています。 これだけだとよくわからないと思うので、もう少し簡単に説明しますと... UIコンポーネントを粒度に応じたカテ
皆さんの職種はなんでしょうか。 フロントエンド、バックエンド、インフラだけに収まらず、エンジニアの職種は多岐にわたります。 もちろんどれかの職種に収まらず兼務したり、なんでもこなすフルスタックエンジニアである方もいるでしょう。 さて、私の場合はどうかというと、普段ドメイン駆動設計のお話などをしている関係でバックエンドのエンジニアと認識されがちですが、実はフロントエンドもやっていたりします。 直近では Vue.js や Angular.js を使った SPA のサイトの開発や設計をしていますし、Web に携わる前はゲームのクライアントプログラマでした。 じゃあフロントエンドなの？ と聞かれるとそういうわけでもなく、そもそも自身の領域を定めるつもりがないので「ただのプログラマだよ」と答える日々だったりします。 バックエンドメインの人と思われていても特段問題はないのですが、ここらで一丁フロントエ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く