【体験談】ノーコードツール「STUDIO」で初心者がWebサイトを作成してみた。アカウント作成から公開まで

趣味やビジネスなどの情報発信として、あれば便利なWebサイト。Webサイト制作には専門的な知識が必要かも、と二の足を踏んでいる方は多いかもしれません。ノーコードツールを使えば、ドラッグ・オン・ドロップの直感操作で、Webサイトを作れることをご存知でしょうか？
今回は、プログラム知識ゼロ・Webサイト制作経験ゼロの筆者が、「STUDIO」で実際にWebサイトを作成してみました。

サイト制作のためにノーコードツールを探している方は、是非参考にしてみてください。

ライター:荒井啓仁

STUDIOとは

STUDIOは、「ノーコードツール」と呼ばれるサービスの1つで、専門知識なしで本格的なWebサイトが作れます。デザインの知識がなくても、テンプレートを利用すれば簡単におしゃれなWebサイトを作成可能。
無料で利用できますが、「独自ドメインの取得ができない」「STUDIOのバナーが掲載されてしまう」などデメリットもある点は注意しましょう。まず無料で試してみて、本格的に運用するのであれば有料プランの加入を検討するのがおすすめです。

ノーコードツールとは？

「ノーコードツール」とは、専門的な知識なしにWebサイトやアプリの制作を行えるツールのこと。多くのツールは有料で、月額払いの場合がほとんどです。簡単に作れる代わりに、全てを一から作るよりも自由度が低い点やサービスの移行が難しい点は注意が必要です。

「STUDIO」のアカウント作成〜チュートリアル

「STUDIO」の登録に必要なのはメールアドレス、もしくはFacebookかGoogleのアカウントだけ。好きな方法を選び認証を済ませれば、無料ですぐに利用可能です。

登録が終わると、編集画面のチュートリアルが始まります。

チュートリアルでは、画像の追加から変更、フィルター追加、テキストの追加など、編集で使える基本的な操作を実際に操作しながら学べます。どのチュートリアルもドラッグやドロップといった簡単な操作だけなので、専門的な知識はほとんど必要ありません。

4ステップを完了させるまで5分もかかりませんでした。チュートリアルを終わらせると、実際にWebサイトを作る段階へ進めます。

「STUDIO」で実際にWebサイトを作ってみた

チュートリアルを終え、実際に「STUDIO」でWebサイトを作ってみました。Webサイト制作経験もなければ、プログラミングの知識もない筆者ですが、果たしてWebサイトは作れるのか……？　構想を練る段階からレポートをお届けします。

1．構想を練る

まずは、どのようなサイトを作るか構想を紙に描いてみました。今回はテストページということで、大きなメインビジュアルと、簡単な説明、リンク先では詳細を紹介するページ、SNSアカウントの連携などを行えるWebページを作ってみます。

2．テンプレート・ワイヤーフレームを選ぶ

Webサイトのイメージに近いものがあれば、テンプレートやワイヤーフレームから選ぶのも良いでしょう。テンプレートには有料のものもありますが、画像や文章を置き換えるだけで、プロ顔負けのWebサイトが作れます。もちろん、白紙からのWebサイト制作も可能です。

3．画像やテキストを入れる際の注意点

まずは、メインビジュアルに使える画像を配置してみます。自身でアップロードする以外にもフリー画像サイト「Unsplash」の写真もデフォルトで利用可能。高品質な画像も多く、イメージに合う画像の用意が難しければ、利用するのも良いかもしれません。

▲メイン画像を配置したイメージ

文字が見にくいため輪郭を付けたかったのですが、輪郭を付けるには、有料プランに加入し、CSSを編集する必要があるとのこと。今回は「シャドウ」を使い、文字を強調させてみました。

▲文字にシャドウを入れて調整したイメージ

メニューからテキストボックスを選択して、右上の［シャドウ］を選択し、影の落とし方を選びます。その次に［色］から好きな色を選べば設定完了です。表示されるボックスをドラッグすれば、影の位置も調整できました。

画像を配置する際のTips

画像の上にボックスを配置できない

▲画像を選択すると画像右上にスイッチが出ます

配置した画像の右上に表示されるスイッチを「Box」側にすればテキストを配置可能です。

画像の角を丸くするには？

配置した画像の左上にある青と白の丸をドラッグすることで画像の角を丸くできます。

「Box」と「Img」の違い

▲「Img」を選ぶと画像本来の縦横比でしか拡大・縮小できません

「Img」をアクティブにした状態では配置した画像の元のサイズと比率を参照してしまうため、比率を調整したい場合は「Box」を選びましょう。また「Img」がアクティブの状態では画像の上にボックスを配置できないため、画像を見せたい場合以外は「Box」を選択するのが無難です。

4．枠組みを作ってくれる「セクション」が便利！

