VNEXTの会社紹介資料

資料ダウンロード

ホーム > V-BLOG > 技術・サービス

ノーコードツールでWebサイトを作ってみた!ノーコードツールのWebサイト制作

2023/10/27

「自社サイトをさくっと簡単に作りたい」

「Webサイトってノーコードツールで作れるの?」

「ノーコードツールで作った時のデメリットは?」

といった、ニーズやお悩みを抱えている企業も少なくありません。

 

ノーコードは、ソースコードを記述せずにシステム開発を行う手法です。

昨今では、ノーコードツールを使用すれば誰でも簡単にWebサイトを作れるのです。

 

今回は、実際にノーコードツールを使って筆者(以下、私)が作ったWebサイトや、おすすめのWebサイト制作ノーコードツールをご紹介します。

 

 目次 

● ノーコードとは?

● おすすめのWebサイト制作ノーコードツール

 ▶︎ STUDIO

 ▶︎ Wix

● 実際に作ったWebサイト

 ▶︎ STUDIO:ポートフォリオ

 ▶︎ Wix:LP(ランディングページ)

● Webサイト制作ノーコードツールの選び方

● Webサイト制作前にすべきこと

● ノーコードツールで制作した場合のデメリット

 ▶︎ 実装できる機能に制限がある

 ▶︎ デザインの自由度が低い

 ▶︎ 使用するツールに依存する

● まとめ

 

|ノーコードとは? 

ノーコードとは、ソースコードを記述することなく、Webサービスやアプリケーション、システムが開発できるものです。

 

通常、Webサイトを制作するには、JavaScriptやHTML/CSSなどのプログラミング言語を使用してコードを記述する必要があります。

 

ノーコードツールでは、コードを記述せずに、コーディングの知識がなくても誰でも簡単にWebサイトを作れます。

 

利用するツールは最初からテンプレートや機能が決まっており、ドラッグ&ドロップやマウスクリックなどの簡単な操作や文字入力をして、

画面上で操作が完結する「GUI(Graphical User Interface)」で直感的に開発を進めることができます。

 

|おすすめのWebサイト制作ノーコードツール 

昨今では、Webサイト制作が可能なノーコードツールが続々と登場しています。

今回は、初心者にも使いやすく、コストを抑えてWebサイトを制作できるノーコードツールを2つご紹介します。

 

|STUDIO 

出典:STUDIO

 

STUDIO(スタジオ)は、1クリックでWebサイトを公開できるノーコードツールです。

 

テンプレートも豊富ですが、ゼロからデザインすることも可能なので、オリジナルデザインのWebサイトを制作できます。

 

私がUI/UXデザインの資格を取得するために、とある会社のUI/UXコースを受講していたのですが、最終テストの成果物が「ポートフォリオ」でした。

このポートフォリオを作成するにあたり、おすすめされたのが「STUDIO」です。

 

STUDIOは、日本語フォントが豊富な種類が用意されているほか、スマホにも対応しており、デザイン性に優れたWebサイトを作れるのが特徴です。

全デザイン機能とフォーム機能を無料で使え、有料プランであれば独自ドメインの取得やバナー非表示、CMS機能を強化することも可能です。

 

STUDIOの料金プランは以下の通りです。

 

|Wix 

出典:Wix

 

Wix(ウィックス)は、世界で1億6,000万人以上が利用しているノーコードWeb制作ツールです。

 

ドラッグ&ドロップの簡単無操作でWebサイトを作ることができます。

 

また、ダッシュボードでWebサイト制作からブログ機能、集客、アクセス解析などを一括管理ができる点も特徴です。

 

私も実際、Wixを使ってLP(ランディングページ)を制作しました。

自社内でも作ることができるのですが、急遽出展することになった展示会までにLPを制作することになり、時間がなかったためWixで対応しました。

 

Wixの料金プランは以下の通りです。

メールアドレスがあれば、無料で利用もできますが、公式HPに掲載の料金プランをご紹介します。

 

|実際に作ったWebサイト 

では、実際に私が「STUDIO」と「Wix」を使って制作したWebサイトをご紹介します。

 

|STUDIO:ポートフォリオ 

