デザイン実績 #1【報告&解説】子供キャンプサイト（Jimdo-ジンドゥー）
告知デザイン・イラスト
Web&印刷のデザイン歴20年のプロデザイナー 今井きいです！
今回は、こちらのココナラのサービスで制作させて頂いたWebサイトを、実績報告＆デザインのこだわり解説としてご紹介します。
キャンプ場が運営する、「子供のためのキャンププログラム」参加者募集サイトを、ホームページサービスJimdo（ジンドゥー）で制作ました。
山奥の大自然の中で、子どもたちが主体となって活動するキャンプです。
●サービスの顧客…アウトドアに興味がある、小中学生と親御さん
●サイトの目的…サービスの周知と参加者募集
●サイト訪問者のタイプ…新規、リピートどちらもあり
プログラムの購入者は親御さんであり、忙しい方に向けての情報発信なので、読みやすく内容を理解しやすいことを重視しつつ、お子様にも「楽しい！」と思ってもらえるようなデザインしました。
細部のこだわりは数え切れないほどありますが、大切と思われる7つのポイントだけご紹介します。
①ヘッダーのデザイン
ヘッダーの「バランス」は重要だと思っています。
大きいヘッダーなら大きな写真を載せられオシャレにできます。しかし、Googleに嫌われます。Googleに嫌われると、検索結果で順位が下がります。
「ヘッダーが大きいと画面を占領して情報が入らないから、見た人のためにならないよ！ヘッダーはほど良いサイズにしなさい」ということらしく、トップページのチェックは厳しいです。
でも、ヘッダーが小さすぎると古いサイトのような雰囲気に。サイトにとって最良のサイズを探りながら高さと幅を決めました。
ヘッダーには画像を置くことが多いですが、「サイトの幅に合わせ写真も拡大縮小する」というデザインが増えています。
これは一見カッコイイのですが、管理る側には少しやっかいな機能。幅が大きくなれば画像はどんどん横長になるので、横に長～くなることを想定した画像を用意しなければならないからです。
（15:1のような比率になったりしますが、そういった写真は用意しづらいもの）
さらに今回はキャンプサイトであり、活動する子どもたちの写真がメイン。「横長ウンヌン…」などを考えながら撮影をする余裕はないので、通常比率の3:4サイズを使うことが多いです。
そのため、横幅に合わせヘッダーサイズが変わる機能をオフにし、なるべく比率の変わりづらいデザインにしました。
お子さんにも楽しんでもらえるよう、元気さ、にぎやかさをプラスするため、ヘッダー画像に「葉」を乗せています。ヘッダー画像はスライド形式を選択してありますが、画像が変わっても葉は動かないようになっています。
②メインナビゲーション（メインメニュー）のデザイン
私はなるべく、『ヘッダーの下にナビゲーションを置く』を意識しています。ものすごく小さなことですが、「マウスの移動距離は短いほうが心理的な負担が少ないから、より多くの情報を見てもらえる」という理由からです。
ナビゲーション
ヘッダー
情報
というデザインも多いのですが、ナビゲーションと情報の間に「ヘッダー」があると、マウスの移動距離が伸びるのがネック。
「ヘッダーの上を通るあいだに脳内の記憶が微妙に薄まり、さらにヘッダー内の情報を拾って上書きしてしまうだろう」という懸念もあるため、デザイン上で必須でない限りこの配置をしません。
※「どうしてもナビゲーションは最上部に置きたい！」という場合は問題なくデザインできますので、ご希望の際はお伝え下さい(^^)
また、親ページに子ページがぶら下がる場合は、メインのナビゲーションにマウスを乗せた時、クリックをしなくても、子ページの一覧がサッと下に現れる仕様にしています。これは、マウスを乗せた時＝「オンマウス」で「プルダウン」する…という機能です。
そしてこれは、「子ページの存在を自動でお知らせできる」というありがたい役目をします。
「クリックをして、初めて他の場所に子ページの一覧が現れる」というデザインも可能ですが、初めてサイトを訪れた人には分かりづらく見過ごしてしまう可能性があるため大変もったいない！と考え、この「オンマウスでプルダウン」のナビゲーションを使用しています。
サイトデザインでは当たり前で地味な機能ですが、自動化マニアのわたくし、今井きいの“推し機能”です。
さらに、今見ているページや、マウスを乗せて選んでいる（オンマウス）時にわかりやすいデザインにもしています。
つづきます
過去のデザイン制作実績をまとめた「ポートフォリオ」のページもあるので、良ければぜひご覧ください。20年分を少しづつアップしていく予定です。
今井きい ポートフォリオ
※プロフィールからもご覧いただけます
