実装とデザインの関係超入門
UIモデル
実装とデザインの関係超入門
コード経験のない人向けにデザインを実装するときの基本をお伝えするシリーズです。
金額
4,378~
/月
完了目安
1~2
ヶ月
メンバーシップについてはこちら

コースの目的

デザインがコードでどうレイアウトされるかを知る

コード経験のない人向けにデザインを実装するときの基本をお伝えするシリーズです。

コースの詳細へ

コース内容
デザインをはじめよう
デザインがコードでどうレイアウトされるかを知る
SECTION
1.実装しづらいデザインとは?

□ 実装しやすい=データやデザインが良いというだけじゃない

エンジニアさんが実装しやすいデザインと聞くと「あーコードのこと理解しないといけないんやな….」と思います。

もちろんそうです!が、それだけではなく”コミュニケーションを通して、コードのことを教えてもらう”という視点も大事です。

プロの目線になるのは時間が必要なので、まずは相手から学ぶ、そのために意図を伝えて擦り合わせる。というのも重要です。

その点も含めて勉強会でしゃべりました!

①基本的なコードの実装法則を紹介

②実装しづらいデータの特徴を紹介

③エンジニアさんへの共有方法

□ 勉強会で使ったドキュメントはこちら

『デザイナーがエンジニアとのコミュニケーションで気をつけたいこと。』

https://www.notion.so/takumikai/1cb4164003924033b6f85cb07ca4e269

□ STUDIO実装したい時はこちらをどうぞ

『STUDIO解説 - Youtube』

https://www.youtube.com/watch?v=Xq3B2mkmln0&t=1s

03:46
カテゴリ
1.実装しづらいデザインとは?
無料
メンバー限定
SECTION
2.コードのレイアウト法則を見てみよう

□ 実装しやすい=データやデザインが良いというだけじゃない

エンジニアさんが実装しやすいデザインと聞くと「あーコードのこと理解しないといけないんやな….」と思います。

もちろんそうです!が、それだけではなく”コミュニケーションを通して、コードのことを教えてもらう”という視点も大事です。

プロの目線になるのは時間が必要なので、まずは相手から学ぶ、そのために意図を伝えて擦り合わせる。というのも重要です。

その点も含めて勉強会でしゃべりました!

①基本的なコードの実装法則を紹介

②実装しづらいデータの特徴を紹介

③エンジニアさんへの共有方法

□ 勉強会で使ったドキュメントはこちら

『デザイナーがエンジニアとのコミュニケーションで気をつけたいこと。』

https://www.notion.so/takumikai/1cb4164003924033b6f85cb07ca4e269

□ STUDIO実装したい時はこちらをどうぞ

『STUDIO解説 - Youtube』

https://www.youtube.com/watch?v=Xq3B2mkmln0&t=1s

01:30
カテゴリ
2.コードのレイアウト法則を見てみよう
無料
メンバー限定
SECTION
3.よくあるヘッダー実装を見てみよう

□ 実装しやすい=データやデザインが良いというだけじゃない

エンジニアさんが実装しやすいデザインと聞くと「あーコードのこと理解しないといけないんやな….」と思います。

もちろんそうです!が、それだけではなく”コミュニケーションを通して、コードのことを教えてもらう”という視点も大事です。

プロの目線になるのは時間が必要なので、まずは相手から学ぶ、そのために意図を伝えて擦り合わせる。というのも重要です。

その点も含めて勉強会でしゃべりました!

①基本的なコードの実装法則を紹介

②実装しづらいデータの特徴を紹介

③エンジニアさんへの共有方法

□ 勉強会で使ったドキュメントはこちら

『デザイナーがエンジニアとのコミュニケーションで気をつけたいこと。』

https://www.notion.so/takumikai/1cb4164003924033b6f85cb07ca4e269

□ STUDIO実装したい時はこちらをどうぞ

『STUDIO解説 - Youtube』

https://www.youtube.com/watch?v=Xq3B2mkmln0&t=1s

06:36
カテゴリ
3.よくあるヘッダー実装を見てみよう
無料
メンバー限定
SECTION
4.コードのレイアウト例を見る

□ 実装しやすい=データやデザインが良いというだけじゃない

エンジニアさんが実装しやすいデザインと聞くと「あーコードのこと理解しないといけないんやな….」と思います。

もちろんそうです!が、それだけではなく”コミュニケーションを通して、コードのことを教えてもらう”という視点も大事です。

プロの目線になるのは時間が必要なので、まずは相手から学ぶ、そのために意図を伝えて擦り合わせる。というのも重要です。

その点も含めて勉強会でしゃべりました!

①基本的なコードの実装法則を紹介

②実装しづらいデータの特徴を紹介

③エンジニアさんへの共有方法

□ 勉強会で使ったドキュメントはこちら

『デザイナーがエンジニアとのコミュニケーションで気をつけたいこと。』

https://www.notion.so/takumikai/1cb4164003924033b6f85cb07ca4e269

