Skip to content

Coloso. | コロソ.

プロダクトデザイナー,小木曽槙一_코기소 カリキュラム紹介

原理原則による実践的Webサイト設計 with Astro

プロダクトデザイナー 小木曽槙一
  • ウェブサイト
  • HTML
  • CSS
  • JavaScript
  • 講座の紹介
    「設計のいろは」を軸に実践的かつシンプルな形でHTMLとCSSを理解して、ウェブサイトを実装する手法や、モダンウェブフレームワーク「Astro」の基礎知識から実践までを学べる講座です。
  • 無期限視聴
    一回の購入で、プロダクトデザイナー 小木曽槙一ならではの、HTMLとCSSによる実践的なウェブサイトの設計ノウハウを盛り込んだ講義動画26本を期間制限なしで受講することができます。
    • 無期限視聴
    • 4月3日 9時 オープン
    • 4月7日 販売価格が上がります。
    • ¥18,500 ¥35,000 47% 割引

プロダクトデザイナー,小木曽槙一_코기소 カリキュラムの説明

トレーラー
プロダクトデザイナー
小木曽槙一


HTMLとCSSの本質を理解して
実践的なウェブサイトを設計するノウハウ

様々なツールの進化により、
コードをあまり理解せずとも、
誰でも簡単にウェブサイトが作れる昨今。
しかしながら、
高度なウェブサイトを設計するためには、
HTML/CSSの原理原則への理解が必須です。

今回の講座では、
10年以上のデザイナー・エンジニア経験を持つ
プロダクトデザイナーの小木曽槙一が、
HTML+CSSの詳しい仕様や本質、
ウェブの仕組みから
ウェブデザインの原則までを
体系的にお教えします。
そして、実践的かつ高度な設計を学び、
システマティックなウェブサイトを
作れるようになるのが最終目標です。

まずはウェブ開発の基礎となる
HTML+CSSを使った、
実践的なコーディングを学習。
特に、特別なフレームワークを
使わずに学ぶことで、
本質的なコードを読み書きする能力を
養うことができます。

次に、ウェブサイトを高速かつ便利に
作るための最新フレームワークである
「Astro」の基礎知識や環境構築、
設定手法から実践までを
分かりやすく解説します。

例題に沿って段階的に学ぶことで、
高度なHTMLとCSSの
最新のプロパティと書き方はもちろん、
ウェブサイトを作るフローとテクニックを学び、
現場の実務レベルのスキルを習得できます。

ウェブサイト設計において重要な情報設計と、
インターフェース原則についての
「土台づくり」ができる講座を、
Colosoで体験してください!

講座のおすすめ
こんな方におすすめです

HTMLとCSSはある程度学んでいて、もう一歩先にいきたいマークアップエンジニア

ウェブデザインのベースは学べたけれど、HTMLとCSSを理解した上でデザインしたいデザイナー

デザインとエンジニアリング、どちらに重きをおいてスキルを磨いていくか悩んでいるデザイナーやエンジニア

Coloso 講座特徴
講座情報

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

Coloso 使用プログラム
使用プログラム

HTML
CSS
JavaScript(Astro)
Figma

※詳細はページ内下段の使用プログラムについての案内をご確認ください。

Coloso 動画情報
動画情報

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

Coloso 講座特典
講座特典

講座内容のPDF
コーディング対象となる架空ウェブサイトのFigmaファイルへのリンク
コーディングデータ一式(GitHubリンク)

グラフィックからUIデザイン、
エンジニアリングまで幅広い経歴を持つ
小木曽槙一のポートフォリオ

小木曽 槙一 ポートフォリオ

ウェブサイトのコーディング・実装多数
例) イベントサイト、デザイナー個人サイトなど

小木曽 槙一 ポートフォリオ

イベント登壇
例) Spectrum Tokyo Design Fest 2022や所属企業

小木曽 槙一 ポートフォリオ

プロダクトデザイン
例) 業務アプリケーション・UIライブラリなどの設計

小木曽 槙一 ポートフォリオ

ブログ・記事発信
例) note記事、採用メディア連載など

シンプルかつ実践的な
ウェブサイト実装フローを
例題を通して身に付けます

