AtomicDesignに挑戦した所感 ～特定機能に対する個別スタイル指定～
- 2019.06.19
- AtomicDesign, 読み物
管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— サイトがある程度出来上がってきた為、数値のデータや文字列が動的に入った状態での表示の調整や、コンテンツ量を踏まえたデザインの変更を行っている。 予め用意したサイズや色を元に […]
AtomicDesign
AtomicDesignに挑戦した所感 ～Storybookの利用～
- 2019.06.11
- AtomicDesign, Storybook, 読み物
管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— 現在、制作中のサイトをVue.jsで構築している。 そのため、Vue.jsに対応しており、コンポーネントパーツをそのまま反映することが出来るStorybookをコンポーネン […]
AtomicDesignに挑戦した所感 ～コンポーネントに持たせる要素～
- 2019.06.06
- AtomicDesign, 読み物
管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— コンポーネント化を考える際に一番種類が多く、パターンが多いのがボタンであった。 パーツ化して設計する際に、下記のようなルールを定めて要素はクラスで指定を変えられるようにした […]
AtomicDesignに挑戦した所感 ～クラスの命名規則のミス～
- 2019.05.31
- AtomicDesign, 感想
管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— 変更時を一括で行う事を目的としたボタンの命名規則で失敗。 .c-btnをボタンの基本クラスとし、デザイン用に.c-btn–-◯◯ というクラスを別途使用することを決めた。 […]
AtomicDesignに挑戦した所感～デザイン完成からコーディング開始時点～
- 2019.05.29
- AtomicDesign, 感想
管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。 その中で出た疑問や、つまずきのメモになります。 ———— デザイン作成からコーディングまで完了した時点で、いくつか不安点など出てきた。 ◆レベル感がわからない ◯デザイナー： 「このパーツの別サイズを作るのは、コンポーネントとして […]
【参考資料】Atomic Design参考資料／参考書籍
- 2019.03.09
- AtomicDesign, 参考リンク, 参考書籍
参考サイト： ◆atomic design http://bradfrost.com/blog/post/atomic-web-design/ ◆Atomic Designを採用したWeb開発におけるistyleの現状と課題 導入の経緯から効果まで https://logmi.jp/tech/articles/320358 ◆DevLOVEの「Atomic Design ～堅牢で使いやすいUIを効 […]
【第四回】コンポーネントカタログの利用
- 2019.03.09
- AtomicDesign, 読み物
Atomic Designの調査レポート第四回です。 第一回と第二回は、コンポーネントを理解するための内容でした。 【第一回】Atomic Designとは http://note.favorite-color.net/2019/201902141493/ 【第ニ回】コンポーネントの考え方 http://note.favorite-color.net/2019/201902221497/ 【第三回 […]
【第三回】コンポーネントを用いた構築と運用方法
- 2019.03.01
- AtomicDesign, 読み物
Atomic Designの調査レポート第三回です。 第一回と第二回は、コンポーネントを理解するための内容でした。 【第一回】Atomic Designとは http://note.favorite-color.net/2019/201902141493/ 【第ニ回】コンポーネントの考え方 http://note.favorite-color.net/2019/201902221497/ 今回は、 […]
【第ニ回】コンポーネントの考え方
- 2019.02.22
- AtomicDesign, 読み物
Atomic Designの調査レポート第ニ回です。 コンポーネント＝部品と考え、サイトをデザインしていくという事は第一回でお話しました。 【第一回】Atomic Designとは http://note.favorite-color.net/2019/201902141493/ 今回は、「実際コンポーネントってなんなの？」の解説を行います。 【コンポーネントの種類】 Atomic Designは […]
【第一回】Atomic Designとは
- 2019.02.14
- AtomicDesign, 読み物
Atomic Designの調査レポート第一回です。 今回は、「Atomic Designとはなんぞや？」の解説を行います。 【Atomic Designとは】 Atomic Designの「デザイン」とは見た目だけのデザインだけではなく「設計」を指します。 これは、元々は UI/UXデザイナーのBrad Frost氏によって、Webフロントエンド向けに開発された手法です。 http://brad […]