Bootstrapで超高速らくらくウェブデザイン 速習実践入門

ウェブクリエイターの生明義秀が解説する、大定番のBootstrapを導入してウェブ制作を楽に超高速で進める方法を、一気に学ぶ実践入門講座。

こんなことを学びます

CSSでリセットをかけてゼロからすべてをデザインすることに、疲弊していませんか。
レスポンシブウェブデザインの構築作業に、手間取り振り回されていませんか。
毎回同じようなデザインソースやパーツを、何度も書いたり作ったりしていませんか。
ライバルは、高機能なウェブサイトを短期間で制作してませんか。

フレームワークの導入が、このような悩みを打開する手段になります。
国際的な定番のフロントエンドフレームワーク、Bootstrap。
人気No. 1のこのライブラリを使えば、速く、楽に、高機能なウェブコンテンツをオリジナルデザインで制作することができるのです。

Bootstrap オフィシャルサイト < https://getbootstrap.com >

この講座では、フロントエンドフレームワークに造詣が深いウェブクリエイターの生明義秀が、Bootstrapの導入方法から基本デザインの仕様、レスポンシブウェブデザインに対応するグリッドシステムの適用、そして多彩なコンポーネント(パーツ)の活用まで、総体俯瞰的に解説。
初めてBootstrapやフレームワーク、ライブラリなどに触れる方でも、すぐに導入して活用し始められる、デモンストレーションが豊富なハイブリッド・ハンズオンの講座です。

Bootstrapの扉を開いて、賽の河原の子供たちやシーシュポスのような仕事に終止符を。

■ フロントエンドフレームワークとは
Bootstrapに代表されるフロントエンドフレームワーク(CSSフレームワーク)とは、よく調整された高度なCSSのデザインセットやJabaScriptの機能が予め用意されたライブラリ集です。
Bootstrapを用いれば、基礎工程が終わった状態からウェブデザイン作業を始めることができ、時間や労力を大きく削減することができます。
もちろん、オリジナルのビジュアルデザインを上載せして、オリジナリティーのあるウェブデザインを制作することも可能です。

Bootstrap 使用事例 - Responsive Web Design JP < http://responsive-jp.com/category/technique/bootstrap >

■ Bootstrapとは
Bootstrapは数あるフロントエンドフレームワークのなかで、人気No. 1の大定番。
かつてはTwitter社内で作られ、Twitter Bootstrapと呼ばれていました。
2011年の誕生以来、世界中で愛用されています。
MIT Licenseなので商用利用も可能。
もちろん無料です。

※ この講座は、以前に開催した同登壇者の
「Bootstrapで超快適ばっちり デザインベース&コンポーネント」および
「Bootstrapで超高速らくらく レスポンシブ・グリッドシステム」
の2つの講座を短時間で学習できるよう一本化し、再構成した内容となっています。
また、オリジナルのデモサンプルを増やし、学習効率がより向上がきるよう工夫されています。


● この講座で学べること
○ Bootstrapの概要
○ Bootstrapの入手・導入方法
○ Bootstrapによる基礎デザインの仕様
○ Bootstrapのグリッドシステムによるレスポンシブウェブデザインへの対応機能
○ Bootstrapのレイアウトに関連するCSSの各種ユーティリティ
○ Bootstrapのさまざまなコンポーネント(パーツ)の設置方法
○ Sassを編集してBootstrapの基本使用をカスタマイズする方法

● この講座で得られること
○ ウェブデザインのノーマライズCSSに代わる高機能な基礎ライブラリ(フレームワーク)
○ 超高速なウェブデザイン作業を実現するためのソースと方法
○ ウェブ制作の作業効率の大幅な向上とコスト削減
○ 競合他社への競争力 など
※ 学習教材や資料がある場合は、お持ち帰りいただけます。
※ 講座内で利用するデモなどのサンプルファイルがある場合は、ダウンロード可能です。
※ 各種受講証明書への署名・発行に対応します。

