ウェブサイトを作成しようとするとき、一番ネックになるのがコーディングです。「このパーツをあと3ミリくらい右に動かしたいな～」という簡単そうな操作でも、まったく知識がないとどの部分をどのように編集すればいいのかさっぱり分からないことも多いはず。そんな需要に応えて、世の中にはコードを一切書かずにウェブサイトを作成できるさまざまな「ノーコード」ツールが存在しています。今回はオープンソースで開発されているノーコードツールの「Webstudio」がベータ版をリリースしたとのことなので、早速使い勝手を試してみました。
Open visual development for the open web
https://webstudio.is/
Webstudioの特徴がまとまっているムービーが公開されています。
[embedded content]
ムービーで触れられているWebstudioの長所は大きく3つあり、まず一つ目はロックインされない点とのこと。オープンソースで開発されているため、いつでも自分でWebstudioをホスティングして使用することが可能です。
また2点目の長所として、Webstudioの公式ホスティングサービスを使用する場合、ウェブサイトはCloudflare Workers上にデプロイされるという点がアピールされています。世界中に存在しているエッジサーバーでサイトがホストされることで、世界中のどこからアクセスしても高速なレスポンスが期待できるとのこと。
最後の長所はCSSでよく使用される「class」を「スタイルの元」にすることで使い勝手を向上させた点が挙げられています。
ということで、早速使ってみます。本当はセルフホストを試したかったのですが、記事作成時点では10個のリポジトリがある企業アカウントのページへのリンクが提供されているのみとなっており、特にホストを行う手順などのドキュメントが用意されていない模様でした。そのため今回は公式がホスティングしているベータ版を試していきます。公式サイトへアクセスし、「Get early access」をクリック。
GoogleかGitHubのアカウントでサインイン可能です。今回はGoogleアカウントを使用するので「Sign in with Google」をクリック。
ログインしたいアカウントをクリック。
ログインが完了しました。「New Project」をクリックしてプロジェクトを作成します。
プロジェクトの名前を決めるウィンドウが出現。プロジェクト名に「Test Project」と入力し、「Create Project」をクリックします。
ブラウザの画面サイズが小さすぎるという警告が出ました。正しくWebstudioを動作させるにはブラウザの横幅を900px以上にする必要があるとのこと。
ブラウザのサイズを変えるとWebstudioの画面が表示されます。初期状態はこんな感じ。
左のメニューの「＋」マークのボタンをクリックすると、さまざまなコンポーネントが表示されます。このコンポーネントをクリックするとページの部分にどんどん追加されていくというわけ。
配置を間違えた場合はドラッグ＆ドロップで場所を移動できます。
リンクの設定は右のメニューの「Properties」タブで行えます。ここでリンク先を設定したり、別タブで開くように設定したり、あらかじめリンク先を読み込む設定をしたりできます。
ページ全体の余白が気になったので修正します。サイトの何もないところをクリックして「Body」を選択したのち、右のメニューの「Space」欄でPADDINGの左右を12pxにしてみました。また、本文のサイズなどさまざまな設定が可能になっています。
こうして変更した設定をCSSで表現したものが左下に表示されているため、何らかの事情でWebstudioの利用をやめることになった際も移行しやすくなっています。
また、上部には「☆」「991」「767」「479」というタブが存在しています。このタブをクリックすると、該当するピクセル数以下の場合のみ適用するスタイルを設定可能。例えば、「479」のタブをクリックしてフォントのサイズを小さくすると、画面が479px以下の場合のみ文字サイズを小さくしてサイトを表示できるというわけです。
また、Style Sourcesを設定することで、複数のパーツのスタイルをまとめて変更可能。まず、Style Sourcesの欄に新しいトークン名を入力し、トークンを作成します。今回は「title」という名前でトークンを作成しました。
パーツを選んで「title」トークンを適用し、背景を黄色に変更します。これだけだと特に通常の手順と変わりません。
別の要素に同じ「title」トークンを適用すると、自動で背景色が黄色になりました。今後、この「title」トークンを指定してスタイルを変更すると自動で適用されている全ての要素に適用されることになります。
スタイルを変更した部分は青色で表示されるため、どこを変更したのかが分かりやすくなっています。
青色になっている部分は「今選択している要素・トークンで設定したスタイル」ですが、別の要素・トークンで設定したスタイルが継承されてきた場合はオレンジ色で表示されます。クリックすることでどの要素・トークンで設定したスタイルなのかが確認できるので、「なぜそのスタイルが適用されているのか」という原因を見つけやすくなっています。
左のタブの2個目は画像の管理を行えるタブです。まずは「Upload」をクリックして画像をアップロードします。
画像のアップロードが完了すると、下に表示されます。
画像をページに表示するには、まず「Image」コンポーネントを表示したい箇所に挿入します。その後、右のメニューで「Properties」から「Choose source」をクリックし、先ほどアップロードした画像を選択すればOK。
サイズの変更や代替テキストの設定も行えます。
左のタブの3個目はページの管理を行えるタブです。試しに「About」という名前のページを作成してみます。ページタブを開き、上にあるプラスマークのボタンをクリックし、ページ名やアドレス、ページのタイトルを入力して「Create page」をクリック。
あとはこれまでと同様に新しいページを編集していけばOK。サイト内のリンクについては「リンク」オブジェクトの「Properties」でHref欄の左から2個目をクリックすると設定可能です。
サイトがいい感じになってきたら、いよいよ右上のボタンの出番です。
まず再生マークのボタンをクリックしてみるとプレビュー画面になりました。画面の右にあるマークをクリックしてドラッグすると画面幅を変えることが可能で、それぞれのサイズでどのように表示されるのかをスムーズに確認できます。
「Share」は他人にプレビューを見せることができる機能です。「Share」ボタンをクリックし、「Share a custom link」をクリック。
生成されたリンクを「Copy link」をクリックしてコピーします。
サイトを見せたい相手にこのリンクを渡すことで、サイトのプレビューを表示可能というわけ。記事作成時点ではプレビューを見せるだけですが、将来的にはリアルタイム共同編集機能を実装する予定とのことです。
そして「Publish」ボタンでサイトを公開できます。「wstd.io」のサブドメインが自動で生成されるので、特にドメインを持っていなくてもOK。ドメインを持っている場合はカスタムドメインを接続することも可能です。
Publishボタンをクリックして数十秒ほど待つと、先ほど表示されていたドメインでサイトが公開されているのを確認できました。
Webstudioのマネージドサービスを利用してホスティングを行う場合、毎月1万PVまで無料で使用でき、データの保存用ストレージも2GB分が無料で提供されています。また、月間20ドル(約2800円)のProプランでは毎月50万PVまでアクセス可能になり、ストレージも20GBまで増量されるほか、バージョン履歴や共有時の権限管理機能が利用できるとのこと。さらにアクセス数やストレージ、機能などが必要なユーザー向けに全カスタムが可能なエンタープライズプランも用意されています。
この記事のタイトルとURLをコピーする
