こんにちは、@ktmoukです。時間を管理できるアプリ「Hackaru(測る)」を一人で開発しています。

最近、ユーザが最初に訪れるページ、いわゆるランディングページをリニューアルしました。Atomic Designを参考に、Vueのコンポーネントを分割しています。

本稿では、個人開発でAtomic Designを使うときの作成手順をまとめてみました。Web制作の参考になれば幸いです。

ランディングページ: https://www.hackaru.app

その前にAtomic Designとは？

Atomic Designは、UIのパーツを「原子(Atom)」「分子(Molecule)」「有機体(Organism)」「テンプレート(Template)」「ページ(Page)」に分類しようという考え方です。分類することでパーツが再利用しやすくなります。

詳しくは、DeNA DESIGN BLOGの記事 や Atomic Design Methodology が参考になります。

引用元: Atomic Design Methodology

1. 簡単なワイヤーフレームを作る。

Atomic Designとは逸れるのですが、コーディングに入る前にワイヤーフレームを作るようにしています。

ワイヤーフレームとは、ざっくりとした外観と、画像や文章のようなパーツの位置を整理した設計図のことです。ワイヤーフレームを作ることで、頭の中で考えているイメージが本当に実現できるか確認できます。

ワイヤーフレームを作らずにコーディングを始めると、「このパーツを入れるスペースがない！」とか、「次何するんだっけ？」という感じで、手戻りや長考する時間ができてしまうんですよね。

ワイヤーフレームはFigmaなどのソフトを使うこともできますし、紙とペンでも作成できます。私はノートにざっくり描きました。

ポイントとして、色やイラストのような見た目を書かないようにしています。「何を置くか」と「どこに置くか」を整理できれば十分です。ざっくり書くように意識しています。所要時間は、1ページあたり10分〜15分くらいを目安にしています。

2. とりあえず、1ファイルに全部書く。

ワイヤーフレームが出来たら、コーディングをします。ポイントとして、最初は分割せず、1ファイルに1ページ分のHTMLとCSSを全部書いてしまいます。完成させてから整理したほうが効率が良いからです。

Atomic Designを意識してボタンやラベルなどのAtomから作りたくなりますが、もしかすると不要なパーツが出てくるかもしれません。一旦完成させてから整理すれば、手戻りを避けることができます。

というわけで、1ファイルに全部書いてみました。
コードはGitHubから見ることが出来ます。

3. 重複している箇所をAtomic Designでまとめる。

完成させたら、パーツを分類していきます。私は分類の基準を以下のように決めています。Templateは使っていません。

・Atom　分割できない小さなパーツ。ボタンやラベルなど。
・Molecule　検索欄やメニューのような小〜中くらいのパーツ。
・Organism　ヘッダーやフッターのような大きなパーツ。
・Pages 最終的にユーザが見るもの。完成品。

Atom

Atomは、ボタンと言語のセレクトボックスにしました。

Molecule

Moleculeは、機能の説明部分と、「その他の機能」にある4要素にしました。

Organism

Organismはヘッダーとフッター、主要機能とその他の機能の部分にしました。Organismの中にAtomとMoleculeが含まれています。

適度に分割しよう。

分割するときのポイントとして、なるべく「再利用する必要がないもの」は分割しないようにしています。

たとえば、⚡マークのロゴはAtomに分割できるかもしれません。ただ、今の所、使用しているのはヘッダーの1箇所だけです。そのため、ヘッダーのOrganismに直書きしています。ロゴを別の箇所でも使いたい、となったタイミングで分割するつもりです。

または、再利用はしないけど、複雑なものは分割しています。今回でいうところの言語のセレクトボックスです。内部にI18nを変更するスクリプトが含まれています。分割したほうがメンテナンスがしやすいためです。

とくにAtomとMoleculeはいくらでも分割できてしまうので、適度に分割するのがいいかもしれませんね。

Atomをたくさん分割してみました。

GitHubでソースコードを公開しています。

題材にしたランディングページは、GitHubにソースコードを公開しています。 また、ランディングページも実際に見れますので、よろしければ覗いてみてください。本稿がみなさんのお役に立てれば幸いです。それでは。

ランディングページ: 　https://www.hackaru.app

GitHub
公式のTwiiter
開発者のTwitter