デザイン実績 #1-2【報告&解説】子供キャンプサイト(Jimdo-ジンドゥー) 告知

告知
デザイン・イラスト
前回の「デザイン実績 #1」の続きです。


サイドバー(位置)

上のメニューをクリックすると、①サイドバーに子ページ(下層ページ)が一覧で表示されます。
どの子ページも重要なので、子ページの一覧は「左サイド」に置きました。

カラム&サイドバー2.png

サイトを見た時、人の視線は「みぎ上→ひだり上→みぎ下」という順番で目を動かします。サイトで言うなら「ヘッダー→左サイドナビ→メインの情報」。一度、視点が止まるポイントです。

左にロゴをおいたので、“このサイトは左側も重要”というイメージを無意識で与えられているという前提もあります。

左と右のサイドバーでは、左のほうは「アピール」してくる印象があります。右サイドバーは「誘導」が役目の印象です。

サイドバー(デザイン)

どのような子ページが存在しているかを一瞬で無意識で認知してもらいたいところです。

人は、混乱しているときは「情報に興味を持ちづらい」状態になります。混乱していなければ興味を持つ可能性が上がる。
ということで、「一覧として分かりやすいデザイン」にします。右側の②メインコンテンツと近すぎてもいけないので、バランスが地味に難しい場所。

そして、ここはスマホで見ると「フッター」の扱いになって最下部へ移動するので、その前提でデザインを行います。

しかし、子ページ一覧だけではもったいない。
すぐ知りたいお店の情報、頭の片隅に置いてもらいたいSNSやリンク情報などもここに置いています。

サイトの幅

サイトを見る人は子どもと親御さんなので、持っている機器(パソコン、タブレット、スマホ)の画面は通常サイズ~大きめと仮定しました。
テキスト情報を多めに載せても、読みやすいサイトにできます。

(※高齢者がターゲットの場合…理解のしやすさを優先し、文字は大きく、要素同士の間隔も広く)

森の探検隊_トップ.png

スマホ表示

「スマホ表示」の見やすさもGoogleにしっかりチェックされます。
「文字が小さいとダメ! 要素同士が近すぎてもダメ!」などの決まりも多いので、条件をクリアしつつ見やすいサイトにします。

スマホはパソコンと違い、歩きながら、テレビを見ながらの「ながら見」で利用される時も多いので、見出しをわかりやすくしたりなどの「読み込まなくても理解できる」を意識したデザインにします。

このような感じで、細部も考え抜きながらWebデザインをしています。
ご興味ある方はぜひ覗いてみてください♪
ランディングページも始めました。

今井きい ポートフォリオ
過去のデザイン制作実績をまとめたポートフォリオもあります。20年分を少しづつアップしています。

※プロフィールからもご覧いただけます
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す