今人気急上昇中のサイト制作ツールSTUDIO！もう体験しましたか？こちらはコードを書かずにWebサイトを作ることができるツールで、サイトの公開までワンストップでOK。プランにより独自ドメインで公開することもできますよ。
作る楽しみを肌で感じることができるので、 HTMLやCSSを勉強中の方、デザインに興味のある方にはぜひ使ってほしいですね。今後のヒントや足がかりにもなるわかりやすい構成になっています。
ただ、そのクオリティはもちろん完成までのプロセスは気になるところ。。。そこで実際にSTUDIOを使ってWebサイトを作ってみたので、アカウントの登録からサイト完成までの手順を参考にしていただければと思います！
目次
無料ではじめる！アカウント登録
STUDIOの公式サイトにアクセスします。無料ではじめるをクリック。
名前、メールアドレス、パスワードを入力し、メールアドレスで登録します。Facebookで登録する場合は、ボタンを押した後の画面で必要なログイン情報を入力してください。
チュートリアル開始
登録が完了すると、このような画面になります。チュートリアルをはじめるをクリック。
UIとしてはAdobe XDに似ていますね。左側のメニューから画像ボタンを指定の枠に持ってきます。
画像を配置したら枠の端に矢印が出るので、画面いっぱいまでドラッグして拡大します。このとき画面をスクロールして縦サイズも指定の点線まで引き伸ばします。
作業が完了すると、自動で次の画面に進みます。次のステップにすすむをクリック。
先ほど拡大した画像内をダブルクリックすると、左側にメニューが出てきます。任意のものをクリック。
つづいて明るさを調節します。指定された0.4を選びました。
作業が完了したので、画面が切り替わりました。 次のステップにすすむをクリック。
左側のメニューからテキストボックスを指定枠までもっていきます。
サイズを指定の64にします。
指定の白を選択します。
作業が完了しました。最後のステップにすすむをクリック。
先ほどのテキストボックスを選択してCtrl+C、Ctrl+Vの順にキーボードで操作します。
サイズを18にして、テキストボックス上部にカーソルを合わせて余白を調節します。
Congratulations♪チュートリアル完了です！
新しいサイトを作成
新しいサイトを作成をクリックすると、白紙から作成もしくはテンプレートから作成を選ぶ形になります。
今回はテンプレートから選択しました。タイトルをつけて作成。
チュートリアルと同じ編集画面になりました。
フォントを変更
画面上部のメニューにあるフォントにカーソルを合わせると、＋マークが出るのでクリックします。左側のサブメニューが開きより詳細に選べるようになります。
閉じるときはサブメニュー横の＜ボタンで閉じます。
画像を変更
画像もしくは画像周辺を選択したまま、右側にある＞ボタンでサブメニューを開きます。基本的に画像は<img>Imageと記載があるので、対象の部分を選びます。
正確に画像が選択されるので、画像左上の三本線をクリック。ダイアログ上の画像をクリックすると一覧が出てきます。
画像は英単語で検索するか、ファイルタブから自分でアップロードするか選ぶことができます。
新しいページを作成
画面上部のメニュー下、右上の2つのアイコンのうち右側をクリックすると、新しいページもしくはモーダル用のページを作成できます。左側のアイコンは今のページをコピーして、新しいページとして作成可能です。
ライブプレビュー
右上のライブプレビューから作成中のページを確認できます。QRコードとURLが発行されるので、いずれかの方法で見てみましょう。
公開
右上の公開をクリックするとドメイン設定が開きます。任意の文字列を入力後、公開ボタンで実際に公開できます。
モーダルウィンドウでサイトのURLが出てくるので、コピーして確認しましょう！
完成！きれいにできました！
非公開にする場合は、右上の公開から非公開にするを選びます。
独自ドメインを使用する場合は、今すぐアップグレードから必要情報の入力画面に移り手続きしてくださいね。
ダッシュボードに戻る
左上のタイトル名をクリックするとダッシュボードに移動します。基本的には保存の必要はなく、デザインを編集から再度変更できます。
また、タイトル横の／をクリックすると、ホームに移動します。こちらでも最近のプロジェクトから編集したいデザインを選ぶことができます。
以前から気になっていたSTUDIOを使ってサイト制作をしました。画像やテンプレート、フォントなど充実していてどれもクオリティが高い印象でした。動画や地図はもちろん、お問い合わせフォームも数分程度で設置できましたよ！
ただ、操作性としてはクリックしたい画像やボックスが選択されていないときがあり、サブメニューから都度確認する手間を感じました。こちらは慣れで解決できるかもしれません。
その際に<img>や<div>などの用語で書かれているため、やや知識が必要になる場面はあるようです。
総合的に見ても、無料でここまでできれば十分優秀なツールと言えます。アップグレードで拡張機能が使えるようになるので、必要に応じて検討してみてくださいね！
