競争力のあるデザイナーになるには

デザインシステムの構築方法

最近のUI/UXデザイン業界では アプリとウェブサービスの設計システムを理解して構築できることは、競争上の重要な優位性です。として浮上しています.

デザインシステムとは

デザインシステムは、アプリやウェブサイトなどのデジタル製品の開発をサポートし、ユーザーエクスペリエンスを向上させるためによく使用されます。

一貫性のある構造化されたデザイン、パターン、コンポーネントなどの作成とそれらを使用した設計という意味です。

言い換えれば、「不要なコミュニケーションを排除するために体系的に編成されたシステム」です。それは。

設計体制が整ったら

• 一貫性のある UI/UX を維持そうすることで、さまざまなチャネルで一貫してブランドアイデンティティを伝え、高いレベルのユーザビリティを生み出すことができます。
• 開発済みのUIをリサイクルすることは可能です 設計者の作業時間を大幅に短縮あげるよ。
• スタイルガイドのコーディング中 開発者のコミュニケーションコストが大幅に削減され、生産性が向上しますそうなるでしょう。
• コンポーネントを効率的に変更できる 変更はすばやく更新できますになります。

こうした設計システムの効率化により、最近では、

企業でデザインシステムを構築して活用する能力は、UI/UXデザイナーのコアコンピテンシーです私はそれを次のように見ています.

しかし、デザインシステムを学ぶのは簡単ではありません。

「教授...なぜデザインシステムについて教えてくれなかったの！」

大学ではUI/UXデザインも専攻していましたが、デザインシステムの理解や使い方を学びませんでした。

これは、ほとんどが英語で書かれていて、なじみのない言葉がたくさん使われていて、実用的な資料が少なすぎるためです。

学校でも知らないデザインシステム

私と一緒にステップバイステップで学びましょう！

こんにちは、

チョン・ヨンホです。

私は じゅしん私はチョン・ヨンホです。というウェブ/アプリのデザインを専門とする会社を経営しているデザイナーのチョン・ヨンホです。

サービスプランニングから UI/UX の設計と開発まで代表として、デザイナーとして様々なWeb/アプリサービスを制作しています。

その結果、デザインシステムが誰よりも重要だと感じ、直接交流することでさまざまな経験をしました。

私の経験とノウハウを皆さんと共有したいと思います。

私と一緒にデザインシステムを作ってみませんか？

コンセプトから実践まで

デザインシステムを制覇しよう！

絵はどんなに複雑でも、結局は点、線、面で構成されていることを理解していれば難しくありません。

設計システムの点、線、面を特定することで、基本的な構造を理解するように教えます。

以来 実践的な演習を通じて仮想アプリケーションを計画するやれ デザインシステムを作ろう 計画されています。

最後に、それを使ってください 最終的な画面デザインに進むやってみるよ。

# 企業デザインシステムの例を見る

: グーグル、アップル、IBMなど

（Googleのマテリアルデザイン、IBMのカーボンデザイン）

Google、Apple、IBMなどの海外企業や国内企業が、デザインシステムに関するガイドラインを発行した例があります。

例を一緒に見ることで、デザインシステムの感覚をつかむことができます。

# 実際のアプリ開発プロセスの概要

本格的に研修に入る前に、

実際にアプリを作成するプロセスを理解していれば、デザインシステムを使用して設計する方がはるかに簡単になります。

実際にUI/UXデザイナーの役割と仕事を見てみましょう。

# デザインシステムの基盤そのもの、

環境システムの理解

絵を描くときにまず紙を選ぶのと同じように、アプリをデザインする前に、まずデザインするサイトのサイズを選ばなければなりません。その後、グリッド、サーフェス、背景、標高などの最も基本的な環境を設定します。

• デザイン用のサイトサイズの選択 (アンドロイド/iOS)
• 土地の大きさ（マージン、コラム、ガターなど）に合わせてグリッドを設定する
• 表面と背景の設定
• エレベーションシステムとシャドウシステムのセットアップ

# カラーシステムの理解

適切な色を選んで画面上で表現できることも重要ですが、デザインシステムでは色の役割に合わせて色を選んで指定することも重要な能力です。

• メインカラーとセカンダリカラー
• 背景色と表面色
• エラーカラー
• テキストの色など

# コンポーネントの理解

ボタン、ナビゲーション、カードなど、アプリ画面を構成する要素をコンポーネント（コンポーネント）と呼びます。各コンポーネントには役割と属性があります。これを詳しく見て、一般的に使用されるコンポーネントについて学びます。

# アプリを計画して基礎として使う

デザインシステムの実践

何もない状態でデザインシステムを作成しようとすると難しい場合があります。最初に、作成したいサービスのコアフローを設計し、それを基にメインのキー画面を描画し、それをはるかにシンプルにするシステムを作成することができます。

(↑ 視覚障害者マッサージ師向けアプリサービスの企画)

その過程で、簡単なアプリを計画する方法を学びます。ユーザーがどのようにアプリを使用するかを示すユーザーフローを中心に、画面間の動きを示す画面フローを描き、メイン画面を設計することで、描画する必要のあるメイン画面の数と構成要素を特定できます。

# 開発チームのプラクティスを考慮したヒント

デザインに注目すると、実際の開発の詳細を見落としがちです。ボタンには、マウスを上げる前、後、上げたときなど、さまざまな状態値があることを理解しておきましょう。

• 各コンポーネントの状態の理解
• CRUD を理解して画面に足りないものを補う

# 設計システムの 200% を使用

コンポーネント化/アセット設定をうまく利用すれば、ワンクリックで数十または数百のシートを同時に編集することは難しくありません。

実践を踏まえたデザインシステムの使い方を紹介します。

• デザインシステムを実際に使用する
• 雇用/離職のための設計制度
• フリーランサーとしてデザインシステムを使う

より競争力のある

デザイナーになる

現在の雇用/離職市場では、人工知能の発達と設計自動化技術の開発に伴い 私たちは、デザインを体系化する能力のあるデザイナーを好みます。

このデザインシステムクラスを通じて、基礎から実践的な応用方法まで、より競争力のあるデザイナーになるためのお手伝いをします。

私と一緒にデザインシステムの授業を始めましょう！

デザインのデザイン。デザインシステム