ホームページの作り方

ジンドゥー(Jimdo)クリエイターで簡単におしゃれなカフェのホームページを作ってみましょう

おしゃれなカフェのホームページ作り①

ジンドゥーへのアカウント登録・TOKYOレイアウトの選択までお済みでしょうか?

この記事ではTOKYOレイアウトの選択の次の工程に進みますので、まだの方は以下の記事をご覧ください。

ジンドゥー(Jimdo)クリエイターで無料ホームページを作ってみましょう ホームページを作る前に知っておきたい3つのことはご覧いただけたでしょうか? その時お伝えしたドメイン、オリジナルのドメインにする...

ジンドゥー(Jimdo)クリエイターでおしゃれなカフェのホームページ作り

この記事では上記の動画に出てくるホームページを実際に作っていく手順を紹介します。

まずは上記のボタンから実際のホームページを開いてみてください。

TOKYOレイアウトを選んだ状態からこのホームページにしていきます。

作業の流れ

  1. 素材の準備
  2. レイアウトの変更
  3. 全体の色とフォントを変更
  4. 背景画像の変更
  5. ロゴを変更
  6. 店名を変更
  7. コンテンツの削除
  8. コンテンツの追加
  9. 余白を整える
  10. 見出しや店名(ホームページタイトル)を整える
  11. ページの削除
  12. SEO対策のための基本設定
  13. ホームページの確認

これらの手順を踏むと、ホームページを作るための一連の作業の概要がつかめます。
作ったホームページから、写真や画像を変えてご自身のお店のホームページにしていくことも可能です。
まずはサンプルホームページで作り方を学びましょう。

①素材の準備

背景画像の準備

背景画像
この画像の保存はNGです。リンク先からダウンロードしてください。

画面上部の薄いグリーン調の背景画像、ナイフとお皿とフォークのイラスト素材の準備が必要です。

グリーン調の背景画像は無料の写真素材サイト「ぱくたそ」で調達しています。
皆さんも以下のリンク先からダウンロードをよろしくお願いいたします。

ナイフとお皿とフォークのイラスト素材の準備

商用利用可能なアイコン素材をフリー(無料)ダウンロードできる素材配布サイト「ICOOON MONO」で得ることができます。

https://icooon-mono.com/16266-%e9%a3%9f%e4%ba%8b%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3/
https://icooon-mono.com/16266-%e9%a3%9f%e4%ba%8b%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3/

上記のリンクからICOOON MONOに行き、colorに入力されているrgb(75, 75, 75)をrgb(102, 102, 102)に変更し、次に「PNG」をクリックしてアイコン素材をダウンロードします。(サイズは初期値の256pxのまま)

画像1

パスタの写真

画像2

椎茸の写真

画像3

ロールケーキの写真

画像1〜3については私が撮影したものです。
そのまま右クリックして「名前を付けて保存」でダウンロードをどうぞ。
(著作権は放棄していませんが、ホームページの練習の範囲でならご自由にお使いいただけます)

文章

以下のボタンをクリックしてダウンロード&保存してご利用ください。

素材準備後の作業

写真や文章の素材の準備がお済みでしたら、以下の手順に沿ってホームページを作り進めてみてください。

②レイアウトの変更

レイアウト変更
レイアウトの変更_ホームページを作ってみましょう 前回の記事では全体の作業の流れを確認したりサンプルのファイルをダウンロードして準備を行いました。 この記事から実際にホームページ...

③全体の色とフォントを変更

色とフォントの変更
全体の色とフォントを変更_ホームページを作ってみましょう 前回の記事ではレイアウト変更を行いました。この記事では「お手本を見ながらホームページを作りましょう」シリーズ共通の作業「全体の色とフォ...

④背景画像の変更

背景画像の変更
背景画像の変更_ホームページを作ってみましょう 前回の記事では全体のフォントと色の変更をしました。 画面左上の「管理メニュー」をクリックします。 ...

⑤ロゴの変更

ロゴの変更
ロゴの変更_ホームページを作ってみましょう 前回の記事では背景画像の変更を行いました。 ホームページの上部にあるロゴ部分の変更を行います。 編集画面を開いた状...

⑥店名の変更

店名の変更
店名を変更_ホームページを作ってみましょう 前回の記事ではロゴの変更を行いました。この記事ではロゴの下の店名(ホームページタイトル)を変更します。 ジンドゥークリエ...

⑦コンテンツの削除

コンテンツの削除
コンテンツの削除_ホームページを作ってみましょう 前回の記事では店名(ホームページタイトル)を変更しました。 この記事ではロゴや店名・背景以外で、もともと配置されていた写真や文章...

⑧コンテンツの追加

コンテンツの追加①
コンテンツの追加①_ホームページを作ってみましょう 前回の記事で配置されていたコンテンツを削除して、ロゴ・店名・背景画像を含んだヘッダー部分以外は空の状態になりました。ここからサンプルの...
コンテンツの追加②
コンテンツの追加②_ホームページを作ってみましょう 前回の記事で見出し1・文章1・余白を追加しました。 この記事では「画像1」「余白」「見出し2」「文章2」まで追加します。...
コンテンツの追加③
コンテンツの追加③_ホームページを作ってみましょう コンテンツの追加①②と進んできた方は、だいぶホームページらしくなってきたのではないでしょうか。 この記事ではサンプルファ...
コンテンツの追加④
コンテンツの追加④_ホームページを作ってみましょう コンテンツ①②③から進んできた方はだいぶジンドゥークリエイターの操作に慣れたのではないでしょうか。この記事ではGoogleMapの追加...

⑨余白を整える

余白を整える
余白を整える_ホームページを作ってみましょう 前回の記事で文章や写真と余白、GoogleMapの追加が終わりました。「これでもホームページらしいけど…」と思われるかもしれませんが、...

⑩店名や見出しを整える

店名や見出しを整える
店名や見出しを整える_ホームページを作ってみましょう 前回の記事でホームページをより見やすくデザインするために余白を調整しました。 この記事では画面上部の店名(=ホームページタイトル...

⑪SEO対策のための基本設定

SEO対策のための基本設定
SEO対策のための基本設定_ホームページを作ってみましょう 前回の記事で不要なページ(画面)を削除しました。この記事では、SEO…Googleなどの検索サイトに表示されやすくするための設定を行い...

⑬ホームページの確認

ホームページの確認
ホームページの確認_ホームページを作ってみましょう 前回の記事でSEOの基本的な設定を行い、ホームページの編集は終わりました。この記事では最後にホームページの確認方法をお伝えします。 ...

スポンサーリンク