Designとは何かを簡単に理解する。Designとは何かを簡単に理解する。Designとは何かを簡単に理解する。Design」なるものが存在するみたいです。Designとは近年のデザインにおける設計方法みたいなものです。Webまわりを触ったり、一人でサービスを開発するとなるとやはり困ってくるのが「デザイン」の部分で、これも独学で学ぶ必要があるわけです。デザインなんて、センスがあるかないかの一言で片付けられたりします。いったデザインの「設計方法」を知っておくと、デザイン初心者でもそれっぽいデザインができたりするので設計方法や概念について知っておいて損はない、というか知っておいた方が良い気がします。Designについての基本的な概念と説明を整理しておこうと思います。Designとは、簡単に説明すると「小さいパーツを作り、その小さいパーツで次の大きい要素を作り、...最終的に一つのページを作る」という事です。名前にもあるように「Atom(原子)」としての最小単位のものを作成して、その組み合わせでデザイン設計を行うという概念です。Designについて知ることができます。Frostさんが書いた書籍の内容が全てWeb上で公開されています。丁寧に一つ一つ章立てで書かれてあるので英語に抵抗のない方は是非一読しておくと良いかと思います。この考え方はWeb上で非常に役に立つ強力な概念となり得ます。Vue.jsにおいてはコンポーネント設計の際にこの考え方がうまく転用できるので、Vue.jsもしくはその他Web言語を勉強しようとしている人には是非知っておいて欲しい知識です。Designには5段階の構成要素が定義されています。出典:http://atomicdesign.bradfrost.comボタンやラベル、フォント等の最小構成要素です。使用頻度が低いものに関しても最初に作成すべき構成単位であると言われています。出典:http://atomicdesign.bradfrost.com複数のAtomを構成したもので、ラベル付きフォーム等がこれにあたります。原子をいくつか組み合わせてパーツを構成するイメージで良いでしょう。出典:http://atomicdesign.bradfrost.comMoleculesよりもさらに複雑な構成要素です。分子をいくつか組み合わせて構成します。ヘッダーにおくナビゲーションバーとロゴを組み合わせてヘッダーにします。このヘッダー部分が生体にあたります。ここらへんで原子や分子の見直しもしておくと良いでしょう。Templates(テンプレート)-テンプレート出典:http://atomicdesign.bradfrost.comOrganismの組み合わせで構成されます。配置のバランスを考慮してテンプレートを作成します。これに関しては、テンプレートを作成する前にワイヤーフレームを作成した方が良いという意見もありますが、ここまでくると配置も簡単に変更できるので正直どちらでも良いかと思います(個人的には)。ワイヤーフレームがあったほうが完成の見通しがよくなるので、可能であればワイヤーフレームに沿って作成することを推奨します。Pages(ページ)-ページ出典:http://atomicdesign.bradfrost.com実際のデータをTemplateにあてはめたものです。要は完成版ということ。テンプレートを修正し、内容を入れていきます。Designにおける構成要素です。上からLv.1~Lv.5と振り分けられています。Designを使うと何が良いのか基本的な設計方法はさほど難しくないどころか、寧ろシンプルですらあります。理解に苦しむことはないと思いますが実際にやってみると、慣れるまで時間がかかると思います。Designをきちんと学ぶ価値は大いにあるでしょう。理由はWebデザインにおいて非常に有用な概念であるからです。僕たちはWebデザインを行うにあたって1ページ1ページ綿密にデザインを変えているわけではなく、部品を数多く転用してデザインの効率性を良くしたり、デザインの統一性を出してよりよいUI/UXを提供しています。手元のスマートフォンで確認してみてください。iPhoneのアイコンであったり、アプリ内のデザインで共通してる部分があったり、それはWebに限った話でもないのです。いうことでWebデザイナー以外にも非常に有用な概念であることがわかりました。Designの何が良いかというとこの「デザインの使い回し」において非常に強力な力を発揮するからです。デザイン部品の使い回しを行うと、一部のデザインを変更したい時に変更もしやすくなります。(例えばSketchでシンボルを作る等)保守・運用性がアップするのも非常に良い部分です。Designはデザインの使い回しにおいて強力な力を発揮する以上です。簡単に概要を整理してみました。Frost氏が執筆した文章を読むと良いかと思います。こちらの方が図解もあってわかりやすい。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。関連記事は見つかりませんでした。(TECH::CAMP)の無料説明会に行ったら衝撃の事実が発覚した件について【2019年最新】テックキャンプ(TECH::CAMP)の評判と料金、概要まとめ。実際の最新情報を解説します。