# Studio Help

> Studio公式ガイド

## English

### About Studio

- [1. Studio.Design Accounts and Projects](https://help.studio.design/en/articles/9972325-1-studio-design-accounts-and-projects.md): Learn how to create an account and a project — the essentials you need to start building a website with Studio.Design.
- [3. Layout Basics in Studio \(Box Layout\)](https://help.studio.design/en/articles/5542617-3-layout-basics-in-studio-box-layout.md): In Studio.Design, web page layouts are built using a method called "Box Layout." This article explains the key features of Box Layout and walks you through how it works on screen.
- [4. How to Use Studio CMS](https://help.studio.design/en/articles/4175003-4-how-to-use-studio-cms.md): An overview of the CMS feature in Studio.Design. It's ideal for content that shares the same design but needs regular additions and updates — like news, blogs, columns, and case studies.
- [5. How Search Engines Work and SEO Best Practices](https://help.studio.design/en/articles/12697851-5-how-search-engines-work-and-seo-best-practices.md): Learn about the steps involved before your published site appears in search results, and discover SEO best practices to help your site rank higher.
- [6. Choose a domain and publish your site](https://help.studio.design/en/articles/9973234-6-choose-a-domain-and-publish-your-site.md): Once your website is ready, it's time to choose a domain and publish it. This article explains the types of domains available in Studio.Design and walks you through the publishing process.

### Project Management

- [What is a Studio.Design project?](https://help.studio.design/en/articles/15840870-what-is-a-studio-design-project.md): In Studio.Design, you create projects to build, publish, and manage your websites. This article covers the basics of projects and how to manage multiple projects using workspaces.
- [Creating and managing projects](https://help.studio.design/en/articles/2639138-creating-and-managing-projects.md): Learn how to create, duplicate, reset, and archive projects in Studio.Design.
- [Set up your project](https://help.studio.design/en/articles/13626851-set-up-your-project.md): Learn how to manage the basic settings for your whole project in Studio.Design, including the project name, thumbnail image, and Webhook notifications.
- [Set up publishing and delivery](https://help.studio.design/en/articles/16159497-set-up-publishing-and-delivery.md): Learn how to manage your Studio.Design site's publishing status, domain, search engine policies, and other delivery settings. You'll find these options in the Settings tab of your project dashboard.
- [Upload a .txt file](https://help.studio.design/en/articles/13627103-upload-a-txt-file.md): Learn how to upload and manage .txt files, like ads.txt, in your project. These files can share policies, contact info, and more with search engines and LLM agents.
- [Reset Project](https://help.studio.design/en/articles/7180957-reset-project.md): Reset a project to its initial state
- [Set up Webhook notifications](https://help.studio.design/en/articles/9115699-set-up-webhook-notifications.md): Learn how to set up Webhook notifications in Studio.Design to send real-time updates to external systems when your site is published, updated, or unpublished. You can register one notification URL ...
- [What happens when I archive a project? Can I delete it?](https://help.studio.design/en/articles/2248968-what-happens-when-i-archive-a-project-can-i-delete-it.md): It's not possible to delete a project.
- [What happens when you duplicate a legacy plan project after the new plans are introduced?](https://help.studio.design/en/articles/10207848-what-happens-when-you-duplicate-a-legacy-plan-project-after-the-new-plans-are-introduced.md): Projects duplicated after December 1, 2024, will be created as new Free plan projects.

### Basic Editor Operations

- [System Requirements for Studio.Design](https://help.studio.design/en/articles/4062142-system-requirements-for-studio-design.md): The recommended browser for the Studio.Design design editor and project dashboard is Google Chrome \(desktop only\). We recommend using the latest version for the best experience.
- [Design Editor](https://help.studio.design/en/articles/12112783-design-editor.md): The Design Editor is the tool you use to create and edit website designs in Studio.Design. This article covers an overview of the Design Editor and its basic features.
- [left panel](https://help.studio.design/en/articles/12889476-left-panel.md): The panels that open on the left side of the design editor are collectively called the "left panel" and are used to add various boxes and other elements that make up the site, as well as to manage ...
- [Right Panel](https://help.studio.design/en/articles/12889360-right-panel.md): Studio.Design’s right-hand panel lets you style each box, edit its data, and manage site and page meta information directly from the design editor.
- [Pages Panel](https://help.studio.design/en/articles/4064963-pages-panel.md): The Pages panel is where you view and manage all pages in your site. Open it from the left panel. This article covers the basics of using the Pages panel and key settings.
- [Layers Panel](https://help.studio.design/en/articles/5838449-layers-panel.md): The Layers panel shows all elements on the design editor in a hierarchical list. You can view the layout structure, select and reorder elements, rename them, and check conditional styles and respon...
- [Connect Panel](https://help.studio.design/en/articles/13568973-connect-panel.md): The Connect panel lets you set up integrations with external data sources like Studio CMS, APIs, and RSS, and add preset parts that use connected data to your site.
- [Studio's AI features](https://help.studio.design/en/articles/12910840-studio-s-ai-features.md): This article provides an overview of the AI features in Studio and how to use them.
- [Live Preview](https://help.studio.design/en/articles/2639164-live-preview.md): Live Preview lets you see your edits in the editor update in real time in a browser. Learn how to create and delete a Live Preview URL, check responsive designs, and use comments.
- [List of Keyboard Shortcuts](https://help.studio.design/en/articles/4062139-list-of-keyboard-shortcuts.md): Learn keyboard shortcuts \(commands\) to work more efficiently in Studio.Design.
- [Undo & Redo Buttons](https://help.studio.design/en/articles/2370492-undo-redo-buttons.md): Use the Undo and Redo buttons to reverse or reapply your actions. These only affect your own edit history and won't impact other team members' work.
- [Changing the Screen Zoom Level](https://help.studio.design/en/articles/1949402-changing-the-screen-zoom-level.md): Learn three ways to change the zoom level in the design editor. Use the zoom controller, reset the zoom, or adjust it with keyboard shortcuts and scroll gestures.
- [Comments](https://help.studio.design/en/articles/9069568-comments.md): With Studio.Design's commenting feature, you can add, view, and manage comments directly on your designs. This article walks you through using Comment Mode in the design editor, along with how to e...
- [Content Edit Mode](https://help.studio.design/en/articles/6510478-content-edit-mode.md): Explaining the content editing mode where only text, images, and other content can be edited in the editor.
- [Set colors in the color palette](https://help.studio.design/en/articles/12979651-set-colors-in-the-color-palette.md)
- [Can I display gridlines \(guides or rulers\) in the editor?](https://help.studio.design/en/articles/8580772-can-i-display-gridlines-guides-or-rulers-in-the-editor.md): There is no gridline display feature available.
- [Manage your site's edit history with version control](https://help.studio.design/en/articles/7793727-manage-your-site-s-edit-history-with-version-control.md): Save your edit history in the design editor as "versions" that you can review and restore anytime. Both auto-save and manual save are supported, with retention periods varying by plan.
- [Can I use the Studio editor or CMS dashboard from a tablet or smartphone?](https://help.studio.design/en/articles/8870274-can-i-use-the-studio-editor-or-cms-dashboard-from-a-tablet-or-smartphone.md): Studio.Design's admin tools \(Design Editor, CMS Dashboard, Form Dashboard, etc.\) can only be used in Google Chrome on a PC. We recommend using the latest version.
- [Markdown notation](https://help.studio.design/en/articles/4065297-markdown-notation.md): You can use Markdown formatting in both the CMS article editor and the Design Editor in Studio.Design.
- [Adding a Box](https://help.studio.design/en/articles/4062145-adding-a-box.md): Learn how to add and place boxes \(elements\) on your page.
- [Selecting boxes](https://help.studio.design/en/articles/2638956-selecting-boxes.md): Learn how to select boxes in the design editor. This article covers two methods: selecting directly on the screen and selecting via the Layers panel.
- [Copy and paste boxes](https://help.studio.design/en/articles/5837997-copy-and-paste-boxes.md): Learn how to duplicate boxes on your screen and reuse the same design elements. You can copy and paste single or multiple boxes.
- [Parent and Child Boxes](https://help.studio.design/en/articles/1882576-parent-and-child-boxes.md): Learn how to nest boxes by creating parent-child relationships in the Studio.Design editor.
- [Grouping Boxes](https://help.studio.design/en/articles/4062148-grouping-boxes.md): Grouping boxes lets you combine multiple boxes into a single unit, making it easier to adjust layout and alignment.
- [Supported file formats and storage limits](https://help.studio.design/en/articles/2427602-supported-file-formats-and-storage-limits.md): Studio.Design supports uploading images, videos, and PDFs for your website. Learn about supported file formats, size limits, and how to check your current storage usage.
- [Uploading and managing files \(images, videos, and PDFs\)](https://help.studio.design/en/articles/1949386-uploading-and-managing-files-images-videos-and-pdfs.md): Upload images, videos, and PDFs to use in your web page designs and layouts. Files are uploaded to the Assets panel, where you can manage them. Here's how to upload, organize, and delete your files.
- [Image quality looks low after uploading a large image](https://help.studio.design/en/articles/4501211-image-quality-looks-low-after-uploading-a-large-image.md): After our May 2025 update, original uploaded images are kept at full quality. If your image still looks low quality, here's why that might happen and how to fix it.
- [Can I upload videos directly to Studio.Design?](https://help.studio.design/en/articles/9309277-can-i-upload-videos-directly-to-studio-design.md): You can upload mp4 and webm video files up to 1 GB each to the Studio.Design editor. Uploaded videos can be placed directly on your page.

### Pages

- [Page Types](https://help.studio.design/en/articles/4064967-page-types.md): Studio.Design lets you add various page types to your site. This article explains the features, how to add them, and when to use each type.
- [Page Type: Home](https://help.studio.design/en/articles/5049709-page-type-home.md): Learn how to set up the "Home" page type, which serves as your site's top page, and what happens when it's not configured.
- [Page type: 404 page](https://help.studio.design/en/articles/3614820-page-type-404-page.md): A 404 page is an error page shown when someone visits a URL that doesn't exist. Learn how to design and configure a 404 page to keep visitors on your site.
- [Page Type: Modal](https://help.studio.design/en/articles/2639232-page-type-modal.md): Modals are popup windows that overlay additional content without navigating away from the current page. Learn how to add, edit, and configure modals in Studio.Design.
- [Page Type: Dynamic Pages](https://help.studio.design/en/articles/4055759-page-type-dynamic-pages.md): Dynamic pages let you display detailed data fetched from Studio.Design CMS or the Data Connect API. This article covers how to add dynamic pages, connect data, and customize design and page settings.
- [Page type: Dynamic Modal](https://help.studio.design/en/articles/8743438-page-type-dynamic-modal.md): A Dynamic Modal is a page type that displays detailed data from Studio CMS or Data Connect API inside a modal window, letting users view item details without navigating away.
- [Set up links to open and close a modal](https://help.studio.design/en/articles/2284660-set-up-links-to-open-and-close-a-modal.md): Learn how to link to an existing modal page and how to add a close link to elements within a modal.
- [Setting up scrolling inside a modal](https://help.studio.design/en/articles/3596873-setting-up-scrolling-inside-a-modal.md): Enable scrolling inside a modal so visitors can browse content efficiently without navigating away from the page. Here's how to set it up.
- [Redirect Pages \(Setting Up 301 Redirects\)](https://help.studio.design/en/articles/8366949-redirect-pages-setting-up-301-redirects.md): Learn how to set up, edit, and delete 301 redirects to send visitors to new URLs when you change your site's structure. This helps prevent 404 errors, keeps the visitor experience smooth, and prote...
- [Page Type: Search Page](https://help.studio.design/en/articles/6729386-page-type-search-page.md): The search page lets visitors search through articles published with Studio CMS. Learn how it works and how to edit it.
- [Creating and editing pages](https://help.studio.design/en/articles/4064961-creating-and-editing-pages.md): Pages are the building blocks of your website. Learn about the different page types available in Studio.Design and how to add, duplicate, delete, and manage pages.
- [Studio Banner](https://help.studio.design/en/articles/4066039-studio-banner.md): Upgrade your plan to hide the Studio banner
- [Set the Page Path \(URL\)](https://help.studio.design/en/articles/1921450-set-the-page-path-url.md): Set a custom path for each page to change its URL to any text you want. This article explains how to set paths, organize your pages into folders using slashes, and how paths work differently for ea...
- [Adding custom code to your site or pages](https://help.studio.design/en/articles/7890587-adding-custom-code-to-your-site-or-pages.md): With Studio.Design paid plans, you can use the custom code feature to add your own code to the \<head\> and \<body\> tags of your site or individual pages. This article covers the limits and how to add...
- [Set up structured data](https://help.studio.design/en/articles/6549779-set-up-structured-data.md): Learn how to add structured data \(JSON-LD\) to your Studio.Design pages. Properly configured structured data enhances search result appearance and improves SEO.
- [Set the title and description](https://help.studio.design/en/articles/4064972-set-the-title-and-description.md): Learn how to set the title and description that appear in search results and on social media for your Studio.Design site or pages. Covers the basics, character count tips, and the difference betwee...
- [Automatic Generation of Site's Title and Description by AI](https://help.studio.design/en/articles/10472120-automatic-generation-of-site-s-title-and-description-by-ai.md): AI automatically generates meta information \(titles and descriptions\) for your site and pages based on the text content.
- [Set a favicon](https://help.studio.design/en/articles/4066089-set-a-favicon.md): Learn how to set a favicon for your site in Studio.Design, along with important details and tips.
- [Social cover image \(thumbnail / OGP\)](https://help.studio.design/en/articles/4066111-social-cover-image-thumbnail-ogp.md): Learn how to set up your social cover image \(thumbnail / OGP\) that appears when your URL is shared on social media, along with key things to keep in mind. Without it, no image will show when your l...
- [Set a page to noindex](https://help.studio.design/en/articles/4258184-set-a-page-to-noindex.md): Learn how to set "noindex" on pages you don't want search engines to index. Note: Setting noindex does not control access by AI crawlers.
- [What happens if no page is set to the "Home" page type?](https://help.studio.design/en/articles/6670109-what-happens-if-no-page-is-set-to-the-home-page-type.md): The page at the top of the Pages panel will be treated as the Home page.
- [When you can't paste a URL copied from a list's URL property](https://help.studio.design/en/articles/10756842-when-you-can-t-paste-a-url-copied-from-a-list-s-url-property.md): If you can't paste a URL copied from a list's URL property into another list item or 301 redirect URL field, learn how to use "Paste and Match Style" to work around the issue.
- [How to organize your page list into folders \(directories\)](https://help.studio.design/en/articles/5424391-how-to-organize-your-page-list-into-folders-directories.md): When you add a slash to a page path, pages with matching text before the slash are automatically grouped into a directory.
- [Adding pagination](https://help.studio.design/en/articles/8606987-adding-pagination.md): Studio.Design does not currently offer a pagination feature.
- [Adding breadcrumb navigation](https://help.studio.design/en/articles/4301242-adding-breadcrumb-navigation.md): Studio.Design does not currently have a built-in feature to automatically generate breadcrumb navigation based on your site's page structure.

### Editor

- [Figma to Studio](https://help.studio.design/en/articles/8277073-figma-to-studio.md): Use the plugin to import your Figma designs into Studio.Design.
- [Box Layout: Size \(Width & Height\)](https://help.studio.design/en/articles/2639205-box-layout-size-width-height.md): Learn how to set a box's size and explore the different size units available. Choosing the right unit helps you create responsive, easy-to-maintain layouts.
- [Box Layout: Margin, Padding, and Gap \(Spacing\)](https://help.studio.design/en/articles/1892843-box-layout-margin-padding-and-gap-spacing.md): Learn how to set spacing on boxes in Studio.Design. Understand the differences between margin, padding, and gap, and how to configure each one.
- [Box Layout: Direction and Alignment](https://help.studio.design/en/articles/4062166-box-layout-direction-and-alignment.md): In Studio.Design, pages are built by stacking boxes. Adjust box layout by setting the direction on the parent box and the alignment of child boxes. Select a parent box to configure spacing and dire...
- [Box Position: Placement, Stacking Order & Overflow](https://help.studio.design/en/articles/4062251-box-position-placement-stacking-order-overflow.md): Box position settings let you control placement \(relative, fixed, absolute, sticky\), stacking order, and overflow behavior. Access these from the Box tab on the right side of the design editor.
- [Box Position: Placement \(Relative, Fixed, Absolute, Sticky\)](https://help.studio.design/en/articles/4062242-box-position-placement-relative-fixed-absolute-sticky.md): Learn about the four position types for boxes — Relative, Fixed, Absolute, and Sticky — and how to configure each one in Studio.Design.
- [Box Position: Overflow Settings](https://help.studio.design/en/articles/4129078-box-position-overflow-settings.md): Overflow settings control how child boxes that extend beyond a parent box are displayed. Choose from three options: Visible, Hidden, or Scroll.
- [Overlapping Boxes \(Negative Margin\)](https://help.studio.design/en/articles/2639157-overlapping-boxes-negative-margin.md): Set a negative value for a box's margin to reduce spacing and create overlapping layouts. Since this uses margin \(outer spacing\), you can combine it with other spacing settings for flexible designs.
- [Match the height of multiple boxes](https://help.studio.design/en/articles/5707066-match-the-height-of-multiple-boxes.md): To make side-by-side boxes the same height, group them together and apply the "Stretch" setting to the parent box.
- [Pin a box to the edge of the screen](https://help.studio.design/en/articles/4524705-pin-a-box-to-the-edge-of-the-screen.md): To pin a box to the edge of the screen, specify the distance between the nearest side of the box and the edge of the screen.
- [Transform: Move, Rotate, Scale & Skew](https://help.studio.design/en/articles/13448110-transform-move-rotate-scale-skew.md): Apply transformations like move, rotate, scale, and skew to any box. Use transform handles to visually adjust transformations right on the screen.
- [Box Appearance: Setting Filters](https://help.studio.design/en/articles/5289922-box-appearance-setting-filters.md): Learn how to apply filters to boxes. You can configure blend modes, filters, and backdrop filters individually.
- [Box Appearance: Setting a Background Color](https://help.studio.design/en/articles/4062429-box-appearance-setting-a-background-color.md): Learn how to set the background color of a box on your page. Use the color palette to choose solid colors, gradients, RGBA/HEX codes, and more.
- [Box appearance: Setting borders](https://help.studio.design/en/articles/1949370-box-appearance-setting-borders.md): Add borders to boxes and customize their color and style. Borders help clearly separate content and add visual accents to your design.
- [Box Appearance: Setting Border Radius](https://help.studio.design/en/articles/1892943-box-appearance-setting-border-radius.md): Learn how to round the corners of a box using the border radius feature. Setting the radius to 50% turns an element into a perfect circle.
- [Box Appearance: Setting Shadows](https://help.studio.design/en/articles/1949371-box-appearance-setting-shadows.md): Learn how to add drop shadows and inner shadows to a box, including settings for color, position, blur, spread, and direction.
- [Box Appearance: Opacity](https://help.studio.design/en/articles/4062436-box-appearance-opacity.md): Learn how and where to adjust the opacity setting for a box.
- [How to create a diagonal background](https://help.studio.design/en/articles/2767158-how-to-create-a-diagonal-background.md): Learn how to create a diagonal background using the fill feature in Studio.Design.
- [Understanding Text Styles and Color Styles](https://help.studio.design/en/articles/16048476-understanding-text-styles-and-color-styles.md): Learn how Styles let you save design settings like fonts, sizes, and colors to reuse across your project, and discover the differences between Text Styles and Color Styles in Studio.Design.
- [Setting up color styles](https://help.studio.design/en/articles/10755400-setting-up-color-styles.md): Learn how to register and centrally manage frequently used colors like brand colors as "color styles." Use labels and hierarchy to keep your color styles organized.
- [Text Styles](https://help.studio.design/en/articles/10129702-text-styles.md): Text Styles let you manage text settings like font, size, letter spacing, and line height in one place. Learn what you can save, how to register them, and how to organize them into folders.
- [Using Selection Colors](https://help.studio.design/en/articles/10136373-using-selection-colors.md): View all colors used within a selected box or group at a glance and change them all at once. Learn how to efficiently manage colors, adjust page color schemes, and highlight where colors are used.
- [Discontinuation of New Registrations and Feature Retirement for My Color](https://help.studio.design/en/articles/10756915-discontinuation-of-new-registrations-and-feature-retirement-for-my-color.md): As of March 13, 2025, we ended the ability to add new colors to My Color. Please use Color Styles going forward.
- [Fonts available in Studio.Design](https://help.studio.design/en/articles/10510423-fonts-available-in-studio-design.md): Studio.Design includes web fonts \(Google Fonts and TypeSquare\) as well as system fonts by default. You can also upload your own font files to use in your projects.
- [Font List: Manage the fonts used on your site](https://help.studio.design/en/articles/10509895-font-list-manage-the-fonts-used-on-your-site.md): The Font List lets you manage all the fonts used across your site as "font families" in one place. Learn how to set sub-fonts, choose a default font, and streamline your font management with Studio...
- [Setting, replacing, and removing fonts](https://help.studio.design/en/articles/1949383-setting-replacing-and-removing-fonts.md): Learn how to apply a font to a text box, as well as how to replace or remove fonts you've already set.
- [Custom Fonts](https://help.studio.design/en/articles/3190900-custom-fonts.md): Upload your own font files to use within Studio.Design. Learn about supported file formats and how to upload them.
- [Using TypeSquare with Studio.Design](https://help.studio.design/en/articles/2925373-using-typesquare-with-studio-design.md): To use TypeSquare, the web font service from Morisawa, with Studio.Design, you'll need to set it up by adding the fonts first.
- [Choosing the Right Font: System Fonts vs. Web Fonts](https://help.studio.design/en/articles/10510748-choosing-the-right-font-system-fonts-vs-web-fonts.md): Learn how to choose fonts when building your site in Studio.Design. We recommend system fonts when speed matters most, and web fonts when design takes priority.
- [Why fonts may appear different from what you set in the editor](https://help.studio.design/en/articles/10510623-why-fonts-may-appear-different-from-what-you-set-in-the-editor.md): Learn why fonts set in the Studio.Design editor may look different when viewed on a computer or smartphone, how to check your system font settings, and how to fix the issue.
- [Font limits per project](https://help.studio.design/en/articles/2925401-font-limits-per-project.md): Learn about the maximum number of fonts you can use in a Studio.Design project. FONTPLUS supports up to 50 font families, while other font sources have no limit.
- [FONTPLUS Service Ending \(April 7, 2026\)](https://help.studio.design/en/articles/14130523-fontplus-service-ending-april-7-2026.md): The FONTPLUS fonts available in Studio.Design will no longer be offered as of April 7, 2026, due to the end of our contract with Monotype. Here's what to expect and how to switch to alternative fonts.
- [Components](https://help.studio.design/en/articles/4055523-components.md): Components let you save design elements you use repeatedly throughout your project as reusable parts. With Components, you can manage everything in one place, keep your design consistent, and build...
- [Setting display conditions for components](https://help.studio.design/en/articles/16795654-setting-display-conditions-for-components.md): Display conditions for components let you show or hide elements at each placement, based on whether a property has a value. This article covers the property types available and how to set them up.
- [Components: Properties](https://help.studio.design/en/articles/9743829-components-properties.md): Component properties let you set different images, text, colors, and visibility for each place a component is used. This article covers the property types available and how to manage them.
- [Conditional Styles](https://help.studio.design/en/articles/2639206-conditional-styles.md): Conditional styles let you change a box's appearance or layout based on visitor interactions or page state. Learn about the available trigger conditions and how to set them up.
- [Conditional Styles: Setting Up Scroll Effects](https://help.studio.design/en/articles/14494654-conditional-styles-setting-up-scroll-effects.md): Add motion to your page with scroll-based effects like parallax and scroll-triggered animations. You can move or fade elements based on scroll position or when they enter the viewport, all using th...
- [Set up animations \(easing, duration, and delay\)](https://help.studio.design/en/articles/4055409-set-up-animations-easing-duration-and-delay.md): In Studio.Design, you can apply animations like movement and rotation to boxes. Animations are created from the difference between default and conditional styles. Combine easing, duration, and dela...
- [How to create a color-change animation when hovering over a button](https://help.studio.design/en/articles/7028894-how-to-create-a-color-change-animation-when-hovering-over-a-button.md): Use the Hover and \(in\) Hover conditional styles to set up an animation that changes a button's color when you hover your cursor over it.
- [Swap images on hover](https://help.studio.design/en/articles/3334193-swap-images-on-hover.md): Place the default image on top, then use a hover conditional style to change its opacity. This creates an effect where the image appears to switch when hovered over.
- [Create a button with a color sweep effect on hover](https://help.studio.design/en/articles/7120280-create-a-button-with-a-color-sweep-effect-on-hover.md): Learn how to create a button where color sweeps in from one edge on hover using "Hover" and "in: Hover" conditional styles with animation settings.
- [Create a fade-in-from-below animation on appearance](https://help.studio.design/en/articles/7017740-create-a-fade-in-from-below-animation-on-appearance.md): Make images or text gently fade in from below by combining the On Appear conditional style with animation settings. For a quick start, use one of our animation templates to set up the basics with e...
- [Create a typewriter-style text animation](https://help.studio.design/en/articles/14833592-create-a-typewriter-style-text-animation.md): Learn how to set up an animation where letters appear one by one. Split each character into separate text boxes, then use the "On appear" conditional style to set opacity and stagger the delay for ...
- [Create a loading-style animation](https://help.studio.design/en/articles/7120307-create-a-loading-style-animation.md): Learn how to use conditional styles to build a splash screen–style animation that appears when the page loads. We'll also cover display order, layering, and how to preview your animation in Studio....
- [Set up a parallax effect that slowly slides images on scroll](https://help.studio.design/en/articles/15068733-set-up-a-parallax-effect-that-slowly-slides-images-on-scroll.md): Learn how to create an effect where images move slowly as visitors scroll the page. This guide walks you through using conditional scroll styles to make an image move upward within a banner.
- [Create a scroll progress bar](https://help.studio.design/en/articles/15076921-create-a-scroll-progress-bar.md): Learn how to create a progress bar that expands from left to right as visitors scroll down your page. We'll set it up using the scroll effect in conditional styles.
- [How to fix links or hover animations that aren't working](https://help.studio.design/en/articles/8127522-how-to-fix-links-or-hover-animations-that-aren-t-working.md): If your links or hover animations aren't working in Studio.Design, here are the key things to check. Review your link settings, box overlap, and the stacking order of animation boxes in that order ...
- [Why 'On Appear' animations aren't showing — and how to fix it](https://help.studio.design/en/articles/4170867-why-on-appear-animations-aren-t-showing-and-how-to-fix-it.md): If a box with an 'On Appear' conditional style animation isn't displaying, it's usually because the box extends beyond its parent box or the screen. This often happens on mobile screen widths when ...
- [Search inside and outside your project with the Command Palette](https://help.studio.design/en/articles/8679425-search-inside-and-outside-your-project-with-the-command-palette.md): The Command Palette lets you quickly search within your project—including pages, dashboard menus, and CMS items—as well as across your other projects.
- [Pin headers and buttons to the screen](https://help.studio.design/en/articles/9360496-pin-headers-and-buttons-to-the-screen.md): Learn how to use the "fixed position" setting to keep elements like headers and buttons visible on screen while scrolling. We'll also cover what to check if pinning isn't working as expected.
- [How to arrange boxes horizontally or vertically](https://help.studio.design/en/articles/1883297-how-to-arrange-boxes-horizontally-or-vertically.md): Learn how to change the direction in which boxes are arranged in Studio.Design, along with some helpful tips. You can adjust the arrangement direction from the Layout menu.
- [Tips for Making Text More Readable Over Images](https://help.studio.design/en/articles/6674382-tips-for-making-text-more-readable-over-images.md): When placing text over an image, readability can suffer. Here are two simple ways to darken your image and make text stand out more clearly.
- [How to create tabbed designs](https://help.studio.design/en/articles/9229487-how-to-create-tabbed-designs.md): Learn how to build tabbed sections in Studio.Design. Using tabs to organize your content helps keep your pages clean and easy to navigate.
- [How to add a table in the editor](https://help.studio.design/en/articles/9234052-how-to-add-a-table-in-the-editor.md): Studio.Design doesn't currently support adding tables directly in the editor. As a workaround, try creating a table-like layout by combining lists and boxes.
- [How to add a download button](https://help.studio.design/en/articles/3640783-how-to-add-a-download-button.md): While Studio.Design doesn't have a built-in download button feature, you can upload a PDF file and link to it. Visitors can then save the PDF from the destination page.
- [How to add affiliate tags](https://help.studio.design/en/articles/8824984-how-to-add-affiliate-tags.md): Studio.Design doesn't offer a dedicated feature for adding affiliate tags. You can use the Custom Code feature to add them to your site.
- [What to do if you accidentally delete a page or part of a design in the editor](https://help.studio.design/en/articles/10473123-what-to-do-if-you-accidentally-delete-a-page-or-part-of-a-design-in-the-editor.md): If you accidentally delete a page or design data in your project, you may be able to recover it using the Undo button or by restoring a previous version. Here's how.
- [Can't select a box in the editor](https://help.studio.design/en/articles/4185027-can-t-select-a-box-in-the-editor.md): Here's how to fix it when you can't select a box in the Studio.Design editor. Learn how to select and edit boxes inside components or lists using direct selection and the Layers panel.
- [Can't open the left panel, or the right panel shows limited settings](https://help.studio.design/en/articles/6717538-can-t-open-the-left-panel-or-the-right-panel-shows-limited-settings.md): If you can't select the Add or Layers panel, it's usually because Content Editing Mode is turned on. Click the pencil icon in the bottom-left corner of the editor to switch modes and fix the issue.
- [What to do when you see "Your design data is getting large"](https://help.studio.design/en/articles/6969479-what-to-do-when-you-see-your-design-data-is-getting-large.md): Learn what design data capacity means and what to do when you're approaching the limit.
- [Box nesting depth limit](https://help.studio.design/en/articles/2680848-box-nesting-depth-limit.md): When building complex designs with nested boxes in Studio.Design, we recommend keeping the structure within 11 levels to avoid unintended data issues. This article also explains how to resolve erro...
- [Fixed header overlapping with your design](https://help.studio.design/en/articles/6211334-fixed-header-overlapping-with-your-design.md): Learn why a fixed-position header may overlap with headings or images on your page, and how to fix it by adding spacing equal to the header's height.
- [What to do when there's extra space around an embedded background video](https://help.studio.design/en/articles/5735974-what-to-do-when-there-s-extra-space-around-an-embedded-background-video.md): You can adjust the spacing by resizing the Embed box. Keep in mind that some extra space may still appear on screens wider than a certain size, even after adjusting.
- [What to do if copy and paste isn't working](https://help.studio.design/en/articles/4334472-what-to-do-if-copy-and-paste-isn-t-working.md): There can be several reasons why copy and paste or keyboard shortcuts aren't working in Studio.Design. This article walks you through three ways to narrow down the cause.
- [What to do when a blue overlay appears on an image and you can't add text on top](https://help.studio.design/en/articles/4060898-what-to-do-when-a-blue-overlay-appears-on-an-image-and-you-can-t-add-text-on-top.md): Make sure the image is set to Box mode and that its size is larger than its child elements.
- [Fixing a Toggle box menu that shifts up or down when opening](https://help.studio.design/en/articles/8855480-fixing-a-toggle-box-menu-that-shifts-up-or-down-when-opening.md): Learn how to fix a dropdown menu built with Studio.Design's Toggle box when it shifts position as it expands.
- [Changing a box's image, text, or link also changed the other boxes](https://help.studio.design/en/articles/5182035-changing-a-box-s-image-text-or-link-also-changed-the-other-boxes.md): Learn why editing a box's image, text, or link can also change other boxes in the same row, how to undo it, and the right way to edit them going forward.
- [Site unexpectedly shifts left or shows extra space on the right](https://help.studio.design/en/articles/9719956-site-unexpectedly-shifts-left-or-shows-extra-space-on-the-right.md): This can be caused by a browser extension. Disabling the extension may resolve the issue.
- [Scroll bar not showing](https://help.studio.design/en/articles/4184997-scroll-bar-not-showing.md)
- [Vertical text appears broken in preview or on your live site](https://help.studio.design/en/articles/11008320-vertical-text-appears-broken-in-preview-or-on-your-live-site.md): Learn what to do when vertical text doesn't display correctly in the live preview or on your published site.

### Box Data Settings \(ID, Tags, Link Configuration\)

- [Setting an ID for a box（Anchor link）](https://help.studio.design/en/articles/4064980-setting-an-id-for-a-box-anchor-link.md): When you set an ID for a box, you can use that box as the destination for an anchor link.
- [HTML tag types and how to set them](https://help.studio.design/en/articles/4064982-html-tag-types-and-how-to-set-them.md): Learn about the HTML tags you can apply to boxes in Studio.Design, along with step-by-step instructions for setting them.
- [HTML heading tags \<h1\> – \<h6\>](https://help.studio.design/en/articles/6400176-html-heading-tags-h1-h6.md): In Studio.Design, you can set HTML heading tags from \<h1\> to \<h6\>. Using heading tags helps you build well-structured pages that are optimized for SEO.
- [Common Structured Data Errors and How to Fix Them](https://help.studio.design/en/articles/9556108-common-structured-data-errors-and-how-to-fix-them.md): Learn how to test your structured data, along with common error causes and solutions.
- [How to set up links](https://help.studio.design/en/articles/4055397-how-to-set-up-links.md): Learn how to set up links in Studio.Design, including in-page links, links to external sites, and settings for opening and closing modals.
- [Link to a PDF file](https://help.studio.design/en/articles/12741796-link-to-a-pdf-file.md): PDF files uploaded to the Studio.Design editor can't be displayed directly on a page, but you can link to them. Use PDF links for things like company brochures, handouts, and more.
- [Set up a click-to-call link](https://help.studio.design/en/articles/5384174-set-up-a-click-to-call-link.md): Learn how to set up a link that lets visitors call you with a click or tap. We'll also show you how to enable the call link only on mobile, so it won't appear on desktop or tablet views.
- [Add a Facebook Share Button](https://help.studio.design/en/articles/4292814-add-a-facebook-share-button.md): Learn how to add a button and set up a Facebook share link for it.
- [Set up a mailto: link to launch the user's email app](https://help.studio.design/en/articles/1921382-set-up-a-mailto-link-to-launch-the-user-s-email-app.md): Learn how to set up mailto: links in Studio.Design. We'll also cover customization options like adding CC and BCC recipients, pre-filling the subject and body, and tips for reducing spam.
- [Add an X \(Twitter\) share button](https://help.studio.design/en/articles/2677605-add-an-x-twitter-share-button.md): Learn how to add a button that encourages sharing on X. With Studio.Design, you can set up a share button by simply specifying a URL. We also cover the available options and include sample code.
- [Why links don't navigate to the correct page — causes and fixes](https://help.studio.design/en/articles/9715664-why-links-don-t-navigate-to-the-correct-page-causes-and-fixes.md): Learn what to check and how to fix it when a link you've set up doesn't navigate to the expected page in Studio.Design.

### Various Boxes

- [Sections and Section Parts](https://help.studio.design/en/articles/7220109-sections-and-section-parts.md): Learn about the different types of sections you can use to organize content and build layouts on your page, plus how to add them. Pre-set responsive section parts make placement easy—just note that...
- [Image Box](https://help.studio.design/en/articles/4064885-image-box.md): The image box is a box element used to add images to your page. Studio.Design supports images uploaded to Studio.Design, free images from Unsplash, and URLs of images hosted on external servers.
- [Image Box: Box mode vs. Img mode](https://help.studio.design/en/articles/4064875-image-box-box-mode-vs-img-mode.md): Learn the differences between Box mode and Img mode in Studio.Design's image box. We'll cover what each mode does, when to use them, and what to watch out for when switching between them.
- [Image Box: Apply Background Effects to Images](https://help.studio.design/en/articles/1997379-image-box-apply-background-effects-to-images.md): Learn how to edit images directly in the Studio.Design editor. This guide covers filters like brightness, contrast, and monochrome, as well as how to adjust background image size, repeat, and posit...
- [Image Box: Fixing aspect ratio issues in Img mode](https://help.studio.design/en/articles/9267520-image-box-fixing-aspect-ratio-issues-in-img-mode.md): In Img mode, image boxes adjust flexibly while keeping their aspect ratio. However, setting both height and width to fixed values like px can cause the aspect ratio to break.
- [Image Box: Using Free Images](https://help.studio.design/en/articles/1997496-image-box-using-free-images.md): In Studio.Design, you can use free, high-quality photos from Unsplash and AI-generated, high-resolution images from Studio.Stock. Search for images right in the design editor and add your selection...
- [Image Box: Lock the image aspect ratio](https://help.studio.design/en/articles/2638959-image-box-lock-the-image-aspect-ratio.md): To keep an image's aspect ratio in Studio.Design, switch the toggle in the top-right of the image box to Img. In Img mode, your image displays while preserving its original aspect ratio.
- [Image Box: Crop Images Visually by Adjusting Placement](https://help.studio.design/en/articles/3655938-image-box-crop-images-visually-by-adjusting-placement.md): Learn how to adjust an image's position within its box to create a visual cropping effect.
- [Image Box: Fix Background Image in Place](https://help.studio.design/en/articles/3022096-image-box-fix-background-image-in-place.md): Fix a background image so it stays in place while users scroll. This article walks you through the steps to set up a fixed background image.
- [Video Box](https://help.studio.design/en/articles/11461485-video-box.md): The Video Box lets you place MP4 or WebM videos directly on your page. Like images and text, you can lay them out freely—perfect for adding motion and visual impact that only video can bring to you...
- [Text Box](https://help.studio.design/en/articles/4064889-text-box.md): Learn how to add and edit text boxes to display written content on your web page.
- [Rich Text Box](https://help.studio.design/en/articles/4064911-rich-text-box.md): With the rich text box, you can apply styles to just part of your text or write using Markdown. This article covers how to use it for long-form content and Studio CMS body text, plus tips for worki...
- [Edit text alignment and design](https://help.studio.design/en/articles/4064906-edit-text-alignment-and-design.md): Learn how to adjust text size, weight, line height, alignment, and more. You can make these changes from the Text tab in the right panel.
- [Change Text Orientation \(Horizontal or Vertical\)](https://help.studio.design/en/articles/2925387-change-text-orientation-horizontal-or-vertical.md): Learn how to change text orientation between horizontal and vertical in Studio.Design. This article explains the differences between each option and the conditions for using this feature.
- [Change Text Color or Background Color for Part of Your Text](https://help.studio.design/en/articles/3007552-change-text-color-or-background-color-for-part-of-your-text.md): Learn how to use the rich text box to change the color or background color of specific parts of your text in Studio.Design.
- [Customizing or nesting bulleted lists in Rich Text](https://help.studio.design/en/articles/9244585-customizing-or-nesting-bulleted-lists-in-rich-text.md): The bulleted list feature in Studio.Design's Rich Text only supports "1." and "•" formats. If you'd like to customize the numbering or create nested lists, please format it manually as text instead.
- [Set up text filters for properties](https://help.studio.design/en/articles/6148984-set-up-text-filters-for-properties.md): When you link a CMS property or a property from a list or component to a text box, you can apply text filters to customize how the content appears.
- [Icon Box](https://help.studio.design/en/articles/4064926-icon-box.md): Studio.Design supports two icon libraries: Font Awesome and Material Symbols. With Material Symbols, you can adjust line weight, style, and fill to match your design.
- [About the Font Awesome Icon Version Update](https://help.studio.design/en/articles/8529288-about-the-font-awesome-icon-version-update.md): Icons placed before November 2, 2023 may become unavailable once you change them.
- [Embed Box](https://help.studio.design/en/articles/4064934-embed-box.md): With the Embed box in Studio.Design, you can add HTML, CSS, and JavaScript code or embed external services on your page. This article covers how to add the box, the different code types, editing op...
- [Embed an Instagram post](https://help.studio.design/en/articles/3305539-embed-an-instagram-post.md): Learn how to use the Instagram embed box to add individual posts from your feed to your website.
- [Embed an Individual X \(Twitter\) Post](https://help.studio.design/en/articles/4675994-embed-an-individual-x-twitter-post.md): Learn how to embed a specific post on your website using the X \(Twitter\) embed box.
- [Embed a YouTube Video](https://help.studio.design/en/articles/4064947-embed-a-youtube-video.md): Learn how to embed and display YouTube videos on your site using the embed box. You can also customize options like autoplay and loop playback.
- [Embed a TikTok video](https://help.studio.design/en/articles/6851560-embed-a-tiktok-video.md): You can embed TikTok videos and feeds into your site using the embed box.
- [Embed Facebook content](https://help.studio.design/en/articles/4675992-embed-facebook-content.md): Learn how to embed Facebook content like the Like button or posts into your page.
- [Embed a Google Calendar](https://help.studio.design/en/articles/2753675-embed-a-google-calendar.md): Learn how to embed a Google Calendar into your web page using the Embed box. Adding a Google Calendar to your site lets you share your schedule with visitors.
- [Embed a Google Form](https://help.studio.design/en/articles/2834094-embed-a-google-form.md): Learn how to embed a Google Form into your webpage using the Embed box. This is helpful when you need advanced features like multiple-choice fields that aren't available in Studio.Design's built-in...
- [Embed Google Maps](https://help.studio.design/en/articles/1888376-embed-google-maps.md): Learn how to embed Google Maps into your Studio.Design site and how to update the location shown on an embedded map.
- [How to create a LINE friend registration button](https://help.studio.design/en/articles/6171925-how-to-create-a-line-friend-registration-button.md): You can add a button to your Studio.Design site that takes visitors directly to the LINE friend registration screen.
- [Embed a Vimeo Video](https://help.studio.design/en/articles/4064951-embed-a-vimeo-video.md): Learn how to embed videos from Vimeo into Studio.Design. Just grab the embed code and paste it in—it's that easy. We'll also show you how to enable autoplay and looping.
- [Embedding an iframe](https://help.studio.design/en/articles/9202327-embedding-an-iframe.md): With the Embed box, you can easily embed external services using an iframe.
- [Embedding Lottie animations](https://help.studio.design/en/articles/8637241-embedding-lottie-animations.md): Use the Lottie embed box to add Lottie animations to your Studio.Design site. Choose from 6 playback options, including scroll-triggered animations, and customize them to fit your needs.
- [Embedding formrun](https://help.studio.design/en/articles/4675986-embedding-formrun.md): Learn how to embed a form created with formrun—a service for form creation and customer management—into your Studio.Design site.
- [Embedding Firework videos](https://help.studio.design/en/articles/5139103-embedding-firework-videos.md): Learn how to embed Firework vertical videos into Studio.Design. Just grab the embed code and paste it in — it's that simple.
- [Embed a HubSpot Form](https://help.studio.design/en/articles/5688648-embed-a-hubspot-form.md): Learn how to embed a HubSpot Form into your Studio.Design site.
- [HTML in Studio.Design](https://help.studio.design/en/articles/8864939-html-in-studio-design.md): With Studio.Design, you can add HTML and scripts using the Embed box or the custom code feature. However, you can't directly edit a page's HTML or export the code.
- [Set an Embedded Video as a Background](https://help.studio.design/en/articles/3063733-set-an-embedded-video-as-a-background.md): Learn how to embed YouTube or Vimeo videos on your web page and use them as a background or main visual.
- [RSS Integration \(RSS Lists\)](https://help.studio.design/en/articles/3205203-rss-integration-rss-lists.md): Automatically display RSS article lists from external services like note on your Studio.Design site. This article covers how to add an RSS URL, place a list, connect data, and update content.
- [Display the latest note articles in a list using RSS](https://help.studio.design/en/articles/4065011-display-the-latest-note-articles-in-a-list-using-rss.md): Learn how to use Studio.Design's RSS feature to display the latest articles from note on your site.
- [What to do if RSS content doesn't update in the editor or live preview](https://help.studio.design/en/articles/4061886-what-to-do-if-rss-content-doesn-t-update-in-the-editor-or-live-preview.md): Learn why RSS feeds placed on your page may not refresh in the editor or live preview, and how to manually update them.
- [Responsive settings to lock the aspect ratio of an Embed box](https://help.studio.design/en/articles/4767780-responsive-settings-to-lock-the-aspect-ratio-of-an-embed-box.md): Learn how to set up an Embed box so it keeps a fixed aspect ratio as it resizes. This article walks you through an example: keeping an embedded YouTube video at a 16:9 ratio using responsive settin...
- [Lists](https://help.studio.design/en/articles/4129102-lists.md): Lists let you manage boxes with the same layout together. Connect one to Studio CMS to turn it into a dynamic list that updates automatically. Learn the basic structure, how to create and remove li...
- [Setting display conditions for lists](https://help.studio.design/en/articles/16795652-setting-display-conditions-for-lists.md): Display conditions for static lists let you show or hide elements for each item, based on whether a list property has a value. This article covers the property types available and how to set them up.
- [Lists: List Properties](https://help.studio.design/en/articles/16550809-lists-list-properties.md): By default, a list works as a static list, and the data it connects to is created and managed in the Property Table within the Design Editor. Here's a look at the types of properties available and ...
- [Dynamic Lists](https://help.studio.design/en/articles/4055772-dynamic-lists.md): Dynamic Lists let you connect data from Studio CMS or external sources like APIs and RSS feeds to the Design Editor, so list content updates automatically. Here's how it works and how to connect yo...
- [Carousel](https://help.studio.design/en/articles/13427668-carousel.md): A carousel lets you display multiple pieces of content one after another in a sliding format. Here's an overview of carousels, including their basic structure, autoplay, and how to set the number o...
- [How to tell list types apart](https://help.studio.design/en/articles/15653024-how-to-tell-list-types-apart.md): Lists come in two types: static lists \(regular lists\) and dynamic lists. The way you edit content inside each list depends on its type. To check a list's type, select the list and look at the Data ...
- [Linking properties to boxes in a list or carousel](https://help.studio.design/en/articles/16294890-linking-properties-to-boxes-in-a-list-or-carousel.md): Learn how to link properties created and managed in the Design Editor to box elements inside a standard list or carousel. Linking properties to a dynamic list or carousel is covered in a separate a...
- [Lists: Set a different image, text, or link for each item](https://help.studio.design/en/articles/9018252-lists-set-a-different-image-text-or-link-for-each-item.md): Learn how to set a different image, text, or link for each item in a list \(standard list\), and how to edit those settings later.
- [Lists: Show or hide the container box for each item](https://help.studio.design/en/articles/9744271-lists-show-or-hide-the-container-box-for-each-item.md): In Studio.Design lists, you can customize the design of each item individually, including colors and button visibility. This article shows how to use boolean properties to show or hide elements for...
- [List: Change colors for each item](https://help.studio.design/en/articles/8849973-list-change-colors-for-each-item.md): Learn how to use the color property to manage box colors individually for each item in a list. This is useful when you want to assign different colors by category.
- [How to arrange list items vertically or horizontally](https://help.studio.design/en/articles/9183187-how-to-arrange-list-items-vertically-or-horizontally.md): Learn how to switch list items between vertical and horizontal layouts in the Studio.Design editor.
- [Auto-play a carousel](https://help.studio.design/en/articles/6902846-auto-play-a-carousel.md): In Studio.Design, you can set carousels to play automatically. This article walks you through how to set up auto-play.
- [Toggle Box](https://help.studio.design/en/articles/8056180-toggle-box.md): Learn about toggle boxes that open and close on click or hover. This article covers their structure, how to add them, configuration options, opening direction, and animation settings.
- [LoopBox: Set Up Infinite Loop \(Marquee\) Effects](https://help.studio.design/en/articles/13713839-loopbox-set-up-infinite-loop-marquee-effects.md): LoopBox is a container that automatically scrolls its child elements in an infinite loop. Use it to create dynamic content like banners, logo marquees, and scrolling text.

### CMS

- [What is Studio CMS?](https://help.studio.design/en/articles/4055822-what-is-studio-cms.md): Studio CMS is the content management feature built into Studio.Design. Use it to keep pages like news, blogs, and job listings up to date with a consistent design. Learn how the CMS dashboard and d...
- [Build content with Studio CMS](https://help.studio.design/en/articles/4065370-build-content-with-studio-cms.md): Learn how to build article content in Studio CMS. We'll walk you through setting up models, items, and properties, creating dynamic and list pages, and publishing your site — with related articles ...
- [Import CMS data from WordPress to Studio.Design](https://help.studio.design/en/articles/6401262-import-cms-data-from-wordpress-to-studio-design.md): You can import posts, categories, and other content into Studio.Design's CMS by using an XML file exported from WordPress.
- [CMS Dashboard](https://help.studio.design/en/articles/5726398-cms-dashboard.md): Learn how to use the CMS Dashboard in Studio.Design to create, edit, and manage your CMS content data.
- [CMS Models](https://help.studio.design/en/articles/4055811-cms-models.md): CMS models are the framework for managing content \(CMS items\) in Studio CMS. Learn about model types and how to create, edit, and delete them.
- [CMS Items](https://help.studio.design/en/articles/4055821-cms-items.md): CMS items are individual content entries that belong to a model. Learn how to create, edit, and delete CMS items.
- [CMS properties](https://help.studio.design/en/articles/4055813-cms-properties.md): An overview of CMS properties available in Studio.Design CMS. Learn about property types, required properties, how to add, edit, and delete them, and the features of each property type.
- [CMS Properties: Rich Text \(Body\)](https://help.studio.design/en/articles/14654498-cms-properties-rich-text-body.md): Learn how to edit the Rich Text \(Body\) property in CMS items using the Article type model in Studio.Design CMS. Covers formatting, adding images, videos, and PDFs, media settings, Markdown, comment...
- [CMS Property: Slug](https://help.studio.design/en/articles/4217501-cms-property-slug.md): A Slug is a unique ID for each CMS item that becomes the trailing part of the page URL on your published site.
- [CMS Properties: Status and Publish Date](https://help.studio.design/en/articles/6319932-cms-properties-status-and-publish-date.md): Manage the publish state and publish date of CMS items using the Status and Publish Date properties. Learn about each status type and how to schedule publishing or adjust display order.
- [CMS Collections](https://help.studio.design/en/articles/4065333-cms-collections.md): CMS Collections let you hand-pick items from a specific CMS model and curate what's displayed. Use them for featured articles, recommended lists, and more.
- [CMS Collaborative Editing](https://help.studio.design/en/articles/5999236-cms-collaborative-editing.md): Learn about collaborative editing and the article comment feature in Studio.Design CMS.
- [RSS Feed Settings for CMS Content \(Article-Type Models\)](https://help.studio.design/en/articles/6631681-rss-feed-settings-for-cms-content-article-type-models.md): Learn how to set up RSS feeds for news, blog posts, and other articles managed and published in Studio.Design.
- [Check who last updated a CMS item and when](https://help.studio.design/en/articles/10263573-check-who-last-updated-a-cms-item-and-when.md): You can see who last updated a CMS item and when on both the item detail and item list screens in the CMS dashboard — helpful for tracking edits when multiple members manage your CMS.
- [Creating CMS Article Items in the CMS Dashboard](https://help.studio.design/en/articles/13781496-creating-cms-article-items-in-the-cms-dashboard.md): In Studio.Design CMS, the article items you create in the CMS Dashboard serve as the source data for article pages built with dynamic pages. This article walks you through how to create an article ...
- [Add a Table of Contents to CMS Article Items](https://help.studio.design/en/articles/6579001-add-a-table-of-contents-to-cms-article-items.md): Learn how to add a Table of Contents to your CMS article items in Studio.Design. The table is automatically generated from heading tags in your content, and you can customize its style in the desig...
- [Adding videos to CMS article items](https://help.studio.design/en/articles/5525118-adding-videos-to-cms-article-items.md): You can embed videos in the body of an article item—either by uploading them through the Assets panel or by linking to external services like YouTube or Vimeo. Here's how to embed videos using each...
- [Adding nofollow rel attribute to the links in CMS posts and richtext box](https://help.studio.design/en/articles/6525018-adding-nofollow-rel-attribute-to-the-links-in-cms-posts-and-richtext-box.md)
- [Change the date format for Published or Last Updated properties in CMS articles](https://help.studio.design/en/articles/5835043-change-the-date-format-for-published-or-last-updated-properties-in-cms-articles.md): Learn how to customize how the Published date and Last Updated properties appear on your CMS article items.
- [Adding tables to a rich text property \(body\) in Studio.Design CMS](https://help.studio.design/en/articles/6700576-adding-tables-to-a-rich-text-property-body-in-studio-design-cms.md): Learn how to insert a table into the rich text property \(body\) of an article item in Studio.Design CMS.
- [Adjusting the width of tables added inside a Rich Text property \(body\) in Studio CMS](https://help.studio.design/en/articles/9271569-adjusting-the-width-of-tables-added-inside-a-rich-text-property-body-in-studio-cms.md): Learn how to adjust the width of tables added inside a Rich Text property \(body\) for article items in Studio CMS. Note that setting individual column widths isn't supported.
- [CMS List](https://help.studio.design/en/articles/13228243-cms-list.md): A CMS List connects content you manage in Studio CMS to a dynamic list so it displays automatically. This article covers what CMS Lists are, how to create one, and how to adjust display settings an...
- [CMS List: Edit image, text, link, and other properties](https://help.studio.design/en/articles/5054353-cms-list-edit-image-text-link-and-other-properties.md): Learn how to edit the properties of an existing CMS list, mainly from the CMS dashboard. The same steps apply when editing CMS lists included in templates or list parts you've added from Studio.Store.
- [Link a CMS list to your CMS article pages](https://help.studio.design/en/articles/13856944-link-a-cms-list-to-your-cms-article-pages.md): Learn how to create links from a CMS list to your CMS article pages in Studio.Design, making it easier for visitors to explore more content on your site.
- [Build a dynamic carousel with Studio CMS](https://help.studio.design/en/articles/4129089-build-a-dynamic-carousel-with-studio-cms.md): When you connect Studio CMS or an external data source pulled in through an API or RSS feed, your carousel becomes dynamic. Here's how to link Studio CMS properties and what you can do with them.
- [Filter items in a CMS list](https://help.studio.design/en/articles/12093392-filter-items-in-a-cms-list.md): You can narrow down which items appear in a CMS list by setting filter conditions based on CMS properties or search terms. Learn which properties you can use for filtering and how to set them up.
- [CMS List Filters: Fixed Filters](https://help.studio.design/en/articles/14698742-cms-list-filters-fixed-filters.md): Learn how to use fixed filters to narrow down which CMS items appear in a CMS list based on Studio.Design CMS properties. This article covers the overview, setup steps, and things to keep in mind.
- [CMS List Filters: Dynamic Filter](https://help.studio.design/en/articles/13594219-cms-list-filters-dynamic-filter.md): The Dynamic Filter automatically updates the items shown based on the current page's content. Place a CMS List inside a dynamic page, then set a reference property \(single select\) that points to a ...
- [CMS list filters: URL query filters](https://help.studio.design/en/articles/13601425-cms-list-filters-url-query-filters.md): Add a URL query filter to your site to narrow down the items shown in a CMS list by category or other criteria. Studio.Design links query parameters in the page URL to your CMS list filter, so the ...
- [Dynamic Pages: Create a CMS article page to display Studio CMS article items](https://help.studio.design/en/articles/9506045-dynamic-pages-create-a-cms-article-page-to-display-studio-cms-article-items.md): Learn how to create a CMS article page that dynamically displays the title, body, thumbnail, and other properties from article items registered in Studio.Design CMS.
- [Linking Box Elements to CMS Properties on Dynamic Pages](https://help.studio.design/en/articles/13767977-linking-box-elements-to-cms-properties-on-dynamic-pages.md): Learn how to link box elements in CMS article pages on dynamic pages to CMS properties set in your CMS dashboard. This guide covers linking properties for image boxes, text boxes, rich text boxes, ...
- [Connect properties to boxes in dynamic lists and carousels](https://help.studio.design/en/articles/15370824-connect-properties-to-boxes-in-dynamic-lists-and-carousels.md): Learn how to connect properties managed in Studio CMS and other sources to box elements inside lists and carousels.
- [Using Studio CMS properties: Add categories and tags to article items](https://help.studio.design/en/articles/4771172-using-studio-cms-properties-add-categories-and-tags-to-article-items.md): Learn how to assign properties to article items in Studio.Design CMS to organize them by category or tag. With reference properties, you can build dynamically filtered list pages and related articl...
- [Using Studio CMS properties: Display categories and tags on CMS article pages](https://help.studio.design/en/articles/13760178-using-studio-cms-properties-display-categories-and-tags-on-cms-article-pages.md): Learn how to display categories and tags on detail pages for blog posts or news articles created with Studio.Design CMS. This guide covers setting properties on items, configuring display in the de...
- [Studio CMS property example: Create a category-based article list page](https://help.studio.design/en/articles/4167878-studio-cms-property-example-create-a-category-based-article-list-page.md): Learn how to use Studio.Design CMS with the Dynamic filter feature to automatically sort and display articles by category on a list page.
- [Studio CMS property example: Add a related articles list to a CMS article page](https://help.studio.design/en/articles/6846707-studio-cms-property-example-add-a-related-articles-list-to-a-cms-article-page.md): To show related articles on a CMS article page, set up your content structure and properties in the CMS dashboard, then apply filter conditions to an article list. Studio.Design doesn't have a buil...
- [Studio CMS property example: Displaying writer info on CMS articles](https://help.studio.design/en/articles/9053110-studio-cms-property-example-displaying-writer-info-on-cms-articles.md): Learn how to show writer details—like name and profile photo—on articles created with Studio CMS. We'll cover how models and items work in Studio CMS, plus how to set up the display in the design e...
- [Set meta info \(title, description, and social cover\) for each CMS item on dynamic pages](https://help.studio.design/en/articles/4526321-set-meta-info-title-description-and-social-cover-for-each-cms-item-on-dynamic-pages.md): Learn how to set the title, description, and social cover image shown in search results and social media shares for each CMS item on dynamic pages built with Studio.Design CMS.
- [Setting display conditions for dynamic lists and pages](https://help.studio.design/en/articles/4538892-setting-display-conditions-for-dynamic-lists-and-pages.md): Display conditions let you show items in dynamic lists or pages only when certain criteria are met. You can show or hide elements based on the state of data from Studio.Design CMS or the Data Conne...
- [Studio CMS display conditions example: Show different social icons for each writer](https://help.studio.design/en/articles/9202769-studio-cms-display-conditions-example-show-different-social-icons-for-each-writer.md): Learn how to display different social media icons and links for each writer using Studio.Design's CMS. This guide walks you through setting up the CMS model, adding social icons, and configuring di...
- [Studio CMS conditional display example: Show a "NEW" badge on CMS articles for a set time period](https://help.studio.design/en/articles/10308375-studio-cms-conditional-display-example-show-a-new-badge-on-cms-articles-for-a-set-time-period.md): By combining the publish date property with conditional display settings, you can show a "NEW" badge \(or similar element\) on article items created in Studio CMS for a specific period of time.
- [Studio CMS Display Conditions Example: Show a "NEW" Badge on Specific CMS Items Only](https://help.studio.design/en/articles/6815737-studio-cms-display-conditions-example-show-a-new-badge-on-specific-cms-items-only.md): You can show specific elements on certain CMS items based on a boolean value. This article walks you through how to display a "NEW" badge only on new product CMS items.
- [Studio CMS Display Conditions Example: Showing Images or Text Based on Image Property Status](https://help.studio.design/en/articles/9206913-studio-cms-display-conditions-example-showing-images-or-text-based-on-image-property-status.md): Learn how to use display conditions in Studio.Design to switch between showing an image or text in dynamic elements, based on whether an image is set in your CMS model's image property for each item.
- [CMS items aren't showing on your published site](https://help.studio.design/en/articles/6157854-cms-items-aren-t-showing-on-your-published-site.md): If your CMS content \(articles, tags, categories, carousels, etc.\) isn't appearing on your published Studio.Design site, here's a checklist to help you troubleshoot—focusing on common causes like pu...
- [Sorting and displaying Studio CMS items in a custom order](https://help.studio.design/en/articles/6721694-sorting-and-displaying-studio-cms-items-in-a-custom-order.md): You can change the display order of a CMS list using sort settings or collections. This article explains the basic sort options and alternative methods for different use cases.
- [How to pin specific CMS items to the top of a CMS list](https://help.studio.design/en/articles/6227845-how-to-pin-specific-cms-items-to-the-top-of-a-cms-list.md): Studio.Design CMS doesn't have a built-in pin feature for CMS lists, but you can highlight specific items at the top of your article list by combining a dedicated CMS model or collection with a reg...
- [Set a unique external link for each item in a CMS list](https://help.studio.design/en/articles/9025757-set-a-unique-external-link-for-each-item-in-a-cms-list.md): Learn how to assign a different external URL to each item in a Studio.Design CMS list. Instead of using the standard link settings, you'll use a text property to set it up.
- [Studio.Design CMS articles not displaying correctly on your site](https://help.studio.design/en/articles/5670677-studio-design-cms-articles-not-displaying-correctly-on-your-site.md): Possible reasons why your Studio.Design CMS article items may not appear correctly on your published site.
- [CMS item content not showing on a newly created dynamic page](https://help.studio.design/en/articles/5821090-cms-item-content-not-showing-on-a-newly-created-dynamic-page.md): If the body content of your CMS article isn't appearing on a new dynamic page, check whether a rich text box linked to the article body property has been added to the page. It isn't included by def...
- [How to set up redirects for CMS articles](https://help.studio.design/en/articles/9309873-how-to-set-up-redirects-for-cms-articles.md): Currently, Studio.Design doesn't support redirecting to dynamic pages like CMS articles when using the redirect page feature.
- [How to change colors, sizes, spacing, and fonts in Studio.Design CMS rich text properties \(body\)](https://help.studio.design/en/articles/15501217-how-to-change-colors-sizes-spacing-and-fonts-in-studio-design-cms-rich-text-properties-body.md): To style text in your CMS article body \(rich text property\)—including color, size, spacing, and font—use the Design Editor, not the CMS Dashboard. Here's how to tell the two apart and adjust your s...

### Responsive

- [Set up responsive design](https://help.studio.design/en/articles/4062516-set-up-responsive-design.md): Learn how to set up responsive design on your Studio.Design site, along with helpful tips. Create designs that adapt to different device sizes and deliver the best experience to your users.
- [How to set breakpoints](https://help.studio.design/en/articles/4954050-how-to-set-breakpoints.md): To create responsive designs that adapt to different screen sizes, you can set the points where your layout switches. In addition to the default Desktop, Tablet, and Mobile sizes, you can also add ...
- [Show or hide boxes by breakpoint](https://help.studio.design/en/articles/2303942-show-or-hide-boxes-by-breakpoint.md): Learn how to show or hide content based on screen width \(breakpoint\). This is useful for creating responsive designs in Studio.Design.
- [Display different images on desktop, tablet, and mobile](https://help.studio.design/en/articles/5489667-display-different-images-on-desktop-tablet-and-mobile.md): To show different images on desktop, tablet, and mobile, use the box display settings to show or hide image boxes for each breakpoint.
- [Change the screen width in the Design Editor](https://help.studio.design/en/articles/1892041-change-the-screen-width-in-the-design-editor.md): Switch to any screen size and preview your responsive design using two methods: dragging the screen edge or using the toolbar.
- [How to create a hamburger menu](https://help.studio.design/en/articles/2329054-how-to-create-a-hamburger-menu.md): Learn how to display a navigation menu on desktop while letting mobile and tablet users show or hide it by tapping a hamburger icon.
- [Fixing elements that get cut off, overflow, or leave extra space on responsive views](https://help.studio.design/en/articles/5168438-fixing-elements-that-get-cut-off-overflow-or-leave-extra-space-on-responsive-views.md): If a parent box has a fixed height \(px\), try changing the unit to \[auto\]. This can help resolve elements getting cut off, overflowing, or creating unwanted spacing when your design adapts to differ...
- [Elements visible on desktop don't appear on mobile](https://help.studio.design/en/articles/9271318-elements-visible-on-desktop-don-t-appear-on-mobile.md): If an element shows up on desktop but disappears on tablet or mobile, the box's display settings for that screen size may have been changed unintentionally. This article covers the key things to ch...
- [When mobile design changes also affect the desktop layout](https://help.studio.design/en/articles/3007535-when-mobile-design-changes-also-affect-the-desktop-layout.md): If your mobile design changes are also showing up on desktop, you may have edited a setting that can't be customized per breakpoint. To change images or text by breakpoint, use the box show/hide se...
- [When your published site or preview looks different from the Design Editor on mobile](https://help.studio.design/en/articles/8910891-when-your-published-site-or-preview-looks-different-from-the-design-editor-on-mobile.md): Learn the main reasons why a layout that looks fine at the mobile breakpoint in the Design Editor can break when viewed on a phone in live preview or on your published site, plus how to fix common ...

### Form

- [Adding a form: How to place a form and set up general settings](https://help.studio.design/en/articles/2281017-adding-a-form-how-to-place-a-form-and-set-up-general-settings.md): In Studio.Design, you can add a form to your site by dragging and dropping a form box. Once added, you can customize the design in the editor and combine multiple form parts to fit your needs.
- [Form settings: Renaming a form](https://help.studio.design/en/articles/4541698-form-settings-renaming-a-form.md): Learn how to rename a form and which symbols aren't allowed in form names. Once you rename a form, new response data is tracked separately from the data collected under the previous name.
- [Form settings: Delete a form](https://help.studio.design/en/articles/13782135-form-settings-delete-a-form.md): To fully delete a form, remove it from the editor and also delete it from the form dashboard. This article also explains the difference between resetting and deleting a form.
- [Form Settings: Set Up a Thank-You Page](https://help.studio.design/en/articles/4096792-form-settings-set-up-a-thank-you-page.md): You can set up a thank-you page that appears after a form is submitted. This guide walks you through creating the destination page and configuring it to display after form submission.
- [Form Settings: How to Customize the Submission Success Message](https://help.studio.design/en/articles/9240187-form-settings-how-to-customize-the-submission-success-message.md): Learn how to customize the default "Form submitted successfully" message that appears after a user submits a form using Studio.Design's built-in form feature.
- [Form settings: Auto-reply emails for respondents](https://help.studio.design/en/articles/4617647-form-settings-auto-reply-emails-for-respondents.md): Studio.Design doesn't include a built-in auto-reply email feature, but you can set one up using form integrations and external tools. Here's how to set up auto-reply emails on your Studio.Design si...
- [Form Fields: Add Fields to Your Form \(Form Parts\)](https://help.studio.design/en/articles/4064955-form-fields-add-fields-to-your-form-form-parts.md): Learn how to add form parts to your Studio.Design form, plus how to customize details like placeholders and required fields, and edit each part's design.
- [Form fields: Adding a calendar to a date input](https://help.studio.design/en/articles/10090238-form-fields-adding-a-calendar-to-a-date-input.md): Studio.Design forms don't currently include a built-in date picker. However, depending on the third-party service you use, you can embed an external form with a calendar feature directly into your ...
- [Form Fields: Add a File Upload Option](https://help.studio.design/en/articles/4535352-form-fields-add-a-file-upload-option.md): Learn how to add an upload field to your Studio.Design form so respondents can attach files. We'll cover how to add the field, supported file formats, and size limits.
- [Form fields: Setting up conditional logic for choices](https://help.studio.design/en/articles/9303976-form-fields-setting-up-conditional-logic-for-choices.md): Studio.Design's built-in form feature doesn't support conditional logic \(showing different questions based on previous answers\). If you need conditional logic, we recommend using an external form s...
- [Managing Form Responses in the Dashboard](https://help.studio.design/en/articles/4538884-managing-form-responses-in-the-dashboard.md): Learn how to view form responses and attachments in the Studio.Design form dashboard. We'll also cover managing responses with statuses like 'Handled' or 'Pending,' downloading responses as CSV, an...
- [Form Response Management: Setting Up Notification Emails](https://help.studio.design/en/articles/2281082-form-response-management-setting-up-notification-emails.md): Learn how to set up notification emails for Studio.Design forms. This article covers global and individual settings, key things to keep in mind, and practical use cases to help you manage form resp...
- [Manage form responses: Receive email notifications only](https://help.studio.design/en/articles/4643435-manage-form-responses-receive-email-notifications-only.md): If you don't want form submissions stored in your Studio.Design database, you can adjust your settings in advance to receive responses only via email notification.
- [Form Response Management: Viewing Limits by Plan](https://help.studio.design/en/articles/4604830-form-response-management-viewing-limits-by-plan.md): Studio.Design's form feature has a limit on how many form responses you can view, depending on your plan. This article explains the limits for each plan and what to do when you reach them.
- [Form Responses: Restrict access by team member](https://help.studio.design/en/articles/8223241-form-responses-restrict-access-by-team-member.md): Learn how to limit who can view form responses in Studio.Design by setting access permissions for each team member.
- [Manage form responses with Google Sheets](https://help.studio.design/en/articles/4597354-manage-form-responses-with-google-sheets.md): With Studio.Design's form feature, you can connect responses to Google Sheets. This lets you manage form data in real time and combine it with external tools for flexible data handling and notifica...
- [Form Responses: Adding Response Date and Time to a Spreadsheet](https://help.studio.design/en/articles/9316317-form-responses-adding-response-date-and-time-to-a-spreadsheet.md): Studio.Design doesn't currently support sending response date and time data directly to a connected spreadsheet. However, you can download your data as a CSV file to access response details, includ...
- [Form responses: Connecting to an external API](https://help.studio.design/en/articles/4690985-form-responses-connecting-to-an-external-api.md): You can send form submission data from your Studio.Design site to an external API for processing. This article walks you through an example: connecting to Slack through a spreadsheet.
- [Form submission issues: "Form submission failed" error when clicking submit](https://help.studio.design/en/articles/10911810-form-submission-issues-form-submission-failed-error-when-clicking-submit.md): When you see an error after submitting a Studio.Design form, the main causes are usually issues with your Google reCAPTCHA v3 setup or your Google Sheets integration.
- [Form submission issue: Submit button doesn't work](https://help.studio.design/en/articles/13002188-form-submission-issue-submit-button-doesn-t-work.md): If clicking the Submit button doesn't send your form, a required field may be hidden. Since required fields can't be left blank, the form won't submit until they're filled in.
- [Form Notification Issues: When Submitted Responses Don't Reach Your Dashboard or Email](https://help.studio.design/en/articles/4507321-form-notification-issues-when-submitted-responses-don-t-reach-your-dashboard-or-email.md): If form respondents click the submit button but their responses don't reach the site admin, this article explains the causes and solutions. The main cause is setting a link directly on the submit b...
- [Form notification issue: Admin not receiving email notifications for submitted responses](https://help.studio.design/en/articles/5060470-form-notification-issue-admin-not-receiving-email-notifications-for-submitted-responses.md): If you're not receiving notification emails from Studio.Design forms, here are the common causes to check and how to fix them.

### Hosting

- [Analytics: View Studio.Design's built-in access analytics \(Studio Analytics\)](https://help.studio.design/en/articles/8180342-analytics-view-studio-design-s-built-in-access-analytics-studio-analytics.md): Learn how to view the access analytics data measured by Studio.Design, along with the metrics you can track and key features of how it works.
- [Analytics: View your Google Analytics data in Studio.Design](https://help.studio.design/en/articles/15882440-analytics-view-your-google-analytics-data-in-studio-design.md): Learn how to view the traffic data for your Studio.Design site—measured through Google Analytics—directly within Studio.Design.
- [I want to do an AB test. Is it possible?](https://help.studio.design/en/articles/4185077-i-want-to-do-an-ab-test-is-it-possible.md)
- [SEO Optimization](https://help.studio.design/en/articles/2639106-seo-optimization.md): Organize SEO-related settings in Studio.Design — including titles, descriptions, OGP images, favicons, HTML, alt attributes, sitemaps, and 404 pages — to clearly communicate your content to search ...
- [H tags aren't detected when running an SEO check on my Studio.Design site](https://help.studio.design/en/articles/9240731-h-tags-aren-t-detected-when-running-an-seo-check-on-my-studio-design-site.md): When you check your Studio.Design site with an SEO tool, H tags may not be detected. This happens on the old infrastructure \(SPA\) and doesn't affect Google search.
- [Design editor changes appear in live preview but not on the published site](https://help.studio.design/en/articles/6791147-design-editor-changes-appear-in-live-preview-but-not-on-the-published-site.md): Learn why your changes in the design editor may only show up in the live preview and not on your published site, plus how to check for and fix the issue.

### 公開基盤・パフォーマンス

- [Update a published site](https://help.studio.design/en/articles/10469156-update-a-published-site.md): Learn how to publish your latest edits to a live site using the Update feature. We'll also cover what to check if your changes don't appear after clicking the Update button.
- [Unpublish your site](https://help.studio.design/en/articles/10518754-unpublish-your-site.md): Learn how to unpublish your entire live Studio.Design website, including step-by-step instructions, important things to know, and how to republish it later.
- [How to redesign your live Studio.Design site](https://help.studio.design/en/articles/5462330-how-to-redesign-your-live-studio-design-site.md): If your site is already live on Studio.Design, here are four ways to redesign it. Choose the method that best fits the scope of your redesign and the current state of your site.
- [Scheduling site publishing or updates](https://help.studio.design/en/articles/2642690-scheduling-site-publishing-or-updates.md): Studio.Design doesn't currently support scheduling for publishing or updating your entire site. However, within the CMS feature, you can schedule individual content items to be published at a later...
- [How to set IP address restrictions on your published Studio.Design site](https://help.studio.design/en/articles/2376889-how-to-set-ip-address-restrictions-on-your-published-studio-design-site.md): IP address restrictions for published Studio.Design sites are set up through an external delivery environment, such as a CDN, using Custom Proxy. Custom Proxy is an add-on available for projects on...
- [Protect your entire site with a password](https://help.studio.design/en/articles/7325261-protect-your-entire-site-with-a-password.md): Learn how to add a password page to restrict access to your whole site. Once password protection is turned on, visitors can only view your site after entering the correct password.
- [Make Certain Pages Private \(Visibility Settings\)](https://help.studio.design/en/articles/5633250-make-certain-pages-private-visibility-settings.md): To keep your site live while hiding specific pages from the public, use the Visibility setting.
- [How Studio.Design publishes your site](https://help.studio.design/en/articles/15444819-how-studio-design-publishes-your-site.md): As of June 11, 2026, Studio.Design's publishing infrastructure has been updated to deliver fully rendered HTML from the server. Here's an overview of the new setup and how it differs from the previ...
- [Switching your published site from the old infrastructure to the new one](https://help.studio.design/en/articles/13526256-switching-your-published-site-from-the-old-infrastructure-to-the-new-one.md): For projects created before June 11, 2026, here's how to switch your published site from the old infrastructure to the new one. Until you make the switch, these projects stay published on the old i...
- [Publish a site hosted on another server in a subdirectory of your Studio.Design site](https://help.studio.design/en/articles/8730667-publish-a-site-hosted-on-another-server-in-a-subdirectory-of-your-studio-design-site.md): With the Custom Proxy feature, you can display a site hosted on another server within a subdirectory. To enable Custom Proxy, you'll need to subscribe to the Custom Proxy add-on.
- [Can I host a site built with Studio.Design on my own server?](https://help.studio.design/en/articles/4185070-can-i-host-a-site-built-with-studio-design-on-my-own-server.md): Websites created with Studio.Design can only be published on Studio.Design's servers. Hosting on your own server isn't supported.
- [Supported browsers for viewing Studio.Design websites](https://help.studio.design/en/articles/2401764-supported-browsers-for-viewing-studio-design-websites.md): Learn about the recommended browsers and devices for viewing websites created and published with Studio.Design.
- [Add custom headers](https://help.studio.design/en/articles/9334686-add-custom-headers.md): Custom headers let you strengthen your website's security. This article explains how to set up custom headers and how to make the most of them.
- [Placing non-.txt files \(like HTML\) in your site's root directory](https://help.studio.design/en/articles/8855744-placing-non-txt-files-like-html-in-your-site-s-root-directory.md): To place file types other than .txt \(such as HTML\) in your root directory, you'll need the Custom Proxy add-on available on Business Plus or higher, or an Enterprise plan.
- [What are the domains that should be added to the white list?](https://help.studio.design/en/articles/3953504-what-are-the-domains-that-should-be-added-to-the-white-list.md)
- [Redirect Internet Explorer visitors to Microsoft Edge](https://help.studio.design/en/articles/5079291-redirect-internet-explorer-visitors-to-microsoft-edge.md): How to add your site to Microsoft's IE compatibility list.
- [How to migrate your website to Studio.Design with zero downtime](https://help.studio.design/en/articles/6459180-how-to-migrate-your-website-to-studio-design-with-zero-downtime.md): Learn how downtime can occur during a website migration, how to check for it, and what to do if the switchover takes longer than expected.
- [Concurrent Visitor Limits for Studio.Design Sites and How to Handle Them](https://help.studio.design/en/articles/3559957-concurrent-visitor-limits-for-studio-design-sites-and-how-to-handle-them.md): Learn about the concurrent visitor limits for sites published with Studio.Design and how to handle high-traffic situations.
- [Tips to improve the loading speed of your published Studio.Design site](https://help.studio.design/en/articles/4062009-tips-to-improve-the-loading-speed-of-your-published-studio-design-site.md): Learn how to improve the loading speed of sites built with Studio.Design. This guide covers easy wins like reducing box count, optimizing images, and adjusting font settings.
- [What Should I Do If There Is a Sudden Increase in PVs Due to Unauthorized Access?](https://help.studio.design/en/articles/9007346-what-should-i-do-if-there-is-a-sudden-increase-in-pvs-due-to-unauthorized-access.md): Learn how to manage a suspected increase in PVs due to unauthorized access to your Studio site.
- [Checklist for Improving Your Published Site's Performance](https://help.studio.design/en/articles/13526287-checklist-for-improving-your-published-site-s-performance.md): Key checkpoints for using Lighthouse and PageSpeed Insights scores during design, review, QA, and pre-delivery checks. Use this guide to maximize your published site's performance and user experience.

### Domains & DNS

- [Can I purchase a domain through Studio.Design?](https://help.studio.design/en/articles/9144063-can-i-purchase-a-domain-through-studio-design.md): Studio.Design doesn't offer domain registration or purchasing services.
- [Can I use a domain I purchased from another provider with Studio.Design?](https://help.studio.design/en/articles/9144064-can-i-use-a-domain-i-purchased-from-another-provider-with-studio-design.md): Yes — you can connect a domain you purchased from another provider and use it to publish your site on Studio.Design.
- [Connect a subdomain of an existing domain to Studio.Design](https://help.studio.design/en/articles/3018390-connect-a-subdomain-of-an-existing-domain-to-studio-design.md): Learn how to connect a subdomain of a domain you're using with another service to your Studio.Design site, and how subdirectory setups work.
- [Can I connect multiple domains to a single project?](https://help.studio.design/en/articles/9505928-can-i-connect-multiple-domains-to-a-single-project.md): In Studio.Design, each project is tied to its own domain. This article explains how to approach setups that use multiple domains or subdirectories, along with recommended configuration patterns.
- [Publish your site with a custom domain](https://help.studio.design/en/articles/4358865-publish-your-site-with-a-custom-domain.md): Learn how to publish your website using a custom domain purchased from an external service, plus what to check before you get started.
- [Publish your site on a Studio.Design subdomain](https://help.studio.design/en/articles/10327010-publish-your-site-on-a-studio-design-subdomain.md): Learn how to publish your website using a Studio.Design subdomain, along with important things to check before you get started.
- [How to disconnect a Studio.Design subdomain](https://help.studio.design/en/articles/10327081-how-to-disconnect-a-studio-design-subdomain.md): Learn how to disconnect your site from its Studio.Design subdomain when it's published using one.
- [Accessing your original Studio.Design subdomain after switching to a custom domain](https://help.studio.design/en/articles/9239809-accessing-your-original-studio-design-subdomain-after-switching-to-a-custom-domain.md): After you switch your published site from a Studio.Design subdomain to a custom domain, visitors who go to the original subdomain are automatically redirected to your new custom domain.
- [Disconnect a custom domain](https://help.studio.design/en/articles/4143486-disconnect-a-custom-domain.md): Learn how to disconnect a custom domain from a site published with Studio.Design, along with important things to keep in mind before you do.
- [Troubleshooting custom domain connection and publishing issues](https://help.studio.design/en/articles/5663824-troubleshooting-custom-domain-connection-and-publishing-issues.md): Learn how to resolve common issues when connecting a custom domain in Studio.Design, such as SSL certificates not being issued or your published site not loading.
- [DNS Setup: Connect a domain from Onamae.com to your Studio.Design site](https://help.studio.design/en/articles/13904576-dns-setup-connect-a-domain-from-onamae-com-to-your-studio-design-site.md): Learn how to configure DNS records on Onamae.com to prepare your custom domain for connection to your Studio.Design site.
- [DNS Setup: Connecting a Muumuu Domain to Your Studio.Design Site](https://help.studio.design/en/articles/13904569-dns-setup-connecting-a-muumuu-domain-to-your-studio-design-site.md): Learn how to configure DNS records on Muumuu Domain to prepare your custom domain for connection to your Studio.Design site.
- [DNS Record Setup: Connecting a Sakura Domain to Your Studio.Design Site](https://help.studio.design/en/articles/13904571-dns-record-setup-connecting-a-sakura-domain-to-your-studio-design-site.md): Learn how to configure DNS records on the Sakura Domain side to prepare your custom domain for connection to your Studio.Design site.
- [DNS Record Setup: Connect a Domain from XServer to Your Studio.Design Site](https://help.studio.design/en/articles/13904574-dns-record-setup-connect-a-domain-from-xserver-to-your-studio-design-site.md): Learn how to set up DNS records in XServer to prepare your custom domain for connecting to your Studio.Design site.
- [DNS Record Setup: Connecting a Squarespace Domain to Your Studio.Design Site](https://help.studio.design/en/articles/13904579-dns-record-setup-connecting-a-squarespace-domain-to-your-studio-design-site.md): Learn how to configure DNS records in Squarespace Domains to prepare your custom domain for connecting to your Studio.Design site.
- [Canonical tags \(URL canonicalization\)](https://help.studio.design/en/articles/10030472-canonical-tags-url-canonicalization.md): Studio.Design automatically determines the correct canonical URL and adds a canonical tag to each page. The tag is added when the page renders in the browser, not in the HTML server response. Canon...
- [Set up a www redirect](https://help.studio.design/en/articles/3381241-set-up-a-www-redirect.md): URLs with and without "www" are treated as separate domains. Setting up a www redirect lets visitors reach your site either way. Here's how to set it up.
- [Switching the "www." prefix on your connected domain](https://help.studio.design/en/articles/3331268-switching-the-www-prefix-on-your-connected-domain.md): Adding or removing "www." from your custom domain is treated the same as a regular domain change. The previous domain will no longer be accessible, and there may be brief downtime while the new dom...
- [Use email with the same domain as your site](https://help.studio.design/en/articles/5707271-use-email-with-the-same-domain-as-your-site.md): You may be able to use email on your site's domain by pointing your MX records to an external email service.
- [What to do if the connection can't be verified after setting up an A record](https://help.studio.design/en/articles/4358608-what-to-do-if-the-connection-can-t-be-verified-after-setting-up-an-a-record.md): Learn how to fix the "Connection could not be verified" error that may appear after setting up a custom domain in Studio.Design.
- [Important Update for Users Connecting a Custom Domain to Studio.Design's Old IP Address \(35.194.122.208\)](https://help.studio.design/en/articles/6777000-important-update-for-users-connecting-a-custom-domain-to-studio-design-s-old-ip-address-35-194-122-208.md): An announcement about the IP address change for Studio.Design's servers.
- [Can I publish my Studio.Design site with Cloudflare's DNS Proxy mode enabled?](https://help.studio.design/en/articles/14075332-can-i-publish-my-studio-design-site-with-cloudflare-s-dns-proxy-mode-enabled.md): Studio.Design doesn't support publishing sites with Cloudflare's DNS Proxy mode enabled by default. However, the Custom Proxy add-on, available for Business Plus plans and above, lets you set up a ...
- [Can I use SSL/TLS with a custom domain?](https://help.studio.design/en/articles/2248964-can-i-use-ssl-tls-with-a-custom-domain.md)
- [Issuing a TLS Certificate](https://help.studio.design/en/articles/4358651-issuing-a-tls-certificate.md): When you publish a site with Studio.Design, a TLS certificate is issued automatically. This article covers the basics of TLS certificates, how Studio.Design handles the issuing process, how long it...
- [Automatic TLS Certificate Renewal](https://help.studio.design/en/articles/4358807-automatic-tls-certificate-renewal.md): Studio.Design automatically issues and renews TLS certificates for your sites. Learn about the service we use and what to do if automatic renewal fails.
- [Publishing your Studio.Design site with a custom TLS certificate](https://help.studio.design/en/articles/11389539-publishing-your-studio-design-site-with-a-custom-tls-certificate.md): You can use your own TLS certificate with the Custom Proxy add-on. This is an advanced feature, so detailed setup instructions and individual consultations aren't covered by our support team.

### Billing

- [How to Choose the Right Project Plan](https://help.studio.design/en/articles/4066297-how-to-choose-the-right-project-plan.md): Not sure which plan to choose? Compare Studio.Design options and their main features.
- [Is Studio.Design billing per project or per account?](https://help.studio.design/en/articles/9139530-is-studio-design-billing-per-project-or-per-account.md): Studio.Design billing is managed on a per-project basis. Each project has its own subscription and billing, and the account designated as the billing owner manages the billing for that project.
- [Published Page Limits by Plan](https://help.studio.design/en/articles/10208348-published-page-limits-by-plan.md): The number of pages you can publish on a website created with Studio varies by plan. This article explains the page limits for each plan and how to check your current usage.
- [CMS Active Model Limits by Plan](https://help.studio.design/en/articles/10181358-cms-active-model-limits-by-plan.md): CMS models containing published items have different limits depending on your plan.
- [How to Count "Published items”](https://help.studio.design/en/articles/4217324-how-to-count-published-items.md): Limits on the number of CMS items published per plan
- [Automatic Plan Renewal](https://help.studio.design/en/articles/9144060-automatic-plan-renewal.md): Studio.Design’s paid plans renew automatically each billing period. This article explains renewal timing and notification details.
- [Important Points When Changing Project Plans](https://help.studio.design/en/articles/3652807-important-points-when-changing-project-plans.md): This article covers important points and common issues when changing your plan in Studio.Design, with detailed guidance for each scenario.
- [Upgrade Your Project Plan](https://help.studio.design/en/articles/9153812-upgrade-your-project-plan.md): Learn how to upgrade your project to a higher plan. This guide covers the required payment info and permissions, plus what to do if you run into a payment error.
- [How to Downgrade Your Project Plan](https://help.studio.design/en/articles/3548089-how-to-downgrade-your-project-plan.md): This guide explains how to downgrade your project to a lower plan in Studio.Design, along with important things to keep in mind.
- [What happens to CMS models and published items when downgrading to a plan with a lower model limit?](https://help.studio.design/en/articles/10208794-what-happens-to-cms-models-and-published-items-when-downgrading-to-a-plan-with-a-lower-model-limit.md): When model count exceeds the new plan's limit after downgrading, the number of models will be automatically adjusted.
- [What happens to published CMS items when downgrading to a plan with a lower publication limit?](https://help.studio.design/en/articles/8849673-what-happens-to-published-cms-items-when-downgrading-to-a-plan-with-a-lower-publication-limit.md): Items will automatically be set to draft status to meet the new plan's publication limit.
- [Project Plan Payments](https://help.studio.design/en/articles/3548078-project-plan-payments.md): This article explains the project plan payment system, available payment methods, and the payment cycle.
- [Payment Methods Available on Studio.Design](https://help.studio.design/en/articles/11112909-payment-methods-available-on-studio-design.md): Studio.Design accepts only credit or debit cards with 3D Secure. Learn which cards are supported and what to do if you have issues.
- [What Happens If Your Plan Payment Fails](https://help.studio.design/en/articles/8855565-what-happens-if-your-plan-payment-fails.md): If your Studio.Design payment fails, your site will go offline after a short grace period. This article covers the notifications you’ll get, what to expect before your site goes offline, and how to...
- [Steps to Change the Project Payment Owner](https://help.studio.design/en/articles/3547702-steps-to-change-the-project-payment-owner.md): This article explains how to change the "Payment Owner" who pays for Studio's paid plans.
- [Refund Policy for Project Plans](https://help.studio.design/en/articles/3548049-refund-policy-for-project-plans.md)
- [How to Use Discount Coupons for Project Plans](https://help.studio.design/en/articles/5115891-how-to-use-discount-coupons-for-project-plans.md): This article explains how to check and use discount coupons for STUDIO plan payments.
- [Viewing and Downloading Project Invoices and Receipts](https://help.studio.design/en/articles/3548104-viewing-and-downloading-project-invoices-and-receipts.md): This article explains the steps to view and download invoices and receipts for projects.
- [I can't tap "Upgrade Now". What should I do?](https://help.studio.design/en/articles/4507303-i-can-t-tap-upgrade-now-what-should-i-do.md): When you cannot upgrade the plan

### Account

- [Sign up for a Studio account](https://help.studio.design/en/articles/6227154-sign-up-for-a-studio-account.md)
- [Account settings](https://help.studio.design/en/articles/4064987-account-settings.md): In Account settings, you can manage all your account details in one place, including your username, email address, password, and payment information.
- [Set up your account's payment information](https://help.studio.design/en/articles/3548095-set-up-your-account-s-payment-information.md): Learn how to add and manage the credit or debit card, billing name, and address used to pay for your projects in Studio.Design.
- [Changing Language](https://help.studio.design/en/articles/1949488-changing-language.md)
- [How to change the email address](https://help.studio.design/en/articles/1949484-how-to-change-the-email-address.md): You can easily update the email address linked to your Studio.Design account from your account menu.
- [How to change your password](https://help.studio.design/en/articles/1949485-how-to-change-your-password.md)
- [How to Reset Your Account Password](https://help.studio.design/en/articles/1949482-how-to-reset-your-account-password.md): Learn how to reset your Studio account login password.
- [Account Password Policy](https://help.studio.design/en/articles/10372093-account-password-policy.md): Learn about the password requirements for logging into Studio, including character limits and restrictions on certain strings.
- [How to change your profile photo](https://help.studio.design/en/articles/1949483-how-to-change-your-profile-photo.md)
- [Dark Mode and Light Mode Settings](https://help.studio.design/en/articles/2638945-dark-mode-and-light-mode-settings.md): Set the color mode for the editor and dashboard on a per-account basis.
- [Log out](https://help.studio.design/en/articles/4065220-log-out.md)
- [Canceling your Studio.Design account](https://help.studio.design/en/articles/2248690-canceling-your-studio-design-account.md): Learn what to consider before canceling your Studio.Design account, when cancellation isn't necessary, how it affects your workspaces and projects, and the steps to cancel. Note: to prevent fraud, ...
- [Types of Emails from Studio.Design and How to Unsubscribe](https://help.studio.design/en/articles/11382726-types-of-emails-from-studio-design-and-how-to-unsubscribe.md): This article explains the different types of emails you may receive from Studio.Design and how you can manage or unsubscribe from them.

### Collaboration

- [Difference Between Workspace Guests and Project Members](https://help.studio.design/en/articles/9669695-difference-between-workspace-guests-and-project-members.md): Explaining the Difference Between Inviting Members to a Regular Project and Inviting Guests in a Workspace.
- [Managing Project Member Roles](https://help.studio.design/en/articles/4066240-managing-project-member-roles.md): Learn about the different roles you can assign to project members in Studio.Design. There are three roles: Owner, Billing Owner, and Editor.
- [Inviting and Managing Project Members](https://help.studio.design/en/articles/2639135-inviting-and-managing-project-members.md): Learn how to invite members to your Studio projects, manage team members, and collaborate on editing.
- [Advanced Member Permissions](https://help.studio.design/en/articles/10208400-advanced-member-permissions.md): A feature available for Business plans and above that allows detailed permission settings for editor members.
- [How to hand off a project to a client](https://help.studio.design/en/articles/4185086-how-to-hand-off-a-project-to-a-client.md): Learn how to transfer a Studio.Design project to a client, including inviting their account, changing permissions, updating payment settings, and leaving the project.
- [What Happens to Writer Permission Members After Downgrading a Project Plan?](https://help.studio.design/en/articles/7127402-what-happens-to-writer-permission-members-after-downgrading-a-project-plan.md): This article explains the handling of writer permissions when downgrading from a Business or CMS plan.
- [What is a Workspace?](https://help.studio.design/en/articles/9537340-what-is-a-workspace.md): Overview of Workspaces for managing multiple projects collectively.
- [Getting Started with Workspaces](https://help.studio.design/en/articles/11168188-getting-started-with-workspaces.md): Learn how to set up and configure workspace features in Studio.Design.
- [How to Create a New Project in a Workspace](https://help.studio.design/en/articles/9537363-how-to-create-a-new-project-in-a-workspace.md): Learn the steps and considerations for creating and adding a new project within a Workspace.
- [How to Add Existing Projects to a Workspace](https://help.studio.design/en/articles/9537362-how-to-add-existing-projects-to-a-workspace.md): Learn the steps and considerations for adding existing projects to a Workspace.
- [How to Unlink a Project from a Workspace](https://help.studio.design/en/articles/9537366-how-to-unlink-a-project-from-a-workspace.md): Learn the steps to unlink a project added to a Workspace and important considerations.
- [Understanding Workspace Owners and Members](https://help.studio.design/en/articles/9537355-understanding-workspace-owners-and-members.md): This article covers workspace roles and configurable user restrictions in Studio.Design's paid plans.
- [Understanding Workspace Guests](https://help.studio.design/en/articles/9537357-understanding-workspace-guests.md): This section explains how to invite guests to specific projects within a workspace.
- [Inviting and Managing Workspace Members](https://help.studio.design/en/articles/9537356-inviting-and-managing-workspace-members.md): Inviting and Managing Workspace Members
- [Inviting and Managing Workspace Guests](https://help.studio.design/en/articles/9537360-inviting-and-managing-workspace-guests.md): This section explains the procedures for inviting guests to a workspace, changing their permissions, and removing them.
- [Can I Switch an Owner or Member to a Guest When Upgrading My Workspace?](https://help.studio.design/en/articles/9790118-can-i-switch-an-owner-or-member-to-a-guest-when-upgrading-my-workspace.md): You can't switch an owner or member to a guest during a workspace upgrade. Remove them before upgrading, then re-invite them as a guest.
- [Duplicating a project linked to a workspace](https://help.studio.design/en/articles/9965708-duplicating-a-project-linked-to-a-workspace.md): Learn how to duplicate a project that's linked to a workspace, along with a few things to keep in mind. The workspace link is carried over to the new project, but invited guests are not.
- [How to Delete a Workspace](https://help.studio.design/en/articles/11168338-how-to-delete-a-workspace.md): If you no longer need a workspace in Studio.Design, you can delete it by following these steps.
- [Workspace Pricing](https://help.studio.design/en/articles/9537342-workspace-pricing.md): Introducing the pricing plans for Workspaces. Workspaces have separate plans from project pricing plans.
- [Workspace Payments](https://help.studio.design/en/articles/9577213-workspace-payments.md): Learn about the payment system for Workspaces, available payment methods, and specific examples of payment cycles.
- [Setting and Changing Workspace Payment Information](https://help.studio.design/en/articles/9537343-setting-and-changing-workspace-payment-information.md): Learn how to set up and change credit or debit card information, invoice names, and billing addresses for a Workspace.
- [How to Upgrade Your Workspace Plan](https://help.studio.design/en/articles/9537350-how-to-upgrade-your-workspace-plan.md): Step-by-step guide and related FAQs for upgrading your Workspace plan.
- [How to Downgrade Your Workspace Plan](https://help.studio.design/en/articles/9537352-how-to-downgrade-your-workspace-plan.md): Learn how to downgrade your workspace plan, important considerations, and related FAQs.
- [How to Change the Payment Owner for Projects Managed in a Workspace](https://help.studio.design/en/articles/9537346-how-to-change-the-payment-owner-for-projects-managed-in-a-workspace.md): Learn how to change the payment owner for projects associated with a Workspace.
- [Checking Payment History and Viewing/Downloading Receipts for Workspaces](https://help.studio.design/en/articles/9537349-checking-payment-history-and-viewing-downloading-receipts-for-workspaces.md): Learn how to check the payment history of workspace fees and projects linked to the workspace, as well as how to view and download receipts.
- [Can I Specify the Billing Owner When Upgrading a Project Managed by a Workspace?](https://help.studio.design/en/articles/9683526-can-i-specify-the-billing-owner-when-upgrading-a-project-managed-by-a-workspace.md): When upgrading, you can choose whether the billing owner will be the workspace or the project's billing owner.
- [What Happens If Workspace Payments Fail?](https://help.studio.design/en/articles/9650823-what-happens-if-workspace-payments-fail.md): If the payment for your workspace plan fails for any reason, automatic retry attempts will be made every few days.
- [What Happens If I Accidentally Upgrade \(Pay\) for the Workspace Plan?](https://help.studio.design/en/articles/9537380-what-happens-if-i-accidentally-upgrade-pay-for-the-workspace-plan.md): We do not offer refunds after a Workspace plan has been contracted.
- [Can I Switch My Workspace Plan from Annual to Monthly Payments?](https://help.studio.design/en/articles/9537368-can-i-switch-my-workspace-plan-from-annual-to-monthly-payments.md): You cannot switch from annual to monthly payments directly.
- [What Happens to Billing When Adding or Removing Members During a Paid Workspace Plan?](https://help.studio.design/en/articles/9537382-what-happens-to-billing-when-adding-or-removing-members-during-a-paid-workspace-plan.md): This section explains in detail how billing is handled when adding or removing members during the contract period.
- [Can I Switch My Workspace Plan from Monthly to Annual Payments?](https://help.studio.design/en/articles/9537377-can-i-switch-my-workspace-plan-from-monthly-to-annual-payments.md): Direct changes from monthly payments to annual payments are possible. This section also explains the discounts available during the change.
- [Important Considerations When Changing Workspace Plans](https://help.studio.design/en/articles/9537354-important-considerations-when-changing-workspace-plans.md): FAQs related to changing your Workspace plan.

### Apps

- [Connecting External Apps \(Apps Integration\)](https://help.studio.design/en/articles/2639194-connecting-external-apps-apps-integration.md): Studio.Design lets you connect external apps on paid plan projects. Here's an overview of available apps and how to set them up.
- [Apps Integration: Setting up Google Analytics](https://help.studio.design/en/articles/1892965-apps-integration-setting-up-google-analytics.md): Studio allows you to connect the analytics tool Google Analytics \(GA\) on a per-site basis. Once connected, you can view the analytics data collected by GA for your Studio site both in GA and within...
- [Apps Integration: Setting up Google Tag Manager](https://help.studio.design/en/articles/3649799-apps-integration-setting-up-google-tag-manager.md)
- [Apps Integration: Connect Google Search Console to your Studio.Design site](https://help.studio.design/en/articles/1949442-apps-integration-connect-google-search-console-to-your-studio-design-site.md): Learn how to connect your Studio.Design site with Google Search Console. Once connected, you can analyze your site's search performance.
- [Apps Integration: Setting Up Google reCAPTCHA v3](https://help.studio.design/en/articles/5752722-apps-integration-setting-up-google-recaptcha-v3.md): Learn how to set up Google reCAPTCHA v3 in Studio.Design to protect your published site's forms from spam and abuse. Get your reCAPTCHA keys and configure them per project via the Apps integration.
- [Apps Integration: Setting Up HubSpot Tracking](https://help.studio.design/en/articles/5688765-apps-integration-setting-up-hubspot-tracking.md): Learn how to set up HubSpot Tracking in Studio.Design to measure traffic on your published site. Find your tracking code in HubSpot and connect it using the Apps integration feature.
- [Apps Integration: Connect Intercom](https://help.studio.design/en/articles/1884129-apps-integration-connect-intercom.md): Learn how to connect Intercom to your Studio.Design site using the Apps integration feature.
- [Apps Integration: Connect Channel Talk](https://help.studio.design/en/articles/3106305-apps-integration-connect-channel-talk.md): Learn how to add the Channel Talk chat service to your Studio.Design site using the Apps integration feature.
- [Apps Integration: Connecting Meta Pixel](https://help.studio.design/en/articles/5147773-apps-integration-connecting-meta-pixel.md): Learn how to connect Meta Pixel to your Studio.Design site using the Apps integration. You can either add custom code in the Design Editor or simply enter your ID in Apps.
- [Apps Integration: Connecting CHILLNN](https://help.studio.design/en/articles/15420623-apps-integration-connecting-chillnn.md): Learn how to connect CHILLNN with Studio.Design to add reservation buttons and forms to your site. Once connected, visitors can view reservation options and complete bookings directly on your Studi...
- [Add a cookie consent banner with Cookiebot](https://help.studio.design/en/articles/6103331-add-a-cookie-consent-banner-with-cookiebot.md): Learn how to add a cookie consent banner to your Studio.Design site. This guide covers setup with the Cookiebot CMP and Google Tag Manager, plus tips on Apps integration, Embed box settings, and ke...
- [Referral sources aren't tracked correctly in Google Analytics set up via Google Tag Manager](https://help.studio.design/en/articles/5027775-referral-sources-aren-t-tracked-correctly-in-google-analytics-set-up-via-google-tag-manager.md): Referral sources may not be tracked correctly in Google Analytics when set up through Google Tag Manager. This happens on the legacy \(SPA\) platform and affects SPA sites in general, not just Studio...
- [Can Studio.Design integrate with heatmap tools?](https://help.studio.design/en/articles/6867381-can-studio-design-integrate-with-heatmap-tools.md): Studio.Design doesn't offer a built-in Apps integration with heatmap services. As an alternative, you can use the custom code feature or embed code through an Embed box.
- [Track click events in Google Analytics using Google Tag Manager](https://help.studio.design/en/articles/3594869-track-click-events-in-google-analytics-using-google-tag-manager.md): Learn how to connect Google Tag Manager with Google Analytics to track click events on your Studio.Design site. This guide covers creating a GA4 configuration tag, setting the ID in Studio.Design, ...
- [Integrate Marketo with Studio.Design or embed Marketo forms](https://help.studio.design/en/articles/8885358-integrate-marketo-with-studio-design-or-embed-marketo-forms.md): Some Studio.Design Enterprise plans include support for setting up Adobe Marketo Engage. Reach out to us to learn more.
- [Connecting SATORI with Studio.Design and embedding forms](https://help.studio.design/en/articles/8888241-connecting-satori-with-studio-design-and-embedding-forms.md): With select Studio.Design Enterprise plans, you can consult with us about setting up SATORI integration.
- [Connecting Salesforce Account Engagement with Studio.Design and embedding forms](https://help.studio.design/en/articles/8965990-connecting-salesforce-account-engagement-with-studio-design-and-embedding-forms.md): With certain Studio.Design Enterprise plans, you can consult with us about setting up Salesforce Account Engagement.
- [Track Key Events in Google Analytics](https://help.studio.design/en/articles/3593487-track-key-events-in-google-analytics.md): Learn how to track key events in Google Analytics. You can set up key events either directly in Studio.Design or through your Google Analytics account.
- [Paying for add-ons](https://help.studio.design/en/articles/9334746-paying-for-add-ons.md): Learn how to pay for the add-ons available in Studio.Design, and how to view your invoices and receipts.
- [Custom Proxy: Technical Requirements, Limitations, and Troubleshooting](https://help.studio.design/en/articles/9559905-custom-proxy-technical-requirements-limitations-and-troubleshooting.md): Learn how to identify and fix common issues that can occur when forwarding traffic from your reverse proxy server to Studio.Design.
- [Custom proxy overview and setup guide](https://help.studio.design/en/articles/9334656-custom-proxy-overview-and-setup-guide.md): Set up a custom proxy in Studio.Design to connect your Studio.Design site with your existing hosting provider or infrastructure. You get control over headers, authentication, and how your site is d...
- [Data Connect API \(API Integration\)](https://help.studio.design/en/articles/6500751-data-connect-api-api-integration.md): Learn how to pull data from external services with public APIs and display it in Studio.Design's dynamic elements, like dynamic lists and pages. Covers supported APIs, setup steps, data binding, an...
- [Connect microCMS with the API](https://help.studio.design/en/articles/6494531-connect-microcms-with-the-api.md): Use the Data Connect API to pull content from microCMS and display it in dynamic pages, modals, lists, and other dynamic elements in Studio.Design. Learn how to set up the data on the microCMS side...
- [Notion API Integration](https://help.studio.design/en/articles/6498155-notion-api-integration.md): Display data from your Notion database on your Studio.Design site using the Data Connect API. This article walks you through Notion setup, API configuration in Studio.Design, and connecting data to...

### Studio Store

- [What is Studio.Store?](https://help.studio.design/en/articles/7181485-what-is-studio-store.md): Studio.Store is our official marketplace where you can browse, purchase, and sell quality-assured web design templates. Learn about template specs, buying, and selling.
- [Template Purchase Guide](https://help.studio.design/en/articles/7181490-template-purchase-guide.md)
- [Using Studio.Store templates for web design services](https://help.studio.design/en/articles/9245147-using-studio-store-templates-for-web-design-services.md): Studio.Store templates can be used for web design services. This article covers the rights, usage scope, key considerations, and purchase flow to keep in mind.
- [Selling paid templates on Studio.Store](https://help.studio.design/en/articles/11755322-selling-paid-templates-on-studio-store.md): You can sell templates on Studio.Store and earn revenue. Learn how to check your sales and issue discount coupons.
- [Earn rewards by listing free templates on Studio.Store \(Studio Template Affiliate Program\)](https://help.studio.design/en/articles/11755633-earn-rewards-by-listing-free-templates-on-studio-store-studio-template-affiliate-program.md): The Studio Template Affiliate Program lets you earn rewards by listing free templates on Studio.Store. Learn how the program works and the specific conditions for earning rewards.
- [Studio.Store Popularity Ranking Algorithm](https://help.studio.design/en/articles/12441666-studio-store-popularity-ranking-algorithm.md): The Studio.Store template popularity ranking page uses the latest data to ensure fair aggregation. This article explains the metrics that influence rankings and the measures in place to maintain tr...
- [I want to get \(purchase\) a Studio.Store template from my smartphone](https://help.studio.design/en/articles/7181499-i-want-to-get-purchase-a-studio-store-template-from-my-smartphone.md): You can browse Studio.Store on smartphones and tablets, but you'll need to use a desktop browser to get \(purchase\) templates.
- [Can I duplicate templates purchased from Studio.Store?](https://help.studio.design/en/articles/7181501-can-i-duplicate-templates-purchased-from-studio-store.md): Free templates can be reused by duplicating the project, but projects using paid templates cannot be duplicated. You'll need to purchase the template again for each new project.
- [Using different accounts to purchase a Studio.Store paid template and subscribe to a paid plan](https://help.studio.design/en/articles/9245124-using-different-accounts-to-purchase-a-studio-store-paid-template-and-subscribe-to-a-paid-plan.md): You can use separate accounts for purchasing a Studio.Store template and subscribing to a paid plan. Learn the basic concept and common workflow patterns for splitting the buyer and subscriber roles.
- [Can't find a template from Studio.Store in your project list](https://help.studio.design/en/articles/7181503-can-t-find-a-template-from-studio-store-in-your-project-list.md): If a template you got from Studio.Store isn't showing up in your project list, here are the possible causes and what to check.
- [How to restore a template purchased from Studio.Store to its original state](https://help.studio.design/en/articles/7181502-how-to-restore-a-template-purchased-from-studio-store-to-its-original-state.md): Learn how to reset a template you purchased back to its original state after editing. Use the project reset feature to restore your design data to how it was at the time of purchase.
- [Does Studio.Store offer cancellations or refunds for template purchases?](https://help.studio.design/en/articles/9245177-does-studio-store-offer-cancellations-or-refunds-for-template-purchases.md): Cancellations and refunds are not available after purchasing a paid template on Studio. Please review all details carefully before making your purchase.

### Studio.Assistant

- [Generate a site with Studio.Assistant](https://help.studio.design/en/articles/13298038-generate-a-site-with-studio-assistant.md): Studio.Assistant is an AI-powered web production OS that streamlines the early stages of building a website. It supports you end to end, from organizing requirements and information architecture to...
- [Import and export sheets with Studio.Assistant](https://help.studio.design/en/articles/16881348-import-and-export-sheets-with-studio-assistant.md): With the Pro plan for Studio.Assistant, you can export your site's overview, text, and page structure as sheets, edit them in a spreadsheet app, and import them back. Here's a look at the three she...
- [Use keyboard shortcuts with Studio.Assistant](https://help.studio.design/en/articles/16881316-use-keyboard-shortcuts-with-studio-assistant.md): A list of keyboard shortcuts you can use in Studio.Assistant. Copy or duplicate sections, move between sections, and select multiple items—all from your keyboard—so you can fine-tune your results f...
- [Manage your Studio.Assistant plan](https://help.studio.design/en/articles/16767384-manage-your-studio-assistant-plan.md): Studio.Assistant offers two plans: Starter and Pro. Learn how the plans differ in price and features, how to subscribe, check your billing, and change or cancel your plan.

### Accessibility

- [Accessibility in Studio](https://help.studio.design/en/articles/5752182-accessibility-in-studio.md)
- [Language settings for your published site](https://help.studio.design/en/articles/5537056-language-settings-for-your-published-site.md): In Studio.Design, you can specify your site's language. This helps assistive technologies like translation tools and screen readers accurately identify and process the content on your site.
- [aria-label, aria-hidden](https://help.studio.design/en/articles/5752183-aria-label-aria-hidden.md): How to Use aria-label and aria-hidden \(setting text to read aloud or not by screen readers\)

### How to contact

- [Studio.Stock](https://help.studio.design/en/articles/12761189-studio-stock.md): Studio.Stock is a new photo stock service offering high-resolution, high-quality AI-generated images. You can easily search and download commercially usable images, and use various editing features...
- [Studio.Design Glossary](https://help.studio.design/en/articles/10044041-studio-design-glossary.md): A glossary of key terms used in Studio.Design, along with their related features. Use it as a reference to better understand the design editor, CMS, domain settings, and other features.
- [20 Checkpoints to Solve Common Issues While Building](https://help.studio.design/en/articles/9520141-20-checkpoints-to-solve-common-issues-while-building.md): Stuck while building your site? From CMS items not showing up to broken links and layout issues across devices, this checklist of 20 common Studio.Design troubleshooting tips has you covered.
- [Support Resources When You Need Help](https://help.studio.design/en/articles/9977419-support-resources-when-you-need-help.md): Explore the resources available when using Studio.Design, organized by situation. Whether you're a beginner or advanced user, find the right resource for your needs.
- [How to contact Studio.Design chat support](https://help.studio.design/en/articles/8860191-how-to-contact-studio-design-chat-support.md): Studio.Design offers chat support for issues like payment problems or trouble logging in. Here's how to reach our chat support team.
- [Studio.Design Support Policy | For Users Contacting Support](https://help.studio.design/en/articles/8092616-studio-design-support-policy-for-users-contacting-support.md): Learn about our support policy, basic guidelines, and available support hours.
- [Do I need to set up a separate hosting server to use Studio.Design?](https://help.studio.design/en/articles/9144065-do-i-need-to-set-up-a-separate-hosting-server-to-use-studio-design.md): No, you don't need to sign up for a separate hosting server.
- [Can I Create a Multilingual Site with Studio?](https://help.studio.design/en/articles/9317101-can-i-create-a-multilingual-site-with-studio.md): Currently, Studio does not offer built-in multilingual support. However, you can create separate pages for each language, or use plugins.
- [Is there a payment/E-Commerce function?](https://help.studio.design/en/articles/4185079-is-there-a-payment-e-commerce-function.md)
- [Studio Security Checklist](https://help.studio.design/en/articles/4682161-studio-security-checklist.md): Security checklist and security initiatives
- [Troubleshooting Guide for Studio.Design](https://help.studio.design/en/articles/9053745-troubleshooting-guide-for-studio-design.md): Here are 5 things to check when you run into issues like being unable to use the editor in Studio.Design. If the problem is related to your setup, these steps may help you resolve it quickly.
- [Can you provide operation logs or access logs?](https://help.studio.design/en/articles/9316231-can-you-provide-operation-logs-or-access-logs.md): Projects on the Business Plus plan or higher can view activity logs.
- [About the Studio Bug Bounty Program](https://help.studio.design/en/articles/11043537-about-the-studio-bug-bounty-program.md): Studio.Design has established a bug bounty program to compensate those who identify and report security vulnerabilities on the platform.
- [What happens to my site if Studio.Design shuts down?](https://help.studio.design/en/articles/9144116-what-happens-to-my-site-if-studio-design-shuts-down.md): Learn about what would happen if Studio.Design were to discontinue its service, including how we would notify users.
- [Report Fraudulent Activities and Copyright Infringement](https://help.studio.design/en/articles/9086630-report-fraudulent-activities-and-copyright-infringement.md): We provide a dedicated form for reporting any Studio-created websites that violate our Terms of Service or User Guidelines.
- [How to check the console log](https://help.studio.design/en/articles/9053800-how-to-check-the-console-log.md): If you run into an issue while using Studio.Design, our chat support team may ask you to check the console log and provide a screen recording.
- [Activity Log](https://help.studio.design/en/articles/9901319-activity-log.md): Track and review user actions within your project for enhanced security monitoring.

## 日本語

### 作成から公開までの流れ

- [1. Studioのアカウントとプロジェクト](https://help.studio.design/ja/articles/9972325-1-studioのアカウントとプロジェクト.md): StudioでWebサイトを作成する際に必要な、アカウントとプロジェクトの作成方法と概要について説明します。
- [2. ダッシュボードの使い方](https://help.studio.design/ja/articles/9972349-2-ダッシュボードの使い方.md): プロジェクトごとの情報を確認・管理するダッシュボードについて解説します。支払い・プラン・容量、アナリティクスの確認や、CMSやフォームの管理等を行います。
- [3. Studioのレイアウトの基本（ボックスレイアウト）](https://help.studio.design/ja/articles/5542617-3-studioのレイアウトの基本-ボックスレイアウト.md): Studioでは、Webページのレイアウトを「ボックスレイアウト」という方法で作成します。ここでは、Studioのボックスレイアウトの特徴と、実際の画面操作について具体的に解説します。
- [4. Studio CMSの使い方](https://help.studio.design/ja/articles/4175003-4-studio-cmsの使い方.md): StudioのCMS機能の概要について説明します。ニュース、ブログ、コラム、導入事例など、同一のデザインで定期的な追加・更新が発生するコンテンツに活用できます。
- [5. 検索エンジンの仕組みとSEO対策](https://help.studio.design/ja/articles/12697851-5-検索エンジンの仕組みとseo対策.md): 公開したサイトが検索結果に表示されるまでのステップや、サイトを上位に表示させるためのSEO対策について紹介します。
- [6. ドメインを決めてサイトを公開する](https://help.studio.design/ja/articles/9973234-6-ドメインを決めてサイトを公開する.md): Webサイトが完成したら、ドメインを決めてサイトを公開しましょう。Studioで利用できるドメインと、サイト公開の手順について解説します。

### プロジェクト管理

- [Studioのプロジェクトとは](https://help.studio.design/ja/articles/15840870-studioのプロジェクトとは.md): Studioでは、プロジェクトを作成してWebサイトを制作・公開・管理します。この記事では、プロジェクトの基本的な概念と複数プロジェクトを管理する方法（ワークスペース）について紹介します。
- [プロジェクトの作成と管理](https://help.studio.design/ja/articles/2639138-プロジェクトの作成と管理.md): Studioでのプロジェクト作成、複製、リセット、アーカイブについて解説します。
- [プロジェクト設定をする](https://help.studio.design/ja/articles/13626851-プロジェクト設定をする.md): Studioのプロジェクト名やサムネイル画像、Webhook通知など、プロジェクト全体に関する基本設定について説明します。
- [公開・配信の設定をする](https://help.studio.design/ja/articles/16159497-公開-配信の設定をする.md): Studioサイトの公開状況やドメイン、検索エンジン向けのポリシー、配信に関する各種設定について説明します。プロジェクトダッシュボード内の設定タブから行います。
- [.txtファイルをアップロードする](https://help.studio.design/ja/articles/13627103-txtファイルをアップロードする.md): ads.txt などの.txtファイルをプロジェクトにアップロードして管理する方法を説明します。検索エンジンやLLMエージェント向けに、ポリシーや連絡先情報などを提供する用途で活用できます。
- [プロジェクトをリセットする](https://help.studio.design/ja/articles/7180957-プロジェクトをリセットする.md): プロジェクトの編集済みデータをリセットし、編集前の初期状態へ巻き戻すことができます。プロジェクト作成時に、空白からフルスクラッチで作成されたサイト以外がリセット対象です。
- [Webhook通知を設定する](https://help.studio.design/ja/articles/9115699-webhook通知を設定する.md): StudioでWebhook通知を設定し、サイトの公開・更新・非公開時に外部システムへリアルタイムに情報を連携する方法を説明します。各プロジェクトにつき1つの通知URLを登録できます。
- [1アカウントが作成できるプロジェクト数に上限はありますか？](https://help.studio.design/ja/articles/9144023-1アカウントが作成できるプロジェクト数に上限はありますか.md): Studioでは、1アカウントが作成できるプロジェクト数に内部的な上限が設定されています。具体的な数値は公開されていませんが、通常の利用では問題ありません。
- [プロジェクトをアーカイブするとどうなりますか？削除はできませんか？](https://help.studio.design/ja/articles/2248968-プロジェクトをアーカイブするとどうなりますか-削除はできませんか.md): プロジェクトの完全削除はできません。
- [作成したプロジェクトの削除方法が知りたいです](https://help.studio.design/ja/articles/8859926-作成したプロジェクトの削除方法が知りたいです.md): Studioで作成したプロジェクトの完全削除はできません。アーカイブしプロジェクト一覧から移動させたり、サイトを非公開にすることは可能です。
- [招待されたプロジェクトが一覧に表示されません](https://help.studio.design/ja/articles/7971834-招待されたプロジェクトが一覧に表示されません.md): 招待されたプロジェクトが見当たらないときに確認すべきこと
- [Studioで作成したサイトのデータをバックアップする方法はありますか？](https://help.studio.design/ja/articles/8860293-studioで作成したサイトのデータをバックアップする方法はありますか.md): Studioにはサイトのバージョンを保存・管理し、復元できるバージョン管理機能があります。サイトのバックアップを取るためにご利用いただけます。
- [CMS記事などのStudioのサイトデータを他のプラットフォームへ移行するためエクスポートしたいです](https://help.studio.design/ja/articles/8860404-cms記事などのstudioのサイトデータを他のプラットフォームへ移行するためエクスポートしたいです.md): Studioで作成したサイトのCMSデータやデザインデータのエクスポート機能は現在提供しておりません。
- [新プラン提供開始以降に、旧プランのプロジェクトを複製するとどうなりますか？](https://help.studio.design/ja/articles/10207848-新プラン提供開始以降に-旧プランのプロジェクトを複製するとどうなりますか.md): 2024年12月1日以降にプロジェクトを複製した場合、新プランのFreeプランとして複製されます。

### デザインエディタの基本操作

- [Studioの動作環境](https://help.studio.design/ja/articles/4062142-studioの動作環境.md): Studioのデザインエディタ、及びプロジェクトダッシュボードの推奨操作環境は、PC版のGoogle Chromeです。また、最適な動作を提供するために、最新バージョンの利用を推奨しています。
- [デザインエディタ](https://help.studio.design/ja/articles/12112783-デザインエディタ.md): デザインエディタは、StudioでWebサイトのデザインを作成・編集するためのツールです。ページの追加、デザインに必要なパーツの追加、アニメーションの設定など、Webページのデザイン作成を直感的な操作で行うことが可能です。この記事では、デザインエディタの概要と基本機能を紹介します。
- [左パネル](https://help.studio.design/ja/articles/12889476-左パネル.md): デザインエディタ左側で展開されるパネルについて解説します。左パネルでは、サイトを構成する要素（ボックス）の追加や管理などを行います。パネル上で行う操作の詳細や機能について紹介します。
- [右パネル](https://help.studio.design/ja/articles/12889360-右パネル.md): デザインエディタの右側で展開されるパネルについて解説します。右パネルではボックスごとのデザインやスタイリング、データ編集、サイト・ページのメタ情報設定などを行います。各種操作方法や主な機能を紹介します。
- [ページパネル](https://help.studio.design/ja/articles/4064963-ページパネル.md): 編集中のページを一覧で確認し、管理する場所がページパネルです。左パネルで展開します。本記事ではページパネルの基本操作や設定管理のポイントについて解説します。
- [レイヤーパネル](https://help.studio.design/ja/articles/5838449-レイヤーパネル.md): レイヤーパネルは、デザインエディタ上に配置したすべての要素を階層構造で一覧表示する機能です。レイアウト構造を視覚的に確認しながら要素の選択や並び替え、名称変更、条件付きスタイルやレスポンシブ設定の確認ができます。
- [接続パネル](https://help.studio.design/ja/articles/13568973-接続パネル.md): 接続パネルは、Studio CMS、API、RSSなどデザインエディタ外のデータと連携するための設定や、連携済みデータを利用したプリセットパーツの追加操作を行うパネルです。Studioで作成したサイトに外部データを表示する際の起点となります。
- [StudioのAI機能](https://help.studio.design/ja/articles/12910840-studioのai機能.md): StudioのAI機能は、デザイン編集、テキスト生成、レスポンシブ対応、レイヤー管理、サイトのメタ情報の作成などの作業を直感的かつ迅速に行うことができます。各AI機能の概要と操作方法を紹介します。
- [ライブプレビュー](https://help.studio.design/ja/articles/2639164-ライブプレビュー.md): ライブプレビューは、エディタでの編集内容をブラウザでリアルタイムに確認できる機能です。ライブプレビューURLの発行や削除手順、レスポンシブデザインの動作確認、コメント機能の使い方について解説します。
- [キーボードショートカット一覧](https://help.studio.design/ja/articles/4062139-キーボードショートカット一覧.md): Studioでの操作がより効率的に行えるキーボードショートカット（コマンド）をご紹介します。
- [元に戻す（Undo）・やり直す（Redo）ボタン](https://help.studio.design/ja/articles/2370492-元に戻す-undo-やり直す-redo-ボタン.md): 元に戻す（Undo）・やり直す（Redo）ボタンで、操作の取り消しややり直しをすることができます。操作はご自身の作業履歴のみに反映され、他のメンバーの作業には影響しません。
- [スクリーンの表示倍率を変更する](https://help.studio.design/ja/articles/1949402-スクリーンの表示倍率を変更する.md): デザインエディタでスクリーンの表示倍率を変更する3つの方法について説明します。ズームコントローラー、倍率リセット、ショートカットキーやスクロール操作を使った詳細な倍率調整の手順を確認できます。
- [コメント機能](https://help.studio.design/ja/articles/9069568-コメント機能.md): Studioのコメント機能を使うと、デザイン上にコメントを追加・確認・管理できます。この記事では、デザインエディタでのコメント操作を中心に、コメントモードの使い方やコメントの編集・削除方法を解説します。
- [コンテンツ編集モード](https://help.studio.design/ja/articles/6510478-コンテンツ編集モード.md): コンテンツ編集モードは、特定のコンテンツのみを編集できる状態にする機能です。テキスト・画像・アイコン以外の編集を制限し、レイアウトに影響を与えずにコンテンツの編集に集中できます。
- [カラーパレットで色を設定する](https://help.studio.design/ja/articles/12979651-カラーパレットで色を設定する.md): カラーパレットでボックスの塗りや枠線、テキストやアイコンの色、背景色などを設定・編集ができます。単色やグラデーション、RGBA数値やHEXコード、カラーピッカー、カラースタイルなどを使った色の指定方法について解説します。
- [エディタ上にグリッド線（ガイドやルーラー）は表示できますか？](https://help.studio.design/ja/articles/8580772-エディタ上にグリッド線-ガイドやルーラー-は表示できますか.md): グリッド線表示機能の提供はありません
- [バージョン管理機能で、サイトの編集履歴を管理する](https://help.studio.design/ja/articles/7793727-バージョン管理機能で-サイトの編集履歴を管理する.md): デザインエディタ内での編集履歴を「バージョン」として保存し、一覧から確認・復元できます。自動保存と手動保存の両方に対応し、保存期間は利用プランごとに異なります。
- [タブレットやスマホからStudioエディタやCMSダッシュボードの操作はできますか？](https://help.studio.design/ja/articles/8870274-タブレットやスマホからstudioエディタやcmsダッシュボードの操作はできますか.md): Studioの管理画面（デザインエディタ・CMSダッシュボード・フォームダッシュボードなど）は、PC版のGoogle Chromeブラウザのみ編集操作が可能です。最新バージョンの利用を推奨しています。
- [マークダウン記法](https://help.studio.design/ja/articles/4065297-マークダウン記法.md): Studioでは、CMSダッシュボードの記事アイテムの詳細編集画面と、デザインエディターのリッチテキストボックスでマークダウン記法を利用できます。見出しや箇条書きなどの基本的なスタイルと、リッチテキスト特有のスタイルについて説明します。
- [ボックスを追加する](https://help.studio.design/ja/articles/4062145-ボックスを追加する.md): ボックス（要素）をページに配置する方法を説明します。
- [ボックスを選択する](https://help.studio.design/ja/articles/2638956-ボックスを選択する.md): デザインエディタでボックスを選択する方法を説明します。スクリーン上からの選択と、レイヤーパネルを利用した選択の2通りを紹介します。
- [ボックスをコピー＆ペーストする](https://help.studio.design/ja/articles/5837997-ボックスをコピー-ペーストする.md): スクリーンに追加したボックスを複製し、同じデザイン要素を再利用する手順を説明します。単一または複数のボックスをコピー＆ペーストできます。
- [親子ボックス](https://help.studio.design/ja/articles/1882576-親子ボックス.md): Studio エディタで、ボックス同士を親子関係にして入れ子構造を作る方法を説明します。
- [ボックスのグループ化](https://help.studio.design/ja/articles/4062148-ボックスのグループ化.md): ボックスのグループ化は、配置済みの複数のボックスを1つのまとまりとして扱う機能です。ボックス同士をまとめることで、レイアウトや方向の調整をしやすくできます。
- [アップロード可能なファイル形式と容量制限](https://help.studio.design/ja/articles/2427602-アップロード可能なファイル形式と容量制限.md): Studioでは、画像・動画・PDFをアップロードしてWebサイトのデザインや構成に活用できます。本記事では、対応ファイル形式、容量制限、現在の容量確認方法について説明します。
- [各種ファイル（画像・動画・PDF）のアップロードと管理](https://help.studio.design/ja/articles/1949386-各種ファイル-画像-動画-pdf-のアップロードと管理.md): 画像・動画・PDFファイルのアップロードをして、Webページのデザインや構成に活用できます。各種ファイルはアセットパネルにアップロードして利用します。ファイルのアップロード方法、管理、削除などの基本操作を説明します。
- [サイズの大きい画像をアップすると、画質が粗くなってしまいます](https://help.studio.design/ja/articles/4501211-サイズの大きい画像をアップすると-画質が粗くなってしまいます.md): 2025年5月のアップデートで、アップロード画像の原本はそのまま保持されるようになりました。それでも画像が粗く見える場合の原因と対処方法を説明します。
- [Studioに動画を直接アップロードできますか？](https://help.studio.design/ja/articles/9309277-studioに動画を直接アップロードできますか.md): Studioエディタに1ファイルあたり1GBまでのmp4やwebm形式の動画ファイルをアップロードすることが可能です。アップロードした動画は直接ページに配置できます。

### ページ設定とサイト構成

- [ページタイプ](https://help.studio.design/ja/articles/4064967-ページタイプ.md): Studioでは、用途に合わせてさまざまな「ページタイプ」をサイトに追加できます。この記事では主要なページタイプの特徴と追加方法、利用シーンのイメージを解説します。
- [ページタイプ：ホーム](https://help.studio.design/ja/articles/5049709-ページタイプ-ホーム.md): サイトのトップページとなる、ページタイプ「ホーム」の設定方法や未設定の場合の仕様について解説します。
- [ページタイプ：404ページ](https://help.studio.design/ja/articles/3614820-ページタイプ-404ページ.md): 404ページは、存在しないURLにアクセスされた際に表示されるエラーページです。役割と表示仕様を理解し、サイト離脱を防ぐ404ページの設計と設定方法について説明します。
- [ページタイプ：モーダル](https://help.studio.design/ja/articles/2639232-ページタイプ-モーダル.md): モーダルは、ページ遷移を発生させずに追加情報を重ねて表示するポップアップウィンドウです。ボタンや画像からのクリックで表示し、ユーザーの操作体験を維持したまま情報を伝えられます。このページでは、モーダルの追加方法や編集・設定方法を紹介します。
- [ページタイプ：動的ページ](https://help.studio.design/ja/articles/4055759-ページタイプ-動的ページ.md): 動的ページは、Studio CMSやData Connect APIで取得した詳細データを動的に表示するためのページタイプです。この記事では、動的ページの追加方法、データの紐付け、デザインやページ設定のポイントを説明します。
- [ページタイプ：動的モーダル](https://help.studio.design/ja/articles/8743438-ページタイプ-動的モーダル.md): 動的モーダルは、Studio CMSやData Connect APIで取得した詳細データをモーダルウィンドウ内に表示するページタイプです。ページ遷移を行わずに、リスト項目の詳細情報を見せたい場合に利用します。
- [モーダルの開閉リンクを設定する](https://help.studio.design/ja/articles/2284660-モーダルの開閉リンクを設定する.md): 作成済みのモーダルページをリンク先に設定する方法と、モーダル上の要素にモーダルを閉じるリンクを設定する方法を説明します。
- [モーダル内でスクロールを設定する](https://help.studio.design/ja/articles/3596873-モーダル内でスクロールを設定する.md): モーダル内にスクロールを設定すると、サイト閲覧者がページを移動せずに必要な情報を効率的に閲覧できるようになります。設定方法を解説します。
- [リダイレクトページ（301リダイレクトを設定する）](https://help.studio.design/ja/articles/8366949-リダイレクトページ-301リダイレクトを設定する.md): URLやサイト構造を変更した際に、訪問者を新しいURLへ転送する「301リダイレクト」の設定・編集・削除方法を解説します。誤アクセスによる404ページ表示を防ぎ、訪問者の体験やSEO評価を維持します。
- [ページタイプ：検索ページ](https://help.studio.design/ja/articles/6729386-ページタイプ-検索ページ.md): 検索ページは、Studio CMSで公開している記事のサイト内検索機能として活用できるページです。ページの仕組みと編集方法を説明します。
- [ページを作成・編集する](https://help.studio.design/ja/articles/4064961-ページを作成-編集する.md): ページはWebサイトを構成する単位です。Studioでは、用途に応じて複数のページタイプから選んでページを作成します。この記事では、ページタイプの種類と、ページの追加・複製・削除など基本的な操作方法について説明します。
- [Studioバナーの表示設定](https://help.studio.design/ja/articles/4066039-studioバナーの表示設定.md): Studioサイトに表示されるStudioバナーの表示設定方法をご紹介します。バナーの非表示は有料プランでのみ設定可能です。
- [ページのURLを設定する（パス）](https://help.studio.design/ja/articles/1921450-ページのurlを設定する-パス.md): ページごとにパスを設定し、URLを任意の文字列に変更できます。この記事では、パスの設定手順や、スラッシュを使った階層化によるディレクトリ管理の方法、ページタイプごとのパスの挙動について解説します。
- [サイト・ページにカスタムコードを追加する](https://help.studio.design/ja/articles/7890587-サイト-ページにカスタムコードを追加する.md): Studio有料プランのプロジェクトでは、カスタムコード機能を利用すると、サイトや個々のページの\<head\>と \<body\>タグに独自のコードを追加できます。この記事では、制限と追加方法を詳しく解説します。
- [構造化データを設定する](https://help.studio.design/ja/articles/6549779-構造化データを設定する.md): Studioのページに構造化データ（JSON‑LD形式）を追加する方法を説明します。構造化データを正しく設定することで、検索結果での表示が充実し、SEOの向上につながります。
- [サイトマップファイル](https://help.studio.design/ja/articles/4581345-サイトマップファイル.md): Studioでは、公開サイトの構造を検索エンジンに正しくインデックスさせるためのXML形式のサイトマップファイルを自動生成できます。本記事では、サイトマップファイルの概要と設定手順、利用時の注意点を紹介します。
- [タイトルと説明文（ディスクリプション）を設定する](https://help.studio.design/ja/articles/4064972-タイトルと説明文-ディスクリプション-を設定する.md): Studioのサイトやページに、検索結果やSNSで表示されるタイトルと説明文（ディスクリプション）を設定する方法を説明します。設定の基本、文字数の目安、サイト設定とページ設定の違いも解説します。
- [AIでタイトルと説明文（ディスクリプション）を自動生成する](https://help.studio.design/ja/articles/10472120-aiでタイトルと説明文-ディスクリプション-を自動生成する.md): エディタ上のテキスト情報をもとに、サイトやページのメタ情報（タイトル、ディスクリプション）をAIが自動で生成します。
- [ファビコンを設定する](https://help.studio.design/ja/articles/4066089-ファビコンを設定する.md): Studioでサイトのファビコン\(Favicon\)を設定する方法と注意点を解説します。
- [ソーシャルカバー画像（サムネイル / OGP）](https://help.studio.design/ja/articles/4066111-ソーシャルカバー画像-サムネイル-ogp.md): SNSでURLをシェアした際に表示されるソーシャルカバー（サムネイル / OGP）画像の設定方法と注意点を解説します。未設定の場合は、SNSでの共有時に画像が表示されません。
- [ページをnoindexに設定する](https://help.studio.design/ja/articles/4258184-ページをnoindexに設定する.md): 検索エンジンにインデックスさせたくないページに「noindex」を設定する方法を説明します。noindexを設定しても、AIクローラーのアクセスを制御することはできません。
- [ページタイプ「ホーム」を設定していないとどうなりますか？](https://help.studio.design/ja/articles/6670109-ページタイプ-ホーム-を設定していないとどうなりますか.md): ページパネル上での最上部「ホーム」扱いとなります。
- [リストのURLプロパティからコピーしたURLをペーストできない場合](https://help.studio.design/ja/articles/10756842-リストのurlプロパティからコピーしたurlをペーストできない場合.md): Studioのリストに登録済みのURLプロパティからコピーしたURLを、別のリストアイテムや301リダイレクト設定のURL欄にペーストできない場合に、「ペーストしてスタイルを合わせる」を使った対処方法と具体的な手順を説明します。
- [ページリストを階層化（フォルダー化）する](https://help.studio.design/ja/articles/5424391-ページリストを階層化-フォルダー化-する.md): パスにスラッシュを入力し、スラッシュより前の文字列が合致すると自動でディレクトリとして格納されます。
- [ページネーションを追加したい](https://help.studio.design/ja/articles/8606987-ページネーションを追加したい.md): ページネーションを追加する機能は現在提供しておりません。
- [パンくずリストを設置したい](https://help.studio.design/ja/articles/4301242-パンくずリストを設置したい.md): 現状Studioでは、ページ構成に応じて自動でパンくずリストを設置する機能はありません。

### ボックスのデザイン設定

- [Figma to Studio](https://help.studio.design/ja/articles/8277073-figma-to-studio.md): プラグインを使ってFigmaのデザインをStudioへインポートする
- [ボックスのレイアウト：サイズ（幅・高さ）](https://help.studio.design/ja/articles/2639205-ボックスのレイアウト-サイズ-幅-高さ.md): ボックスのサイズを設定する方法と、利用できる各サイズ単位の特徴やユースケースを紹介します。適切な単位を選ぶことで、レスポンシブ対応かつ更新しやすいレイアウトを実現できます。
- [ボックスのレイアウト：マージン・パディング・ギャップ（余白）](https://help.studio.design/ja/articles/1892843-ボックスのレイアウト-マージン-パディング-ギャップ-余白.md): Studioでボックスに余白を設定する方法を説明します。マージン・パディング・ギャップの違いと役割を整理し、それぞれの具体的な設定手順を紹介します。
- [ボックスのレイアウト：配列方向と配置](https://help.studio.design/ja/articles/4062166-ボックスのレイアウト-配列方向と配置.md): Studioではボックスを積み重ねてページを作成します。ボックスのレイアウトは、親ボックスの配列方向と、子ボックスの配置を設定することで調整できます。親ボックスを選択すると、配置間隔や配列方向の設定ができます。
- [ボックスのポジション：位置・重ね順・はみ出し](https://help.studio.design/ja/articles/4062251-ボックスのポジション-位置-重ね順-はみ出し.md): ボックスのポジション設定では、相対・固定・絶対・追従などの位置設定に加え、重ね順やはみ出しの表示方法を調整します。デザインエディタ右側の\[ボックス\]タブから操作します。
- [ボックスのポジション：位置（相対・固定・絶対・追従）](https://help.studio.design/ja/articles/4062242-ボックスのポジション-位置-相対-固定-絶対-追従.md): ボックスを配置する際に、親ボックス・周囲のボックス・スクリーン全体のいずれかを基準に位置を決める4種類のルール（相対・固定・絶対・追従）について、特徴と設定方法を説明します。
- [ボックスのポジション：はみ出し設定](https://help.studio.design/ja/articles/4129078-ボックスのポジション-はみ出し設定.md): はみ出し設定は、親ボックスからはみ出した子ボックス（オーバーフロー）の見え方を制御する機能です。「表示」「非表示」「スクロール」の3種類から選択します。
- [ボックスを重ねる（ネガティブマージン）](https://help.studio.design/ja/articles/2639157-ボックスを重ねる-ネガティブマージン.md): ボックスのマージンにマイナスの数値を設定すると、余白を詰めてボックス同士を重ねたレイアウトを表現できます。ボックスの外側の余白を調整するマージンを使うため、他の余白設定と組み合わせて柔軟にデザインできます。
- [複数のボックスの縦幅（高さ）を揃える](https://help.studio.design/ja/articles/5707066-複数のボックスの縦幅-高さ-を揃える.md): 複数のボックスを横並びにした時の高さを揃えるには、それぞれのボックスをグループ化し、親ボックスに「両端揃え」の設定をします。
- [ボックスを画面端に固定配置する](https://help.studio.design/ja/articles/4524705-ボックスを画面端に固定配置する.md): ボックスを画面端に固定するには、画面端に最も近い辺と、スクリーン端の距離を指定します。
- [変形・回転・傾き](https://help.studio.design/ja/articles/13448110-変形-回転-傾き.md): 指定したボックスに、移動・回転・拡大・縮小、傾きといった変形を加えられます。変形ハンドルを使うと、スクリーン上で直感的に変形操作を行えます。
- [ボックスの外観：フィルターを設定する](https://help.studio.design/ja/articles/5289922-ボックスの外観-フィルターを設定する.md): ボックスのフィルター加工について説明します。ブレンドモード・フィルター・背面フィルターをそれぞれ設定できます。
- [ボックスの外観：背景色を設定する](https://help.studio.design/ja/articles/4062429-ボックスの外観-背景色を設定する.md): ページに配置したボックスの色を設定する方法をご紹介します。カラーパレットを使用し、単色・グラデーション、RGBA・HEXコード指定やカラーピッカーなど、豊富な色の選択方法があります。
- [ボックスの外観：枠線を設定する](https://help.studio.design/ja/articles/1949370-ボックスの外観-枠線を設定する.md): ボックスに枠線を設定し、色や種類をカスタマイズできます。枠線を追加することで、コンテンツの区切りを明確にしたり、デザインにアクセントを加えることができます。
- [ボックスの外観：角丸を設定する](https://help.studio.design/ja/articles/1892943-ボックスの外観-角丸を設定する.md): ボックスの角を丸くする「角丸」機能について紹介します。角丸を50%に設定すると、要素を正円に成形できます。
- [ボックスの外観：影（シャドウ）を設定する](https://help.studio.design/ja/articles/1949371-ボックスの外観-影-シャドウ-を設定する.md): ボックスにドロップシャドウやインナーシャドウを設定する方法と、色・位置・ぼかし・広がり・対象など各項目の意味を説明します。
- [ボックスの外観：不透明度](https://help.studio.design/ja/articles/4062436-ボックスの外観-不透明度.md): ボックスに不透明度を設定する方法をや設定箇所を説明します。
- [背景を斜めに塗る・斜め背景を作成する](https://help.studio.design/ja/articles/2767158-背景を斜めに塗る-斜め背景を作成する.md): Studioの塗り機能を使って、斜めの背景を作成する方法を紹介します。
- [テキストスタイル・カラースタイルとは](https://help.studio.design/ja/articles/16048476-テキストスタイル-カラースタイルとは.md): テキストのフォントやサイズ、色などのデザイン設定を登録し、プロジェクト内で繰り返し使い回せる「スタイル」機能の概要と、テキストスタイル・カラースタイルの違いを解説します。
- [カラースタイルを設定する](https://help.studio.design/ja/articles/10755400-カラースタイルを設定する.md): プロジェクト全体で繰り返し使用するブランドカラーなどの色を「カラースタイル」として登録し、一元管理する方法を説明します。ラベルや階層を設定することで、登録したカラースタイルを効率的に整理できます。
- [テキストスタイルを設定する](https://help.studio.design/ja/articles/10129702-テキストスタイルを設定する.md): テキストスタイルは、フォント、サイズ、文字間、行高などのテキスト設定をまとめて管理できる機能です。登録可能な設定や、登録方法、フォルダでの整理方法を説明します。
- [選択色を活用する](https://help.studio.design/ja/articles/10136373-選択色を活用する.md): 選択中のボックスやグループ内で使用している色を一覧で確認し、一括で変更できます。ページ全体の配色調整や色の使用箇所のハイライト表示など、効率的な色管理のための機能と主な活用シーンを紹介します。
- [マイカラー（My Color）への新規登録停止と機能提供終了について](https://help.studio.design/ja/articles/10756915-マイカラー-my-color-への新規登録停止と機能提供終了について.md): 2025年3月13日より、マイカラーへの色の新規登録機能を終了しました。今後はカラースタイル機能をご利用ください。
- [Studioで利用できるフォント](https://help.studio.design/ja/articles/10510423-studioで利用できるフォント.md): StudioではWebフォント（Google Fonts、TypeSquare）やシステムフォントを標準で利用できます。さらに、手持ちのフォントファイルをアップロードして使うことも可能です。
- [フォントリスト：サイト内で使用するフォントを管理する](https://help.studio.design/ja/articles/10509895-フォントリスト-サイト内で使用するフォントを管理する.md): フォントリストは、サイト内で使用するフォントを「フォントファミリー」として一元管理する機能です。サブフォントの設定やデフォルトフォントの指定など、フォント運用を効率化する管理方法を説明します。
- [フォントの設定・置換・削除](https://help.studio.design/ja/articles/1949383-フォントの設定-置換-削除.md): テキストボックスにフォントを設定する手順と、設定済みのフォントを置換・削除する手順を説明します。
- [カスタムフォント（Custom Fonts）](https://help.studio.design/ja/articles/3190900-カスタムフォント-custom-fonts.md): フォントファイルをアップロードして、Studio内で利用できます。対応するファイル形式やアップロードの手順を案内します。
- [StudioでTypeSquareを使用する](https://help.studio.design/ja/articles/2925373-studioでtypesquareを使用する.md): モリサワが提供するWebフォントサービス「TypeSquare」をStudioで利用する際は、フォントを追加する設定が必要です。
- [フォント選びと使い分けのヒント：システムフォント（System Font）とWebフォント](https://help.studio.design/ja/articles/10510748-フォント選びと使い分けのヒント-システムフォント-system-font-とwebフォント.md): StudioでWebサイトを作成する際のフォントの選び方を、システムフォントとWebフォントの観点から説明します。表示速度を重視する場合はシステムフォント、サイトデザインを重視する場合はWebフォントを推奨しています。
- [エディタで設定したフォントが、異なるフォントとして表示される場合](https://help.studio.design/ja/articles/10510623-エディタで設定したフォントが-異なるフォントとして表示される場合.md): Studioのエディタで指定したフォントと、PCやスマートフォンなど閲覧環境で表示されるフォントが異なる場合の主な原因と、システムフォント設定の確認方法および対処方法を説明します。
- [1プロジェクトで使用できるフォント数の上限](https://help.studio.design/ja/articles/2925401-1プロジェクトで使用できるフォント数の上限.md): Studioプロジェクトで使用できるフォント数の上限についてご説明します。FONTPLUSは最大50フォントファミリーまで、その他のフォントに上限はありません。
- [FONTPLUSの提供終了について（2026年4月7日終了）](https://help.studio.design/ja/articles/14130523-fontplusの提供終了について-2026年4月7日終了.md): Studioで提供している「FONTPLUS」フォントは、提供元であるMonotype社との契約終了に伴い、2026年4月7日をもって提供を終了します。提供終了後の影響と、代替フォントへの変更手順について説明します。
- [コンポーネント](https://help.studio.design/ja/articles/4055523-コンポーネント.md): コンポーネントは、プロジェクト内で繰り返し使用するデザイン要素を共通パーツとして登録し、再利用や一括管理ができる機能です。この機能を活用することで、デザインの一貫性を保ちながら効率的なウェブサイト制作が可能になります。
- [コンポーネントの表示条件設定](https://help.studio.design/ja/articles/16795654-コンポーネントの表示条件設定.md): コンポーネントの表示条件は、プロパティの設定状況に応じて、配置箇所ごとに要素の表示・非表示を切り替える機能です。設定できるプロパティの種類と手順を説明します。
- [コンポーネント：プロパティ](https://help.studio.design/ja/articles/9743829-コンポーネント-プロパティ.md): コンポーネントプロパティを使うと、配置箇所ごとに画像・テキスト・カラー・表示の有無を変えられます。この記事では、使用できるプロパティの種類と管理方法を説明します。
- [条件付きスタイル](https://help.studio.design/ja/articles/2639206-条件付きスタイル.md): 条件付きスタイルは、閲覧者の操作やページの状態に応じて、ボックスの見た目やレイアウト（スタイル）を切り替える機能です。指定できる発生条件の種類と、基本的な設定方法を説明します。
- [条件付きスタイル：スクロールエフェクトを設定する（Scroll Effect）](https://help.studio.design/ja/articles/14494654-条件付きスタイル-スクロールエフェクトを設定する-scroll-effect.md): パララックスやスクロール連動など、ページのスクロール位置や要素が画面内に入るタイミングに応じて、要素を動かしたりフェードさせたりする動きのある演出を設定できます。条件付きスタイルのスクロール（Scroll Effect）を使用します。
- [アニメーション（イージング・時間・遅延）を設定する](https://help.studio.design/ja/articles/4055409-アニメーション-イージング-時間-遅延-を設定する.md): Studioでは、ボックスに移動や回転などのアニメーションを設定できます。アニメーションは、通常時のスタイルと条件付きスタイルの差分で表現します。イージング・時間・遅延を組み合わせて、変化の速度・緩急や開始タイミングを細かく調整できます。
- [ボタンにカーソルを乗せると色が変わるアニメーションの作成方法](https://help.studio.design/ja/articles/7028894-ボタンにカーソルを乗せると色が変わるアニメーションの作成方法.md): 条件付きスタイルのホバーと（in）ホバーを使って、ボタンにカーソルを乗せたときに色が変わるアニメーションを設定します。
- [ホバー時に画像を切り替える](https://help.studio.design/ja/articles/3334193-ホバー時に画像を切り替える.md): 通常時の画像を上に重ね、ホバーの条件付きスタイルで不透明度を変えると、画像が切り替わるような表現を作成できます。
- [ホバー時に端から色が変わるボタンを作成する](https://help.studio.design/ja/articles/7120280-ホバー時に端から色が変わるボタンを作成する.md): ボタンにカーソルを乗せたときに端から色が広がる表現を設定する手順を説明します。「ホバー」と「（in）ホバー」の条件付きスタイルを指定し、アニメーションで動きの調整をします。
- [出現時に下からフェードインするアニメーションを作成する](https://help.studio.design/ja/articles/7017740-出現時に下からフェードインするアニメーションを作成する.md): 画像やテキストが下からふわっと現れるアニメーションは、条件付きスタイルの出現時とアニメーション設定を組み合わせて作成します。基本の設定は、アニメーションテンプレートを使用すると簡単に設定できます。
- [タイピング風テキストのアニメーションを作成する](https://help.studio.design/ja/articles/14833592-タイピング風テキストのアニメーションを作成する.md): 出現時に文字が一文字ずつ表示されるアニメーションを設定する方法を紹介します。各文字を別のテキストボックスに分けて、それぞれに「出現時」の条件付きスタイルで不透明度と遅延を段階的に設定します。
- [ローディング風アニメーションを作成する](https://help.studio.design/ja/articles/7120307-ローディング風アニメーションを作成する.md): 条件付きスタイルを使って、画面表示時に重なるスプラッシュスクリーン風のアニメーションを作る手順を説明します。表示順や重ね順、確認方法もあわせて紹介します。
- [スクロールに連動して画像がゆっくりスライドする表現（パララックス）を設定する](https://help.studio.design/ja/articles/15068733-スクロールに連動して画像がゆっくりスライドする表現-パララックス-を設定する.md): ページのスクロールに合わせて、画像がゆっくり移動する表現を設定する方法を解説します。条件付きスタイルのスクロールを使用し、バナー内で画像が上方向へ動く設定手順を紹介します。
- [スクロール進行バーを作成する](https://help.studio.design/ja/articles/15076921-スクロール進行バーを作成する.md): ページのスクロール進行度に応じて左から右へ伸びていく「プログレスバー」の作り方を紹介します。条件付きスタイルのスクロールエフェクトを使用して設定します。
- [リンクやホバーアニメーションが動作しない時の修正方法](https://help.studio.design/ja/articles/8127522-リンクやホバーアニメーションが動作しない時の修正方法.md): リンクやホバーアニメーションが動作しないときに確認したいポイントをまとめました。リンク設定、ボックスの重なり、アニメーション用ボックスの重ね順の3つを順番に確認して解消します。
- [「出現時」のアニメーションが表示されない原因と対処法](https://help.studio.design/ja/articles/4170867-出現時-のアニメーションが表示されない原因と対処法.md): 条件付きスタイル「出現時」を使いアニメーションを設定したボックスが表示されない場合、ボックスがその親ボックスまたは画面からはみ出ていることが主な原因です。レスポンシブ設定時のモバイル画面幅でよく発生します。
- [コマンドパレットでプロジェクト内外を検索する](https://help.studio.design/ja/articles/8679425-コマンドパレットでプロジェクト内外を検索する.md): コマンドパレットは、ページやダッシュボードメニュー、CMSアイテムなどのプロジェクト内検索と、他プロジェクトの検索ができる機能です。
- [ヘッダーやボタンを画面に固定表示する](https://help.studio.design/ja/articles/9360496-ヘッダーやボタンを画面に固定表示する.md): ヘッダーやボタンなどの要素をスクロール中も常に画面上に表示するための「固定位置」の設定方法を説明します。固定表示ができない場合の確認ポイントもあわせて紹介します。
- [ボックスを横並び・縦並びに変更する方法](https://help.studio.design/ja/articles/1883297-ボックスを横並び-縦並びに変更する方法.md): Studioでボックスの並ぶ方向を変更する手順と注意点について解説します。ボックスの並ぶ方向は、配置メニューで編集します。
- [画像上のテキストを見やすくするコツ](https://help.studio.design/ja/articles/6674382-画像上のテキストを見やすくするコツ.md): 画像の上にテキストを配置した際に視認性を高めるため、画像を暗くする2つの方法を紹介します。
- [タブ切り替えデザインの作成方法](https://help.studio.design/ja/articles/9229487-タブ切り替えデザインの作成方法.md): Studioでタブ切り替えを実装する手順を解説します。タブを使ってコンテンツを整理することで、ページをすっきりと見やすくできます。
- [エディタ上でテーブル（表）を追加したい](https://help.studio.design/ja/articles/9234052-エディタ上でテーブル-表-を追加したい.md): Studioでは、エディタ上でテーブルの追加機能は提供していません。リストやボックスの組み合わせでの作成をご検討ください。
- [ダウンロードボタンを設置したい](https://help.studio.design/ja/articles/3640783-ダウンロードボタンを設置したい.md): 直接ダウンロードボタンを設置する機能はありませんが、PDFファイルをアップロードすることで、PDFへのリンクを設定し、遷移先で保存してもらうことが可能です。
- [アフィリエイトタグを設置したい](https://help.studio.design/ja/articles/8824984-アフィリエイトタグを設置したい.md): Studioではアフィリエイトタグ設置に特化した機能は提供していません。カスタムコード機能を活用して設置をお試しください。
- [エディタ上のページやデザインの一部を誤って削除してしまった場合の対処法](https://help.studio.design/ja/articles/10473123-エディタ上のページやデザインの一部を誤って削除してしまった場合の対処法.md): プロジェクト内のページやデザインデータを誤って削除してしまった場合、一つ戻るボタンか、バージョン管理の復元で対処できる場合があります。その補法を説明します。
- [エディタ上でボックスを選択できません](https://help.studio.design/ja/articles/4185027-エディタ上でボックスを選択できません.md): Studioエディタ上でボックスを選択できない場合の解決策をご案内しています。コンポーネントやリストのボックスを選択して編集する方法、ダイレクト選択、レイヤーパネルの活用方法を解説します。
- [左パネルを開けない、右パネルの設定項目が少ない場合](https://help.studio.design/ja/articles/6717538-左パネルを開けない-右パネルの設定項目が少ない場合.md): 追加パネルやレイヤーパネルを選択できない場合、コンテンツ編集モードがオンになっていることが主な原因です。エディタ左下の鉛筆アンコンをクリックするとモードが切り替わって解決します。
- [「デザインデータの容量が大きくなっています」と表示される場合](https://help.studio.design/ja/articles/6969479-デザインデータの容量が大きくなっています-と表示される場合.md): デザインデータ容量とは何か、そして上限に近づいた時の対処法をご紹介します。
- [ボックス入れ子構造の階層上限](https://help.studio.design/ja/articles/2680848-ボックス入れ子構造の階層上限.md): Studioのボックス入れ子構造で、複雑なデザインを作成される場合には、意図しないデータ破損を防ぐため、最大11階層を目安とした構成をご検討ください。「ボックスの親子関係」に関するエラーが発生した場合の対処方法についても解説します。
- [固定位置でヘッダーを配置すると、デザインと重なってしまう](https://help.studio.design/ja/articles/6211334-固定位置でヘッダーを配置すると-デザインと重なってしまう.md): 固定位置のヘッダーが見出しや画像と重なってしまう場合の原因と、ヘッダー分の余白を追加して重なりを解消する方法を説明します。
- [埋め込んだ背景動画の上下や左右に余白ができてしまう場合](https://help.studio.design/ja/articles/5735974-埋め込んだ背景動画の上下や左右に余白ができてしまう場合.md): Embedボックスのサイズを変更して、余白の調整をします。ただし、一定の画面幅以上では調整後も余白が発生してしまう可能性があります。
- [コピー & ペーストができない場合](https://help.studio.design/ja/articles/4334472-コピー-ペーストができない場合.md): コピー&ペーストやショートカットキーが使えない原因は様々です。この記事では、原因を絞り込むための3つの方法をご紹介します。
- [画像に青い網がかかって文字を重ねられない場合](https://help.studio.design/ja/articles/4060898-画像に青い網がかかって文字を重ねられない場合.md): 画像がBoxモードで、サイズが子要素より大きいことをご確認ください。
- [Toggle ボックスのメニューが上下に開いて動いてしまう場合](https://help.studio.design/ja/articles/8855480-toggle-ボックスのメニューが上下に開いて動いてしまう場合.md): Studioの Toggle ボックスを使って作成したドロップダウンメニューが展開時に動いてしまう場合の対処方法をご紹介します。
- [ボックスの画像・テキスト・リンクを変更したら、他のボックスも同じ内容に置き換わってしまった](https://help.studio.design/ja/articles/5182035-ボックスの画像-テキスト-リンクを変更したら-他のボックスも同じ内容に置き換わってしまった.md): ボックスの画像・テキスト・リンクを変更すると同じ列の他のボックスも置き換わってしまった場合の原因、元に戻す方法、そして今後の正しい編集方法を説明します。
- [サイトが意図せず左に寄る、右側に余白ができる](https://help.studio.design/ja/articles/9719956-サイトが意図せず左に寄る-右側に余白ができる.md): 拡張機能が原因で発生する可能性があります。拡張機能を無効にすることで解決することがあります。
- [スクロールバーが表示されない](https://help.studio.design/ja/articles/4184997-スクロールバーが表示されない.md)
- [縦書きテキストが、プレビューやサイトで崩れてしまう場合](https://help.studio.design/ja/articles/11008320-縦書きテキストが-プレビューやサイトで崩れてしまう場合.md): 縦書きのテキストがライブプレビューや公開サイトで表示崩れしてしまう場合について説明します。

### ボックスのデータ設定（ID、タグ、リンク設定）

- [アンカーリンク用のIDをボックスに設定する](https://help.studio.design/ja/articles/4064980-アンカーリンク用のidをボックスに設定する.md): アンカーリンク（ページ内リンク）設定時に必要な遷移先となるボックスへのID設定の手順を説明します。IDの設定手順と、リンクの種類ごとのユースケースを紹介します。
- [HTMLタグの種類と設定手順](https://help.studio.design/ja/articles/4064982-htmlタグの種類と設定手順.md): Studioのボックスに設定できるHTMLタグの種類と、タグ設定の具体的な手順を説明します。
- [HTML の見出しタグ \<h1\> - \<h6\>](https://help.studio.design/ja/articles/6400176-html-の見出しタグ-h1-h6.md): Studioでは、HTMLの見出しタグを\<h1\>から\<h6\>まで設定できます。見出しタグを設定することで、SEO に有効な構造化されたページを作成できます。
- [構造化データのよくあるエラーと対処法](https://help.studio.design/ja/articles/9556108-構造化データのよくあるエラーと対処法.md): 構造化データのテスト方法やよくあるエラーの原因と解決策をご紹介します。
- [各種リンクの設定方法](https://help.studio.design/ja/articles/4055397-各種リンクの設定方法.md): Studioでのリンク設定方法を解説します。ページ内リンク・外部サイトへのリンク・モーダルの開閉設定などを紹介します。
- [PDFファイルをリンク先に指定する](https://help.studio.design/ja/articles/12741796-pdfファイルをリンク先に指定する.md): StudioエディタにアップロードしたPDFファイルは、ページ上で直接表示されませんが、リンク先に指定できます。会社案内や配布資料などさまざまな用途にPDFリンクを活用できます。
- [ページ最上部まで自動スクロールするボタンを設置する](https://help.studio.design/ja/articles/5762092-ページ最上部まで自動スクロールするボタンを設置する.md): ボタンやアイコンボックスにアンカーリンクを設定し、クリックするとページ最上部まで戻るボタンを設置する方法を説明します。遷移先には、ページ最上部のベースボックスを指定します。
- [電話をかけるリンクを設定する](https://help.studio.design/ja/articles/5384174-電話をかけるリンクを設定する.md): 電話発信用のリンクを設定して、クリックやタップで電話をかけることができる設定手順を解説します。PCとタブレットではリンクを設定せず、スマホでの表示のみに電話発信用のリンクを設定する方法も説明します。
- [Facebookシェアボタンを設置する](https://help.studio.design/ja/articles/4292814-facebookシェアボタンを設置する.md): ボタンを設置し、Facebookシェアボタンのリンクを設定する方法を紹介します。
- [メールソフトの自動起動リンク（mailto:）を設定する](https://help.studio.design/ja/articles/1921382-メールソフトの自動起動リンク-mailto-を設定する.md): Studioでmailto:を設定する方法を説明します。また、CCやBCCの指定、件名・本文の初期設定、迷惑メール対策などのカスタマイズ方法も紹介します。
- [X（Twitter）シェアボタンを設置する](https://help.studio.design/ja/articles/2677605-x-twitter-シェアボタンを設置する.md): Xでのシェアを促すボタンの設置方法を解説します。Studioでは、URLを指定するだけでシェアボタンを設置できます。必要なオプションやサンプルコードも紹介しています。
- [リンクを設定しても正しいページに遷移しない原因と対処法](https://help.studio.design/ja/articles/9715664-リンクを設定しても正しいページに遷移しない原因と対処法.md): リンクの設定箇所から、期待したページに遷移しない（飛ばない）場合に考えられる原因と、デザインエディタ上で確認するポイントと対処方法について説明します。

### 各種ボックス

- [セクション・セクションパーツ](https://help.studio.design/ja/articles/7220109-セクション-セクションパーツ.md): ページ内のコンテンツを整理し、レイアウトを構築する際に使えるセクションの種類と追加手順を説明します。あらかじめレスポンシブ設定されたセクションパーツの配置が便利です。セクションパーツのサイズを変更するとレスポンシブ設定が崩れるため注意が必要です。
- [画像ボックス](https://help.studio.design/ja/articles/4064885-画像ボックス.md): 画像ボックスは、ページに画像を追加する際に利用するボックス要素です。Studioにアップロードした画像、Unsplashのフリー画像、外部サーバーに保存された画像のURL指定に対応しています。
- [画像ボックス：BoxモードとImgモード](https://help.studio.design/ja/articles/4064875-画像ボックス-boxモードとimgモード.md): Studioの画像ボックスで選べる \[Box\] モードと \[Img\] モードの違いを整理します。各モードの特徴、向いている使い方、切り替え時の注意点を解説します。
- [画像ボックス：画像に背景加工をする](https://help.studio.design/ja/articles/1997379-画像ボックス-画像に背景加工をする.md): エディタ上で画像を加工する方法を解説します。明るさ、コントラスト、モノクロなどのフィルターや、背景画像のサイズ調整、リピート、位置調整の方法を説明します。
- [画像ボックス：代替テキストを設定する（alt）](https://help.studio.design/ja/articles/3315577-画像ボックス-代替テキストを設定する-alt.md): imgモードの画像ボックスに代替テキストを設定する方法を説明します。SEOの観点からも、この情報を設定することは非常に重要です。リストアイテム内の画像ごとに異なるalt設定をする方法も解説します。
- [画像ボックス：Imgモードで縦横比率が崩れる場合](https://help.studio.design/ja/articles/9267520-画像ボックス-imgモードで縦横比率が崩れる場合.md): 画像ボックスをImgモードに設定すると、画像の縦横比を保持したまま柔軟にサイズ調整ができますが、高さと幅をどちらもpxなどの固定値で指定すると縦横比が崩れる原因になります。
- [画像ボックス：フリー画像を利用する](https://help.studio.design/ja/articles/1997496-画像ボックス-フリー画像を利用する.md): Studioでは、高品質な無料の写真リソースサイト「Unsplash」と、AI生成による高解像度・高品質な写真素材を提供するサービス「Studio .Stock」の素材を利用できます。デザインエディタ上で画像が検索をし、選んだ画像をページにすぐに配置できます。
- [画像ボックス：画像の比率を固定する](https://help.studio.design/ja/articles/2638959-画像ボックス-画像の比率を固定する.md): Studioで画像の縦横比を固定したい場合は、画像ボックスの右上にあるスイッチをImgに切り替えます。Imgモードでは画像素材の縦横比率を保持したまま表示できます。
- [画像ボックス：擬似的にトリミングする（ボックス内の配置調整）](https://help.studio.design/ja/articles/3655938-画像ボックス-擬似的にトリミングする-ボックス内の配置調整.md): 画像の位置を調整し、擬似的なトリミング効果を得る方法を説明します。
- [画像ボックス：背景画像を固定表示する](https://help.studio.design/ja/articles/3022096-画像ボックス-背景画像を固定表示する.md): 背景画像を固定することで、スクロールしても背景画像が動かないレイアウトを作成できます。背景画像を固定する具体的な手順を説明します。
- [動画ボックス](https://help.studio.design/ja/articles/11461485-動画ボックス.md): 動画ボックスは、mp4やwebm形式の動画をページ上に直接配置できる機能です。画像やテキストと同様に自由なレイアウトが可能で、サイトに動画ならではの動きやインパクトを加えたい場面で活用できます。
- [テキストボックス](https://help.studio.design/ja/articles/4064889-テキストボックス.md): 文字コンテンツをWebページに表示する場合に使用する、テキストボックスの追加方法や編集方法をご紹介します。
- [リッチテキストボックス](https://help.studio.design/ja/articles/4064911-リッチテキストボックス.md): リッチテキストボックスを使用すると、テキストの一部にだけスタイルを適用したり、マークダウン記法で入力できます。この記事では、長文コンテンツやStudio CMSの本文表示での活用方法と、テキストグラデーションを使う際の注意点を説明します。
- [テキストの配置やデザインを編集する](https://help.studio.design/ja/articles/4064906-テキストの配置やデザインを編集する.md): テキストのサイズ、太さ、行高、配置などを編集する手順を紹介します。右パネル内のテキストタブで各種操作を行います。
- [テキストの文字組み（横書き・縦書き）を変更する](https://help.studio.design/ja/articles/2925387-テキストの文字組み-横書き-縦書き-を変更する.md): テキストの文字組み（横書き・縦書き）を変更する方法について解説します。具体的なオプションの違いや、機能の条件についても説明します。
- [文字の色や背景色を部分的に変更する](https://help.studio.design/ja/articles/3007552-文字の色や背景色を部分的に変更する.md): リッチテキストボックスを使って、一部の文字の色や背景色を変更する方法を紹介します。
- [リッチテキストの箇条書きをカスタマイズ・階層化したい](https://help.studio.design/ja/articles/9244585-リッチテキストの箇条書きをカスタマイズ-階層化したい.md): Studioのリッチテキストで使用できる箇条書き機能では、「1.」や「・」形式にのみ対応しています。番号のカスタマイズや階層化を行いたい場合は、テキストで対応してください。
- [プロパティに文字列フィルターを設定する](https://help.studio.design/ja/articles/6148984-プロパティに文字列フィルターを設定する.md): テキストボックスにCMSプロパティや、リスト・コンポーネントなどのプロパティを紐づけた際に、文字列フィルターを設定して表示内容をカスタマイズできます。
- [アイコンボックス](https://help.studio.design/ja/articles/4064926-アイコンボックス.md): Studioでは、Font AwesomeとMaterial Symbolsの2種類のアイコンを使用できます。Material Symbolsは線の太さやスタイル、塗りを調整でき、デザインに合わせやすいのが特徴です。
- [Font Awesome アイコンのバージョンアップデートについて](https://help.studio.design/ja/articles/8529288-font-awesome-アイコンのバージョンアップデートについて.md): 2023年11月2日以前に配置していたアイコンは一度変更すると、再度利用できなくなる可能性があります。
- [Embed（埋め込み）ボックス](https://help.studio.design/ja/articles/4064934-embed-埋め込み-ボックス.md): StudioのEmbed（埋め込み）ボックスでは、HTML・CSS・JavaScriptコードや各種外部サービスをページに埋め込みができます。この記事では、ボックスの追加方法、コードタイプの違い、編集画面の操作、注意点や外観設定について説明します。
- [Instagramの投稿を埋め込む](https://help.studio.design/ja/articles/3305539-instagramの投稿を埋め込む.md): Instagram埋め込みボックスを使って、フィードの個別投稿をWebサイトに埋め込む方法を解説します。
- [X（Twitter）の個別投稿を埋め込む](https://help.studio.design/ja/articles/4675994-x-twitter-の個別投稿を埋め込む.md): X（Twitter）の埋め込みボックスを使って、特定の投稿をWebサイトに埋め込む方法を解説します。
- [YouTube動画を埋め込む](https://help.studio.design/ja/articles/4064947-youtube動画を埋め込む.md): 埋め込み用のボックスを使って、YouTube動画をサイト上に埋め込み表示する方法をご紹介します。自動再生やループ再生のカスタマイズも可能です。
- [TikTok動画を埋め込む](https://help.studio.design/ja/articles/6851560-tiktok動画を埋め込む.md): TikTok動画やフィードは、埋め込みボックスを活用してサイトに埋め込むことができます。
- [Facebookを埋め込む](https://help.studio.design/ja/articles/4675992-facebookを埋め込む.md): Facebookのいいね！ボタンや投稿などの任意コンテンツをページへ埋め込む手順をご紹介します。
- [Googleカレンダーを埋め込む](https://help.studio.design/ja/articles/2753675-googleカレンダーを埋め込む.md): Embedボックスを利用して、GoogleカレンダーをWebページに埋め込む方法をご紹介します。Googleカレンダーをサイトに埋め込むと、スケジュールをサイト訪問者に共有できます。
- [Googleフォームを埋め込む](https://help.studio.design/ja/articles/2834094-googleフォームを埋め込む.md): Embedボックスを利用して、GoogleフォームをWebページに埋め込む方法をご紹介します。Studioのフォーム機能にはない、選択式の項目など高度な機能を使用したい場合などに活用できます。
- [Google Mapsを埋め込む](https://help.studio.design/ja/articles/1888376-google-mapsを埋め込む.md): StudioサイトにGoogle Mapsを埋め込む方法と、設置したGoogle Mapsの位置情報を変更する方法を解説します。
- [LINEの友だち登録ボタンを作りたい](https://help.studio.design/ja/articles/6171925-lineの友だち登録ボタンを作りたい.md): Studioサイトで、LINEの友だち登録画面に遷移するボタンを作成することが可能です。
- [Vimeoの動画を埋め込む](https://help.studio.design/ja/articles/4064951-vimeoの動画を埋め込む.md): Vimeoに公開した動画を、Studioに埋め込む方法を解説します。埋め込みコードを取得して、ペーストするだけで簡単に埋め込むことができます。自動＆ループ再生させる方法も紹介します。
- [iframeを埋め込む](https://help.studio.design/ja/articles/9202327-iframeを埋め込む.md): Embed ボックスを利用すると、簡単に外部サービスを iframe で埋め込み可能です。
- [Lottieを埋め込む](https://help.studio.design/ja/articles/8637241-lottieを埋め込む.md): Lottie 埋め込みボックスを活用すると、LottieをStudioサイトへ埋め込むことができます。埋め込んだLottieの再生条件は、スクロール連動など6つの再生条件から選ぶことができ、カスタマイズも可能です。
- [formrunを埋め込む](https://help.studio.design/ja/articles/4675986-formrunを埋め込む.md): フォーム作成から顧客管理までワンストップで行えるサービス「formrun」で作成したフォームをStudioサイトに埋め込む方法を説明します。
- [Fireworkを埋め込む](https://help.studio.design/ja/articles/5139103-fireworkを埋め込む.md): 縦型動画のFirework動画を、Studioに埋め込む方法を解説します。埋め込みコードを取得して、ペーストするだけで簡単に埋め込むことができます。
- [HubSpot Formを埋め込む](https://help.studio.design/ja/articles/5688648-hubspot-formを埋め込む.md): HubSpot Form を Studioサイトに埋め込む方法を説明します。
- [Studioで HTMLの編集・追加・出力をしたい](https://help.studio.design/ja/articles/8864939-studioで-htmlの編集-追加-出力をしたい.md): Studioでは、Embedボックスやカスタムコード機能を使ってHTMLやスクリプトを追加できます。一方で、ページのHTMLを直接編集したり、コードを出力することはできません。
- [埋め込み動画を背景に設定する](https://help.studio.design/ja/articles/3063733-埋め込み動画を背景に設定する.md): YouTubeやVimeoの動画をWebページに埋め込んで、背景やメインビジュアルとして設定する方法をご紹介します。
- [RSS連携（RSSリスト）](https://help.studio.design/ja/articles/3205203-rss連携-rssリスト.md): noteなどの外部サービスのRSS記事リストをStudioで作成したサイト上に自動表示することができます。 この記事では、RSS URLの追加、リストの配置、データの紐付けと更新方法について説明します。
- [RSS連携でnoteの最新記事をリスト表示する](https://help.studio.design/ja/articles/4065011-rss連携でnoteの最新記事をリスト表示する.md): StudioのRSS連携機能を使用し、noteの最新記事をサイトに表示する手順を解説します。
- [RSSの表示がエディタやライブプレビューで更新されない場合](https://help.studio.design/ja/articles/4061886-rssの表示がエディタやライブプレビューで更新されない場合.md): ページに配置したRSSフィードの表示がエディタやライブプレビューで更新されない理由と、手動更新の方法を解説します。
- [Embedボックスの縦横比を固定するレスポンシブ設定](https://help.studio.design/ja/articles/4767780-embedボックスの縦横比を固定するレスポンシブ設定.md): 埋め込みボックスを、縦横比を保ったまま表示させるレスポンシブ設定の方法を紹介します。この記事では例として、YouTube動画を埋め込んだEmbedボックスを、16:9の縦横比に維持するレスポンシブ設定を紹介します。
- [リスト](https://help.studio.design/ja/articles/4129102-リスト.md): リストは、同じレイアウトのボックスをまとめて管理できる機能です。Studio CMSなどと接続すれば、更新に応じて内容が自動反映される動的リストに変換されます。基本構造や作成・解除の方法、リストアイテムのデザイン編集、通常のリストと動的リストの違いについても解説します。
- [リストの表示条件設定](https://help.studio.design/ja/articles/16795652-リストの表示条件設定.md): リスト（静的なリスト）の表示条件は、リストプロパティの設定状況に応じて、アイテムごとに要素の表示・非表示を切り替える機能です。設定できるプロパティの種類と手順を説明します。
- [リスト：リストプロパティ](https://help.studio.design/ja/articles/16550809-リスト-リストプロパティ.md): デフォルトのリストは静的リストとして機能し、接続するデータはデザインエディタ内の「プロパティ管理表」で作成・管理します。プロパティの種類とプロパティ管理表の基本的な使い方を紹介します。
- [動的リスト](https://help.studio.design/ja/articles/4055772-動的リスト.md): 動的リストは、Studio CMSやAPI・RSSで取得した外部データをデザインエディタに連携し、一覧コンテンツを自動で反映するための機能です。データの連携方法や概要について解説します。
- [カルーセル](https://help.studio.design/ja/articles/13427668-カルーセル.md): カルーセルは、複数のコンテンツをスライド形式で順番に表示できる機能です。カルーセルの概要・基本構造・自動再生・表示件数と並び順について説明します。
- [リストプロパティを紐付けたカルーセル](https://help.studio.design/ja/articles/6108431-リストプロパティを紐付けたカルーセル.md): デザインエディタ内のリストプロパティを連携したカルーセルは、静的なカルーセルとして機能します。プロパティの編集・追加、並び順・自動再生の設定方法など、基本的な使い方を紹介します。
- [リスト／カルーセルの種類を見分ける方法](https://help.studio.design/ja/articles/15653024-リスト-カルーセルの種類を見分ける方法.md): リスト／カルーセルは、連携するデータソースによって編集方法が異なります。「静的なリスト／カルーセル」と「動的なリスト／カルーセル」の種類を確認する方法について解説します。
- [リスト／カルーセル内のボックスにプロパティを紐付ける](https://help.studio.design/ja/articles/16294890-リスト-カルーセル内のボックスにプロパティを紐付ける.md): 通常のリスト／カルーセル内のボックス要素にデザインエディタ内で作成・管理するプロパティを紐付ける手順を解説します。動的リスト／カルーセルへの紐付けは別記事にて解説します。
- [リスト：アイテムごとに異なる画像・テキスト・リンクを設定する](https://help.studio.design/ja/articles/9018252-リスト-アイテムごとに異なる画像-テキスト-リンクを設定する.md): リスト（通常リスト）でアイテムごとに異なる画像・テキスト・リンクを設定する手順と、設定後に内容を変更する方法をあわせて説明します。
- [リスト：アイテムごとにボックスを表示／非表示にする](https://help.studio.design/ja/articles/9744271-リスト-アイテムごとにボックスを表示-非表示にする.md): ブール値プロパティを活用すると、リスト内のアイテムごとに要素の表示・非表示を個別に設定できます。本記事では、その設定手順を説明します。
- [リスト：アイテムごとに色を変える](https://help.studio.design/ja/articles/8849973-リスト-アイテムごとに色を変える.md): カラープロパティを使って、リスト内のアイテムごとにボックスの色を個別管理する方法を説明します。カテゴリーごとに色を分けたい場合などに活用できます。
- [リスト内アイテムを縦並び / 横並びにしたい](https://help.studio.design/ja/articles/9183187-リスト内アイテムを縦並び-横並びにしたい.md): Studioエディタでリストアイテムの縦並びや横並びを変更する方法を解説します。
- [カルーセルを自動再生する](https://help.studio.design/ja/articles/6902846-カルーセルを自動再生する.md): Studioでは、カルーセルに自動再生を設定できます。自動再生の設定方法について説明します。
- [カルーセルの自動再生機能で、無限ループ再生をしたい](https://help.studio.design/ja/articles/8300145-カルーセルの自動再生機能で-無限ループ再生をしたい.md): 現在、カルーセルの自動再生では無限ループ再生に対応していません。 無限に動く表現を行いたい場合は、LoopBox機能 を使ってマーキー（連続スクロール）アニメーションを設定することで実現できます。
- [トグルボックス（Toggle）](https://help.studio.design/ja/articles/8056180-トグルボックス-toggle.md): クリックやホバーで開閉するトグルボックスについて説明します。トグルボックスの構成、追加方法、設定方法や開く方向、アニメーションについて解説します。
- [LoopBox：無限ループ（マーキー）表現を設定する](https://help.studio.design/ja/articles/13713839-loopbox-無限ループ-マーキー-表現を設定する.md): LoopBoxは、子要素を自動的に無限ループスクロールさせるボックス要素です。バナーやロゴマーキー、スクロールテキストなどの動きのあるコンテンツを作成できます。

### CMSの管理とデザイン

- [Studio CMSとは](https://help.studio.design/ja/articles/4055822-studio-cmsとは.md): Studio CMSは、Studioに組み込まれたコンテンツ管理機能です。ニュース・ブログ・採用情報など、同じデザインのページを継続的に更新・管理できます。CMSダッシュボードとデザインエディタの役割、およびコンテンツとデザインの紐付けの仕組みを説明します。
- [Studio CMSでコンテンツを構築する](https://help.studio.design/ja/articles/4065370-studio-cmsでコンテンツを構築する.md): Studio CMSで記事コンテンツを構築する流れを紹介します。モデル・アイテム・プロパティを準備し、動的ページと一覧ページを作成してサイトを公開するまでの手順ごとに関連記事とあわせて紹介します。
- [WordPressからStudioへCMSデータをインポートする](https://help.studio.design/ja/articles/6401262-wordpressからstudioへcmsデータをインポートする.md): WordPressからエクスポートしたXMLファイルを利用することで、投稿記事やカテゴリなどのコンテンツをStudioのCMSへインポートできます。
- [CMSダッシュボード](https://help.studio.design/ja/articles/5726398-cmsダッシュボード.md): Studio CMSのコンテンツデータの作成や編集を行う、CMSダッシュボードの概要や操作方法を解説します。
- [CMSモデル](https://help.studio.design/ja/articles/4055811-cmsモデル.md): CMSモデルは、Studio CMSを利用する際に、各コンテンツ（CMSアイテム）を管理するための枠組みです。この記事では、CMSモデルのタイプ別の特徴やモデルの作成・編集・削除方法を紹介します。
- [CMSアイテム](https://help.studio.design/ja/articles/4055821-cmsアイテム.md): CMSアイテムは、モデルに属する個別のコンテンツデータです。この記事では、CMSアイテムの特徴から作成・編集・削除方法までをご紹介します。
- [CMSプロパティ](https://help.studio.design/ja/articles/4055813-cmsプロパティ.md): Studio CMSで利用できるCMSプロパティの概要を説明します。プロパティの種別、必須プロパティ、追加・編集・削除の方法、各プロパティ種別の特徴を確認できます。
- [CMSプロパティ：リッチテキスト（本文）](https://help.studio.design/ja/articles/14654498-cmsプロパティ-リッチテキスト-本文.md): Studio CMSの「記事タイプ」モデルのCMSアイテムで利用できるリッチテキストプロパティ（本文）の編集方法を説明します。書式設定、画像・動画・PDFの追加と各メディアの詳細設定、マークダウンやコメントなどの機能について解説します。
- [CMSプロパティ：スラッグ（Slug）](https://help.studio.design/ja/articles/4217501-cmsプロパティ-スラッグ-slug.md): スラッグ（Slug）はCMSアイテムを特定するための「ID」で、公開サイトのページURLの末尾になる文字列です。
- [CMSプロパティ：ステータスと公開日時](https://help.studio.design/ja/articles/6319932-cmsプロパティ-ステータスと公開日時.md): Studio CMSで作成したコンテンツ（CMSアイテム）の公開状態や公開日時指定は、公開ステータスプロパティと公開日時プロパティで管理します。各ステータスの違いと、公開日時を使った公開予約や表示順の調整方法を説明します。
- [CMSコレクション](https://help.studio.design/ja/articles/4065333-cmsコレクション.md): CMSコレクションは、特定のCMSモデルから任意のアイテムを選び、手動で掲載内容を調整できる機能です。ニュース記事の特集やおすすめ一覧など、柔軟にアイテムを組み合わせて表示したい場合に活用します。
- [CMS共同編集](https://help.studio.design/ja/articles/5999236-cms共同編集.md): 共同編集と記事コメント機能について
- [CMSコンテンツ（記事タイプモデル）のRSS フィード設定](https://help.studio.design/ja/articles/6631681-cmsコンテンツ-記事タイプモデル-のrss-フィード設定.md): Studioで管理・公開しているニュース・ブログ等の記事を、RSSで配信するための設定
- [CMSアイテムの最終更新者と最終更新日を確認する](https://help.studio.design/ja/articles/10263573-cmsアイテムの最終更新者と最終更新日を確認する.md): CMSアイテムを最後に更新したユーザーと最終更新日時は、CMSダッシュボード上のアイテム詳細画面およびアイテム一覧画面で確認できます。複数メンバーでStudio CMSを運用する際の編集履歴の把握に役立ちます。
- [CMSダッシュボードでCMS記事アイテムを作成する](https://help.studio.design/ja/articles/13781496-cmsダッシュボードでcms記事アイテムを作成する.md): Studio CMSでは、CMSダッシュボードで作成するCMS記事アイテムが、動的ページで作成するCMS記事ページの元データとして機能します。この記事では、記事アイテム（記事タイプモデルのCMSアイテム）を作成する手順を説明します。
- [CMS記事アイテムに目次を追加する](https://help.studio.design/ja/articles/6579001-cms記事アイテムに目次を追加する.md): Studio CMSの記事アイテムの本文に、本文中の見出しタグから自動生成される目次（Table of Contents）を挿入し、デザインエディタでスタイルを調整する方法を説明します。
- [CMS記事アイテムに動画を載せる](https://help.studio.design/ja/articles/5525118-cms記事アイテムに動画を載せる.md): 記事アイテムの本文には、アセットパネルからアップロードした動画や、YouTubeやVimeoなどの外部サービスにアップロードした動画を埋め込むことができます。それぞれの動画埋め込み方法を説明します。
- [リッチテキスト内のテキストリンクに「nofollow」を設定する](https://help.studio.design/ja/articles/6525018-リッチテキスト内のテキストリンクに-nofollow-を設定する.md): リッチテキスト内のテキストリンクに「nofollow」を設定する方法を紹介します。Studio CMSのCMS記事本文とリッチテキストボックスで設定が可能です。
- [CMS記事アイテムに表示する公開日時や最終更新プロパティのフォーマットを変更する](https://help.studio.design/ja/articles/5835043-cms記事アイテムに表示する公開日時や最終更新プロパティのフォーマットを変更する.md): 公開日時や最終更新プロパティの表示フォーマットを変更する方法を紹介します。
- [Studio CMSのリッチテキストプロパティ（本文）内にテーブル（表）を追加する](https://help.studio.design/ja/articles/6700576-studio-cmsのリッチテキストプロパティ-本文-内にテーブル-表-を追加する.md): Studio CMSの記事アイテムで、リッチテキストプロパティ（本文）にテーブル（表）を挿入する手順を説明します。
- [Studio CMSのリッチテキストプロパティ（本文）内に追加したテーブル（表）の横幅を調整する](https://help.studio.design/ja/articles/9271569-studio-cmsのリッチテキストプロパティ-本文-内に追加したテーブル-表-の横幅を調整する.md): Studio CMSで記事アイテムで、リッチテキストプロパティ（本文）内に追加したテーブル（表）の横幅を調整する方法を説明します。列ごとの横幅指定には対応していません。
- [CMSリスト](https://help.studio.design/ja/articles/13228243-cmsリスト.md): CMSリストは、Studio CMSで管理しているデータを動的リストに紐付けて表示する機能です。この記事では、CMSリストの概要、作成手順、表示設定、レイアウト調整の考え方を説明します。
- [CMSリスト：画像・テキスト・リンクなどのプロパティを編集する](https://help.studio.design/ja/articles/5054353-cmsリスト-画像-テキスト-リンクなどのプロパティを編集する.md): 設定済みCMSリストのプロパティを編集する手順を、CMSダッシュボードでの操作を中心に説明します。Studio.Storeで取得したテンプレートやリストパーツの編集を行う際も参考にしてください。
- [CMSリスト：詳細ページにリンクする記事一覧を作成する](https://help.studio.design/ja/articles/13856944-cmsリスト-詳細ページにリンクする記事一覧を作成する.md): Studio CMSを接続した詳細ページにリンクする記事一覧を作成する手順を紹介します。詳細ページへの動線を作り、サイト内の回遊性を高めることができます。
- [Studio CMSを接続した動的なカルーセル](https://help.studio.design/ja/articles/4129089-studio-cmsを接続した動的なカルーセル.md): Studio CMSや、API・RSSで取得したStudio外部のデータソースを接続した場合には、動的なカルーセルとして機能します。Studio CMSのプロパティを紐付ける場合の機能や操作方法について解説します。
- [CMSリストの表示アイテムを絞り込む（フィルター）](https://help.studio.design/ja/articles/12093392-cmsリストの表示アイテムを絞り込む-フィルター.md): CMSプロパティや検索ワードでフィルター条件を設定し、CMSリストの表示アイテムの絞り込みができます。絞り込みに利用できるプロパティの詳細や設定方法を紹介します。
- [CMSリストのフィルター：固定フィルター](https://help.studio.design/ja/articles/14698742-cmsリストのフィルター-固定フィルター.md): Studio CMSのプロパティを条件に、CMSリストに表示するCMSアイテムを特定の条件で固定して絞り込む機能について、概要と設定手順、注意点を説明します。
- [CMSリストのフィルター：ダイナミックフィルター（Dynamic）](https://help.studio.design/ja/articles/13594219-cmsリストのフィルター-ダイナミックフィルター-dynamic.md): ページの表示内容に合わせて表示アイテムが自動で切り替わるフィルター機能が、ダイナミックフィルターです。動的ページ内にCMSリストを配置し、CMSモデルを参照している参照プロパティ（シングルセレクト）を条件として設定します。
- [CMSリストのフィルター：URLクエリフィルター](https://help.studio.design/ja/articles/13601425-cmsリストのフィルター-urlクエリフィルター.md): カテゴリーなどの検索条件でCMSリストの表示アイテムを絞り込むフィルター（URLクエリフィルター）をサイトに設置できます。WebページのURLに含まれるクエリパラメーターをStudioのCMSリストのフィルターに連携し、表示内容を動的に切り替えます。
- [動的ページ：Studio CMSの記事アイテムを表示する、CMS詳細ページを作成する](https://help.studio.design/ja/articles/9506045-動的ページ-studio-cmsの記事アイテムを表示する-cms詳細ページを作成する.md): Studio CMSに登録した記事アイテムのプロパティを使って、タイトルやbody（本文）、サムネイルなどを動的に表示するCMS詳細ページを作成する手順を紹介します。
- [動的ページ内のボックス要素とCMSプロパティを紐付ける](https://help.studio.design/ja/articles/13767977-動的ページ内のボックス要素とcmsプロパティを紐付ける.md): 動的ページで作成したCMS記事ページ内のボックス要素と、CMSダッシュボードで設定したCMSプロパティを紐付ける手順を説明します。操作はデザインエディタで行います。画像ボックス・テキストボックス・リッチテキストボックス・条件設定に利用するプロパティの紐付け手順をまとめました。
- [動的なリスト／カルーセル内のボックスにプロパティを紐付ける](https://help.studio.design/ja/articles/15370824-動的なリスト-カルーセル内のボックスにプロパティを紐付ける.md): リスト・カルーセル内のボックス要素にStudio CMSなどで管理するプロパティを紐付ける方法を紹介します。
- [Studio CMSのプロパティ活用例：記事アイテムにカテゴリーやタグを追加する](https://help.studio.design/ja/articles/4771172-studio-cmsのプロパティ活用例-記事アイテムにカテゴリーやタグを追加する.md): Studio CMSの記事アイテムにプロパティを付与して、カテゴリーやタグで分類する方法を解説します。参照プロパティを使用することで、動的にフィルタされた一覧ページや関連記事一覧リストを作成できます。
- [Studio CMSのプロパティ活用例：CMS詳細ページにカテゴリー・タグを表示する](https://help.studio.design/ja/articles/13760178-studio-cmsのプロパティ活用例-cms詳細ページにカテゴリー-タグを表示する.md): Studio CMSで作成したブログ記事やニュース記事の詳細ページに、カテゴリーやタグを表示する手順を説明します。記事アイテムへのプロパティ設定から、デザインエディタでの表示設定、一覧ページへのリンク設定までの流れを紹介します。
- [Studio CMSのプロパティ活用例：カテゴリー別の記事一覧ページを作成する](https://help.studio.design/ja/articles/4167878-studio-cmsのプロパティ活用例-カテゴリー別の記事一覧ページを作成する.md): Studio CMSとダイナミックフィルター（Dynamic）機能を使い、カテゴリーごとに記事コンテンツを自動で絞り込んで表示する一覧ページを作成する方法を説明します。
- [Studio CMSのプロパティ活用例：CMS詳細ページ内に、関連記事一覧を配置する](https://help.studio.design/ja/articles/6846707-studio-cmsのプロパティ活用例-cms詳細ページ内に-関連記事一覧を配置する.md): Studio CMSで作成した詳細ページ内に関連記事一覧を配置するには、CMSダッシュボードで記事コンテンツの構造やプロパティをあらかじめ整えたうえで、記事一覧リストに表示条件を設定して絞り込むを設定します。関連記事一覧を自動作成する専用機能はありません。
- [Studio CMSのプロパティ活用例：CMS記事コンテンツにライター情報を表示する](https://help.studio.design/ja/articles/9053110-studio-cmsのプロパティ活用例-cms記事コンテンツにライター情報を表示する.md): Studio CMSで作成した記事コンテンツに、記事を執筆したライター名やプロフィール画像などの情報を表示する方法を説明します。Studio CMSのモデルとアイテムの仕組みと、デザインエディタでの表示設定の流れを紹介します。
- [Studio CMSのプロパティ活用例：CMSアイテムごとに要素の色を変える](https://help.studio.design/ja/articles/8850106-studio-cmsのプロパティ活用例-cmsアイテムごとに要素の色を変える.md): Studio CMSの\[カラー\]プロパティを活用して、CMSリスト内のアイテムごとに個別の色を設定する方法を紹介します。
- [動的ページのCMSアイテムごとに検索結果に表示されるメタ情報（タイトル・ディスクリプション・ソーシャルカバー）を設定する](https://help.studio.design/ja/articles/4526321-動的ページのcmsアイテムごとに検索結果に表示されるメタ情報-タイトル-ディスクリプション-ソーシャルカバー-を設定する.md): Studio CMSで作成したコンテンツを反映する動的ページで、検索結果やSNSシェア時に表示されるタイトル・ディスクリプション・ソーシャルカバー画像を、CMSアイテムごとに設定する手順を説明します。
- [動的リスト・動的ページの表示条件設定](https://help.studio.design/ja/articles/4538892-動的リスト-動的ページの表示条件設定.md): 表示条件とは、動的リストや動的ページ内のアイテムを、特定の条件下でのみ表示する機能です。Studio CMSやData Connect APIで取得したデータの状態に応じて、要素の表示・非表示を切り替えられます。
- [Studio CMSの表示条件活用例：ライターごとに異なるSNSアイコンを表示する](https://help.studio.design/ja/articles/9202769-studio-cmsの表示条件活用例-ライターごとに異なるsnsアイコンを表示する.md): Studio CMSで管理しているライター情報に応じて、各ライターごとに異なるSNSアイコンとリンク先URLを表示する方法を説明します。CMSモデルの準備から、SNSアイコンの設定、表示条件の設定まで順を追って解説します。
- [Studio CMSの表示条件活用例：CMS記事コンテンツに、指定した期間中のみ「NEW」バッジを表示する](https://help.studio.design/ja/articles/10308375-studio-cmsの表示条件活用例-cms記事コンテンツに-指定した期間中のみ-new-バッジを表示する.md): 公開日時プロパティと表示条件を組み合わせることで、Studio CMSで作成した記事アイテムに対して、指定した期間中のみ「NEW」などのバッジ要素を表示できます。
- [Studio CMSの表示条件活用例：特定のCMSアイテムにのみ「NEW」バッジを表示する](https://help.studio.design/ja/articles/6815737-studio-cmsの表示条件活用例-特定のcmsアイテムにのみ-new-バッジを表示する.md): CMSアイテムのブール値を基準に、特定のCMSアイテムにのみ特定の要素を表示することができます。この記事では、新着商品（CMSアイテム）にのみ「NEW」バッジを表示する手順をご紹介します。
- [Studio CMSの表示条件活用例：画像プロパティの登録状況に応じて、画像とテキストを出し分ける](https://help.studio.design/ja/articles/9206913-studio-cmsの表示条件活用例-画像プロパティの登録状況に応じて-画像とテキストを出し分ける.md): Studioの表示条件の活用例として、CMSモデルの画像プロパティに画像が設定されているかどうかに応じて、動的な要素内で画像またはテキストをアイテムごとに切り替えて表示する方法を解説します。
- [CMSアイテムが公開サイトで表示されません](https://help.studio.design/ja/articles/6157854-cmsアイテムが公開サイトで表示されません.md): StudioサイトでCMSコンテンツ（記事、タグ、カテゴリー、カルーセルなど）が公開サイトに表示されない場合に、原因として多い公開ステータスやサイト更新の状態を中心に、確認すべきチェック項目をまとめています。
- [Studio CMSのアイテムを任意の順番に並べ替えてリスト表示したい](https://help.studio.design/ja/articles/6721694-studio-cmsのアイテムを任意の順番に並べ替えてリスト表示したい.md): CMSリストの表示順は、ソート機能やコレクションを使って並び順を変更できます。本記事では基本となるソート機能と、用途に応じた代替方法を整理して解説します。
- [CMSリストで、特定のCMSアイテムを上部に固定表示したい](https://help.studio.design/ja/articles/6227845-cmsリストで-特定のcmsアイテムを上部に固定表示したい.md): Studio CMSにはCMSリスト上部へのピン留め機能はありませんが、専用のCMSモデルやCMSコレクション、通常ページと通常リストを組み合わせることで、特定のCMSアイテムを記事一覧の先頭に表示する方法を紹介します。
- [CMSリストのアイテムごとに異なる外部リンクを設定する](https://help.studio.design/ja/articles/9025757-cmsリストのアイテムごとに異なる外部リンクを設定する.md): StudioのCMSリスト内アイテムごとに外部URLを設定する手順を解説します。通常のリンク設定ではなく、テキストプロパティを利用して設定します。
- [Studio CMS記事アイテムの改行がデザインエディタ上で反映されません](https://help.studio.design/ja/articles/4526299-studio-cms記事アイテムの改行がデザインエディタ上で反映されません.md): Studio CMSの記事アイテムを反映した、CMS記事ページで本文の改行が反映されない場合は、テキストボックスを使用している可能性があります。リッチテキストボックスにCMSモデルのbodyプロパティ（本文）を指定して表示してください。
- [Studio CMSの記事アイテムが、サイト上で正しく表示されない](https://help.studio.design/ja/articles/5670677-studio-cmsの記事アイテムが-サイト上で正しく表示されない.md): Studio CMSの記事アイテムが、サイト上で正しく表示されない場合に考えられる原因について。
- [新規作成した動的ページで、CMSアイテムの本文が表示されない](https://help.studio.design/ja/articles/5821090-新規作成した動的ページで-cmsアイテムの本文が表示されない.md): 動的ページを新規作成した際にCMS記事アイテムの本文が表示されない場合は、記事本文のプロパティが紐付いたリッチテキストボックスがページ上に配置されているか確認してください。初期状態では配置されていません。
- [CMS記事のリダイレクト設定をしたい](https://help.studio.design/ja/articles/9309873-cms記事のリダイレクト設定をしたい.md): Studioでは現在、リダイレクトページを利用したリダイレクト設定において、CMS記事などの動的ページへリダイレクト設定を行うことはできません。
- [Studio CMSのリッチテキストプロパティ（本文）で、色・サイズ・余白・フォントなどを変更したい](https://help.studio.design/ja/articles/15501217-studio-cmsのリッチテキストプロパティ-本文-で-色-サイズ-余白-フォントなどを変更したい.md): CMS記事本文（リッチテキストプロパティ）の文字の色・サイズ・余白・フォントなどの設定は、CMSダッシュボードではなくデザインエディタで行います。画面の見分け方と設定方法を案内します。

### レスポンシブ設定

- [レスポンシブデザインを設定する](https://help.studio.design/ja/articles/4062516-レスポンシブデザインを設定する.md): Studioサイトのレスポンシブデザインの設定方法とコツを解説します。デバイスサイズに応じたデザインを作成し、ユーザーに最適な表示を提供しましょう。
- [ブレイクポイントの設定方法](https://help.studio.design/ja/articles/4954050-ブレイクポイントの設定方法.md): レスポンシブデザインで画面サイズに応じたレイアウトを実現するにあたり、画面幅の切り替えポイントを設定できます。PC・タブレット・モバイルの基本サイズに加えて、スモールサイズとミニサイズも追加できます。
- [ブレイクポイントごとのボックス表示/非表示設定](https://help.studio.design/ja/articles/2303942-ブレイクポイントごとのボックス表示-非表示設定.md): 画面幅（ブレイクポイント）ごとにコンテンツの表示・非表示を設定する方法を紹介します。レスポンシブデザインに活用できます。
- [PCとタブレット・モバイルなどの他のデバイスで表示する画像を変えたい](https://help.studio.design/ja/articles/5489667-pcとタブレット-モバイルなどの他のデバイスで表示する画像を変えたい.md): PCとタブレット・モバイルなどの他のデバイスで異なる画像を表示したい場合は、ボックスの表示設定でブレイクポイントごとに画像ボックスの表示・非表示を切り替えます。
- [デザインエディタのスクリーン幅を変更する](https://help.studio.design/ja/articles/1892041-デザインエディタのスクリーン幅を変更する.md): スクリーンのドラッグ操作とツールバー操作の2つの方法で、任意のスクリーンサイズに切り替えてレスポンシブデザインの確認ができます。
- [ハンバーガーメニューの作成方法](https://help.studio.design/ja/articles/2329054-ハンバーガーメニューの作成方法.md): PCサイズではナビゲーションメニューを常に表示し、モバイルやタブレットではハンバーガーアイコンのクリックでメニューを表示・非表示に切り替える作成手順を説明します。
- [レスポンシブ時に要素が見切れる・はみ出る・余白ができる場合](https://help.studio.design/ja/articles/5168438-レスポンシブ時に要素が見切れる-はみ出る-余白ができる場合.md): ボックスを内包する親ボックスの縦幅が固定値（px）の場合、単位を\[auto\]に変更すると、レスポンシブ時の見切れ・はみ出し・不要な余白が改善する可能性があります。
- [PCでは表示されていた要素がモバイルでは表示されない](https://help.studio.design/ja/articles/9271318-pcでは表示されていた要素がモバイルでは表示されない.md): PCでは見えている要素が、タブレットやモバイルなど特定の画面幅で表示されない場合は、画面幅ごとのボックスの表示設定が意図せず変更されている可能性があります。この記事では、デザインエディタ上で確認すべき主なポイントを整理します。
- [モバイルモードのデザイン変更が、PCサイズのデザインにも反映されてしまう場合](https://help.studio.design/ja/articles/3007535-モバイルモードのデザイン変更が-pcサイズのデザインにも反映されてしまう場合.md): モバイルモードのデザイン変更が、PCサイズのデザインにも反映されてしまう場合は、「ブレイクポイントごとの変更できない設定」を変更している可能性があります。ブレイクポイントごとに画像やテキストなどを変更したい場合には、ボックスの表示・非表示設定機能を活用してください。
- [タブレットやモバイルで画像が表示されない](https://help.studio.design/ja/articles/4184961-タブレットやモバイルで画像が表示されない.md): タブレットやモバイルなどの特定の画面幅でのみ画像が表示されない場合の原因について説明します。ボックスの表示設定や幅の指定、親ボックスの構造、条件付きスタイルの設定などを確認することで解決できる場合があります。
- [スマホ表示の公開サイトやプレビューがデザインエディタと異なる場合](https://help.studio.design/ja/articles/8910891-スマホ表示の公開サイトやプレビューがデザインエディタと異なる場合.md): デザインエディタ上のブレイクポイントでは問題ないレイアウトが、ライブプレビューや公開サイトをスマホで表示した際に崩れてしまう主な原因と、よくある実装パターンごとの対処方法を紹介します。

### フォーム

- [フォーム設置：フォームの設置・全体設定をする](https://help.studio.design/ja/articles/2281017-フォーム設置-フォームの設置-全体設定をする.md): Studioでは、フォームボックスをドラッグ＆ドロップしてサイトにフォームを設置できます。設置したフォームは、エディタ上でデザイン編集したり、複数のフォームパーツを組み合わせしたりしてカスタマイズできます。
- [フォーム設定：フォーム名を変更する](https://help.studio.design/ja/articles/4541698-フォーム設定-フォーム名を変更する.md): フォーム名を変更する方法や、フォーム名に使えない記号を解説します。フォーム名変更後の回答データは、変更前のフォームとは別に集計されます。
- [フォーム設定：フォームを削除する](https://help.studio.design/ja/articles/13782135-フォーム設定-フォームを削除する.md): フォームを完全に削除するには、エディタ上から取り除くだけでなく、フォームダッシュボードからも削除します。また、フォームの初期化と削除の違いについても説明します。
- [フォーム設定：サンキューページを設置する](https://help.studio.design/ja/articles/4096792-フォーム設定-サンキューページを設置する.md): フォームの回答送信後に表示されるサンキューページを設定できます。フォーム送信後の遷移先ページの作成と設定手順を解説します。
- [フォーム設定：送信完了メッセージを変更したい](https://help.studio.design/ja/articles/9240187-フォーム設定-送信完了メッセージを変更したい.md): Studio標準のフォーム機能で、送信後に表示される「フォーム送信成功」の文言をカスタマイズしたい場合の解決策をご紹介します。
- [フォーム設定：回答者へのメール自動返信](https://help.studio.design/ja/articles/4617647-フォーム設定-回答者へのメール自動返信.md): Studioには自動返信メール機能の提供はありませんが、フォーム結果の外部連携機能と外部ツールを使用すると実装可能です。Google スプレッドシートと Zapier を使ってStudio サイトに自動返信メールを設定する方法をご紹介します。
- [フォーム項目：フォームに項目を追加する（フォームパーツ）](https://help.studio.design/ja/articles/4064955-フォーム項目-フォームに項目を追加する-フォームパーツ.md): Studioフォームにフォームパーツを追加する方法と、パーツごとのプレースホルダーや必須項目などの詳細設定・デザイン編集について紹介します。
- [フォーム項目：日付入力欄にカレンダーを追加する](https://help.studio.design/ja/articles/10090238-フォーム項目-日付入力欄にカレンダーを追加する.md): 現在、Studioで提供するフォームでは日付を入力するための機能はご提供していません。外部のサービスによっては、外部サービスで用意したカレンダー機能付きのフォームをStudioサイトに埋め込むことが可能です。
- [フォーム項目：ファイル添付機能を付ける](https://help.studio.design/ja/articles/4535352-フォーム項目-ファイル添付機能を付ける.md): Studioのフォームにアップロードパーツを追加して、フォーム回答者から添付ファイルを受け取る方法を解説します。パーツを追加する手順や、アップロード可能なファイル形式、サイズ上限も紹介します。
- [フォーム項目：選択肢に条件分岐を設定する](https://help.studio.design/ja/articles/9303976-フォーム項目-選択肢に条件分岐を設定する.md): Studioの標準フォーム機能では条件分岐（回答内容によって次の質問を変更する機能）には対応しておりません。条件分岐が必要な場合は、外部フォームサービスの利用をご検討ください。
- [フォーム回答管理：ダッシュボードでの管理](https://help.studio.design/ja/articles/4538884-フォーム回答管理-ダッシュボードでの管理.md): フォームダッシュボードでフォームの回答や添付ファイルを確認する方法を解説します。回答を「対応/未対応」などのステータスで管理する方法や、CSVデータでダウンロードする方法、回答を完全に削除する方法も説明します。
- [フォーム回答管理：通知メールを設定する](https://help.studio.design/ja/articles/2281082-フォーム回答管理-通知メールを設定する.md): Studioフォームの通知メール設定について解説します。この機能を活用することで、フォームへの回答を効率的に管理できます。この記事では、全体設定と個別設定の方法、注意点、そして具体的なユースケースを紹介します。
- [フォーム回答管理：メール通知のみで受け取る](https://help.studio.design/ja/articles/4643435-フォーム回答管理-メール通知のみで受け取る.md): Studioのデータベースにフォームで送信された内容を残したくない場合、事前に設定をしておくことでメール通知のみで回答を受け取ることができます。
- [フォーム回答管理：プランごとの回答閲覧数制限](https://help.studio.design/ja/articles/4604830-フォーム回答管理-プランごとの回答閲覧数制限.md): Studioのフォーム機能では、プランごとにフォーム回答を閲覧できる件数に制限があります。この記事では、各プランの上限数と、上限を超えた場合の対応方法について説明します。
- [フォーム回答管理：管理メンバーごとの閲覧制限](https://help.studio.design/ja/articles/8223241-フォーム回答管理-管理メンバーごとの閲覧制限.md): Studioのフォーム回答結果の閲覧をメンバーごとに制限する手順について解説します。
- [フォーム回答管理：Googleスプレッドシートで管理する](https://help.studio.design/ja/articles/4597354-フォーム回答管理-googleスプレッドシートで管理する.md): Studioのフォーム機能では、回答結果をGoogleスプレッドシートと連携させることができます。この機能により、フォーム回答データをリアルタイムで管理し、外部ツールと組み合わせて標準機能では実現できない柔軟なデータ管理や通知設定が可能になります。
- [フォーム回答管理：回答日時データをスプレッドシートに追加する](https://help.studio.design/ja/articles/9316317-フォーム回答管理-回答日時データをスプレッドシートに追加する.md): 回答日時データを連携先のスプレッドシートに直接送信する機能は提供しておりませんが、CSV形式でデータをダウンロードすることで、回答日時を含むデータを取得することが可能です。
- [フォーム回答管理：外部APIに連携する](https://help.studio.design/ja/articles/4690985-フォーム回答管理-外部apiに連携する.md): Studio で作ったサイトのフォーム結果データを外部 API で受け取って簡単な処理ができます。この記事ではサンプルとして、スプレッドシートを介した Slack との連携方法をご紹介します。
- [フォーム送信トラブル：送信ボタンをクリックしても、「フォーム送信失敗」で送れない場合](https://help.studio.design/ja/articles/10911810-フォーム送信トラブル-送信ボタンをクリックしても-フォーム送信失敗-で送れない場合.md): Studioフォームに回答を送信した場合のエラー表示の主な原因は、Google reCAPTCHA v3の設定問題かGoogleスプレッドシートの連携問題です。
- [フォーム送信トラブル：送信ボタンをクリックしても、送信できない場合](https://help.studio.design/ja/articles/13002188-フォーム送信トラブル-送信ボタンをクリックしても-送信できない場合.md): フォームの送信ボタンをクリックしても送信できない場合は、回答必須項目のボックスが非表示になっている可能性があります。回答必須項目が未入力の状態となるため、フォームを送信できません。
- [フォーム通知トラブル：送信された回答が、管理者のダッシュボードやメールに届かない場合](https://help.studio.design/ja/articles/4507321-フォーム通知トラブル-送信された回答が-管理者のダッシュボードやメールに届かない場合.md): フォーム回答者が送信ボタンをクリックしたにも関わらず、回答がサイト管理側に届かない場合の原因と対処法を説明します。主な原因は、送信ボタン自体にリンクを直接設定していることです。
- [フォーム通知トラブル：送信された回答が、管理者にメールで通知されない場合](https://help.studio.design/ja/articles/5060470-フォーム通知トラブル-送信された回答が-管理者にメールで通知されない場合.md): Studioフォームからの通知メールが届かない場合に確認すべき原因と対処法を紹介します。

### SEO・アクセス解析・サイト表示

- [アナリティクス：Studio独自のアクセス解析を確認する（Studio Analytics）](https://help.studio.design/ja/articles/8180342-アナリティクス-studio独自のアクセス解析を確認する-studio-analytics.md): Studioが計測したアクセス解析データを確認する方法と、確認できる数値や仕様の特徴を解説します。
- [アナリティクス：Google AnalyticsのデータをStudioで確認する](https://help.studio.design/ja/articles/15882440-アナリティクス-google-analyticsのデータをstudioで確認する.md): Google Analyticsで計測したStudioサイトのアクセス解析データを、Studio上で確認する方法を紹介します。
- [ABテストは可能でしょうか？](https://help.studio.design/ja/articles/4185077-abテストは可能でしょうか.md)
- [SEO対策](https://help.studio.design/ja/articles/2639106-seo対策.md): Studioで設定できるSEO関連の項目（タイトル、説明文、OGP画像、ファビコン、HTML、alt属性、サイトマップ、404ページ）を整理し、検索エンジンや訪問者に内容を伝わりやすくします。
- [Studioのサイトマップに1ページしか記載されていません](https://help.studio.design/ja/articles/9295313-studioのサイトマップに1ページしか記載されていません.md): Studioで制作したサイトのサイトマップの仕様について説明します。サイトマップの概要や動的ページの扱いなどを確認できます。
- [サイト公開後にタイトルやディスクリプションを変更したが、Google検索結果に反映されません](https://help.studio.design/ja/articles/8841804-サイト公開後にタイトルやディスクリプションを変更したが-google検索結果に反映されません.md): Studioサイト公開後に更新したサイトの「タイトル」と「ディスクリプション」がGoogle検索結果にすぐに反映されない理由と、それを解決する方法を解説します。
- [Google検索結果にアイコン名が表示されてしまいます](https://help.studio.design/ja/articles/9244443-google検索結果にアイコン名が表示されてしまいます.md): Google検索結果の下部に表示されるサイトリンクは、Googleが自動的に生成する追加リンクです。アイコンフォントがサイトリンクに表示される場合の対処法について説明します。
- [StudioサイトをSEOチェックツールにかけると、hタグが検出されません](https://help.studio.design/ja/articles/9240731-studioサイトをseoチェックツールにかけると-hタグが検出されません.md): StudioサイトをSEOチェックツールで確認すると、hタグが検出されない場合があります。これは旧基盤（SPA）で起こる事象で、Googleの検索には影響しません。
- [サイト公開後、検索エンジンの検索結果にサイトやページが表示されません](https://help.studio.design/ja/articles/2248745-サイト公開後-検索エンジンの検索結果にサイトやページが表示されません.md): Studioサイトの公開後、サイトやページが検索エンジンの検索結果に表示されない場合にチェックするべき項目と、検索エンジンの仕組みについて解説します。
- [OGP画像（カバー画像）やファビコンを変更してもSNSや検索結果に反映されません](https://help.studio.design/ja/articles/4060856-ogp画像-カバー画像-やファビコンを変更してもsnsや検索結果に反映されません.md): OGP画像やファビコンを変更した際に、SNS上や検索エンジンの検索結果に反映されるまでに時間がかかる理由と対処方法について解説しています。
- [SNSでサイトをシェアした際の表示を確認する](https://help.studio.design/ja/articles/2827227-snsでサイトをシェアした際の表示を確認する.md): SNSでサイトをシェアした際は、ソーシャルカバー画像が表示されます。エディタ右パネルのページ・サイト設定で登録・確認できます。
- [Studioで作られたWebサイトを集めたギャラリーサイト「Showcase」への掲載](https://help.studio.design/ja/articles/5372894-studioで作られたwebサイトを集めたギャラリーサイト-showcase-への掲載.md): Studioで作成したWebサイトを掲載するギャラリーサイトへ完成したWebサイトを掲出する方法や、FAQを紹介します。
- [存在しないパスや非公開ページにアクセスしたら、404ページを表示する](https://help.studio.design/ja/articles/9239893-存在しないパスや非公開ページにアクセスしたら-404ページを表示する.md): Studioで存在しないパスや非公開ページにアクセスした際に、トップページではなく404ページを表示させる方法をご紹介します。404ページの作成と設定方法を解説します。
- [デザインエディタでの変更が、ライブプレビューには反映されるが公開サイトに反映されない](https://help.studio.design/ja/articles/6791147-デザインエディタでの変更が-ライブプレビューには反映されるが公開サイトに反映されない.md): デザインエディタで変更してもライブプレビューにしか反映されず、公開サイトに反映されない場合の原因と、確認・解消方法を解説します。
- [公開サイトにエラーが出て正しく表示されない場合](https://help.studio.design/ja/articles/8825172-公開サイトにエラーが出て正しく表示されない場合.md): 公開サイトでエラーが表示される場合、多くはTLS証明書、DNS設定、閲覧環境（ネットワークやブラウザなど）のいずれかが原因です。この記事では、表示されるエラー文言ごとに考えられる原因と対処方法を説明します。

### 公開基盤・パフォーマンス

- [公開済みのサイトを更新する](https://help.studio.design/ja/articles/10469156-公開済みのサイトを更新する.md): 公開済みのサイトに対して、編集内容を反映する「サイトの更新」方法を説明します。更新ボタンを押しても反映されない場合に確認するポイントも紹介します。
- [サイトを非公開にする](https://help.studio.design/ja/articles/10518754-サイトを非公開にする.md): Studioで公開中のWebサイト全体を非公開にする具体的な手順と注意点、再公開の方法を解説します。
- [公開中のサイトデザインをリニューアルする方法](https://help.studio.design/ja/articles/5462330-公開中のサイトデザインをリニューアルする方法.md): 既にStudioでサイトを公開中の場合に、リニューアルする方法を４パターンご紹介します。リニューアル規模やサイトの状況に合わせて方法を選択してください。
- [サイトの公開予約や更新予約をしたい](https://help.studio.design/ja/articles/2642690-サイトの公開予約や更新予約をしたい.md): Studioには、サイト全体の公開や更新を予約する機能はありません。ただしCMS機能内では、コンテンツごとに予約投稿が可能です。
- [Studio公開サイトへIPアドレス制限を設定したい](https://help.studio.design/ja/articles/2376889-studio公開サイトへipアドレス制限を設定したい.md): Studioの公開サイトへのIPアドレス制限は、カスタムプロキシを使いCDNなど外部の配信環境で設定します。カスタムプロキシは、Business Plusプラン以上のプロジェクトで追加契約が可能なアドオン機能です。
- [サイト全体をパスワードで保護する](https://help.studio.design/ja/articles/7325261-サイト全体をパスワードで保護する.md): パスワードページを追加して、サイト全体に閲覧制限をかける方法を紹介します。パスワード保護が設定されたサイトは、認証に必要やパスワードを入力することで閲覧できます。
- [一部のページを非公開にする（公開範囲設定）](https://help.studio.design/ja/articles/5633250-一部のページを非公開にする-公開範囲設定.md): サイトを公開したまま一部のページを非公開にしたい場合には、「公開範囲」機能を使用します。
- [Studioの公開サイト基盤](https://help.studio.design/ja/articles/15444819-studioの公開サイト基盤.md): Studioの公開サイト基盤は、2026年6月11日より、サーバー側で完成したHTMLを返す構成に刷新されました。刷新された公開サイト基盤（新基盤）の概要と、2026年6月11日以前の標準公開サイト基盤（旧基盤）との主な違いについて説明します。
- [公開サイト基盤を旧基盤から新基盤へ切り替える](https://help.studio.design/ja/articles/13526256-公開サイト基盤を旧基盤から新基盤へ切り替える.md): 2026年6月11日以前に作成したプロジェクトを対象に、公開サイトの基盤を旧基盤から新基盤へ切り替える手順を説明します。対象のプロジェクトでは、切り替え操作を行わない限り旧基盤のままサイトが公開されます。
- [Studioサイトのサブディレクトリで、別サーバーにあるサイトを公開する](https://help.studio.design/ja/articles/8730667-studioサイトのサブディレクトリで-別サーバーにあるサイトを公開する.md): カスタムプロキシ機能を使って、別サーバーのサイトをサブディレクトリに表示できます。カスタムプロキシの有効化は、カスタムプロキシアドオンを追加契約することで可能になります。
- [Studioで制作したサイトを自社のサーバー上で公開できますか？](https://help.studio.design/ja/articles/4185070-studioで制作したサイトを自社のサーバー上で公開できますか.md): Studioで制作したWebサイトは、Studioのサーバー上でのみ公開可能です。自社サーバーでの公開はサポートされていません。
- [Studioで作成したWebサイトの閲覧環境](https://help.studio.design/ja/articles/2401764-studioで作成したwebサイトの閲覧環境.md): Studioで作成・公開したWebサイトの推奨閲覧環境について
- [カスタムヘッダーを追加する](https://help.studio.design/ja/articles/9334686-カスタムヘッダーを追加する.md): カスタムヘッダーを使用すると、Webサイトのセキュリティを強化できます。この記事では、カスタムヘッダーの設定方法と活用方法について解説します。
- [公開中サイトのルートディレクトリに.txt以外のファイル形式（例：html）を配置したい](https://help.studio.design/ja/articles/8855744-公開中サイトのルートディレクトリに-txt以外のファイル形式-例-html-を配置したい.md): .txt以外のファイル形式（HTMLなど）をルートディレクトリに配置するには、Business Plus以上で追加できるカスタムプロキシアドオン、またはEnterpriseプランの契約が必要です。
- [ホワイトリストに追加すべきドメインはどんなものがありますか？](https://help.studio.design/ja/articles/3953504-ホワイトリストに追加すべきドメインはどんなものがありますか.md): 閲覧を許可すべきドメインについて
- [Internet Explorerでサイトを訪問したユーザーをEdgeに転送する設定](https://help.studio.design/ja/articles/5079291-internet-explorerでサイトを訪問したユーザーをedgeに転送する設定.md): MicrosoftによるIE互換性リストへの登録方法
- [WebサイトのStudio移行時にアクセス不能な時間をゼロにしたい](https://help.studio.design/ja/articles/6459180-webサイトのstudio移行時にアクセス不能な時間をゼロにしたい.md): Webサイト移行時に発生するダウンタイムの仕組みや確認方法、切り替えに時間がかかる場合の対処法を説明します。
- [Studioで公開するサイトの同時アクセス数の上限と対応策](https://help.studio.design/ja/articles/3559957-studioで公開するサイトの同時アクセス数の上限と対応策.md): Studioで公開するサイトの同時アクセス数の上限と対応策を紹介します。
- [Studio公開サイトの表示速度を向上させるヒント](https://help.studio.design/ja/articles/4062009-studio公開サイトの表示速度を向上させるヒント.md): Studioで作成したサイトの表示速度を改善する方法を説明します。ボックス数の削減、画像の最適化、フォント設定など、すぐに取り組める改善策をまとめています。
- [不正アクセスによるPV数の増加が発生したらどうしたら良いですか？](https://help.studio.design/ja/articles/9007346-不正アクセスによるpv数の増加が発生したらどうしたら良いですか.md): Studioサイトへの不正アクセスによるPV数の増加が疑われる場合の対応について解説します。
- [公開サイトの表示パフォーマンスを向上させるためのチェックリスト](https://help.studio.design/ja/articles/13526287-公開サイトの表示パフォーマンスを向上させるためのチェックリスト.md): LighthouseとPageSpeed Insightsのスコアを制作・レビュー・QA・納品前確認に活用するためのチェックポイントをまとめます。公開サイトのパフォーマンスとユーザー体験を最大化したい場合に参照してください。

### ドメイン・DNS

- [Studioでドメインを購入できますか？](https://help.studio.design/ja/articles/9144063-studioでドメインを購入できますか.md): Studioではドメインの取得・購入サービスは提供していません。
- [他社で取得したドメインをStudioで使用できますか？](https://help.studio.design/ja/articles/9144064-他社で取得したドメインをstudioで使用できますか.md): 他社で取得したドメインを接続してサイト公開が可能です。
- [独自ドメイン接続に使用できるドメイン](https://help.studio.design/ja/articles/4358553-独自ドメイン接続に使用できるドメイン.md): Studioのサイトに紐付けられるドメインの種類、その他独自ドメイン接続に関する注意点についてご紹介します。
- [既存ドメインのサブドメインをStudioに接続する](https://help.studio.design/ja/articles/3018390-既存ドメインのサブドメインをstudioに接続する.md): 他サービスで使用中のドメインのサブドメインをStudioサイトに接続する方法と、サブディレクトリ運用について説明します。
- [1つのプロジェクトに複数のドメインを紐付けて公開したい](https://help.studio.design/ja/articles/9505928-1つのプロジェクトに複数のドメインを紐付けて公開したい.md): Studioではドメインごとにプロジェクトを作成してWebサイトを構築します。複数ドメインやサブディレクトリで運用したい場合の考え方と構成パターンを説明します。
- [独自ドメインでサイトを公開する](https://help.studio.design/ja/articles/4358865-独自ドメインでサイトを公開する.md): 外部サービスで取得した独自ドメインを使ってWebサイトを公開する手順と、利用時の確認事項を紹介します。
- [Studioサブドメインでサイトを公開する](https://help.studio.design/ja/articles/10327010-studioサブドメインでサイトを公開する.md): Studioのサブドメインを使ってWebサイトを公開する手順と、利用時の確認事項を紹介します。
- [Studioサブドメインの接続解除方法](https://help.studio.design/ja/articles/10327081-studioサブドメインの接続解除方法.md): Studioで制作したサイトをStudioのサブドメインで公開している際に、接続を解除する方法ついて解説します。
- [独自ドメインに変更後、元のStudioサブドメインにアクセスした場合](https://help.studio.design/ja/articles/9239809-独自ドメインに変更後-元のstudioサブドメインにアクセスした場合.md): Studioのサブドメインで公開していたサイトを独自ドメインに変更した際、元のサブドメインへのアクセスは独自ドメインに自動的にリダイレクトされます。
- [他サービスから独自ドメインを引き継いで、StudioへWebサイトを移行する](https://help.studio.design/ja/articles/10616204-他サービスから独自ドメインを引き継いで-studioへwebサイトを移行する.md): WordPressやWixなどの他サービスからStudioへWebサイトを移行する一般的な手順を説明します。
- [独自ドメインの接続を解除する](https://help.studio.design/ja/articles/4143486-独自ドメインの接続を解除する.md): Studioで制作したサイトを独自ドメインで公開している際に、接続を解除する方法と注意点について解説します。
- [独自ドメインの接続・公開ができない時の確認事項と解消方法](https://help.studio.design/ja/articles/5663824-独自ドメインの接続-公開ができない時の確認事項と解消方法.md): Studioで独自ドメインを接続する際に、証明書が発行されない、公開サイトが閲覧できないといった問題の原因と解決方法を解説します。
- [DNSレコード設定](https://help.studio.design/ja/articles/1884451-dnsレコード設定.md): 独自ドメインをStudioサイトに接続するために必要なDNSレコード設定の概要と手順を説明します。各ドメインサービス別の設定方法リンクや、設定時の注意点も紹介します。
- [DNSレコード設定：お名前.comで取得したドメインをStudioサイトに接続する](https://help.studio.design/ja/articles/13904576-dnsレコード設定-お名前-comで取得したドメインをstudioサイトに接続する.md): お名前.comで取得した独自ドメインをStudioサイトに接続する準備として、お名前.com側で行うDNSレコードの設定手順を説明します。
- [DNSレコード設定：ムームードメインで取得したドメインをStudioサイトに接続する](https://help.studio.design/ja/articles/13904569-dnsレコード設定-ムームードメインで取得したドメインをstudioサイトに接続する.md): ムームードメインで取得した独自ドメインをStudioサイトに接続する準備として、ムームードメイン側で行うDNSレコードの設定手順を説明します。
- [DNSレコード設定：さくらのドメインで取得したドメインをStudioサイトに接続する](https://help.studio.design/ja/articles/13904571-dnsレコード設定-さくらのドメインで取得したドメインをstudioサイトに接続する.md): さくらのドメインで取得した独自ドメインをStudioサイトに接続する準備として、さくらのドメイン側で行うDNSレコードの設定手順を説明します。
- [DNSレコード設定：XServerドメインで取得したドメインをStudioサイトに接続する](https://help.studio.design/ja/articles/13904574-dnsレコード設定-xserverドメインで取得したドメインをstudioサイトに接続する.md): XServerで取得した独自ドメインをStudioサイトに接続する準備として、XServer側で行うDNSレコードの設定手順を説明します。
- [DNSレコード設定：Squarespace Domainsで取得したドメインをStudioサイトに接続する](https://help.studio.design/ja/articles/13904579-dnsレコード設定-squarespace-domainsで取得したドメインをstudioサイトに接続する.md): Squarespace Domainsで取得した独自ドメインをStudioサイトに接続する準備として、Squarespace Domainsで行うDNSレコードの設定手順を説明します。
- [canonicalタグ（URLの正規化）](https://help.studio.design/ja/articles/10030472-canonicalタグ-urlの正規化.md): Studioでは正規URLを適切に判断し、各ページに自動的にcanonicalタグを付与しています。追加されるタイミングは、サーバー応答のHTML段階ではなく、ブラウザでのレンダリング時となります。canonicalタグの設定機能は提供していません。
- [wwwリダイレクトを設定する](https://help.studio.design/ja/articles/3381241-wwwリダイレクトを設定する.md): www付き・wwwなしのURLは別のドメインとして扱われますが、wwwリダイレクトを設定することで、どちらでもアクセスできるようになります。設定方法について説明します。
- [接続中ドメインの「www.」の有無を切り替える](https://help.studio.design/ja/articles/3331268-接続中ドメインの-www-の有無を切り替える.md): 独自ドメインの「www.」有無の変更は、通常のドメイン変更と同様に扱われます。変更前のドメインにはアクセスできなくなり、新しいドメインが反映されるまでの間に一時的なアクセス不能時間が発生する可能性があります。
- [サイトと同じドメインでメールを利用したい](https://help.studio.design/ja/articles/5707271-サイトと同じドメインでメールを利用したい.md): MXレコードを外部のメールサービスに向ければ利用できる場合があります。
- [Aレコード設定後、接続が確認できない場合の対処法](https://help.studio.design/ja/articles/4358608-aレコード設定後-接続が確認できない場合の対処法.md): Studioで独自ドメインを設定後、\[接続が確認できませんでした\]とエラーが表示された場合の対処法を解説します。
- [Studioの旧IPアドレス \(35.194.122.208\) へ独自ドメインを接続中のユーザー様へ](https://help.studio.design/ja/articles/6777000-studioの旧ipアドレス-35-194-122-208-へ独自ドメインを接続中のユーザー様へ.md): StudioサーバーのIPアドレス変更のお知らせ
- [Cloudflareの「DNS Proxyモード」を有効にしてStudioサイトを公開できますか？](https://help.studio.design/ja/articles/14075332-cloudflareの-dns-proxyモード-を有効にしてstudioサイトを公開できますか.md): Studioの標準機能では、CloudflareのDNS Proxyモードを有効にした状態でのサイト公開はサポートしていません。ただし、Business Plusプラン以上のプロジェクトで追加購入できる「カスタムプロキシ」アドオンに加入すると、Cloudflareなどを利用したリバースプロキシ構成に対応できます。
- [独自ドメインでSSL/TLSは利用できますか？](https://help.studio.design/ja/articles/2248964-独自ドメインでssl-tlsは利用できますか.md)
- [TLS 証明書を発行する・確認する](https://help.studio.design/ja/articles/4358651-tls-証明書を発行する-確認する.md): Studioではサイトを公開する際に、TLS証明書を自動で発行します。この記事では、一般的なTLS証明書の基礎知識と、Studioにおける発行プロセス、所要時間、発行されたTLS証明書の確認方法について説明します。
- [TLS 証明書の自動更新](https://help.studio.design/ja/articles/4358807-tls-証明書の自動更新.md): Studioでは、TLS証明書を自動的に発行して更新しています。使用しているサービスや、自動更新が失敗した場合について解説します。
- [独自のTLS証明書を使ってStudioサイトを公開したい](https://help.studio.design/ja/articles/11389539-独自のtls証明書を使ってstudioサイトを公開したい.md): アドオンで提供しているカスタムプロキシ機能で、独自証明書の利用が可能です。本機能は高度なオプションであり、設定方法の詳細や個別でのご相談はサポート窓口のサポート対象外です。

### 料金プラン・お支払い

- [プロジェクトプランの選び方](https://help.studio.design/ja/articles/4066297-プロジェクトプランの選び方.md): プロジェクトのプランを決める際の参考用に、それぞれの特徴や活用例を紹介します。
- [Studioのプラン料金支払いは、プロジェクト単位ですか？アカウント単位ですか？](https://help.studio.design/ja/articles/9139530-studioのプラン料金支払いは-プロジェクト単位ですか-アカウント単位ですか.md): Studioのプラン料金支払いはプロジェクト単位で管理されます。個々のプロジェクトごとに契約・請求が発生し、支払いオーナーであるアカウントが支払いを管理します。
- [スタートアップ支援プログラム「Studio for startups」について](https://help.studio.design/ja/articles/10137006-スタートアップ支援プログラム-studio-for-startups-について.md): 創業間もない企業様向けの、料金プラン割引制度の内容と申し込み方法などをご紹介します。
- [プラン別上限：公開ページ数](https://help.studio.design/ja/articles/10208348-プラン別上限-公開ページ数.md): Studioで作成したWebサイト上に公開できるページ数は、プランによって上限が異なります。この記事では、プランごとのページ数上限値とその確認方法をご紹介します。
- [プラン別上限：CMSアクティブモデル数](https://help.studio.design/ja/articles/10181358-プラン別上限-cmsアクティブモデル数.md): 公開アイテムを含むCMSモデルは「アクティブモデル」と呼ばれ、プランごとに限値が異なります。この記事では、プラン別のアクティブモデル数の上限値と現在のアクティブモデル数の確認方法をご説明します。
- [プラン別上限：CMS公開アイテム数](https://help.studio.design/ja/articles/4217324-プラン別上限-cms公開アイテム数.md): CMSで管理できるアイテム数は、プランによって上限が異なります。この記事では、プラン別の公開アイテム数の上限値と確認方法をご説明します。
- [新旧プランごとの提供内容比較表（2024年12月1日〜）](https://help.studio.design/ja/articles/10373032-新旧プランごとの提供内容比較表-2024年12月1日.md): 旧プランから新プラン（2024年12月1日〜）への移行を検討される方向けに、プランごとの機能比較表をご用意しました。手動で新プランへ移行する際の参考資料としてご活用ください。
- [有料プランの自動更新](https://help.studio.design/ja/articles/9144060-有料プランの自動更新.md): Studioの有料プランは、契約期間の終了時に自動で次の契約期間へ更新されます。支払いは前払いで行われ、登録済みのクレジットカードまたはデビットカードから次回契約期間分の利用料が決済されます。
- [プロジェクトのプラン変更時の注意点](https://help.studio.design/ja/articles/3652807-プロジェクトのプラン変更時の注意点.md): プラン変更時の注意点や、よくあるトラブルとその対処法について解説します。変更内容によってさまざまなケースがありますので、それぞれのパターンごとに詳しく解説します。
- [プロジェクト間でプランの引継ぎをしたい](https://help.studio.design/ja/articles/9316882-プロジェクト間でプランの引継ぎをしたい.md): Studioでは、プロジェクトごとにプランを契約する必要があり、あるプロジェクトで契約しているプランを別のプロジェクトに引き継ぐことはできません。
- [プロジェクトのプランをアップグレードする](https://help.studio.design/ja/articles/9153812-プロジェクトのプランをアップグレードする.md): プロジェクトのプランを上位プランへアップグレードする手順を解説します。事前に必要な支払い情報・権限や、決済エラー時の対処法もあわせて紹介します。
- [プロジェクトのプランをダウングレードする](https://help.studio.design/ja/articles/3548089-プロジェクトのプランをダウングレードする.md): 利用中のプランをダウングレードする際の手順や、プランが切り替わるタイミング、ダウングレード時の注意点を説明します。
- [ダウングレード申請中に、変更先のプランをさらに変更する](https://help.studio.design/ja/articles/9148351-ダウングレード申請中に-変更先のプランをさらに変更する.md): プラン変更画面でダウングレードボタンが表示されず\[プランを再開する\]が表示されている場合の対応方法を解説します。ダウングレード予約中に、変更先のプランを改めて変更したいときは、一度ダウングレード予約を解除して元のプランを再開したあと、あらためて希望するプランへのダウングレードを申請してください。
- [ダウングレードでCMSモデル数の上限が下がる場合、モデルと公開中のアイテムはどうなりますか？](https://help.studio.design/ja/articles/10208794-ダウングレードでcmsモデル数の上限が下がる場合-モデルと公開中のアイテムはどうなりますか.md): ダウングレード後にモデル数が超過となる場合、自動的にモデル数が調整されます。
- [ダウングレードでCMS公開アイテム数の上限が下がる場合、公開中のアイテムはどうなりますか？](https://help.studio.design/ja/articles/8849673-ダウングレードでcms公開アイテム数の上限が下がる場合-公開中のアイテムはどうなりますか.md): ダウングレード先のプランでCMS公開アイテム数が上限を超える場合のCMSアイテムの取り扱いについて解説します。
- [プロジェクトプランの支払い](https://help.studio.design/ja/articles/3548078-プロジェクトプランの支払い.md): プロジェクトのプラン支払いのサイクル・利用可能な決済方法などについてご紹介します。
- [Studioで利用できる決済方法](https://help.studio.design/ja/articles/11112909-studioで利用できる決済方法.md): Studioにおける決済では、3Dセキュア認証に対応したクレジットカードまたはデビットカードのみが利用可能です。本記事では、利用できるカードブランドなど、決済方法に関する情報をご紹介します。
- [プラン料金の決済に失敗した場合の対応と流れ](https://help.studio.design/ja/articles/8855565-プラン料金の決済に失敗した場合の対応と流れ.md): プロジェクトのプラン料金の決済に失敗すると、決済の猶予期間を経てサイトが非公開となります。この記事では、決済失敗時の通知内容や、サイトが非公開になるまでの流れ、その対処法などを紹介します。
- [プロジェクトの支払いオーナーを変更する](https://help.studio.design/ja/articles/3547702-プロジェクトの支払いオーナーを変更する.md): Studioの有料プラン料金を支払う「お支払いオーナー」の変更方法について解説します。変更は、次にお支払いオーナーになるアカウントでのみ操作できます。
- [プロジェクトプランの返金について](https://help.studio.design/ja/articles/3548049-プロジェクトプランの返金について.md)
- [プロジェクトのプラン割引クーポンを利用する](https://help.studio.design/ja/articles/5115891-プロジェクトのプラン割引クーポンを利用する.md): プラン料金お支払いに利用できる割引クーポンの利用方法について解説します。
- [プロジェクトの請求書・領収書の閲覧とダウンロード手順](https://help.studio.design/ja/articles/3548104-プロジェクトの請求書-領収書の閲覧とダウンロード手順.md): プロジェクトの領収書の閲覧とダウンロード手順について解説します。
- [インボイス制度に対応した適格請求書の発行について](https://help.studio.design/ja/articles/8636752-インボイス制度に対応した適格請求書の発行について.md): インボイス制度に対応した適格請求書の発行について解説しています。
- [クレジットカード以外の支払い方法（請求書払い・口座振替・銀行振込）に対応していますか？](https://help.studio.design/ja/articles/9144057-クレジットカード以外の支払い方法-請求書払い-口座振替-銀行振込-に対応していますか.md): Studioではクレジットカードとデビットカードでの支払いのみ対応しています。Enterpriseプランのみ銀行振込に対応しています。
- [「お支払いを確定する」ボタンが押せません](https://help.studio.design/ja/articles/4507303-お支払いを確定する-ボタンが押せません.md): プロジェクトのプランアップグレードボタンが押せない際の対処方法をご紹介します。
- [プラン利用料金の見積書を発行してほしい](https://help.studio.design/ja/articles/9317133-プラン利用料金の見積書を発行してほしい.md): Studioではシステムの仕様上、プランの見積書発行は行っておりません。料金表ページをご確認いただき、プランをご検討ください。

### アカウント設定

- [Studioアカウントを新規登録する](https://help.studio.design/ja/articles/6227154-studioアカウントを新規登録する.md): Studioのアカウントを新規登録する方法をご説明します。Studioをご利用いただくには、Facebookアカウント・Googleアカウントまたはメールアドレスが必要です。
- [アカウント設定](https://help.studio.design/ja/articles/4064987-アカウント設定.md): アカウント設定では、ユーザー名、メールアドレス、パスワード、支払い情報など、アカウントに関する詳細設定を一括で行えます。
- [アカウントの支払い情報を設定する](https://help.studio.design/ja/articles/3548095-アカウントの支払い情報を設定する.md): プロジェクトのお支払いに使用するクレジットまたはデビットカード情報、宛名、住所の設定手順を解説します。
- [アカウントの言語設定](https://help.studio.design/ja/articles/1949488-アカウントの言語設定.md): アカウントごとにエディタやダッシュボードで使用する言語を設定します。
- [アカウントのメールアドレスを変更する](https://help.studio.design/ja/articles/1949484-アカウントのメールアドレスを変更する.md): Studioアカウントのメールアドレスを変更する方法を説明します。
- [アカウントのパスワードを変更する](https://help.studio.design/ja/articles/1949485-アカウントのパスワードを変更する.md): アカウントのパスワードを変更する手順を紹介します。アカウント保護の観点から、パスワードを定期的に変更することを推奨しています。
- [アカウントのパスワードをリセットする](https://help.studio.design/ja/articles/1949482-アカウントのパスワードをリセットする.md): Studioアカウントのパスワードをリセットする手順をご紹介します。
- [アカウントのパスワードポリシー](https://help.studio.design/ja/articles/10372093-アカウントのパスワードポリシー.md): Studioへのログイン時に利用するパスワードの設定条件をご紹介します。文字数の条件や使用できない文字列についても解説します。
- [プロフィール写真を設定する](https://help.studio.design/ja/articles/1949483-プロフィール写真を設定する.md): studioアカウントに自分のプロフィール画像を設定できます。プロジェクトの参加ユーザーを適切に把握するために、自身のパーソナリティが伝わるアイコンを設定することを推奨します。
- [ダークモードの設定](https://help.studio.design/ja/articles/2638945-ダークモードの設定.md): アカウントごとにエディタやダッシュボードの画面の表示（カラーモード）を設定します。ダークモード、ライトモード、システムモード（PCの設定に依存）から選択できます。
- [Studioにログイン・ログアウトする](https://help.studio.design/ja/articles/4065220-studioにログイン-ログアウトする.md)
- [Studioを退会する](https://help.studio.design/ja/articles/2248690-studioを退会する.md): Studioアカウントを退会する際の注意点、退会が不要なケース、ワークスペースやプロジェクトへの影響、事前準備と具体的な退会手順について説明します。不正防止の観点から、退会済みアカウントと同じメールアドレスでの再登録はできません。
- [Studioから配信されるメールの種類と停止方法](https://help.studio.design/ja/articles/11382726-studioから配信されるメールの種類と停止方法.md): この記事では、Studioから配信されるメールの種類と、それぞれの配信停止可否や停止手順について説明します。

### メンバー管理

- [ワークスペースのゲストとプロジェクトの編集者](https://help.studio.design/ja/articles/9669695-ワークスペースのゲストとプロジェクトの編集者.md): ワークスペース内の特定のプロジェクトにのみアクセスが可能なゲストと、プロジェクトの編集者について、使い分けのヒントや留意点について解説します。
- [プロジェクト参加ユーザーの操作範囲（ロール）を管理する](https://help.studio.design/ja/articles/4066240-プロジェクト参加ユーザーの操作範囲-ロール-を管理する.md): ロールとは、ユーザーが実行できる操作の範囲や権限を示すもので、プロジェクトやワークスペースごとにユーザーに必ず設定されます。ロールの種類と変更方法について解説します。
- [プロジェクトにユーザーアカウントを招待する](https://help.studio.design/ja/articles/2639135-プロジェクトにユーザーアカウントを招待する.md): Studioのプロジェクトのメンバーとして、ユーザーアカウントを招待し、ロールを設定して共同編集を行う方法を解説します。
- [編集者ロールのユーザーに高度な権限制限をかける](https://help.studio.design/ja/articles/10208400-編集者ロールのユーザーに高度な権限制限をかける.md): 編集者ロールのユーザーの操作範囲をカスタマイズできる機能です。ユーザーごとに設定ができます。Businessプラン以上で利用可能です。
- [作成したプロジェクトをクライアントへ引き渡したい](https://help.studio.design/ja/articles/4185086-作成したプロジェクトをクライアントへ引き渡したい.md): Studioで作成したプロジェクトをクライアントへ引き渡す手順を解説します。アカウント招待から権限変更、支払い設定、退出までを順に説明します。
- [プロジェクトのプランをダウングレードした後、ライター権限メンバーはどうなりますか？](https://help.studio.design/ja/articles/7127402-プロジェクトのプランをダウングレードした後-ライター権限メンバーはどうなりますか.md): BusinessまたはCMSプランのプロジェクトをダウングレードした場合ライター権限の取り扱いについて解説します。
- [プロジェクトへ招待できるユーザー数に上限はありますか？](https://help.studio.design/ja/articles/9144045-プロジェクトへ招待できるユーザー数に上限はありますか.md): Studioのプロジェクトに招待できるユーザー数の上限について解説しています。
- [ワークスペースとは](https://help.studio.design/ja/articles/9537340-ワークスペースとは.md): 複数のプロジェクトをまとめて管理できるワークスペースの概要を解説します。
- [ワークスペースの利用を開始する](https://help.studio.design/ja/articles/11168188-ワークスペースの利用を開始する.md): ワークスペース機能の利用を開始する際の手続きや設定方法について説明します。
- [ワークスペースにプロジェクトを新規作成する](https://help.studio.design/ja/articles/9537363-ワークスペースにプロジェクトを新規作成する.md): ワークスペースで管理するプロジェクトを新規作成する手順と注意点を解説します。
- [ワークスペースに既存プロジェクトを追加する](https://help.studio.design/ja/articles/9537362-ワークスペースに既存プロジェクトを追加する.md): ワークスペースに作成済みのプロジェクトを追加する手順と注意点を解説します。
- [ワークスペースからプロジェクトの紐付けを解除する](https://help.studio.design/ja/articles/9537366-ワークスペースからプロジェクトの紐付けを解除する.md): ワークスペースに追加したプロジェクトの紐付けを解除する手順について解説します。
- [ワークスペースのロール：オーナーとメンバー](https://help.studio.design/ja/articles/9537355-ワークスペースのロール-オーナーとメンバー.md): ワークスペースのオーナーとメンバーごとの操作範囲とワークスペースの有料プランで設定できるユーザーごとの操作制限についてご紹介します。
- [ワークスペースのロール：ゲストとは](https://help.studio.design/ja/articles/9537357-ワークスペースのロール-ゲストとは.md): ワークスペースのゲストについて、概要と操作制限についてご紹介します。ワークスペースの有料プランでのみ、ゲストユーザーを招待可能です。
- [ワークスペースにユーザーを招待する](https://help.studio.design/ja/articles/9537356-ワークスペースにユーザーを招待する.md): ワークスペースにユーザーを招待する方法を紹介します。ロール変更・詳細な権限の変更・削除手順などもあわせて解説します。
- [ワークスペースにゲストを招待する](https://help.studio.design/ja/articles/9537360-ワークスペースにゲストを招待する.md): ワークスペースへのゲスト招待、権限変更、削除手順について解説します。
- [ワークスペースのアップグレード時にオーナーまたはメンバーをゲストに切り替えることはできますか？](https://help.studio.design/ja/articles/9790118-ワークスペースのアップグレード時にオーナーまたはメンバーをゲストに切り替えることはできますか.md): ワークスペースのアップグレード時に、オーナーやメンバーをゲストに切り替えることはできません。アップグレード前にワークスペースから削除し、アップグレード後にゲストとして再招待する手順が必要です。
- [ワークスペースに紐づくプロジェクトを複製する](https://help.studio.design/ja/articles/9965708-ワークスペースに紐づくプロジェクトを複製する.md): ワークスペースに紐づいているプロジェクトを複製する方法と留意点を説明します。ワークスペースへの紐付けは引き継がれますが、招待したゲストは引き継がれません。
- [ワークスペースを削除する](https://help.studio.design/ja/articles/11168338-ワークスペースを削除する.md): 不要になったワークスペースの削除方法を説明します。
- [ワークスペースの料金プラン](https://help.studio.design/ja/articles/9537342-ワークスペースの料金プラン.md): ワークスペースの料金プランをご紹介します。ワークスペースでは、プロジェクトの料金プランとは別にプランを設けています。チーム利用に最適な「Teamプラン」と、気軽にお試しいただける「Freeプラン」をご用意しています。
- [ワークスペースの支払いの仕組み](https://help.studio.design/ja/articles/9577213-ワークスペースの支払いの仕組み.md): ワークスペースを介した支払いについて説明します。支払いの仕組み、支払い方法、支払いサイクルの具体例などをご紹介します。
- [ワークスペースの支払い情報を設定する](https://help.studio.design/ja/articles/9537343-ワークスペースの支払い情報を設定する.md): ワークスペースの支払い情報は、ワークスペースのプラン料金及びプロジェクトの支払いを一括管理する際に活用されます。この記事では支払い情報（支払いカード、宛名、請求先住所）の設定方法と変更手順を解説します。
- [ワークスペースのプランをアップグレードする](https://help.studio.design/ja/articles/9537350-ワークスペースのプランをアップグレードする.md): ワークスペースのプランを有料プランへアップグレードする手順と関連FAQをご紹介します。
- [ワークスペースのプランをダウングレードする](https://help.studio.design/ja/articles/9537352-ワークスペースのプランをダウングレードする.md): ワークスペースのプランをダウングレードする手順と注意点、そして関連FAQをご紹介します。
- [ワークスペース内のプロジェクトの支払いオーナーを設定する](https://help.studio.design/ja/articles/9537346-ワークスペース内のプロジェクトの支払いオーナーを設定する.md): ワークスペースに紐づくプロジェクトの支払いオーナーを、ワークスペースでまとめる方法や、個人アカウントごとに支払いを切り替える方法を説明します。
- [ワークスペースのお支払い履歴や領収書を確認する](https://help.studio.design/ja/articles/9537349-ワークスペースのお支払い履歴や領収書を確認する.md): ワークスペースの利用料金とワークスペースに紐づくプロジェクトの支払い履歴の確認方法や、及び領収書の閲覧・ダウンロード手順について解説します。
- [ワークスペースで管理するプロジェクトをアップグレードする際にお支払いオーナーを指定できますか？](https://help.studio.design/ja/articles/9683526-ワークスペースで管理するプロジェクトをアップグレードする際にお支払いオーナーを指定できますか.md): アップグレード時にお支払いオーナーをワークスペースにするかプロジェクト側のお支払いオーナーにするか選択が可能です。
- [ワークスペースの決済に失敗するとどうなりますか？](https://help.studio.design/ja/articles/9650823-ワークスペースの決済に失敗するとどうなりますか.md): ワークスペースプラン料金の支払いがなんらかの理由で失敗した場合、数日置きに自動で支払いのリトライ処理が行われます。複数回失敗が続くと自動的にプランが終了します。
- [ワークスペースを間違ってアップグレード（課金）してしまった場合、どうなりますか？](https://help.studio.design/ja/articles/9537380-ワークスペースを間違ってアップグレード-課金-してしまった場合-どうなりますか.md): ワークスペースプラン契約後の返金は行なっていません。
- [ワークスペースプランを年払いから月払いへ変更できますか？](https://help.studio.design/ja/articles/9537368-ワークスペースプランを年払いから月払いへ変更できますか.md): 年払いの途中で月払いへ変更することはできません。一度プランを解約しFreeプランにダウングレードした後に月払いへと切り替えることはできます。
- [ワークスペース有料プラン契約中にメンバーを追加または削除した場合の請求はどうなりますか？](https://help.studio.design/ja/articles/9537382-ワークスペース有料プラン契約中にメンバーを追加または削除した場合の請求はどうなりますか.md): 契約期間中にメンバーを追加または削除した場合の請求方法について詳しく解説します。メンバー数の変動による月払い・年払いの具体的な請求例もご紹介します。
- [ワークスペースプランを月払いから年払いへ変更できますか？](https://help.studio.design/ja/articles/9537377-ワークスペースプランを月払いから年払いへ変更できますか.md): 月払いから年払いへ直接変更が可能です。変更時の割引についても解説します。
- [ワークスペースプラン変更時の注意点](https://help.studio.design/ja/articles/9537354-ワークスペースプラン変更時の注意点.md): ワークスペースのプラン変更に関連するFAQをまとめています。

### 機能拡張・外部連携

- [外部アプリとの連携（Apps連携）](https://help.studio.design/ja/articles/2639194-外部アプリとの連携-apps連携.md): Studioでは、有料プランのプロジェクトで外部アプリと連携できます。連携可能なアプリと設定方法の概要を説明します。
- [Apps連携：Google Analyticsを連携する](https://help.studio.design/ja/articles/1892965-apps連携-google-analyticsを連携する.md): Studioでは、サイトごとにアクセス解析ツールの Google Analytics（GA）を連携できます。連携すると、GAで計測したStudioサイトのアクセス解析データを、GA上やStudio上で確認することができます。
- [Apps連携：Googleタグマネージャーを連携する](https://help.studio.design/ja/articles/3649799-apps連携-googleタグマネージャーを連携する.md): Apps連携機能を使いGoogleタグマネージャーをStudioサイトへ連携する手順をご紹介します。
- [Apps連携：Studioサイトにサーチコンソールを連携する](https://help.studio.design/ja/articles/1949442-apps連携-studioサイトにサーチコンソールを連携する.md): StudioサイトとGoogle Search Consoleを連携する手順を説明します。連携することで、サイトの検索パフォーマンスを分析できるようになります。
- [Apps連携：Google reCAPTCHA v3を設定する](https://help.studio.design/ja/articles/5752722-apps連携-google-recaptcha-v3を設定する.md): Google reCAPTCHA v3 を Studio に設定し、公開サイトのフォームを不正送信や悪用から保護する方法を説明します。reCAPTCHA のキーを取得し、Apps連携機能からプロジェクト単位で設定します。
- [Apps連携：HubSpot Tracking を設定する](https://help.studio.design/ja/articles/5688765-apps連携-hubspot-tracking-を設定する.md): HubSpot Tracking を Studio に設定し、公開サイトのトラフィックを計測する方法を解説します。HubSpot 側でトラッキングコードを確認し、 Apps連携機能を使用してStudioと連携します。
- [Apps連携：Intercomを連携する](https://help.studio.design/ja/articles/1884129-apps連携-intercomを連携する.md): Apps連携機能を使い、IntercomをStudioサイトへ連携する手順を説明します。
- [Apps連携：チャネルトークを連携する](https://help.studio.design/ja/articles/3106305-apps連携-チャネルトークを連携する.md): Apps連携機能を使って、チャットサービス「チャネルトーク」をStudioサイトに設置する手順を説明します。
- [Apps連携：Metaピクセルを連携する](https://help.studio.design/ja/articles/5147773-apps連携-metaピクセルを連携する.md): Apps連携機能を使いMetaピクセルをStudioサイトへ連携する手順をご紹介します。デザインエディタのカスタムコードで行う方法と、AppsでIDを入力する方法があります。
- [Apps連携：CHILLNNを連携する](https://help.studio.design/ja/articles/15420623-apps連携-chillnnを連携する.md): CHILLNNとStudioを連携し、予約ボタンやフォームをStudioサイト上に設置する方法を紹介します。連携すると、CHILLNNの予約導線の表示から予約完了までをStudioサイト上で一元的に行えます。
- [Cookiebot を利用して Cookie 利用の同意モーダルを実装する](https://help.studio.design/ja/articles/6103331-cookiebot-を利用して-cookie-利用の同意モーダルを実装する.md): StudioでCookie利用の同意モーダルを実装する方法を解説しています。CMP「Cookiebot」とGoogleタグマネージャーを使った導入手順、Apps連携やEmbedボックスの設定方法、注意点などをご紹介します。
- [Googleタグマネージャーで設置したGoogleアナリティクスで参照元が正しく計測されない](https://help.studio.design/ja/articles/5027775-googleタグマネージャーで設置したgoogleアナリティクスで参照元が正しく計測されない.md): Googleタグマネージャーで設置したGoogleアナリティクスで、参照元が正しく計測されない場合があります。この事象は旧基盤（SPA）で発生し、Studio固有ではなくSPA構成のサイト全般に共通します。原因と対処方法を説明します。
- [Studioはヒートマップツールと連携できますか？](https://help.studio.design/ja/articles/6867381-studioはヒートマップツールと連携できますか.md): Studioではヒートマップ系サービスとのApps連携は提供していません。カスタムコード機能やEmbedボックスでのコード埋め込みをお試しください。
- [Googleタグマネージャーを使ってクリックイベントをGoogleアナリティクスで計測する](https://help.studio.design/ja/articles/3594869-googleタグマネージャーを使ってクリックイベントをgoogleアナリティクスで計測する.md): GoogleタグマネージャーとGoogleアナリティクスを連携し、Studioサイト上のクリックイベントを計測する手順を説明します。GA4設定タグの作成からStudioでのID設定、動作確認までをまとめています。
- [MarketoとStudioの連携やフォーム埋め込みをしたい](https://help.studio.design/ja/articles/8885358-marketoとstudioの連携やフォーム埋め込みをしたい.md): StudioのEnterpriseのうち一部プランでは、Adobe Marketo Engageの導入についてご相談いただけます。
- [SATORIとStudioの連携やフォーム埋め込みをしたい](https://help.studio.design/ja/articles/8888241-satoriとstudioの連携やフォーム埋め込みをしたい.md): StudioのEnterpriseプランのうち一部プランでは、SATORIの導入についてご相談いただけます。
- [Salesforce AccountEngagementとStudioの連携やフォーム埋め込みをしたい](https://help.studio.design/ja/articles/8965990-salesforce-accountengagementとstudioの連携やフォーム埋め込みをしたい.md): StudioのEnterpriseプランのうち一部プランでは、Salesforce AccountEngagementの導入についてご相談いただけます。
- [Google Analyticsでキーイベントを測定する](https://help.studio.design/ja/articles/3593487-google-analyticsでキーイベントを測定する.md): Google Analyticsでキーイベントを測定する方法を解説します。キーイベントの設置は、Studio上またはGA上で行います。
- [アドオンのお支払いについて](https://help.studio.design/ja/articles/9334746-アドオンのお支払いについて.md): Studioで利用できるアドオンのお支払い方法と請求書・領収書の確認方法を紹介します。
- [カスタムプロキシの技術要件・制約事項とトラブルシューティング](https://help.studio.design/ja/articles/9559905-カスタムプロキシの技術要件-制約事項とトラブルシューティング.md): リバースプロキシサーバーからStudioに転送時に発生する一般的な問題の特定や解決方法をお試しください。
- [カスタムプロキシの概要と設定手順](https://help.studio.design/ja/articles/9334656-カスタムプロキシの概要と設定手順.md): Studioでカスタムプロキシを設定して、Studioサイトを既存のホスティングプロバイダやインフラストラクチャと統合できます。ヘッダー、認証、配信のコントロールが可能です。
- [アドオン契約中のプロジェクトをBusinessプラン以下へダウングレードするとどうなりますか？](https://help.studio.design/ja/articles/9690313-アドオン契約中のプロジェクトをbusinessプラン以下へダウングレードするとどうなりますか.md): アドオンはBusinessプラン以下へダウングレードすると自動停止します。
- [Data Connect API（API連携）](https://help.studio.design/ja/articles/6500751-data-connect-api-api連携.md): APIを公開している外部サービスからデータを取得し、動的リストや動的ページなど、Studioの動的な要素で表示する方法を解説します。連携可能なAPIの条件、各種API連携サービスの設定手順、データの紐付け方法、注意点などをまとめています。
- [microCMS API 連携](https://help.studio.design/ja/articles/6494531-microcms-api-連携.md): Data Connect APIを使用し、microCMSのコンテンツAPIからデータを取得し、動的ページ・動的モーダル・動的リストなど、Studioの動的な要素で表示できます。micro CMS側で取得する情報とStudio側での設定手順について説明します。
- [Notion API 連携](https://help.studio.design/ja/articles/6498155-notion-api-連携.md): Notionのデータベースで管理しているデータを、Data Connect API機能を使ってStudioサイトに表示できます。この記事では、Notion側の準備からStudioでのAPI設定、動的リスト・動的ページ・動的モーダルへのデータ連携までの流れを説明します。

### Studio Store（テンプレート）

- [Studio.Storeとは](https://help.studio.design/ja/articles/7181485-studio-storeとは.md): Studio.Storeは、クオリティ保証済みのWebデザインテンプレートを取得・販売できる公式マーケットプレイスです。テンプレートの仕様やテンプレート購入と販売についての概要を説明します。
- [テンプレートを編集する](https://help.studio.design/ja/articles/9974045-テンプレートを編集する.md): テンプレート編集時に役立つStudioの基本的な仕組みと、画像やテキストの差し替え、リンクやフォームの設定方法を解説します。 選択した要素が水色や紫でハイライトされて編集できない場合についても説明します。
- [Studio.Store テンプレート購入ガイド](https://help.studio.design/ja/articles/7181490-studio-store-テンプレート購入ガイド.md): 「Studio.Store」はハイクオリティなWebデザインテンプレートが購入できるマーケットプレイスです。テンプレートの購入手順や注意事項について紹介します。
- [Studio.Store テンプレート割引クーポンの利用方法](https://help.studio.design/ja/articles/8888541-studio-store-テンプレート割引クーポンの利用方法.md): Studioテンプレートのマーケットプレイ「Studio.Store」にて、テンプレートデザイナーが発行する割引クーポンの使用方法、注意事項、およびエラー時の対処法をご紹介します。
- [Web制作代行でStudio.Storeのテンプレートを利用したい](https://help.studio.design/ja/articles/9245147-web制作代行でstudio-storeのテンプレートを利用したい.md): Studio .StoreのテンプレートはWeb制作代行で利用できます。本記事では、利用時に確認すべき権利関係や利用範囲、注意点と購入フローを整理します。
- [Studio Storeでテンプレートを出品・販売する](https://help.studio.design/ja/articles/7181496-studio-storeでテンプレートを出品-販売する.md): Studio.Storeは、自作のテンプレートを出品・販売できるマーケットプレイスです。この記事では、テンプレートを出品するまでの流れと収益化の概要について説明します。
- [Studio.Storeで有料テンプレートを販売する](https://help.studio.design/ja/articles/11755322-studio-storeで有料テンプレートを販売する.md): Studio.Storeでは、テンプレートを有料で販売し、収益を得ることができます。売上の確認方法や、クーポンの発行方法について解説します。
- [Studio.Storeで無料テンプレートを出品して収益を得る（Studio Template Affiliate Program）](https://help.studio.design/ja/articles/11755633-studio-storeで無料テンプレートを出品して収益を得る-studio-template-affiliate-program.md): Studio Template Affiliate Programとは、無料テンプレートをStudio.Storeに出品することで、報酬を得ることができる仕組みです。その概要や、報酬を得られる具体的な条件を紹介します。
- [Studio.Store人気順のアルゴリズム](https://help.studio.design/ja/articles/12441666-studio-store人気順のアルゴリズム.md): Studio.Storeのテンプレート人気順ページは、最新データをもとに公平な集計が行われます。この記事では、ランキングに影響する指標や、透明性と公平性を保つ工夫について説明します。
- [Studio.Storeのテンプレートをスマートフォンから取得（購入）したい](https://help.studio.design/ja/articles/7181499-studio-storeのテンプレートをスマートフォンから取得-購入-したい.md): Studio.Storeはスマートフォンやタブレットでも閲覧できますが、取得（購入）手続きはPCブラウザから行う必要があります。
- [Studio.Storeで購入したテンプレートは複製できますか？](https://help.studio.design/ja/articles/7181501-studio-storeで購入したテンプレートは複製できますか.md): 無料テンプレートはプロジェクトを複製することで再利用が可能ですが、有料テンプレートが適用されたプロジェクトの複製はできません。その都度、テンプレートを購入してください。
- [Studio.Storeの有料テンプレート購入と有料プラン契約を別のアカウントで行いたい](https://help.studio.design/ja/articles/9245124-studio-storeの有料テンプレート購入と有料プラン契約を別のアカウントで行いたい.md): Studio.Storeのテンプレートの購入と有料プランの契約を別々のアカウントで分担できます。購入者と契約者を分けたい場合の基本的な考え方と、代表的な運用パターンを説明します。
- [Studio.Storeで取得（購入）したテンプレートがプロジェクト一覧で見つからない](https://help.studio.design/ja/articles/7181503-studio-storeで取得-購入-したテンプレートがプロジェクト一覧で見つからない.md): Studio.Storeで購入したテンプレートがプロジェクト一覧に表示されない場合に考えられる原因と、確認すべきポイントをまとめます。
- [Studio.Storeで購入したテンプレートを購入時点の状態に戻したいです](https://help.studio.design/ja/articles/7181502-studio-storeで購入したテンプレートを購入時点の状態に戻したいです.md): 購入したテンプレートを編集した後、購入時点の初期状態に巻き戻す方法をご紹介します。プロジェクトリセット機能を使うことで、デザインデータを購入時点の状態にリセットできます。
- [Studio.Storeでは、テンプレート購入のキャンセル・返金は対応していますか？](https://help.studio.design/ja/articles/9245177-studio-storeでは-テンプレート購入のキャンセル-返金は対応していますか.md): Studio有料テンプレート購入後のキャンセルや返金は承っておりません。購入前に内容をよくご確認いただき、ご理解の上でご購入ください。
- [Studio.Storeで購入したテンプレートの適格請求書発行はできますか？（インボイス制度）](https://help.studio.design/ja/articles/9249957-studio-storeで購入したテンプレートの適格請求書発行はできますか-インボイス制度.md): Studio.Storeで購入した有料テンプレートの適格請求書発行について解説しています。

### Studio.Assistant

- [Studio.Assistantでサイトを生成する](https://help.studio.design/ja/articles/13298038-studio-assistantでサイトを生成する.md): Studio.Assistantは、Webサイト制作の初期工程を効率化するAI搭載のWeb制作OSです。要件整理から情報設計、ワイヤーフレーム作成、デザインドラフト生成までを一気通貫で支援します。
- [Studio.Assistantでシートをインポート・エクスポートする](https://help.studio.design/ja/articles/16881348-studio-assistantでシートをインポート-エクスポートする.md): Studio.AssistantのProプランでは、サイトの概要・テキスト・ページ構成をシートで書き出し、表計算ソフトで編集してから読み込めます。3種類のシートの構成と、編集できる範囲を解説します。
- [Studio.Assistantをショートカットで操作する](https://help.studio.design/ja/articles/16881316-studio-assistantをショートカットで操作する.md): Studio.Assistantで使えるショートカットの一覧です。セクションのコピーや複製、セクション間の移動、複数選択の操作をキーボードだけで実行でき、生成後の調整を素早く進められます。
- [Studio.Assistantのプランを管理する](https://help.studio.design/ja/articles/16767384-studio-assistantのプランを管理する.md): Studio.AssistantにはStarterとProの2つのプランがあります。プランごとの料金と機能の違い、契約から請求の確認、プラン変更・解約までの手順を解説します。

### アクセシビリティ

- [Studio におけるアクセシビリティ](https://help.studio.design/ja/articles/5752182-studio-におけるアクセシビリティ.md)
- [Studioアクセシビリティチェックシート](https://help.studio.design/ja/articles/9978869-studioアクセシビリティチェックシート.md): StudioでWebサイトを制作する際に、アクセシブルな構築を実現する方法を確認するチェックシートをご紹介します。
- [WCAG 2.2 Level A, AA対応表](https://help.studio.design/ja/articles/7999573-wcag-2-2-level-a-aa対応表.md): W3C勧告 Web Content Accessibility Guidelines \(WCAG\) 2.2 に対するStudioの対応状況を記しています。
- [Studio HTML要素・属性対応表](https://help.studio.design/ja/articles/7999581-studio-html要素-属性対応表.md)
- [公開サイトの言語設定](https://help.studio.design/ja/articles/5537056-公開サイトの言語設定.md): Studioでは「言語」の設定を行うことで、サイトの使用言語を明示することが可能です。明示によって、翻訳ツールやスクリーンリーダーなどの支援技術がサイト上の言語を正確に識別でき、より正確な翻訳の提供や適切な言語での読み上げができます。
- [「aria-label」と「aria-hidden」とは](https://help.studio.design/ja/articles/5752183-aria-label-と-aria-hidden-とは.md): 設定したテキストをスクリーンリーダーで読み上げる「aria-label」と、読み上げ対象から除外する「aria-hidden」の機能について、ユースケースを用いてい解説します。

### お問い合わせ・その他

- [Studio.Stock](https://help.studio.design/ja/articles/12761189-studio-stock.md): Studio.Stockは、AI生成による高解像度・高品質な写真素材を提供するフォトストックサービスです。商用利用可能な画像を手軽に検索・ダウンロードでき、プロンプト編集や背景除去など多彩な編集機能も利用できます。
- [Studio用語集](https://help.studio.design/ja/articles/10044041-studio用語集.md): Studioで使われる主な用語の意味と関連機能をまとめた用語集です。デザインエディタやCMS、ドメイン設定など各機能を理解するための参考としてご活用ください。
- [制作中の「うまくいかない」を解消する20のチェックリスト](https://help.studio.design/ja/articles/9520141-制作中の-うまくいかない-を解消する20のチェックリスト.md): CMSアイテムが表示されない、リンクが機能しない、デバイス間で崩れるなど、Studioでよくある制作中のつまずきを20のチェックリストで解決！
- [困った時のサポートコンテンツ](https://help.studio.design/ja/articles/9977419-困った時のサポートコンテンツ.md): Studioを利用する際に活用できるリソースをシーン別に紹介します。初学者から上級者まで、目的に合わせて適切なリソースを選んでご活用ください。
- [Studioチャットサポートへのお問い合わせ方法](https://help.studio.design/ja/articles/8860191-studioチャットサポートへのお問い合わせ方法.md): Studioではお支払い関連やログインができないなどのお困りごとがある際に、チャットサポートをご利用いただけます。チャットサポートへの問い合わせ手順をご紹介します。
- [Studioサポートポリシー｜お問い合わせいただくユーザーの皆様へ](https://help.studio.design/ja/articles/8092616-studioサポートポリシー-お問い合わせいただくユーザーの皆様へ.md): サポートポリシーおよび対応の基本方針と対応時間についてご紹介します。
- [Studioを利用する際、レンタルサーバーは別途用意する必要がありますか？](https://help.studio.design/ja/articles/9144065-studioを利用する際-レンタルサーバーは別途用意する必要がありますか.md): 別途レンタルサーバーを契約する必要はありません。
- [Studioの説明資料はありますか？](https://help.studio.design/ja/articles/9144119-studioの説明資料はありますか.md): Studioを採用・提案する際に参考になる情報をまとめました。
- [Studioで多言語サイトを作成したい](https://help.studio.design/ja/articles/9317101-studioで多言語サイトを作成したい.md): Studio公式の多言語化機能は提供していませんが、プロジェクト管理の工夫や外部サービスの利用により実現している事例があります。チャット窓口ではサポート対象外となりますが、一部の事例を本記事でご紹介します。
- [Studioではメールサーバーを提供していますか？](https://help.studio.design/ja/articles/9144069-studioではメールサーバーを提供していますか.md): Studioではメールサーバーを提供していません。
- [Studioでカート・決済機能は作れますか？](https://help.studio.design/ja/articles/4185079-studioでカート-決済機能は作れますか.md): StudioではECサイトなどで利用されるカート・決済機能は提供していません。外部サービスとStudioのカスタムコード機能やEmbedボックスでのコード埋め込みのご利用を検討してください。
- [Studioのセキュリティ対策](https://help.studio.design/ja/articles/4682161-studioのセキュリティ対策.md): Studioのセキュリティに対する取り組みを紹介します。通信やデータの暗号化、ISMS認証、公開中のセキュリティチェックシートや回答オプションについて詳しく解説します。
- [Studio操作時のトラブルシューティングガイド](https://help.studio.design/ja/articles/9053745-studio操作時のトラブルシューティングガイド.md): Studioでエディタ操作ができないなどのトラブルが発生したときに、まず確認してほしい5つのチェック項目を紹介します。利用環境に起因する問題であれば、この項目を確認することによって早期解決につながる場合があります。
- [操作ログやアクセスログのデータ提供は可能ですか？](https://help.studio.design/ja/articles/9316231-操作ログやアクセスログのデータ提供は可能ですか.md): Business Plusプラン以上をご契約中のプロジェクトでは、アクティビティログを確認できます。
- [Studio Bug Bounty Programについて](https://help.studio.design/ja/articles/11043537-studio-bug-bounty-programについて.md): Studioでは、Studio上の脆弱性をご報告いただいた方へ報奨金を支払う制度をご用意しております。制度の概要、対象範囲、報告の手順についてご紹介します。
- [万が一Studioのサービスが終了してしまった場合、サイトはどうなりますか？](https://help.studio.design/ja/articles/9144116-万が一studioのサービスが終了してしまった場合-サイトはどうなりますか.md): Studioサービス終了時の対応について解説します。サービス終了の告知方法などをご紹介します。
- [不正行為や著作権侵害の報告フォーム](https://help.studio.design/ja/articles/9086630-不正行為や著作権侵害の報告フォーム.md): 利用規約やユーザーガイドラインに違反しているStudioで制作されたサイトを発見した際に、ご報告いただく専用フォームをご案内します。
- [コンソールログを確認する方法](https://help.studio.design/ja/articles/9053800-コンソールログを確認する方法.md): Studio操作時に問題が発生した場合、チャットサポートにてコンソールログの確認と画面録画を依頼させていただくことがあります。
- [アクティビティログ](https://help.studio.design/ja/articles/9901319-アクティビティログ.md): ユーザーが行なったプロジェクト内での操作履歴を保存し確認できる機能です。セキュリティ対策として活用できます。