Question.01
今回の講座の内容と、
主なポイントは何ですか？
プロダクトデザイナー,小木曽槙一_코기소 カリキュラムの説明
トレーラー
プロダクトデザイナー
小木曽槙一
HTMLとCSSの本質を理解して
実践的なウェブサイトを設計するノウハウ
様々なツールの進化により、
コードをあまり理解せずとも、
誰でも簡単にウェブサイトが作れる昨今。
しかしながら、
高度なウェブサイトを設計するためには、
HTML/CSSの原理原則への理解が必須です。
今回の講座では、
10年以上のデザイナー・エンジニア経験を持つ
プロダクトデザイナーの小木曽槙一が、
HTML＋CSSの詳しい仕様や本質、
ウェブの仕組みから
ウェブデザインの原則までを
体系的にお教えします。
そして、実践的かつ高度な設計を学び、
システマティックなウェブサイトを
作れるようになるのが最終目標です。
まずはウェブ開発の基礎となる
HTML＋CSSを使った、
実践的なコーディングを学習。
特に、特別なフレームワークを
使わずに学ぶことで、
本質的なコードを読み書きする能力を
養うことができます。
次に、ウェブサイトを高速かつ便利に
作るための最新フレームワークである
「Astro」の基礎知識や環境構築、
設定手法から実践までを
分かりやすく解説します。
例題に沿って段階的に学ぶことで、
高度なHTMLとCSSの
最新のプロパティと書き方はもちろん、
ウェブサイトを作るフローとテクニックを学び、
現場の実務レベルのスキルを習得できます。
ウェブサイト設計において重要な情報設計と、
インターフェース原則についての
「土台づくり」ができる講座を、
Colosoで体験してください！
講座のおすすめ
こんな方におすすめです
HTMLとCSSはある程度学んでいて、もう一歩先にいきたいマークアップエンジニア
ウェブデザインのベースは学べたけれど、HTMLとCSSを理解した上でデザインしたいデザイナー
デザインとエンジニアリング、どちらに重きをおいてスキルを磨いていくか悩んでいるデザイナーやエンジニア
講座情報
本数：26本の映像
難易度：中級
無期限視聴
使用プログラム
HTML
CSS
JavaScript（Astro）
Figma
※詳細はページ内下段の使用プログラムについての案内をご確認ください。
動画情報
オンラインVOD
オーディオ：日本語
講座特典
講座内容のPDF
コーディング対象となる架空ウェブサイトのFigmaファイルへのリンク
コーディングデータ一式（GitHubリンク）
グラフィックからUIデザイン、
エンジニアリングまで幅広い経歴を持つ
小木曽槙一のポートフォリオ
ウェブサイトのコーディング・実装多数
例) イベントサイト、デザイナー個人サイトなど
イベント登壇
例) Spectrum Tokyo Design Fest 2022や所属企業
プロダクトデザイン
例) 業務アプリケーション・UIライブラリなどの設計
ブログ・記事発信
例) note記事、採用メディア連載など
シンプルかつ実践的な
ウェブサイト実装フローを
例題を通して身に付けます
最新のCSSとHTMLの書き方
実習を通して身に付けられる内容
- Grid LayoutやContainer Queriesなどの使い方
- レイアウトプリミティブの考え方
Astroフレームワークの設定と理解
実習を通して身に付けられる内容
- NPM/Nodeの開発環境設定
- エディタの設定やプラグイン準備
- モダンなJavaScript製フレームワーク「Astro」の使い方
一からサイト作成～公開
実習を通して身に付けられる内容
- 実践的なコーディングの流れ
- GitHubへのアップロードからデプロイまでの公開手順
- CI導入手順
コンポーネント設計
実習を通して身に付けられる内容
- 簡単なコンポーネント設計方法
- Storybook化
小木曽槙一
プロダクトデザイナー
こんにちは。
プロダクトデザイナーの
小木曽槙一（こぎそ しんいち）です。
グラフィック制作会社やウェブ制作会社で
10年以上の
デザイナー・エンジニア経験を持ち、
その後は事業会社のデザインエンジニアとして
働きました。
現在はプロダクトデザイナーとして
事業会社に勤務、インターフェースの設計や
機能開発に従事しています。
また、デザインシステムや
全社横断のUIコンポーネントの開発など、
社内横断プロジェクトにも参画しています。
プライベートではパラレルキャリアを標榜し、
副業でエンジニア・デザイナー・アドバイザー
として活動し、ひとつの会社に閉じない
様々な領域で活動しています。
今回の講座を通して、皆さんの実力が
「HTMLとCSSがちょっとできる」から
「HTMLとCSSができる」になるための
お手伝いができれば嬉しいです。
小木曽槙一
現) 事業会社プロダクトデザイナー
前) 事業会社 デザインエンジニア
前) 受託制作会社のウェブエンジニア・デザイナー
【活動経歴】
・アプリケーションのUI設計、開発
・デザインシステムの構築・ドキュメント更新
・UIコンポーネントライブラリの開発・設計
・ロゴなどのVI作成・設計
・イベントへの登壇
この講座のポイント
ウェブ開発の基礎となるHTML＋CSSで実践的なコーディングを学習
HTMLとCSSを使ってコーディングを学ぶことは、ウェブ開発の基礎を理解する上で重要です。UIフレームワークに依存するのではなく、素のHTML+CSSだけでコーディングを行うことで、本質的なコードを読み書きする能力を養うことができます。
モダンウェブフレームワーク「Astro」の使い方から実践まで解説
ウェブサイト構築に最適なフレームワークは状況によって異なりますが、本講座では「Astro」をベースに進めていきます。「Astro」の特徴や、開発に準備するべきツール、構築の流れなどを幅広くお教えします。
インターフェースと情報設計を理解するための土台作り
ウェブサイト設計をするためには、情報設計やインターフェース原則への理解が欠かせません。直感的に理解できること、視覚的な設計に基づいていること、一貫性があることなど、ポイントを押さえながら解説します。
講座内容
下記のような内容を
学べます。
-
デザインとエンジニアリングの親和性ウェブサイトはデザインとエンジニアリングが「溶ける」必要性を感じられる良い教材です。ウェブデザインの原則を理解し、コーディング対象となるデザインとコードを行き来しながら、デザインをコードに落とし込んでいく様子を実演します。 -
コンポーネントや
レイアウトシステムを用いた設計コンポーネントやシステムを用いた設計は、アプリケーションやウェブサイトの開発を効率的に行うために必要です。コンポーネントやモジュールを再利用することで、開発コストを削減することができる方法など、多様なノウハウを紹介します。 -
HTMLとCSSを使った
実践的なコーディングCSSフレームワークを使わず、「素」のHTMLとCSSだけでコーディングをすることで、HTMLとCSSの基本的な構造や機能への理解を深め、本質的なコードを読み書きする能力を養うことができます。
-
アクセシビリティ改善や
SNSメディア向け対応の方法ウェブサイト構築において当たり前になっているアクセシビリティ改善や、各SNSメディアへの対応方法など、今では業界内で幅広く認識されている考え方や手段についてもお伝えします。 -
協業するための仕組み・
ツールへの理解昨今の高度なウェブサイトやアプリケーションは一人で作ることは少なく、必ず誰かと協業したり、チームを組んで開発します。本講座では継続的インティグレーション・継続的デリバリー（CI/CD）に必要な、基本的技術や知識をわかりやすく学べます。 -
モダンなコーディング手法の習得HTMLとCSSの最新仕様の恩恵を受けられやすくなった昨今、HTMLとCSSの設計手法自体の進化も早くなっています。最新の有用な書き方を知ることで、モダンなコーディング手法を身に付けることができます。
一回の購入で、期限の制限なく視聴することができます。
毎週金曜日の18時、販売価格が上がります。
もうすぐ販売価格が上がる予定です。
今すぐご購入ください！
カリキュラム
カリキュラム内容の
ご紹介
*15講までの講座動画は2023年４月３日に公開予定です。16講以降は５月４日公開を予定しており、公開日程及び講座内容は事前に予告なく変更される可能性がございます。予めご了承ください。
インタビュー
プロダクトデザイナー
小木曽槙一が
お話したいこと
昨今、ウェブサイト制作は敷居が大きく下がっています。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
【受講前にご確認ください】
・本講座ではnode、npmパッケージのパソコンへのインストールが必須になります。インストールの方法は講座内で簡単に説明しますが、これらがインストールできる環境準備が不可欠です。
・基本的にMacの使用を推奨しますが、Windowsでも動作します。
おすすめの講座
この講座を見た方は
こちらもチェック！
返金規定
Coloso返金規約
Colosoサービスを利用される利用者様(（以下、「会員」とする。）が、株式会社Day1Company(以下、「弊社」とする。)にてご購入された講座チケットの返金、返品・交換について、各々次の規定に沿って対応いたします。また、弊社が別途定めた返金、返品・交換について規定がある場合、その該当の規定に沿うものとします。
購入と同時に受講が可能な講座について：受講有無に関係なくキャンセル不可
事前予約講座について：
①購入後、映像公開前まではキャンセル可能
②映像公開後はいかなる場合でもキャンセル不可
動画再生端末の台数制限について
１つのアカウント当たり再生可能なデバイス数は３台でございます。デバイスの登録は、動画視聴時に順次登録されることになります。携帯の機種変更などの理由で、登録されたデバイスを削除されたい場合は、help@coloso.jpまでお問い合わせください。年１回に限りデバイス変更が可能になります。
（３つ目のデバイスまでは動画を再生すると自動で登録されます。）