ぐそんブログスマートフォン用の表示で見るのぐそんブログ暗いおじさんがシコシコ書くブログです。DesignでUIを細分化するデザイン最近のjavascriptのフレームワークはコンポーネント指向で設計されているものが多いです。コンポーネント指向の良いところは、作ったパーツを再利用できる点と、再利用することでサービス全体でのUIの一貫性が保たれるという点だと思います。コンポーネント指向はマークアップや、プログラムだけの話ではなく、デザインでも利用できます。Designについて調べました。Designについては、すでに多くの素晴らしい記事があり、ご存知の方も多いと思います。この記事での新たな発見はないと思うので、知っている方は読まずにもっと結意義な時間に使ってください。Designはページ単位でデザインするのではなく、細分化したコンポーネントの組み合わせでデザインを組み立てていく手法です。コンポーネントの種類コンポーネントはパーツの粒度によって名前が決まっています。使ってページを組み立てていきます。ATOMS(原子)まず原子です。その名の通り、原子は最小単位のパーツです。カラーパレットやフォント。ボタンやラベルなどが当たります。それ以上機能的に分けることができないパーツは原子に分類されます。MOLECULES(分子)分子は2つ以上の原子で構成されるエレメントです。分子になるとUIパーツっぽさがでてきます。ORGANISMS(有機体)有機体は原子と分子を使って、ヘッダーやフッター、テーブルなどの大きめのコンポーネントを作ります。TEMPLATES(テンプレート)テンプレートは有機体を組みあせて作るワイヤーフレームです。ダミーの情報を入れた状態で、具体的なコンテンツの情報はもっていません。PAGES(ページ)テンプレートにコンテンツ情報を入れた最終型です。instagramの例instagramだとこんな感じです。DesignとSketch私はデザイン業務の際にSketchを好んで使っています。以前はphotoshopやfireworksを使っていましたが、動作の軽さと、シンボル機能の使いやすさでSketchを利用することが増えました。Designは上記で説明した通り、コンポーネントの粒度の小さい物を組み合わせて作成していきます。その際に、Sketchのシンボル機能が力を発揮します。SketchのシンボルSketchのシンボルは、共通コンポーネントを作成するのに向いています。同じシンボルで形状やテキスト、装飾を変更することができますし、シンボル化されていれば一括変更ができる為、後からの修正が楽です。シンボルを入れ子にもできるのでコンポーネントの階層構造を実現するのにピッタリです。コンポーネント単位でシンボル化していくある程度デザインが出来た段階で、シンボル化していきます。シンボル化する際のポイントとしては、以下を気をつけると良さそうです。2.コンポーネント化する粒度を統一させる命名規則は決まりは無いみたいなのですが、一般的な付け方が下記になります。有機体スラッシュを入れているのは、Sketchではスラッシュをシンボル名に入れることで、階層をもたせることができるからです。Organizerでシンボルを階層ごとに並べ替えることができ見通しが良くなります。まとめ通常デザインする際はページ全体のデザインを考えます。Designの場合は細部のパーツのデザインから考えていくため慣れないと全体のイメージが湧きにくいです。エンジニアの人にはメリットが大きそうな印象でした。はてなブログPro暗いおじさんがシコシコ書くブログです。DesignでUIを細分化するiOSとAndroidのUIの違い愛がいっぱいiOSのデザインガイドライン効果的なデザインフィードバックTouchDesignerのGLSLでディゾルブをやってみる月別アーカイブプライバシーポリシースターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。