無料でWebサイト(ホームページ)を作成する方法とツール

スポンサーリンク
pc-3

こんにちは、美大卒・元アパレル店員の
ゆっきー(@elcielo_design)です。

今回は、初めての人であったとしても、
1から簡単にWebサイトを作成する方法と
ツールを紹介していこうと思います。

Webサイト作成は簡単。
必要なのはパソコンのみ。

昔だと、Webサイトの作成と聞くと
少し難しいイメージが強かったですが、
近年はかなり作るハードルは下がって
容易に誰でもできるようになりました。

しかも、ホームページビルダーのような
有料ソフト購入も正直必要なくなって、
「無料でパソコンだけで作成」できます。

この記事で挙げるサイト作成ツールも、
ほぼ無料で手軽なものなのでご安心を。

ただ、実はWebサイトの作成といっても
用途によって様々な作り方が多くあるので
どのツールを選ぶか迷うことだと思います。

そこで用途や目的別にWebサイト作成の
ツール・方法をなどまとめてみました。

スポンサーリンク

おすすめWeb作成ツールの紹介

難しく考えず始めるならこんな感じ 
個人的に思うそれぞれの1番「結論」

  •  Jimdo 0 - 無料でWebサイト(ホームページ)を作成する方法とツール (ジンドゥー)
    お店・会社のサイトを作成ならこのサイト。
  • はてなブログ  (Hatena Blog)
    無料でブログを始めるならこのブロブ。

  • Tumblr  (タンブラー)
    とりあえずポートフォリオを作るならこのSNS。
  • BASE  (ベイス)
    ネットショップを開設するならこのツール。

  • WordPress  (ワードプレス)
    有料でブログを始めたり、本格的にサイト運営、
    Webデザイン(HTML・CSS)を学びたいならWP。
  • STUDIO (スタジオ)
    UIデザインツールとしても使える最新のツール。
    UIデザインに慣れたデザイナー向け!?

Webサイト (ホームページ) 作成ツール

「Webサイト (ホームページ) 作成ツール一覧」

 目的・用途      ツール名  基本
 料金 
 広告なし
 最低料金
 独自ドメイン
 最低料金      
 ① お店・会社
 ホームページ
 Wix
 (ウィックス)
 無料  ¥841/月  ¥416/月
 Jimdo 0 - 無料でWebサイト(ホームページ)を作成する方法とツール
 (ジンドゥー)
 無料  ¥945/月  ¥945/月
 Weebly
 (ウィーブリー)
 無料  $12/月   ¥$12/月 
 Strikingly
 (ストライキングリー)
 無料  $16/月  $8/月
 Ameba Ownd
 (アメーバオウンド)
 無料  ¥960/月
  ¥9,600/年
 無料
 STUDIO
 (スタジオ)
 無料  $9/月
 (バナー非表示)
 $9/月
 ② ブログ
 はてなブログ
 (Hatena Blog)
 無料  ¥600/月
 (2年コース)
 ¥600/月
 (2年コース)
 ライブドアブログ
 (livedoor Blog)
 無料  スマホ広告
 削除不可能
 無料
 Blogger
 (ブロガー)
 無料  広告なし  無料
 WordPress
 (ワードプレス)
 無料  広告なし  無料
 ③ ポートフォリオ
 Tumblr
 (タンブラー)
 無料  無料  無料
 Behance
 (ビハンス)
 無料  なし  
 Dribbble
 (ドリブル)
 無料  なし  $3/年で
 利用可能?
 ④ ネットショプ  BASE
 (ベイス)
 無料  ロゴ非表示
 ¥500/月
 無料
 STORES.jp 0 - 無料でWebサイト(ホームページ)を作成する方法とツール  無料  なし  ¥980/月
 SUZURI
 (スズリ)
 無料    なし
 ⑤ デザイン学習  WordPress  無料  広告なし  無料

※ 独自ドメイン最低料金は、利用するための料金であり
無料などの場合は別でドメイン会社を自分で探して、
ドメインを取得する必要があるので注意が必要です。
お名前.com0 - 無料でWebサイト(ホームページ)を作成する方法とツール」などのドメイン会社利用がおすすめ。

それぞれ目的別に下で詳しく紹介。
また最後の方には、素材作成ツールと
素材提供サービスも少し載せています。

① お店や会社のWebサイトの作成

