Webデザインの基本｜最適なツール・サイズ・フォント選び

Photoshop・Illustratorでしか表現できないデザインはコーディングでその表現をする事ができない

用途に合わせて最も適したものをつかう！
例：Photoshopで写真加工
　　Illustratorでアイコンやあしらい　
　　figmaで配置してデザインデータを作成

★重要なこと
実際の表示と同じ見た目のデザインを容易にくみあげることができる
クライアントに実際の仕上がりを直感的に見てもらう事ができる
コーディング実装に必要な各種数値を取得することができる

モニターサイズ
1位1920ピクセル
2位1536ピクセル

1920のサイズで要素がパンパンだと1536のモニターでは表示しきれなくなる
みんなが1920な訳じゃない！
適切なコンテンツ幅を意識して考えるのが重要（コンテンツ幅🟰表示する内容の幅）

コンテンツ横幅
【PC】950-1200ピクセル
小は代を兼ねる！大きいものの中に小さいものは表示できる！

全てのモニターで見れるように万能に表示できるコンテンツ幅じゃないとダメ！

1200がコンテツ幅だとアートボードは1440くらいがいい！

アートボード幅よりコンテンツ幅が大事！

【スマホ】
1位 390ピクセル
2位 375ピクセル

小さいサイズだと320〜
大きいサイズ430
割り切れる方が良いため390くらいがちょうどいい！（奇数だと左右の予約に小数点できてしまう）

レスポンシブ
全てのモニターで崩れなく表示させなければならない
例　PC 横並び
　　SP 縦並び

フォント
①最初からパソコンにインストールされてるフォント
問題:Windows、Mac、スマホやアンドロイドでも使えるフォントが違う

同じフォントでもOSによって表示が異なる游ゴシックはMacもWindowsも共通して使えるが、文字の太さが違ったりする

②Adobeフォント
OK例:画像として埋め込む文字に
NG例:webフォントとしての使用

webサイトの持ち主がAdobを契約をしていないと規約違反
メインコピーなどデザインをこだわる場合はAdobeフォントを画像としてつかう！

★Googleフォントを使うのが一般的
端末やブラウザに依存しない
どの端末でも表示崩れが起きない

★セフルホスティング
サーバー上にフォントを置いて利用する方法
ライセンス、権利確認は要確認

※共通フォントを調べる方法
「webデザインで使えるフォント」とネットで検索する！