yuki

【学習専用note】0から私がWebサイトが作れるデザインツール【STUDIO】につい…

yuki

【学習専用note】0から私がWebサイトが作れるデザインツール【STUDIO】について学んでいく経験を綴っていくnoteです♡ TechCommitのメンバーです(^^) STUDIO：https://studio.design/ja

  • ライティング

    素敵なライティングに関するnoteをまとめています。

  • 趣味と学び。

    最近の趣味と学びについてのnoteです。

  • STUDIO学習はじめてみた。

    ランディングページやWebサイトを作ることが出来るツール、STUDIOの使い方を0から学んでいくnoteです(^^♪ https://studio.design/ja/launch

  • 札幌シェアハウスＬＩＦＥ

    シェアハウスに住んでの日常noteです。

  • ポートフォリオ

    STUDIOで私が作成したWebサイトやランディングページのまとめです。

すべてのマガジンを表示

コーチング学習はじめてみた。（入門編）

ごきげんよう、友季子と申します。 今年も一年お疲れ様でございます(*^-^*) 今回のテーマは『コーチング学習はじめてみた』で遅ればせながら、アドベントカレンダーに投稿します。 コーチングを学ぼうとおもったキッカケTechCommitのイベントを素晴らしくするために、コーチングを学んだら良いのでは？と思い興味をもったため。 　 コーチングとは？ コーチングで大事だと思うポイント１４個 幾つか本や記事を読み、コーチングで大切だと思うことを自分の言葉でまとめてみました。

yuki

    • LT大会の開催準備のTips～TechCommitのLT大会で培った知見共有～

      こんにちは！TechCommitで毎月開催しているLT大会のサポートに入らせてもらっております、石黒友季子と申します♪ 遅ればせながら、【LT大会の開催準備のTips】という題名の通り、お読みのあなたへ、今年一年のLT大会のサポートで培った知見を共有したいと思います(*^-^*) LT大会を開催することに興味がある、開催を始めてみたいな～と思う方のお役に立てて頂ければ幸いでございます。 そもそもLT大会って何？LT大会とは何でしょう？という方もいらっしゃるかなと思うので

      yuki

      • STUDIOで自己紹介ポートフォリオサイト作ってみた💛

        おはようございます、yukiです💛 昨日と今日で、STUDIOを使って自己紹介ポートフォリオサイトを初めて作りました✨ URLはこちらです♪ 初めて作ってみての感想ですが、エディタ画面でのデザインのチェックと、実際のイメージにズレがあって苦戦しました（笑） お仕事が終わった後、８時間ほどで作成しました。ので 今日は早くお休みします！ 特に私は今後、イベントのPRのためのWeb制作をしたいので、これからもっとSTUDIO学習頑張ります🥰

        yuki

        • 【WEBサイトの上、固定ヘッダーナビ】STUDIO学習はじめてみた。#26日目

          こんにちは、yukiです♡ 26日目の今日はSTUDIOで、固定ヘッダーナビ（※Webサイトの上部分）の作り方についてサクッとまとめます(^^♪ 今回はロゴ（※企業ブランド例、今回はハート）とグローバルナビゲーションを【テキスト】機能を使って制作していきます。 1ヘッダー部分の中身を作る幅を100%に指定したボックスを作成し、ロゴをまずは左に配置します。 そして、グローバルナビゲーションのテキストのタグを「li」に変更します。 2グループ化をするヘッダー作成後、グロー

          yuki

        コーチング学習はじめてみた。（入門編）

        yuki

        • LT大会の開催準備のTips～TechCommitのLT大会で培った知見共有～

          yuki

        • STUDIOで自己紹介ポートフォリオサイト作ってみた💛

          yuki

        • 【WEBサイトの上、固定ヘッダーナビ】STUDIO学習はじめてみた。#26日目

          yuki

        マガジン

        • ライティング
          0本
        • 趣味と学び。
          1本
        • STUDIO学習はじめてみた。
          27本
        • 札幌シェアハウスＬＩＦＥ
          0本
        • ポートフォリオ
          0本
        • STUDIO
          2本

        記事

          【お問い合わせフォームの作り方】STUDIO学習はじめてみた。#25日目

          こんにちは、yukiです♡ 25日目の今日はSTUDIOでのお問い合わせフォームの作り方についてザックリまとめます！ フォームの追加についてフォームは左タブの【Form】から作っていく事が出来ます(^^♪ 元々は英語表記でパーツが用意されているのですが、日本語記載に自分で修正をする事が簡単に出来ます(^^♪ ▼日本語に直した例です。 フォーム結果の共有、Googleとの外部連携 メールアドレスの記入欄を作成して、メールの受信先をあらかじめ決めておく事で指定したメール

          yuki

          【お問い合わせフォームの作り方】STUDIO学習はじめてみた。#25日目

          yuki

          【ハンバーガーメニューの作り方】STUDIO学習はじめてみた。#24日目

          こんにちは、yukiです♡ 24日目の今日はSTUDIOのハンバーガーメニューの作り方🍔について記載します！ ハンバーガーメニューの作成の流れハンバーガーメニューを作るときの流れは、下記のような手順です。 ①ハンバーガーメニューのアイコンを配置する。 ②右側から表示される部分をモーダルが画面で制作する。 ③右側から表示される部分に、＜閉じるボタン＞を配置する。 ④リンクを繋ぐ。 エディタの画面について①ハンバーガーメニューのアイコンを配置するのは、下記の赤線部

          yuki

          【ハンバーガーメニューの作り方】STUDIO学習はじめてみた。#24日目

          yuki

          【共通部分のパーツ作成】STUDIO学習はじめてみた。#23日目

          こんにちは、yukiです♡ 23日目の今日はSTUDIOで共通部分のパーツを作成する方法について簡単にまとめます(^^♪ シンボル化について同じパーツ作りについては、【シンボル化】の機能を活用していきます。 作成したBOXをシンボル化として設定を実施して、名前を付けます。 そうすると、下記のスクリーンショットのように作成したパーツが出てきます。 ポイントと使い方シンボル化シンボル化したパーツをどれか一つ編集すると、他のパーツも連動して編集した内容が同期されます。

          yuki

          【共通部分のパーツ作成】STUDIO学習はじめてみた。#23日目

          yuki

          【存在しない４０４＆noindexページ】STUDIO学習はじめてみた。#22日目

          こんにちは、yukiです♡ 22日目の今日はSTUDIOの404ページ＆noindexページについて簡単にまとめます(^^♪ ①404ページの作り方存在しないページのURLを訪問した際の用意として404ページを作るには、画面左上の【タイプ】で404ページを押すことで簡単に作っていけます。 ②検索結果に表示したくないときは？作業中で公開したくないときは、下記の【noindex】を設定していきます♪ これで検索結果に表示されなくなります。 以上です♡ 応援のイイネをい

          yuki

          【存在しない４０４＆noindexページ】STUDIO学習はじめてみた。#22日目

          yuki

          【色を重ねる】STUDIO学習はじめてみた。#21日目

          こんにちは、yukiです♡ 21日目の今日はSTUDIOの色を重ねる、について綴ります(^^♪ 色についてBOXにBOXを重ねることで、画像の色合いを変更が出来ます。 ▼before ▼after 具体的には画面にある、下記の機能を使って実施していきます。 グラデーションや透明度の指定も出来ます♪ 以上です♡ 応援のイイネをいただけたら、とても嬉しいです♪

          yuki

          【色を重ねる】STUDIO学習はじめてみた。#21日目

          yuki

          【ドメイン設定無料と有料についてのポイント】STUDIO学習はじめてみた。#20日目

          こんにちは、yukiです♡ 20日目の今日はSTUDIOのドメイン設定の無料と有料についてのポイントについて簡単にまとめます(^^♪ そもそもドメインて何？ドメインは、Webサイトの情報を表すもので、詳しくは下記ページの内容より引用させてくださいね。 ドメインとは、簡単に言えばインターネット上の住所のようなものです。企業のホームページや個人のブログサイトはその住所に建てられる「家」というイメージをしていただければ、わかりやすいかと思います。 無料版ドメインと有料版ドメ

          yuki

          【ドメイン設定無料と有料についてのポイント】STUDIO学習はじめてみた。#20日目

          yuki

          【外部サービスとの連携で良いなと感じた点】STUDIO学習はじめてみた。#19日目

          こんにちは、yukiです♡ 19日目の今日はSTUDIOを外部ツールと連携させる方法について学びました(^^♪ 外部サービスとの連携については、ざっくりいうと２分類があります。 ①Apps(有料で使えるもの) ②Appsを使用しない連携（無料プランでも使えるもの） ①Apps(有料で使えるもの)で例えば何が出来るか？ 例えばで、Googleに特化したものや、クライアントに特に喜んでもらえそうなツールを軽くまとめますね。 ・Google Analytics：Webサ

          yuki

          【外部サービスとの連携で良いなと感じた点】STUDIO学習はじめてみた。#19日目

          yuki

          【ページのTitle＆Descriptionとは？】STUDIO学習はじめてみた。#18日目

          こんにちは、yukiです♡ 18日目の今日はSTUDIOのページのTitle＆Descriptionについて簡単にまとめますね(^^♪ SEO対策が出来る！metaタグのTitle＆Descriptionデザイン編集画面の右上、赤い丸を付けた部分を使って、SEO対策のためTitleやDescriptionの設定が出来ます♪ ▼具体的には、左側がページ指定が出来る【ページ設定】で、右側がサイト全体指定に関する【サイト指定】です。 Title（タイトル）Title（タイト

          yuki

          【ページのTitle＆Descriptionとは？】STUDIO学習はじめてみた。#18日目

          yuki

          【ページのURLとは？】STUDIO学習はじめてみた。#17日目

          こんにちは、yukiです♡ 17日目の今日はSTUDIOのページのURL（パス）＆ページの名前の付け方について簡単にまとめます！ ページのURLになる部分作ったページのURLを設定したいときは、画面左上にある【パス】のところをクリックして、設定を行っていきます(^^) ▼赤い線を引いたところをチェックしてくださいね。 ページを管理するための名前についてページに名前をつけたいときは、左上の【ページ名】をクリックして、入力していきます。 ▼赤い線を引いた部分です♪ 作

          yuki

          【ページのURLとは？】STUDIO学習はじめてみた。#17日目

          yuki

          【タグ指定とは？】STUDIO学習はじめてみた。#16日目

          こんにちは、yukiです♡ 16日目の今日はSTUDIOのタグ指定について簡単にまとめます！ STUDIOではBOX・TEXTの左上のタブをクリックすると、HTMLタグが表示されます(^^♪ BOXタグについて例えば、BOXにはheader・main・footer、divタグなどが用意されています！ ▼こちらはBOXのイメージです！ 赤線を引いたところを使って、どんなタグを付けたいか？指定がサクッと出来ます(^^♪ HTMLタグの詳細は学習教材などに沢山記載がある

          yuki

          【タグ指定とは？】STUDIO学習はじめてみた。#16日目

          yuki

          【プレビューとは？】STUDIO学習はじめてみた。#15日目

          STUDIO学習はじめてみた。 こんにちは、yukiです♡ 15日目の今日はSTUDIOのプレビューについて簡単にまとめます！ プレビューについてプレビューについては、右上の赤い線を引いた【LivePreview】をクリックして行います。 次に下記の画面が出てきますので、【Start】を押してください。 プレビューの共有方法についてそうすると、プレビュー画面のQRコードやＵＲＬが表示されます♪ 以上です♡

          yuki

          【プレビューとは？】STUDIO学習はじめてみた。#15日目

          yuki

          【リンク＆アンカーリンクとは？】STUDIO学習はじめてみた。#14日目

          こんにちは、yukiです♡ 14日目の今日はSTUDIOのリンク＆アンカーリンクの機能について簡単にまとめます(^^♪ リンクについてリンクを設定したいときは、下記の赤線の部分のリンク【ページ】【URL】から行えます。 ①URL：外部ページのURLなどhttps://www.tech-commit.jp/ ②電話番号：先頭に【tel】をつけて連絡先を入力する。 ③メール送信：先頭に【mailto】をつけてメールアドレスを入力する。 アンカーリンクについてアンカー

          yuki

          【リンク＆アンカーリンクとは？】STUDIO学習はじめてみた。#14日目

          yuki