こんにちは、ブログ運営者のとどけるデザインです。
この記事ではジンドゥークリエイターでシンプル・ナチュラルなデザインのカフェのホームページの作り方を、動画と文章でお伝えします。
ジンドゥーのアカウントを取得した状態からスタートしますので、まだ取得していない方は以下の記事を読んでから始めてください。アカウントの取得もホームページ作成も無料で始められます。
※動画の中のホームページのデザインが一部実際と異なる箇所があります（二画面ホームページではなく一画面のホームページを作っていきます）
作り方の流れ
- ジンドゥークリエイターを選択
- どんなホームページを作るのか回答
- 最初にTOKYOレイアウトを選択
- FREE（無料）プランを選択
- サブドメインを決める
- レイアウトを「Rio de janeiro」に変更
- ロゴの画像を変更
- ホームページタイトルを変更
- 背景をスライドショーに
- 全体のフォントと色を調整する
- ホームページタイトルの色だけ変える
①ジンドゥークリエイターを選択
ジンドゥーのアカウントを取得したらこの画面になります。
ここでは「ジンドゥークリエイター」を選びます。
②どんなホームページを作るのか回答
どんなホームページを作成するかの質問です。
ここでは「バー・レストラン」にチェックを入れます。
③最初にTOKYOレイアウトを選択
バー・レストランにおすすめのレイアウトが表示されます。
ここでは「TOKYO」レイアウトを選択します。
④無料のFREEプランを選択します
ここでは無料のFREEプランを選択します。
プランは後で変更することはできます。
⑤サブドメインを決める
サブドメインを決めます。
◯◯◯.jimdofree.comの◯◯◯の部分です。
例えば「カフェミルク」という屋号なら「cafemilk」のように分かりやすく短いサブドメインがおすすめです。
他の人が同じサブドメインを使っていたら、こちらが使うことはできません。
ドメインが決まったら「無料ホームページを作成するボタン」をクリックします。
⑥レイアウトを「Rio de janeiro」に変更
ホームページが出力されました。
ここからいろいろ手を加えていきます。
まずはレイアウトを変更します。
左上のアイコンから管理メニューを開き、「デザイン」→「レイアウト」をクリックして、レイアウト一覧を横に表示させます。
表示されたレイアウトを横スクロールさせて「Rio De janeiro」をクリック。
保存して閉じます。
⑦ロゴの画像を変更
カーソルを合わせてロゴの部分をクリックすると、雲のアイコンが表示されます。
そこをクリックして自分で保存したロゴの画像を選択して、保存まで行います。
⑧ホームページタイトルを変更
「ホームページタイトルを入れてください」と書かれた部分にクリックします。
文字が書かれている部分はほとんどキーボードで入力や削除ができます。（一部できない箇所もあります）
「豊前市の体にやさしい惣菜カフェ」と入力し、改行して「buzen note」と入力して保存。
画面右上の×印のアイコンをクリックして閉じます。
この「保存」して閉じる動作は他の項目でもほぼ同じです。保存しなければ変更は反映されません。間違ったと思ったら保存せずに閉じましょう。
タイトルには「どこで」「何をしている」「何という名前」のお店なのかが読む人に分かるようにします。
⑨背景をスライドショーに
背景画像をスライドショーにします。
管理メニューを開き「デザイン」→「背景」をクリックします。
「＋」をクリックして「スライド表示」を選択し、自分のフォルダからスライドショーに使う画像を選択します。
ここではサンプル画像の３枚を選択します。
複数選択する方法は、Windowsなら最初にファイルを一つマウスで選択します。 次にキーボード左下にあるCtrlキーを押しながら、二つ目のファイルを選択します。 さらに選択したいなら、Ctrlキーを押し続けながら同じ動作を繰り返します。
画像を選択したら速度を調整します。
スライダーを真ん中に移動させましょう。
そして「この背景画像をすべてのページに適用する」ボタンをクリックします。
保存ボタンをクリックして、画面右上の×印のアイコンをクリックして閉じます。
⑩全体のフォントと色を調整する
全体のフォントと色を調整します。
画面左上の三本線をクリックして管理メニューを開き、「デザイン」→「スタイル」とクリックします。
詳細設定を「オン」の状態にします。
「見出し」のフォントのボックスをクリックして、キーボードで「明朝」と入力すると、候補のリストに「明朝」と表示されるので、その部分をクリック。
次に「テキスト」のフォントのボックスをクリックして、キーボードで「ゴシック」と入力すると、候補のリストに「ゴシック」と表示されるので、その部分をクリック。
この作業によって、全体の見出しのフォントが「明朝体」、テキストのフォントが「ゴシック」になります。
フォントもデザインの大事な要素です。
次にカラーのボックスをクリックして「一番上の列、左から二番目」の濃いグレー（黒の右隣）をクリックして右下の「選択」ボタンをクリックします。
保存ボタンをクリックして、画面右上の×印のアイコンをクリックして閉じます。
字の色が真っ黒からグレーになると、柔らかい印象が加わります。ただしあまり薄い色にすると字が読みにくくなるので、濃度には注意が必要です。
⑪ホームページタイトルの色だけ変える
全体の色とフォントを整えたら、ホームページタイトルが見えにくくなりましたので、ホームページタイトルだけ変更します。
画面左上の三本線をクリックして管理メニューを開き、「デザイン」「スタイル」とクリックします。
ここでは「詳細設定」を「オフ」の状態にします。
カーソルが三角からペンキのローラーのような形に変わります。
その状態でホームページタイトル部分をクリックします。
画面上部に詳細な設定項目が表示されます。
フォントカラーのボックスをクリックして「白」をクリックし、右下の選択ボタンをクリックします。
フォントのサイズも変えましょう。フォントサイズのボックスをクリックして「36」に変更します。
保存ボタンをクリックして、画面右上の×印のアイコンをクリックして閉じます。
これで全体のデザインができました
ここまでで、ホームページのレイアウトと全体の色やフォントが整ってきました。
続きの記事で、ホームページの中身（コンテンツ）と言われる、文章やアクセス情報などを追加する方法をお伝えします。
▲続きはこちらから。