Coloso 小木曽 槙一 講座例題
最新のCSSとHTMLの書き方

実習を通して身に付けられる内容
- Grid LayoutやContainer Queriesなどの使い方
- レイアウトプリミティブの考え方

Coloso 小木曽 槙一 講座例題
Astroフレームワークの設定と理解

実習を通して身に付けられる内容
- NPM/Nodeの開発環境設定
- エディタの設定やプラグイン準備
- モダンなJavaScript製フレームワーク「Astro」の使い方

Coloso 小木曽 槙一 講座例題
一からサイト作成~公開

実習を通して身に付けられる内容
- 実践的なコーディングの流れ
- GitHubへのアップロードからデプロイまでの公開手順
- CI導入手順

Coloso 小木曽 槙一 講座例題
コンポーネント設計

実習を通して身に付けられる内容
- 簡単なコンポーネント設計方法
- Storybook化

小木曽槙一
プロダクトデザイナー


こんにちは。 プロダクトデザイナーの
小木曽槙一(こぎそ しんいち)です。
グラフィック制作会社やウェブ制作会社で
10年以上の
デザイナー・エンジニア経験を持ち、
その後は事業会社のデザインエンジニアとして
働きました。

現在はプロダクトデザイナーとして
事業会社に勤務、インターフェースの設計や
機能開発に従事しています。
また、デザインシステムや
全社横断のUIコンポーネントの開発など、
社内横断プロジェクトにも参画しています。

プライベートではパラレルキャリアを標榜し、
副業でエンジニア・デザイナー・アドバイザー
として活動し、ひとつの会社に閉じない
様々な領域で活動しています。

今回の講座を通して、皆さんの実力が
「HTMLとCSSがちょっとできる」から
「HTMLとCSSができる」になるための
お手伝いができれば嬉しいです。

背景イメージ
Coloso 業務効率化のちゃんりょう
小木曽槙一

現) 事業会社プロダクトデザイナー
前) 事業会社 デザインエンジニア
前) 受託制作会社のウェブエンジニア・デザイナー


【活動経歴】
・アプリケーションのUI設計、開発
・デザインシステムの構築・ドキュメント更新
・UIコンポーネントライブラリの開発・設計
・ロゴなどのVI作成・設計
・イベントへの登壇

Twitter

この講座のポイント

ウェブ開発の基礎となるHTML+CSSで実践的なコーディングを学習

HTMLとCSSを使ってコーディングを学ぶことは、ウェブ開発の基礎を理解する上で重要です。UIフレームワークに依存するのではなく、素のHTML+CSSだけでコーディングを行うことで、本質的なコードを読み書きする能力を養うことができます。

Coloso 小木曽 槙一 講座のポイント

モダンウェブフレームワーク「Astro」の使い方から実践まで解説

ウェブサイト構築に最適なフレームワークは状況によって異なりますが、本講座では「Astro」をベースに進めていきます。「Astro」の特徴や、開発に準備するべきツール、構築の流れなどを幅広くお教えします。

Coloso 小木曽 槙一 講座のポイント

インターフェースと情報設計を理解するための土台作り

ウェブサイト設計をするためには、情報設計やインターフェース原則への理解が欠かせません。直感的に理解できること、視覚的な設計に基づいていること、一貫性があることなど、ポイントを押さえながら解説します。

Coloso 小木曽 槙一 講座のポイント

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

一回の購入で、期限の制限なく視聴することができます。
毎週金曜日の18時、販売価格が上がります。


もうすぐ販売価格が上がる予定です。
今すぐご購入ください!

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

*15講までの講座動画は2023年4月3日に公開予定です。16講以降は5月4日公開を予定しており、公開日程及び講座内容は事前に予告なく変更される可能性がございます。予めご了承ください。

インタビュー
プロダクトデザイナー
小木曽槙一が
お話したいこと

背景イメージ
Question.01
今回の講座の内容と、
主なポイントは何ですか?


昨今、ウェブサイト制作は敷居が大きく下がっています。Colosoのような学習サービスが増えて学びの敷居は下がり、ノーコードツールやビルダーツールの進化により、HTMLやCSSを理解せずとも簡単にウェブサイトが作れる時代です。

