4/27(Sat)

今日の生放送

21:00 - 22:00

【再放送】表情で「面白い、もっと聞きたい」を引き出す

【再放送】表情で「面白い、もっと聞きたい」を引き出す 第1回

こばやす

こばやす

Webデザイナー／ディレクター

独学からIT企業インハウスのWebデザイナーへ転身。個人では講師業や初学者のメンターとして制作アドバイスも行っている。印刷・Webサイトデザイン、コーディング、ディレクター、採用担当、フリーランスを一通り経験。twitterでは様々な立場になって分かったWeb制作実務の話やデザイン初学者に向けた学習のヒントを発信。デザイン制作をするSNS企画 #バナーお題 #Webデザインお題 生みの親。【twitter・Instagram】@kobayas_s【note】https://note.com/kobayas/【Webサイト】https://kobayas.net/

こばやす

登壇している授業のカテゴリー・関連タグ

担当のコース

Webデザインのはじめ方

Webデザインのはじめ方全1回

個人Webサイトを立ち上げをした、または立ち上げを考えているあなたへ「Webデザインのはじめ方」をご紹介します。   副業の解禁により、アフィリエイトやブログなど個人Webサイトを立ち上げを考えている方、そして立ち上げを行っている方が増えています。 サイトを立ち上げには設定だけでなくデザインなどの見せ方も重要です。しかし、Webデザインを実施するには、デザインの原理原則だけでなく、NoCodeやCanvaなどノンデザイナーでも使える最新のツール、CSSやJavaScript、Photoshopなど従来のツールやプログラミング言語も学ばなければらず、どこから手を付ければ上達するのか迷っている人も多いはずです。   この授業では、個人サイト立ち上げにあたりWebデザインを学ぶ必要性を感じている方を対象に、「Webデザイン習得に何から学べばいいのか」そして「どんなツールをつかうとデザインが上達するか」などWebデザインのはじめ方をご紹介いたします。 先生には、IT企業インハウスのWebデザイナーで、個人では講師業や初学者のメンターとして制作アドバイスなども行っているこばさすさんをお迎えします。こばやすさんは、未経験からWebデザイナーに転身したため、独学方法なども体験ベースでお話してくださいます。 授業を受けて、Webデザインを学ぶ筋道を見つけましょう。

このコースの詳細ページへ
HTML・CSS基礎

HTML・CSS基礎全10回

デモサイトを模写しながら基礎的なコーディングスキルを習得する このコースでは初学者向けにHTML・CSSを使ったコーディング方法を架空の料理教室デモサイトの作成を通しながら学びます。 ※コードを用いた演習は「Visual Studio Code」を使用します。受講前にインストールをお願いします。ダウンロードページはコチラをご確認ください。 ※サンプルコードとサンプル画像は事前に授業ページ上の「授業で使用する教材」からダウンロードをお願いします 【コース構成】 第１回：Webサイト制作の工程とコーディングする前の準備 第２回：HTMLコーディング①　※第2回、3回で使用するサンプルデータを授業ページからダウンロードしてください 第３回：HTMLコーディング② 第４回：CSSコーディング①　※第４回〜６回で使用するサンプルデータを授業ページからダウンロードしてください 第５回：CSSコーディング② 第６回：CSSコーディング③ 第７回：CSSレイアウト レスポンシブデザイン①　※第７回〜１０回で使用するサンプルデータを授業ページからダウンロードしてください 第８回：CSSレイアウト レスポンシブデザイン② 第９回：WEBサイト公開 第１０回：SEO対策とアクセス対策 【コースのゴール】 ・ HTML・CSS言語の文法ができ、かつサンプルコードが読解出来るようになる ・自分オリジナルのホームページやコーポレートサイト、ビジネスサイトが作成できるようになる 【受講対象者】 ・フロントエンドエンジニア（を目指す方を含む） ・Webディレクター

このコースの詳細ページへ

担当の授業一覧　全11授業

HTMLコーディング②

第3回 HTMLコーディング②(60分)

2022年8月5日放送

