ペットショップ・テラ

概要

ペットショップのWebサイト(架空)

URL

ペットショップ・テラ

制作目的

ペットショップ・テラの事業と、その思いについて知ってもらう。

制作条件

ロゴ・文章・写真・ワイヤーフレームは支給素材を使用。

温かみもしくは、フレッシュさを感じさせるイメージで、レスポンシブ対応のデザインを希望。

ターゲット

新しい家族の一員として動物を飼うことを考えている、30代後半の両親と、小学校低学年までの子供という構成のファミリー層がターゲット。
スマートフォン・タブレットで子供を遊ばせ、各種通販サイト・ネットスーパで買い物をすることが多く、週末は一家で郊外のショッピングセンターによく買い物に訪れる。

担当範囲

ディレクション / デザイン / コーディング

レスポンシブ

スマートフォン / iPad / PC

使用ツール・言語

Photoshop / Dreamweaver / HTML / CSS

制作時間

約700分（TOPページのみ）

①⑤ フォント

① ナビゲーション

焦茶色の「HG丸ゴシックMPRO」を白で縁取り、老若男女問わない親しみやすさの演出と、画面の引き締め及び、視認性向上を図りました。

⑤ 見出し・本文

読みやすさ最優先で、「游ゴシック」の焦茶色を採用。

② メインカラー

メイン画像の可愛い印象が強くなり過ぎないように、子猫の模様の一部であるピンクブラウンに設定しました。

③ メイン画像

猫じゃらしで遊ぶ子猫に焦点強調加工を施した写真を選び、ペットと人の触れ合い・動物の愛らしさを感じられるようにしました。

④ 見出し

各見出しの前に、ロゴに使用されている黄緑色の足跡を配置し、点で下線をつけることで、温かみと親しみやすさを保ちつつ反復・強調しました。

⑥ 本文中の画像

円形抜き＋周りにぼかしを入れて、ほっこり優しい感じと抜け感を出しました。

⑦ NEWSの文章

画像とのバランス・読みやすさを考慮して、通常の本文より広い行間でコーディングしました。

⑧ 当店人気ランキング

一目見て、すぐに順位が分かるよう各動物の上に、金・銀・銅・白×ピンクの王冠を被せました。

レスポンシブ対応

スマートフォンで閲覧する際、すっきり見やすいよう、ナビゲーションの各メニューと本文＋画像を、画面に対して縦並び・各画像を1列に配置しました。