Webサービス開発者必見! ノーコードツールSTUDIOのTips | 千葉で集客ホームページ制作はティーエスフォート
コラム

Webサービス開発者必見! ノーコードツールSTUDIOのTips

Webサービス開発者必見! ノーコードツールSTUDIOのTips

この記事では、ノーコードツールのSTUDIOについて紹介していきます。

STUDIOとはコードを書かずに、Webサイト制作を完結」できる国産デザインツールです。

近年、プログラミングの知識のない非エンジニアでもwebサイトやwebアプリを制作できるノーコードツールが世界的に流行し始めています。

STUDIOもその一種です。

STUDIOのメリット

1.日本生まれ
英語が読めなくても読むことができる点はメリットだと言えます。

2.webフォントが最初から全部使える
プラグインを入れずともGoogle fontやTypeSquareを最初から使うことができます。

STUDIOのデメリット

1.制作を他社に依存してしまう
他社プロダクトに全く依存せずに制作をするというのは不可能ですがそういったリスクはなるべく減らしたいと思うのも自然な考えだと思います。

2.操作感が独特
操作感としては限りなくデザインツールに近いオーサリングツールというようなイメージです。
手軽に作れはするものの、万能ではありません。

STUDIOのTips

iframe埋め込み動画の後に静止画像を表示させる方法


STUDIOではiframeを用いた動画の埋め込みが可能で、youtube動画やVimeo動画を埋め込み、自動再生・ループ再生を行うことができます。

まずはiframeが埋め込まれている要素を選択し、その上にbox/imgを追加します。

次に、静止画として使用したい画像を指定します。

続いて、画像要素に対してアニメーションを設定します。

この時、opasity(透明度)を0にしましょう。


次に、テキストを出現させたい場合は画像要素の上に置いてあるテキストに、静止画よりも大きい値の遅延を設定します。



接続ドメインの設定


STUDIOで作成したサイトにドメインを接続しようとした時、例えばexample.comというドメインを使う場合「www.example.com」か「example.com」のどちらか一方を選ぶ必要があります。

しかしGoogle Domainsを使っている場合は、「www.example.com」にアクセスした訪問者を「example.com」にリダイレクトさせ、wwwあり・なしどちらのパターンのURLも有効にする事ができます。

設定方法をご紹介します。


1. Google Domainsのログイン画面にアクセスします。

2. ドメインを取得したGoogleアカウントのメールアドレスとパスワードを入力し、ログインします。

3. [マイドメイン] からSTUDIOに接続したいドメインを選択します。

4. [DNS] を選択し、一番下までスクロールします。

5. 合成レコードの欄にて、「サブドメインの転送」を設定したまま、サブドメインの欄にwwwを入力します。

6. ターゲットURLの欄にSTUDIOに接続しているURLを入力します。

7. 下にある項目を皆様それぞれの要望に沿って選びます。
特に要望がない場合は、下の動画の様に、一時的なダイレクト、パスを転送する、SSLを有効にするを選択します。

8. 追加ボタンを押します。



Slackへの共有


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

フォームの通知先メールアドレスには、既存のアドレス、新しい専用アドレスどちらを使っても設定が可能です。

ステップ1 : SlackのEmail appを設定する

1. Slack 上で 歯車アイコン > Add an appをクリック

2. View App Directory をクリック

3. Email appを検索して、Add to Slackをクリック

4. 起動した画面で、受信内容をポストしたいチャンネルを選択または作成します。

5. チャンネルのメールアドレスが生成され、投稿者として表示されるbotアカウントの情報が設定できるようになります。
このアドレスにフォーム通知メールを自動転送設定していきます。



ステップ2 : メールの転送設定

noreply@studio.design から送られたメールを、先ほど生成したSlackチャンネルのメールアドレスに自動的に転送するように設定します。

Gmailの場合の設定方法を紹介します。

フォーム通知先に専用アドレスを使用する場合

1. 右上の歯車>設定>メール転送とPOP/IMAP を開き、転送先アドレスを追加 ポップアップにSlackチャンネルのメールアドレスを入力します。



まとめ

まとめ
今回の記事では、ノーコードツールのSTUDIOを使ったTipsについてご紹介しました。

ただWebサイトを制作するだけではなく、いろいろなツールとの連携が可能でもありますので、ぜひいろいろ試してみてください。

関連記事

ページ先頭へ