HTML具体的なの記述方法をVisual Studio上での実演を通しながら解説し、デモサイト上の各コンテンツを完成させていきます。 ■アジェンダ １）header部分の作成 　・ファーストビュー 　・グローバルナビ ２）main部分の作成 　・DEMOサイト上の「Concept」部分の作成 　・DEMOサイト上の「Merit」部分の作成 　・DEMOサイト上の「Request」部分の作成　 　・DEMOサイト上の「Access」部分の作成 ３）footerの作成  

CSSコーディング①

第4回 CSSコーディング①(50分)

2022年8月5日放送

CSSの概要について紹介した後、CSSの書き方の基本を準備段階から解説していきます。 前回作成したHTMLのコードを元に、デモサイトのファーストビューの情報をCSSでみやすく装飾していきます。 ※コードを用いた演習は「Visual Sutudio Code」を使用します。受講前にインストールをお願いします。ダウンロードページはコチラをご確認ください。 ※サンプルコードとサンプル画像は事前に授業ページ上の「授業で使用する教材」からダウンロードをお願いします ■ 今回作成するデモサイト https://kobayas.net/test/ ※ユーザー名とパスワードは第一回の授業内で紹介しています。 ■アジェンダ １）CSSでできること ２）CSSを書く前の準備 ３）CSSの書き方 ４）ファーストビューの装飾

SEO対策とアクセス対策

第10回 SEO対策とアクセス対策(45分)

2022年8月5日放送

公開したデモサイトをWeb上でより多くの方々に届けるための設定、拡散方法とアクセス分析について解説します。 ■アジェンダ １）SEO対策とは ２）OGPの設定方法 ３）Webサイトへアクセスして貰うために出来ること ４）Googleアナリティクスの設置 ５）まとめ

CSSコーディング③

第6回 CSSコーディング③(45分)

2022年8月5日放送

デモサイトのコンテンツ部分の情報をCSSでみやすく装飾していきます。 ■アジェンダ １）「Merit」部分の装飾 ２）「Request」部分の装飾 ３）「Access」部分の装飾 ４）「footer」部分の装飾

WEBサイト公開

第9回 WEBサイト公開(40分)

2022年8月5日放送

これまで作ってきたサイトをWeb上で公開するまでの流れを解説します。 ■アジェンダ １）Webサイトの公開前にチェックする事 ２）Webサーバーとは？ ３）サーバー取得、設定方法 ４）アップロードツールの使い方 ５）SLL化する ６）Web制作の相場、仕事としての需要

CSSレイアウト レスポンシブデザイン②

第8回 CSSレイアウト レスポンシブデザイン②(40分)

2022年8月5日放送

デモサイトの各コンテンツでレスポンシブデザインを実装していきます。 ■アジェンダ １）「ファーストビュー」 ２）「Concept」 ３）「Merit」 ４）「Request」 ５）「Access」 ６）「footer」

CSSレイアウト レスポンシブデザイン①

第7回 CSSレイアウト レスポンシブデザイン①(40分)

2022年8月5日放送

これまで作成したデモサイトのデザインをタブレットやスマホの画面でも最適化するためのレスポンシブデザインについて解説し、デモサイト上での実装を行っていきます。 ※コードを用いた演習は「Visual Sutudio Code」を使用します。受講前にインストールをお願いします。ダウンロードページはコチラをご確認ください。 ※サンプルコードとサンプル画像は事前に授業ページ上の「授業で使用する教材」からダウンロードをお願いします ■ 今回作成するデモサイト https://kobayas.net/test/ ※ユーザー名とパスワードは第一回の授業内で紹介しています。 ■アジェンダ １）レスポンシブデザインとは ２）ディベロッパーツールの使い方 ３）レスポンシブ対応のコーディング 　・ハンバーガーメニュー

CSSコーディング②

第5回 CSSコーディング②(35分)

2022年8月5日放送

デモサイトのコンテンツ部分の情報をCSSでみやすく装飾していきます。今回は装飾だけでなく、軽微なアクションを入れる内容にも触れていきます ■アジェンダ １）「Concept」部分の装飾

Webサイト制作の工程とコーディングする前の準備

第1回 Webサイト制作の工程とコーディングする前の準備(35分)

2022年8月5日放送

