【初見注意！】studioで仕事を受注するときに便利な情報3選

こんにちは、Yui(@yui_active)です。

今回はstudioというツールを使ってweb制作を受ける際にあらかじめ知っておいたら絶対に役に立つ3選を紹介したいと思います。

さて、そもそもstudioというツールを知っているでしょうか？

という方は、ぜひこの機会に覚えていただければと思います♪

というのも非常に簡単に仕事が取れるからなんですよね。

まず、studioが何かというと、コードを一切書かずにwebサイト制作が出来るという優れたツールです。
コードを全く書かないので、多分1週間も触っていればアウトソーシング系サービスでは仕事が受注できるレベルになると思います。

実際私も基本はWordPressでの制作をメインに受けているのですが、出来る限りコードを書かずに制作できるなら楽で良いなと思って、studioとwixも2日ぐらい勉強した後に大丈夫だと思って仕事を取り始めました。

ただ、

と思うかもしれません。実際私もそう思っていたから、最初は触ってなかったんですよね。笑
ただ、今回の営業で色んな案件を見ているうちに、studioとwixの案件が意外とあるぞということに気が付き、急いで勉強をはじめました。

もちろんWordPressやhtml/cssをガッツリ書くような静的サイトの依頼の方が案件は多いのですが、それでも少なからずstudioとwixでも仕事が取れます。

私はとてつもなく暇だったので、2日間でそれぞれで大体5〜6個のwebサイトを作ったところで、もう大丈夫だと思ってそれぞれで自分のポートフォリオを作って営業をしたんですが、忙しい人でも1週間ぐらいさわれば十分わかるレベルになるはずです。

ちなみにwixでの私のポートフォリオがこちらです。

見てもらったらわかりますが、テーマそのままという感じです。これでも仕事が取れます。

ポートフォリオを出来る限り簡単なものにしてるのは純粋にめんどくさかったというのもありますが、前にも書いた通りアウトソーシング系ではポートフォリオを完璧に仕上げてからの方が良いのか、それともポートフォリオは簡単なものでも仕事が取れるのか実験したかったからです。

ただ、簡単に制作が出来るとは言っても、受注した仕事で難航する場面があったので今回はそんなときに知っていたら便利な情報を3つお知らせします。

wixでも仕事は受注したんですが、まだ先方の都合で着手できていないので、今回はちょうど納品が終わったばかりのstudioでお話します♪

どんな案件を受けたか

まず、今回は下記の案件を受けました。

既存のwebサイトの一部改善です。
内容をみて、これぐらいなら出来ると思い、連絡をして何回かのやり取りのあと、成約となりました。

※まだ案件を受け始めて間もないので基本はかなり安く受けています。

ただ、実際に話を聞いていると一部改善どころかほとんど修正が必要だったので、下記の代金で成約になりました。笑

実際にかかった時間は3日間です。

3日の労力でこの代金が安いか高いかはおいておいて、正直今回の案件は1日で出来るはずの仕事量だったんですよ。

なぜこんなに時間がかかったかというと、私が少し効率の悪い作成方法で作成してしまったからです。

途中で学んで急激にスピードは上がりましたが、私以外の人が同じところでつまずかないように、今回は仕事効率を上げる方法についてお伝えしますね！

既存サイトの修正時に全部一括でダミーに移す方法

これはWordPressでも静的サイトでも同じだと思うのですが、既存サイトの修正の場合、最初から大元のサイトを触ってしまうと途中でレイアウト崩れが起こった際に洒落にならないので、まずは先方が用意をしたテスト用サイトで修正を加える必要があります。

いわゆるテスト用ですね。今回は先方が持っていなかったので自分のstudioアカウントでテスト用サイトを作ることにしました。

すると困るのが、

ということです。

同じアカウント内ならページの複製が出来るのは知ってましたが、違う場合はどうやって移せば良いのか。

ググったんですが、まだ利用者が少ないのか出てこなかったんですよね。

そこで私は⌘＋Aで全体を指定した後、⌘＋Cでコピーして、私の白紙のページにペーストしようとしました。

そうなんです。studioはそれではできないんです。

そこで、クリックして範囲を指定して⌘＋C→⌘＋Vで貼り付けました。

すると、まあ当然の結果なんですが

