•
1 3

ノーコードツール対応 ウェブデザイン レイアウト技術の基礎と仕組み

¥4,730
¥4,730
(税込)
セール 売り切れ
CSS HTML MdN × Bau-ya® Webデザイン Web制作 Wix WordPress デザイン モダンフロントエンド

講師：久保知己（くぼ・ともき） /

マークアップエンジニア 久保知己氏登壇。ノーコードツールにも必須となるウェブの制作と実装に必ず必要となるボックスモデルほかレイアウトに関する基礎知識を学びます。他にもグラフィックデザインのレイアウトの4原則「近接，整列，反復，対比」を実践的にウェブデザインへ応用する方法論や、ブラウザが表現する「振る舞い」の理由や仕組み、意図したレイアウトをウェブ上で実現するための最適解を学ぶ講座です。

［この講座の概要］
●1時間半のオンデマンドビデオ講座
●サンプルデータサイト
●学習期間の制限なし
●モバイルとPCからアクセス

  • 学べること、得られること

    □ ウェブのレイアウトデザインの基礎と仕組み
    □ ウェブのレイアウトに関するCSSの基礎
    □ ボックスモデルレイアウト
    □ ウェブデザインのサイジングと単位
    □ ウェブのレイアウトデザインの合理的で実践的な考え方
    □ 合理的で実践的なウェブのレイアウトの思考能力
    □ ウェブのレイアウトに関する正確な知識と理解
    □ 次世代型WYSIWYGエディタ（Editor XやSTUDIO、Webflowなど）のオーサリングに対応する基礎的なレイアウト能力
    □ 不明瞭で不正確なCSSレイアウトデザインの解消とスムーズなコーディングの基礎知識
    □ 理想的なウェブデザインへ取り組む知識的姿勢

  • こんな方におすすめ

    ■ ウェブのレイアウトデザインの知識に乏しい方
    ■ ノーコードプラットフォームでしかウェブサイトを制作したことがない方
    ■ コーディング未経験で、次世代型WYSIWYGエディタ（Editor XやSTUDIO、Webflowなど）のオーサリングを目指している方
    ■ CSSのレイアウトに関する知識が不十分なUIデザイナーやコーダー、フロントエンドエンジニアの方
    ■ CSSやウェブコーディングを学習を始める初学者や学生の方
    ■ ウェブ制作業界やウェブ担当者の方

本講座について

本講座は、「MdNの教室 MdN × Bau-ya」で2022年11月15日にオンラインセミナーとして開催された
「ノーコードツール対応 ウェブデザイン レイアウト技術の基礎と仕組み」（講師：久保知己）
https://bit.ly/mdnbauya92
を収録したものを、オンデマンド講座として再編集してご提供するものです。

※本書は2022年11月当時の情報を元に講座としてご提供しているものです。これ以降になされた事実および情報の変更によっては、 講座の中で取り上げた内容と異なる場合があります。登壇者、および株式会社エムディエヌコーポレーションは、本動画の中で紹介した内容によって生じたいかなる損害に一切の 責任を負いかねますので、あらかじめご了承ください。

講座の内容

ウェブサイトビルダー最大手Wix.comの国際的な普及や、国産のSTUDIOへの注目など、ウェブ制作業界でもノーコードプラットフォームの認知と浸透は急速に進んでいます。
また、Wixが生んだEditor XやSTUDIO、Webflowなど、次世代型WYSIWYGエディタとも呼べる新しいツールの登場によって、プロによるウェブ制作のオーリングのあり方が、今、大きく変わろうとしています。

最新のプロ向けノーコードツールは、旧来の簡易なブロックエディタとは違い、自由なレイアウトをかなえながらも、CSSを意識したレイアウトの設定が可能になっています。
幅や高さ、隣接する要素との間隔、さらにはサイズが伸縮するなど、ウェブデザインの現場でUIデザイナーやフロントエンド・エンジニアが考え、実装してきたことを、オーサー（編集者）が自らエディタのパネルで設定することになります。

そうすると、せっかくのノーコードなのに、CSSに馴染みの薄い他ジャンルのデザイナーやクリエーター、担当者の方などが、手も足も出なく思い通りにならなかったり、闇雲なオーサリングをして不適切なウェブページを作ってしまったりしてしまいます。

ボックスモデルとは何か？
ブロックボックスとインラインボックスはどう違うのか？
フルード（リキッド）とは？
pxと％とem (rem) は、どう使い分ければいいのか？

