Webサイトのデザインを一から勉強してみる VER.3
あがた🌞＆ぱんちゃん🐼＆もなか👾です。
前回に引き続き、
今回は、学生サイトのどこに何があってどんな配色かなどの、レイアウトを考えていきます！
私たちの学生サイトは、こんなかんじです。
実際の学生サイト
以前あげた特徴をまとめると、、
・スマホ版ページからできることが少なすぎる（PC版から操作しなければならない）
・PC版ページなので指でタップしづらい
・いちいち拡大しなければならない
・拡大している状態でPC版のメニューをタップするとサブメニューが表示されるがそれと同時にページの位置がずれる
と、とっても使いづらい学生サイトなわけです。
まず、サイトのレイアウトを考える。
サイト内のどこにどんな情報があるかを考えなければなりません！
VER.1でも言っているように、スマートフォン版のサイトなので、シングルカラムレイアウトで考えていきます。
コーディングを始める前に、イラストレーターを使ってモックアップを作ります。
それがこちら！（ドドン）
私たちの考えたモックアップ
ヘッダーに書いてある「融合系 女子（自分の名前）さん」をタップすると、サブメニューが表示され、ログアウトができるように考えました。
よく使う9項目をピックアップして、指でタップしやすい大きさで分かりやすいようにアイコンを並べました。
そして、アイコンの並び順ですが、
履修登録と時間割、試験と成績、など関連する項目が並ぶように。
また、頻繁に見る掲示板を左上に、1〜2回生はあまり使わないキャリア支援を右下にするなど、使用頻度によって配置を考えてみました。
アイコンはいらすとやです。
アイコンも背景色に合うように、工夫しました。
例えば、、
☝︎この画像のままだと机の色と背景が同化してしまいます。
これを…
…こんな☝かんじに木製っぽい机に変えました。
メニュー一覧の下にある、赤色の二重線の囲いは、お知らせ欄になります。
「履修登録期間はいつまでですよ〜」などの重要なお知らせを表示してくれます。
このお知らせ欄は現在の学生サイトにもあるのですが、もなか👾以外の二人は存在を知りませんでした…
背景とヘッダーの色の組み合わせ
はっきり見えやすい文字色
アイコンとのバランス
…などなど、試行錯誤しながら作っていきました。
元の学生サイトと比べて、
メニューが大きなボタンでタップしやすい！！
私たちが今の学生サイトに何よりも求めていたことです。
こうして、私たちの理想の学生サイトのデザインが決まりました。
これをコーディングで実現できれば…！
完成も間近です！
次回、いよいよコーディング！
もなか👾
Webサイトのデザインを一から勉強してみた。シリーズ