□ STUDIO実装したい時はこちらをどうぞ

『STUDIO解説 - Youtube』

https://www.youtube.com/watch?v=Xq3B2mkmln0&t=1s

03:48
カテゴリ
4.コードのレイアウト例を見る
無料
メンバー限定
SECTION
5.実装しづらいデザインデータとは?

□ 実装しやすい=データやデザインが良いというだけじゃない

エンジニアさんが実装しやすいデザインと聞くと「あーコードのこと理解しないといけないんやな….」と思います。

もちろんそうです!が、それだけではなく”コミュニケーションを通して、コードのことを教えてもらう”という視点も大事です。

プロの目線になるのは時間が必要なので、まずは相手から学ぶ、そのために意図を伝えて擦り合わせる。というのも重要です。

その点も含めて勉強会でしゃべりました!

①基本的なコードの実装法則を紹介

②実装しづらいデータの特徴を紹介

③エンジニアさんへの共有方法

□ 勉強会で使ったドキュメントはこちら

『デザイナーがエンジニアとのコミュニケーションで気をつけたいこと。』

https://www.notion.so/takumikai/1cb4164003924033b6f85cb07ca4e269

□ STUDIO実装したい時はこちらをどうぞ

『STUDIO解説 - Youtube』

https://www.youtube.com/watch?v=Xq3B2mkmln0&t=1s

04:01
カテゴリ
5.実装しづらいデザインデータとは?
無料
メンバー限定
SECTION
6.実装しづらいデザインデータ②

□ 実装しやすい=データやデザインが良いというだけじゃない

エンジニアさんが実装しやすいデザインと聞くと「あーコードのこと理解しないといけないんやな….」と思います。

もちろんそうです!が、それだけではなく”コミュニケーションを通して、コードのことを教えてもらう”という視点も大事です。

プロの目線になるのは時間が必要なので、まずは相手から学ぶ、そのために意図を伝えて擦り合わせる。というのも重要です。

その点も含めて勉強会でしゃべりました!

①基本的なコードの実装法則を紹介

②実装しづらいデータの特徴を紹介

③エンジニアさんへの共有方法

□ 勉強会で使ったドキュメントはこちら

『デザイナーがエンジニアとのコミュニケーションで気をつけたいこと。』

https://www.notion.so/takumikai/1cb4164003924033b6f85cb07ca4e269

□ STUDIO実装したい時はこちらをどうぞ

『STUDIO解説 - Youtube』

https://www.youtube.com/watch?v=Xq3B2mkmln0&t=1s

06:05
カテゴリ
6.実装しづらいデザインデータ②
無料
メンバー限定
SECTION
7.データだけじゃなく必ず意図を共有しよう

□ 実装しやすい=データやデザインが良いというだけじゃない

エンジニアさんが実装しやすいデザインと聞くと「あーコードのこと理解しないといけないんやな….」と思います。

もちろんそうです!が、それだけではなく”コミュニケーションを通して、コードのことを教えてもらう”という視点も大事です。

プロの目線になるのは時間が必要なので、まずは相手から学ぶ、そのために意図を伝えて擦り合わせる。というのも重要です。

その点も含めて勉強会でしゃべりました!

①基本的なコードの実装法則を紹介

②実装しづらいデータの特徴を紹介

③エンジニアさんへの共有方法

□ 勉強会で使ったドキュメントはこちら

『デザイナーがエンジニアとのコミュニケーションで気をつけたいこと。』

https://www.notion.so/takumikai/1cb4164003924033b6f85cb07ca4e269

□ STUDIO実装したい時はこちらをどうぞ

『STUDIO解説 - Youtube』

https://www.youtube.com/watch?v=Xq3B2mkmln0&t=1s

02:04
カテゴリ
7.データだけじゃなく必ず意図を共有しよう
無料
メンバー限定
SECTION
8.エンジニアさんにデザインを文字で共有しよう

□ 実装しやすい=データやデザインが良いというだけじゃない

エンジニアさんが実装しやすいデザインと聞くと「あーコードのこと理解しないといけないんやな….」と思います。

もちろんそうです!が、それだけではなく”コミュニケーションを通して、コードのことを教えてもらう”という視点も大事です。

プロの目線になるのは時間が必要なので、まずは相手から学ぶ、そのために意図を伝えて擦り合わせる。というのも重要です。

その点も含めて勉強会でしゃべりました!

①基本的なコードの実装法則を紹介

②実装しづらいデータの特徴を紹介

③エンジニアさんへの共有方法

□ 勉強会で使ったドキュメントはこちら

『デザイナーがエンジニアとのコミュニケーションで気をつけたいこと。』

https://www.notion.so/takumikai/1cb4164003924033b6f85cb07ca4e269

□ STUDIO実装したい時はこちらをどうぞ

『STUDIO解説 - Youtube』

https://www.youtube.com/watch?v=Xq3B2mkmln0&t=1s

