スライドショースライドショースライドショー

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


初心者でも手軽にホームページを作ってみたい
効率よくホームページを作れるサービスを活用したい
用途に合わせたWebサービスの使い方を知りたい

いざホームページを作ることを考えたときに、プログラミング・画面レイアウト・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を利用すると、誰でも簡単にオンラインで利用できるネットショップを作成することができます。商品管理や顧客管理はもちろんのこと、注文の受け答えの自動化、細かい送料の設定、豊富な決済方法をすぐに実現できるようになります。

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

拡張機能の画面

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

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

基本的な使い方

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

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

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

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

商品登録画面(1日に登録できる商品数は1000件まで)

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

デザインの編集画面

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

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

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

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

  • 無料でネットショップを作成&公開できる
  • 直感的で誰でも分かりやすい操作性
  • 拡張機能により細かいカスタマイズが可能
  • 専用のスマホアプリから検索される可能性もあり

まとめ

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

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

  • ランディングページを手軽に作るにはStrikinglyを使う
  • 個人サイト・企業サイトにはLauchacoを使う
  • ネットショップを作成するにはBASEを使うと効率が良い

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

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

cta_under_btn

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説