そう、それぞれヘッダーとかFV部分とか、バナーなど色んなセクションに別れてると思うのですが、クリックしたらそのセクションはコピーができますが、全体をコピーすることはできません。

そこで「studio　全体コピー　方法」や、「studio　ページ　複製」などで様々調べたんですが、同じアカウントの場合などが出てきて、全体をコピーすることができませんでした。

なので私は非常にめんどくさかったんですが、全部一つずつコピペしていきました。

まずこの段階でかなりの時間の無駄ですね。

ただ、実はこれを一瞬ですることが出来るんです。

その方法とは<div> Baseの部分をクリックして、⌘＋Cです。

studioではこのように各パーツがどの部分に入ってるかということがわかるようになってるのですが、その一番土台となる<div> Baseの部分の左の□をクリックします。

すると、全体が青になります。

その段階で⌘＋Cするとコピーできます！！

そしてペーストしたい白紙のページに行き、同じく<div> Baseの左の□をクリックした状態で⌘＋V。

そうすると全く同じページが複製できます。

ぜひ、今回みたいに全体を複製する必要がある場合はお試しください。

レスポンシブ化するときは順番に気をつける

studioではレスポンシブデザインも簡単にできます。

こんな風にページの左右のどちらかにカーソルを置いて、サイズを調整した状態でデザインを変更するだけです。

線が緑のときはタブレットで表示をするときで、オレンジのときは携帯で表示をした場合のデザインです。

ある程度自動でしてくれるときもあるんですが、若干レイアウトが崩れている場合は随時修正します。

タブレットサイズのときにいじったデザインはタブレットサイズの場合のみ適用され、スマホサイズのときにいじったデザインはスマホの場合にのみ適用されます。

studioではスマホのサイズからレイアウトを整えてしまうと、全体が崩れます。

なので、絶対にPCでの表示のレイアウトをまずは整えて、その後タブレット、スマホという風にしないといけないんです。

これは継承？みたいなもので、PC画面の変更をすると、全体に適用されてしまうからです。

ただ、どうしても端末のサイズによって表示する項目や順番を変えたい場合は、左上の目玉を押せば、表示非表示を選ぶことができます。

複数のブロックに同じデザインを適用する方法

さて、studioはコードを一切書かなくて良いんですが、その分問題もあります。

その問題とはcssが書けないことです。

studioは画面遷移用にidをつけることはできますが、classをつけることができないので、cssを適用できないんですね。

そこで何が問題かと言うと、

ということです。

cssがかければ、このclassにはこのcssをつけてと言ったように一括でデザインを指定できます。

ただ、studioではそれができません。

私が今回作成したサイトは比較表や、ボタンがいくつか並んでいたり、利用者の声が並んでいるようなサイトだったので、一括でデザインを変更できれば一瞬で終わるような仕事でした。

ただ、これも実は一括で指定ができます。

Shift＋クリックで各パーツをそれぞれクリックして、一緒に変更することができるんですよ。

実際にやってみたらわかるんですが、Shift＋クリックするとこのようにまとめて選択ができます。

今回だったらこの<div>が3つですね。

このようにそれぞれ一括で指定をしたい部分が選択できたらこの状態で文字のサイズなり色なり、margin/paddingなりをそれぞれ指定します。

すると一瞬で全部に適用されます。

これも最初に思いつけばよかったんですが、思いつかなくてほとんど終わりかけのところでもしかしてShift＋クリックでいけるかも！と思ったらできたんですよね。笑

まとめとおまけ

さて今回はstudioで知っておいたほうが良い3つの技についてお話しました。

studioは便利なんですが、まだまだ検索に出てこない部分が多いので、少しでもお役に立てれば嬉しいです♪

また、これはstudioの裏技と言うか、本当に便利なことなんですが、実はチャットでstudioの人に直接聞くことができます。

studioを使っていたら右下にチャットのマークが出てくるので、もしどうしても分からないことがあれば聞いてみるのもありです。

私もページをそのまま複製する方法は聞きました。（せっかちババアなんで結局待ちきれなくて全部それぞれコピペしたんですけどね・・。笑）

公式の人に聞けるというのはstudioとwixの長所だと思うので、ぜひうまく活用していきたいですね♪

それでは最後までお読み頂きありがとうございました！