Implist | 個人プロダクト開発を加速させるための理論と実装

STUDIO概要編 〜HTML/CSSを学んだあなたなら驚きの速さでWEBサイトを作ます〜


完全ノーコードでここまでできる!STUDIOで作るポートフォリオサイト

WEBサイトを作成するとき、みなさんはどのようなツールを使っていますか?

…ワイヤーフレームを組み、デザインを決め、HTMLでコーディングしていく方法が一般的かもしれません。

しかし、最近では「ノーコード」といって、コーディングをせずにWEB上でサイトが作れるツールも浸透してきました。無料で使えるテンプレートの数も多く、「WEBサイトをもちたい」個人が手軽にサイトを持つことも可能になってきたと言えます。

今回は、ノーコードのWEBサイト作成ツールの中でも「STUDIO」に注目して、その特徴を解説していきます!

STUDIOとは?

STUDIOとはWEBサイト作成ツールです。アカウント取得後は、クラウド上でWEBサイトの作成ができます(ソフトウェアのインストールは不要です)。自宅からでも職場からでもログインして作業できるのが便利です。

他のツールとの違いは?

今や、HTML/CSSといったコードを書かずにWEBサイトを作成するツールは数多くあります。これらは、大きく分類すると「ソフトウェアをインストールする必要がある」「インストール不要」に分けられます。

ソフトウェアをPCにインストールして使うツールは、インストールしたPCでしか使用できませんが、オフラインでも編集作業をすることができます。

これに対して、WEB上で編集するタイプのツールは、どのパソコンからでも(ID、パスワードで)ログインできますが、オンラインでないと編集ができません。また、提供元がサービスを停止したり、アップデートで仕様が大きく変わる可能性も考えておかなければなりません。

オンラインでWEB作成ツールの使い分け

WEBサイト作成ツールのうち、ソフトウェアをインストールする必要がないタイプのものは、STUDIO、ペライチ、WIXなどが人気です。それぞれデザインや操作方法に特徴があり、使用者によって好みや使いやすさは異なるでしょう。

このうち、HTML/CSSにまったく触れたことがないという人におすすめなのが、ペライチまたはWIX、そして、コードを書いた経験がある人向けのツールがSTUDIOです。

ペライチでは、用意されたデザインブロックを組み合わせてページを構成していきます(デザインの自由度は低め。自分でデザインを考えるのは苦手な人向けです。)。WIXでは、要素を「ペタペタ貼る」イメージでサイトをデザインしていきます。一方、STUDIOは、マージン、パディング、絶対配置・相対配置…などHTML/CSSの概念に基づいてスタイルの設定をしていきます。

STUDIOでできること

STUDIOでは、WEBサイトの作成に必要な機能はひととおり揃っております。そして、かなり多くの部分を無料で使用することが可能です。ここで、主な機能をざっと挙げてみます。

ドラッグ&ドロップで要素を追加

STUDIOでは、基本的に要素をドラッグ&ドロップで追加していきます。追加した要素は、Delキーで簡単に削除することができます。

追加できる要素は、「ボックス」「画像」「テキスト」「アイコン」の他に、googlemapやYoutubeなどもあります。

画像やアイコンは、連携サイトから無料素材を取得できます!…素材数も豊富で、かなり便利です。

また、カバーデザインやギャラリー、ヘッダー等、既にデザインされたブロックも多数用意されており、これらもドラッグ&ドロップで挿入できます。もちろん、画像は後から自身でアップロードしたものと差し替えることが可能です。

要素のスタイルを付加

編集画面上部の「スタイルバー」から、要素のスタイルを設定できます。幅は、px、%、auto、vh…と、柔軟に選べます。

「スタイルバー」には、その名の通り要素のスタイルを設定するための項目が並んでいます。色、枠線、シャドウ等の他、ボックスの配置(重なり合うボックスの上下の位置関係や、スクロールに関わらず位置を固定する設定など)が一通り揃っています。

なお、マージンやパディングは、スタイルバーの数字を変更することでも変えられますが、ボックスにカーソルを合わせると現れる矢印(⇔)を操作することでも調整できます。

 要素に「動き」は付けられるのか

現在のバージョンのSTUDIOでは、「スタイルバー」の「モーション」から、要素に動きを付けられます。これでちょっとしたアニメーションも可能です。

もちろん、スライダーなども実装できますよ!

レスポンシブデザインへの対応

STUDIOは、レスポンシブデザインにも対応しています。デスクトップ、モバイル…それぞれに対してボックスや画像サイズを設定できます。

その他イチオシ機能

◆「ライブプレビュー」機能があります。一度プレビューURLを発行すると、リアルタイムで編集内容が更新されてとても便利です!

◆共同編集モードがあり、複数人でのひとつのWEBサイトを手掛けることが可能です。

◆無料で使えるスタイリッシュなテンプレートが豊富に用意されています!

◆CMS機能も加わり、ブログのように記事を追加していくことができます!

…ここまで、かなりの機能が無料で使用可能です。

HTML/CSSと比べたSTUDIOのメリット・デメリット

STUDIOを使うと、サイトの作成が圧倒的に早くできます。以下のようなメニューバーを作るのに、STUDIOを使うと10分とかかりません。

しかも、各要素にはdivやnavなどのタグを付けることができるので、SEO対策となる「きれいなコード」を素早く生成できます。

デメリットとしては、無料範囲内で作成したサイトにはSTUDIOの広告が入ります。また、独自ドメインを設定する場合はやはり有料コースへの申込みが必要です。CMSで作成できる記事数も、無料版では制限があります。

とはいえ、自分でサーバーを借りて設定をして…という手間を考えると、STUDIOのサービス内で公開設定まで完結できるメリットは大きいのではないでしょうか。

登録方法

こちらのURLから、STUDIOの公式ページに移動できます。

https://studio.design/ja

メールアドレスとパスワードを設定するだけで、すぐにアカウントを登録できます。

以上、ノーコードツールSTUDIOについてご紹介しました!

次回は、実際にSTUDIOを操作しながらWEBサイトを作っていきましょう!

完全ノーコードでここまでできる!STUDIOで作るポートフォリオサイト