ブラウザ上で使用できるツールSTUDIOを使ってみた

※この記事は2019年に書かれたものです。

ポートフォリオサイトを作り直そうと思っていたのですが、カンプを作成するためにソフトを起動させるのも面倒……オンボロPCを使っているのですぐに重くなる……。
そんな中以前より気になっていたブラウザ上で使用できるデザインツール、STUDIOを使用してみました。

デザインフレームの作成や外出先などでちがうPCで作業したい場合にはちょうどいいかなという感じでした！

STUDIOについて

STUDIOとは「デザインから公開まで、コーディングなしで完結。」をコンセプトに株式会社STUDIOが運営するブラウザ上で使用できるデザインツールです。 HTMLやCSSの知識がなくても直観的にレイアウト、WEBページの公開を無料で行うことができます。

実際に使ってみる

会員登録する

STUDIOの公式ページで「無料ではじめる」から登録ページへ行けます。メールアドレスあるいはFacebookで登録ができます。
ログインすると「新規プロジェクト作成」から「白紙から作成」または「テンプレートから作成」を選びプロジェクトの名前を付けると作業画面へ移行します。

デザインしてみよう

左のアイコンからドラッグ＆ドロップで積み木を積んでいくようにレイアウトを作ることができます。marginやpaddingも直観的に設定することができます。
ただきちんと数値を決めている場合はちょっと設定しにくいかなと感じました。数値が合わせにくくマウスを握る手がぷるぷるしました。

レスポンシブデザインのデザインもリアルタイムで確認しながら行うことができます。
また、無料で使用できる画像やアイコンは多数あり、検索して探すことや自身でアップロードした画像を使うこともできます。

フォントの高さや文字幅の設定も可能でグーグルフォントも使用できます。

テンプレートを使ってみよう

デザインなんてしたことない、でもホームページを作ってみたい！という方もテンプレートを使えば簡単に作ることができます。
使いたいテンプレートをドラッグ＆ドロップすると使用できますのであとは文字や写真を変更するだけでページが完成します。

いくつか種類がありそのなかでもいくつか大まかに分かれていますので、複数のテンプレートからパーツごとに組み合わせることによりよりオリジナリティあふれるページを作ることができると思います。

また、わからないことがあった場合、ページ右下のチャットから質問することができます。

公開したい場合は

有料プランならば右上の公開ボタンから作成したページをWEB上に公開できます。アドレスに好きな単語等を入れましょう。独自ドメインを使用することができます。