Zenn
Open15

Studio学習ログ

studio
nocode
アライ リョータアライ リョータ

前提条件

  • 最低限のStudioの操作方法を理解している
  • プログラミングの基本的な概念を理解している

学習のゴール

  • 基本〜やや発展的なコーポレートサイトデザインの実装ができる
    • コーポレートサイトの構成パーツを理解している✅
    • 基本的なアニメーションの実装ができる✅
    • 基本的なCMS機能の実装・連携ができる✅
    • 問い合わせ機能の実装ができる✅
アライ リョータアライ リョータ

メモ

開発効率化Tips

👉 要素の選択：フォーカスを外して、⌘＋対象の要素をクリック
  • エディタで、編集したい要素をクリックで選択する場合、親BOXから順にフォーカスされる。
  • 直接、対象の要素を選択したい場合は、一旦要素へのフォーカスを外した状態で、⌘ ＋ 対象の要素をクリックでレイヤーを無視してダイレクトに選択できる。
👉 画像と文字だけを編集するときは、エディタ左下ペンマーク「コンテンツ編集モード」

デザインやレイアウトを変えられないので、複数のテキストを変更したいときに便利！

Studio開発時の要注意ポイント

画像をリンクとして使いたい時は「BOX」の内部に配置する

画像を元の形を保ったまま使用する際、「img」形式を選択することが多いが
その場合、画像を加工したりできないのと同様、リンク設定もできない。
【解決策】
画像をBOXの内部に設置し、BOXにリンクを設定することで解決。

Studioでできないこと ※2024/10時点
  • ページネーション
  • 資料ダウンロードボタン
  • ダークモード対応：トグル切り替え時に各要素のスタイルを変更するなどの実装で技術的には可能だが、Studioのデフォルト機能としてはなく、保守性も悪くなるため避けるべき。
flexについて

flexの適用方向は親BOXの方向に従う

Textのフォントについて

  • TypeSquare：日本語のフォントが多い

https://studio.design/ja/lp/font

アニメーションについて

親BOXへのホバーを、アニメーションのトリガにしたい時は
親BOXに、結果的に影響のないアニメーションを設定する（不透明度1 → 不透明度1 等）

レスポンシブについて

👉 Studioのレスポンシブ設定は、モバイルファーストではなく「PCファースト」
まずは、基準（PCブラウザ想定）で実装し、完了し次第「タブレット」「モバイル」で
レスポンシブ対応を行なっていく。

テキストにマーカーを引いたデザインの実装

https://www.youtube.com/watch?v=Ek4CAp77x3Y

アライ リョータアライ リョータ

頻出のヘッダー構造

例：左側に「ロゴ」、右側に「メニューリンク」「お問い合わせボタン」があるヘッダー
  • BOX：ヘッダーの一番外側を囲う
    • BOX：ロゴを囲う
      • 画像：ロゴ画像
    • BOX：ナビゲーションのレイアウト全体を囲う
      • BOX：各ナビゲーションメニューを囲う ※必要数に応じて適宜追加
        • テキスト：各メニューのテキスト
        • アンダーライン用
      • BOX：お問い合わせボタン
        • Text：お問い合わせボタンのテキスト

メニューにホバーした時、下線がスライドインしてくるアニメーション

👉 inホバーを使用する

テキストのBOXにホバーした時を、アニメーションのトリガにしたい。

  • テキスト：ホバー → 不透明度「1」（元の設定から値の変更がないため、影響しない）
  • BOX（下線）：デフォルトの設定を横幅0%にする（非表示の状態）
    • inホバー → 横幅100%（表示の状態）
アライ リョータアライ リョータ

ハンバーガーメニュークリック時にモーダルをスライドインで表示する

🚨 レスポンシブで「タブレット」「モバイル」でしか使わない場合でも、必ず「基準」にして作成する

ざっくり実装方法メモ（ヘッダーのハンバーガーメニューの場合）
  • 新規ページをモーダルで作成する
  • モーダルにデフォルトで設定されているマージンを0にする
  • スライドインしたい側に配置する
    • 横：pxで任意のサイズ指定
    • 縦：100%（画面幅に合わせる）
  • ×ボタンを「BOX」→ 「Icon（例：clear）」で配置する
    • 絶対位置でハンバーガーメニューのpxに合わせる。レスポンシブも同様
    • BOXで「リンク」→ 「モーダルを閉じる」「Home」を指定
    • BOXの色は必要に応じて透過処理
  • Homeのハンバーガーメニューも「リンク」→対象のモーダルを指定
  • モーダルの「Transition」で表示時の挙動を指定
