ウェブサイトを作る上で避けて通れない道はデザインです。
正直裏のコードを検証モードを開いてわざわざ見る人なんて(僕みたいな人以外)いませんので表に出るデザインがウェブサイトの命とも言えます。
デザインには「絶対こうじゃないとだめ」ということはないのですがある程度ちゃんとしてないとウェブサイト自体が崩壊してしまうのでこの章では特に詳しいことまではいいませんが簡単にデザインの説明をしていきます。

とりあえず意識すること

• ウェブサイト全体で世界観を統一しましょう
  「さっきまで神社のサイト開いてたのにいきなり雰囲気がネオンだらけの新宿みたいになった」なんてことがあるとどのサイトに訪れているのかわかりません。
  使う色だけでなく、フォント・marginやpaddingの量・フォントの太さ・角丸の量などまでちゃんと統一しましょう
• ちゃんと報告しましょう
  先輩にほぼ毎日報告しましょう。完成してから「思ってたんと違う」って言われたら終わりです。
• 頼りすぎないようにしましょう
  画像などの制作も頼りたくなるかもしれませんができるだけ自分でやりましょう。
  自分が欲しい画像をちゃんとわかってるのは自分だけです。
  (あと大体の作業は人に頼むより自分でやった方が早いです)

これらのことはどのようなWebサイトを作るときにおいても言えるため心に留めておいてください。
次の見出しからはデザインについて細かく説明していきます。

色

ウェブサイトのテーマ(雰囲気)を決める色は相当重要です。
すでにウェブサイトを作る元のロゴやイラストなどが決まっているのであれば色はそれに合わせて統一感をだしましょう。まだ色が決まっていない場合はAdobe Colorなどで色を4色選びましょう。

4色より多くするとWebサイト内で色の統一感がなくなりどのようなウェブサイトなのか伝わりにくくなってしまいます。

フォント

ウェブサイトには基本的に文字が入ってるのでフォントも重要になってきます(正直全部重要)
ウェブサイトの雰囲気によって使うべきフォントは変わってくるので今回は触れないですがウェブサイト制作全般において重要な事を以下にリスト形式で書いていきます。

• フォントはデフォルトのままにしないようにしましょう。
  Safariなどで想定していなかったフォントが使われてしまったりします。

body {
  font-family:;
}

で設定しておきましょう

• ウェブサイト内でフォントは1つ(太さは考慮しない)だけにしておきましょう
• フォントはGoogle Fontsがおすすめ

使い方はhttps://peraichi.com/univ/20220502 などを参考にしてください

具体的にどうすれば...!?

実際にあるウェブサイトをたくさん見ましょう。
(とくにプログラミングとかをメインでやってる企業の製品紹介の個人向けウェブサイトがおすすめ)
たとえばLINEの公式ウェブサイトを見てみると色はLINEの緑・白・黒だけで統一されていてタイトルの英語フォントもロゴと同じ太字のものが使われていることがわかります。
また、ProCreateの公式ウェブサイトでは画像などには色の統一感が鮮やかということ以外あんまりありませんが、背景色・文字色・については黒と白色の二色にまとめられていて、購入ボタンのみ青色をアクセント色として使っていることがわかります。

このようにほかのウェブサイトを見るとデザインの参考になるのでぜひ様々なウェブサイトを見てみてください！！！