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

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

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

参考:
STUDIO

「STUDIO」とは?

st.jpg

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

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

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

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

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

「STUDIO」を使ってみよう

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

1. サインアップ

01.jpg

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

02.jpg

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

2. プロジェクトの作成

03.jpg

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

04.jpg

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

05.jpg

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

3. デザインをはじめる

06.jpg

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

07.jpg

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

08.jpg

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

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

09.jpg

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

10.jpg

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

11.jpg

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

12.jpg

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

4. ページの追加

13.jpg

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

14.jpg

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

15.jpg

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

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

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

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

17.jpg

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

16.jpg

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

6. ページの公開

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

18.jpg

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

19.jpg

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

料金プラン

STUDIOは、無料から始めることも可能ですが、用途に応じてプランを変更することも可能です。デザインを行うだけであれば無料で使えるので、公開するまで料金がかからないのも魅力のひとつです。

Design プラン Publish プラン Grow プラン
月額 0ドル (無料) 9ドル (約960円) 27ドル (約2870円)
デザイン ツール
リアルタイム シェア
チーム コラボ レーション
ページ 無制限 無制限 無制限
ページ公開 SSL・SEO
独自機能 CMS

まとめ:直感的な編集でホームページのデザインを

STUDIOを使えば、直感的な編集で気軽にホームページをデザインし、公開することができます。レスポンシブ対応などもほぼ自動化されているため、コーディングに関する知識がいらないのも、中上級者だけでなく初心者にもSTUDIOが選ばれている理由です。

また、同様の手順でiPhoneアプリのモックアップを作成することもできます。触り心地にもこだわったモックアップを作成することができるので、ぜひ一度手に取ってみてはいかがでしょうか。

参考:
ホームページ作成に使えるのはどれ?無料で簡単に作れるツール15選
自社でホームページの“ページ作成や更新”が出来る|ferret One