Search Input

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

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




講座詳細




クリエイティブディレクター,カイト_코가 Details

講座紹介

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


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

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

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

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

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

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

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

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

Coloso 講座特徴1
講座情報

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

Coloso 講座特徴2
使用プログラム

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

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

Coloso 講座特徴3
動画情報

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

Coloso 講座特徴4
講座特典

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

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

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

Coloso カイト 講座例題
コーポレートサイトデザイン
(デスクトップ)
Coloso カイト 講座例題
コーポレートサイトデザイン
(モバイル)
Coloso カイト 講座例題
アニメーションを取り入れた実装
Coloso カイト 講座例題
ポートフォリオサイトデザイン
(トップページ)
Coloso カイト 講座例題
ポートフォリオサイトデザイン
(モバイル)
Coloso カイト 講座例題
アニメーションの実装
講師紹介

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


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

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

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

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

背景イメージ
Coloso カイト
カイト

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


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

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

Twitter
講座のポイント

この講座のポイント

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

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

Coloso カイト 講座のポイント

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

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

Coloso カイト 講座のポイント

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

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

Coloso カイト 講座のポイント

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


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

지금이 최저가!
カリキュラム

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

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

01. オリエンテーション

  1. 自己紹介
  2. 講座の特徴
  3. 使用ツール
SECTION 02. デザインツールの基礎

02. Figmaの基礎

  1. フレームとグループ
  2. コンポーネント
  3. オートレイアウト
  4. プラグイン
SECTION 03. コーポレートサイトデザイン

03. デザイン①

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

04. デザイン②

  1. タイポグラフィ
  2. Figma ライブラリ
  3. スタイルの登録

05. デザイン③

  1. トップページのデザイン

06. デザイン④

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

07. プロトタイピング①

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

08. プロトタイピング②

  1. 少し複雑なプロトタイピング
SECTION 04. 開発環境構築

09. 開発環境構築

  1. VS Code の設定
  2. ターミナルの使い方
  3. Tailwind CSSについて
  4. Astroについて
SECTION 05. コーポレートサイト実装

10. マークアップ①

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

11. マークアップ②

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

12. マークアップ③

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

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

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

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

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

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

  1. モバイルメニューの文字アニメーション
  2. 最終調整
SECTION 06. ポートフォリオサイトデザイン

16. デザイン①

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

17. デザイン②

  1. トップページのデザイン

18. デザイン③

  1. デザインの調整
  2. レスポンシブデザイン
SECTION 07. ポートフォリオサイト構築

19. マークアップ①

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

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

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

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

  1. オープニングアニメーション
  2. モバイルメニュー
SECTION 08. まとめ

22. まとめ

  1. 学習ロードマップ

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

背景イメージ
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

After Effects Illustrator Photoshop
おすすめの講座

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

ご注意事項

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