Webデザインのテンプレートを販売する

プロジェクト達成までに必要なこと

・UXについて勉強をする
・cssの基礎から勉強して自分で書けるようになる
・JavaScriptを活用できるようにする
・配色や色彩の勉強をする

cssについて

cssとは、htmlで記述された文章をWebブラウザやメールクライアントにどのように表示するかを定義するための言語である。例えば、scssでは以下のようなことができる。

・文字の色、サイズ、行間、行揃えなどの指定
・背景色、背景画像、ボーダー、角丸などの指定
・レイアウト、余白の調整

cssの基本書式

セレクタ{
  プロパティ：値；
}

○セレクタ：セレクト（選択する）という名前の通り、どの部分にcssを適用させるかを選択する役割を果たす。例えば、「h1,h2,p,img」などの要素や「id=”属性名” class=”属性名”」などのidやclassに指定した属性名のことを指す。

○プロパティ：適用するcssのスタイルの種類のことである。例えば、文字サイズ変更の場合の「font-size」や、背景色変更の場合の「background-color」などがある。

○値：セレクタに適用するプロパティをどのように変更するかの具体的な数値のこと。例えば、プロパティに文字サイズを変更する「font-size」が指定されている場合の「24px」「1.5em」「100%」などを指す。指定する値は、プロパティによって異なるため注意が必要。

参考：cssとは？

色彩や配色について

Webデザインの配色を考える際には、「ベースカラー」「メインカラー」「アクセントカラー」の3種類が重要であり、基本的には、ベースカラー70%、メインカラー25%、アクセントカラー5%という割合で配色すると美しいとされている。

★配色で気をつけるポイント

・色を使いすぎないこと
Webデザインでは多くの色を使うとまとまりがなく、統一感がないように見える。そのため、基本的に色は3~4色程度におさえるべきである。
・ユーザーが見やすい色を考える
Webデザインの場合、ユーザーの閲覧環境がそれぞれ異なるため、薄すぎる色を使うと意図したデザインに表示されない可能性がある。また、背景色と文字色のコントラストにも注意が必要であり、背景色と文字色のトーンが似ていると文字が読みにくく疲れてしまうため離脱の可能性が高まる。ユーザーの視覚的負担を減らすことを意識することが重要である。

参考：Webデザインにおける配色の基本