Webサイトが表示される仕組みからコーディングをする前に必要な事前知識と準備について解説します。 ■アジェンダ １）Webサイトが表示される仕組み ２）現場でWebサイトが作られるまでの工程 ３）コーディングする時に意識して欲しい事 ４）コーディングするために必要なもの ５）コーディングする前の準備  

HTMLコーディング①

第2回 HTMLコーディング①(20分)

2022年8月5日放送

HTMLの基本構造について、Visual Studio上での実演を通しながら解説します。 ※コードを用いた演習は「Visual Sutudio Code」を使用します。受講前にインストールをお願いします。ダウンロードページはコチラをご確認ください。 ※サンプルコードとサンプル画像は事前に授業ページ上の「授業で使用する教材」からダウンロードをお願いします ■ 今回作成するデモサイト https://kobayas.net/test/ ※ユーザー名とパスワードは第一回の授業内で紹介しています。 ■アジェンダ １）HTMLの基本構造 ２）マークアップの基本 ３）headの中身を作る ４）bodyの構造を考える   ※授業で使用するAdobe stockの画像は有料になります。 サンプルデータ内、「img」フォルダにグレーバックのサンプル画像素材をご利用いただくか、授業で利用している同じ画像を使用する場合は、以下のURLからダウンロードをお願いいたします。   【ファーストビュー】 https://stock.adobe.com/jp/images/tasty-chicken/134699923 【ハンバーグ講座イメージ】 https://stock.adobe.com/jp/images/%E3%83%8F%E3%83%B3%E3%83%90%E3%83%BC%E3%82%B0%E3%82%B9%E3%83%86%E3%83%BC%E3%82%AD/288626977 【肉じゃが講座イメージ】 https://stock.adobe.com/jp/images/%E8%82%89%E3%81%98%E3%82%83%E3%81%8C/145196926 【アイシングクッキー講座イメージ】 https://stock.adobe.com/jp/images/unicorn-sugar-cookies/318369125 【メリット1】 https://stock.adobe.com/jp/images/%E6%96%99%E7%90%86%E3%82%92%E3%81%99%E3%82%8B%E3%82%B7%E3%83%8B%E3%82%A2%E5%A5%B3%E6%80%A7%E3%81%AE%E6%89%8B%E5%85%83/130575964 【メリット2】 https://stock.adobe.com/jp/images/young-woman-reading-cookbook-in-the-kitchen-looking-for-recipe/101512684 【メリット３】 https://stock.adobe.com/jp/images/%E9%A3%9F%E4%BA%8B%E3%82%92%E3%81%99%E3%82%8B%E8%A6%AA%E5%AD%90/282034096

Webデザインのはじめ方

第1回 Webデザインのはじめ方(60分)

2022年2月18日放送

「個人のWebサイト開設が高まる」今だからこそ学ぶ「Webデザインのはじめ方」 「Webデザインを学びたいけど、何から手を付ければいいのかー。」そのお悩みを解消します。   「自分で作った商品を販売したい、経験した事や考えを発信したい―。」最近ではこのように、本業以外で個人の発信をしたい人が増えてきたのではないでしょうか。その中でも、発信方法の一つとして自分のWebサイトを立ち上げる人もいるかと思います。 しかし、Webサイトを作ろうにも、自分の思い通りのデザインにするにはどうしたらよいか分からず、悩んでいる人もいるのではないでしょうか。   今回は、副業でWebサイトを開設しデザイン性を考えたいが何から手をつけていいかわからない方を対象に、個人のWebサイトをデザインするなら何から学めば良いかを解説していきます。 ■講師 こばやす Webデザイナー／ディレクター 独学からIT企業インハウスのWebデザイナーへ転身。個人では講師業や初学者のメンターとして制作アドバイスも行っている。印刷・Webサイトデザイン、コーディング、ディレクター、採用担当、フリーランスを一通り経験。twitterでは様々な立場になって分かったWeb制作実務の話やデザイン初学者に向けた学習のヒントを発信。デザイン制作をするSNS企画 #バナーお題 #Webデザインお題 生みの親。 【twitter・Instagram】@kobayas_s 【note】https://note.com/kobayas 【Webサイト】https://kobayas.net