PC
〇イラストの中でもよりナチュラルなテイストのイラスト講座のイメージで、全体的に柔らかい印象になるようにまとめています。鮮やかなブルーとピンクをアクセントにしてかわいらしさも取り入れるようにしました。
〇文字をしっかり読んでほしいところは画像を少なめにし文字情報に集中してもらえるようにしています。また文字情報を伝えるというよりはワクワク感を伝えて講座への興味を引きたいところは画像を多く使い視覚的にアプローチしました。
〇シンプルな分、見てほしいところはマーカーを引く動きなどを適度にいれて強調するようにしています。
Responsive
〇STUDIOによるスマホ表示のレスポンシブ対応も行いました。
〇カード型のデザインをいくつか採用しているため、縦に長くなりすぎないように工夫をしました。最初の講座の紹介カードでは、カードの中身をスクロールできるようにすることでワクワク感と分かりやすさのどちらもとれるようにしています。
〇料金プランの表は、特にスマホだと小さくなりすぎてしまうため、カード型にして読みやすさを重視しました。またレスポンシブ画面ではPC画面と違い「プラン表」と「こんな方は〇〇プラン」のカードが離れすぎてしまい、画面をいったりきたりする必要がありました。そのため「プラン表」と「こんな方は…」の要素をそれぞれセットにしてなるべく少ない移動量で見ることができるようにレイアウトを大きく変更しています。
Skill
使用技術
デザイン
Figam
コーディング
STUDIO(ノーコードツール)
Period
期間
デザイン
1日
コーディング
3日
Back To Page
Contact
ご覧いただきありがとうございました!
ご相談・ご依頼など、お気軽にご連絡ください。
メールのほか、SNSのDMからのご相談も受け付けています!
kino.work111@gmail.com
@kinota315
@kinota518