アライ リョータアライ リョータ

画像の出現時、中央から拡大表示（Scale-up）するアニメーション

  • 出現時
  • モーション → スケール → xとyの値を0
  • 時間・遅延は適宜調整
    🚨 遅延設定をしないと、アニメーションをユーザーが見られない可能性があるため、適当な値を設定する

テキストの出現時、下からフェードインするアニメーション

  • 出現時
  • モーション → y（＝位置が下がる）に指定したい値を入力
  • 不透明度：1 → 0
  • 時間・遅延は適宜調整
アライ リョータアライ リョータ
アライ リョータアライ リョータ

CMS：Contents Management System

  • ブログやお知らせなどのWebコンテンツを管理する機能
    • 道程な情報を扱える

CMSの使い方

  1. CMSにコンテンツを登録（ブラウザで表示するための情報）
  2. デザインエディタで肩を作る（ブラウザに情報を表示するためのデザイン）
  3. 1と2を紐付ける

用語メモ

モデル：テーブル
モデルタイプ：初期のプロパティ
slug：記事の末尾につく文字列 ※初期値はランダムな文字列

👉 CMSに紐づけるページは動的ページで作成する

👉 リッチテキストBoxを使うと、画像などのテキスト以外の要素を表示できる

アライ リョータアライ リョータ

パララックス効果を用いた背景の実装

  • 常にサイト全体の要素の最背面に、固定で配置されている
  • 画像
    • 横：100%
    • 縦：100vh
    • 配置：固定（常にブラウザいっぱいに表示される
    • 重ね順：-3（最背面に設置）
アライ リョータアライ リョータ

ページ内遷移の実装

  • 遷移させたい箇所の要素にIDを設定
  • ボタンのリンク先にIDをつけた要素を指定
    👉 コンポーネント化した要素に対して設定したリンクは、別ページに設定した場合でも引き継がれる
アライ リョータアライ リョータ

コンポーネントのプロパティについて

コンポーネント化する際の「プロパティ」とは、コンポーネントで共通化しない部分のこと
👉 見出しや画像だけは共通化したくない（変更したい）時に個別設定できる

カテゴリー（タグ）に応じて表示項目を切り替える際は動的ページを使う

🚨 通常の「ページ」を使用すると、タグの数だけページを用意する必要が出てしまう

カテゴリーに応じて表示を切り替えるには（リスト作成済みを前提として）

動的ページに配置したリストで

  • フィルター：対象のCMSで作成したカテゴリー
  • フィルター条件：Dynamic
    を設定

リストのカテゴリーのリンクに作成したページを指定

アライ リョータアライ リョータ

ブレンドモード：背景に合わせて見やすい色に変わるヘッダー

ブレンドモード「除外」の仕様

重なった要素の明るい色から暗い色を引いた色にする
👉 上に重なっている要素の塗りが白になっていると、背景から一番遠い色になる
👉 上に重なっている要素要素の塗りが黒になっていると、背景から一番近い色（＝同じ色）になる

アライ リョータアライ リョータ

SEO・公開

タグ設定

  • ヘッダー（一番外側のdiv）：header
    • メニュー：nav
    • section：グループ化し「横：auto → 100%」、「main」
      👉 リッチテキストは、作成時のタグがそのまま適用されるので別途設定は不要

サイト設定

タイトル：検索結果、タブで表示されるタイトル、
説明文：検索結果で表示される説明テキスト
ファビコン：タブで表示されるアイコン（デフォルトはStudioのアイコンなので注意）
カバー画像：リンク共有時に表示される画像

公開前の注意事項

CMSを使用している場合は、コンテンツのステータスが「公開」になっているか確認すること

アライ リョータアライ リョータ

ローディングアニメーション

サイトトップのレンダリング時に表示されるアニメーションの実装

  • BOX：横100%.縦100vh、透明
  • 内部にBOX配置：横縦100%、設定したい色
  • デフォルトの不透明度を0に指定(アニメーション後は、
アライ リョータアライ リョータ

メインビジュアル作成時の設定メモ

  • 最初に配置するセクションの横幅を100%にしておくことで、内部のBOXなどの要素がセクションの横幅に合わせてサイズを変化してくれる
  • セクションの縦幅を100vhにしておくことで、縦幅のサイズに合わせて画面全体に広がって表示してくれる