Brand: Coloso. | コロソ.
Price: 35000 JPY
Availability: InStock

トレーラー
クリエイティブディレクター
カイト

デザインからコーディングまで！
心地よいインタラクションを追求した
Webサイト制作ノウハウ

デザインとプログラミング
両方の経験を活かし
魅力的な見た目だけでなく
印象に残る「動き」を取り入れた
Webサイトを作り上げる
クリエイティブディレクターのカイト。

今回の講座は
Webサイト制作における
デザインとコーディングの両方に
焦点を当てた総合的なスキルを
身に付けることができる
カリキュラムです。

講座の最初に
Webデザインで必要となる
Figmaの基礎を学んだ後
２種類のWebサイト制作を通して
ビジュアルデザインと
コーディングによる実装スキルを
身に付けていきます。

ビジュアルデザインでは
デザインコンセプトの決め方や
レスポンシブデザインに対応した
グリッドシステムの使い方、
タイポグラフィの設計などを
実際にデザインを制作しながら
段階ごとに学んでいきます。

そして、デザイン性だけでなく
心地よいインタラクションを実現するための
コーディングスキルをお教えします。
HTMLやCSSでのマークアップ方法はもちろん
Tailwind CSSやAstroを用いて
Webサイトに魅力的なアニメーションを
実装するテクニックまでを伝授します。

デザイン性のある見た目だけでなく
インタラクションを意識した
「動き」を取り入れた
Webサイト制作ノウハウを
Colosoで体験してください！

講座情報

本数：22本の映像
難易度：初級・中級
無期限視聴

使用プログラム

[メインツール]
Figma
Visual Studio Code

[フレームワーク・ライブラリ]
Astro v2.3.0
Tailwind CSS v3.3.0
Lenis v1.0.9
※UIや一部機能については2023年6月撮影当時の情報です。

動画情報

オンラインVOD
オーディオ：日本語

講座特典

作品数：ウェブデザイン２種類
講座資料・課題用デザインFigmaファイル
課題用ソースコード

インタラクションを意識した
魅力的な「動き」が印象的な
カイトのポートフォリオ

Webサイト制作における
デザインから実装までのスキルを
例題に沿って身に付けます

コーポレートサイトデザイン
（デスクトップ）

コーポレートサイトデザイン
（モバイル）

アニメーションを取り入れた実装

ポートフォリオサイトデザイン
（トップページ）

ポートフォリオサイトデザイン
（モバイル）

アニメーションの実装

カイト
クリエイティブディレクター

はじめまして。
クリエイティブディレクター、
ウェブ・グラフィックデザイナー、
フルスタック開発者のカイトです。

高校時代をシアトルで過ごし
早稲田大学商学部を卒業後、
ファッションデザイナー、
グラフィックデザイナー、ウェブデザイナー、
プログラマーとしてキャリアを積んだ後
株式会社キテレツを設立しました。

ウェブとグラフィックを中心とした
デザイン、開発、ブランディング、
マーケティングなどを行っています。

制作においては
デザインとプログラミングの
両方の経験を活かして
ビジュアル的に魅力を感じさせると共に
印象に残るアニメーションや
心地いいインタラクションによる
ユーザー体験の向上にも心がけています。

カイト

現) クリエイティブディレクター

【経歴】
2014年~ 株式会社キテレツ設立、デザイナー・デベロッパーとして活動
2012年~2014年 Three & Co. ウェブデザイナー・プログラマー
2010年~2012年広告クリエイティブディレクター・グラフィックデザイナー
2007年~2010年ファッションクリエイティブディレクター・ファッションデザイナー

【著書】
『著作権トラブル解決のバイブル! クリエイターのための権利の本』（共著）
『世界一わかりやすいWordPress 導入とサイト制作の教科書』（共著）

Twitter

この講座のポイント

デザインとコーディングの両方に
焦点を当てた総合的なスキル

この講座では、Webデザインとコーディングに焦点を当て、両方のスキルを組み合わせた総合的なスキルを身に付けることができます。具体的には、デザインの基礎から応用までを網羅し、高度なコーディング技術や知識を実践的に学んでいきます。

動きを取り入れた
Webデザインと実装のノウハウ

動きを取り入れた魅力的なWebサイト制作における、デザインや実装に必要なノウハウを学びます。特に、適切なマークアップの方法や、CSSやJavaScriptを用いた効果的な動きの実装方法など、実践的なテクニックを磨くことができます。

実務に活かせる
実践的なテクニック

最新技術やトレンドを取り入れながら、理想的な概念や知識だけでなく、実際のWebサイト制作業務で役立つ実践的なテクニックや考え方を紹介します。そのため、既にある程度経験がある方でも、この講座を通して、より高度なスキルを習得することができます。

講座内容
下記のような内容を
学べます。

Figmaの基本操作とプロトタイピング

Webデザインで必要となるFigmaの基本的な使い方と、アニメーションやインタラクションのイメージを共有しやすくするための、プロトタイピングの実装方法について学びます。
レスポンシブデザインの理解と実装

レスポンシブデザインに対応したグリッドシステムの使い方や、タイポグラフィの設計、モバイルファーストのメディアクエリのメリットなどについて理解します。
アニメーション・
インタラクションデザイン

どうすれば魅力的かつ心地いいアニメーションやインタラクションを実現できるか、基本的な考え方を紹介し、ヒントとなるアイデアを共有します。

Astroの基本的な使い方

