こんにちは、デザイナー・ブロガーの
ゆっきー(@elcielo_design)です。
今回は、初めての人であったとしても、
1から簡単にWebサイトを作成する方法と
ツールを紹介していこうと思います。
この記事の目次
Webサイト作成は簡単。
必要なのはパソコンのみ。
昔だと、Webサイトの作成と聞くと
少し難しいイメージが強かったですが、
近年はかなり作るハードルは下がって
容易に誰でもできるようになりました。
しかも、ホームページビルダーのような
有料ソフト購入も正直必要なくなって、
「無料でパソコンだけで作成」できます。
この記事で挙げるサイト作成ツールも、
ほぼ無料で手軽なものなのでご安心を。
ただ、実はWebサイトの作成といっても
用途によって様々な作り方が多くあるので、
どのツールを選ぶか迷うことだと思います。
そこで用途や目的別にWebサイト作成の
ツール・方法等をまとめてみました。
おすすめWeb作成ツールの紹介
難しく考えず始めるならこんな感じ
個人的に思うそれぞれの1番「結論」
Webサイト
(ホームページ) 作成ツール
「Webサイト (ホームページ) 作成ツール一覧」
目的・用途 | ツール名 | 基本 料金 |
広告なし 最低料金 |
独自ドメイン 最低料金 |
① お店・会社 ホームページ |
Wix (ウィックス) |
無料 | ¥841/月 | ¥416/月 |
ジンドゥー | 無料 | ¥945/月 | ¥945/月 | |
Weebly (ウィーブリー) |
無料 | $12/月 | ¥$12/月 | |
Strikingly (ストライキングリー) |
無料 | $16/月 | $8/月 | |
Ameba Ownd (アメーバオウンド) |
無料 | ¥960/月 ¥9,600/年 |
無料 |
|
Studio (スタジオ) |
無料 | ¥980/月 |
¥980/月 | |
② ブログ |
はてなブログ (Hatena Blog) |
無料 | ¥600/月 (2年コース) |
¥600/月 (2年コース) |
ライブドアブログ (livedoor Blog) |
無料 | スマホ広告 削除不可能 |
無料 | |
Blogger (ブロガー) |
無料 | 広告なし | 無料 | |
WordPress (ワードプレス) |
無料 | 広告なし | 無料 | |
③ ポートフォリオ |
Tumblr (タンブラー) |
無料 | 無料 | 無料 |
Behance (ビハンス) |
無料 | なし | ||
Dribbble (ドリブル) |
無料 | なし | $3/年で 利用可能? |
|
④ ネットショプ | BASE (ベイス) |
無料 | ロゴ非表示 ¥500/月 |
無料 |
STORES (ストアーズ) |
無料 | なし | ¥2,980/月 |
|
SUZURI (スズリ) |
無料 | なし | ||
⑤ デザイン学習 | WordPress | 無料 | 広告なし | 無料 |
※ 独自ドメイン最低料金は、利用するための料金であり
無料等の場合は別でドメイン会社を自分で探して、
ドメインを取得する必要があるので注意が必要です。
「お名前.com」などのドメイン会社利用がおすすめ。
それぞれ目的別に下で詳しく紹介。
また最後の方には、素材作成ツールと
素材提供サービスも少し載せています。
① お店や会社のWebサイトの作成
「お店・会社向けWebサイト作成ツール」
- Wix (ウィックス)
世界中で多くの人が使っている
有名なWebサイト作成ツール。
-
ジンドゥー
特に日本で人気があるツール。
お店や会社のHPを作るならここ?
- Weebly (ウィーブリー)
知名度は低いが、直感的に
サイトを作成しやすいツール。
-
Strikingly (ストライキングリー)
1枚ものページを作るなら、
このWebサイト作成ツール。
- Ameba Ownd (アメーバオウンド)
シンプルかつお洒落にブログでも
Webサイトでも作れるツール。
-
Studio (スタジオ)
2018年公開された
注目のUIデザインツールの1つ。
自分のお店や会社のWebサイト制作を
制作会社に依頼すると高い料金が必要。
会社によりますが、安いところでも
「制作費30万〜」「維持費1万〜」
これくらいかかるのが普通になります。
ですが、これらのツールを使えば
無料で且つある程度しっかりした
Webサイトができてしまうんです。
Wix (ウィックス)
Wixは、世界で見ても有名で代表的な
Webサイト作成ツールの1つであり、
利用者は何と2億5千万人以上いるそうです。
ツール名 | Wix (ウィックス) |
料金 | ・無料プラン (広告表示等の制約あり。) ・有料プラン (独自ドメインや広告非表示) |
制作可能な Webサイト |
様々な種類のジャンル 作成事例「Wixで作られたHP (国内編) 」 |
特徴 | ・画像 (写真やイラスト)、テキストなどを ドロップ&ドロップで配置できる。 ・質の高い無料テンプレート900種類以上。 ・豊富なマーケティング機能あり。 ・サポート体制もしっかりしている。 問題解決のまとめ「Wix ヘルプセンター」 |
おすすめの人 | ・世界的有名なツールを使いたい人 |
その他 | ・イスラエルで開発、日本語にも対応 (2012年〜) |
Wix – 本格的なホームページを作成
Wix.com Inc.無料posted withアプリーチ
Wix (ウィックス)
ジンドゥー
ジンドゥーは、日本国内で人気がある
Webサイト作成ツールになります。
無料プランでももちろん使えますが、
有料プランも低価格でありながら
制作会社の制作並みのクオリティの
Webサイトができてしまいますね。
ツール名 | ジンドゥー |
料金 | ・無料プラン (広告表示等の制約あり。) ・有料プラン (独自ドメインや広告非表示) |
制作可能な Webサイト |
様々な種類のジャンル 作成事例「Jimdoで作られたHP」 (有料プランでECサイトなども作れる。) |
特徴 | ・Wixと機能・操作感が似ていて、 ドロップ&ドロップでサイト作成できる。 |
おすすめの人 | ・日本で人気があるツールを使いたい人 |
その他 | ・ドイツで開発、日本語にも対応 ・KDDIウェブコミュニケーションが 日本語版を運営している。 |
※「Wix」と「ジンドゥー」と迷ったら
個人的には「Jimdo」の方がおすすめ。
どちらのツールも似ていますが、
ジンドゥーはユーザーのサポート体制として
「JimdoCafe」という悩み解決の場も
全国に展開していて心強いものです。
Jimdo
Jimdo GmbH無料posted withアプリーチ
「ジンドゥー」
Weebly (ウィーブリー)
Weeblyは直感的にWebを作成できる
ホームページ作成ツールの1つ。
専門的な知識がなくても作成できますが、
ツール自体の知名度は日本で低めです。
ツール名 | Weebly (ウィーブリー) |
料金 | WixやJimdoと同じように無料で使える。 |
制作可能な Webサイト |
様々な種類のジャンル テンプレート「Weeblyで作られたHP」 |
特徴 | ・デザイン作成画面 (ビルダー画面) が 分かりやすく、直感的に操作がしやすい。 ・高品質でお洒落なテンプレート多数。 ・使い方等の情報は他のツールより少ない。 |
おすすめの人 | ・直感的にサイトを作成したい人 |
その他 | ・アメリカで開発、日本語に対応には不完全 |
Weebly x Square
Block, Inc.無料posted withアプリーチ
Weebly (ウィーブリー)
Strikingly (ストライキングリー)
Strikinglyは主に1枚ページのサイトを
手軽に作れるWebサイト作成ツール。
ツール名 | Strikingly (ストライキングリー) |
料金 | ・無料プラン (広告がフッターに表示等の制約) ・有料プラン (独自ドメイン、広告非表示等) 「プランの価格の詳細」 |
制作可能な Webサイト |
基本1枚もののページ |
特徴 | ・1枚ペラのページ作成向けツール。 (縦長のWebサイト、LPページ) ・テンプレートは少なめだが、 1つ1つカッコイイ感じのものになっている。 ・有料でもページの制限あり。 |
おすすめの人 | ・1枚ものページを作りたい人 |
その他 |
Strikingly
Strikingly無料posted withアプリーチ
Strikingly (ストライキングリー)
AmebaOwnd (アメーバオウンド)
Ameba Owndはブログ、ネットショップ
メディア運営どれでも使えるサービス。
ツール名 | AmebaOwnd (アメーバオウンド) |
料金 | ・無料プラン (ページ数やストレージ等の制約) ・年間プラン¥9,600 (税込) /年 ・月間プラン¥960 (税込) /月 (広告非表示等の制限なし) 「プランの価格の詳細」 |
制作可能な Webサイト |
様々な種類のジャンル |
特徴 | ・アメブロよりもお洒落でシンプルな デザインのブログ・サイトを作成できる。 ・テンプは少なめだがクオリティーは高い。 ・画像を大きく使うテンプレが多めなので 画像を多く使うWebサイトに特におすすめ。 ・Webデザイン (HTML・CSS) の知識がないと カスタマイズの自由度は下がる。 |
おすすめの人 | ・シンプルかつお洒落にサイトを作りたい人 |
その他 | ・アメブロを運営するサイバーエージェントが 2015年より提供を開始したサービス。 ・独自ドメインの利用はできるが、 別でドメイン会社に使用料支払う形になる。 |
Ameba Ownd
CyberAgent, Inc.無料posted withアプリーチ
AmebaOwnd (アメーバオウンド)
Studio (スタジオ)
Studioは、無料から使える国内産の
UIデザイン (Webサイト作成) ツール。
ツール名 | Studio (スタジオ) |
料金 | ・Freeプラン ¥0 ・Starterプラン ¥980/月 ・CMSプラン ¥2,480/月 ・Businessプラン ¥4,980/月 「プランの価格の詳細」 |
制作可能な Webサイト |
様々な種類のジャンル |
特徴 | ・デザインから公開までコーディングなしで Webデザインを完成できる。 (独自ドメインで公開ももちろん可能。) ・スタイリッシュなインターフェイス ・コーディングの知識が必要ない。 ・ボタン一つでWebサイト公開 ・SketchやAdobe XDのx,y座標、高さと幅の 調整でなくパディングやマージンでの制作。 |
おすすめの人 |
・UIデザインに拘りたい人 |
その他 |
なお、その他のUIデザインツールは、
次の記事にまとめています。
② ブログの作成
「ブログ作成ツール」
Webサイトというよりブログ運営なら
これらの4つのサービスがおすすめ。
お店や会社等のWebサイトよりも
多くの記事を投稿するブログの方が、
見てもらえる機会は多いと思います。
良質な記事は検索エンジンで上位表示、
SNS等の拡散も見込めますね。
はてなブログ (Hatena Blog)
はてなブログは近年利用者が増えている
ブログサービスの1つになります。
ツール名 | はてなブログ (Hatena Blog) |
料金 | ・無料プラン (広告表示等の制約) ・有料プラン (広告非表示等) |
特徴 | ・デザインが比較的自由に可能。 ・高品質なテンプレートが多く揃っている。 ・ネット上にカスタマイズ記事等も多数。 ・SEO (検索上位表示) も強い。 |
おすすめの人 | ・とりあえず無料ブログを始めたい人 |
その他 |
はてなブログ (Hatena Blog)
ライブドアブログ (ライブドアブログ)
ライブドアブログは、はてなと同じく
おすすめのブログサービスになります。
ツール名 | ライブドアブログ (livedoor Blog) |
料金 | ・無料 |
特徴 | ・初心者にも使いやすくシンプルなブログ。 ・画像のアップロード容量や転送等を 気にする必要がない。 ・パソコン向けのデザインが自由 ・スマホ画面で広告が削除できない。 |
おすすめの人 | ・はてなブログとも1つブログを持ちたい人 |
その他 | 2015年に有料プラン廃止 |
ライブドアブログ (livedoor Blog)
Blogger (ブロガー)
Bloggerは、Googleが提供している
無料で使えるブログサービスです。
実は日本ではそこまで有名ではないが、
はてな・ライブドアブログ等のように
なかなか使いやすいメジャーなブログ。
ツール名 | Blogger (ブロガー) |
料金 | 無料 |
特徴 | ・デザインテンプレートが豊富。 「blogger best template」検索で色々見れる。 ・直感的に操作が可能。 ・無料でありながら、広告がない。 (自分で広告を貼ることができる。) |
おすすめの人 | ・Googleが提供する無料ブログを使いたい人 |
その他 | ・日本利用者が少なく、ブログの使い方等の 情報がネット上に日本語で見つからない。 |
Blogger (ブロガー)
WordPress (ワードプレス)
WordPressは、今まで紹介した
3つのブログと全く違うサービス。
自らサーバーとドメインをレンタルして、
必要に応じてHTML・CSS等コードを触り
ブログを作成していく形となってきます。
ツール名 | WordPress (ワードプレス) |
料金 | ・WordPress自体は無料 ただ、サーバー代・ドメイン代でお金が必要。 |
特徴 | ・自由度が他のブログより圧倒的に高い。 様々なデザインを実現可能にしてくれる。 ・テンプレート (テーマ) も多種多様。 |
おすすめの人 | ・有料ブログを始めたい人 |
その他 | 当サイトdesignatureも WordPressを 利用して運営している。 (ちなみにサーバーは「エックスサーバー」、 ドメインは「お名前.com」を使用している。 |
※ ここで紹介するのは「WordPress.org」であり、
レンタルブログ「WordPress.com」の内容ではない。
※ WordPressの詳細については下の記事をチェック。
WordPress (ワードプレス)
WordPressの関連記事はこちら。
③ ポートフォリオサイト作成
「ポートフォリオ作成ツール」
※ Jimdoはポートフォリオで使える華やかさは低い。
お店や企業等のサイト、ブログでなく
自分の写真やデザイン、イラスト (絵画)、
アート等の作品を載せる場合に使えそうな
ポートフォリオサイトはこの5つになります。
また、次の記事ではポートフォリオ
作成ツールに絞って紹介しています。
ポートフォリオ関連の記事
Tumblr (タンブラー)
Tumblrは、SNSの一種類ですが、
ポートフォリオとして使えます。
ツール名 | Tumblr (タンブラー) |
料金 | 無料 |
特徴 | ・自由度が高く、オリジナルデザインの 自分のページを作ることができる。 ・テンプレートが豊富に揃っている。 ・Webデザインの知識がなくても簡単に作成可 (もちろん、コードが分かればカスタマイズも) |
おすすめの人 | ・とりあえずポートフォリオを作りたい人 |
その他 | アメリカ生まれのSNS |
Tumblr
Yahoo無料posted withアプリーチ
Tumblr (タンブラー)
Behance (ビハンス)
Behanceは、あのクリエイティブ界で
有名なAdobe社が提供・運営している
クリエイターが作品を展示・閲覧できる
オンラインプラットホームの1つです。
世界中の有名なクリエイターから
無名のクリエイターの制作物まで、
数多くのものがアップされていますね。
サービス名 | Behance (ビハンス) |
ジャンル | クリエイティブ全般系 |
料金 | 無料 |
特徴 | ・自分でページを作り、作品を投稿できる。 ・ツールごとに作品を検索できるので 自分が使っているツールの可能性を知れる。 ・デザインやイラスト以外もあり、 幅広い多くの作品を閲覧することが可能。 ・作品にいいねやフォローすることもできる。 ・Webデザインの知識なしでページを カスタマイズしていける。 ・各業界の凄いクリエイターが利用。 |
おすすめの人 | ・世界中の数多くの作品を見たい人 ・Adobe社が提供するツールを使いたい人 |
その他 | ・Dribbbleと似ている。 両方使うクリエイターも実際に多い。 |
「閲覧カテゴリー」(見つける)
- Behance 選りすぐりの作品
Behanceが選ぶ優良作品やいいねが多いもの、
ユーザーに評価された作品が一覧で見れます。 -
作品ギャラリー
グラフィックデザイン・イラスト・写真・広告・美術
インタラクション・モーション・建築・音声・工芸
ゲームデザイン・プロダクトデザイン・ファッション
各クリエイティブ分野ごとに作品が見れます。
- クリエイティブツール
Photoshop・Illustrator・InDesign・Lightroom・XD
Premiere Pro・After Effects・Illustrator Draw・Stock
Photoshop Sketch・Photoshop Mix・Dimension
制作に使われたツールごとに作品が見れます。
-
学校・団体
業界をリードする組織ごとに作品が見れます。
Behance
Behance無料posted withアプリーチ
Behance (ビハンス)
Dribbble (ドリブル)
Dribbbleは、アメリカで生まれた
デザイナー向けの招待制SNSです。
サービス名 | Dribbble (ドリブル) |
ジャンル | クリエイティブ全般系 |
料金 | 無料 |
特徴 | ・投稿されている作品の種類が幅広い。 ・招待制採用のため作品のクオリティが高い。 ・招待がなくても作品閲覧や「いいね」は 誰でもできるようになっている。 ・登録したデザイナーは「Shot」と言われる 400×300pxのスクリンショットを投稿して コメントや評価をし合ったり交流もできる。 ・作品を閲覧してデザイナーに仕事の依頼、 求人情報も記載されておりビジネスにも利用可 |
おすすめの人 | ・クオリティ高いデザイナーの作品を見たい人 ・Behanceのようなツールを使いたい人 |
その他 | ・バスケットをテーマに世界観が作られていて 他サービスとはまた違う面白さがある。 ・まだ日本では一般的ではないように見えるが デザイナー界では多くの人が利用している。 |
Dribbble (ドリブル)
④ ネットショップ (ECサイト) の作成
「ネットショップ作成ツール」
ネットショップならBASEがおすすめ。
その他のスキルや作品を販売できる
サイトは下の記事でまとめています。
BASE (ベイス)
BASE (ベイス) は
有名なネットショップ (ECサイト) を
無料で簡単に作れるサービスです。
ツール名 | BASE (ベイス) |
料金 | 初期費用・月額料金なし 料金は決済手数料 (売上の3.6%+40円) で発生 商品の購入がなければ、お金は必要なし。 |
特徴 | ・無料でサイトを作って 自分の作品を売ることができる。 ・ネットショップが30秒でできて、 ショップデザインや運営、集客も簡単。 ・専門知識がなくてもいい感じのページが 作成できる。 ・デザインテンプレートが豊富。 ・決済機能もサイトについている。 (クレジット、銀行振込、コンビニ払いに対応) ・カスタマイズの自由度も高い。 |
おすすめの人 | ・すぐにネットショップを作りたい人 |
その他 |
「BASE (ベイス)」
STORES (ストアーズ)
STORES (ストアーズ) は、
誰でも無料で利用できる
ネットショップ作成サービスの1つ。
日本国内の少売業者向けに特化していて
管理画面や決済方法等は
日本仕様になっています。
ツール名 | STORES (ストアーズ) |
料金 | ・フリープラン ¥0/月 決済手数料5.5% ・ベーシックプラン ¥2,980/月 (税込) 決済手数料3.6% ※ クレジットカードでプラン料金を 年払いした場合は初月¥0 |
特徴 | ・専門知識やスキルがなくても簡単に ネットショップが作れる。 ・お洒落なテンプレートが多数ある。 ・パソコンだけでなくスマホでも制作できる。 ・オンラインショップと実店舗の商品の 連携や在庫の一括管理が可能。 ・決済手段が豊富。 ・代金引換を利用できる。 ・運用の効率を上げる機能が揃っている。 |
おすすめの人 | ・オンラインショップだけでなく、 実店舗販売も考えている人 |
その他 | ・Instagramに掲載している画像を 販売する商品の商品画面に そのまま設定できる機能もあり。 |
STORES
SUZURI (スズリ)
自分だけのオリジナルグッズが、
「作れる」「売れる」「買える」
3つの機能が揃ったプラットフォーム。
サービス名 | SUZURI (スズリ) |
料金 | 無料 |
特徴 | ・作品の画像をアップロードするだけで、 Tシャツやサコッシュ、スマホケースを ネット上で合成して、そのまま販売できる。 ・在庫を抱えずグッズを作れるのも魅力的 ・商品原価に対して自分の 利益(トリブン) を 設定登録すると、売上げに応じ振込される。 ・売れた場合の発送も全行ってくれるので、 コストもリスクもゼロで始めれる。 ・自分でを購入する場合は商品原価で購入可 |
おすすめの人 | ・自分のイラストやデザインのグッズを 簡単に販売したい人 |
その他 | ・作家やアーティストとしても 自分の作品を見てもらうチャンスに。 |
SUZURI (スズリ)
⑤ Webデザイン (HTML・CSS等) を
学ぶのに向いたWebサイトの作成
「Webデザイン学習に向く作成ツール」
- WordPress (ワードプレス)
② ブログの作成ツールで紹介
Webサイト作成のスキル (技術) を身につけ
Webデザインを学んでいきたいと思うなら、
比較的簡単なWebサイト作成ツールでなく
WordPressを選択するのが良いでしょう。
Webデザインを1から学んでいくなら、
下の記事をチェックしてみて下さい
Webサイトの素材作成のツール
「無料素材作成のツール」
※ 個人的におすすめのものを載せています。
Webサイト自体を作成するツールを
① 〜 ⑤ の章で紹介してきましたが、
素材作成ツールと素材提供サービスを
最後に少し紹介しようかなと思います。
無料素材作成ツールなら、
「Canva」などのデザイン系ツールが
初心者でも簡単に使えお洒落な素材を
作るのができるので使ってみましょう。
なお、その他のデザインツールは、
次の2記事にまとめています。
Webサイトの素材提供サイト
「無料イラスト・写真提供サイト」
サイト名 | |
無料イラスト素材サイト | いらすとや |
Freepik | |
FLAT ICON DESIGN | |
ICOOON MONO | |
無料写真素材サイト | PEXELS |
Pixabay (ピクサベイ) | |
Unsplash |
※ イラスト素材サイト、写真素材サイトそれぞれ
おすすめのサイトをピックアップして挙げています。
無料イラスト・写真提供サイトについては
この7つのサイトが個人的におすすめ。
もちろん他にも多くのサイトがあるので、
それらはまとめ記事で紹介しています。
まとめ
今回はWebサイト (ホームページ) の
作成には必要不可欠であるツールと
サイト素材作成・提供サービス等を
まとめて紹介させていただきました。
有名なものやおすすめのものに絞って、
それぞれこの記事では挙げていますが、
おそらく他にも沢山あると思います。
なので、この記事も参考にしつつも
自分が作りたいと思うサイト(ブログ)の
目的・条件やイメージなどを固めながら、
様々なツールを探し使って見てくだいね。