[chat face="me.jpeg" name="ただのお母さん" align="right" border="brown" bg="none"]デザインの勉強の仕方ってどうすればいいの?[/chat]
それはデザインを見て分析する!
これに尽きるんだと思います。
(偉そうに言っていますが、私にはこの観察力がありません。)
で、観察力を養うために、自分なりのデザイン分析をしていこうと思います。
ウエディングサイト The Okura Tokyo ウエディング
The Okura Tokyo ウエディング https://theokuratokyo.jp/wedding/
◾️どんなサイト?
自社ホテルでのウエディング提案
- ◾️目的は?
- フェア予約してもらい成約
◾️ターゲットは?
20代半ば
◾️デザインの意図は?(配色・フォント・レイアウト)
配色→ ゴールド/ベージュ/グレー
フォント→ FOT-セザンヌ Pro M,游ゴシック
OptimaLTPro-Medium,HelveticaNeue,Helvetica,"Droid Sans",sans-serif
サイズ:5種類
レイアウト→ 中 max-width: 1480px;
◾️考察して気づいたこと
・英字が少ない
・動画や画像が青と黄色のトーン
・背景色に薄いピンクベージュ#f9f4f0
・footerに濃いピンクベージュ#99857a
・写真の配置が独特
・情報がスッキリしている
◾️自分が持ったイメージ
上品・清楚・高価→why→ファーストビューの動画、1フレームごと見せたいものだけフォーカスしているので、余計なものがなく上品なイメージが伝わってくる
計画的に結婚式を考えている花嫁が憧れる→why→ホテルウエディングはたくさんの人を招待するイメージだから、その場合準備が必要
たくさんの親戚や友人に囲まれての式が想像される
動画がここの雰囲気を凝縮していて、他と比べようと思う気持ちが薄れる(離脱が少なそう)→場所にフォーカスした紹介ではなく、花嫁のイメージにフォーカスしているので想像しながらHPを眺めることができる
ウエディングサイト bnature-hawaii
bnature-hawaii https://bnature-hawaii.com/
◾️どんなサイト?
ウエディングコーディネーターからハワイの挙式を提案
◾️目的は?
問い合わせ
◾️ターゲットは?
20代後半
◾️デザインの意図は?(配色・フォント・レイアウト)
紺#023752/白#fff/水色
◾️考察して気づいたこと
・ナビがなく、ハンバーガーメニューでcontactが固定
・ヒーローの余白はボーダー
・ロゴをクリック→右から左へフェードアウト
・メニューをClick→上から下へフェードイン
・コンタクトをClick→右から左へフェードアウト
・他カテゴリ移動は下から上へフェードアウト
・フェードアウト動きも波のようなイメージ
・白地でカーソル動かすと水色の◯
・hover時は、◯が紺でテキストがゴールド
・トップのファーストビューでのカーソルは白◯に下▽
・カテゴリに飛ぶときのカーソルは白◯に+
・ブログに飛ぶときのカーソルは白◯に→
・infoのリンク、フッターナビは◯紺にゴールドテキスト
・contactボタンは画面横いっぱいで、カーソルは白◯
・
・画像はカーソルあたると大きくなる
・スライドショー切り替えがグニャんって海をイメージ?
・
◾️自分が持ったイメージ
・ファーストビューが好き→なんで?→かしこまっていない、値段も高いイメージがない、写真が流行り(オシャレ)を感じる
・自分の好きを表現できるイメージ。
・あまりハワイ感は感じられず
・写真が多いのでフォトウエディング?
・見ていて飽きないが、結局何ができるのか?
・動きがたくさんあるのに心地よい
使用フォント
FP-KoburinaGoStdN-W6,游ゴシック体,Yu Gothic,YuGothic,sans-serif
Libre Baskerville,serif;
サイズ:5種類