デザインしたサイトをそのままローンチ!国産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サイトの存在をお知らせしましょう。

料金プラン

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

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

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

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

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