chot.design 無料公開中のレッスンまとめ

デザインを学ぼう！chot.designの使い方

chot.designを使ってデザインを学びましょう！このサイトの使い方や、Webデザイン・UI/UXデザインにまつわる仕事内容の紹介、デザイナー転職のコツなど。

1. chot.designをはじめる前に

1. 1-1. chot.designへようこそ！
2. 1-2. 「無料カリキュラム」の取り組み方
3. 1-3. 「有料カリキュラム」について

2. 職種別デザイン学習のコツ

1. 2-1. デザイナーの仕事とは？グラフィック・Web・UI/UX…仕事内容や働き方について紹介
2. 2-2. Webデザイナーを目指す人向けおすすめの勉強法
3. 2-3. UI/UXデザイナーを目指す人向けおすすめの勉強法

はじめてのデザイン　〜デザインの基本・考え方〜

これからデザイナーを目指す人も、ノン・デザイナーの方も、現役のデザイナーの方も。デザインとは何か？デザインの基礎知識とは？そしてどうやってデザインを考えればよいのか解説します。

1. デザインを考える前に

1. 1-1. デザインの役割と重要性について
2. 1-2. デザインの対象物とそれぞれの特性
3. 1-3. デザインの進め方

2. デザインの4つの基本原則

1. 2-2. デザインの4つの基本原則 - コントラスト
2. 2-1. デザインの4つの基本原則を意識する
3. 2-3. デザインの4つの基本原則 - 近接
4. 2-4. デザインの4つの基本原則 - 整列
5. 2-5. デザインの4つの基本原則 - 反復

3. 色と配色の基本

1. 3-1. カラーホイール（色相環）
2. 3-2. 色の三属性
3. 3-3. 色の分類
4. 3-4. 色の持つイメージ
5. 3-5. 色の見え方
6. 3-6. 配色のルール
7. 3-7. 色の対比

4. タイポグラフィ

1. 4-1. タイポグラフィとは
2. 4-2. 文字の種類と基本的なフォント
3. 4-3. フォントの選び方
4. 4-4. 文字組みの基本的なテクニック
5. 4-5. 文字組みをレイアウトする

5. 写真や画像を効果的に使う

1. 5-1. 写真・画像が果たす役割について
2. 5-2. 写真を補正する
3. 5-3. 写真から傷や汚れを取り除く
4. 5-4. 写真をモノクロにする
5. 5-5. 写真をトリミング・切り抜きする
6. 5-6. 写真を合成する

6. イラストレーションを効果的に使う

1. 6-1. イラストレーションとは
2. 6-2. アイコンを活用する
3. 6-3. 図解を活用する
4. 6-4. グラフで情報を表現する
5. 6-5. イラストで雰囲気を作り上げる

7. デザインしてみよう

1. 7-1. 名刺をデザインする
2. 7-2.フライヤーをデザインする
3. 7-3. Webサイトをデザインする
4. 7-4. スマホアプリをデザインする

写真・画像・デザイン編集『Photoshop』入門

写真補正や画像合成などが行えるWebデザイナーにとって必須のツール「Photoshop」について勉強しましょう。

1. Photoshopの概要とインストール

1. 1-1. Photoshopの概要
2. 1-2. Photoshopのインストール
3. 1-3. Photoshopの起動、新しいファイルを作成する
4. 1-4. Photoshopのファイルの保存と終了
5. 1-5. Photoshopのファイル形式
6. 1-6. Photoshopの各パーツの呼び方

イラスト・ロゴ・名刺・ポスター制作『Illustrator入門』

イラストやロゴを作ったり、名刺やポスターなどの印刷物のデータを作成することが出来る『Illustrator』について、基本的な使い方を解説します。

1. Illustratorの概要とインストール

1. 1-1. Illustratorの概要
2. 1-2. Illustratorのインストール
3. 1-5. Illustratorのファイルの保存と終了
4. 1-6. Illustratorのファイル形式
5. 1-3.Illustratorの起動、ファイルを開く、新規作成
6. 1-7. Illustratorの各パーツの呼び方
7. 1-4. Illustratorのカラーモードを設定する

UI/UXデザインツール『Adobe XD』入門

Adobe XDはWebサイト・モバイルアプリ・音声UIなど様々なデバイス向けにデザインとプロトタイプを作成することができるソフトウェアです。XDを使ってアプリのUIデザイン作成にチャレンジしてみましょう。

1. Adobe XDの概要とインストール

1. 1-2. Adobe XDの料金プラン
2. 1-3. Adobe XDの初期設定とインストール
3. 1-4. Adobe XDのドキュメント（ファイル）の取り扱い
4. 1-1. Adobe XDの概要
5. 1-5. Adobe XDでPhotoshop・Illustrator・Sketchを開く方法
6. 1-6. PNG・JPEG・PDF・SVG形式でファイルをエクスポートする
7. 1-7. Adobe XDの公式スターターキットを用いた学習方法

