スマートフォンサイトを表示する

  1. TOP
  2. ホームページをつくるために必要なことを学ぼう ~はじめてでも大丈夫!きっと作れる!~ : 第6回 ホームページの見た目を変更してみよう!

エキスパートコラム

ホームページをつくるために必要なことを学ぼう
~はじめてでも大丈夫!きっと作れる!~(全12回)

第6回:ホームページの見た目を変更してみよう!

執筆:野崎 晃(株式会社デック)

2014年9月1日更新

  • このエントリーをはてなブックマークに追加

閲覧数6,139views

このコラムをPDF形式でダウンロードする

何か作ろうとしたとき「いざ作ろう!」と思ったものの漠然としてしまって途中で諦めた。なんて経験ありませんか?ホームページも作ろう!と意気込んだものの何から手を付けていいのかわからずに諦めてしまわないために、本コラムで必要な知識やヒントをお伝えします。

第5回ではJimdoへのログインと3つのメニューについて学びました。基本的なことがわかったあっくんは、早速ホームページのデザインを変えたいと考えています。そこで、今回はサイト訪問者の印象を左右する、レイアウトの変更の仕方や、サイトの色などデザインの変更の仕方を学びます。

あっくん

チッチ、僕はケーキ屋さんのホームページを作るから、まずは見た目をケーキ屋さんの雰囲気にしたい!

チッチ

じゃあまずレイアウトや色などデザインを変えてみよう!
ちなみにあっくん、ケーキ屋さんの雰囲気ってどんなイメージ?

あっくん

あまーくて、おいしい感じかな!デザインというと・・・どんな感じかな難しいな。

チッチ

難しいね。ケーキ屋さんのイメージって人によって違うと思うんだ。僕はケーキ屋さんは、いろんなフルーツとクリームでカラフルなイメージをもっているよ。

あっくん

そっかぁ、たしかにケーキ屋さんらしいデザインって一言で言っても難しいね。じゃあホームページってどんなデザインにしたらいいんだろう?

チッチ

ねぇあっくん、そのお店の雰囲気や、店内はどんな色の壁紙だったりする?

あっくん

そうだなーパステルピンクっぽい雰囲気かな?お店看板のロゴもかわいい感じなんだ。

チッチ

そうなんだね、ホームページの全体のデザインを決めるときは、お店の色や会社の場合、ロゴやコーポレートカラーなんかで考えるのもひとつだね。

あっくん

なるほどねー、わかった!じゃあピンクと白のデザインにしたいな。

チッチ

わかったよ。お店や会社のイメージカラーを使う以外にも業種にあった色を選ぶのもいいね。「エコに関わる仕事ならグリーン」みたいな業種によってイメージしやすい色ってあるから、そのイメージに近い色を選ぶのもひとつだよ。

色はホームページを作る上でとても大切です。
エキスパートコラムの坂本さんのコラムも是非お読みください。

あっくん

ホームページをどんな雰囲気にしたいか決めたし、デザインの仕方をおしえて!

チッチ

わかったよ、Jimdoはレイアウトとスタイルの2つでホームページの見た目を変更できるんだ。

あっくん

レイアウト?スタイル?

チッチ

レイアウトはメニューボタンなどページの構成のことだよ。メニューの位置や表示なんかが変わるんだ。
スタイルは色や文字の大きさなんかを変える機能だよ。なので、レイアウトを選んで、スタイルを変更することで全体のデザインができるんだ。

あっくん

わかったよ!じゃあまずレイアウトについて教えて!

チッチ

Jimdoはね26種類のデザインレイアウトが用意されているんだ。

※2014年8月13日以前に登録したサイトでは26種類の他に、旧レイアウトとして200以上のレイアウトを利用できます。

あっくん

いろんなレイアウトから好きなのを選べるんだね!

チッチ

個性豊かなレイアウトが用意されているよ。しかも選択するだけで、いつでも好きなときに好きなレイアウトに切り替えることができるんだ!

あっくん

じゃあ、とりあえずレイアウトを選んでみて、違うのが良かったら別のものに変更することもできるの?

チッチ

もちろん!

あっくん

すごーい!

チッチ

じゃあレイアウトの変更の方法を説明するね。

あっくん

うん!

チッチ

まずはログインをして、右側に出る設定のメニューの一番上の「レイアウト」をクリックするんだよ。

あっくん

あ、ページの上にホームページのミニチュアみたいなのがたくさんでてきた!

チッチ

そのミニチュアをクリックすると、実際にどんな感じになるか確認ができるよ。気に入ったら保存ボタンを押すことでレイアウトを適用することができるんだ。

あっくん

簡単だね!

チッチ

あっくん、今回は「Dublin」のレイアウトにしてみよう。それぞれレイアウトに都市の名前が付いてるので探してみてね!

あっくん

