【STEP1】自分のサイトを作ろう
いよいよ、自分自身のホームページを作っていきます。
まず自分のサイトを完成させることで、OLTANAの操作に慣れるだけでなく、今後クライアントに提案する際に「自分の実例」として見せられるポートフォリオにもなります。
OLTANAって、こんなに簡単に作れるんだ！とわかっていただけますよ！
ちなみに、イメージとしてこんなホームページを作っていきます！
OLTANAで作られたWEB制作のホームページの例
https://oltana.style/no004/demo3/
WEB制作のホームページの作り方【全手順】
では、さっそくホームページの開設を１から始めます。
難しい単語も出てきますが、動画付きでゆっくり解説しますね。
【STEP1】レンタルサーバーを契約する
❶ ConoHa WINGの公式サイトにアクセス
では、オルタナを動かすための「サーバー」を契約します。
初めての人にもわかりやすいように、写真をたくさん載せて解説しますね。
では、ConoHa WINGの公式サイトにアクセスし、アカウントを作成に進みます。
❷ アカウント登録
ログインのメールアドレスとパスワードは、忘れないようにメモしましょう。
❸ ベーシックプランを選択
登録が完了したら、管理画面で「サーバー追加」を選択し、サーバープランを選びます。最初は「ベーシックプラン」でも十分です。
❹ 初期ドメイン・サーバー名の設定
初期ドメインとサーバー名に関しては変更不要です。
❺ 独自ドメイン設定
WordPressかんたんセットアップの「利用する」 > 「新規インストール」>「独自ドメイン設定」まで進みましょう。
この独自ドメイン設定で、ホームページのURLを決定します。
❻ サイト名の設定
「作成サイト名」にはホームページの名前を入力しましょう。後から変更も可能です。
❼ WordPressユーザー名・パスワードを設定
WordPressユーザー名・WordPressパスワードを設定します。
❽ WordPressテーマの選択
ここではWordPressテーマを「購入しない」にチェックをいれて「次へ」進みましょう。
❾ 個人情報・決済情報を入力していく
あとは個人情報（氏名・住所）と決済情報（クレジットカード情報）を入力していくことでサーバー取得が完了します。
サーバー取得が完了
購入が完了するとサーバーに自動ログインして、このような画面に飛ばされます。
SSL化を完了させる
❶ サイトセキュリティ設定で「SSL」を「ON」に
ConoHa WINGの管理画面で「サイト管理」>「サイトセキュリティ」に進むと「独自SSL」の項目があります。この無料独自SSLの利用設定を「ON」にしてください。
⚠️ ONにしてから利用可能になるまで数時間かかる場合があります。
❷ WordPressにログインする
WordPressの管理画面を開きましょう。
管理画面の開き方は、「〇〇.com/wp-admin」のように、ホームページURLの後ろに「/wp-admin」をつけてページを開いてください。
Googleのタブに「〇〇.com/wp-admin」のように入力
（〇〇はあなたのホームページのURL）
すると、以下のような画面が開きます↓
ここで、先ほどConoHa WINGで登録したWordPressユーザー名・パスワードでログインしましょう。
❸ WordPress管理画面の「http」を「https」に変更
WordPressの管理画面にログインして、左メニューの「設定」 > 「一般」に進みます。
「WordPress アドレス (URL)」と「サイトアドレス (URL)」の欄のがありますので「http://」を「https://」に書き換えてください。最後に「変更を保存」のボタンを押しましょう。
再ログインが促されますので、これでサイトのSSL化が完了です。
【STEP２】OLTANAを購入してダウンロード
このページを読んでいる方は、オルタナを購入していると思います。一応確認しとして見ておいてください。
❶ OLTANA公式サイトへ
❷ 購入ボタンに進む
購入ページを下にスクロールして「テーマを購入する」のボタンを押しましょう。
❸ 会員登録して購入
購入ボタンを押すと、会員登録を促されます。
OLTANA会員サイトに登録する「メールアドレス」「パスワード」を入力しましょう。
❹ 決済画面に進む
決済画面に進みますので、カード情報を入力して「支払う」のボタンから購入しましょう。
❺ テーマのダウンロード
テーマ購入後、以下の手順でダウンロードを進めましょう。
【STEP3】初期設定を進める
❶ WordPressにログイン
WordPressの管理画面を開きましょう。
管理画面の開き方は、「〇〇.com/wp-admin」のように、ホームページURLの後ろに「/wp-admin」をつけてページを開いてください。
Googleのタブに「〇〇.com/wp-admin」のように入力
（〇〇はあなたのホームページのURL）
すると、以下のような画面が開きます↓
ここで、先ほどConoHa WINGで登録したWordPressユーザー名・パスワードでログインしましょう。
この時に入力したパスワードを使いましょう。
❷ 外観 > テーマに進む
WordPress管理画面を開いたら「外観」>「テーマ」に進みます。
❸ 新しいテーマを追加
「新しいテーマを追加」のボタンをクリックします。
❹ OLTANAのテーマファイルをアップロード
「テーマのアップロード」>「ファイルを選択」します。
ここで、先ほどダウンロードしていた「oltana-001.zip」といったファイルを選択します。
❺ テーマを有効化
テーマをインストールが完了したら「有効化」をします。
❻ テーマの初期デザインが確認できる
トップページを開くと、OLTANAの初期デザインが適用されていることが確認できます。
ライセンス認証を済ませる
WordPressテーマ「OLTANA」は、1テーマあたり1サイトのライセンス認証を採用しています。
❶ サイトの「カスタマイズ」を開く
まずは、WordPressのログインバー上部にある「カスタマイズ」を開いてください。
❷ 「ライセンス認証」を開く
続いて、「カスタマイズ」>「ライセンス認証」の項目に進みます。
❸ ライセンスキーの入力場所が見つかる
すると、ライセンスキーの入力場所が見つかります。
❹ OLTANAマイページにログイン
OLTANAマイページにログインして、「ライセンスキー」の「コードをコピー」します。
❺ ライセンスキーをコピペする
先ほどコピーしたライセンスキーのコードを、右クリックで「貼り付け（ペースト）」して「ライセンス認証する」をクリックします。
❻ ライセンス認証が完了して、サイト編集が可能に
これですべてのOLTANA機能が開放されて、ホームページ編集が可能になりました。
DEMOデザインに変更する
OLTANAは、DEMOデザイン（見本サイト）をそのまま使うことができます。
❶ サイトの「カスタマイズ」を開く
WordPressのログインバー上部にある「カスタマイズ」を開いてください。
❷ OLTANAインポートの項目に進む
「カスタマイズ」>「OLTANAインポート」に進みます。
❸ 欲しいデザインに変更する
理想のホームページと近いDEMOサイトを選んで「このデザインに変更」をクリックします。
❹ デザイン変更完了
選択したDEMOのデザインがすべて反映されます。
あとは写真・文章を、本番のホームページ用に置き換えしてご利用ください。
かなり見た目が整ってきましたね
【STEP4】ホームページを完成させよう
この先はどうやっていけばいいんだろう？
ちゃんと解説を続けますのでご安心くださいね！
では、OLTANA（オルタナ）のホームページを完成させていきましょう。
【１】カスタマイズに入ってデザイン編集
オルタナは「カスタマイズ」に入ってデザインを編集しますよ。
【２】文章を編集する
- 編集したい場所の青ペンマークを触る
- 文章を変える
この繰り返しで、ホームページの編集ができていきます！
編集したいところのペンを触ったら変えられるんですね！
【３】写真を変更する
ホームページの写真を変えるには、どうすればいいの？
- 編集したい場所の青ペンマークを触る
- 文章を変える
この繰り返しで、ホームページの編集ができていきます！
【４】ロゴを変更する
- 編集したいロゴの青ペンマークを触る
- ロゴをアップロードする
こうすると、ロゴを変更できます。
【５】色を変更する
ホームページの色は変えられるんですかね？
- 「基本設定」に入る
- テーマカラーを変更
こうすると、サイトの色味を変更できますよ。
【6】営業時間を変更する
営業時間はどうやって変更すればいいでしょうか？
- 営業時間表の青ペンマークを触る
- 時間を変更していく
こうすると、時間変更ができますよ。
【7】電話番号を変更する
電話番号も同じやり方で変更していけばいいですか？
【8】ボタンを変更する
お問い合わせのボタンはどうやって設定すればいいでしょうか？
【9】写真と文章をどんどん変更していく
この調子で、どんどんホームページを変更していきましょう。
- サービス内容
- 特徴
- ご利用の流れ
- よくあるご質問
といった項目を１つずつ入力して完成させていきます。
【10】アクセス情報にGoogleマップを載せる
ボタンを押して、Googleマップを表示させるにはどうすればいいですか？
【11】お知らせを書く
お知らせを書きたいのですが、どうすればいいでしょう？
【12】ブログを書く
ブログはどこで書いたらいいですか？
ブログは「投稿」から作成できますよ↓
【13】お問い合わせページを作る
お問い合わせフォームを置きたいんですが、どうすればいいでしょうか？
お問い合わせページの作り方を参考にチャレンジしてみてください。
【14】LINE・SNSと連携する
LINE・SNSはどうやって載せるんですか？
QRコードなどを直接載せたい時はどうすればいいでしょうか？
その場合のやり方は、こちらの記事にまとめているので参考にしてください。
これでホームページが完成しましたね！
よくある質問
ホームページをつくるうえで、よくある質問をまとめたのでご確認ください。
①文章はどのように作成していけばいいですか？
結論、「ヒアリング管理シートの内容を元に、デモページの文章を参考にしながら作成する」がベターですね。
ホームページ制作をスムーズに進めるためには、最初に「どんな情報をサイトに載せるか」を整理しましょう。
ヒアリング管理シートを用意したので、これを埋めることで必要な情報を漏れなく準備できます。
お役立ちシートの中に、ヒアリングシートがありますよ！
- ヒアリング管理シートのコピー方法
-
OLTANA用ヒアリング管理シート（Googleスプレッドシート）をクリック
「ファイル」の「コピーを作成」をクリック
「名前」を入れ、「フォルダ」を選択し「コピーを作成」ボタンを押す
コピー完了
※Googleスプレッドシートを使用するためには、Googleアカウントを作成してください。
- 使い方のイメージ
-
上から順番にヒアリング管理シートを記入していきましょう。
例えば、アクセスに掲載する住所を記入していきます。
このシートを見ながらOLTANAの編集画面に入力していけば、必要項目を漏れなく反映できるようになります。
このように、シートに情報をまとめておけば「どの項目に何を入れるか」がわかりやすくなり、制作作業がスムーズに進みますね。
👉文章の作成方法の詳細は、こちらの記事をご覧ください。
②テーマはどのように決めたらいい？
- 業種に合わせて選ぶ（王道）
士業 → 落ち着いた信頼感のあるデザイン
Web制作・クリエイター → 動きのあるデザインで個性を出す - 好きなデザインで選ぶ（自由）
「このテーマ、かっこいい！」
「色味や雰囲気が自分好み」 - 目的に合わせて選ぶ（成果重視）
会社紹介・名刺代わりに → シンプルに完結するテーマ
イベントやキャンペーン推し → LP型でアピール度が高いテーマ
OLTANAには業種別のデモカタログが用意されており、クライアントワークを想定したテーマから、自分の好きなデザインまで幅広く選ぶことができます。
実際に、私は好きなデザインで選びました！
悩んでしまうところではありますが、ここはサクッと決めちゃいましょう！
③ロゴ画像はどのように準備するべき？
- 自作する（簡単に）
Canva：テンプレートから選ぶだけでおしゃれな文字ロゴが作れる
Adobe Express：無料でシンプルなロゴが作れる - 外注する（手軽に）
ココナラ：数千円〜でオリジナルロゴを依頼できる
クラウドワークス：多くのデザイナーから提案を受けて選べる
- すぐにサイトに当て込みたい場合は、Canvaで文字ロゴを作るだけで十分。
- 本格的に使いたくなったら、ココナラやクラウドワークスで依頼すればOK。
👉ロゴの詳しい制作方法は、こちらの記事をご覧ください。
④画像はどうやって準備する？
- 自分で撮影する
スマホでも十分きれいに撮れます。 - フリー素材を使う
写真AC、Unsplash、O-DANなどのサイトから無料で使える素材を探せます。
👉詳しくは、こちらの記事をご覧ください。 - AIを活用する
CanvaやMidjourneyを使えば、イメージに合わせた画像を生成することも可能です。
👉詳しくは、こちらの記事をご覧ください。
⑤公開前のチェック項目はある？
- SSL化（セキュリティ設定）
- URLが https:// で始まっているか
- ブラウザに「保護された通信」と表示されているか - スマホ表示の確認
- スマホで開いたときにレイアウトが崩れていないか
- 文字やボタンが小さすぎないか
- お問い合わせボタンが押しやすいか - 文章・リンクチェック
- 誤字脱字がないか
- リンクが正しく開くか（内部リンク・外部リンク）
- お問い合わせフォームが正常に届くか - 画像の確認
- サンプル画像や不要な画像が残っていないか - SEO初期設定
- 各ページに「タイトル」と「説明文」が設定されているか
- 主要な見出しにキーワードが入っているか
- 画像に代替テキスト（alt）が入っているか
初心者でもすぐに確認できる、基本ポイントをまとめました。
納品チェックシートを用意したので、ぜひご活用ください。（お役立ちシートの中に入っています！）
納品前チェックシートは、こんなのがあるんだ、くらいで現時点ではOKです！
納品前チェックシートは、次章の応用編で詳しく解説しますね。
自分のサイト制作編まとめ
これで 「自分のサイトをゼロから完成させる流れ」 を体験できました。
一連の流れをまとめます。
一度やってみると「意外とシンプルに作れる」と実感できたのではないでしょうか。
この経験がそのまま「案件対応の練習」になりますし、自分のサイトはポートフォリオとしても活用できます。
👉 ここまで終えたら、いよいよ次はクライアント案件を想定した制作スキルに進んでいきましょう。
困ったら相談してみよう！
- 相談先→
