ホームページデザインの様子を公開です。その2／細部（Jimdoホームページ）
告知デザイン・イラスト
前回の“その1”では、デザインのへのこだわり、「デザイン全体」のカスタマイズについて書きました。
今回は、細部のカスタマイズこだわりについてです。
こちらのサービスの内容にも少し触れている感じです。興味ある方はぜひチェックしてみてください☆
テンプレートを選び、情報を載せた直後の状態から
最初に、Jimdo（ジンドゥー）のデザインの大元になる“テンプレート”を選ぶ。そして情報を流し込み、画像やロゴなどを設定する。
するとこのようになります。ホームページっぽくなりました！
なんとなくデザインされてる感じがします。
しかしちょっと味気ないですね。掲載する情報に合わせて各所を調整していないため、見づらさもあります。
「ヘッダー」のデザインをカスタマイズする
とくに、ホームページの印象を左右する『ヘッダー』の部分。
ここでは、文字・ロゴ・ナビゲーションメニューの要素がぶつかり合い、打ち消し合ってしまっているせいで、「情報としての役目」を果たしていません。
まずはここを修復しました。
それぞれの要素のバランスが良くなっただけでなく、よりはっきりと見えるようになりました。
パッと見ではわかりませんが、ロゴとキャッチコピーには、くっきりと見えるように影が仕込んであります。
ナビゲーションメニューのデザイン
ナビゲーションはもともと右寄りでしたが、バランスが悪いので中央揃えに。ロゴやキャッチコピーもそれに合わせて中央揃えにしました。
ナビゲーションは見る人にとっって重要なので、「これがナビゲーションです！」とひと目で分かるよう強調するため、えんじ色の下地を敷きました。もちろん、“現在見ているページ”の文字は別の色になります。
本当は横幅いっぱい（横100％）にしたかったのですが、無料コースの限界でここの幅まで。
デザインの最後に、雰囲気を出すために上から白いグラデーションをかけました。太陽、光が当たっている感じです。
「Google」を気にしながらヘッダーの高さを決める
ポイントはヘッダーの高さです。
Googleは、検索上位になるための条件、ルールをたくさん用意していますが、「訪問者がすぐ情報にたどり着けるホームページ」を優遇する、情報占有率のようなものへのルールもあります。
これをクリアすればGoogleからの“愛されポイント”が増え、検索の上位へと上がっていける可能性があるので、ヘッダーはなるべく低くします。
かといって低すぎるとデザイン性がガタ落ちするため、バランスを見ながら1ピクセル単位で調整です。パソコンによって見え方が違うので神経質になりすぎぬよう…。
外部ブログ・SNSの表示
私はホームページを作る時、「自動化」を大切にしてデザインをします。
この場合の自動化とは、クライアントさんが望むゴールに自動で近づくための仕組みのことです。
デザインも仕組みのひとつ。「ただ存在しているだけのホームページ」ではなく、ゴールに向けて勝手に動いてくれる仕組みをデザインしたいと思いながら、いつもデザインをしています。
ホームページへの訪問者を動かすために、クライアントさんがすでに発信している情報などはしっかり再利用したい。…ということで、外部ブログやSNSの表示も行います。
とくにブログを持っている方は、ぜひホームページに表示したほうが良いと思います。
ホームページにブログ機能をつけ、投稿しまくる方法があります。
これはSEO的にはとても優れているのですが、ホームページ内であちこちと移動すると、「結局、このホームページの主役の情報は何だっけ？」という感じになってしまうことも。
ビジネス初期に導入するホームページは、なるべくシンプルに。“いちばん伝えたいこと”をしっかり伝えられるようにしたほうが良いと私は思っています。
そのため、ブログは外部のもの…アメーバ、はてな、seesaaなどなどの最新記事のタイトルを、一覧で表示する程度におさめます。
ビジネスが成長すると発信したい情報も増えてくると思います。その頃には「ビジネス成長期」のホームページとして、ワードプレス（Wordpress）などを導入するタイミングかもしれません。
デザインにもよりますが、情報整理がしやすい仕組みなので、やり方によって、複雑なページ構造でも良いあんばいで対応ができます。
「メインコンテンツ／サイドメニュー」のデザイン
やっとメインの情報部分…主役の情報についてです！
●見出し
ヘッダーが中央揃えなので、トップページの見出しは中央揃えで揃えました。ほんのちょっと豪華さが出ます。
●フォントについて
明朝フォントはWebサイトでは見づらいので敬遠したいところですが、和風サイトのため、ナビゲーションと見出しには使ってみました（読み飛ばしてしまう危険性もない部分でもあるので）。
その代わり読みやすくする工夫もしっかり施します。読み飛ばされては困る、「読む部分」はゴシック体です。
●文章は読みやすく
最初のテンプレートのデザインでは、ヘッダーに設定した神社の写真が文字の下にも薄く表れています。
デザインとしてはおしゃれですが、やや読みづらい。…ということで、ここは和紙で隠しました。そして「読む部分」の背景は白。「伝えたいことをしっかり伝える」ことが優先です。
●左サイドのナビゲーションメニュー
全体的に右寄りのデザインテンプレートだったため、左のナビゲーションの横に大きな空白があります。ここも修正し、文字情報の範囲を拡大。
メニューのバランスを取った後は、それぞれの要素の空間のバランスも調整しました。これもJimdo無料コースでは本来むずかしい作業ですが、できます。
「フッター」もカスタマイズ！
最後にフッターの色を調整します。
主張しすぎていた色をおだやかに。フッターはデザイン全体の引き締め役にもなれるので、主張しすぎず弱すぎず…の色に。
ただし、このテンプレートでは左サイドに情報が置けません。フッターにしか追加情報を配置できないため、フッターにSNSが堂々と現れるパターンです。それでもエグくならないよう気をつけました。
このホームページについてのデザインのこだわりは以上になります。少し書くつもりが、長くなってしまいました！最終的にはこうなりました。
まとめ／デザインへのこだわり
先にも書いたように、私は「自動化」が大好きです。子供の頃からピタゴラスイッチが大好きで、大人になった今は「やること全てが他の何かにつながってほしい」というほぼ性癖のような思考を持っています。
（私が子供のときにはピタゴラスイッチは存在していなかったですが…自分で作っていました）
そのため、たとえ基本が無料のJimdoサービスだとしても、このホームページがゴールへ近づく役目をするにはどうデザインすべきか？を常に考えています。
…という感じでデザインをしているので、良ければ販売中のサービスもチェックしてみてください(*^^*)
過去のデザイン制作実績をまとめた「ポートフォリオ」のページもあるので、良ければぜひご覧ください。20年分を少しづつアップしていく予定です。
今井きい ポートフォリオ
※プロフィールからもご覧いただけます
↓今井きいのブログ一覧
↓デザインサービス一覧はこちら