あった、じゃあチッチお勧めのこのレイアウトにしてみるね。このデザイン変更は何回でも出来るんだよね?

チッチ

もちろん!好きなデザインが見つかるまで色々試してみるといいよ。

あっくん

でもあんまりケーキ屋さんって雰囲気じゃないけど大丈夫?

チッチ

大丈夫だよ!スタイルから色や文字のサイズを調整ができるんだよ!

あっくん

そっかぁ、教えてチッチ!

チッチ

わかったよ、あっくん!右のメニューの上から2番め、スタイルを選んでね。

あっくん

あ、マウスカーソルを画面の上で動かすと時々ローラーのマークに変わるみたい。

チッチ

あっくんよく気づいたね、このスタイルの機能で背景の色や文字のサイズなどを変更することが出来るんだよ!

あっくん

へー、どうやって変更するの?

チッチ

じゃあまずメニューボタンの色を変えてみよう!メニューボタンのところにマウスカーソルを持って行くとマウスカーソルがローラーのマークに変わるからクリックしてみて。

あっくん

うん、クリックしたよ!何も変わらないみたいだけど・・・

チッチ

あっくんよく見て、ページの上に色や文字のサイズなんかを変更出来るメニューが表示されてるんだよ!

あっくん

本当だ!ここを操作して変更するんだね。

チッチ

そのとおり!じゃあメニューボタンの背景の色をピンクにしてみよう!

あっくん

背景色を選んで、ピンクっと!できた!

チッチ

さすがだねあっくん!

あっくん

こうやって色や文字のサイズを変更するんだね!

チッチ

うん、他にも色々変えられるんだよ。

  • メニューの背景
  • コンテンツ
  • フッター
  • 見出し
  • 背景

あっくん

あ、背景も変えられるんだね。

チッチ

うん、背景で変更ができるよ。上にある背景のボタンを押してみて!

あっくん

あ、今の背景の草の写真がある!これが表示されてるんだね。

チッチ

そうだね、背景に画像を入れたいときは「画像を追加」で好きな画像を入れられるんだ。

あっくん

わかったよ、ありがとう。ねぇチッチ写真じゃなくて色を一色敷くようなこともできるの?

チッチ

うん、今の草の写真を削除して、背景パターンのところから色を選べば写真じゃなくて単色の背景が指定できるよ。

あっくん

ありがとうチッチ、ピンクと白でお店のイメージカラーっぽくできた!

チッチ

よく出来ました!今回は背景に単色のピンクを入れたけど、写真でお店のケーキやお店の外観なんかを入れてもいいかもね。

あっくん

見出しの文字も色や大きさを変えることもできるの?

チッチ

うん、さっきのスタイルを変更する状態で見出しのところをクリックしてごらん。

あっくん

あ、画面の上に文字サイズや色を変更するメニューがでた。

チッチ

さっきのメニューの背景を変えたのと同じ要領で見出しの文字サイズや色などを変えることができるよ。

あっくん

なるほどね、画面の見た目を変更するのはスタイルから。と覚えればいいんだね。

チッチ

色も文字サイズも自由に変更できるから色々ためしてみてね!

あっくん

うん!なんか楽しくなってきた!

チッチ

これでホームページのデザインが出来たから、次から中身を作っていこうね!

あっくん

チッチ、ぼく最近よく夢をみるんだ。

チッチ

どんな夢?

あっくん

ホームページを作ってケーキ屋さんにいっぱいお客さんが来る夢だよ。

チッチ

ステキだね!で、あっくんはケーキの家に住んでてその中ででっかいケーキを食べてるとか?

あっくん

チッチなんでわかったの!すごいね!

チッチ

え?本当にそうなんだ?

あっくん

はやくあのケーキ屋さんの美味しさをホームページで伝えたいな。

チッチ

きっとできるよ!

まとめ

Jimdoでは個性豊かなたくさんのレイアウトの中からレイアウトを選んで、スタイルで色や文字サイズなどデザインも自由に変更することができます。お店や会社、自分が思い描いているホームページになるように、ぜひレイアウトとスタイルでデザインを変更してみましょう!
見た目が整ったところで、次回はナビゲーションの編集などページの作成をしていきます。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

野崎 晃(のざき・あきら)

野崎 晃(のざき・あきら)

株式会社デック 代表取締役/JimdoExpert
http://s-deck.jp/
http://jp-m.jimdo.com/

愛知県名古屋市を拠点に活動するWeb制作の会社の代表。
2009年Jimdoに出会い、より多くの人にJimdoの便利さ/楽しさを伝えるべく解説ページ「Jimdoでつくる簡単ホームページ!」を開設。JimdoJapan公式のJimdoCafeを運営するなど、Webサイトを多くの人にもっと身近に感じてもらうべく活動中。

著書に『WebデザイナーのためのJimdoスタイルブック』(共著、マイナビ)。

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/9/17~2017/9/23]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!