ホームページ作成サービス「グーペ」の15日間無料体験でお店のホームページの体裁を整えるまでを図解しながら紹介しています。

 15日間は無料ですので、とりあえず試してみてください。⇒グーペの始め方

 さて、今回は楽しい楽しいデザインです。自分のホームページのデザインをどんなのにしようかな〜と選ぶのは非常に楽しいです。

 《グーペで作成中のサンプルホームページ

グーペでホームページのデザインを選ぶ

 グーペの管理画面の左、ホームページ設定の「デザイン設定」をクリック。

グーペデザイン

 そこから、「ダウンロード」のところをクリックします。

グーペデザイン2

 すると、ホームページのいろんなデザインが出てきます。

グーペデザイン3

 有料のものと無料のものがありますが、とりあえず、”15日間の無料体験でホームページの体裁を整える”ということで書いていますので、上の[絞り込み]のところの無料のポッチをクリックします。

グーペデザイン4

 これで無料のデザインだけがズラッと並びます。

 有料のデザインは一度購入すればずっと使えるので、後々、気に入ったデザインのものがあればそっちに乗り換えるでもいいと思います。

 グーペ内の【アイコンの説明】のところでも書いていますが、デザインを選ぶ時に特に気にしてもしい二つを更に説明します。

グーペデザイン5
 これは、文字通りなのですが、PCでもスマホでも(タブレットに対応しているものも)、見る画面の大きさによってサイトの幅を調整して見やすくしてくれるデザインになっています。レスポンシブデザインと言ったりします。

グーペデザイン7
 これは、デザインはそのままに色を選べるよ、ということです。デザインを選ぶページでは多くのデザインが白、グレーといったカラーになっていますが、カラーが色々と選べるのです。選べるカラーはそのデザインによって違ってきます。

グーペデザイン8

 PC、スマホなどの画面、もしくは右下の虫めがねをクリックすると、そのデザインを自分のホームページに当てはめてみることができます。

 そこから右上の「テーマカラー」を選べば、いろんな色に変えることができます。

グーペデザイン9

 これは”Oneplate”という名前のデザインを試しているときの選べるカラーです。たくさん選べるカラーのあるデザインのもあれば、数種類の色しか選べないものもあります。

 あとの二つ(レイアウト変更対応とメニューアイコン変更対応)は、気にしなくていいです。

グーペのデザインテーマの選び方

 さて、いよいよ自分のホームページのデザインを選びます。

 選びますと言っても、後で変えられるので、悩みすぎて時間が経っちゃうくらいなら、なんか一つ選んでとりあえず先に進んでいったほうがいいかもしれません。

 どれを選んでもいいのですが、「私だったらこれを選ぶ」を書いてみたので参考にしてみてください。

 まず、さっきのアイコンの説明にもあった”PC・スマホ、共通デザイン対応”から選びます。中でもタブレットにも対応しているもの。

 ホームページの画面そのものが表示されているものは、PCとスマホで別々のデザインを使っているデザインです。
グーペデザイン10

 PCとスマホの画面が表示されているデザインは、PC、スマホのサイズに合わせてデザインを調整してくれます。
グーペデザイン11

 PCとスマホ、タブレットの画面が表示されているデザインは、それぞれのサイズに合わせてホームページを調整します。
グーペデザイン12

 PCも大きな画面のものから、ノートPCのようなコンパクトなものがあり、スマホもタブレットも、いろんなサイズの物があります。ので、ユーザーの使いやすさ、見やすさということから考えると、いろんなサイズの画面に対応しているデザインがいいと思います。

 
 いろんなサイズの画面に対応しているデザイン(レスポンシブデザイン)の中から私が選んだのは”Oneplate”というデザイン。

 私がサンプルで作っているのがカフェのホームページなので、カフェのイメージ似合ったデザインで、さらに地図と営業時間、定休日など、おそらく飲食店を探している人が知りたいであろう情報がトップページですぐに見られるからです。

 もちろん、このデザインじゃなきゃいけないということではありません。

 自分の好みに合った、お仕事のイメージに合ったデザイン、カラーを選んでください。

 さっきも書きましたが、このデザインはいつでも簡単に変更することができます。まずはお気にい入りのデザインを選んでみてください。

 ではでは、選んだデザインをダウンロードします。

グーペデザイン13

 の「ダウンロード」をクリックします。

グーペデザイン14

 ダウンロードされました。

 「このダウンロードしました!」をクリックすると、

グーペデザイン15

 さっきのページに戻って、新しくダウンロードされた”Oneplate”のデザインも表示されています。

 さっそくダウンロードした”Oneplate”のデザインに変更してみます。

 ”Oneplate”のポッチをクリックして、「選択したデザインに切り替える」をクリック。

グーペデザイン16

 旗が移って、これで新しいデザインになりました。

 色を変更する場合は、Oneplateのところの「編集」をクリックします。

グーペデザイン17

 ここからカラーを選んでポッチをクリックして、下の「変更を保存する」をクリックすればカラー変更の完了です。

グーペデザイン18

 私はとりあえずカラーは白のままでいきます。

 左上の「サイトを確認」からデザインを変更した自分のホームページをみてみましょ。

 
 おお〜っ!いー感じ!なはず。

 ※この先の図解は”Oneplate”のデザインを使ったものとなります。他のデザインを選択しても基本的なやり方は変わりません。


グーペで作成中のサンプルホームページ