● この講座の特徴
○ ハンズオン講座ながら、手ぶらの聴講のみでもご参加可能なハイブリッド・ハンズオン形式です。
○ 実践的な知識や方法を、要点をまとめて、わかりやすく解説します。
○ 操作の解説は、デモンストレーションで実演して解説します。
○ 講義後に、質疑応答の時間を設けます。

● 協賛企業・ブランド
AZM Design < https://azmdesign.com >

#bauya44
続きを読む

日程・開催時間を選ぶ

開催リクエスト受付中

開催予定エリア

銀座・大手町

価格(税込)

¥3,800

受けたい
20人が受けたい登録しています

この講座の先生

生明 義秀のプロフィール写真
アートディレクター,ウェブクリエイター,講師

生明 義秀

東京を拠点とするアートディレクター,グラフィックデザイナー,ウェブクリエイター,クリエイティブコンサルタント,講師。 

ブランディングやSP広告などのグラフィックデザイン、ウェブサイト制作、UI/UXデザイン、動画編集、eラーニングのオーサリングなど多数のクリエイションに従事。 

広告戦略や制作システムに関するコンサルテーションも行い、さまざまな企業にプランナーやアドバイザーとして招請されている。 

最新技術の啓蒙や後進の育成に尽力し専門学校などの教育機関で講師を務めるほか、Adobe MAXなどの大規模イベントをはじめ、宣伝会議やデジタルハリウッドなどの専門講座にも多数登壇。 

ソフトバンク・テクノロジー株式会社と共同で、定期開催のデザインに関するトークイベント『FONTPLUS DAYセミナー』を企画運営している。 

AZM Design 代表 
BAU-YA プロデューサー 

学校法人専門学校 東洋美術学校 講師 

FONTPLUS DAYセミナー イベントプランナー

この講座の主催団体

  • 994人
  • 45回

BAU-YA

プロとプロを目指すクリエイターの学び舎、BAU-YA(バウ舎)。
アートやデザイン、ITやウェブなどの、トップクリエイターや著名講師による『いま、伝えたいこと』を、そのまま講座にして催します。


■ BAU-YAにある『技術系講座』と『知識系講座』の2つのスタイル

『技術系講座』は、ふんだんに実演デモを駆使するハイブリッド・ハンズオン講座。

制作の現場で必須のテクニックを学べます。

一緒に実習しながらでも、または聴講のみでも、どちらでも参加できるスタイル。
使用する学習サンプルは、受講後でもダウンロードして何度でも練習いただけます。

『知識系講座』はふんだんに図解で解説する座学講座。
業界人として必須の教養や情報を学べます。
スライドや資料などを見ながら、じっくり学ぶスタイル。
提示されるスライドや資料は、受講後でもダウンロードして何度でも復習いただけます。


■ BAU-YAが招聘する実力派講師陣

クリエイティブ業界の最前線で活躍している、経験豊富なク... もっと見る >>

主催団体に質問する 教室ページをみる
  • 当日の流れとタイムスケジュール

    ■ 開場時間
    開演15分前から

    ■ 所要時間
    約1.5–2時間程度(途中参加、途中退出も可能です)

    ■ 講座の流れ(予定)
    1. オープニング(BAU-YAおよび講座について説明,登壇者紹介など 約5分)
    2. 講義(約35–50分)
    3. 休憩(約5分)
    4. 講義(約35–50分)
    5. 質疑応答(約5分)
    6. エンディング(約5分)
    ※ 講義時間や時間割は、変更する可能性があります。
    ※ 予定よりも早く終了、または長引く可能性があります。
  • こんな方を対象としています

    □ ウェブ制作関連職の方
    □ ウェブデザイン学習者の方
    □ 超高速なウェブデザインを求められている方
    □ ウェブデザインの作業効率とコスト削減を求めている方
    □ 毎回ゼロからウェブデザインの作業をすることに疲れ果てている方
  • 受講料の説明

    参加費に、場所代や教材費などはすべて含まれています。
    参加費の他に、一切費用はかかりません。
    ※ 領収書はストリートアカデミーから発行・印刷することができます。 < https://support.street-academy.com/hc/ja/articles/201345225 >
  • 受講する際は以下をお読み下さい

    ■ ご持参いただくもの
    □ ハンズオン受講の方は、コンピュータをご持参ください。

    □ Visual Studio Code,Atom,Adobe Dreamweaverなど、ご自身が使い慣れたソースコードエディタ
    ※ 聴講のみのご参加も可能です。
    ※ OSは問いません。
    ※ コンピュータの動作やソフトウェアなどの動作不良に関するサポートは行いません。
