公開中のカリキュラム

基礎

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

誰でも簡単にプロトタイプが作れるツール「InVision Cloud」について勉強しましょう。

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

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

はじめての『WordPress』入門

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

応用

AdobeXDプラグインまとめ

Adobe XD には、機能を拡張できる「プラグイン」という仕組みが用意されています。このプラグインはAdobeが公式で提供している他に、サードパーティ開発者が開発・提供できるようになっているため、世界中の開発者がプラグインの開発に取り組んでいます。複雑な作業の自動化や、外部アプリケーションとの連携など、様々なプラグインが提供されています。

Figmaプラグインまとめ

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

写真加工テクニック

Photoshopを使って写真を加工するテクニックを身に付け、様々なシーンに合わせてイメージが用意できるようにトレーニングしていきましょう。レトロ風・イラスト風・おしゃれに・可愛い・カッコいいなど、様々なバリエーションのレッスンが受けられます。

イラスト制作テクニック

Webサイトやアプリにイラストを効果的に取り入れると、よりオリジナリティのある印象に残るデザインを作ることができます。このカリキュラムでは様々なイラストの描き方を手順を追って解説していきます。

レスポンシブWebデザインコーディング術

レスポンシブWebデザインにおけるHTML・CSSのコーディングテクニックを紹介します。

CSSデザインテクニック

CSSを使った様々なデザインのコードを紹介します。

Sassを使った効率的CSSコーディング術

SassとはCSSを効率よくコーディングするためのメタ言語（拡張言語）です。プログラムのように変数や関数を使って、効率よく保守性の高いコードを記述することができます。

アイコン制作テクニック

WebサービスやアプリケーションのUIデザインには欠かせない「アイコン」。線だけで描かれたものから、カラフルで鮮やかなグラデーションが使われたものまで、様々なテイストのアイコン制作テクニックを紹介します。

Sketchプラグインまとめ

UI/UXデザインツールの大定番「Sketch」にはたくさんのプラグインがあります。作業効率化に役立つものから、思わずクスッとなってしまうネタ系まで幅広く紹介します。

実践

UIデザイン制作テクニック

実践的なUIデザイン制作を行います。お題に沿って、サンプルのアプリのUIデザインを作ってみましょう。

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

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

バナー制作テクニック

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

名刺制作テクニック

Illustratorを使った名刺の作成にチャレンジ！用紙サイズの指定や、トンボの付け方、文字のレイアウトやちょっとした工夫まで丁寧に解説します。

フライヤー制作テクニック

フライヤーとはイベントや飲食店の宣伝などに用いられる印刷物のことです。もともとは飛行機やヘリコプターで上空から撒いていた経緯から、「Flyer（空を飛ぶもの）」と呼ばれるようになりました。「チラシ」「ビラ」と言った呼び方もあります。