Search Input

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

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




講座詳細




プロダクトデザイナー,小木曽槙一_코기소 Details

講座紹介

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


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

Coloso プロダクトデザイナー 小木曽槙一 原理原則による実践的Webサイト設計 with Astro

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

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

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

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

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

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

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

 Coloso プロダクトデザイナー 小木曽槙一 原理原則による実践的Webサイト設計 with Astro

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

 Coloso プロダクトデザイナー 小木曽槙一 原理原則による実践的Webサイト設計 with Astro

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

 Coloso プロダクトデザイナー 小木曽槙一 原理原則による実践的Webサイト設計 with Astro

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

Coloso 講座特徴1
講座情報

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

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

HTML
CSS
JavaScript(Astro)
Figma

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

Coloso 講座特徴3
動画情報

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

Coloso 講座特徴4
講座特典

講座内容の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 業務効率化のちゃんりょう
Coloso 小木曽槙一

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


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

Twitter
講座のポイント

この講座のポイント

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

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

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

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

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

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

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

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

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

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


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

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

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

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

背景イメージ
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の返金ポリシーに準じます。▶ 返金ポリシーはこちら
* 受講、例題使用範囲などの知的財産権、機器台数制限に関する情報はFAQ 欄でご確認ください。