【入門編】機能紹介Part1-1-UIエレメント

【ZeroOne入門編】主な機能・使い方紹介 Part1 - 1 UI編 エレメントの各機能解説

こんにちは!

今回は、2022年5月に正式リリースされた国産のノーコードプラットフォーム「ZeroOne」の機能について紹介します。

汎用性が高く、Web制作・開発を手軽にできるので、これからWeb制作・開発を始める人におすすめです。

開発で稼いでいきたい人、何か作りたいサービスがある人、ノーコードに興味がある人は、記事を見ながら実際にプロダクトを触ってみましょう!

目次

ページ

開発画面の最初に開かれる画面です。

ここではUI(フロントエンド)を作成します。

赤の枠線部分はページリストです。

ホーム、お問合せページ、会社概要、プライバシーポリシーなど、作成したページの一覧が確認できます。

新たなページの追加もここから行うことができます。

ページリスト
ページリスト

ヘッダー

ヘッダー中央の画面にて、PCで見た画面、タブレットで見た画面、スマホで見た画面を見ることができます。
レスポンシブ対応ができているかをワンクリックで確認可能です。

また、画面右のプレビューで、実際の画面遷移などにエラーがないか、実装する前に確認をすることができます。
開発環境から、本番環境に公開する前のセーブポイントを作ったり、本番環境への公開ができます。
エクスポートをすることで、自身の作ったアプリをテンプレートとして販売などをすることができます。

ページリスト
ページリスト

エレメントツリー

エレメントツリーは、ページの中のエレメントツリーの親子関係の一覧です。

エレメントツリー

パレット

ここからは、パレットの各機能の紹介をしていきます。

全部を眺めていても効率が悪いので、触ってみながら、よく分からないところなどを確認する用途で使用しましょう。

コンテナ

コンテナはZeroOneで開発する上で、理解は必須です

HTMLの「div」要素と同じです。

その他のPaletteをこの中に入れることができます。

パレット

水平ボックス

水平ボックスの中に別のパレット(例:基本エレメントのテキスト、ボタン)を順番に載せてみましょう。

そうすると、横につながっていくのがわかるかと思います。

使用場面としては、ヘッダーなどが代表的な使われ方です。

使用場面としては、ヘッダーなどが代表的な使われ方です。

【ZeroOne入門編】機能紹介Part1 – 水平ボックス

垂直ボックス

同じように、垂直ボックスで試してみたください。

垂直ボックスで同じようにエレメントを追加した場合、縦に増えていくことがわかるかと思います。

【ZeroOne入門編】機能紹介Part2 – 垂直ボックス

水平リピーター

水平リピーターは、概念としては同様ですが、動的な値を入れることで、同じUIのエレメントが複数作成されます。

使用用途:企業の導入事例一覧など、UIの構成は同じで、中のテキスト(この場合は企業情報)だけ変わるような場面で非常に使い勝手のいい機能です。

垂直リピーター

水平リピーターは、水平リピーターの垂直(縦)バージョンです。

使用用途:お知らせ一覧の表示など、都度更新するようなデータを垂直リピーターで作っておけば、データベースに追加することで、UIが崩れることなく、最新の情報を追加することができます。

インプットエレメント

インプットエレメントはユーザーが情報を入力するためのエレメント

主な使用用途

  1. 問い合わせフォーム
  2. ユーザーの情報登録ページ
  3. チャット機能
  4. ファイルアップロー

機能一覧

ファイルインプット:ファイルのアップロード機能

チェックボックス:プライバシーポリシーの同意などで使用

Checkbox Group:複数項目のチェックが可能

ラジオボタン:チェックボックスとほとんど同様

Radio Group:複数の項目から1つの選択肢を入力

テキストインプット:ユーザーがテキストで入力することができる

ナンバーインプット:電話番号の入力などに使用

パスワードインプット:サインアップ/ログイン画面で使用

時間インプット:日程調整やタスク管理ツール等で使用

日付インプット:日程調整やタスク管理ツール等で使用

日時インプット:日程調整やタスク管理ツール等で使用

複数行インプット:チャット機能などで使用

言語ドロップダウン:言語切り替えなどで使用

ドロップダウン:複数の選択肢から1つを選択(ラジオボタンとは見た目が異なります)

複数の選択肢の作成方法

Checkbox Group、Radio Group、ドロップダウンの複数の選択肢の設定方法については、オプションから設定することができます。
1つ目の選択肢を入力後、Returnボタンを押して次の選択肢を入力することができます。

プレビューで都度確認するようにしましょう

【ZeroOne入門編】機能紹介Part3 – CheckboxGroup・RadioGroup・ドロップダウンの複数選択肢作成方法

基本エレメント

基本的な静的エレメント。基本的にはこのエレメントを使用することが最も多い
水平ボックス、垂直ボックスに入れて組み立てることが多い

機能一覧

テキスト:基本的な文字入力
HTML:ノーコードで実現が難しい装飾などを、HTMLで実現できます
ボタン:別の画面への遷移や、申し込みボタンなど
UIビルダー:ZeroOneのようなノーコード開発画面を作りたい方向け

リンク:URLの貼り付けが可能
アイコン:多種多様なアイコンを使用可能

画像:画像の差し込み
動画:動画の差し込み

まとめ

今回は、『【ZeroOne入門編】主な機能・使い方紹介 Part1 – UI編』として、主にElementの紹介を行いました。
ZeroOneは、API連携も含め、できることが豊富なため、一度ZeroOneをマスターすることで幅広いジャンルのアプリの開発が可能です。
国産ツールのため、日本語でのドキュメント、サポートも充実しております。
Slackでの個別相談も無料で可能なため、登録してみてください。

短期間で本気でZeroOneで稼ぐ力を身につけるなら、『ゼンリョク』

システム開発は、目的を持って実際に開発していくことによりスキルが伸びていきます。
何ヶ月も淡々と勉強していても、実際にはそのスキルで稼ぐことができる人はごく僅かなのが現実ですよね。

WEB開発スクールの『ゼンリョク』では、最短1ヶ月で稼げる力を身につけます。
1週間で基礎学習をし、2週間目からは実際に自分でアプリを開発することにより、スキルを伸ばします。

実力がついてきたら、受講期間内でも、弊社からの開発案件の紹介が可能です。
稼げるスキルがついたと判断した瞬間に、実際にお金を稼ぎながら実務をすることができます。

本気で稼ぐ力を身につけるなら、実践あるのみです。
興味がある方はぜひ無料相談してみてください。

(開発案件を受けるかは個人の自由です。自身の作りたいプロダクトを完成させるためにゼンリョクを受講される方も多くいらっしゃいます)

【ZeroOne入門編】主な機能・使い方紹介 Part1 - 1 UI編 エレメントの各機能解説

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次