こんにちは、ブログ運営者のとどけるデザインです。
この記事ではジンドゥークリエイターでシンプル・ナチュラルなデザインのカフェのホームページの作り方を、動画と文章でお伝えします。
この記事では上記の記事の続きです。
まだご覧でない方は上記の記事から読み進めください。
この記事の使い方
※動画の中のホームページのデザインが一部実際と異なる箇所があります（二画面ホームページではなく一画面のホームページを作っていきます）
動画を見ながらジンドゥークリエイターでホームページを作っていきます。
その際、必要な文章や画像は全てこちらで練習用のサンプルをご用意しています。
ダウンロードやコピー＆ペーストでお使いいただけます。
ご自分のお店の文章に変えるだけでオリジナルのホームページが仕上がります。
提供ロゴの画像は、ホームページ作りのためでしたらご自由にお使いいただけます。
作り方の流れ
- 不要なページを全て削除する（トップページだけにする）
- トップページのコンテンツを全て削除する
- 挨拶文を追加する
- お店やサービスの様子が分かる写真を追加する
- アクセス情報を追加する
①不要なページを全て削除する（トップページだけにする）
自動で作成したホームページ内には表示されているページ以外に数ページ作られています。
現在表示されている「ホーム」以外を全て削除します。
動画のように「ホーム」「サービス」「お問合せ」が並んだナビゲーションにカーソルを合わせると、青い「ナビゲーションの編集」ボタンが表示されますのでクリック。
後はホーム以外のページを一つずつ削除します。
カーソルを合わせてゴミ箱のアイコンをクリックしていきます。
最後に右下の「保存」ボタンをクリックします。
②トップページのコンテンツを全て削除する
ホーム画面のコンテンツを一旦全て削除します。
ホームページのコンテンツは文章や画像、カラム、余白など様々なコンテンツを組み合わせて作られています。
一つずつの項目にカーソルを合わせ、ゴミ箱アイコンをクリック、「はい、削除します」をクリックして保存する。
この一連の作業を繰り返しましょう。
③挨拶文を追加する
「コンテンツを追加」ボタンをクリック→「見出し」アイコンをクリックして「中」サイズを選択。
「buzen noteからごあいさつ」とキーボード入力して、保存ボタンをクリックします。
次に「コンテンツを追加」ボタンをクリック→「文章」アイコンをクリック→以下の文章をコピーして貼り付けます。
豊前市の惣菜カフェ「buzen note」のホームページをご覧いただきありがとうございます。
buzen noteは豊前市内の生産者から直接仕入れた新鮮な野菜と海の幸で手作りしたお惣菜を中心に、体にやさしいランチを提供しているカフェです。
ご予約やお問い合わせはお電話(XXX-XXXX-XXXX)でお気軽にどうぞ。
その際文字の大きさやフォントが他と違うようであれば、一旦削除してから「書式なし」でペースとし直します。
Windowsなら「Ctrl」+「Shift」+「V」で、Macなら「command 」＋「shift」＋「 V」でペーストします。
そして次の項目と分けるために「コンテンツを追加」ボタンをクリックして「余白」アイコンをクリックし、保存をクリックします。
挨拶の内容は簡単で大丈夫です。
どこの（場所）何という名前の（屋号）お店で何を売っているか、読んだ人にどうして欲しいかが伝わると良いでしょう。
④お店やサービスの様子が分かる写真を追加する
写真をギャラリーのように並べ、ホームページを見る人にお店の様子がひと目で伝わるようにしましょう。
「コンテンツを追加」ボタンをクリックして「見出し」アイコンをクリック、サイズ「中」を選択して「フォトギャラリー」と入力します。
また「コンテンツを追加」ボタンをクリックして「フォトギャラリー」アイコンをクリック。
フォルダを開いてギャラリーに表示させる写真をアップロードします。
写真が無い方は以下のサンプルをダウンロードして作成練習にご利用ください。
写真があれば、文章が少なくても雰囲気が伝わりやすくなります。
⑤アクセス情報を追加する
一番下、少し色が変わっている場所にアクセス情報を追加していきます。
この色が変わっているスペースのコンテンツは全画面共通になります。（このホームページは１画面しかないので分かりにくいですが画面が増えたら分かります）
まず「コンテンツを追加」ボタンをクリックして「見出し」アイコンをクリック、中サイズを選択して保存をクリックします。
「アクセス」と入力して「保存」をクリックします。
「コンテンツを追加」して「カラム」アイコンをクリックし、保存します。
左側の列の「コンテンツを追加」ボタンをクリックして、「文章」アイコンをクリックし、お店の名前や住所、電話番号などを入力して保存ボタンをクリックします。
サンプルでよければ以下のテキストをコピー＆ペーストしてください。
体にやさしい惣菜カフェ
buzen note
住所：福岡県豊前市XXX 1-2-3
TEL：000-0000-0000
その際文字の大きさやフォントが他と違うようであれば、一旦削除してから「書式なし」でペースとし直します。
Windowsなら「Ctrl」+「Shift」+「V」で、Macなら「command 」＋「shift」＋「 V」でペーストします。
次に右側の列の「コンテンツを追加ボタン」をクリックして、これまでと違うボタン、「その他のコンテンツ＆アドオン」ボタンをクリックします。
新しく出てきた「Googleマップ」アイコンをクリックして、お店の名前で検索し、該当すれば「保存」ボタンをクリックして終了です。
もしお店の名前で検索しても該当するお店が表示されなければ、住所で検索して保存しましょう。
これで最低限の情報を掲載したお店のホームページが完成です。
終わりに
以上が、最低限の情報を掲載した基本となるホームページの作り方でした。
お疲れ様でした。
作った後でよくいただくご相談に関する回答記事や、ホームページをグレードアップさせる方法をお伝えする記事も作成していきますので、よろしければそちらもご覧いただきたいと思います。