「お店・会社向けWebサイト作成ツール」

 ツール名  特徴
 Wix (ウィックス)  世界中で多くの人が使っている
 有名なWebサイト作成ツール。
 Jimdo 0 - 無料でWebサイト(ホームページ)を作成する方法とツール(ジンドゥー)  特に日本で人気があるツール。
 お店や会社のHPを作るならここ?
 Weebly (ウィーブリー)  知名度は低いが、直感的に
 サイトを作成しやすいツール。
 Strikingly
 (ストライキングリー)
 1枚ものページを作るなら
 このWebサイト作成ツール。
 Ameba Ownd
 (アメーバオウンド)
 シンプルかつお洒落にブログでも
 Webサイトでも作れるツール。
 STUDIO (スタジオ)  2018年公開された今注目の
 UIデザインツールの1つ。

自分のお店や会社のWebサイト制作を
制作会社に依頼すると高い料金が必要。

会社によりますが、安いところでも
「制作費30万〜」「維持費1万〜」
これくらいかかるのが普通になります。

ですが、これらのツールを使えば
無料で且つある程度しっかりした
Webサイトができてしまうんです。

Wix (ウィックス)

wix

Wixは、世界で見ても有名で代表的な
Webサイト作成ツールの1つであり、
利用者は何と1億人以上いるそうです。

 料金 ・無料プラン (広告表示など制約あり。)
・有料プラン (独自ドメインや広告非表示)
 制作可能な
 Webサイト
 様々な種類のジャンル
 作成事例「Wixで作られたHP (国内編)
 特徴 ・画像 (写真やイラスト)、テキストなどを
 ドロップ&ドロップで配置できる。

・質の高い無料テンプレート多数。
・サポート体制もしっかりしている。
 問題解決のまとめ「Wix ヘルプセンター
 その他  イスラエルで開発、日本語にも対応 (2012年〜)

Wix (ウィックス)

世界1億ユーザー突破!Wixで無料ホームページを作成しよう!簡単ウェブサイトビルダーで自由にカスタマイズ。プログラミングは一切不要。自分だけの素敵なホームページをデザインできます。

Jimdo (ジンドゥー)

jimdo

Jimdoは、日本国内で人気がある
Webサイト作成ツールになります。

無料プランでももちろん使えますが、
有料プランも低価格でありながら
制作会社の制作並みのクオリティの
Webサイトができてしまいますね。

 料金 ・無料プラン (広告表示など制約あり。)
・有料プラン (独自ドメインや広告非表示)
 制作可能な
 Webサイト
 様々な種類のジャンル
 作成事例「Jimdoで作られたHP
 (有料プランでECサイトなども作れる。)
 特徴 ・Wixと機能・操作感が似ていて、
 ドロップ&ドロップでサイト作成できる。
 その他 ・ドイツで開発、日本語にも対応
・KDDIウェブコミュニケーションが
 日本語版を運営している。

※「Wix」と「Jimdo」と迷ったら
個人的には「Jimdo」の方がおすすめ。

どちらのツールも似ていますが、
Jimdoはユーザーのサポート体制として
JimdoCafe」という悩み解決の場も
全国に展開していて心強いものです。

Jimdo

Jimdo

Jimdo GmbH無料posted withアプリーチ

Jimdo (ジンドゥー)

ホームページ作成サービス国内シェアNo.1のJimdo(ジンドゥー)はホームページを無料で簡単に作れます。プログラミング知識も不要で、誰でも自分好みのホームページにデザイン可能。SEOやアナリティクスなど機能満載で集客に困らないウェブサイトを作れるビルダーとして大人気!

Weebly (ウィーブリー)

weebly

Weeblyは直感的にWebを作成できる
ホームページ作成ツールの1つ。

専門的な知識がなくても作成できますが、
ツール自体の知名度は日本で低めです。

 料金  WixやJimdoと同じように無料で使える。
 制作可能な
 Webサイト
 様々な種類のジャンル
 テンプレート「Weeblyで作られたHP
 特徴 ・デザイン作成画面 (ビルダー画面) が
 分かりやすく、直感的に操作がしやすい。
・高品質でお洒落なテンプレート多数。
・使い方などの情報は他のツールより少ない。
 その他 ・アメリカで開発、日本語に対応には不完全。

Weebly (ウィーブリー)

Weeblyの無料ウェブサイトビルダーで、ウェブサイトやブログ、オンラインストアを手軽に作成できます。あらゆるタイプのビジネスに合うカスタマイズデザインやドメイン、eコマースツールを、当ビルダーでお探しいただけます。

