○Daily UI_#003 【Landing Page】
3月20日、21日に3つ目のお題に挑戦し、7時間以上かけて制作しました。
お題はランディングページをつくるというもので、私は旅行アプリのランディングページを作りました。（ランディングページというのは、検索結果や広告などを経由して訪問者が最初にアクセスするページのことです。）
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
参考にさせていただいたサイト↓（文章などはそのまま使用しています。）
・アプリ画面
◾️スクリーンショット
２枚目〜：検索欄の「宿泊・航空券」では、左上にある2つのボタンで宿泊施設、航空券、宿泊施設＋航空券のパックを切り替えられるようにしています。
◾️実際の画面
◾️使用した色
（１）背景、検索ボタンなど（テーマカラー）
（２）メニューボタン、入力フォームなど
（３）文字、ロゴマーク
（４）背景（検索欄内）
（５）ボタン（検索欄内）
（６）ボタンのふち、線（検索欄内）
（７）下矢印（入力フォーム内）
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
◾️ロゴマーク
イニシャルである「J」の筆記体文字で飛行機の軌道を表現しました。
・意識したこと
背景が写真であることにより手前のレイヤーにある情報の見づらさを危惧し、下にスクロールするにつれて背景にぼかしの効果がかかり白っぽくなるようにしました。また、グラデーションや透過の効果をかけて、画面に奥行きを感じられるように意識しました。
・反省点
今回はやりたいと思っていたことがやれないことが多く、試行錯誤をしているうちに今回の課題であるランディングページを作るという目的を忘れかけてしまったことです。そのため結構な時間を要してしまいました。
○やりたかったこと
・画面自体は遷移させず、検索欄だけを切り替えられるようにする
・縦スクロール内に横スクロールの画像がある
・スクロールした際に、「おすすめの旅行先」をその場で固定させたまま透明化させて消す
また動画を見て学んでおこうと思います。
前回のDaily UI ↓
この記事が気に入ったらサポートをしてみませんか？