完全無料でホームページを作るための手順を用途別に徹底解説！

いざホームページを作ることを考えたときに、プログラミング・画面レイアウト・Webデザインなどの基本的な知識に加えて更新や保守・運用などさまざまな業務が発生することがわかります。

初心者の方がこれらをゼロから学習して準備するのは、なかなか難しいなぁと感じる人も少なくないでしょう。しかし、誰でもかんたんにホームページを作れるWebサービスを活用することで、このような不安は大幅に解消できるようになります。

そこで、この記事では初心者でもホームページを作るための方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

簡単なランディングページを作る

この章では、一般的なランディングページを簡単に作成できるサービスについて見ていきましょう。主に、Striking.lyを使った作成方法について学んでいきます。

Strikinglyの導入方法

【Strikingly】

Strikinglyは用途に合わせた高品質なテンプレートを選択し、そこから自分のイメージに合う編集をすることで誰でも簡単にホームページを作成できるサービスです。

主に、ランディングページを作るときに最適なサービスですが、企業ページやスタートアップ、個人サイトやブログなど幅広いシーンにも活用できます。

導入方法ですが、トップページから好きなユーザー名とメールアドレス、パスワードを入力すればすぐに利用できるので簡単です。

最初に、さまざまな用途別のテンプレートが選べるようになっています。

これから作成するホームページに近いテンプレートを選択してみましょう。ちなみに、ここで選択したテンプレートはあとからでも変更できるので安心してください。

基本的な使い方

Strikinglyでホームページを作成する基本的な流れとしては以下のとおりです。

①テンプレートを選択する
↓
②コンテンツを追加・編集
↓
③サイトの初期設定
↓
④公開

①のテンプレート選択は前章でご紹介したとおりです。

テンプレートを選択すると以下のような編集用エディタがブラウザ上で起動します。

基本的な作業はすべてこのエディタ上で行えるように設計されています。

Strikinglyを使ったメイン作業は②のコンテンツの追加・編集になります。これは、左メニューにある【セクションを追加】ボタンをクリックします。

選択できるコンテンツとしては、ヘッダー・ギャラリー・ブログ・フォーム・スライダー…など、よく使われるものがたくさん用意されています。

これらのコンテンツを自由に組み合わせて、自分のイメージするホームページを作成していくことができるわけです。そのため、テンプレートの中身をガラッと変えてしまうことも可能になります。

③の初期設定というのは、ホームページの名前や言語設定、ファビコン、シェア用画像、Googleアナリティクスなどの基本設定になります。また、無料プランの場合ドメインが【****.mystrikingly.com】になるので、****の部分を好きな文字列に変更することもできます。

最後に、④の公開作業を行えばホームページをネット上に公開できます。

Strikinglyのポイントをまとめると次のようになります！

個人・法人向けサイトを作る

この章では、一般的な個人・法人サイトを手軽に作成できるサービスについて見ていきましょう。主に、Launchacoを利用した作り方について学んでいきます。

Launchacoの導入方法

【Launchaco】

LaunchacoはWebサイトを構成するコンテンツを自由に組み合わせることができ、専用のウィザードに従ってテキストや画像などのメディアを追加していくだけで作成できるのでとても簡単です。

使い方としては、トップページからアクセスをして目的に合ったカテゴリを選択することから始めます。

Webサイトはもちろんのこと、スマホアプリの公式ページやレスポンシブなサイトなども同じように作成することができます。
最終的に、ホームページを公開する段階になったときに無料のユーザー登録が必要になるので覚えておきましょう。

基本的な使い方

Launchacoでホームページを作成する基本的な流れとしては次のようになります。

①カテゴリを選択する
↓
②コンテンツを追加
↓
③ウィザードに従って編集
↓
④公開

①のカテゴリ選択は前章で紹介した通りになります。

②のコンテンツを追加する場合は、編集用エディタに表示されている各項目の中から好きなアイテムを選択していきます。

例えば、チェックリスト、FAQ、メールフォーム、フッター…など、一般的なホームページに必要な要素は提供されています。

コンテンツを追加すると専用のウィザードが表示されるので、その通りにテキストや画像などのメディアを挿入していきます。

例えば、FAQなら質問と回答を必要なだけ作成したり、メールフォームなら送受信の設定をMailChimpなどと連携して行うことが可能です。

また、トップページだけでなく【About】ページなど別の新規ページも作成できるので、企業サイトなどにも活用できるでしょう。

最後に④の公開設定を行えば、手軽にホームページを公開することができるわけです。

Launchacoのポイントをまとめると次のようになります！

ネットショップを作る

この章では、オンラインでショップサイトを作成する場合について見ていきましょう。主に、BASEを活用したショップサイトを作る方法について学んでいきます。

BASEの導入方法

【BASE】

BASEを利用すると、誰でも簡単にオンラインで利用できるネットショップを作成することができます。商品管理や顧客管理はもちろんのこと、注文の受け答えの自動化、細かい送料の設定、豊富な決済方法をすぐに実現できるようになります。

また専用の拡張機能が提供されており、ボタン１つで簡単にショップへインストールできるのも大きな特徴です。

例えば、顧客とのチャット機能、商品検索、ブログ、クーポン生成、メールマガジン…など、いずれも無料でインストールできるのは大きな魅力でしょう。

また、BASEは専用のスマホアプリも公開されており、ショップを作成すると専用アプリの検索にも引っ掛かるようにできるので認知度も上がりやすいわけです。

基本的な使い方

BASEでネットショップを作成する基本的な流れとしては次のようになります。

①ショップの初期設定を完了する
↓
②商品の登録
↓
③ショップデザインを決める
↓
④拡張機能を追加・編集
↓
⑤公開

①ショップ初期設定は、ショップ名や特定商取引法の記入に決済方法の選択などを行います。

②商品の登録は無制限にできるので、商品名や写真・価格・送料・備考などを1つずつ登録していきましょう。

③ショップデザインは用途に合わせたテンプレートを選択することで、簡単に見た目を大きく変更することができます。

また、拡張機能を利用すればHTML / CSSもいじることが可能です。

④拡張機能については、前章でご紹介した通りですがAPIも公開されているので申請すれば独自機能を拡張することもできます。

最後に⑤公開設定をすればいつでもネットショップを開設して公開できます。

BASEのポイントをまとめると次のようになります！

まとめ

今回は、ホームページを作るための便利なWebサービスを用途別にご紹介しました。

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！