04:36
カテゴリ
8.エンジニアさんにデザインを文字で共有しよう
無料
メンバー限定
SECTION
9.質問:実装しやすいデザインは綺麗なのか?

□ 実装しやすい=データやデザインが良いというだけじゃない

エンジニアさんが実装しやすいデザインと聞くと「あーコードのこと理解しないといけないんやな….」と思います。

もちろんそうです!が、それだけではなく”コミュニケーションを通して、コードのことを教えてもらう”という視点も大事です。

プロの目線になるのは時間が必要なので、まずは相手から学ぶ、そのために意図を伝えて擦り合わせる。というのも重要です。

その点も含めて勉強会でしゃべりました!

①基本的なコードの実装法則を紹介

②実装しづらいデータの特徴を紹介

③エンジニアさんへの共有方法

□ 勉強会で使ったドキュメントはこちら

『デザイナーがエンジニアとのコミュニケーションで気をつけたいこと。』

https://www.notion.so/takumikai/1cb4164003924033b6f85cb07ca4e269

□ STUDIO実装したい時はこちらをどうぞ

『STUDIO解説 - Youtube』

https://www.youtube.com/watch?v=Xq3B2mkmln0&t=1s

01:09
カテゴリ
9.質問:実装しやすいデザインは綺麗なのか?
無料
メンバー限定
SECTION
10.質問:実装の知識がないと就職できないか?

□ 実装しやすい=データやデザインが良いというだけじゃない

エンジニアさんが実装しやすいデザインと聞くと「あーコードのこと理解しないといけないんやな….」と思います。

もちろんそうです!が、それだけではなく”コミュニケーションを通して、コードのことを教えてもらう”という視点も大事です。

プロの目線になるのは時間が必要なので、まずは相手から学ぶ、そのために意図を伝えて擦り合わせる。というのも重要です。

その点も含めて勉強会でしゃべりました!

①基本的なコードの実装法則を紹介

②実装しづらいデータの特徴を紹介

③エンジニアさんへの共有方法

□ 勉強会で使ったドキュメントはこちら

『デザイナーがエンジニアとのコミュニケーションで気をつけたいこと。』

https://www.notion.so/takumikai/1cb4164003924033b6f85cb07ca4e269

□ STUDIO実装したい時はこちらをどうぞ

『STUDIO解説 - Youtube』

https://www.youtube.com/watch?v=Xq3B2mkmln0&t=1s

00:57
カテゴリ
10.質問:実装の知識がないと就職できないか?
無料
メンバー限定
SECTION
11.質問:実装はドキュメント共有すればOK?

□ 実装しやすい=データやデザインが良いというだけじゃない

エンジニアさんが実装しやすいデザインと聞くと「あーコードのこと理解しないといけないんやな….」と思います。

もちろんそうです!が、それだけではなく”コミュニケーションを通して、コードのことを教えてもらう”という視点も大事です。

プロの目線になるのは時間が必要なので、まずは相手から学ぶ、そのために意図を伝えて擦り合わせる。というのも重要です。

その点も含めて勉強会でしゃべりました!

①基本的なコードの実装法則を紹介

②実装しづらいデータの特徴を紹介

③エンジニアさんへの共有方法

□ 勉強会で使ったドキュメントはこちら

『デザイナーがエンジニアとのコミュニケーションで気をつけたいこと。』

https://www.notion.so/takumikai/1cb4164003924033b6f85cb07ca4e269

□ STUDIO実装したい時はこちらをどうぞ

『STUDIO解説 - Youtube』

https://www.youtube.com/watch?v=Xq3B2mkmln0&t=1s

02:01
カテゴリ
11.質問:実装はドキュメント共有すればOK?
無料
メンバー限定
SECTION
12.実装はフレームワークを使うのが基本か?

□ 実装しやすい=データやデザインが良いというだけじゃない

エンジニアさんが実装しやすいデザインと聞くと「あーコードのこと理解しないといけないんやな….」と思います。

もちろんそうです!が、それだけではなく”コミュニケーションを通して、コードのことを教えてもらう”という視点も大事です。

プロの目線になるのは時間が必要なので、まずは相手から学ぶ、そのために意図を伝えて擦り合わせる。というのも重要です。

その点も含めて勉強会でしゃべりました!

①基本的なコードの実装法則を紹介

②実装しづらいデータの特徴を紹介

③エンジニアさんへの共有方法

□ 勉強会で使ったドキュメントはこちら

『デザイナーがエンジニアとのコミュニケーションで気をつけたいこと。』

https://www.notion.so/takumikai/1cb4164003924033b6f85cb07ca4e269

□ STUDIO実装したい時はこちらをどうぞ

『STUDIO解説 - Youtube』

https://www.youtube.com/watch?v=Xq3B2mkmln0&t=1s

02:46
カテゴリ
12.実装はフレームワークを使うのが基本か?
無料
メンバー限定
ABOUT
コース詳細