Astroは注目されているWebサイト構築フレームワークです。Astroの基本的な使い方を学び、効率的にWebサイトを実装する方法を身に付けます。
Tailwind CSSによるWebサイト実装体験

凝ったデザインの実装にTailwind CSSは向いていないと思われがちですが、実はいかに効率的かについて、実践的な演習を通して体験します。
CSS/JavaScript を用いた動きの実装

CSSやJavaScriptを使って、実際にアニメーションやインタラクションを実装します。また、活用できるライブラリの使い方についても学んでいきます。

(자동 구성) 가격이 인상됩니다.

지금이 최저가!

カリキュラム
カリキュラム内容の
ご紹介

SECTION 01. オリエンテーション

01. オリエンテーション

自己紹介
講座の特徴
使用ツール

SECTION 02. デザインツールの基礎

02. Figmaの基礎

フレームとグループ
コンポーネント
オートレイアウト
プラグイン

SECTION 03. コーポレートサイトデザイン

03. デザイン①

情報設計・ワイヤーフレームの制作
デザインコンセプトを決める

04. デザイン②

タイポグラフィ
Figma ライブラリ
スタイルの登録

05. デザイン③

トップページのデザイン

06. デザイン④

デザインの調整
レスポンシブデザイン

07. プロトタイピング①

Figma を使った簡単なプロトタイピング

08. プロトタイピング②

少し複雑なプロトタイピング

SECTION 04. 開発環境構築

09. 開発環境構築

VS Code の設定
ターミナルの使い方
Tailwind CSSについて
Astroについて

SECTION 05. コーポレートサイト実装

10. マークアップ①

Astro ファイルの説明
Tailwind CSS の拡張
モバイルファーストビューのマークアップ

11. マークアップ②

Astro コンポーネント
JSX-like 構文

12. マークアップ③

レスポンシブ対応
ホバーエフェクト

13. アニメーション・インタラクションの実装①

モバイルメニュー
アクセシビリティ対応
マーキーアニメーション

14. アニメーション・インタラクションの実装②

文字の出現アニメーション

15. アニメーション・インタラクションの実装③

モバイルメニューの文字アニメーション
最終調整

SECTION 06. ポートフォリオサイトデザイン

16. デザイン①

デザインコンセプトを決める
アニメーションのプロトタイピング

17. デザイン②

トップページのデザイン

18. デザイン③

デザインの調整
レスポンシブデザイン

SECTION 07. ポートフォリオサイト構築

19. マークアップ①

トップページのマークアップ
慣性スクロール

20. アニメーション・インタラクションの実装①

メインアニメーションの実装
レスポンシブ対応

21. アニメーション・インタラクションの実装②

オープニングアニメーション
モバイルメニュー

SECTION 08. まとめ

22. まとめ

学習ロードマップ

インタビュー
クリエイティブディレクター
カイトが
お話したいこと

Question.01
該当の分野を勉強している方が一番難しく感じている点と、この講座を通してその点をどの様に解決できるでしょうか？

よくある悩みとしては「実際に動きのあるサイトを作りたいけど、どうすればいいか分からない」というものがあります。また、「デザインのアイデアはあるけど、実際にコーディングしていくうちに上手くいかなくて挫折してしまった」という方もいらっしゃるかもしれません。本講座では、まずプロトタイピングを活用してイメージを具現化し、実装の手助けをします。そして、実践的な演習を通して、成功体験を作ります。

Question.02
講師さまご自身は、勉強してきた中で難しかった部分、それを解決するためにどのような努力をされてきましたか？

アニメーション・インタラクションデザインは、実装前のイメージ共有がしにくく、またデザインカンプと違って、どうしても実装段階で微調整を必要とするケースがほとんどで、それがとてつもなく時間のかかる行為でもあります。また、実装に関しても、求められる技術力が高いうえ、デザイン的センスも問われます。

Question.03
講師さまがお考えになる、デザイン分野においての市場性、展望についてお話ください。

専門的なデザイン職だけでなく、デザインはあらゆる職種で役に立つスキルだと思います。AIが発展しても、デザインに関する需要はあまり減少しないと個人的には考えます。1+1の答えが1つしかないのと違って、デザインによる問題解決には複数の正解があると思います。人類は自らの可能性を捨てる方向に進むことはないはずです。

Question.04
デザインを企画するにあたって、大切なポイントは何になりますか？

まずは、ニーズや目的を正確に把握することです。その目的に合わせた視覚的な表現や、情報設計が求められます。さらに、コンテンツやコンテキストに応じたデザインを行い、様々なデバイスや環境で使いやすいデザインを目指しています。これらを踏まえたうえで、少しの独自性や細部へのこだわりを加えています。

使用プログラムについて
ご案内します。

当講座は、以下のツールを使用します。
※UIや一部機能については2023年6月撮影当時の情報です。

[メインツール]
- Figma
- Visual Studio Code

[フレームワーク・ライブラリ]
- Astro v2.3.0
- Tailwind CSS v3.3.0
- Lenis v1.0.9

おすすめの講座
この講座を見た方は
こちらもチェック！

ご注意事項

*本ページ上の情報は弊社の都合により事前の告知なく変更、終了することがございます。予めご了承ください。
*講座の返金規定はColosoの返金ポリシーに準じます。▶ 返金ポリシーはこちら
* 受講、例題使用範囲などの知的財産権、機器台数制限に関する情報はFAQ 欄でご確認ください。

Search Input

デザインから実装まで動きを取り入れたWebサイト制作