はじめてのWebデザイン『HTML・CSS』入門

Webサイトは「HTML」という文章の構造を組み立てるマークアップ言語と、装飾やレイアウトを指定するための「CSS」という言語で作られています。Webデザイナーにとって非常に重要なスキルである「HTML・CSS」の使い方を解説します。

1. HTMLとCSSを学ぶ準備

1. 1-1. Webサイトの仕組みとHTML・CSSについて
2. 1-2. Visual Studio Code のインストールと初期設定
3. 1-3. Google Chromeをインストールしよう

コーディングなしのWebサイト作成『STUDIO』入門

コーディングなしでWebサイトがつくれるデザインツール「STUDIO」について学べます。Webデザイン初心者の方〜デザイン・サーバーまでオールインワンで済ませたい方におすすめです。

1. STUDIOの概要とサインアップ

1. 1-1. STUDIOの概要
2. 1-2. STUDIOのサインアップ・ログイン
3. 1-3. デザインツールとしての特徴

UI/UXデザインツール『Figma』入門

リアルタイムで共同編集ができる新しいデザインツールとして注目を浴びる「Figma」について学べるカリキュラムです。チームでアプリやWebサービスを作っている現場におすすめ。

1. Figmaの概要とインストール

1. 1-1. Figmaの概要
2. 1-2. 初期設定とインストール
3. 1-3. Figmaの初回フィル起動時チュートリアルの解説
4. 1-4. Figmaの料金プランと権限管理の説明
5. 1-5. Figmaのファイル管理とSketchファイルのインポート方法

UI/UXデザインツール『Sketch』入門

UI/UXデザインの定番ツールと言えば「Sketch」。このカリキュラムではSketchの基本的な使い方を学びながら、スマホアプリのデザインについて学ぶことができます。

1. Sketchの概要とインストール

1. 1-1. Sketchの特徴やデザインツールの変遷について知る
2. 1-2. アプリのインストール方法とライセンスの説明
3. 1-3. Sketchの主な操作方法を知る
4. 1-4. Sketchのファイル・データ構造について

バナー制作テクニック

Webサイトにはなくてはならない「バナー広告」。文言や写真・イラストの配色やレイアウトを工夫して、クリックしてもらいやすいバナーづくりにチャレンジしましょう！実際によくあるようなECサイトやゲーム、Webサービスのバナー広告をPhotoshopやIllustratorを使って作っていきます。

バナーを作ってみよう【初級編】

1. 通販サイトのバナーを作ろう（前半）
2. 通販サイトのバナーを作ろう（後半）

ランディングページ制作テクニック

ランディングページ（略してLP）とは、商品やサービスの紹介を1枚のページで表現し、購入や申込みなどを促進するためのWebページです。レイアウト・装飾の基本的な考え方が詰まったものですので、写真加工・アイコン制作・イラスト制作・バナー制作などが身についてきたらぜひチャレンジしてみましょう。

ランディングページ制作初級

1. 「通販サイトのLPを作ろう①」お題・ターゲット・バナー・商品を確認して構成を考えよう
2. 「通販サイトのLPを作ろう②」ファーストビューを作成しよう
3. 「通販サイトのLPを作ろう③」導入・商品説明の画面を作成しよう
4. 「通販サイトのLPを作ろう④」お客様の声・よくあるご質問の画面を作成しよう

はじめての『WordPress』入門

WordPress（ワードプレス）は世界で最も利用されているサイトが多いCMS（コンテンツマネジメントシステム）です。このカリキュラムではWordPressの開発環境づくりから、管理画面の使い方、オリジナルテーマの作り方、プラグインの紹介など、WordPressでのサイト制作が一通り学べる内容になっています。

1. WordPressをはじめる準備

1. 1-1. WordPress とは何か？
2. 1-2. PHP と MySQL について
3. 1-3. MAMP を使った開発環境の構築（Mac）
4. 1-5. WordPress のインストール
5. 1-6. Local by Flywheel を使った開発環境の構築

Webディレクターの基礎知識

Webディレクターとは、Web制作において企画・進行管理・品質管理などを行う仕事です。必要とされる知識は多岐に渡り、デザイン・プログラミング・マーケティングなど、様々なスキルが求められます。このカリキュラムではWebディレクターに必要な知識を幅広く紹介していきます。

サイトマップの作り方

1. サイトマップの作り方（１）
2. サイトマップの作り方（２）
3. サイトマップの作り方（３）

Figmaプラグインまとめ

Figmaプラグインのカリキュラムです。ノンデザイナーでも簡単に使いこなすことのできるFigmaですが、プラグインを使用することで更に、便利に、使いやすくカスタマイズすることができます。プラグインを活用して作業効率をアップしていきましょう！

便利なFigmaのプラグインまとめ その1

1. 画像からカラーを抽出してくれるプラグイン「Image Palette」
2. グラデーションを自動生成してくれるプラグイン「uiGradient」
3. 仮のダミーテキストを追加してくれるプラグイン「Content Reel」