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

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

今回は、プログラム知識ゼロ・Webサイト制作経験ゼロの筆者が、「Studio」で実際にWebサイトを作成してみました。

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

ライター:荒井啓仁

Studioとは

Studioは、「ノーコードツール」と呼ばれるサービスの1つで、専門知識なしで本格的なWebサイトが作れます。デザインの知識がなくても、テンプレートを利用すれば簡単におしゃれなWebサイトを作成可能。

無料で利用できますが、「独自ドメインの取得ができない」「Studioのバナーが掲載されてしまう」などデメリットもある点は注意しましょう。まず無料で試してみて、本格的に運用するのであれば有料プランの加入を検討するのがおすすめです。

ノーコードツールとは？

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

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

「Studio」の登録に必要なのはメールアドレス、もしくはFacebookかGoogleのアカウントだけ。好きな方法を選び認証を済ませれば、無料ですぐに利用可能です。Webサイト制作経験もなければ、プログラミングの知識もない筆者ですが、果たしてWebサイトは作れるのか……？　構想を練る段階からレポートをお届けします。

1．構想を練る

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

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

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

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

まずは、メインビジュアルに使える画像を配置してみます。画像やテキストを設置するには、画面左のメインメニューの一番上にある［追加］を押します。［基本］の欄にある［Image］をドラッグ＆ドロップで編集画面に入れてみました。自身でアップロードする以外にもフリー画像サイト「Unsplash」の写真もデフォルトで利用可能。高品質な画像も多く、イメージに合う画像の用意が難しければ、利用するのも良いかもしれません。配置した画像やテキストを調節する場合は、画面右側にある［右パネル］で編集します。

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

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

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

編集画面上で画像の上に配置したテキストを選択すると、右パネルがテキストの編集に切り替わります。メニュー下部にある［シャドウ］を選択し、影の落とし方を選びます。その次に［色］から好きな色を選べば設定完了です。表示されるボックスをドラッグすれば、影の位置も調整できました。

画像を配置する際のTips

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

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

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

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

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

「Box」と「Img」の違い

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

4．枠組みを作ってくれる「パーツ」が便利！

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

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

▲［パーツ］から［カード］を配置

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

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

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

ページを追加するには、左メニューの上から二番目の［ページ］タブを選択します。メニュー欄の右上にある［+］を押して［ページ］を追加しましょう。新しくできたページをクリックすれば、追加したページの編集画面へと移動できます。

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

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

左メニューの［セクション］から［ヒーロー ］をトップページに配置し、あらかじめボックス内にある画像を差し替えます。画像をクリックし、右メニューに表示されている画像をクリックすると左メニューからアップロード済みの画像かフリー画像が選べます。

今回は画像にリンクを埋め込みたいので、右メニューで画像を参照したまま［設定］タブから［リンク］のURL記入欄を選択します。記入欄をクリックすると、先ほど「5.トップページ以外のページも作ってみる」で追加作成したページが表示されるので、選択します。

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

今回は画像にページのリンクを設定しましたが、画像以外のボックスでも右メニューからリンクを設定できます。

6．SNS埋め込み

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

7．［追加］からフォームも簡単追加

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

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

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

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

有料プランでできること

「Studio」の無料プランでも、初心者にとっては十分といえるWebサイトが簡単に作成できました。「Studio」ではFreeからBuisnessまでの4プランを個人向けとして提供しており、プランによって受けられるサービスもさまざまです。また、より規模の大きい法人サイト向けに「Business Plus」といったプランの用意もあります。

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

まとめ

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