「食」に特化したグラフィック・Webデザイン
「食」に特化したグラフィック・Webデザイン
ホームページを作るには？
①レンタルサーバーを契約する
いろいろなレンタルサーバーがあってどこを選んで良いかわからない・・・。
ホームページを作る時にどなたでも最初に悩むポイントです。
おすすめサーバーで検索すると、だいたい次の３社が上位にでてきます。
が、ここでは初心者におすすめのロリポップ「ハイスピードプラン」で説明します。
②ドメインを取得する
※独自ドメインを取得します。
※欲しいドメインを検索しますが、ない＝もう既に使用されている場合取得できません。
※名前を変えて再検索–こちらは取得できそうです。
ロリポップハイスピードプランの場合、１年以上の契約で「.com」や「.jp」など永続的に無料で取得できます。
２個目も無料ですが、とれるレジストリに制限があります。
(2個目で無料となるドメイン）.blog / .online / .space / .website / .tech / .site / .fun / .tokyo / .shop
※無料であればどのドメインを選んでも良いですが、できれば人気の高い「.com」や「.jp」で、2個目は個人のブログ用に使うものを選んでください。
※有料でも￥100以下の安価なものもありますが【注意！】2年目から更新料が跳ね上がるものもあります。マルチドメインが使えてもむやみにドメインを増やすのはやめましょう。
③Wordpressをインストールする
1）ロリポップユーザー専用ページにログインして、「サイト作成ツール」→「WordPress簡単インストール」を選択します。
2）インストール先：サイトURL・利用データベースを入力します。
※サイトURLはあらかじめ登録したURLになっているか確認してください。複数登録している場合は選択BOXにて選んでください。
※データベースは表示されているもの又は「新規自動作成」にて作成してください。複数の独自ドメインを設定する場合、ひとつのデータベースでも、それぞれ作成しても設定可能です。（少々難しいのですが）ひとつのデータベースであまり多くのサイトを作るとパフォーマンスが落ちます。それぞれのデータベースを作成する際はユーザー管理画面の「サーバーの管理・設定」→「データベース」にて割り振られたデータベース名とパスワードを確認して控えておいてください。
3）WordPressの設定
※サイトのタイトル、ユーザー名は好きなものでかまいません。abcde.comというドメインなら「abcde」など・・・。ユーザー名はWordPressのログイン時にインプットします。半角英数字（+指定の記号）が使用できます。
※パスワードは不正ログインを防ぐために極力複雑なものに設定してください。
※LiteSpeed Cache チェックしてください。高速Webサーバーソフト「LiteSpeed」で使用できるキャッシュ機能です。（これがハイスピードプラン以上の目玉のひとつです）
※最初に設定するWordPressテーマ ここでは「WordPressのデフォルトテーマ」を選択してください。Cocoonの設定は後からでもできます。ここでは有料テーマ「Swell」を設定する前提で進めます。
※設定が完了したら「入力内容確認」→確認後→「承諾する」にチェック→「インストール」の順に進めます。
※上記で設定したユーザー名・パスワードをインプットしてログインします。
※パスワードを忘れた場合、「パスワードをお忘れですか？」をクリックすると設定したメールアドレスあてにパスワード再設定用URLが送られてきます。
※この画面がでたらWordPressのインストールは完了です。
※次回からダッシュボードを開くには「URL(〇〇〇〇〇.com)/wp-admin/」をアドレスバーにインプットするとログイン画面が出てきます。
④テーマをインストールする
※WordPressのテーマとは？
ワードプレスは世界で一番使われているCMS（コンテンツ・マネジメント・システム）です。複雑なコーディングやプログラミングの知識がなくてもWebサイトが構築・編集・追加などの運用ができるシステムです。ワードプレスのテーマとは更に簡易に高度なレイアウトやSEOなどを可能にするサポートツールです。テーマにはワードプレスのデフォルトテーマである「Twenty-Twenty」シリーズや高いカスタマイズ性を有する「Cocoon」など、使いやすい無料テーマもありますが、オリジナリティのあるカスタマイズをしていくためにはある程度、HTML/CSS/PHPなどの知識が必要となります。
ここでは初心者でも簡単にデザイン性が高く、追加編集もしやすいWebサイトが作れる有料テーマ「SWELL」の設定方法を説明します。
1）有料テーマ「SWELL」を購入する。
→ https://swell-theme.com/ SWELL公式ダウンロードページ
※「購入する」又は「DOWNLOAD」をクリックします。
※利用規約に同意後、「SWELLを購入する」をクリック→カード情報入力へ遷移します。
※カード情報入力後、「￥17,600を支払う」をクリック
※「SWELLをご購入いただきありがとうございます」というタイトルのメールが送られてきます。
このメールの「SWELLダウンロードリンク」をクリックすると「.zipファイル」がダウンロードされます。
2）次にSWELL会員サイトに登録します。
※会員サイト「SWELLER’S」に登録しておくと、無料サポートが受けられます。また、次のサイトに導入する時はこのサイトから設定できます。（以降、何回でも導入可能です。追加料金はかかりません。）
※ナビゲーションの「フォーラム」をクリックします。
※会員登録をクリックします。
※新規会員登録ページのユーザー名、メールアドレス、パスワードをインプットします。
利用規約に同意後、「登録する」をクリックします。
※会員登録はできました。「フォーラム」→「ログイン」→メールアドレス・パスワード・CAPTCHAコードをインプットすると会員マイページにログインできます。
3）WordPressにSWELLをインストール
SWELL購入時ダウンロードしたzipファイルをWordPressにインストールしますが、同時に子テーマもインストールしてください。子テーマのzipファイルは会員マイページをスクロールして下の方「SWELL製品ダウンロード」内からダウンロードしてください。
※子テーマはカスタマイズをした時に必要となります。親テーマでもカスタムはできますが、SWELLのバージョンアップの際に元にもどってしまいます。子テーマはCSSやJSのカスタムデータを残していくために利用します。
※次にWordPressにログインしてダッシュボードの「外観」→「テーマ」をクリックします。
※「新しいテーマを追加」→「ファイルを選択」→パソコン内のダウンロードフォルダから「SWELLのzipフォルダを選択」→「今すぐインストール」をクリック
※同様に子テーマ「SWELL_CHILD」もインストールします。
※SWELL CHILDを有効化します。次に「SWELLユーザー認証」をクリックします。
※SWELLのインストールが完了しました。
⑤プラグインを設定する
※プラグインとは？
プラグインはWordPressの機能を拡張するツールです。無料のものだけで約60,000件あります。
・セキュリティ対策／強化・バックアップ機能・アクセス解析・SEO対策・スパム対応・問い合わせフォームなど種類も豊富ですが、テーマと相性の悪いもの、プラグイン機能が重複するものなど導入するプラグインを選択する必要があります。また、導入数をやたらに増やすのはパフォーマンスを低下させたり管理負荷を増大させることになります。テーマ「SWELL」を導入した際には以下を参照してください。
1）プラグインのインストール方法
ここではお問合せフォームの「Contact Form7」のインストールを説明します。
※管理画面の「プラグイン」→「新規プラグインを追加」をクリックします。
※キーワード欄に「Contact Form7」をインプットするとプラグインの候補が表示されます。
※「Contact Form7」を選んで「今すぐインストール」をクリックします。
※有効化をクリックします。
※「インストール済プラグイン」で「Contact Form7」がインストールできているか、確認してください。
2）Contact Form7を設定します。
※「インストール済プラグイン」画面で「Contact Form7」の左下の「設定」をクリックします。
※デフォルトで「コンタクトフォーム1」となっているページをクリックします。
※タイトルを「contact_1」に変えて保存し、ショートコード「”[contact-form-7 id=”126d739″ title=”contact_1″]”」をコピーしておきます。
※次に管理画面の「固定ページ」から「新規固定ページを追加」をクリックし、固定ページを開きます。
※タイトルをインプット（ここでは同じ「contact_1」としておきます。タイトル下のテキストエリアを選択後、左上の「＋」マークをクリックしてブロックエディターを開きます。
※スクロールしてウィジェットグループの中のショートコードを選択します。見つからなければ検索してください。
※先ほどコンタクトフォーム編集画面にてコピーした「ショートコード」を貼り付けます。
※「固定ページ」を表示するとデフォルトの問い合わせページが作成されています。「Contact Form 7」の設定ブログはいろいろありますので、参照してカスタマイズしてください。（コンタクトフォームの編集画面にてカスタマイズします）
⑥セキュリティ対策ツールを設定する
1）reCAPTCHAv3を設定します。
※管理画面の「お問い合わせ」→「インテグレーション」から「reCHAPCHA」を選びます。
※https://www.google.com/recaptcha/admin/create からリキャプチャのサイトにアクセスします。
※グーグルアカウントでログインが必要です。（アカウントをお持ちでなければ作成する必要があります）
※ラベル→ 任意でインプット（ドメインと同じが良いと思います）
※reCHAPCHAタイプ → 「スコアベース（v3）」を選択
※ドメイン→ https://等は不要です。（例：abcde.com）
※オーナー → ログインしたアカウントのアドレスが表示されます。
※利用条件に同意して「送信」
※表示された「サイトキー」「シークレットキー」をそれぞれコピーして先ほど表示したサイトの「外部APIとのインテグレーション」にペーストします。
2）その他のセキュリティ対応
※WordPressにデフォルトでインストールされている「Akismet」はreCHAPTCHAと同じ様な機能（スパム対策）を持っていますが、無料版が商用利用では使えません。（自分の店舗や会社の紹介HPが商用利用か？微妙な場合もあるかもしれませんが、削除しておいた方が良いと思います）
※プラグインの「Wordfence Security」（無料版）がおすすめですので、是非、インストールしてください。
※Wordfenceに付帯しているログイン2要素認証「2FA」はログインパスワードを突破しようとする攻撃に有効です。ただし、reCHAPTCHAとの相性が悪く、FTPファイル（wp_config）を書き換える必要があります。熟知している人に指導を仰いだ方が良いと思います。
⑦デザインを作成する
※通常のデザインを作成する手順
1）ディレクトリマップ作成
2）サイトマップ作成
3）ワイヤーフレーム作成
4）デザインカンプ作成
1）ディレクトリマップ
| No. | 第Ⅰ階層 | 第２階層 | URL | |
| 1 | Topページ | https:/mekikiweb.com/ | ||
| 2 | 会社(店舗)概要 | 当社について | https;//mekikiweb.com/about | |
| 3 | オーナー挨拶 | https;//mekikiweb.com/profile | ||
| 4 | スタッフ紹介 | https;//mekikiweb.com/staff | ||
| 5 | 商品紹介 | 店販売 | https;//mekikiweb.com/store | |
| 6 | 通販 | https;//mekikiweb.com/online | ||
| No. | 第Ⅰ階層 | 第２階層 | URL |
| 1 | Topページ | https//～ | |
| 2 | 会社(店舗)概要 | 当社について | /about |
| 3 | オーナー挨拶 | /profile | |
| 4 | スタッフ紹介 | /staff | |
| 5 | 商品紹介 | 店販 | /store |
| 6 | 通販 | /online | |
※ディレクトリマップとはあらかじめ各項目の階層を決めておき、ターゲットを導きやすいページ構成を考えていくための指標となります。どのようなURLをどのような階層に置くか考えておけば、ホームページ制作がスムースになります。また、備考に内容の説明や各ページのキーとなるコンセプトを記しておくことでSEO対策につなげていく事も可能です。（例：採用⇒対新卒向け・ベテラン中途採用に対するそれぞれのアプローチなど）
2）サイトマップ
⑧ホームページを作成する
⑨ＳＮＳを連携させる
⑩投稿ページを更新する
待っている人に「実り」を伝えます。
旬の食材の生育状況を心待ちにしている方々に伝える。「Mekiki Web」がサポートします。
生産者様向けSNS連携パッケージ
お客さまへ上質なアプローチを。
お店のキャンペーンや記念日のレシピなどお客さまお一人お一人に心配りした「お知らせ」の方法を一緒に考えます。
飲食店様向けキャンペーンパッケージ
