Manuals

ホームkeyboard_arrow_right

Studio使い方マニュアル

コーポレートサイトをゼロから作る

  • DAISUKE

landscape

中級

20動画

timer

8時間46分

このコースでは、一般的なコーポレートサイトをStudioで制作する手順をゼロから解説しています。 動画の手順通りに一緒に作業を進めることで、アニメーションやCMS、問い合わせフォームまで実装された本格的なウェブサイトを作ることができます。

第1回|ウェブサイトの構成・デザイン紹介

07:29

今回は実践編の新企画「本格的なコーポレートサイトをゼロから一緒に作ってみよう」の第1回です!
これまで個別の機能説明が中心だったので、実際のウェブサイト制作でどのように使うかを体験してもらうために、数回にわたってコーポレートサイトを一緒に作ってみたいと思います。

第2回|ヘッダー・ナビゲーション

27:50

今回は、ヘッダーを作っていきたいと思います。
カーソルを当てた際のアニメーションやレスポンシブ設定等もやっていきます。
少し長いですが一緒に操作することで全く同じものが作れるようになりますのでぜひチャレンジしてみてください!

素材ダウンロード

file_download

第3回|モーダルメニュー|その1

16:17

今回は、タブレットやスマートフォンで表示されるモーダルメニューを作っていきたいと思います。
少し長いですがわかりやすく丁寧に解説していますのでぜひチャレンジしてみてください!

第4回|モーダルメニュー|その2

17:26

今回は、タブレットやスマートフォンで表示されるモーダルメニューを作っていきたいと思います。
前回モーダルメニューが開いたり閉じたりするところまでやりましたので今回は中身のデザインを作っていきます!
少し長いですがわかりやすく丁寧に解説していますのでぜひチャレンジしてみてください!

素材ダウンロード

file_download

第5回|モーダルメニュー|その3

6:03

今回も前回に引き続き、タブレットやスマートフォンで表示されるモーダルメニューを作っていきたいと思います。
前回モーダルメニューのデザインまで作りましたので今回はリンクの設定です。
モーダルメニューは今回が最終回となりますのでぜひ一緒に作ってみてください!

第6回|メインビジュアル|その1

9:54

今回からはトップページのデザインを3回にわたって説明していきます。
今回はセクションとボックスを使ってページの大枠を作っていきます。
セクションとボックスの違い、どのタイミングでセクションを使えば良いのかわからないという方はぜひ参考にしてみてください!

素材ダウンロード

file_download

第7回|メインビジュアル|その2

34:08

今回はトップページの少し凝った出現時アニメーションを実装していきます。
長くなってしまいましたが全ての手順を説明していますのでよければ一緒に操作しながらチャレンジしてみてください!

第8回|メインビジュアル|その3

21:53

今回はトップページのデザインをタブレットやスマートフォンで見ても綺麗に表示できるようレスポンシブ設定をしていきます。
今回でグローバルナビゲーション、トップページが完成します!

第9回|イントロダクションセクション

18:30

前回まででトップページは完成したので、今回はトップページの下にあるイントロダクション部分を作ります。
アニメーションやレスポンシブ対応もこの動画で一気にやってしまうのでぜひ一緒にチャレンジしてみてください!

素材ダウンロード

file_download

第10回|事業紹介セクション

38:57

前回まででトップとイントロページは完成したので、今回は事業紹介ページを作ります。
アニメーションやレスポンシブ対応もこの動画で一気にやってしまうのでぜひ一緒にチャレンジしてみてください!

素材ダウンロード

file_download

第11回|会社概要セクション

27:01

前回まででトップ、イントロページ、事業紹介ページは完成したので、今回は会社概要ページを作ります。
アニメーションやレスポンシブ対応もこの動画で一気にやってしまうのでぜひ一緒にチャレンジしてみてください!

素材ダウンロード

file_download

第12回|新着情報セクション|その1

45:35

前回まででトップ、イントロページ、事業紹介ページ、会社概要ページは完成したので、今回は新着情報ページを作ります。
STUDIOのCMS機能を使って作成しますので、これまでなかなかCMSにチャレンジできなかった方もぜひ取り組んでみてください!

素材ダウンロード

file_download

第13回|新着情報セクション|その2

51:38

前回まででトップ、イントロページ、事業紹介ページ、会社概要ページ、記事のCMS への登録、記事ページは完成したので、今回は新着情報ページを作ります。
STUDIOのCMS機能とリスト機能を使って作成しますので、少し複雑になりますが、それぞれの手順を丁寧に説明していますのでぜひ取り組んでみてください!

第14回|CTAセクション

26:02

前回まででトップ、イントロページ、事業紹介ページ、会社概要ページ、記事のCMS への登録、新着情報ページまで完了したので、今回はCTA(お問合せページに誘導する部分)を作成します。
パララックス効果(奥行きのあるデザイン)を使ったデザインになっているので、少し複雑になりますが、それぞれの手順を丁寧に説明していますのでぜひ取り組んでみてください!

素材ダウンロード

file_download

第15回|フッター

27:00

前回まででトップ、イントロページ、事業紹介ページ、会社概要ページ、記事のCMS への登録、新着情報ページ、CTAまで完了したので、今回はフッターを作成します。
トップページ最後の部分です!フッターは構造が比較的シンプルですので、ぜひ作ってみてください!

第16回|ヘッダー・フッターのリンクの設定

14:32

前回まででトップ、イントロページ、事業紹介ページ、会社概要ページ、記事のCMS への登録、新着情報ページ、CTA、フッターまで完了したので、今回はヘッダー・フッターのリンクの設定をします。
一般的なリンクの設定方法だけではなく、ページ内遷移の設定方法も解説していますので、ぜひ最後までご覧ください。

第17回|記事一覧ページ・カテゴリ別の記事一覧ページ

27:23

前回まででトップページは完成しましたので、今回は記事一覧ページ・カテゴリ別の記事一覧ページを制作します。
どちらもウェブサイトを制作する上で、作り方を知っておくと色々活用できるページですので、ぜひ最後までご覧ください。

第18回|お問い合わせページとサンキューページ

43:57

前回までで記事一覧ページ・カテゴリ別の記事一覧ページは完成しましたので、今回はお問い合わせページとサンキューページを制作します。
どちらもウェブサイトを制作する上で、作り方を知っておくと色々活用できるページですので、ぜひ最後までご覧ください。

第19回|プライバシーポリシーページと404ページ

24:00

前回まででお問い合わせページとサンキューページは完成しましたので、今回はプライバシーポリシーページと404ページを制作します。
どちらも実際に見られることは少ないですが、コーポレートサイトであれば必須のページですので、ぜひ最後までご覧ください。

第20回|タグの設定・サイトの公開

30:39

前回まででサイト内のすべてのページが完成しましたので、今回は以下の4つの事を行います。

1. タグの設定
2. モバイルナビゲーションのリンク設定
3. サイトの基本情報設定
4. サイトの公開

サイト内のページを作り終わった後の細々とした内容ではありますが、いずれも大事な項目になります。
サイト公開前の注意事項もありますので、ぜひ最後までご覧ください。

素材ダウンロード

file_download