Webサイトのデザインを一から勉強してみる VER.1
あがた🌞です。
前回のブログでも話したように、まずは本を読んでWebサイトのデザインの勉強をしました✏️
私が参考にした本はコチラ。
⏬それでは張り切ってどうぞ！
Webサイトをデザインする って？
基本的には
・写真、テキスト、イラストやメニューボタンなどの要素をWebページにどうやって配置するかをデザインする
・企業や商品のイメージ、サイトの役割を考えて配色を決める
こんな↑ことをします。
ひとことで「デザインする」と言っても、「自分の好きな見た目をデザインする」だけでは成り立たず、
「このデザインでどういうことを伝えるのか」つまり「どういう意味を持たせたくてこのデザインにしたのか」が大事！
私なんかは授業の課題でよく「モノトーンデザインが好きだから～」と、今流行りのモノトーンどシンプルデザインをしていたわけです。（今もしてる）
モノトーンってだけでまとまって見えません？笑
これがダメなんです。モノトーンなら「なぜモノトーンにしたのか」が言えないとダメ。
デザインに意味を持たせることで「このデザインでこういうことを伝えたいんだ」というWebサイト訪問者への説得力につながります。
どうやって説得力のあるデザインを作るかがミソ！！
また、デザインする時に、そのWebサイトの使いやすさ問題も出てきます。
例えば、具体的に悪い例をあげると、
「会員登録がしづらい」
「画像が文字に重なっていて見づらい」
「ボタンが小さくて押しづらい」
などなど。
私は使いづらいWebサイトは行きたくなくなります。
こんなのが理由でWebサイトの訪問者が減ったら…？Webサイトが存在する意味がないですよね。
訪問者がすぐに別のサイトへ行ってしまうようなサイトはダメ🙅♀️
訪問者がいない＝Webサイトを見る人がいない
わけだから、Webサイトが存在している意味がなくなります！
つまりWebサイトのデザインは、
伝えたい情報をきちんと伝えられる設計にすることがポイント
になります。
Webサイトのデザインあれこれ
Webサイトのレイアウトの基本となるものがあります。
これは、Webサイトのレイアウトの中でも、マルチカラムレイアウトと呼ばれるものです。
と言われても難しいので、学生サイトを参考にすると…
こんなかんじ。
（学生サイトだからかフッタはなかった）
かんたんに言うと、
ヘッダとフッタ：Webサイトのロゴや、メニューボタンをのせるところ
メインコンテンツ：Webサイトの内容をのせるところ。主にサイドバーをクリック→それに応じたコンテンツが表示される連携が多い
サイドバー：常に表示されているメニューボタンのようなもの。押すとそれに応じたメインコンテンツ部分に表示される
例）履修登録ボタンを押す→履修登録ページがメインコンテンツに表示
こう。
でも、スマホ版Webサイトによく使われるのはこのレイアウトじゃなくて、シングルカラムレイアウトが主流。
小さいスマホ画面の中で、伝えたい情報が伝わりやすいのが特徴です。
私たちが作るスマホ版学生サイトも、シングルカラム化を第一に活動を進めていきます💻💭
さいごに
いかがでした？？
Webデザインの超！入門！！ってかんじです。
参考にした本には、配色だとかのWebサイトを作る上での基本が他にもいろいろ載っていたわけですが、
（具体的なことを含めて）続きは別のブログで！！
あがた🌞