Twitterでブログ更新情報を配信中

ノーコードでサイト制作!人気急上昇のSTUDIOを使ってみる

今人気急上昇中のサイト制作ツールSTUDIO!もう体験しましたか?こちらはコードを書かずにWebサイトを作ることができるツールで、サイトの公開までワンストップでOK。プランにより独自ドメインで公開することもできますよ。

作る楽しみを肌で感じることができるので、 HTMLやCSSを勉強中の方、デザインに興味のある方にはぜひ使ってほしいですね。今後のヒントや足がかりにもなるわかりやすい構成になっています。

ただ、そのクオリティはもちろん完成までのプロセスは気になるところ。。。そこで実際にSTUDIOを使ってWebサイトを作ってみたので、アカウントの登録からサイト完成までの手順を参考にしていただければと思います!

無料ではじめる!アカウント登録

STUDIOの公式サイトにアクセスします。無料ではじめるをクリック。

STUDIO公式サイト

名前、メールアドレス、パスワードを入力し、メールアドレスで登録します。Facebookで登録する場合は、ボタンを押した後の画面で必要なログイン情報を入力してください。

新規登録画面

チュートリアル開始

登録が完了すると、このような画面になります。チュートリアルをはじめるをクリック。

チュートリアルをはじめる

UIとしてはAdobe XDに似ていますね。左側のメニューから画像ボタンを指定の枠に持ってきます。

画像ボックスを追加

画像を配置したら枠の端に矢印が出るので、画面いっぱいまでドラッグして拡大します。このとき画面をスクロールして縦サイズも指定の点線まで引き伸ばします。

サイズを調整

作業が完了すると、自動で次の画面に進みます。次のステップにすすむをクリック。

次のステップに進む

先ほど拡大した画像内をダブルクリックすると、左側にメニューが出てきます。任意のものをクリック。

画像を変更

つづいて明るさを調節します。指定された0.4を選びました。

画像にフィルターをかける

作業が完了したので、画面が切り替わりました。 次のステップにすすむをクリック。

次のステップに進む

左側のメニューからテキストボックスを指定枠までもっていきます。

中央にテキストを追加

サイズを指定の64にします。

テキストサイズを64にする

指定の白を選択します。

テキストの色を#FFFFFFにする

作業が完了しました。最後のステップにすすむをクリック。

次のステップに進む

先ほどのテキストボックスを選択してCtrl+C、Ctrl+Vの順にキーボードで操作します。

テキストボックスをコピペする

サイズを18にして、テキストボックス上部にカーソルを合わせて余白を調節します。

マージンの調整

Congratulations♪チュートリアル完了です!

チュートリアル完了

新しいサイトを作成

新しいサイトを作成をクリックすると、白紙から作成もしくはテンプレートから作成を選ぶ形になります。

テンプレートから作成

今回はテンプレートから選択しました。タイトルをつけて作成。

タイトルを入力

チュートリアルと同じ編集画面になりました。

ワークスペース

フォントを変更

画面上部のメニューにあるフォントにカーソルを合わせると、+マークが出るのでクリックします。左側のサブメニューが開きより詳細に選べるようになります。

閉じるときはサブメニュー横の<ボタンで閉じます。

フォントを変更

画像を変更

画像もしくは画像周辺を選択したまま、右側にある>ボタンでサブメニューを開きます。基本的に画像は<img>Imageと記載があるので、対象の部分を選びます。

正確に画像が選択されるので、画像左上の三本線をクリック。ダイアログ上の画像をクリックすると一覧が出てきます。

画像をクリック

画像は英単語で検索するか、ファイルタブから自分でアップロードするか選ぶことができます。

画像を変更

新しいページを作成

画面上部のメニュー下、右上の2つのアイコンのうち右側をクリックすると、新しいページもしくはモーダル用のページを作成できます。左側のアイコンは今のページをコピーして、新しいページとして作成可能です。

新しいページを作成

ライブプレビュー

右上のライブプレビューから作成中のページを確認できます。QRコードとURLが発行されるので、いずれかの方法で見てみましょう。

ライブプレビュー

公開

右上の公開をクリックするとドメイン設定が開きます。任意の文字列を入力後、公開ボタンで実際に公開できます。

モーダルウィンドウでサイトのURLが出てくるので、コピーして確認しましょう!

サイトを公開

完成!きれいにできました!

完成

非公開にする場合は、右上の公開から非公開にするを選びます。

サイトを非公開

独自ドメインを使用する場合は、今すぐアップグレードから必要情報の入力画面に移り手続きしてくださいね。

アップグレード画面

ダッシュボードに戻る

左上のタイトル名をクリックするとダッシュボードに移動します。基本的には保存の必要はなく、デザインを編集から再度変更できます。

ダッシュボード

また、タイトル横の/をクリックすると、ホームに移動します。こちらでも最近のプロジェクトから編集したいデザインを選ぶことができます。

最近のプロジェクト

以前から気になっていたSTUDIOを使ってサイト制作をしました。画像やテンプレート、フォントなど充実していてどれもクオリティが高い印象でした。動画や地図はもちろん、お問い合わせフォームも数分程度で設置できましたよ!

ただ、操作性としてはクリックしたい画像やボックスが選択されていないときがあり、サブメニューから都度確認する手間を感じました。こちらは慣れで解決できるかもしれません。
その際に<img>や<div>などの用語で書かれているため、やや知識が必要になる場面はあるようです。

総合的に見ても、無料でここまでできれば十分優秀なツールと言えます。アップグレードで拡張機能が使えるようになるので、必要に応じて検討してみてくださいね!