コーディング不要!新世代ウェブ制作ツール「STUDIO」で超速レスポンシブウェブデザイン
4.2 (51 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
236 students enrolled

コーディング不要!新世代ウェブ制作ツール「STUDIO」で超速レスポンシブウェブデザイン

「STUDIO」を使用したWEBデザイン方法を約1時間でマスターしましょう!
4.2 (51 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
236 students enrolled
Last updated 9/2018
Japanese
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • STUDIOの機能の中から、Webデザインでよく使う動きをスピーディーに学ぶことが出来ます
  • コース後半では、約30分でページの立ち上げ〜公開できるデザインへの仕上げ〜までを確認できます
  • STUDIOのデザインの一通りの動作を確認するので「何がどのあたりにあるのか」を瞬時に理解し、直感的にデザインを行えるようになります
Requirements
  • MacおよびWindowsのコンピュータ(動画はMacで進行します)
  • Google Chrome最新版
  • メールアドレス(ユーザー登録用)
Description

HTMLコーディングを行わずに、デザインやコンテンツに集中し、そのまま公開できたら・・!

そんな夢を叶えるデザインツールが、「STUDIO(https://studio.design/ja)」です。

直感的な操作で見た目のデザインを整えるだけで、ウェブサイトが完成します。しかもレスポンシブ対応です!


これまでにもデザインツールはありましたが、表でレイアウトを行っていたものや、z-indexを多用したものがほとんどでした。STUDIOではHTML5+CSS3の概念を汲んでいるので、HTML構成を極力崩さずに、最新のBOXレイアウトでデザインを組み上げることができます。


この講座では、STUDIOの機能をより直感的に、すばやく作業を行えるように構成を行いました。


■ STUDIOとは


STUDIOは、デザイン・公開・運用までを完結できる、次世代のウェブデザインプラットフォームです。

コーディングを行わずに、レスポンシブデザインのウェブサイトを構築することが可能ですので、ウェブサイト制作初心者の方にもおすすめできます。

HTML5とCSS3におけるHTMLに準拠した構造を持つことも可能ですので、ウェブデザインやコーディングの知識を持っている方なら、より手軽にウェブサイトを作成できることを体感できるはずです。


準備するものは、パソコンと、最新版GoogleChrome、メールアドレスだけ。

STUDIOでは、デザインツールの全機能と、ライブプレビューを共有するところまでを、無料で行うことができますので、初期コストが低いのも特徴です。


■ この講座の構成


コース前半では、STUDIOの機能の中から、Webデザインでよく使う動きを学びます。各動画はショートサイズにおさえていますので、一通り目を通すことで動作を確認しましょう。

前半動画の各項目は、ほぼ独立しておりますので、コースを終え、ご自身でデザインを起こす際にリファレンスとしても使用できます。


コース後半では、ステップバイステップとして1ページレイアウトのコーポレートサイトをスクリーンキャストでデザインしていきます。

セクションごとに、独自デザインとテンプレートを組み合わせ、構成を確立していきます。

約30分でページの立ち上げ〜公開できるデザインへの仕上げ〜までを確認できますので、時間のない方にもおすすめです。


■ こんな方におすすめ


ウェブサイト制作初心者の方、企業の中でウェブ管理を担当している方、プロの方でとりあえずページを立ち上げたいけど、良いツールが見つからない方におすすめです。

Who this course is for:
  • ウェブサイト制作初心者
  • 企業の中でウェブ管理を担当している方
  • プロの方でとりあえずページを立ち上げたいけど、良いツールが見つからない方
  • コーディングを必要としないウェブデザインを行ってみたい方
Course content
Expand all 51 lectures 01:14:43
+ STUDIOの機能
29 lectures 38:26
要素のコピー
00:44
BOXレイアウトとは
01:31
BOXを親子関係にする
01:36
BOXを角丸にする
00:35
BOXの装飾(透明度・塗・枠線・シャドウ)
02:44
BOXの配置の挙動(横配置・縦配置・回り込み)
01:51
ブレークポイントでの表示切り替え
01:24
マージンとパディング(図解)
01:21
空白を作る(マージン・パディング)
02:04
タイポグラフィー
02:58
アイコンの追加・サイズ・色変更
00:49
リンクの設定
00:57
スクリーンサイズでの表示/非表示
00:55
マウスホバー時のデザイン
00:34
画像の配置
01:57
動画の配置
00:56
google mapの配置
00:39
カスタムiframeの配置(例:Facebookプラグインを表示)
01:22
メニューを固定する
01:36
画像のアップロード
00:40
ページの新規作成・複製・削除
00:42
ドロワーメニューの設置方法
02:19
モーダルウィンドウを設置する
01:23
TOPページを決定する
00:43
ヘルプの案内(操作に迷ったときは)
00:27
+ ステップバイステップ(1ページコーポレートサイトを作成する)
15 lectures 30:35
新規プロジェクトを作成
00:49
サイトの構成を確認
00:24
ヘッダーを作成する
06:15
ヘッダー:レスポンシブの調整
01:38
アイキャッチ画像を配置
02:34
キャッチコピー、お問い合わせボタンを設置(アイキャッチエリア内)
02:23
キャッチコピー・お問い合わせエリアのレスポンシブ確認
01:08
サービスエリアを作成する
01:55
メッセージエリアを作成する
02:54
お問い合わせエリアを作成する
04:29
地図を埋め込む
01:00
フッターを作成
00:47
各セクションにIDを設定
01:02
リンクを設定
01:58
デザイン完了
01:19