リファレンス 01 / 01 リファレンス 辞書として随時
用語集｜Studio制作で出てくる言葉を引く
Studio制作でつまずきやすい用語を、エディタ・レイアウト・CMS・公開・SEO・実務の6分野に分けて一覧表でまとめました。読む教材ではなく、詰まったときに引く辞書として使ってください。
この教材で学べること
- エディタ操作・レイアウトで出てくる用語の意味
- CMSまわりの用語の関係
- 公開・ドメイン・SEOで避けて通れない用語
- 案件のやりとりで出てくる実務用語
この教材は通しで読むものではありません。制作中に「この言葉、なんだっけ」と止まったときに開く辞書として使ってください。用語は、出てくる場面ごとに6つに分けてあります。
用語が出てくる場所の地図
用語が覚えられないのは記憶力の問題ではなく、「どの場面で使う言葉なのか」が結びついていないことが多いです。工程と用語を対応づけると、必要になった順に身につきます。
エディタ・レイアウトの用語
もっとも早い段階で出てくる言葉です。詳しい使い方は第2章 基本操作編で扱っています。
| 用語 | 意味 | つまずきポイント |
|---|---|---|
| ボックス | 要素を入れる箱。Studioの画面はこれの組み合わせ | 子は親の中でしか動けない |
| レイヤー | 要素の入れ子構造をツリーで表したもの（画面左） | クリックで選べない要素はここから選ぶ |
| パディング（内側の余白） | ボックスの縁と中身の距離。背景色は余白まで広がる | マージンと混同しやすい |
| マージン（外側の余白） | ボックスと隣の要素との距離。背景色は広がらない | 要素間は親のギャップのほうが崩れにくい |
| ギャップ | 親が子どうしの間隔をまとめて指定する設定 | 個別にマージンを足すより保守が楽 |
| 固定／可変／自動 | 幅や高さの決め方。数値／親に合わせる／中身に合わせる | 固定のままだとスマホではみ出す |
| レスポンシブ | 画面幅に応じて表示を変えること | PC→スマホの順に作る |
| ブレイクポイント | 表示の切り替わる画面幅の境目 | 境目のちょうど手前が崩れやすい |
| ファーストビュー | 開いた瞬間、スクロールなしで見える範囲 | スマホでは想像より狭い |
| ホバー | マウスカーソルを乗せた状態 | スマホには存在しない |
| カスタムコード | 標準機能で足りない部分を補う貼り付け型のコード | 入れる前にバックアップを取る |
CMSの用語
個々の言葉ではなく4つの関係で覚えてください。詳しくは第4章 CMS編で図解しています。
| 用語 | 棚でいうと | 意味 | 作る回数 |
|---|---|---|---|
| モデル | 棚の設計図 | 1種類のコンテンツが持つ情報の型 | 種類ごとに1回 |
| プロパティ（フィールド） | 設計図の仕切り | モデルが持つ個々の項目 | モデル作成時にまとめて |
| アイテム | 棚に入れる1冊 | 実際の1件分のデータ | 更新のたび |
| CMSリスト（動的リスト） | 本を並べる装置 | アイテムを条件で並べてページに表示する要素 | 表示場所ごとに1回 |
| CMSコレクション | 選んだ本だけの棚 | アイテムを手動で選んでまとめる機能（おすすめ・ランキング） | 特集ごとに1回 |
| 参照（リレーション） | ラベルの貼り替え | 別のモデルと紐付けるプロパティの型 | カテゴリーやタグに使う |
| 詳細ページ（雛形） | 共通の台紙 | アイテム1件分を表示するページのデザイン | 1枚だけ作る |
| 下書き／公開 | 棚に出す前／出した後 | サイトに表示するかどうかの状態 | アイテムごとに切り替え |
表：「型を決めて、中身を溜めて、並べる」の3ステップに対応している
公開・ドメインの用語
サイトをインターネット上に出すための手続きの話です。制作は得意でもここで止まる人が多い領域です。
| 用語 | 意味 | 身近なたとえ |
|---|---|---|
| ドメイン | サイトの住所にあたる文字列（example.com） | 店の住所 |
| 独自ドメイン | 自分（クライアント）で取得した専用のドメイン | 自分名義の住所 |
| DNS | ドメイン名と実際の置き場所を結びつける仕組み | 住所から建物を探す台帳 |
| ネームサーバー | そのドメインの案内をどこに任せるかの設定 | 案内係の指名 |
| サーバー | サイトのデータが置かれる場所 | 建物そのもの |
| SSL（https） | 通信を暗号化する仕組み。無いと警告が出る | 建物の施錠 |
| 公開／プレビュー | 実際に反映する操作／自分だけで確認する表示 | 開店／内覧 |
| リダイレクト | 古いURLから新しいURLへ自動転送すること | 移転先の張り紙 |
ドメイン設定でよくある事故：設定は反映までに時間がかかることがあります。表示されないからと何度も変えると状態が分からなくなります。一度変えたら、しばらく待って確認するのが原則です。
SEO・解析の用語
| 用語 | 意味 | やっておくべきこと |
|---|---|---|
| タイトルタグ | 検索結果に出るページの見出し | ページごとに違う内容にする |
| メタディスクリプション | 検索結果に出る短い説明文 | 各ページ100字前後で用意する |
| 見出し（H1〜H3） | 文章の階層構造を示すタグ | 見た目の大きさではなく意味で使う |
| 代替テキスト（alt） | 画像の内容を説明する文字 | 意味のある画像には必ず入れる |
| OGP | SNSでシェアされたときの画像・文言の設定 | 公開前に表示を確認する |
| サイトマップ（XML） | ページ一覧を検索エンジンに知らせるファイル | サーチコンソールに登録する |
| サーチコンソール | 検索での見え方を確認するGoogleの無料ツール | 公開直後に登録しておく |
| アナリティクス（GA4） | 訪問者数や流入元を見る解析ツール | 納品前に計測が動いているか確認する |
| リンク切れ | リンク先のページが存在しない状態 | 公開前・更新後にまとめて確認する |
実務・案件の用語
この領域の認識ずれは、そのまま無償の追加作業として跳ね返ってきます。詳しくは第5章 案件獲得・営業編で扱っています。
| 用語 | 意味 | ここでもめやすい |
|---|---|---|
| ヒアリング | 依頼内容と背景を聞き取ること | 要望をそのまま受けると目的とずれる |
| 要件定義 | 作るものの範囲を言葉で確定させること | 曖昧なまま進むと手戻りする |
| サイトマップ（構成図） | ページの数と階層を整理した図 | ページ数は見積もりの根拠になる |
| ワイヤーフレーム | 装飾を省いた、配置だけの設計図 | 飛ばすとデザイン修正が増える |
| 修正回数 | 見積もりに含める修正の上限 | 決めていないと無限に続く |
| 検収 | クライアントが完成を確認し承認する工程 | 期限を決めないと支払いが遅れる |
| 納品 | 成果物と権限を引き渡すこと | アカウントの譲渡範囲を明記する |
| 保守・運用 | 公開後の更新や不具合対応 | 制作費に含むのか別途かを最初に決める |
| ランニングコスト | 公開後も毎月かかる費用 | 誰が払うのかを契約前に明示する |
引いても分からなかったとき
用語集は「言葉の意味」までしか答えられません。実際に困るのは、意味は分かったのに、自分の状況にどう当てはめるかが分からないときです。そこから先は、画面を見せて聞くのが最短です。教材はカリキュラムトップから読み返せます。