こんにちは、@ktmoukです。時間を管理できるアプリ「Hackaru(測る)」を一人で開発しています。 最近、ユーザが最初に訪れるページ、いわゆるランディングページをリニューアルしました。Atomic Designを参考に、Vueのコンポーネントを分割しています。 本稿では、個人開発でAtomic Designを使うときの作成手順をまとめてみました。Web制作の参考になれば幸いです。 ランディングページ: https://www.hackaru.app その前にAtomic Designとは? Atomic Designは、UIのパーツを「原子(Atom)」「分子(Molecule)」「有機体(Organism)」「テンプレート(Template)」「ページ(Page)」に分類しようという考え方です。分類することでパーツが再利用しやすくなります。 詳しくは、DeNA DESIGN BLO
![Atomic Designでランディングページを作ったので、作成手順とかまとめました。|ktmouk](https://cdn-ak-scissors.b.st-hatena.com/image/square/8e47f8350a2a2483d285ce22866aefb68a60641c/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F11700219%2Frectangle_large_type_2_6a73ada1a3b4a0ea2e034a3f6b72780d.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)