非デザイナーが1ヶ月半かけて、じっくりStudioで模写サイトをつくってみた
こんにちは！なみこです。
今日は、ノーコードのデザインツール「Studio」を使った模写に、時間をかけて挑戦してみたので、使った教材や感想などをまとめたいと思います。
普段Webデザインをすることはほとんどありませんが、クライアントが3社ほど 「Studio」 を使っているので、基本的な仕組みや操作方法を理解しておきたいと思っていました。
StudioはWordPressと比較されることも多いんですが、デザインの自由度が高くて、直感的に操作できるという点が魅力的。
CMSの入稿作業を経験してから、「いつか触ってみたい！」 という気持ちは前からあったのですが、当時は正直、何がどうなっているのかよく分からず（笑）。
そこで、今回はStudioを本格的に触ってみることにしました！
私の周りのマイクロ法人〜中小企業・スタートアップは多く使ってる印象です。実際に、Webデザインをしなくても、知識や構造の理解は役立つかなと思います。
模写したサイトはこちら
8月の末から取り組み始めて、時間のあるときに1〜2時間ずつ進めました◎
模写を選んだ理由
私の学習の目的は、Studioの仕組みや構造理解、どれくらいの工数で何ができるか？だったので、既存のデザインを真似する 「模写」 という方法で勉強することにしました。
クライアントのサイトを見て、「こういうデザインってノーコードだとどうやるんだろう？」とか「どうやって作られてるんだろう？」って思うことが多かったので、模写ならその答えが少しわかるかなと期待していました。
Studioをさわってみた感想
まず、Studioの操作感にびっくりしました。やっぱり、直感的に使える という噂は本当で、特にデザインをドラッグ＆ドロップで簡単に配置できるのはとても便利。
ツールの中で直接編集できるのも、他のCMSと比べて大きな魅力です…！ただ、最初はやっぱり慣れない部分もあって、思った通りに配置ができなかったり、細かい調整がうまくいかなかったり…。
でも、その分「この機能を使えばいいんだ！」という発見も多く、少しずつ機能を使いこなせるようになると、スムーズに進めることができてどんどん楽しくなりました。
Studioの模写をやってみたことで、単にデザインの見た目だけでなく、その背後にある考え方・構造にも目が向くように。
使った教材とかかった時間
Youtubeの動画教材を使いながら、合計20〜25時間くらいかかったかなと思います。1教材が30分〜1時間くらい、作業も含めると1〜2時間ずつくらい時間を確保して進めていきました！
マージンやパディングなど、何度も機能や使い方の説明を挟んでくれるので、とてもいい教材だと思います！手を動かしながら、ツールの使い方が染み付いてくる感じします。
なぜこうなるか？を立ち止まって考えずに、最初はとにかく手を動かして真似をしていきました。また、Youtube、STUDIOともに無料で使えるのもよかったです◎
まとめ
Studioでの模写を通して、デザインの奥深さを実感しつつ、ツールの使い方にも慣れることができました。WordPressとの違いも含めて、今後の実務に生かせるヒントを得られたのが大きな収穫です。
また、普段仕事をしていて「没頭する」時間はほぼないので、もくもく作業するのもいいリフレッシュになりました！
デザイナーでなくてもデザインについての知識はあって損はないです。実際に手を動かしながら学ぶことができるので、模写から始めるのはすごくオススメだなと思います。
次、時間のあるときは、LPも作成してみたいと思います〜！もしこの記事を読んで、「Studioって面白そう！」と思ってもらえたら、ぜひ一度試してみてくださいね！
読んでくださり、ありがとうございました！
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？