上述のとおり、STUDIOでは自分のポートフォリオを制作しました。

 

デザインは、「シンプルかつ誰が見てもわかりやすい」を重視しています。

 

私は、テンプレートを基に制作したのですが、すべてをテンプレート通りにしたわけではなく、オリジナルのデザインを部分的に入れたりしました。

 

ドラッグ&ドロップで簡単に操作ができ、ページの遷移先も該当ページに作成したページのURLを貼り付けるだけなので、初心者でも使いやすいツール

だと感じています。

 

レスポンシブ対応もしているので、スマホ用にサイトを作らなくても済みます!

 

また、プレビュー機能はサイトを公開しなくても共有したい人だけに共有ができるので、たとえば自社のWebサイトを作った時、誰かにチェックして

ほしい時に便利です。

 

ちなみに、このポートフォリオは「Free(無料プラン)」で制作したものです。

 

《TOPページ》

 

《自己紹介ページ》

 

このポートフォリオは、UI/UXデザイナーの資格を取るための最終テストで作成したものなので、ページ内にあるSNSやコンタクトフォームは、

使えないようにしているので、予めご了承ください。

 

いつも自社サイトブログを書いている筆者(私)という人物がどのような人なのかが伝われば幸いです!

▶︎ ポートフォリオ:https://wafu237p.studio.site/

 

|Wix:LP(ランディングページ)

次は、弊社の新規プロダクトを、急遽LP制作をすることになったWebサイトをご紹介します。

 

弊社VNEXTでは、自社でWebサイトを制作する場合はベトナム側にデザインとコーディングを依頼します。

今回は私が作ったプロダクトだったので、日本側で要件定義と設計を行い、

 

  1. デザインモックを描いて、ベトナムの開発チームに依頼
  2. 完成したβ版にフィードバックをして改善
  3. 最終的にリリースをする

というのが本来の流れでした。

 

このLPは1枚ものですが、上記の方法だと担当者の確保から始めるので、フィードバックのやりとりも含めると最短でも4〜5日はかかります。

 

しかし、Wixであればノーコードなので、自分で作成したデザインを基にパーツを配置するだけなので1日で作成することができました。

修正も自分でできるので、フィードバック ⇔ 改善のやりとりも不要です。

 

Wixを選んだ理由は、無料プランでもブログ機能を追加したり、Google Analyticsと連携してサイト分析などをダッシュボードで管理できるからです。

 

《TOPページ》

 

《資料ダウンロードページ》

 

 

WixのWebサイトの完成度を見たい方は、下記のURLより閲覧できます。

▶︎ タビコミ(Tabicomo):https://tabicomi.wixsite.com/my-site



このように、「時間がない」「自分で改善や修正をしたい」場合にも、ノーコードツールを活用することはおすすめです。

 

|Webサイト制作ノーコードツールの選び方 

上記では、2つのおすすめツールをご紹介しました。

Webサイト制作ができるノーコードツールを選ぶ際にどのようなポイントを押さえればいいのでしょうか?

 

Webサイト制作ができるノーコードツールの選び方は、大きく次の3つあります。

 

・直感的な操作で簡単に制作できるか

・デザインの優れたテンプレートはあるか

・必要な機能を実装できるか

 

ノーコードツールは、基本的にすべて初心者向けですが、自分に合うかどうかの相性があるため、実際に操作してみて操作しやすいかを

確認することが重要です。

 

また、Webサイトは公開後も更新・運用が必要なので、操作しやすいツールを選ぶ必要があります。

 

さらに、ツールごとにテンプレートの種類が大きく異なります。

好みのデザインや自社に合ったデザインがあるのかも選定するポイントのひとつです。

 

最後に1番重要といっても過言ではないのが、「必要な機能が実装可能か」という点です。

 

たとえば、ECサイトを制作する場合であれば、決済機能や会員登録機能、SNS連携などが必要になります。

 

Webサイトに実装できる機能も、ツールによって異なるため、実装する機能を明確にしてからツールの選定をしましょう。

 

|Webサイト制作前にすべきこと 

ノーコードツールを使用すれば、事前準備なしでWebサイトを作成・公開することができます。

 