しかし、わかりやすく簡便化された学習だけでは現場や実践で通用しません。また、便利なサービスやUIフレームワークを使った学習では、HTMLやCSSの本質的な理解は難しいでしょう。本講座では「設計のいろは」を軸に、実践的かつシンプルな形でHTMLとCSSを理解し、実装する手法を学ぶことができます。

Question.02
講師さまだけの強みについて
お教えください。


もともと私はグラフィックデザイナーでしたが、受託制作会社のウェブデザイナーへ転身し、HTMLとCSSによるコーディングを多く経験した後、JavaScriptやPHPなどを使い、ウェブアプリケーションを実装するウェブエンジニアとしても働きました。グラフィックからUIデザイン、エンジニアリングまで網羅的に経験した結果、それぞれの難しさと大切さを理解できることが私の強みです。

Question.03
今回の講座を受講するにあたって、必要とされる関連知識や先行すべき学習内容はありますか?


コーディング対象のウェブサイトのデザインはFigma上で制作しているので、Figmaの基本的な使い方が分かるとスムーズにコーディングへ進めます。また、本講座ではHTMLやCSSの基礎的な書き方についてはサポートしていないので、ある程度理解した上で臨むと理解しやすいでしょう。

本講座はJavaScriptの出番は殆どありませんが、ウェブサイトを構築するためにJavaScript製のフレームワークを使うため、NodeやNPMなどの開発に必要なソフトウェアのインストールが必須になります。セットアップを円滑に進めるために、事前にどんなものかを理解しておくことを推奨します。

Question.04
受講後に到達できる
目標について教えてください。


ウェブサイトを作るフロー・テクニックを学び、現場の実践に相当するスキルを獲得できます。また、その過程でHTMLとCSSのモダンな書き方や、ウェブサイトを高速かつ便利に作るための最新のフレームワーク「Astro」の基礎知識と、環境構築・設定手法をわかりやすく学べます。

Question.05
今後の該当業界の市場性や展望について、また、その点をふまえて講師さまがお考えになる、本講座を学ぶべき理由についてお教えください。


ReactやVueなどのUIフレームワークや、MUIや、Chakra UIなどのコンポーネントライブラリが発展した結果、HTMLとCSSが隠蔽(ラップ)され、開発者は意識せずにHTML/CSSを書くことができています。ウェブサイトを作ることはますます簡単になり、StudioやWebFlowなどのノーコードツールが増えて、HTMLとCSSを意識することが少なくなってきています。しかしウェブのどの技術もHTMLとCSSは使われており、我々が普段よく目にして使っているウェブのインターフェースはHTMLとCSSで作られています。HTMLとCSSをまず理解することこそが、ウェブ制作・開発者のキャリアの始まりだと考えています。

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

当講座は、以下のツールを使用します。

[メインツール]
HTML
CSS
JavaScript(Astro)
Figma

Microsoft365 Excel

【受講前にご確認ください】
・本講座ではnode、npmパッケージのパソコンへのインストールが必須になります。インストールの方法は講座内で簡単に説明しますが、これらがインストールできる環境準備が不可欠です。
・基本的にMacの使用を推奨しますが、Windowsでも動作します。

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

返金規定

Coloso返金規約

Colosoサービスを利用される利用者様((以下、「会員」とする。)が、株式会社Day1Company(以下、「弊社」とする。)にてご購入された講座チケットの返金、返品・交換について、各々次の規定に沿って対応いたします。また、弊社が別途定めた返金、返品・交換について規定がある場合、その該当の規定に沿うものとします。

購入と同時に受講が可能な講座について:受講有無に関係なくキャンセル不可

事前予約講座について:
①購入後、映像公開前まではキャンセル可能
②映像公開後はいかなる場合でもキャンセル不可


動画再生端末の台数制限について

1つのアカウント当たり再生可能なデバイス数は3台でございます。デバイスの登録は、動画視聴時に順次登録されることになります。携帯の機種変更などの理由で、登録されたデバイスを削除されたい場合は、help@coloso.jpまでお問い合わせください。年1回に限りデバイス変更が可能になります。
(3つ目のデバイスまでは動画を再生すると自動で登録されます。)