構想通りに、Webサイトの説明文を入れていきます。

テキストボックスを設置して調整してもいいですが、左メニューから［セクション］を選択して配置したところ、説明文が簡単かつきれいに配置できました。

▲［セクション］から［メイン3］を配置

今回はタイトルテキストと、Webサイトの概要を画像の下に書きたかったので、左メニューの［セクション］から［メイン3］を配置しています。

▲文字や背景を装飾し、不要なボタンを削除

また今回は［メイン3］にデフォルトで配置されている［詳細を見る］と［新規登録］などのボタンは不要なので削除。文言を追加、［塗り］で色を変えます。文字のサイズや行間、ボックスの大きさなど、数値をいじらずともバーをドラッグするだけで調整できました。

5．トップページ以外のページも作ってみる

表示されているトップページ以外に、枝となる下層ページを新しく作ってみます。

▲新規ページを追加

ページを追加するには、左メニューの上段から［ページ］タブを選択します。3つ並んでいるアイコンの一番右［追加］をクリックするとポップが現れるので、［ページ］を追加しましょう。新しくできたページをクリックすれば、追加したページの編集画面へと移動できます。

トップページから追加ページをリンクさせるには？

トップページから追加ページをリンクさせる場合は、トップページにリンクを設置しないといけません。今回は、［セクション］から［メイン2］を元に追加ページへのリンクを作りました。

▲トップページに［セクション］から［メイン2］を配置、画像差し替えのイメージ

左メニューの［セクション］から［メイン2］をトップページに配置し、あらかじめボックス内にある画像を差し替えます。画像をクリックすると［div］という青いボタンがポップするので、クリック。右からメニューが出てくるので、［画像］と書かれた部分でサムネイルをクリックし、画像を選びます。

▲画像にリンクを設定

今回は画像にリンクを埋め込みたいので、［画像］の下にある［リンク］を開きましょう。URL記入欄にマウスを合わせると、先ほど「5.トップページ以外のページも作ってみる」で追加作成したページが表示されるので、選択します。

不要なボックスは削除し、タイトルや文言を記載すれば画像から飛べるリンクが完成しました。

▲記事タイトルや説明文・画像を設定完了したイメージ

今回は画像にページのリンクを設定しましたが、画像以外のボックスでも［div］から右メニューを開けば同じようにリンクを設定できます。

6．SNS埋め込み

※ 「Twitter Publish」は、X公式のヘルプでも紹介されていますが、外部サイトなので利用には注意が必要です。

7．［ボックス］からフォームも簡単追加

▲［ボックス］からフォームを追加

［ボックス］には、通常のテキストや画像以外にも、フォームなど専門知識が必要な項目も簡単に追加できます。フォームを配置したら、クリックで表示されるボタン右メニューから詳細を設定しましょう。名前、連絡先、メッセージ内容などを細かく設定できます。

▲フォームの設定画面

フォームから送られたメッセージは、STUDIOのダッシュボードにある［フォーム］タブから確認できました。フォームにメッセージが来た際の通知設定は［設定］から［フォーム通知の送信先］に自身のメールアドレスを入力すれば、設定可能です。

▲フォームのテストメッセージ受信画面

8．ドラッグ&ドロップだけでWebサイトが完成！

▲実際に制作したWebサイト：トップページ上部のイメージ（縮小版）

▲実際に制作したWebサイト：追加ページ上部のイメージ（縮小版）

もろもろ設定をしたところで、Webサイトが完成！　完成したサイトと編集画面を見比べても、デザインエディター上の見た目とほとんど変わりません。ドラッグ&ドロップだけでWebサイトを作れたというのは、Webサイト制作知識がない身からすると感動的でした。完成形を常に確認しながら編集できる、というのも初心者にとって作りやすい一因だったのかもしれません。

有料プランでできること

「STUDIO」の無料プランでも、初心者にとっては十分といえるWebサイトが簡単に作成できました。「STUDIO」ではFreeからPersonalまでの3プランを個人向けとして提供しており、プランによって受けられるサービスもさまざまです。

上記表以外にも、有料プランであれば外部ツールやGoogleアナリティクスなどのアクセス解析も利用可能。本格的にWebサイトを運用するのであれば、有料プランへの加入を検討するといいでしょう。

まとめ

Webサイト制作の知識が一切ない初心者でも簡単にWebサイトが作れる「STUDIO」。今回のテストサイト制作では、構想から完成まで、機能を調べる時間も含めてだいたい3時間程度で作成できました。自身のWebサイトを作ってみたい、外注するか悩んでいる、という方もまずは無料プランで試してみてはいかがでしょうか？　今回は白紙からのWebサイト制作を行いましたが、テンプレートやフレームワークを駆使すればさらに短い時間でWebが作れるかもしれません。