自分でウェブサイトを作成してみた(ConoHa Wing + WordPress + Swell)

    以下は「合同会社加勢コンサルティング」のウェブサイトを作成した時の記録です。このウェブサイト(加勢司法書士事務所)もおおむね同じ手順で作成しています。

    実際に手を動かしながらの方がわかりやすいかもしれません。

    目次

    出来上がりのイメージを想定

    ミニマムなウェブページの構成は下記のような感じになると思います。以下もこのミニマムなウェブページを作成することを想定した説明になります。

     ホーム

     事業概要

     会社概要

     お問い合わせ

     プライバシーポリシー

    最初の時点でなんとなくページ構成のイメージを持っておくと、その後の作業も進めやすいです。

    費用

    下記の費用がかかります。初期費用はおおむね3万円となります。

    ※ドメインは無料のものを使用する前提です(サーバー契約の過程で取得可能。詳細は下記。)

    必要なもの費用説明
    サーバー
    ConoHa Wing Wingパック
    ベーシックプラン 12か月の場合>
    約11,300円/年ウェブサイトのデータを保管しておくサーバの契約が必要。
    契約の過程で「ドメイン取得」や「ワードプレス」のインストールも可能。
    ウェブテーマ
    SWELL

    17,600円
    (税込)
    サイトのデザインやスタイルを制御する拡張機能(テーマ)。
    支払は一度だけ。
    その後ずっと利用可能。

    「ワードプレス」を使う前提ですが、「ワードプレス」は無料です。

    なおワードプレスとは、ブログやWebサイトを作ることができるソフトウェアで、コンテンツの作成や更新を簡単に行うことができます。

    必要な作業

    大まかにいえば
    「サーバー契約」「SWELL購入」
    「ワードプレス設定」「各ページの作成」 

    という流れになります。

    サーバーの契約 ※契約過程でドメイン(〇〇〇.comなど)取得&ワードプレスのインストール

    この段階で行うこと

     サーバーの契約(ウェブサイトのデータを保管するため)

     サイトのアドレス(住所)となる「ドメイン(〇〇〇.comなど)」取得 

     「ワードプレス」のインストール

    サーバー選定

    私は処理速度と費用面からConoHa Wingを選択しました。

    他のサービスが気になる方はエックスサーバー
    ロリポップあたりが競合になるので確認してみて下さい。

    サーバー申込(同時にドメイン取得・ワードプレスのインストール)

    お申し込み⇒初めてお申し込みの方から申込手続をします。

    レンタルサーバーと無料独自ドメインがセットになった「Wingパック」ベーシックプランを12か月単位で契約するのがおすすめです。

    詳しい手続についてはこちらが参考になります。

    https://support.conoha.jp/c/easysetup/

    契約内容・ドメイン・ワードプレスに関する入力欄は迷うところもあるかもしれません。下記のとおり入力していきます。

    入力項目入力内容
    契約期間12ヶ月
    料金タイプWINGパック
    プランベーシック
    初期ドメイン任意の文字列
    WordPressかんたんセットアップ利用する
    作成サイト名サイト名を任意の内容で入力します。
    ※後からワードプレスダッシュボードにて変更可能
    作成サイト用新規ドメイン希望するドメイン名を入力します。
    ※無料独自ドメインとして取得できるドメインになります
    WordPressユーザー名任意の文字列。
    ※後からワードプレスへログインする際に必要な情報
    WordPressパスワード任意の文字列。
    ※後からワードプレスへログインする際に必要な情報
    WordPressテーマここでは選択しなくてもOK
    ※後に購入する「SWELL」を使用するため

    この後決済や認証を経てConoHa Wingの申込手続は完了です。

    最後の画面は後でワードプレスにログインするときに必要になるので、控えをとっておきます。

    Conoha Wing ウェブサイトより引用

    「SWELL」を購入する

    この段階で行うこと

     「SWELL」購入・ダウンロード

    「SWELL」はサイトのデザインやスタイルを制御する拡張機能(テーマ)の一つです。テーマは無料のものもありますが、サイトをカスタマイズするのに専門知識が必要になります。

    ここではカスタマイズが簡単で見栄えのする「SWELL」を購入します。

    なお、このサイトもSWELLを使用して作成しています。「SWELL」はこのサイトでも使用していますが、素人でも視覚的にカスタマイズが可能で便利です♪

    こちらから購入できます。

    決済後、会員登録をする流れになりますので、登録・ログインをするとZIPファイルフォルダーの形でダウンロード可能になります。

    SWELL本体とSWELL child (子テーマ)をダウンロードし、PCに保存しておきます。

    下記サイトも参考にして下さい。

    https://webrent.xsrv.jp/how-to-buy-swell/

    ワードプレスにログインし、必要な設定をする

    この段階で行うこと

     ワードプレスサイトにアクセス、ログイン

     SWELLデータのアップロード・子テーマの有効化

     プラグイン追加

     サイト名・キャッチフレーズ設定

    実際やってみると簡単です

    ワードプレスサイトにアクセス、ログイン

    Conoha Wing ウェブサイトより引用

    サーバーの契約の際に保管した上記に記載されたサイトURLにアクセスし、ユーザー名、パスワードでログインをします。

    ワードプレス ログイン画面

    下記のような画面(ダッシュボード)が出てきます。こちらから各種設定をしていきます。

    ワードプレス ダッシュボード

    SWELLデータのアップロード・子テーマの有効化

    「ダッシュボード」の「外観」-「テーマ」から、「新しいテーマを追加」をクリックして、ダウンロードしたSWELL、SWELL CHILDのZIPファイルを追加(PCからアップロード)します。

    その後、「SWELL CHILD」の「有効化」をクリックします。(下記はZIPファイル追加・有効化されている状態)

    プラグインを追加する

    「プラグイン」とは、機能やセキュリティを補完するソフトウェアを指します。

    「ダッシュボード」-「プラグイン」-「新規プラグインの追加」からプラグインを追加することができます。

    ここではまず、SWELLの推奨プラグインを、「プラグインの検索」から検索してインストールしておきましょう。

    SWELL
    推奨プラグインと非推奨・不要・注意すべきプラグインについて | WordPressテーマ SWELL WordPressテーマ「SWELL」ではどんなプラグインを使用すればいいのか、推奨されるもの・推奨されないもの・基本的に使わなくていいもの・使うなら気をつけて欲しいもの に...

    サイト名・キャッチフレーズの設定

    「ダッシュボード」-「設定」-「一般設定」にて、サイト名・キャッチフレーズを設定しておきます。

    このほか、気になるようであればデフォルトで入っている投稿記事サンプル(Hello World)は、ダッシュボードの「投稿」メニューから削除しておきましょう。
    ※後で削除しても大丈夫です。

    各ページを作成する

    この段階で行うこと

     各ページのベース・枠組みの作成

     各ページのデザイン

    ここでは(私が一番わからなかった部分である)各ページのベース・枠組みの作成の部分について主に触れたいと思います。

    まず最初にページの土台を作成しましょう。
    いったん土台ができてしまえば、一番楽しい作業であるページデザイン・作りこみに入ることができます。

    各ページのベース・枠組みの作成

    1.トップページ作成・トップページ設定

    下記の手順でトップページとなるページを作成します。(中身は後で編集します。)

    ① 「ダッシュボード」-「固定ページ」-「新規固定ページを追加」

    ② タイトルに「home」と記入し、公開

    ①「ダッシュボード」-「固定ページ」-「新規固定ページを追加」
    ②タイトルに「home」と記入し、公開

    今作成したページをトップページに設定するため、下記の作業を行います。

    ① 「ダッシュボード」-「外観」-「カスタマイズ」

    ② 「WordPress設定」をクリック

    ③ ホームページとして「home」を選択し公開

    ①「ダッシュボード」-「外観」-「カスタマイズ」
    ②「WordPress設定」をクリック
    ③ホームページとして「home」を選択し公開
    2.「事業概要」「会社概要」「お問い合わせ」「プライバシーポリシー」用ページ作成

    それぞれの土台となるページを作成していきます。(中身は後で編集します。)

    ① 「ダッシュボード」-「固定ページ」-「新規固定ページを追加」

    ② タイトルに「会社概要」と記入、URLを「information」(URLになるので英字で)として公開

    ① 「ダッシュボード」-「固定ページ」-「新規固定ページを追加」
    ② タイトルに「会社概要」と記入、URLを「information」(URLになるので英字で)として公開

    同様に、

    「事業概要」(URL例:service)

    「お問い合わせ」(URL例:contact)

    「プライバシーポリシー」(URL例:privacypolicy)のページを作成します。

    3.ヘッダー(グローバルナビ)・フッターメニュー設定

    トップページ上下の「メニュー部分」を設定します。

    ここの部分です

    ① 「ダッシュボード」-「外観」-「メニュー」

    ② 編集するメニューを選択(ない場合は作成)⇒メニュー項目を追加(ページ一覧から)⇒メニュー設定で表示位置を指定(当サイトはヘッダーは「グローバルナビ」・フッターは「フッター」に設定)⇒メニューを保存

    ①「ダッシュボード」-「外観」-「メニュー」
    ②編集するメニューを選択(ない場合は作成)⇒
    メニュー項目を追加(ページ一覧から)⇒
    メニュー設定で表示位置を指定(当サイトはヘッダーは「グローバルナビ」・フッターは「フッター」に設定)⇒メニューを保存

    各ページのデザイン

    以上の作業で各ページのベースはできましたので、いよいよデザインをしていきます。

    一番楽しい作業ですがこだわりすぎると沼にはまります・・・。

    SWELLを使ったウェブページの作りこみはずばりSWELLの使い方を学ぶ、とイコールになりますので、SWELLの公式及び解説記事がわかりやすいです

    なお、私が作成にあたり参考にしたのは下記の各ページでした。

    画像の準備

    ページには文字だけでなく、イラストや写真があると見やすいですし、目立ちます。

    インターネットに掲載されているものを使う場合は、著作権に気を配りましょう。 著作権フリーのサイトからのダウンロードがおすすめです。

    バナーやロゴを自作したいときはCanvaがとても役に立ちます。

    私もほとんどのロゴやバナーはCanvaで作成しています。
    (一部Powerpointで作成しているものもあります)
    Canvaは私のような素人でも直感的に操作できるうえに、たくさんの機能が無料で使えてありがたいです。

    PC・スマートフォンでの見た目チェック⇒完成

    パソコンの他、スマートフォンでもどのように見えるか確認して、完成です!

    • URLをコピーしました!
    • URLをコピーしました!
    目次