website見る練習05
00.選んだサイトはこちら！
02.このサイトを選んだ理由
突飛なデザインにしたいと思ってしまう傾向があり、それよりも見る人が見やすい基本ができたものを作るべきだと最近見直したので、それに沿ったシンプルで基本形だけど分かりやすく構成されているものを見てみようと思ってこのサイトにした。
基本形なのに、つまらなさを感じないポイントはどこだろう？と知りたい。
03.概要
大学ごとに最適化されたスケジュール管理アプリのLP。授業にレビューをつけることができてそれを見た人がレビューを参考にして講義を選択できる。アプリで講義を追加して時間割を作ることができる。課題や授業メモ、出欠率の一括管理もできる。さらにカレンダーでプライベートもでまとめて書き込める。掲示板もあり、サークルの情報があったりレポートの提出期限をチャットで聞いたりと重津下サービスが盛りだくさん。
04.目的
アプリのダウンロード、認知
05.ターゲット予想
大学の運営側
大学生
高校生（情報収集）
06.ファーストビュー
左上にロゴがある、控えめというか、「でか！」「主張！」って感じがない
キャッチコピー。これがインパクトある大きさ。結構大きい。そして悪く言えばひねりがないがよく言えばめちゃくちゃ分かりやすい。
ぼっーとしていても何のサービスか言葉でちゃんと分かる。
「時間割を登録してクラスメートとつながろう」というキャッチコピー。シンプルだけどサービスのすべてを語っている。appleみたいに壮大でないしルミネみたいに遠距離型でもない、だけどそこに堅実さと無駄がないのに最大能力を発揮しているように思う。
イメージは、スマホにサービスのアプリの時間割画面が表示されているものが斜めにある。無空間だけど学校の机に置いてあるようにも見える。画面からカラフルな丸がたくさん出ているように見えて、そのうち5つの丸には人がある。そして。アニメーションの吹き出しが人物の丸にかかって「課題の提出いつだっけ？」「この授業、就活でも役立った！」などと数パターンのセリフになっている。このセリフはアプリでできることそのものでFVを見ただけでこんなことができるんだろうなとみている人をリードしてあげている。
私だったらFVを「イラスト又は大学生が笑顔でみんなでいる写真にキャッチコピーかな。それか時間割のイラストに吹き出しかな」程度しか浮かんでこなかった。このFVは、人を丸の中に入れて散りばめることで、対面しなくてもアプリ上でつながれることを表現している。さらに小さい丸はたくさんいるということ。この発想はなかった。遠くにいる人同士がつながっているときに丸で表現できる。
白地背景にコンバージョンボタンが緑で映えている。ちゃんと目立つべき所が目立っている。
07.ナビゲーションメニュー
ハンバーガーメニューがあった。昨日見た「MAIN DISH」と同じでメニューを押しても別ページに飛ぶことがなく同じページの下にスクロールされるという仕様。
08.フォント
FVのキャッチコピーは画像だった。
使用されているフォントは以下。
・Noto Sans JP ・・・ かな漢字カナ
・Roboto Condensed ・・・ 英数字
どちらもグーグルフォント。
・中見出し 40px
・小見出し 24px
・本文 16～18px
09.配色
メインカラー：#1AC067 鮮やかな緑よりの黄緑
アクセントカラー：#1940A5 青
その他：#FFCB2B 黄色
文字色：#1C3244 深い紺色
コンバージョンボタンがある項目だけ背景が毎回白地。緑のボタンが目立つようにかもしれない。
地色は、緑。
10.考察
まず、フォントの種類を2種類に限定している。
文字のメリハリがきちんとしている。大きい見出しと本文の差をくっきり分けて読みやすい。
リズムがきちんとある。基本形を使用。
シンプルだが動きをつけるところはつけている。
スマホをなしにしてスマホの画面だけになっているのは、余計な要素を省いて本質的なサービスをきちんと主役にするため。なんでもかんでもスマホのモックアップを遣えばいいってもんじゃないんだなと思った。
そういえば、ハンバーガーメニューしかついてこない
イラストがすべて絵文字調。スマホの中の世界を表現されている。LPで見るとちょいレトロに感じかわいい。
スマホ版は縦にきっちり箱が組み替えられただけ。きちんと基本形を作っておけば、レスポンシブデザインも簡単。
基本形だけど、ちゃんとサービスを理解したうえで制作しているからなのか、デザインとしても洗練されている。