ホームページ作成サービス「グーペ」の15日間無料体験でお店のホームページの体裁を整えるまでを図解しながら紹介しています。
15日間は無料ですので、とりあえず試してみてください。⇒グーペの始め方はこちら
今回はトップページです。トップページはホームページの顔です。多くの人が最初に訪れるページですから、自分のお店、仕事などの印象にも関わってくる大事なページです。
いよいよ、写真を入れたりするので、慣れないと難しく感じるところもあるかもしれませんが、写真はいくらでも入れ替えができるので、どんどん試してみてください。
あ、写真の準備は必要です。飲食店や美容室や、クリニックといったお仕事の場合は、自分のお店の外観や内観、料理の写真などを撮っておきます。⇒ホームページの写真について
個人で税理士や会計士、コンサルタント、プランナー、コーディネーター、デザイン、音楽、翻訳、文書作成などのお仕事をされている方は、必ずしも自分で撮った写真がなくても、イメージ写真を使うことも選択できます。⇒イメージ写真について
グーペのスライドショーの写真を入れ替える
ホームページのトップページの写真を入れ替える前に、今はどんな感じになっているかといいますと、
【PC】
【スマホ】
こんな感じです。
トップページの写真はスライドショーになっていて、何枚かの写真が入れ替わリ表示されるようになっています。
ではでは、このサンプルとして入っている写真を入れ替えていきます。
グーペの管理画面の左、ホームページ設定の「トップページ設定」をクリックします。
「写真を登録する」をクリック。
すると、こんな画面が出てきます。
写真について二つの注意がされています。
ひとつは拡張子（かくちょうし）というのはファイルの種類を表すものです。
画像ファイルには様々な種類があるのですが、普通にデジカメやスマホで撮った写真は.jpg（じぇいぺぐ）という拡張子がついています。
ので、普通に撮った写真をホームページに使う時はあんまり気にしなくていいです。そんなものがあるんだなーと思っていただければ。
もうひとつは、画像のサイズです。「こちら」をクリックすると、
使っているテンプレート（デザイン）によって、スライドショーの画像のサイズが違います。
サンプルのサイトで選んだデザインは”Oneplate”なので、横幅「1000px(ピクセル）」縦幅「自動（auto)」となっています。
「px」はピクセルと読みます。デジタル画像の１粒が１pxです。まー、これもそういう単位があるんだな、と思ってもらえればいいです。
で、この横幅1000pxというのは横幅が1000pxちょうどの写真を用意しなくちゃいけないってことでもありません。
なんだか、もやっとした説明になってしまいましたが、細かい説明をあれこれするより、とりあえず写真を入れてみます。
「ファイルを選択」をクリックします。
そして、自分のホームページのトップページに入れたい写真を選択します。
私が使っているのはMacなのでWindowsではちょっと違う画面になりますが、だいたいこんな感じだと思います。
選択した写真は”オムレツ.jpg”という名前で、1280px×960pxのサイズということです。
写真の横幅が1000pxより小さいと、PCで見たとき画像が粗くなってしまいます。
「開く」をクリックします。
”オムレツ.jpg”が入っていることを確認して、「登録する」をクリックします。
最初のサンプル画像と一緒に自分でとりこんだ写真が入っていますね。
同じようにして、トップページのスライドショーに入れたい写真を取り込んでいきます。
とりあえず、4枚ほど取り込みました。そしたら、サンプルとして入ってた写真を削除します。
「削除する」をクリックします。
左の緑の矢印ボタンをドラッグすることで、スライドショーの順番を変更できます。やっぱり一番見てほしい写真（お客さんにお店のことが伝わりやすい）を最初に持ってきたいです。
写真はとりこんだり、削除したり、場所を入れ替えたりするごとに更新されるので、特に「更新する」ボタンを押す必要はありません。
その下のスライドショーの速度で、早くしたり遅くしたりできます。スライドショーのサイズはいじりません。
スライドショーの速度を変更したら、
「更新する」で更新します。
トップページのウェルカムメッセージを書き換える
スライドショーの写真を入れ替えたら、今度はその下にあるウェルカムメッセージを書き換えます。
ウェルカムメッセージってのは何かって言いますと、
ココのメッセージです。
自分のお店のアピールなんかを書きます。
ブログとかをやったことがある人なら、見慣れたテキストエディタ（文章を作成、編集するところ）です。が、初めて見た方にとっては、何なんだ、この上についてるたくさんのボタンは！と憤りを隠せないことでしょう。
でも、大丈夫です。スルーです。ただただ普通に文章を入力するだけです。
”南房総、館山の田舎の古い建物を自分達でコツコツ修理してカフェを始めました。絶品ふわふわのオムレツ、オムライス、房総の新鮮な野菜、魚介を使ったランチプレート、自家焙煎したスペシャルティコーヒーをご用意して皆様のお越しをお待ちしております。ぜひ、ごゆっくり、おくつろぎにいらしてください。”
と書いてみました。サンプルのホームページなのになんかカフェを始めてる気になってきました。
ここでも、やはりキーワードを意識してメッセージを書きます。
書き換えたら「更新する」をクリック。
これでトップページの変更は終了です。
トップページの写真を入れ替えると、ホームページがかなりオリジナルな感じになってきたんじゃないでしょうか。
ちなみに、変更後はこんな感じになりました。
【PC】
【スマホ】
どんな写真を使うのか、また、写真の良し悪しによっても印象が大きく変わってきます。
⇒ホームページの写真も参考にして頂き、綺麗な写真を是非トップページに載せちゃってください。
《グーペで作成中のサンプルホームページ》
