Jimdoで作成したホームページを洗練させる方法とデザインのヒント（仮）
じぶんで作成したJimdo（ジンドゥークリエイター）のホームページが今ひとつ野暮ったいと感じたときに読んでいただきたいデザインのヒントです。少しの工夫で印象はかわります。いまあるホームページをワンランク洗練させたいときに試してみてください。
ホームページを洗練させるデザインのヒント・基本編
基本編では、CSSやHTMLなどコードに手をいれることなく、Jimdo（ジンドゥークリエイター）の標準機能だけでデザインを洗練させる方法を集めました。デザインの基本といえる内容ですが、デザインの基本をしっかりと押さえて作られたページはすっきりと整った印象になります。
全体の構成
・TOKYOレイアウトを使う（初心者には使いやすい）
・１行の文字数を20～25文字にする（カラムで横幅を調整）
・コンテンツブロックの間に少し多めに余白をとる
・スマホでスマホビューを確認しながら余白を編集する
色
・全体の配色を整える（虹色配色をやめて同系色にまとめる）
・文字を黒（または黒に近いグレー）にする
・文字色をカラフルにしない（黒＋強調の１色のみ）
文字（書体と文字サイズ）
・フォント（字体）をゴシックに変える
・見出し文字（小）をゴシック太字にする
・強調部分は色を変えずゴシック太字にする
・文字の大きさは統一する
・文章のフォントサイズを15ptにする
文字の配置
・改行の頻度を増やす（間隔をあけると読みやすい）
・文字を左詰めにする（中央揃えや左詰めにしない）
・行頭を１マスあけない（ガタガタさせない）
・行間隔をあける（1.75～2.0にする）
写真と画像
・トップ画像を変える（全体の印象に影響する）
・印象の悪い写真を変える（明るさ・構図・サイズほか）
・スマホのスクロール１～２ページに１枚の画像をはさむ
水平線
・水平線を細くする
・水平線を点線にする
・水平線を減らす（余白や背景色や写真で分ける）
背景
・背景画像をやめる（背景画像を使っている場合）
・背景色を白（または白に近い薄く淡い色）にする
その他
・表で整理する（メニューや料金表など）
・ロゴを作成する
・動画を入れる
ホームページを洗練させるデザインのヒント・応用編
さらにデザインを洗練したいという方には、「ヘッダー編集」機能や「HTMLを編集」機能でCSS/HTMLに手を入れる方法があります。
応用編では、CSSやHTMLなどコードを追加することで可能になるデザインのヒントを集めました。Jimdo（ジンドゥークリエイター）の標準機能だけでデザインを洗練させる方法を集めました。
Font Awesome を使う
Font Awesome のアイコンを使うと、なんとなくかわいくなります。Font Awesome のサイトで利用者登録した後、「ヘッダー編集」で Font Awesome のタグを追記すると使えるようになります。
https://fontawesome.com/start
Font Awesome のアイコンを使ったリンクボタン①
Font Awesome のアイコンを使ったリンクボタン②
CSSで見出しのデザインを変える
Jimdoの標準設定の見出し文字はシンプルです。CSSで見出しのデザインを変えると印象がアップします。見出しのデザインを変えると画面を分割する効果が生まれます。ダラダラと文字が続く原稿でもメリハリのあるページになります。
CSSでリンクボタンのデザインを変える
CSSで「トップに戻る」ボタンのデザインを変える
ポポデザインさんのサイトで分かりやすく解説されていました。サンプルコードを一部引用させていただきます。ヘッダー編集での追記する場所などは下記のリンクからご覧ください。
参照：ポポデザインさんのサイト
https://popo-design.net/jimdo-pagetop-customize/
ジンドゥークリエイターの「トップへ戻る」ボタンは
.cc-FloatingButtonBarContainer
で指定します。
.cc-FloatingButtonBarContainer li a {
background: #000080; /*背景カラーをブルーに変更*/
}
.cc-FloatingButtonBarContainer li a {
border-radius: 50%; /*ボタンを丸くする*/
}
トップに戻るボタンの位置の調整についてはこちらで解説されています。
webる。さんのサイト
https://reset.hida-ch.com/e700864.html
CSSでモバイル端末にフローティングボタンを作成する
CSSでヘッダー部分に【電話する】ボタンを作成する
などなど、CSSで出来る装飾は豊富にあります。Web上でサンプルコードを提供してくれているサイトがたくさんあるので試してみてください。また、CSSの教科書・解説書がありますので、１冊お手元にあると便利だと思います。
Jimdoクラス名一覧
（Jimdoベネフィットサポーターさんのサイトへジャンプします）
https://howtouse.jimdo.com/%E7%8B%AC%E8%87%AA%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88/jimdo%E3%82%AF%E3%83%A9%E3%82%B9%E5%90%8D%E4%B8%80%E8%A6%A7/
（Jimdoベネフィットサポーターさんのサイトへジャンプします）
オンラインでワンポイントの個別レッスンを行っています。また、いまあるホームページのリメイクをまるっと依頼することもできます。独学で習得するのは難しいと感じる方はご相談ください。
> Jimdoホームページリメイク講座
> Jimdoホームページリメイク依頼
ホームページを洗練させるデザインのヒント（プロに依頼する）
ホームページ作成すべてをゼロからプロに依頼してもよいのですが、せっかく自分で簡単に更新できるJimdoなので、自分でできることは自分でやってみましょう。パーツだけワンポイントだけプロに依頼すれば予算にも余裕ができます。
トップ画像やメイン画像はサイト全体の印象に大きく影響します
主要な画像だけでもプロに撮影依頼すればホームページ全体の印象がアップして、離脱率や成果（予約や申込などのCV）が改善されます。写真撮影に自信のない方はプロに依頼してみてもよいでしょう。
室内画像を撮影してもらう（１～数万円程度）
ココナラでは、たくさんのカメラマンさんがスキルを出品しています。プロではないけど趣味の延長で１万円以内で撮影してくれるアマチュア写真家さんも見つけることができます。相性のよさそうな写真家さんを探してみてください。
プロフィール写真を撮影してもらう（１～数万円程度）
おおよその予算ですが２時間程度で最低１万円～、上はきりがありません。プロフィール写真専門のプロの方だと１日で５～10万円の予算でばっちり納豆のいく写真を撮影してくれます。同じ人物なのにまるで印象がかわるので本当にすごいです。
ロゴを作成してもらう（１～数万円程度）
ロゴのデザインをしてくれるクリエイターさんもココナラで探すことができます。ホームページ・名刺・チラシで利用できるでいいかもしれないです。
https://coconala.com/categories/351?ref=header
Jimdoホームページのデザインのリメイクを依頼する（１～５万円）
いまあるJimdoホームページのリメイクをまるっと承ります。すでにJimdoをお使いの方であれば最短３日で完成・納品します。
> Jimdoホームページリメイク依頼
+++ Jimdoホームページ作成講座【ストアカ】はこちら +++
Jimdoホームページの作成講座をやっています。いまあるJimdoホームページのデザインのリメイクの相談もうかがいます。お申込み時に、メッセージ欄でお持ちのホームページのURLをお知らせください。
+ + + + + おすすめのJimdo本 + + + + +
いちばんやさしいJimdoの教本 人気講師が教える本格ホームページの作り方 「いちばんやさしい教本」
以前、Jimdoのホームページ講座を開催した際に、講座後の自己学習のためにお配りした本です。とても分かりやすく書いてあるので受講者さん（全員初心者）からも評判でした。「この本を知っていれば（僕の開催した）講座を受ける必要はなかったです」という貴重な受講者コメントをいただきました。泣きたいです。ありがとうございました。
ジンドゥークリエイター 仕事の現場で使える! カスタマイズとデザイン教科書 （Webデザイナー養成講座）
僕がとてもお世話になった教科書です。著者の服部先生は神です。ジンドゥークリエイターを活用したWebデザイナーを目指す方には必須です。Jimdoの標準機能を十分にマスターした上で、CSS・htmlをある程度理解してからでないとちょっと難しいかもしれません。ジンドゥーの標準機能では不足を感じるようになったら、ぜひカスタマイズにチャレンジしてみてください。
以下の６冊は、いずれもJimdoに精通した先生方の書籍です。どれも分かりやすく初心者向けに書かれています。順不同です。肌にあうものを選択してマスターしてください。
今すぐ使えるかんたん ジンドゥー Jimdo 無料で作るホームページ［改訂5版］
10日で作るかっこいいホームページ Jimdoデザインブック 改訂新版
小さなお店&会社のホームページ Jimdo入門
見た目にこだわる Jimdo入門 Kindle版
はじめてのホームページらくらく作成ガイド〈改訂版〉: 15分×7日間 無料でできる
今すぐ使えるかんたん ぜったいデキます！ ホームページ作成 超入門
この記事が気に入ったらサポートをしてみませんか？