STUDIOStudio

ログイン / 新規登録 

Design Editorあらゆる表現を可能にする次世代のデザインエディタ

Studioのデザインエディタは、ノーコードで0から自由にデザインすることが可能。
ピクセル単位の微調整から、ダイナミックなアニメーションまで。
もうコードを書く必要も、テンプレートに縛られる必要もありません。

Next Creation細部まで思い通りに仕上げる、
新たな制作体験。

レイアウトからフォント、アニメーションまで。
クリエイターが求める自由度と直感性を兼ね備えた、デザインエディタ。

Free Layout

スマートなレイアウトと、
直感的な編集体験。

  • ボックスレイアウト

    ボックスレイアウトやスナップ機能で、複雑な配置も直感的に。
    美しい構造を一瞬で作成できます。

  • レスポンシブ

    各デバイスサイズに合わせて、デザインを最適化。
    レイアウトの変更も自由自在に可能です。

  • コンポーネント

    共通パーツをまとめて、効率的な制作を。
    一度作れば、複数ページで使い回しも簡単。

    サンプル画像:コンポーネントの例。上段に2種類の見出しブロック、下段に2種類のカードが配置されている。それぞれ、紫色の枠で囲まれ、左上にはコンポーネント名である「Heading01」、「Heading02」、「Card01」、「Card02」の文字が表示されている。
  • プリセットパーツ

    用意されたセクション・パーツで最初の一歩が、ぐっと簡単に。

    サンプル画像:白と黒を基調にしたセクション・パーツの例。矢印などのアイコン付きのボタン、円形のメニューを開く/閉じるボタン、画像付きの横長ボタン、余白を広く取ったカード型のボタンなどが並​んでいる。
  • Figma to Studio

    Figmaデータを簡単にStudioサイトに変換。

    サンプル画像:同一のWebデザインのFigmaデータの上に、Studioサイトへ変換されたデータが重なっているイメージ。Webデザインは指紋の画像と白文字「General Lab©」が配置された青基調のデザイン。右下には「Figma → Studio」のロゴが配置されている。

Editor AIAIが伴走する、
最速の制作体験。

Editor AIは、クリエイターに全く新しい制作体験を提供します。
ドラフト文章の作成はもちろん、直感的な画像編集、面倒だった作業も自動で代行。すべての作業が、これまでにない速さに。

  • 01

    Image AI画像を「探す」から
「編集する」へ

    指示を出すだけで、
    画像素材を自在に編集可能に。
    素材探しのストレスから、自由になろう。

    サンプル画像:黒い背景の上に複数の画像が浮かび上がるように並んでいる。赤みがかったオレンジ色の背景に横向きの人物シルエットが映された画像が中央手前に配置され、その奥で同じ構成・異なる色味の写真が放射状に並んでいる。
  • 02

    Text AIあなた専属のコピーライター

    プロンプトひとつで、
    あなたの意図に沿った文章を自動生成。
    他言語翻訳なども、もっと簡単に。

    サンプル画像:暗い背景に韓国語・日本語・英語など複数言語のテキストが記載されたカードが並んでいる。中央の英語カードのみ発光しているようなピンク色のエフェクトと赤い円形アイコンが追加され、他のカードより強調されている。
  • 03

    Auto Layer Rename自動でリネーム、自動で整理

    煩雑なレイヤーの整理もStudioにお任せ。
    各レイヤーを自動で命名、サイト構造がよりわかりやすく。

    サンプル画像:デザインエディタ画面の切り取り。左側にレイヤーパネル、右側に人物写真が並ぶ。レイヤーパネルの中には階層構造を示すレイヤー名が縦に並んでおり、リネーム中のレイヤーはピンク色のテキストと細長い線で強調して表示されている。
  • 04

    Auto Responsiveあっという間に、レスポンシブ対応

    1つのデザインで、すべてのデバイスに対応。
    制作したレイアウトを、自動でレスポンシブ対応します。

    サンプル画像:黒い画面の中央にWebサイトのデザインが配置され、その背景に赤いガイドラインやレスポンシブ時のレイアウト例が薄く表示されている。Webサイトはオレンジ色基調の人物写真や英文で構成されている。

Visual
Design

