≪初投稿≫ノーコードツール「STUDIO」でのWEB制作を始めました！
はじめまして！最近、ノーコードツール「STUDIO」を使ってWEB制作を始めました。これまでWEBデザインに興味はあったものの、プログラミングは難しそうで躊躇していたんです。でも、「STUDIO」ならコードを書かずにサイトが作れると聞いて、思い切って挑戦してみました！
そしてついに、初めてのウェブサイトを完成させたので、皆さんにぜひ見てもらいたいです！
STUDIOって何？
「STUDIO」は、プログラミングができなくても、簡単にかっこいいWEBサイトが作れるノーコードツールです。今までならHTMLやCSSを覚えないといけない…と思っていたけど、このツールならビジュアルエディターを使って、直感的にサイトをデザインできちゃいます！
特に驚いたのは、デザインの自由度が高いこと！しかも、PCやスマホ、タブレットでもちゃんと見やすく作れるのがうれしいポイントです。初心者の私でも、ここまでできるなんて本当に感動しました。
どうしてSTUDIOを選んだの？
WEB制作に興味はあったんですけど、プログラムを書かなきゃいけないのが正直しんどそうで、これまでは諦めていたんですよね。でも、友人のサイト制作を頼まれたことがきっかけで「やっぱり自分で作りたい！」と思うようになりました。
そこで出会ったのがこの「STUDIO」です。コードを書かなくていい、しかもデザインを自分の思い通りにできるって知って、すぐに試してみることにしました。
使ってみてすぐにわかったのは、操作がめちゃくちゃ簡単なこと！アイコンや写真をドラッグ＆ドロップするだけで配置できたり、アニメーション効果もすぐに追加できたりと、まるでデザインの世界がぐっと身近に感じられました。
初めて作ったウェブサイトの紹介
さっそくSTUDIOを使って作ったウェブサイトがこちらです！
このサイトでは、シンプルで見やすいデザインを意識しました。友人のビジネスを紹介するために、サービス内容や連絡先をわかりやすく配置しています。動きのあるアニメーションも取り入れて、ページ全体に少し遊び心を持たせてみました。
例えば、ページをスクロールすると文字や画像がふわっと現れるんですよね。これ、STUDIOのアニメーション機能を使えば、簡単にかっこいい演出ができるので、デザイン初心者でもすぐに試せます。
サイト制作の流れ
今回のサイト制作はこんな感じで進めました。
アイデアを出す
まずは、どんなデザインにするか、ざっくり考えます。どんな人に見てもらいたいか、どんな印象を与えたいかをイメージしながら進めました。ワイヤーフレーム作成
次に、ページの大まかなレイアウトを決めました。どこに何を配置するか、どの情報を強調するかをシンプルな図で書いてみました。STUDIOでデザイン
いよいよSTUDIOでのデザイン作業！要素をドラッグ＆ドロップで配置しながら、見た目をリアルタイムで確認。自分のイメージ通りに仕上がっていくのが楽しかったです。レスポンシブ対応
画面のサイズが変わっても崩れないように調整しました。STUDIOではスマホやタブレットのプレビューも簡単に確認できるので、初心者でも安心してレスポンシブ対応ができます。最終確認と微調整
全体を見直して、細かい部分を修正。最初はシンプルに仕上げようと思ってたんですが、ついつい凝ったデザインにしたくなって、ちょこちょこ修正しちゃいました（笑）
STUDIOを使ってみて感じたこと
STUDIOを使ってみて、とにかく操作が簡単で、初心者でもちゃんとデザインができるのがすごく魅力的だと感じました。また、コードを書かない分、デザインに集中できるのも大きなメリットです。
一方で、もっといろいろな機能を使いこなしたいという欲も出てきました。今後は、アニメーションやインタラクションをもっと使って、さらに動きのあるダイナミックなサイトを作ってみたいです。
これからもどんどんWEB制作に挑戦していきたいので、「STUDIO」を使ったサイトを作ってみたい方はぜひ挑戦してみてください！プログラムが苦手でも、素敵なサイトが作れるはずですよ。
改めて、今回作成したウェブサイトはこちらです！
👉 サイトのプレビューはこちら！
今後も、WEB制作の体験談や気づきをこのNOTEでシェアしていく予定ですので、ぜひフォローしてくださいね！