こんにちは！
STUDIOに特化してWebサイト制作をしているたくみです。
ノーコードでWebサイトが制作できるツール”STUDIO”についてご紹介しています。
今回は、STUDIOでWebサイトを制作している私が感じた「STUDIOの簡単すぎる〇〇」についてご紹介します。
本記事はクリエイター向けの内容となっているので、次のような人におすすめです。
・コーディングとSTUDIOの違いを知りたい方
そして最初に結論を書いておくと、個人的に簡単だと感じたことは次の7つです。
② レスポンシブが簡単
③ 素材の用意が簡単
④ SEOの設定が簡単
⑤ 公開が簡単
⑥ 課題解決が簡単
⑦ 更新が簡単
何で7つなの？
とりあえず思いついたのが7つだったからです笑
これら以外に「これも簡単だよ！」というのがあればご連絡お待ちしております。追記します笑
では、一つずつ見ていきましょう。
①：サイトの制作が簡単
まず一つ目は、サイトの作成が簡単だと感じました。この簡単だと感じたポイントは2点あります。
1点目はノーコードでサイト制作ができる点。2点目はテンプレートが豊富な点です。
ノーコードでサイト制作
STUDIOはボックスレイアウトの手法を取っています。
ボックスレイアウトとは、画像やテキストなどを積み重ねたり入れ子構造にしたりすることでデザインする手法です。
通常のコーディングに慣れている人からすれば、少し構成の仕方が分かりにくいかもしれません。
しかし、慣れてしまえばデザインエディター上でテキストや画像の挿入が簡単にできるようになります。
各セクションをどんどん積み重ねて作っていくのは楽しいです。
テンプレートが豊富
STUDIOはサイトのテンプレートが豊富です。
STUDIO Store：https://studio.design/ja/store
オリジナルで1からサイトを制作することも、もちろんできます。
しかし、テンプレートの長所は制作時間の短縮と制作費用の削減です。
オリジナルデザインにこだわらない人や、予算が限られている場合はテンプレートの活用がおすすめです。
テンプレートは無料版と有料版があり、その数は100を超えます。
カテゴリーもビジネス系、飲食系、クリエイティブ系と豊富にあり、見ているだけでデザインの勉強になるものばかりです。
テンプレートを活用すれば、テキストや画像を変更するだけで高品質のホームページを制作できます。
無料と有料があるのか。じゃあ有料のほうがきっとテンプレートの質も高いんだな。
このように思われる方もいるかもしれませんが、無料テンプレートもデザイン・アニメーションともに優れています。
実際に私も、STUDIOの無料テンプレートを使用してコーポレートサイトを作成したこともあります。
ほかのクリエイターの実績を見て、無料テンプレートを活用して素晴らしいサイトが作られていたのも見たことがあります。
無料・有料と隔てずに、それぞれに適したテンプレートを選ぶのが良いでしょう。
②：レスポンシブが簡単
二つ目も制作の話ですが、レスポンシブが簡単です。
5段階のブレイクポイント
STUDIOのデザインエディターにはデスクトップ・タブレット・モバイル、3パターンのブレイクポイントが標準で設定されています。
基準値はデスクトップ1280px、タブレット840px、モバイル540pxです(範囲内であれば任意の値に変更できます)。
追加で小型デスクトップ用に1140pxと、小型スマートフォン用に320xを設定することができます。
つまり、合計で5段階に分けてブレイクポイントを設定できます。
デザインエディターの幅を変えれば、各デバイス幅の見え方が簡単に分かります。
ボタンひとつでレスポンシブデザインが確認できるなんて、とても便利ですよね。
色分けされて表示
STUDIOのレスポンシブは、エディター画面上で簡単に確認できます。
試しに、下のデザインの値を各デバイスで変更してみましょう。
上画像のボックスは、デスクトップ画面ではテキストと画像が左右に並んでいます。
一番大きいテキストのサイズは”48px”です。
これを、タブレット画面では”36px”にしてみましょう。
タブレット画面の内容は黄緑色で表示されます。
そして、フォントサイズを”36px”に変更すると、変更した内容の色が黄緑色で表示されます。
デスクトップと内容が変わっていない場合はそのままです。
次に、モバイル画面では”28px”にしてみましょう。
また、横並びのままではモバイルの幅に合わなくなってしまうため、画像とテキストを上下に並び変えます。
モバイル画面の内容はオレンジ色で表示されます。
このように、デスクトップ画面で設定した内容は他のデバイスにも反映されます。
そして、変更した内容だけ色が変わって表示されます。
大きさも並べ方もエディター上で変更できるって簡単ですよね！
③：素材の用意が簡単
次は素材の用意です。素材とは、Webサイトを構築する材料を指します。
画像やテキストを始め、アイコンやフォントの種類などが素材に含まれます。
素材を揃えるには「購入する」「フリー素材を使用する」「クライアントに用意してもらう」などの方法があるでしょう。
しかし、これらの方法は手間も時間もかかりますよね。
私も以前、クライアントからの依頼でフリー画像を用意したときは、複数のサイトからイメージに合った画像を探さなければならずかなり時間を要しました。
その点、STUDIOは用意されている素材が豊富すぎます。
画像も、アイコンも、フォントの種類も、STUDIOではすべて用意されています。
詳しくはこちらの記事で取り上げています。
素材がこんなに簡単に用意できるのは、STUDIOの大きなメリットですね。
④：SEOの設定が簡単
「ノーコードだから、コーディングして作られたサイトよりSEOには弱いんじゃない？」
このような疑問がクライアントからはよく尋ねられます。
私もSTUDIOを始めたときは、ノーコードだからSEO対策はどうなんだろうと疑問に思っていました。
しかし結論、ほかのWebサイトと同じように対策をすればノーコードだからというのは関係ないです。
STUDIOでできるSEO対策は次のとおりです。
タイトルやディスクリプション、ファビコンやHTMLタグなどはデザインエディター上で設定できます。
サイトマップやカバー画像はホーム画面から設定できます。
各項目を設定すれば検索順位の上位表示は充分に可能と考えています。
そして、その設定のほとんどがデザインエディター上でできるので、簡単だと思い今回ご紹介しました。
⑤：公開が簡単
制作が簡単なら、公開も簡単にできます。
今回は、無料プランの公開方法を見ていきましょう。
サイトを制作した後、デザインエディターの右上にある「公開」ボタンを押します。
すると、urlを任意で決められるので入力します。
urlを保存して右上の公開ボタンを押すと、これで公開完了です。
いかがでしょうか？ご覧の通り、非常に簡単です。
無料プランなら1分で公開できます。
サーバーもドメインの用意もいりません。
独自ドメインを使用したい場合は有料プランに契約する必要があるので、公開方法は少しだけ複雑になります。
このやり方も、いずれご紹介していきます！(待てないという方は「お問い合わせ」いただければ！)
⑥：更新が簡単
サイト公開後に「お知らせ」や「ブログ」などのメディアを更新したい、テキストや画像を変更したいなど要望もあるでしょう。
そんなとき、STUDIOはCMSでコンテンツの運用・管理が効率的にできます。
STUDIO CMS：https://studio.design/ja/cms
また、テキストや画像の変更に関しては“コンテンツ編集モード”が便利です。
コンテンツ編集モードとは、デザインエディター上で選択したテキストや画像だけを編集できるモードです。
このモードを使用すると、レイアウトを崩してしまう心配がありません。
更新した内容は、デザインエディターの右上にある公開ボタンから「更新」を選択すると反映されます。
このように「Webサイトに関する知識がない人でも操作が容易にできる」ツールであるSTUDIOらしく、制作が簡単であれば更新も簡単です。
それでも自分で変更するなんて、間違えて消してしまうかもしれないから触りたくない
という意見もあるでしょう。
そんなときは僕がやりますので、ご相談お待ちしております！笑
⑦：課題解決が簡単
制作・公開・更新。それぞれが簡単な理由を書いてきました。
しかし、これはあくまでもSTUDIO経験者である私の個人的な目線での話です。
STUDIO初心者にとっては、いざ触ってくると分からないことも多々出てくるでしょう。
でも大丈夫。分からないことが出てきても、STUDIOは解決する方法がたくさんあります。
これについても。詳しくは下記記事で取り上げています。
操作で分からないことがあっても解決する方法がたくさんあるって安心しますよね。
というわけで、最後は「課題解決が簡単」でした。
最後に
ノーコードツールのSTUDIOは、サイトの制作から公開後の取り扱いも簡単でした。
もちろん、簡単だからといって自由自在に扱えるわけではありません。
どのようなサイトでも作れるわけではありません。
できないことも多く、今後のアップデートが期待されるSTUDIO。
しかし、ノーコードでもクライアントのニーズに応えることができるのであれば、試してみる価値は大いにあるでしょう。
興味がある人は、ぜひ試してみてください。
お問い合わせはこちら
最後まで読んでいただきありがとうございました！
「もっとSTUDIOについて知りたい」
「実装について相談したい」
など思われた場合は、下記リンクより受け付けているのでお気軽にご相談ください！
最後まで読んでいただきありがとうございました。
また次の記事でお会いしましょう。
コメント