この講座では、高い技術力で有名な気鋭のフロントエンド実装集団、「株式会社まぼろし」でマークアップエンジニアを務める久保知己氏を招聘。
「Webサイトは、平面のインダストリアル（工業）デザインである」という考えの下に、ウェブデザインの制作と実装に必ず必要となるウェブのレイアウトに関する基礎知識を、徹底的に解説いただきます。

さらに、グラフィックデザインのレイアウトの4原則「近接，整列，反復，対比」を実践的にウェブデザインへ応用する方法論も展開。
この4原則に基づいて、ウェブのレイアウトの考え方や構築のあり方を紹介していただきます。
また、ウェブブラウザが表現する「振る舞い」の理由や仕組み、意図したレイアウトを実現するための最適解も学べます。

この講座は、ノーコードプラットフォームのユーザーの方に向けた、コーディングを前提・主体としない座学講義となります。
複雑で専門的なCSSのコード記述は紹介せず、ウェブブラウザ上での表示結果に基づき、ウェブデザインやCSSの設定の考え方を、しっかりと初級から学んでいただきます。

すでにUIデザイナーやコーダー、エンジニアとして仕事をしているプロの方や、WordPressでテーマのCSSをカスタマイズしている方でも、「レイアウトの基本仕様とレイアウト設計に弱い」ならば、復習講座としてお奨めです。

たとえノーコード時代になってコーディングが必須ではなくなっても、今後もウェブ制作者のすべてにとっての必修の知識が、この講座でしっかりと示されます。


● 協賛企業・ブランド
フォントワークス株式会社
https://fontworks.co.jp
フォントワークス LETS
https://lets.fontworks.co.jp/fontworks

Keywords: ウェブ, Web, デザイン, CSS, レイアウト, ボックスモデル, UI, コーディング, フロントエンド, ノーコード

コースの内容

●講座を受講する前に
・受講に際しての要件
・参考資料
・著作権および本講座提供のプログラムについて
●本編動画
・本編（1時間2分43秒）
●講師から受講者のみなさまへ

受講に際しての要件

□ オンラインで受講いただくための、インターネット環境とコンピュータなどのデバイスおよびウェブブラウザ。
※ OSやウェブブラウザー、各種アプリケーションなどは、最新のバージョンのものをご使用ください。
※ コンピュータの動作やソフトウェアなどの動作不良に関するサポートは行いません。

講師：久保知己（くぼ・ともき）

マークアップエンジニア／株式会社まぼろし

専門学校でグラフィックデザインを学んだのちに、Webデザイナーとして制作会社に入社。
デザインができてもコーディング技術がなければWebデザインのクオリティを担保できないことを新卒入社後すぐに気付く。
Webデザインとコーディング技術の向上を目指して勉強。
マークアップからCMSの構築まで、さまざまなウェブサイトの制作に関わったのち、2014年に株式会社まぼろしに入社。　

Adobe公式ブログで「Dreamweaver」や「Emmet」など、コードを中心とした記事を連載。
また個人ブログ「KOJIKA17」では、HTMLやCSSを中心に基礎からトリッキーな手法や技術などを紹介している。　

主な著書に『プロとして恥ずかしくない 新・WEBデザインの大原則』（共著 MdN）、『いちばんよくわかるWebデザインの基本きちんと入門』（共著 SBクリエイティブ）などがある。

Twitter: kojika17　
Blog: https://kojika17.com

「MdNの教室 MdN × Bauyaとは？」 

グラフィックデザインやウェブデザインなどのクリエイションをはじめ、生活や暮らしなどさまざまなジャンルのノウハウと可能性を伝える出版社MdNが、お馴染みの人気著者やトップクリエイターを招聘し『最新のノウハウ』と『実践的なテクニック』を講座を通してお伝えします。

MdN × Bauya教室ページ https://bit.ly/MdN-Bauya

■ MdNの著者が講座に登壇
MdNの人気書籍の著者や著名クリエイターを招聘。
ベストセラーやロングセラーでお馴染みの執筆陣が登壇します。
紙面だけでは伝えられないテクニックや、最新情報が満載です。

■ クリエイターの学び舎、Bau-ya®が全面協力
クリエイティブ分野の講座開催で急成長を遂げるBau-ya®（バウヤ）が、MdNとコラボレート。
講座の企画・運営や参加者の皆さまを、強力にバックアップします。
Bau-ya® 教室ページ http://bit.ly/bauya

MdN × Bau-ya® 収録講座プログラム