エキスパートコラム
ホームページをつくるために必要なことを学ぼう
～はじめてでも大丈夫！きっと作れる！～（全12回）
第6回：ホームページの見た目を変更してみよう！
執筆：野崎 晃（株式会社デック）
2014年9月1日更新
閲覧数8,467views
何か作ろうとしたとき「いざ作ろう！」と思ったものの漠然としてしまって途中で諦めた。なんて経験ありませんか？ホームページも作ろう！と意気込んだものの何から手を付けていいのかわからずに諦めてしまわないために、本コラムで必要な知識やヒントをお伝えします。
第5回ではJimdoへのログインと3つのメニューについて学びました。基本的なことがわかったあっくんは、早速ホームページのデザインを変えたいと考えています。そこで、今回はサイト訪問者の印象を左右する、レイアウトの変更の仕方や、サイトの色などデザインの変更の仕方を学びます。
じゃあまずレイアウトや色などデザインを変えてみよう！
ちなみにあっくん、ケーキ屋さんの雰囲気ってどんなイメージ？
あまーくて、おいしい感じかな！デザインというと・・・どんな感じかな難しいな。
難しいね。ケーキ屋さんのイメージって人によって違うと思うんだ。僕はケーキ屋さんは、いろんなフルーツとクリームでカラフルなイメージをもっているよ。
そっかぁ、たしかにケーキ屋さんらしいデザインって一言で言っても難しいね。じゃあホームページってどんなデザインにしたらいいんだろう？
ねぇあっくん、そのお店の雰囲気や、店内はどんな色の壁紙だったりする？
そうだなーパステルピンクっぽい雰囲気かな？お店看板のロゴもかわいい感じなんだ。
そうなんだね、ホームページの全体のデザインを決めるときは、お店の色や会社の場合、ロゴやコーポレートカラーなんかで考えるのもひとつだね。
なるほどねー、わかった！じゃあピンクと白のデザインにしたいな。
わかったよ。お店や会社のイメージカラーを使う以外にも業種にあった色を選ぶのもいいね。「エコに関わる仕事ならグリーン」みたいな業種によってイメージしやすい色ってあるから、そのイメージに近い色を選ぶのもひとつだよ。
色はホームページを作る上でとても大切です。
エキスパートコラムの坂本さんのコラムも是非お読みください。
ホームページをどんな雰囲気にしたいか決めたし、デザインの仕方をおしえて！
わかったよ、Jimdoはレイアウトとスタイルの2つでホームページの見た目を変更できるんだ。
レイアウト？スタイル？
レイアウトはメニューボタンなどページの構成のことだよ。メニューの位置や表示なんかが変わるんだ。
スタイルは色や文字の大きさなんかを変える機能だよ。なので、レイアウトを選んで、スタイルを変更することで全体のデザインができるんだ。
わかったよ！じゃあまずレイアウトについて教えて！
Jimdoはね26種類のデザインレイアウトが用意されているんだ。
※2014年8月13日以前に登録したサイトでは26種類の他に、旧レイアウトとして200以上のレイアウトを利用できます。
いろんなレイアウトから好きなのを選べるんだね！
個性豊かなレイアウトが用意されているよ。しかも選択するだけで、いつでも好きなときに好きなレイアウトに切り替えることができるんだ！
じゃあ、とりあえずレイアウトを選んでみて、違うのが良かったら別のものに変更することもできるの？
もちろん！
すごーい！
じゃあレイアウトの変更の方法を説明するね。
うん！
まずはログインをして、右側に出る設定のメニューの一番上の「レイアウト」をクリックするんだよ。
あ、ページの上にホームページのミニチュアみたいなのがたくさんでてきた！
そのミニチュアをクリックすると、実際にどんな感じになるか確認ができるよ。気に入ったら保存ボタンを押すことでレイアウトを適用することができるんだ。
簡単だね！
あっくん、今回は「Dublin」のレイアウトにしてみよう。それぞれレイアウトに都市の名前が付いてるので探してみてね！
あった、じゃあチッチお勧めのこのレイアウトにしてみるね。このデザイン変更は何回でも出来るんだよね？
もちろん！好きなデザインが見つかるまで色々試してみるといいよ。
でもあんまりケーキ屋さんって雰囲気じゃないけど大丈夫？
大丈夫だよ！スタイルから色や文字のサイズを調整ができるんだよ！
そっかぁ、教えてチッチ！
わかったよ、あっくん！右のメニューの上から2番め、スタイルを選んでね。
あ、マウスカーソルを画面の上で動かすと時々ローラーのマークに変わるみたい。
あっくんよく気づいたね、このスタイルの機能で背景の色や文字のサイズなどを変更することが出来るんだよ！
へー、どうやって変更するの？
じゃあまずメニューボタンの色を変えてみよう！メニューボタンのところにマウスカーソルを持って行くとマウスカーソルがローラーのマークに変わるからクリックしてみて。
うん、クリックしたよ！何も変わらないみたいだけど・・・
あっくんよく見て、ページの上に色や文字のサイズなんかを変更出来るメニューが表示されてるんだよ！
本当だ！ここを操作して変更するんだね。
そのとおり！じゃあメニューボタンの背景の色をピンクにしてみよう！
背景色を選んで、ピンクっと！できた！
さすがだねあっくん！
こうやって色や文字のサイズを変更するんだね！
うん、他にも色々変えられるんだよ。
- メニューの背景
- コンテンツ
- フッター
- 見出し
- 背景
あ、背景も変えられるんだね。
うん、背景で変更ができるよ。上にある背景のボタンを押してみて！
あ、今の背景の草の写真がある！これが表示されてるんだね。
そうだね、背景に画像を入れたいときは「画像を追加」で好きな画像を入れられるんだ。
わかったよ、ありがとう。ねぇチッチ写真じゃなくて色を一色敷くようなこともできるの？
うん、今の草の写真を削除して、背景パターンのところから色を選べば写真じゃなくて単色の背景が指定できるよ。
ありがとうチッチ、ピンクと白でお店のイメージカラーっぽくできた！
よく出来ました！今回は背景に単色のピンクを入れたけど、写真でお店のケーキやお店の外観なんかを入れてもいいかもね。
見出しの文字も色や大きさを変えることもできるの？
うん、さっきのスタイルを変更する状態で見出しのところをクリックしてごらん。
あ、画面の上に文字サイズや色を変更するメニューがでた。
さっきのメニューの背景を変えたのと同じ要領で見出しの文字サイズや色などを変えることができるよ。
なるほどね、画面の見た目を変更するのはスタイルから。と覚えればいいんだね。
色も文字サイズも自由に変更できるから色々ためしてみてね！
うん！なんか楽しくなってきた！
これでホームページのデザインが出来たから、次から中身を作っていこうね！
チッチ、ぼく最近よく夢をみるんだ。
どんな夢？
ホームページを作ってケーキ屋さんにいっぱいお客さんが来る夢だよ。
ステキだね！で、あっくんはケーキの家に住んでてその中ででっかいケーキを食べてるとか？
チッチなんでわかったの！すごいね！
え？本当にそうなんだ？
はやくあのケーキ屋さんの美味しさをホームページで伝えたいな。
きっとできるよ！
まとめ
Jimdoでは個性豊かなたくさんのレイアウトの中からレイアウトを選んで、スタイルで色や文字サイズなどデザインも自由に変更することができます。お店や会社、自分が思い描いているホームページになるように、ぜひレイアウトとスタイルでデザインを変更してみましょう！
見た目が整ったところで、次回はナビゲーションの編集などページの作成をしていきます。
野崎 晃（のざき・あきら）
株式会社デック 代表取締役／JimdoExpert
http://s-deck.jp/
http://jp-m.jimdo.com/
愛知県名古屋市を拠点に活動するWeb制作の会社の代表。
2009年Jimdoに出会い、より多くの人にJimdoの便利さ／楽しさを伝えるべく解説ページ「Jimdoでつくる簡単ホームページ！」を開設。JimdoJapan公式のJimdoCafeを運営するなど、Webサイトを多くの人にもっと身近に感じてもらうべく活動中。
著書に『WebデザイナーのためのJimdoスタイルブック』（共著、マイナビ）。
![[はじめてＷＥＢ・Jimdo公認] はじめてのホームページらくらく作成ガイド <改訂版>](/images/img_book1.jpg)
チッチ、僕はケーキ屋さんのホームページを作るから、まずは見た目をケーキ屋さんの雰囲気にしたい！