Strikingly (ストライキングリー)

strikingly

Strikinglyは主に1枚ページのサイトを
手軽に作れるWebサイト作成ツール。

 料金 ・無料プラン (広告がフッターに表示などの制約)
・有料プラン (独自ドメイン、広告非表示など)
 「プランの価格の詳細
 制作可能な
 Webサイト
 基本1枚もののページ
 特徴 ・1枚ペラのページ作成向けツール。
 (縦長のWebサイト、LPページ)
・テンプレートは少なめだが、
 1つ1つカッコイイ感じのものになっている。
・有料でもページの制限あり。
 その他  

Strikingly (ストライキングリー)

誰にでも簡単にモバイルに対応した美しいサイトを制作できるウェブサイトビルダーのStrikingly。あっという間にシンプルでスタイリッシュ。無料ウェブサイトを今日作りましょう。

AmebaOwnd (アメーバオウンド)

amebaownd

Ameba Owndはブログ、ネットショップ
メディア運営どれでも使えるサービス。

 料金 ・無料プラン (ページ数やストレージなどの制約)
・有料プラン (広告非表示など制限なし)
プランの価格の詳細
 制作可能な
 Webサイト
 様々な種類のジャンル
 作成事例「Ameba Owndで作られたHP
 特徴 ・アメブロよりもお洒落でシンプルな
 デザインのブログ・サイトを作成できる。
・テンプレートは少なめだがクオリティーは高い。
・画像を大きく使うテンプレが多めなので
  画像を多く使うWebサイトに特におすすめ。
Webデザイン (HTML・CSS) の知識がないと、
  カスタマイズの自由度は下がる。
 その他  ・アメブロを運営するサイバーエージェントが
 2015年より提供を開始したサービス。
・独自ドメインの利用はできるが、
 別でドメイン会社に使用料支払う形になる。

Ameba Ownd

Ameba Ownd

CyberAgent, Inc.無料posted withアプリーチ

AmebaOwnd (アメーバオウンド)

無料でオシャレなホームページやブログを、Ameba Ownd (アメーバ オウンド) で作りましょう。オシャレなデザインテンプレートも多く、独自ドメイン・アクセス解析・SEO対策・SNS連携など、無料で利用できる機能が豊富です。

STUDIO (スタジオ)

studio

STUDIOは、無料から使える国内産の
UIデザイン (Webサイト作成) ツール。

 料金 ・Designプラン Free (無料)
・Publishプラン $9/月
・Growプラン $27/月 (準備中)
 「プランの価格の詳細
 制作可能な
 Webサイト
 様々な種類のジャンル
 特徴  ・デザインから公開まで、コーディングなしで
 Webデザインを完成できる。
 (独自ドメインで公開ももちろん可能。)
・スタイリッシュなインターフェイス
・コーディングの知識が必要ない。
・ボタン一つでWebサイト公開
・SketchやAdobe XDのx,y座標、高さと幅の
 調整でなくパディングやマージンでの制作。
 その他  

STUDIO (スタジオ)

スポンサーリンク

② ブログの作成

「ブログ作成ツール」

 ツール名  特徴
 はてなブログ
 (Hatena Blog)
 無料ブログの中では一番おすすめ。
 万能で使いやすい人気あるブログ。
 ライブドアブログ
 (livedoor Blog)
 はてなブログに並ぶくらいに
 初心者でも使い勝手が良いブログ。
 Blogger (ブロガー)  知名度は低いが、Googleが提供する
 広告なしでテンプレ豊富なブログ。
 WordPress
 (ワードプレス)
 有料になるがダントツでデザインの
 自由度が高いブログ作成ツール。

Webサイトというよりブログ運営なら
これらの4つのサービスがおすすめ。

お店や会社などのwebサイトよりも
多くの記事を投稿するブログの方が、
見てもらえる機会は多いと思います。

良質な記事は検索エンジンで上位表示、
SNSなどの拡散も見込めますね。

はてなブログ (Hatena Blog)

hatena-blog

はてなブログは近年利用者が増えている
ブログサービスの1つになります。

 料金 ・無料プラン (広告表示などの制約)
・有料プラン (広告非表示など)
 特徴 ・デザインが比較的自由に可能。