□ 電源を使われる方は、電源タップをご持参ください。
    □ メモを取るための筆記用具やデバイスはご持参ください。

    ■ その他
    □ 講義中の録音などの一切の収録行為を禁じます。
    □ 講座内で配布する資料やファイルなどの一切の二次利用や再配布、無断転載などを禁じます。
    □ お名刺をお持ちでしたら、講座終了後に、登壇者や主宰者とご交換ください。

レビュー

  • 8
  • 楽しかった!( 7 )
  • 勉強になった!( 8 )
  • 行く価値あり!( 6 )
  • W2

    女性

    この講座は「Bootstrapを使ってみたい人向の講座」でした

    最近Bootstrapの名前をよく聞くようになり、何ができるのか、どのように使うのかを知るため受講しました。制作から離れて久しい私でも分かりやすい説明で、これをマスターできたら制作効率は格段に上がる…!と感じた2時間でした。

  • W3

    女性 50代

    この講座は「四の五の言わずにBootstrapでサイトを作ってみるよ!という講座」でした

    Web制作歴は長いですが、Bootstrapって本当に仕事で使えるの?大丈夫?と手を出さずに来ました。今日の講座を聞いて、「四の五の言わず、とにかくBootstrapを使ってサイトを作ってみるか!」という気持ちになりました。実践的で、わかりやすい説明で、あっという間の2時間。願わくば、この一つ上の実践編、上級編みたいな講座があったら、また聴いてみたいです。(by インドの修行増)

  • M2

    男性 40代

    この講座は「専門知識が学べる講座」でした

    入門講座として適度な量と構成でした。とりかかりとしてまずは実践したいという気になりました!ステップアップしてより実践的な講座も受講したいと思います。

  • M1

    男性 40代

    この講座は「効率的かつクリエイティビティの高いBootstrapの授業で、Webデザイン初心者にぴったりな講座」でした

    短期間で効率的にウェブサイトを作ることが可能なBootstrapについて、今までのブラウザーの変遷なども交えて、Bootstrapについての理解を深めながら、実際の活用方法を楽しくレクチャーしていただきました!

    現役のクリエイターならではの実務的な観点も非常に勉強になったので、Bootstrapの活用方法を是非また学びたいと思っており、BAU-YA主催の「Bootstrapで超高速らくらく レスポンシブ・グリッドシステム」にも参加したいです。

    このたびは、素敵な講義をありがとうございました!

  • W3

    女性 30代

    この講座は「発見の連続」でした

    案件でBootstrapが必要になり、参加させていただきました。
    Bootstrapに関してはほぼ素人でしたが
    コツを教えていただき大分敷居が低くなったように感じました。
    「Bootstrapってあんなこともできるんだ!こんなこともできるんだ!」の発見の連続でした。
    生明先生の語り口が軽快で毎回授業があっというまに終わります。
    途中Dreamweaverの使い方にも触れましたがこちらのセミナーもぜひ受講してみたいと思いました!

  • この主催団体の他の講座

    relation

    関連講座

    watching

    この講座を見た人は、こんな講座も見ています

    お探しの講座が見つかりませんでしたか?