マガジンのカバー画像

STUDIO

28
運営しているクリエイター

#デザイン

「一行文庫」のつくり方 〜便利すぎて教えたくない『STUDIO』でのNoCodeサイト制作〜

「一行文庫」のつくり方 〜便利すぎて教えたくない『STUDIO』でのNoCodeサイト制作〜

「一行文庫」を公開してから、 約三ヶ月半ほど経ちました。公開当初に運よく少し話題になり、その後も細々と続けているのですが、日経新聞の記事で紹介されたり、毎日放送の人気番組「田村淳のコンテンツHolic」でも紹介されたりなど、おかげさまで色々なお問い合わせもいただいております。ありがとうございます。

そんな中で「あれって、どうやって作ってるんですか?」と聞かれることも、よくあります。Webサイトと

もっとみる
Figmaで使える!スタイルガイドテンプレートのつくりかた (テンプレートのみ有料)

Figmaで使える!スタイルガイドテンプレートのつくりかた (テンプレートのみ有料)

こんにちは、かみそるです。
noteでファイルアップロードができるようになったので、さっそくずっと育ててきたスタイルガイドのテンプレートを販売してみようと思います!

このノートでは、テンプレートのつくりかたを解説しています。テンプレートデータのダウンロードは有料ですが、命名規則などのノウハウはすべて無料で読めるのでぜひ参考にしてみてください!

はじめに🌟 UIをスクラッチで作るときに向いてい

もっとみる
【解説】STUDIO3.0のCMSとは | 仕組みや使い方のまとめ(準備編)

【解説】STUDIO3.0のCMSとは | 仕組みや使い方のまとめ(準備編)

2020年6月4日に次世代のWebデザインプラットフォームである「STUDIO」が3.0への大型アップデートが発表されました。

プレスリリースによると大きな追加機能としては「CMS」「アニメーション」「シンボル」の3つです。

今回はその中でも特に目玉機能と言われている「CMS」について概要や仕組み、使い方を解説します。公式のヘルプページもありますので、こちらを参考にしつつまとめていきます。

もっとみる
いちばん詳しい Sketch / XD / Figma / Studio の比較  〜3. デザイン機能比較

いちばん詳しい Sketch / XD / Figma / Studio の比較 〜3. デザイン機能比較

Sketch, XD, Figma, Studio を比較する連載記事の3番目です。

1. 導入と背景知識
2. 基本項目の比較
3. デザイン機能比較 ◀イマココ
4. シンボルとスタイル
5. プロトタイピングとコラボレーション
6. まとめ

今回は基本的なデザイン作成に関する機能についての比較です。

操作感・UI

ツールの操作のしやすさ、UIについての評価です。まず、基本的な操

もっとみる
<最速レビュー>最強のSTUDIOフォーム2.0&Twitterシェアボタンの裏技公開

<最速レビュー>最強のSTUDIOフォーム2.0&Twitterシェアボタンの裏技公開

こんにちはがきこ(Twitter @gakikocamp)です
弊社はキャンプのスタートアップ「キャンプ女子株式会社」という会社を福岡で営んでおり、私はデザイン部門の責任者も兼任しています。

私自身、ジーズアカデミーというプログラミングスクールを卒業し、昔はコーディングしていましたが、現在はSTUDIOという、業界で話題のノーコーディングのWEBデザインツールを使ってWEBサービスやLPなどを作

もっとみる
STUDIOを活用した爆速クリエイティブでROI最大化を狙うマーケティング戦術〜虎の巻〜

STUDIOを活用した爆速クリエイティブでROI最大化を狙うマーケティング戦術〜虎の巻〜

こんにちは!デザイナーの小松(@kekenken)です。

現在「テクノロジーで人々を適切な医療に案内する」をミッションにした医療スタートアップのUbie株式会社でデザイナーをしています。

他のメンバーの記事もオススメなのでぜひご覧になってください。

今日は、ぼくが担当しているクリニックに向けた事業「AI問診ユビー for クリニック」のマーケティングで実践している、ノーコードツールのSTUD

もっとみる
STUDIOの使い方 - 登録・基本操作編

STUDIOの使い方 - 登録・基本操作編

▼爆速でサイト構築が可能なSTUDIOテンプレートはこちら▼
https://studio.design/ja/store/designers/harukana_8

01. STUDIOとはSTUDIOは「ノーコードでデザインから公開まで“1つの場所で完結できる”次世代のWebサイト制作プラットフォーム」です。

デザインエディタでデザインをすると、デザインが瞬時にコードに変換されて実際のWeb

もっとみる
STUDIOでノーコードでアニメーションを作る②(組み合わせ編)

STUDIOでノーコードでアニメーションを作る②(組み合わせ編)

前篇の基本編で、「WEBサイトをスクロールしてみていくときに出てくるアニメーション」みたいなのはほぼほぼ網羅できるかと思うのですが、ローディングアニメーションを作るとなると「現れる」→「消える」という2段階が必要になります。

前回の設定では基本的に出てきっぱなしだったのですが、これに消えるアニメーションを追加することで順序立てたアニメーションが作成可能になります!

appearの実例(組み合わ

もっとみる
STUDIOでノーコードでアニメーションを作る③(ローディングアニメーション編)

STUDIOでノーコードでアニメーションを作る③(ローディングアニメーション編)

アニメーションを組み合わせることで、段階的に再生されるアニメーションを作れることは前回までで説明致しましたので、ここではそれらを駆使してWEBサイト読み込み時のローディングアニメーションを作成していきます。

前回までは「現れる」→「消える」の2段階をやりましたが、これだけだと、「消えても見えなくなっただけでそこにいる状態」になってしまいます。
なので、その下にあるWEBサイト上のボタンなどがこの

もっとみる
ウェブサイトアニメーションで実現する体験の深度

ウェブサイトアニメーションで実現する体験の深度

みんなおいでよアニメーション沼に。

こんにちは、アニメーション沼にハマって早6年、ZELKOVA STUDIOのいっちゃです。

普段はデザイナーチーム、ZELKOVA STUDIOに所属しウェブサイト制作の仕事をしているのですが、コードを書くことができないこともありノーコードでウェブサイトを生成できるツール、STUDIOを使用しています。
近頃...

アニメーションって、良いよね。

と、僕

もっとみる
STUDIOの使い方 - 入門編【2023.8.4更新】

STUDIOの使い方 - 入門編【2023.8.4更新】

この記事ではSTUDIOでの制作を始める際にまず知っておきたい基本をまとめています。チームメンバーへの共有・パートナー様への説明などにもぜひご活用ください。

▼爆速でサイト構築が可能なSTUDIOテンプレートはこちら▼
https://studio.design/ja/store/designers/harukana_8

01. STUDIOとはhttps://studio.design/ja

もっとみる