・高品質なテンプレートが多く揃っている。
・ネット上にカスタマイズ記事なども多数。
・SEO (検索上位表示)も強い。
 その他  

はてなブログ (Hatena Blog)

はてなブログは、無料でしっかり書けるブログサービスです。日々の生活から感じたこと、考えたことを書き残しましょう。

ライブドアブログ (ライブドアブログ)

livedoor-blog

ライブドアブログは、はてなと同じく
おすすめのブログサービスになります。

 料金 ・無料
 特徴 ・初心者にも使いやすくシンプルなブログ。
・画像のアップロード容量や転送などを
 気にする必要がない。
・パソコン向けのデザインが自由
・スマホ画面で広告が削除できない。
 その他  2015年に有料プラン廃止

ライブドアブログ (livedoor Blog)

人気ブロガーによる注目のブログが盛りだくさん。ニュース・ゲーム・スポーツ・絵日記・家事・育児・収納・インテリア・レシピなどカテゴリも豊富!話題のニュースやランキングも随時更新!ブログを読むならライブドアブログ。

Blogger (ブロガー)

blogger

Bloggerは、Googleが提供している
無料で使えるブログサービスです。

実は日本ではそこまで有名ではないが、
はてな・ライブドアブログなどのように
なかなか使いやすいメジャーなブログ。

 料金  無料
 特徴 ・デザインテンプレートが豊富。
「blogger best template」検索で色々見れる。
・直感的に操作が可能。
・無料でありながら、広告がない。
(自分で広告を貼ることができる。)
 その他  ・日本利用者が少なく、ブログの使い方などの
 情報がネット上に日本語で見つからない。

Blogger (ブロガー)

伝えたいことを自分らしく発信できます。あなただけの素敵なブログを無料で作成して、自分の知識や経験、最新のニュースなど、伝えたいことを投稿しましょう。

WordPress (ワードプレス)

wordpress

WordPressは、今まで紹介した
3つのブログと全く違うサービス。

自らサーバーとドメインをレンタルして、
必要に応じてHTML・CSS等コードを触り
ブログを作成していく形となってきます。

 料金 ・WordPress自体は無料
 ただ、サーバー代・ドメイン代でお金が必要。
 特徴 ・自由度が他のブログより圧倒的に高い。
  様々なデザインを実現可能にしてくれる。
