記事内に商品プロモーションが含まれる場合があります
このページでは、初心者の方でもゼロからおしゃれなホームページを作る方法とツールを紹介していきます。無料ツールも多く紹介しているので、ぜひ参考にしてみてください。
ホームページ作成に必要なのはパソコンだけ
以下で紹介する方法で必要になるツールは、どれもパソコンだけです。「ホームページ・ビルダー」のような有料ソフトを購入する必要はありません。
一口にホームページ作成と言ってもたくさんの方法があります。そこで目的別におすすめの作成方法をまとめてみました。
1. 無料で使える!お店や会社のホームページを作成できるツール
「自分の飲食店や会社のホームページを作りたい」という場合、制作会社にお願いすると高いお金がかかってしまいます。規模にもよりますが「制作費100万円・維持費3万円/月」くらいのことはよくあります。
これは個人にはなかなか厳しいですよね。しかし、最近ではお金をかけなくても立派なホームページを作ることができます。そんなに便利なサービスをいくつか紹介します。
ホームページ作成ツール
1-1. 世界で1億人以上が利用するWix
Wix(ウィックス)は世界的に有名なホームページ作成ツールです。イスラエル生まれのツールですが、世界的に人気がありユーザー数は1億人を超えているそうです。2012年〜日本語にもバッチリ対応するようになりました。
特徴は?
ボタンや文字、画像などをドラッグ&ドロップでホームページ上に配置していくことができます。つまり、ややこしいコードを書く必要は一切ないのです。
また、高品質な無料テンプレートがたくさん用意されているため、テンプレートをもとに、必要な部分を変えるだけでもホームページが出来上がります。
Wixはサポートが本当に充実しています。ヘルプセンターでは使い方の解説や困りごとの対処法がみっちりとまとめられています。また、Wix担当者に質問をすることもできます。
Wixではどんなサイトが作れるの?
あらゆる種類のホームページを作ることができます。飲食店や企業、会計事務所などなど、あらかじめジャンル別のテンプレートが用意されています。
実際の作成例は「Wixの作成事例-日本編」で見ることが出来ます。
無料で使える?
はい、Wixは無料で使うことができます。
ただし無料だと、作成したページの上下に小さくWixの広告が入ってしまうなどの制約があります。実際に作ってみて広告が気になれば有料プランを検討するのが良いかもしれませんね。有料と言っても月1,000円前後で、ホームページ制作会社に頼むのに比べれば格安です。
「無料プランと有料プランの違い」や「使い方」については、別の記事にまとめました。興味のある方は是非目を通してみてください。
1-2. 日本で人気のホームページ作成ツール「Jimdo」
Jimdo(ジンドゥー)はドイツ生まれのホームページ作成ツールです。日本語版はKDDIウェブコミュニケーションにより運営れているので、安心して使うことができます。以前、JimdoのテレビCMが流れていることもありました。それもあるのか、日本でもかなり人気がありますね。
操作感や機能はWixとよく似ています。「WixにするかJimdoにするか」という比較もよくされています。
Jimdoの特徴は?
Wixと同じく様々なパーツをドラッグ&ドロップするだけで、ホームページを作成できます。HTMLやCSSのような専門知識は必要ありません。
どんなサイトが作れる?
Jimdoでもあらゆる種類のサイトを作ることができます。有料プランにすれば、ネットショップを開設することもできます(Jimdoの作成事例)。
料金は?
無料プランと有料プランがあります。無料だと作成したホームページに広告が入ったり、独自ドメインが使えなかったりします(サイトのURLが◯◯.jimdo.comとなってしまいます)。
有料プランといえど、制作会社に任せるよりは、ずっと安く、おしゃれなホームページを作成できます。Jimdoを使うのであれば、有料プランに申し込むのがおすすめです。詳細はJimdo公式ページを見てみてください。
WixとJimdoどっちがおすすめ?
どちらもサービスがよく似ており、同じくらいおすすめです。サポートがしっかりとしているのは、Jimdoかもしれませんね。JimdoCafeという「Jimdoの悩みを気軽に相談できるカフェ」が全国各地にあるのは大きいですね。
1-3. 直感的で作成がしやすいホームページ作成ツール「Weebly」
Weeblyは米国生まれのホームページ作成ツールです。こちらも、作成に専門知識などは必要ありません。便利なツールなのですが、日本ではそれほど知名度が高くなく、使い方の情報もあまりまとまっていません。
特徴は?
Weeblyのビルダー画面(デザイン作成画面)はシンプルで直感的に分かりやすくなっています。また、高品質でかっこいいテンプレートが多数用意されています(こちらからチェック)。
一方で、日本語対応は不完全で、ところどころ英語が残っていたり、やや不自然な日本語が混じっていたりするのが難点。
無料で使える?
Wix、Jimdoと同じく、Weeblyの広告表示のあるホームページであれば無料で使うことができます。
1-4. 1枚ペラのページならStrikingly
Strikingly(ストライキングリー)も簡単にホームページが作れるツールです。テンプレートのバリエーションは多くないですが、その分どれもおしゃれなものになっています。
特徴は?どんなサイトが作れる?
Strikinglyの大きな特徴は、「基本的に1ページでサイトが完結する」ことです。クリックして別のページに飛ぶのではなく、下にスクロールして読む進めていく縦長のホームページとなるのです(有料プランならページを追加することもできますが、それでも制限があります)。
料金は?
無料プランと有料プランがあります。無料でも広告がフッター(ページの一番下)に表示されるため、目立ちません。有料プランだと、独自プランを使うことができたり、使用するフォント数が増えたり、広告が非表示になったりします(詳細)。
1-5. ブログにもホームページにも使えるAmeba Ownd
AmebaOwnd(アメーバオウンド)はアメブロなどを運営するサイバーエージェントにより2015年に提供が開始されたサービスです。アメブロよりもおしゃれで洗練されたブログやウェブサイトを簡単に作ることができます。
特徴は?
テンプレートの数は多くありませんが、どれもクオリティが高いものとなっています。ただし、ウェブデザインの知識なしでできるカスタマイズの自由度はあまり高くありません。写真や文字などのパーツが配置される位置(レイアウト)がある程度決まっており、そこに自分の写真や文字を当てはめていく、というイメージです。
また、テンプレート数が少ない分、他のOwndで作られたホームページとはデザイン・レイアウトが少し似たものになるかもしれません。
どんなホームページが作れる?
写真が大きく使われるテンプレートが多いため、写真を活かしたホームページやブログを作るのに向いているのではないかと思います。料理の写真をたくさんのせる飲食店ホームページや、旅行記サイトなんかにはピッタリでしょう。作成事例はこちらから見ることができます。
料金プランは?
無料プランと有料プランがあります。無料プランではページ数や画像ストレージに制限があるため、規模の大きいホームページには不向きです。有料プランならそれらの制限はなく、広告を非表示にすることも可能です。(プランの比較について詳しくはこちら)
独自ドメイン利用は無料ですが、別途自分でドメイン管理会社に利用料を支払う必要があります(他社でドメインを有料で借り、そのドメインをアメーバオウンドで使用する形です)。有料プランであっても同様です。
一旦まとめ:結局どれがおすすめ?
ここまで5つのホームページ作成ツールを紹介してきました。では、結局どれが良いのでしょうか。分かりやすく比較できるように表にまとめてみました。
プロパティ | Wix | Jimdo | Weebly | Strikingly | Ownd |
---|---|---|---|---|---|
テンプレート の豊富さ |
◎ | ◯ | ◯ | △ | △ |
スマホ表示 | ◯ | ◯ | ◯ | ◯ | ◯ |
使いやすさ | ◯ | ◯ | ◯ | ◯ | ◯ |
ホームページの オシャレさ |
◎ | ◯ | ◎ | ◎ | ◎ |
(日本語) サポート |
◎ | ◎ | △ | △ | ◎ |
広告非表示にする 最低料金 |
¥841/月 | ¥945/月 | $12/月 | $16/月*1 | ¥9,600/月 |
独自ドメインが 使える最低料金 |
¥416/月 | ¥945/月 | $12/月 | $8/月 | 無料*2 |
アプリからの 編集 |
◯アプリは英語 | ◎ | △ | △ | ◎ |
※料金などは2019年1月時点の数字です。
*1:ただし無料でも広告はかなり控えめ。
*2:ただし別途ドメイン管理会社に利用料を支払う必要あり。
会社やお店のホームページを作る場合
会社やお店のホームページを作るのであれば、できれば広告を外して公式らしさを出したいところ。となると、どのツールでも有料プランに加入する必要があるかと思います。個人的にはテンプレートのオシャレさと、サポートの充実具合からJimdoが良いかな、と思います。
イベントページや告知ページなどをサクッと作る場合
1ページ完結の縦長のウェブページを作るのであれば、Strikinglyがおすすめです。例えばイベントページや、商品の宣伝ページなどですね。操作が分かりやすく、簡単に作ることができます。さらに無料でも広告(というよりStrikinglyのロゴ)がフッターに小さく表示されるだけなので目立ちません。
この記事の一番最後で「ホームページ用のロゴやタイトル画像の作成方法」と「ハイクオリティな写真を無料ダウンロードできるサイト」を紹介しています。是非そちらにも目を通してみてください
スキップする
2. ホームページというよりブログを作りたいときにおすすめ無料ツール
日記を書いたり、意見を述べたり、何かについて掘り下げたりするには、ブログサービスを使うのがおすすめです。
最近では、ブログサービスのレベルも上がっており、おしゃれなブログを簡単に作ることができます。
ブログのメリットは?
さきほど紹介したような作成したら完結するようなホームページより、記事をたくさん投稿するブログの方が人を集めやすい傾向があります。良い記事を書けばSNSで拡散されますし、GoogleやYahooなどの検索エンジンからの流入も期待できます。
ここでは、おすすめのブログサービスを4つ紹介します。どれも記事を書いて、気軽に投稿できる仕組みが出来上がっています。また、広告を貼って収益を得ることもできます。
2-1. 万能で使いやすい「はてなブログ」
最近利用者が増えているのがはてなブログです。はてなブログの特徴は、デザインのカスタマイズが比較的自由にできることです。カスタマイズ方法を解説した記事も探せばたくさん見つかります。ハイクオリティなテンプレートも多数用意されています。
また、SEOに強く(うまくやれば検索上位に表示されやすい)、たくさんの訪問者を集め、大きな収入を得ているはてなブロガーもちらほら見かけます。
ちなみに広告を完全に非表示にするためには有料会員になる必要があります。途中で有料会員に切り替えることができるので、とりあえず無料で始めても良いでしょう。
2-2. 使い勝手の良い「ライブドアブログ」
ライブドアブログはシンプルで初心者でも使いやすいブログサービスです。使い勝手の良さから様々な用途で使うことができます。例えば、ライブドアブログで運営されている「2ちゃんねるまとめサイト」やウェブメディアも多数あります。はてなブログと同じく無料で使うことができ、広告を削除するには有料会員になる必要があります。
2-3. テンプレートが豊富で広告のない「Blogger」
BloggerはGoogleが提供する完全無料ブログサービスです。日本ではあまり知名度が高くないですが、これがかなり使い勝手が良いのです。まず、無料ながら広告が表示されません(自分で広告を貼ることはできます)。操作方法は直感的で分かりやすく、デザインテンプレートは豊富に用意されています(「blogger best template」と検索すると多数見つかります)。
問題は日本ではユーザー数が少なく、使い方の情報などがあまり日本語では見つからない点です。何にせよお金をかけずに、おしゃれなブログを使いたければおすすめです。
2-4. 自由にカスタマイズができる「WordPress」
WordPress(ワードプレス)は上の3つのブログサービスとは毛色が異なります。というのもWordpressを使う場合には、自分でサーバーを借りて、HTMLやCSS、PHPなどのコードをいじり、ブログを作成する必要があるのです。
その分、自由度はダントツで高くなっています。隅から隅まで自分の好きなデザインを実現できます。ちなみに当サイトもWordpressで運営されています(サーバーはエックスサーバー
を使っています)。
3. ポートフォリオサイトを作りたい
次に、自分の写真やアート、イラストなどの作品をのせるポートフォリオサイトを作る場合です。
ポートフォリオサイトを作る場合には、以下の4つどれかがオススメです。
④と⑤はさきほどのセクションで解説したものですね。ポートフォリオはおしゃれなデザインにしたいはずなので、テンプレートの華やかさでやや劣るJimdoは外しています。
3-1. SNSながらカスタマイズ性が高いTumblr
Tumblr(タンブラー)は米国生まれのSNSです。これがものすごく自由度が高く、ポートフォリオ作りにはもってこいなのです。
特徴は?
SNSなのですが、オリジナルデザインの自分のページを持つことができます。
ハイクオリティなテンプレートがたくさん用意されており、ウェブデザインの知識がなくても簡単におしゃれなデザインのサイトを作ることができるのが特徴です。
また、HTMLやCSSが書ける人であれば、自由にカスタマイズすることもできます。
無料で使える?
完全無料で使うことができます。広告を非表示にするのにも、独自ドメインを設定するのにもお金はかかりません。
Tumblrを使ったウェブポートフォリオの作り方はこちらの記事で詳しく解説しています。
3-2. 世界中の人に作品を見て欲しいならBehance
Behanceは、クリエイティブソフト会社のAdobeが提供するSNSです。世界中の凄腕クリエイターたちの素晴らしい作品を担当のできるだけでなく、マイページを作り、自分の作品を投稿していくことができます。取り扱う作品ジャンルは幅広く、アート、イラスト、ウェブデザイン、写真などなど、あらゆるものを投稿できます。
特徴は?
自分の作品ページのデザインも、ウェブデザインの知識なしでいじることができます(ただし、サイドバーやフッターなど変更できない部分あり)。
Behanceには、各業界のトップクラスの人たちの作品が集まっています。そのレベルの高さゆえに埋もれてしまいがちですが、良い作品を投稿すれば、世界中の大勢の人たちに見てもらうことができます。また、ときには仕事に繋がるようなこともあります。作品に自信がある方は是非活用してみるべきでしょう。
よく似たサービス「Dribbble」
なお、Behanceとよく似たサービスに「Dribbble」があります。こちらもBehanceと使い方は似ており、自分の作品を共有したり、世界中のクリエイターの作品を見ることができます。どちらも同じくらい人気があり、BehanceとDribbleの両サービスを使っているクリエイターも多いですね。
無料で利用可
BehanceもDribbleも完全無料で使用できます。
4. ネットショップを作りたい
ネットショップならBASEがおすすめ
ネットショップを開設して、グッズや商品を売りたいのであれば「BASE」がおすすめです。デザインテンプレートがたくさん用意されており、専門知識が無くても、おしゃれなページを作ることができます。また、WEB制作会社に個人で依頼すると高くつく「決済機能」も予め用意されています。クレジットカードや銀行振込、コンビニ払いにも対応しているのが素晴らしいところ。
初期費用なし
BASEは初期費用や月額料金などがかかりません。利用料は決済手数料(売上の3.6% + 40円)の形で取られるので、商品が売れなければBASEに支払う料金は0円です。気軽に始められるわけですね。
BASEはカスタマイズの自由度も高く、HTMLやCSSの知識があれば、より自由な表現をすることができます。
5. ホームページ作成のスキルを身につけたい
「ホームページ作成のスキルを身につけて、ゆくゆくはウェブデザインの仕事をしたい」という場合には、上記とは全く違う方法を取る必要があります。
5-1. まずHTMLとCSSを学ぼう
私たちが見ているウェブサイトは、様々な種類のコードにより表示されています。HTML、CSS、PHP、Javascriptなどですね。この中でもウェブデザイナーが必ずマスターしなければならないのがHTMLとCSSです。
無料でHTMLとCSSを学ぼう
サルワカでは、イチからHTMLとCSSを学ぶための講座記事を公開しています。30個近くある講座を順番に見ていけば、それだけでかなりの知識は身につくはずです。
本で学びたい場合
本で学びたいという方にはHTML5&CSS3きちんと入門がおすすめです。解説が丁寧で分かりやすく、内容も充実しています。
5-2. 実際にウェブサイトを作ってみよう
HTML/CSSの基本が押さえられたら、あとは実践あるのみです。分からない部分をGoogleで検索しながら、ウェブサイトをイチから作り上げれば、スキルが一気に身につくです。個人的には、Wordpressで自分のポートフォリオやウェブメディアを作るのが良いのではないかと思います。
6. おすすめのホームページ素材作成ツール
ホームページを作っていく中で「自分だけのロゴ、ヘッダー画像を作りたい」や「無料の写真を素材を使いたい」ということもあると思います。この章では、そんなときに使える便利なツールやサイトを紹介します。
ロゴやヘッダー画像をデザインできる無料ツール
2017年5月に日本に上陸したCanva(キャンバ)というサービスを使えば、無料でおしゃれなデザインのヘッダー画像や、ロゴなど、バナー画像などを作ることができます。
Canvaの詳細や使い方は以下の記事で解説しています。
写真素材をダウンロードする
おしゃれな写真素材を見つけるにはUnsplashを使うのがおすすめです。こちらのサイトにアップロードされている画像は全て無料であらゆる目的に使うことができます。
英語になってしまいますが、目的の写真を見つけるために検索機能を使うのがおすすめです。例えば「food」と検索すれば、おしゃれで美しい料理や食材、調理風景の写真が見つかります。
無料でアイコンやイラスト素材をダウンロード
以下の記事で、完全無料で使えるアイコン素材サイトやイラスト素材サイトをまとめています。
最後に
ここまでたくさんのホームページ作成ツールや素材サイトを紹介してきました。今回はおすすめのツールに絞って紹介しましたが、他にも探せば見つかるはずです。例えば、ネットショップを開設したい場合には「BASE 」もしくは「STORES.jp」を使えば無料かつ簡単です。色々と探してみることをおすすめします。