マガジンのカバー画像

STUDIO

97
次世代のデザインツール「STUDIO」の公式マガジンです! https://studio.design/ja
運営しているクリエイター

#STUDIOTips

STUDIOフォームからのお問い合わせを、チームのSlackに届くようにする方法

STUDIOフォームからのお問い合わせを、チームのSlackに届くようにする方法

SlackのEmail app + メールの転送設定を利用すれば、STUDIOサイトに設置したフォームからの受信内容を、自動でSlackに投稿しチームで共有することができます。

STUDIOメンバーはこの方法でお問い合わせ対応状況を全員に可視化し、ユーザーの皆様の声にいつも応えられるようにしています🙌

STUDIOフォームとSlackを利用していれば誰でも同じ運用が可能なので、方法をシェアし

もっとみる
【STUDIO Tips】画像をhoverで切り替える方法

【STUDIO Tips】画像をhoverで切り替える方法

STUDIOではhoverの状態をデザインすることが可能ですが、hoverで画像を入れ替えるような挙動を再現できるの知ってましたか?

実装方法1. hoverで表示したい画像を配置する

2. その上に通常時に表示したい画像を重ねて配置。重ねて配置した画像のwidthとheightは100%にしましょう。(重ねて配置する場合は、まずは親画像のサイズを大きくして、入れやすくしましょう)

3. 2

もっとみる
Googleタグマネージャーの設定方法

Googleタグマネージャーの設定方法

STUDIOのApp機能には「Google タグマネージャー」があります。このタグマネージャーAppを活用すれば、たいていのコードの埋め込みが可能なので、まだ正式でサポートしていないツールの導入やJavascriptの埋め込みなども出来ちゃいます✌️

GoogleタグマネージャーのIDを取得タグマネージャーを利用するには、こちらからアカウントの作成をし、そしてコンテナを作成しましょう。

コンテ

もっとみる
STUDIOで背景動画を設定する方法

STUDIOで背景動画を設定する方法

STUDIOではメインビジュアルや背景などに動画を配置することができます。これにより、動きがあってインパクトのあるサイトをデザインすることが可能になります。
​背景動画を使ったSTUDIOサイトの例 → https://design-ship.jp/

背景動画の設定方法は主に、VimeoとYoutubeを使う2種類の方法があります。

Youtubeの場合:Youtubeの場合、背景動画を無料で

もっとみる
STUDIOで「noteで書く」ボタンを設置する方法

STUDIOで「noteで書く」ボタンを設置する方法

先日、noteがこんな発表をしててTweetするみたいなノリで、いま見ているサイトについてnoteが書きやすくなった。

実装での埋込み方法は、公式がこちらで解説しているので、今回はSTUDIOでのサイトで「noteで書く」ボタンを設置する方法を解説

リンクタグを活用する公式が解説しているやり方の1つであるこのコードを埋め込む形式だと、STUDIOはscript付きのコードは埋め込めないので設置

もっとみる
【STUDIO Tips】モバイル時のみ画像のスタイル変更する方法

【STUDIO Tips】モバイル時のみ画像のスタイル変更する方法

STUDIOでは、レスポンシブモードにおいて画像のスタイル変更ができません。そのため、レスポンシブモードでも画像のスタイルを変更する方法をご紹介します!これをマスターすると、例えばモバイルの時のみに画像のスタイルを変更することなどができちゃいます😉

1. デフォルトモードで、変更したい画像の上に同じ画像を重ね、重ねた画像のスタイルを変更します。
2. 重ねた画像の表示をモバイルのみに設定します

もっとみる
Google FormをSTUDIOに埋め込む方法

Google FormをSTUDIOに埋め込む方法

STUDIOにはデフォルトでのフォーム機能がありますが、もしラジオボタンやチェックボタンをどうしても使いたい場合は、Googleフォームを埋め込むのが良いでしょう。この記事では、STUDIOのサイトにGoogleフォームを埋め込む方法を解説します。

新しくフォームを作成Googleフォームのサイトにいき、新しくフォームを作成しましょう。この記事では、詳しい作成方法は省力します。

iframeコ

もっとみる
STUDIOに接続している独自ドメインで、メールを使う方法

STUDIOに接続している独自ドメインで、メールを使う方法

STUDIOで作成したサイトに独自ドメインを設定している場合、そのドメインでメールも使用する方法を解説します。

1. 独自ドメインを取得したサービスを確認サービスによって設定方法が違うので、まずは自分が独自ドメインを取得したサービスを確認しましょう。この記事では、「お名前.com」、「ムームードメイン」、「GoDaddy」での設定方法を解説しています。

2. ドメインと同じサービスで、メールサ

もっとみる
STUDIOにFacebook Pageを埋め込む方法

STUDIOにFacebook Pageを埋め込む方法

昨日、「STUDIOにTwitterフィードを埋め込む方法」を書いて共有したところ、Facebook版も欲しい!という声があったので、今回はFacebook版です。

Facebook公式のembedが使える!

Twitterと違い、Facebookは公式が提供してる「ページプラグイン」というサービスを使えばFacebookページを簡単にSTUDIOのサイトに埋め込むこと可能です。

1. F

もっとみる