デザインしたサイトをそのままローンチ!国産Webデザインプラットフォーム「STUDIO」

2018年4月上旬、待望の国産プロトタイピングツールが公式に公開されました。その名もSTUDIOです。

STUDIOはiPhoneアプリのモックアップを作成するだけでなく、Webデザインのモックアップを作成し、そのまま公開までできてしまいます。

そこで今回は、*デザインしたサイトがそのままローンチできる新しい国産Webデザインプラットフォーム「STUDIO」*の概要や簡単な使い方を紹介します。小型サイトならたった数時間でWebサイトの公開まで行き着けるでしょう。使い方は簡単なので、早速触ってみてはいかがでしょうか。

参考：
STUDIO

「STUDIO」とは？

STUDIOは、デザインから公開、運用までを丸々行うことができる、無料から始められるWebデザインプラットフォームです。もともとはモバイルデザインも含めたプロトタイピングツールとして注目を集めていましたが、ドラッグ＆ドロップで簡単にWebデザインを行うことができることに加え、そのままWebサイトを公開する機能が付け加わりました。

デザインはSTUDIO上で直感的に行うことができるため、複雑なコーディング作業を必要としません。各機能をドラッグして追加し、レイアウトを作るだけです。テンプレートも複数用意されているので、すぐにデザインを始めることができます。もちろん、各デバイスに合わせたレスポンシブデザインにも対応しています。

また、もともとチームコラボレーション可能なモックアップツールとして開発された経緯もあるため、複数メンバーを招待して同時に作業できます。

写真の画像検索機能や、さまざまなアイコンセットも同梱されているので、人気の写真やアイコンを、他の素材から探すことなく使うこともできます。アイコンを効果的に使うだけでもユーザビリティの高いWebサイトが完成するので、Webサイト運営者にとっては嬉しい機能です。

GoogleアナリティクスやGoogleサーチコンソール、INTERCOMとのインテグレーション機能もあるので、アクセス分析を行ったりWebサイト上にチャットを表示したりすることも可能です。

「STUDIO」を使ってみよう

STUDIOの始め方はとても簡単です。ここでは、STUDIOの開始手順や簡単な操作方法をご紹介します。

1. サインアップ

サインアップを行うには、STUDIOのホームページ右上かヒーローヘッダー部分にある*「無料ではじめる」*ボタンをクリックします。

*「新規登録」*画面が表示されるので、「名前」「メールアドレス」「パスワード」を入力するか、Facebookアカウントで登録できます。メールアドレスで登録する際には、承認メールが送られるので、リンクをクリックして承認しましょう。

2. プロジェクトの作成

ログインすると、ダッシュボードページに移動します。*「新規プロジェクト作成」*をクリックしてみましょう。

次に、*「タイプを選択」が表示されます。「Web」と「iPhone App」*がありますが、最終的にホームページとして公開する場合には「Web」を選択します。「iPhone App」では、モバイルアプリのプロトタイプを作成することができます。ここでは「Web」を選択してみましょう。

プロジェクト名を入力するテキストボックスが表示されるので、任意の名前を入力し、*「作成」*をクリックしましょう。

3. デザインをはじめる

その後、プロジェクトのダッシュボードに移動するので、*「デザインをはじめよう。」*か、左上の「デザイン編集」ボタンをクリックして、Webサイトのデザインを始めてみましょう。

デザインは、ゼロからデザインする*「デザインから始める」と、用意されたテンプレートのパーツを組み替える「テンプレートから始める」*の2種類が用意されています。ここでは、「デザインから始める」で自由にレイアウトしてみましょう。

すると*「エディター」*画面になります。

エディター画面では、上部にコンテンツのプロパティを編集するプロパティ編集ボックスがあります。左の「ADD」にマウスカーソルを合わせると追加できるコンポーネントを表示し、右の「PAGES」ではどのページを編集するかをチェックすることができます。一番下は拡大率やライブプレビューボタン(再生ボタンのアイコン)などが配置されています。

まず、「ADD」にマウスカーソルを合わせ、THEMEの「Trip Theme」をクリックし、一番上のヒーローヘッダーをドラッグ＆ドロップしてみましょう。

すると、このようにコンポーネントが追加されたので、テキストや画像、フォントなどを変更してみます。

結果、このような形で編集することができました。

同様の手順で、さまざまなパーツを追加することができます。YouTube動画や、地図を埋め込むことも可能です。

4. ページの追加

ページを追加するには、右の「PAGES」から「＋」マークを押して、ページを追加します。

同様に白紙のページが登場するので、コンポーネントを追加してデザインしてみましょう。

ページ遷移を行うには、ページのボタンやアイコンなどのコンポーネントにリンクを貼り付ける必要があります。コンポーネントをクリックしたときに表示される*「＞」(右矢印)*をクリックすることで、リンクを付け加えることができます。

5. ライブプレビューで確認

STUDIOで編集中のデザインは、ライブプレビューツールでリアルタイムにデザインを確認できます。

ライブプレビューツールを利用するには、右上の*「ライブプレビュー」*ボタンを押します。

すると、ライブプレビュー用のQRコードとURLが発行されるので、早速クリックして確認してみましょう。

このように、しっかりとWebブラウザでも確認することができました。画面の横幅を動かすことで、レスポンシブデザインにも対応していることが分かります。URLは、メンバーに共有して全員で確認を行うことも可能です。

6. ページの公開

ページを公開するには、エディター画面右上の*「公開」*ボタンを押します。公開にはPublishプランへの変更が必要ですが、14日間のトライアル期間が設けられています。

公開するボタンを押すと、サブドメインを入力する画面に移動します。*「ドメインをお持ちの方」*をクリックすると、独自ドメインで設定することもできます。

URL設定後、*「Congratulations!」*の文字にURLとSNSシェアボタンが添えられているので、早速友人や知人にWebサイトの存在をお知らせしましょう。