• 投稿日:2023/12/12
  • 更新日:2025/07/06
【体系的にStudioを学ぶ】Studioで実際にサイトを作成してみよう

【体系的にStudioを学ぶ】Studioで実際にサイトを作成してみよう

会員ID:JHNogTS0

会員ID:JHNogTS0

この記事は約4分で読めます
要約
この記事では、ノーコードWeb制作ツール「Studio」を使って、サイトを実際に作成していきます。解説動画を中心に構成し、簡単な説明を交えて制作過程を収録しているので、動画を一時停止したり巻き戻したりしながら視聴することをオススメします。 初・中級向けの内容となっております。

デザインカンプ

デザインカンプ(架空サイト:越智測量設計)はFigmaで作成し、Studioにてサイトを構築しました。


▼架空サイト:越智測量設計
design.pngデザインカンプをFigmaで見る(外部リンク)
デザインカンプをブラウザで見る(外部リンク)

ヘッダーを作ってみよう

header.pngロゴ・メインメニューを格納するパーツです。
サイト内の他のページに誘導する役割があり、サイトの利便性を左右する、重要なパーツです。

▼解説動画(ヘッダーの作成方法)
https://youtu.be/oLKseW9Znts

メインビジュアルを作ってみよう

mainvisual.pngWebサイトの「顔」とも言えるパーツです。
会社をイメージさせる画像や想いを伝えるキャッチフレーズなど、このサイトがターゲットの心を掴めるかどうかは、このパーツに関わってきます。

▼解説動画(メインビジュアルの作成方法)
https://youtu.be/mGg_Mu65XW8

フッターを作ってみよう

footer.pngフッターは、サイトの最下部に位置します。
ナビゲーションの補助・連絡先の提供・法的な情報などの役割を果たし、ヘッダー同様サイトの利便性を左右する、重要なパーツです。

続きは、リベシティにログインしてからお読みください

ノウハウ図書館でできること
  • すべての記事の閲覧

  • ブックマーク

  • いいね・レビュー

  • 記事の投稿※応援会員(有料)のみ

  • ポイントの獲得※応援会員(有料)のみ

※会員登録には、新入生会員(初月30日無料)と応援会員(有料)があります

応援会員制度とは?
さらに!
  • リベシティの他の機能やサービスもご利用いただけます詳しく見る

ブックマークに追加した記事は、ブックマーク一覧ページで確認することができます。
あとから読み返したい時に便利です。

会員ID:JHNogTS0

投稿者情報

会員ID:JHNogTS0

トラ会員

この記事に、いいねを送ろう! 参考になった記事に、
気軽にいいねを送れるようになりました!
この記事のレビュー(12
  • 会員ID:SuRgQoHK
    会員ID:SuRgQoHK
    2025/07/15

    動画のクライアントからLPを作ってほしいと言われてこの記事に辿り着きました。 この記事を作る際YouTubeも別撮りで準備していただきありがとうございます。 参考にさせていただきます。

    会員ID:JHNogTS0

    投稿者

  • 会員ID:ILxwZyHo
    会員ID:ILxwZyHo
    2025/07/06

    オッチさん、はじめまして。 この記事作るのに、どれだけの時間を費やしたのか、、、 相手の事を考えた圧倒的なやさしさを感じました。 素晴らしい記事をありがとうございます。 続きも絶対見ます!

    会員ID:JHNogTS0

    投稿者

  • 会員ID:8TmDiFQ7
    会員ID:8TmDiFQ7
    2025/06/09

    Youtubeの解説もとっても参考になります✨ わかりやすい説明本当にありがとうございます!!

    会員ID:JHNogTS0

    投稿者

  • 会員ID:Grqg1teJ
    会員ID:Grqg1teJ
    2025/03/12

    STUDIOを初めて使いましたが、サイトを作ることができました😊動画の説明はとてもわかりやすく、見る時間としてもちょうどよかったです🙏今後もSTUDIOを学びたいと思います😊ありがとうございました!

    会員ID:JHNogTS0

    投稿者

  • 会員ID:uUBxRppZ
    会員ID:uUBxRppZ
    2024/12/16

    説明がとてもわかりやすかったので、STUDIOでのサイト制作チャレンジ早速やってみます!

    会員ID:JHNogTS0

    投稿者

  • 会員ID:KTrYfdJk
    会員ID:KTrYfdJk
    2024/11/08

    貴重な情報を公開いただきありがとうございます!!

    会員ID:JHNogTS0

    投稿者

  • 会員ID:bnA6oRYt
    会員ID:bnA6oRYt
    2024/10/24

    グループ化して整えていくのが大変参考になりました。 ありがとうございます!

    会員ID:JHNogTS0

    投稿者

  • 会員ID:5Le9WcUB
    会員ID:5Le9WcUB
    2024/05/04

    「下層ページを作ってみよう」まで、完了いたしました。 丁寧で分かりやすい記事、動画でスムーズに作成できました。 ありがとうございます。次の解説も、楽しみにしております。 自分のポートフォリオ用に0からサイトを作成したく、何か良い方法がないか、探していたらstudioというツール?の存在をリベシティに入会して知りました。 もともとHTML,CSSは理解しており、Wordpressサイトも0から作ったことがあります。 studioだと半分の時間で作れると思い、studioを実際に触ってみました。 しかし、実際に触ってみると、ツールの場所など基本がないと難しいことが分かりました。 リベシティのノウハウ図書館でstudioと検索したらこちらの記事にたどり着きました。 オッチさんのおかげでstudioの理解が深まりました。 お忙しい中、記事、動画編集などはとても労力が必要かと思いますが、無理せずの更新をお待ちしております。

    会員ID:JHNogTS0

    投稿者

  • 会員ID:8vws6VUB
    会員ID:8vws6VUB
    2024/02/19

    【追記①】実績紹介まで完了。楽しい! --- WEBデザインに中学生のころから興味があったのですが、こんなに直感的にできるSTUDIOという存在を知ることができてとても嬉しいです!動画見ながらフッターまで作成できました。コンテンツ以降もやってみます!

    会員ID:JHNogTS0

    投稿者

  • 会員ID:N2bD26Mo
    会員ID:N2bD26Mo
    2024/01/01

    動画交えての解説でとても実践しやすくありがたいです!!これからも更新されるようなので、この機会に自作Webページ作成してみます!! 実践に繋げやすい投稿ありがとうございました😊

    会員ID:JHNogTS0

    投稿者

  • 会員ID:5v9Y5mfa
    会員ID:5v9Y5mfa
    2023/12/13

    CanvaのLPですと、スマホのUIの互換性が悪いので、STUDIOを使用しようか検討しているところでした^^ブックマークして、勉強させていただきます✨ありがとうございます🌼

    会員ID:JHNogTS0

    投稿者

  • 会員ID:OP3TV8L7
    会員ID:OP3TV8L7
    2023/12/12

    STUDIOを使って副業したいと思い、拝見しました。とてもいい参考になりました。すてきなページだなあと思い、オッチさんのプロフィールに載っていたポートフォリオまで見せていただきました。こんなに素敵なWebページが作れるように頑張りたいです。

    会員ID:JHNogTS0

    投稿者