こんにちは、ミアです。ノーコードツール「STUDIO」を使ってWEBサイトを作成しました。ITやWEBデザインの知識がほとんどない状態で、完成までたどり着いた経緯や感じたことをご紹介します。
ノーコードツールとは？
まず、ノーコードツールとは、プログラミングの知識がなくてもウェブサイトやアプリケーションを作成できるツールのことです。難しいコードを書かずに視覚的なインターフェースを使ってデザインや機能を組み立てることができます。最近ではさまざまなノーコードツールが登場しており、「STUDIO」もその一つです。
「STUDIO」を選んだ理由
私が「STUDIO」を選んだ理由はいくつかあります。まず第一に、「STUDIO」での直感的な操作性が魅力的だったからです。初めてのウェブサイト制作で、複雑なプログラミングに挑戦するのは不安でしたが、「STUDIO」はパーツのドラッグ＆ドロップで簡単にレイアウトを作成できるので、初心者にも優しいと感じました。
さらに、「STUDIO」のテンプレート機能や豊富なカスタマイズオプションもポイントでした。今回はテンプレートを使用せずに0から作成しましたが、無料のテンプレートの中身を見て構成を参考にしながら作成できたので、「どうすればいいか何も分からない！」という状況になりませんでした。色んなテンプレートの中身を見るだけでも「こんな構成のサイトも作れそう」とアイディアが膨らみます♪
難しそうなカルーセルやフォームの作成などもパーツのテンプレートがあるので、そのパーツを入れてカスタマイズするだけで簡単におしゃれなフォームを作れました。
「STUDIO」でポートフォリオサイトを作成する過程
具体的な作成過程については、以下のYouTubeショート動画でご覧いただけます↓
1. アカウント作成と初期設定
まず、「STUDIO」の公式サイトにアクセスし、アカウントを作成しました。登録自体は簡単で、メールアドレスやGoogleアカウントを使ってサインアップするだけでできます。
2. コンテンツの追加と配置
次に、ポートフォリオサイトに掲載するコンテンツを準備しました。具体的には、使用する画像やプロフィール文、お問い合わせに必要な項目などです。冒頭でも少し触れましたが、「STUDIO」ではコンテンツの配置もドラッグ＆ドロップで簡単に行えるため、ページのレイアウトを自由自在にカスタマイズできました。
特に嬉しかったのは、画像の埋め込みが簡単だったことです。カルーセル機能を搭載したいと思っていたら、なんとカルーセルのテンプレートもあったのです！ポートフォリオサイトには、自分の作品を視覚的に魅せるためのビジュアルコンテンツが欠かせませんが、「STUDIO」ではこれらを直感的に扱うことができました。
3. モバイル対応の確認と調整
現代のウェブサイトは、デスクトップだけでなくモバイル端末でも見やすいことが重要です。「STUDIO」では、デザインの段階でタブレットやモバイル表示を確認し、必要に応じて調整することができます。これにより、どのデバイスからでも快適に閲覧できるポートフォリオサイトを作成することができました。
まとめと感想
「STUDIO」を使ったポートフォリオサイトの作成は、初心者である私にとって非常に良い経験となりました。ノーコードツールの魅力を実感できたことと、自分のアイディアを形にする楽しさを味わえたことが一番の収穫です。難しいプログラミングの知識がなくても、自分の思い描いたデザインを具現化できるというのは、想像以上に感動的な体験でした。
また、「STUDIO」のサポートも充実しており、困ったときにはオンラインマニュアルやコミュニティの助けを借りることができました。YouTubeでは公式チャンネルや公式アンバサダーさんのチャンネルでも情報をたくさん発信されているので、動画で実際の操作を見ながら勉強できます。直感で操作しやすいとはいえ、上手く組み立てができない…というシーンもあったので、とても助かりました。
これからも、さらに多くのノーコードツールを試して、自分のスキルを広げていきたいと思っています。ノーコードデザインツールの「Figma」というものが、「STUDIO」と連携もできるというので興味があります…！
初心者の方にもぜひ挑戦してみてほしいツールでした。ノーコードツールを使えば、自分の創造力を存分に発揮できるので、ぜひ一度試してみてください！
本サイトでは、湧き上がるアイディアを形にしている様子を解説しています！
専門分野から今回のような簡単で楽しいものまで幅広いプロジェクトやアイディアを紹介していく予定ですので、今後もぜひ楽しみにしていてください♪
各SNSでも発信しています！
YouTubehttps://www.youtube.com/@mainomi_engineer/featured
Instagram：https://www.instagram.com/mainomi_engineer/
TikTok：https://www.tiktok.com/@mainomi_engineer