しかし、ただWebサイトを作るだけでは、目的を達成することはできません。

 

Webサイトを制作する前に、まずは「要件定義」「設計」が必要です。

具体的には、次の項目を明確化しておきましょう。

 

・何のためにWebサイトを作るのか

・どのような課題を抱えているのか(自社とユーザー視点)

・Webサイトに訪問するターゲットは誰か

・Webサイト制作後の成果は何か

・ゴールとするものは何か(PV数、お問い合わせ数、決済など)

・Webサイトのボリューム感はどの程度か

・目的達成に必要なコンテンツは何か(ブログ、ホワイトペパーなど)

・Webサイト公開後の運用はどうするか

・SNSとの連携は必要か

・Webサイトのプロモーションはどうするか(広告、SNSなど)

 

これらを決めずにとりあえずWebサイトを制作・公開したとしても、「誰にも見られない」「使われない」Webサイトになってしまいます。

 

そのため、「何のためのWebサイトか」をしっかり考え、目的や手段などに優先順位をつけましょう。

 

また、要件定義と設計をしておくことで、方向性がズレることなく目的を持ってWebサイトを作ることができます。

 

|ノーコードツールで制作した場合のデメリット 

便利なノーコードツールですが、Webサイトをノーコードツールで制作した場合のデメリットもあります。

以下のデメリットをきちんと把握し、ノーコードツールで制作するのか、自社または外注で開発するのかを見極めましょう。

 

|実装できる機能に制限がある 

すべてコーディングで制作するのと比較すると、ノーコードでの制作は実装できる機能が限られます。

 

実装できる機能は使用するツールに依存するため、事前に確認が必要です。

 

たとえば、自社のオリジナルシステムを構築したり、サイトの機能を細かく調整することができません。

 

|デザインの自由度が低い 

ノーコードでの制作は、実装できるデザインの幅にも制限があります。

 

特にテンプレートを用いて制作すると工数は抑えられますが、独自のデザインを実装することが難しいです。

 

デザインにこだわりたい場合はコーディングで制作するか、よりデザインの自由度の高いノーコードツールを選択しましょう。

 

もし、自由度の高いオリジナルのWebサイトを作りたい場合は、Web制作を1から設計する必要があります。

自社にリソースが足りない、Webサイト構築の専門スキルがないといった場合は、Webサイトの制作を外部委託するのも選択肢のひとつです。

 

|使用するツールに依存する 

ノーコードでの制作は、セキュリティや料金なども使用するツールに依存します。

 

そのため、サイト制作の際は、より信頼度が高く、制作するサイトに求める要件を満たせるツールを選定するのが重要です。

 

たとえば、ノーコードWeb開発ツールがサービスを終了した場合、そのツールで制作したWebサイトが削除されたり、使えなくなってしまいます。

 

また、基本的にノーコードで作ったサイトは他に移行できません。

 

使用している途中で「ノーコードが値上がりした」「もっといいノーコードを見つけた」などの理由でツールを変更すると決めた場合には、

最初からサイトを作り直すことになります。

 

使用を検討しているノーコードツールが「他のツールに変換できるか」「コード出力してノーコードに依存せず使えるか」などを調べておきましょう。

 

|まとめ 

Webサイトはノーコードで簡単に作ることができ、既にノーコードツールでWebサイトの制作を行っている企業もあるでしょう。

 

私自身も、コードの知識がなくてもWebサイトが作れるので便利なものだと感じています。

 

しかし、テンプレートを利用する必要があるため自社独自のサイトにすることができません。

さらに、ページ数を増やしたり長期的に運用したりする場合は、ランニングコストが高くなりやすいです。

 

「自社オリジナルの自由度の高いWebサイトが作りたい」

「長期的かつ本格的な運用をしたい」

 

といったご要望があれば、是非VNEXTにご相談ください!

 

上流工程からデザイン・設計、構築〜運用・保守まで一気通貫でサポートしています。

 

また、日本国内よりも人件費の安いベトナムで開発するため、開発コストを抑えることが可能です。

コストとスピードを両立させながら、高品質なWebサイト開発を提供します!

 

▶︎ お問い合わせ:https://vnext.co.jp/contact.html?view=contact