ブランドをカタチづくる、
スタイルとフォント。

  • スタイルパネル

    色や文字のルールをまとめて管理。
    ブランドカラーや見出しのスタイルも、
    全ページで一括適用。

    サンプル画像:デザインエディタの一部の切り取り。画面左にはカラー設定パネルとテキストスタイルパネルが並んでいる。その下には「Start your story」と記載されたテキストボックスが表示されており、スタイルパネルで選択したスタイルが青い曲線で紐づけられている。
  • タイポグラフィ

    7,600種類以上のフォントが無料で利用可能。

    FONTPLUS、モリサワフォント(TypeSquare)、Google Fonts、カスタムフォント、System Fontsに対応。ブランドに合わせた多彩な書体を自由に使えます。

    Google FontsTypeSquareFontPlusCustomFonts
  • アニメーション

    スクロールやホバーなどの動きを、直感的な操作で追加。
    デザインに奥行きとリズムを生み出し、より魅力的な表現を実現します。

    MO
    TION
    MOTION
    MO
    TION
    MOTION
  • 色々な形式に対応

    動画・画像・PDFなど、幅広いファイル形式をアップロードして利用できます。

    サンプル画像:灰色の背景に白い8枚のカードが2段4列で並ぶ。各カードは拡張子を示し、アイコンと「.png」「.svg」「.mp4」などのテキストで構成されている。左上には黒いポインターとそれに追従する緑色の「+」アイコン、赤い「8」の通知が付いており、複数ファイルの追加する様子を示している。
  • Lottie

    軽量で滑らかなLottieアニメーションに対応。

  • iframe

    外部コンテンツをiframeで自由に埋め込み可能。

Creative AssetsStudio内で使える、
多彩なクリエイティブアセット。

新しく登場したStudio.Stockをはじめ、Unsplashや手持ちの素材も使用可能。多彩なビジュアルをStudio上で自由に取り込めます。

Studio Stock

クリエイターのための
次世代フォトストック

Studio.Stockをみる

arrow_forward

Unsplash

Collaboration

同時編集で進む、
チームの制作体験。

  • リアルタイムコラボレーション

    複数人で同時に編集できるリアルタイムコラボレーション。
    誰がどこを作業しているかを確認しながら、チームでスムーズに制作できます。

    サンプル画像:複数のテキストボックスと、草原に立つ家の写真で構成されたページを、2人のユーザーが編集している様子。左上のテキストボックスは青色の枠で、右下のテキストボックスはオレンジ色の枠で囲まれ、それぞれ編集中であることを示す矢印とユーザーアイコンが重なって表示されている。
  • コメント機能

    Studio上に直接コメントを残せる機能です。

    サンプル画像:デザインエディタ上でコメントを残している様子。青枠で囲まれた英文テキスの上に、白背景の吹き出しのアイコンとコメントパネルが浮かぶ。コメントパネル内にはユーザーのアイコンやユーザー同士の短いやり取りが表示されている。
  • コンテンツ編集モード

    レイアウトを崩さずに、テキストや画像だけを安全に編集できるモード。

    サンプル画像:デザインエディタでテキストの編集を行う様子。ページは複数のテキストと画像で構成され、それ以外の背景部分には編集不可であることを示す薄い青色が重なっている。青い矢印がテキストの一部に重なっており、編集中であることを示している。
  • バージョン管理

    これまでの編集履歴をいつでも確認・復元できるバージョン管理機能。
    変更前の状態にもワンクリックで戻せます。

Data

コンテンツを束ね、
柔軟に活用できるデータ管理。

  • CMS

    コンテンツを一箇所でまとめて管理。
    ブログやニュース、制作実績などをCMSで簡単に更新。

    サンプル画像:記事一覧画面の上に、記事詳細画面が重なって配置されている。一覧画面には複数の記事が並び、各記事のステータスやタイトルを確認できる。詳細画面には記事のタイトル・本文とその上にオレンジ色と青色の矢印が重なって表示され、編集中であることを示している。
  • フィルタリング

    CMSで登録したデータをもとに、カテゴリやタグなどの条件で動的に絞り込み表示ができます。

    サンプル画像:灰色のパネル上で、絞り込み設定を行う様子。上段は「Tags:」の横に選択中のタグ「Branding Dynamic」が横並びで表示されている。その下に「Web Design」「Marketing」「Development」「DX」などのタグが縦積みで並ぶ。
  • API連携

    外部サービスとのデータ連携を可能に。
    Studioサイトにリアルタイムで反映できます。

    サンプル画像:白とグレーの格子柄の背景に、外部ツールを示す複数の正方形が並ぶ。それぞれの正方形の中央にはNotion、Airtableなどのロゴが配置されている。
  • フォーム

    Studio上で簡単にフォームを作成・管理。
    問い合わせ、イベント申し込み、資料請求など、目的に合わせて柔軟にカスタマイズできます。

    サンプル画像:画面の左側にはフォームを構成する複数のパーツが並ぶ追加パネルが、右側には制作中のフォームが配置されている。中央には青枠で囲まれたパーツ「input」と手のアイコンが重なって表示されており、追加パネルから編集中のフォームへ、項目をドラッグして追加する様子を示している。
Studio

さあ、今すぐStudioを始めよう。

AI搭載の軽快なデザインエディタと美しいプリセットで、

理想のサイトを最速でカタチに。これが、Web制作ツールの新基準。

今すぐ無料で始める

arrow_forward

旧エディタを見る

arrow_forward