【練習】ランディングページ

■架空サイトのテーマ

【業種】

• 旅行・アウトドア

【目的】

• 東京についてあまり詳しくない方へ、第一歩的な立ち位置での観光地紹介 → 東京（観光）の魅力を紹介しつつ、より詳しいサイトへのアクセスに繋げる

【ターゲット】

• 10～30代の学生や社会人の男女
• 修学旅行で東京を訪れる予定の学生
• 東京に来たことがなく旅行を検討している方

■情報

【ペルソナ】

• 地方在住の20代男性。友人と東京への旅行を検討しているがお互い行った事がなく観光地についても詳しくないので、東京に関して調べようと思っている

【ニーズ】

• 入門書的な東京観光についてのサイトを探している

■ビジュアルデザイン

【コンセプト】

• 「東京らしさ」「カジュアル」「シンプルさ」

【配色】

• ベースカラーに白、メインカラーを灰として東京らしさを出すようにした。（※東京のイメージカラー調査より）
• アクセントとして東京のシンボルマークを参考に緑を用いた

【フォント】

• 本文フォントはカジュアルさを感じられる「源ノ角ゴシック」を使用。ウェイトも多種で可視性や可読性も高めやすい

■実装内容

【cssにて実装】

• 4つのエリアをタブの切り替えで変更できるようにした

【jQueryにて実装】

• ナビゲーションメニューから各々のセクションまで滑らかに移動できるようにした
• ある一定のスクロール量で表示（非表示）させ、クリックでページの最上部まで滑らかに移動できるボタンを作成した

■ポイント

【東京らしさの創出】

• 東京のイメージカラーやシンボルマークを参考に、配色で東京らしさを出した

【カジュアル感】

• ファーストビューの形状を曲線にし、柔らかさを出し堅い雰囲気をなくした
• 見出しのフォントを変更し、観光地の強調と砕けた印象を持たせた

【UIの向上】

• タブメニューを導入し、長くなり過ぎるページの短縮、画面の表示を遷移 させる必要なく切り替えられるようにした。どのタブを選択しているのか明確にするため、選択しているタブは画像の不透明度を落とし、見出しに背景色を付けた

【アイキャッチ画像】

• 各エリアのアイキャッチ画像を斜めにして画像の印象を強調させた