🍣

ノーコードでどんなのできるか試してみた

2023/12/24に公開

概要

近年ノーコードツールが増えているが、なんだかんだ触ったことがなかったのでこの機会で触る。

経緯

ふと会社の同僚の方がノーコードツールで諸々やっていたことを思い出して、自分もノーコードツールが触ったことがなかったので触りたくなった。

前提

定義

ノーコードツールとは

下記サイトには以下のようにある。
コードを書かずとも、guiなどにてアプリケーションやwebサイトを制作できるツールであるということ。

ノーコードツールとは、あらかじめ用意された部品を組み合わせることで、プログラミングやシステム開発の知識がなくても、誰でも簡単にアプリケーションやWebサイトを製作できるツール

https://www.aspicjapan.org/asu/article/23016#:~:text=ノーコードツールとは、あらかじめ用意された部品,できるツールのことです。

種類など
上記サイトに同様にまとまっていますが、
zennの記事でも以下にて良い感じにまとめていただいたのを参考にしました。
https://zenn.dev/tabio/articles/nocode-tools

今回触るノーコードツールはこちら

結局ベタだとは思いつつstudioを使ってみる。
https://studio.design/ja

一通り読んだ後に、結局自分がノーコードで今後行いたいものの要素を考えたときに
以下なのかなと思い、まずは自分のポートフォリオを作成しようとなった際はハードコードで記載するのではなく、ノーコードで行きたいと思いました。

  • カスタマイズ製が求められない
  • できるだけ制作期間及び運用コストを減らしたい(=かけたコストが直接利益につながらない)
  • 内部で用いる(=多少の不具合、欠如している部分が許容される)
  • すぐに形にしたい

方法

以下を参考にやってみる。
https://www.youtube.com/watch?v=-f__GKswbvY&list=PL_QBAq0h03k4VoQpYqkS8CyW2gbgf6AkW

というか登録したらチュートリアルを行うか選択できるようになっている。
選択式でチュートリアルを選べるようになっているのは大事ですね。

チュートリアルに従い、以下を行って、Studio完全に理解した状態に(なわけ)

  • 図形をドロップアンドドラッグし、サイズを調整
  • 画像を変更して明るさを0.4にフィルタリング
  • テキストをドロップアンドドラッグし、サイズを調整し、文字色を調整
  • マージンの調整

チュートリアルが終わったので上記のサイトを参考に作成してみる。

参考に作成すると言っておいてなんですが、動画では0から始めているところをテンプレート使わせてもろて。

そしたら以下のように0で以下のように"ぽい"部分が作成できるので、これを参考にベタベタのベタベタで以下の内容でページを作成していく。

  • header
  • 見出し
  • テンプレートを利用した内容
  • footer

まずは兎にも角にもheaderが必要なのでセクション>ナビゲーションからheaderを選択しましょう。

フォントも豊富に選択することができて良き。

headerを追加した後はメインビジュアルをスライダーにしたいので別途メインビジュアル用にスライダーを作成するとCMS欄から選択できるようになっている。

Boxを追加することでサイトによくある自己紹介的なやつもすぐに作成できました。
内容は相当適当だがそんなのは良き。

footerとかもデフォルトのが必要な要素が揃っていて、めっちゃ楽。

ものの小一時間でサイトが作成できて公開もできるのでほんまに楽でした。

結論

自分のサイトとかだったらマジでノーコードでいいと思った。
ふざけた内容をまじめにしてコンテンツ盛り込んでいつか自分の紹介用サイトなどに公開するかも。

備考

ゴールデンラヴィットたのしみですね。
https://topics.tbs.co.jp/article/detail/?id=19542

参考文献

https://studio.design/ja

https://www.aspicjapan.org/asu/article/23016#:~:text=ノーコードツールとは、あらかじめ用意された部品,できるツールのことです。

https://zenn.dev/tabio/articles/nocode-tools

https://www.youtube.com/watch?v=-f__GKswbvY&list=PL_QBAq0h03k4VoQpYqkS8CyW2gbgf6AkW

Discussion