・テンプレート (テーマ) も多種多様。
 その他  当サイトdesignatureも WordPressを
 利用して運営している。
 (ちなみにサーバーは「エックスサーバー 0 - 無料でWebサイト(ホームページ)を作成する方法とツール」、
 ドメインは「お名前.com 0 - 無料でWebサイト(ホームページ)を作成する方法とツール」を使用している。

※ ここで紹介するのは「WordPress.org」であり、
レンタルブログ「WordPress.com」の内容ではない。
※ WordPressの詳細については下の記事をチェック。

関連記事

③ ポートフォリオサイト作成

「ポートフォリオ作成ツール」

 ツール名  特徴
 Tumblr (タンブラー)  イラストレーターに馴染みがある
 作品などをストックできるSNS。
 Behance (ビハンス)  世界の有名クリエイターが多くが
 利用するAdob社が提供するSNS。
 Dribbble (ドリブル)  Behanceと似たサービス。
 Wix  (ウィックス)  ① お店や会社のWebサイトの
 作成ツールで紹介したもの。
 Weebly (ウィーブリー)
 Jimdo 0 - 無料でWebサイト(ホームページ)を作成する方法とツール(ジンドゥー)

※ Jimdoはポートフォリオで使える華やかさは低い。

お店や企業などのサイト、ブログでなく
自分の写真やデザイン、イラスト (絵画)、
アートなどの作品を載せる場合に使えそうな
ポートフォリオサイトはこの5つになります。

関連記事

Tumblr (タンブラー)

tumblr

Tumblrは、SNSの一種類ですが、
ポートフォリオとして使えます。

 料金  無料
 特徴 ・自由度が高く、オリジナルデザインの
 自分のページを作ることができる。
・テンプレートが豊富に揃っている。
・Webデザインの知識がなくても簡単に作成可。
 (もちろん、コードが分かればカスタマイズも)
 その他  アメリカ生まれのSNS

Tumblr

Tumblr

Yahoo無料posted withアプリーチ

Tumblr (タンブラー)

Tumblr is a place to express yourself, discover yourself, and bond over the stuff you love. It's where your interests connect you with your people.

Behance (ビハンス)

behance

Behanceは、あのクリエイティブ界で
有名なAdob社が提供するSNSです。

 料金  無料
 特徴 ・自分のページを作り、作品投稿できる。
・世界中の素晴らしいクリエイターの
 作品 (イラスト・デザインなど) を見れる。
・Webデザインの知識なしでページを
 カスタマイズしていける。
・各業界の凄いクリエイターが利用。
 その他  Dribbble と似ていている。
 両方使うクリエイターも実際に多い。

Behance

Behance

Behance無料posted withアプリーチ

Behance (ビハンス)

スポンサーリンク

④ ネットショップ(ECサイト)の作成

「ネットショップ作成ツール」

 ツール名  特徴
 BASE (ベイス)  多くの人が利用している人気の
 大手ネットショップ作成ツール。
 STORES.jp 0 - 無料でWebサイト(ホームページ)を作成する方法とツール  BASEと同じくオンランストアが
 すぐに作れるサービスの1つ。
 SUZURI (スズリ)  オリジナルグッズを簡単に販売可能。
 クリエイター向けのネットショップ。

ネットショップならBASEがおすすめ。
その他のスキルや作品を販売できる
サイトは下の記事でまとめています。

関連記事

BASE (ベイス)

base

BASEはネットショップ(ECサイト)を
無料で簡単に作れるサービスです。

 料金  初期費用・月額料金なし
 料金は決済手数料 (売上の3.6%+40円) で発生
 商品の購入がなければ、お金は必要なし。

 特徴 ・専門知識がなくてもいい感じのページができる。
・デザインテンプレートが豊富。
・決済機能もサイトについている。
 (クレジット、銀行振込、コンビニ払いに対応)
・カスタマイズの自由度も高い。
 その他  

BASE (ベイス)

ネットショップ作成が30秒で。しかも無料。ネットショップをつくるのに、もう「勉強」と「お金」は必要ありません。今までECサイトを作りたくても時間・お金・技術さまざまな理由で始められなかった、そんな全ての方の悩みを解消するサービスです。

⑤ Webデザイン(HTMLやCSS等)を
学ぶのに向いたWebサイトの作成

「Webデザイン学習に向く作成ツール」

 ツール名  特徴
 WordPress 
 (ワードプレス)
 ② ブログの作成ツールで紹介

Webサイト作成のスキル(技術)を身につけ
Webデザインを学んでいきたいと思うなら、
比較的簡単なWebサイト作成ツールでなく
WordPressを選択するのが良いでしょう。

Webデザインを1から学んでいくなら、
下の記事をチェックしてみて下さい。

関連記事

Webサイトの素材作成のツール

「無料素材作成のツール」

 ツール名  特徴
 Canva (キャンバ)  無料でえお洒落なデザイン素材が
 作成できる便利なツール。
 Fotor  Canvaと同じようなデザインツール。
 Stencil

※ 個人的におすすめのものを載せています。

Webサイト自体を作成するツールを
① 〜 ⑤の章で紹介してきましたが、
素材作成ツールと素材提供サービスを
最後に少し紹介しようかなと思います。

無料素材作成ツールなら、
「Canva」などのデザイン系ツールが
初心者でも簡単に使えお洒落な素材を
作るのができるので使ってみましょう。

関連記事

Webサイトの素材提供サイト

「無料イラスト・写真提供サイト」

   サイト名
 無料イラスト素材サイト  いらすとや
 Freepik
 FLAT ICON DESIGN
 ICOOON MONO
 無料写真素材サイト  PEXELS
 Pixabay (ピクサベイ)
 Unsplash

※ イラスト素材サイト、写真素材サイトそれぞれ
おすすめのサイトをピックアップして挙げています。

無料イラスト・写真提供サイトについては
この7つのサイトが個人的におすすめ。

もちろん他にも多くのサイトがあるので
それらはまとめ記事で紹介しています。

関連記事

まとめ

今回はWebサイト (ホームページ) の
作成には必要不可欠であるツールと
サイト素材作成・提供サービスなどを
まとめて紹介させていただきました。

有名なものやおすすめのものに絞って
それぞれこの記事では挙げていますが、
おそらく他にも沢山あると思います。

なので、この記事も参考にしつつも
自分が作りたいと思うサイト(ブログ)の
目的・条件やイメージなどを固めながら
様々なツールを探し使って見てくだいね。 

スポンサーリンク

シェアする