渡邉 慶太

ノーコードWeb制作（STUDIO）について日々発信していきます。基本的な操作から、ニッチな情報まで網羅していきます。一緒に学んでいきましょう！

渡邉 慶太

ノーコードWeb制作（STUDIO）について日々発信していきます。基本的な操作から、ニッチな情報まで網羅していきます。一緒に学んでいきましょう！

Studioリブライディング発表！！！

こんにちは！ノーコードWebクリエイター（STUDIO)のワタナベです。 2024/10/01 にStudioが事業拡大に向けたリブランディングを発表しました。『すべての創造者のための器』となるコンセプトのNewブランドへ進化をしていきます。（2024/12/01〜） 大きく変更される点をまとめてみました！ ☑️料金プランこれまで(〜2024年11月30日) ･Free ･Starter ･CMS ･Business ･Enterprise これから(2024年12月

渡邉 慶太

    • トグル機能を解説！

      こんにちは！ノーコードWebクリエイター（STUDIO)のワタナベです。 本日は、トグルの解説していきます。トグル機能を用いることで、情報量をコントロールして使いやすさや効果性を格段に高めることができます。使いこなせるようにしていきましょう！ トグルとはトグルとは、ある同じ操作を繰り返すことで、機能や状態のON/OFFを切り替える仕組みのことである。 例えば、生活の中でよく使うアラーム設定。右側のON/OFFを切り替える仕組みがトグル機能です。 プルダウンメニューの作成ボ

      渡邉 慶太

      • アンカーリンクの解説！

        こんにちは！ノーコードWebクリエイター（STUDIO)のワタナベです。 本日は、アンカーリンクの解説していきます。Webページを作成する上で基礎的なスキルとなりますので、ぜひ覚えてください！ アンカーリンクとはアンカーリンクは、ウェブページ内の特定の場所に直接ジャンプできるリンクのことです。普通のリンクは別のページに飛ぶけど、アンカーリンクは同じページ内で移動します。 下記では、絵文字枠をクリックすると、文字枠へジャンプする設定になっています。ぜひ触ってみてください！

        渡邉 慶太

        • 埋め込み・はみ出し／スクロールの解説

          こんにちは！ノーコードWebクリエイター（STUDIO)のワタナベです。 本日は、埋め込み・はみ出し／スクロールの解説していきます。汎用性の高いスキルとなりますので、ぜひ覚えてください！ 埋め込みMapの埋め込みから解説します。 Mapをドラッグ&ドロップで出します。デフォルトは東京タワーで設定されているので、今回はディズニーランドに変更していきたいと思います。 ディズニーランドをネット検索かけます。 共有→地図埋め込み→サイズを決めて、HTMLをコピーします。 先ほど

          渡邉 慶太

          ホバーについて解説

          こんにちは！ノーコードWebクリエイター（STUDIO)のワタナベです。 本日は、みんな大好きな『ホバー』の解説を行います。 ぜひ、たくさん触って、遊んで使い方をマスターしていってください！ ホバーホバーとは ホバー（hover）とは、UIデザイン用語です。具体的には、具体的には、マウスカーソルがある要素の上に置かれたときに発生する効果やアクションを意味します。ユーザーが特定の要素に注目していることを視覚的に示し、インタラクションを促進する役割を果たします。 ホバーの役

          渡邉 慶太

          ホバーについて解説

          渡邉 慶太

          STUDIO基本操作解説＃４

          こんにちは！ノーコードWebクリエイター（STUDIO)のワタナベです。 基本操作の解説も今回で終わりになります！ 枠線ボックスを線で囲むことができます。 数値を入力するか、🔲内をドラッグまたはクリックで数値を変更できます。 全部の辺を引くことができます。 １辺ずつ引くことができます。 シャドウ シャドウをつけることで立体感を演出することができます。 X：横軸、Y：縦軸、Blur:ぼかし、 Spread:広がり（大きさ）を変更しながらシャドウをつけることが可能です。 参

          渡邉 慶太

          STUDIO基本操作解説＃４

          渡邉 慶太

          STUDIO基本操作解説（ボックス幅設定）＃３

          こんにちは！ノーコードWebクリエイター（STUDIO)のワタナベです。 基本操作の解説も残り２回となりました。引き続き頑張っていきましょう！ ボックス幅の設定Px：ボックス（文字、画像）のサイズが一定に保たれる設定です。 ％：親要素の幅を基準にそこに対して何％でボックス幅を決定する設定です。 auto：子要素幅に合わせて要素幅が決定する設定です。 flex：横幅でflexの値で分割される（３：１） vh：画面の高さに応じて要素の高さを変える設定です。（縦幅） トッ

          渡邉 慶太

          STUDIO基本操作解説（ボックス幅設定）＃３

          渡邉 慶太

          STUDIO基本操作解説（マージン・パディング）＃２

          こんにちは！ノーコードWebクリエイター（STUDIO)のワタナベです。 前回に引き続き、基本操作の学習を進めていきましょう！ マージンとパディングマージン ボックスの外にスペースを作る（オレンジで表されます。） パディング ボックスの中にスペースを作ります。（緑で表されます。） 設定方法 各設定欄から数値を入力する、またはボックス内をドラッグすると数値を変動させられます。 数値を入力する際には、全部で３種類の設定があります。🔒マークをクリックすると入力反映設定が変

          渡邉 慶太

          STUDIO基本操作解説（マージン・パディング）＃２

          渡邉 慶太

          STUDIOとの出会い【ノマドニア】

          本日はなぜSTUDIOに出会ったかについて話していく中で、私がどんな人物なのかについても紹介します！お時間があるときにゆる〜くお読みいただけたら幸いです！ はじめに前職は教員として働いていました！仕事の話になると、どこに行っても「先生って大変だよね。」って言葉を聞くことが多く、理解されていると思う反面、教員という職に対してのマイナスイメージが強いなーって思わされることも多く、少し悲しい… 教員時代は今振り返ってみても、ものすごく楽しかったですし、「尊い職業だ」って胸を張って

          渡邉 慶太

          STUDIOとの出会い【ノマドニア】

          渡邉 慶太

          STUDIO基本操作解説（ダッシュボード、エディタ、他）＃１

          こんにちは！ノーコードWebクリエイター（STUDIO)のワタナベです。 本日は「STUDIO基本操作」について解説します。 ぜひ手を動かしながら一緒に学習していきましょう！ ダッシュボードの理解 プロジェクト名、カバー画像、サイトの公開の可否、メンバー編集、CMSの設定等が行えます。 エディタの理解 ・バー（上）は３つに分けられます。 　①トップバー：ダッシュボード、プロジェクト、メンバーの追加、ライブ　　 　　プレビューができます。 　②スタイルバー：要素の装飾（

          渡邉 慶太

          STUDIO基本操作解説（ダッシュボード、エディタ、他）＃１

          渡邉 慶太

          なぜWeb制作においてノーコードを学ぶべきなのか

          こんにちは！ノーコードWebクリエイター（STUDIO)のワタナベです。 本日は、なぜノーコード制作を学ぶべきなのか自分なりの見解を述べていきたいと思います。 まずWeb制作と聞くと、画像のようなイメージを持っていると思います。デュアルディスプレイを兼ね備えて、超高速ブラインドタッチでカタカタパチパチカタカタパチパチ！！生きている次元が違う人たちがやっているんだと……実際自分もその中の1人でした。 それが一変して、STUDIO Showcaseを見て、STUDIOを触って

          渡邉 慶太

          なぜWeb制作においてノーコードを学ぶべきなのか

          渡邉 慶太