デザインカンプの基本知識

PhotoshopやIllustrator = もともと印刷物などWeb以外のデザインを得意とするツール。
Webの構造や実装に対する理解が十分でないケースが多いことが原因。

デザインツールに求められる主な機能3つ

1. 実際の表示と同じ見た目のデザインを、簡単に組み立てられること。

2. エンドクライアントに、完成イメージを直感的に見てもらえること。

3. コーディング実装に必要な数値（フォントサイズ・余白・カラーコードなど）を、正確かつ簡単に取得できること。

中でも、デザインカンプ（完成見本）を作成する段階ではFigmaが最も適していると言われている。

②アートボード（デザインする横幅）設定の考え方の概要

▼PC版アートボードの考え方
現在のモニターのシェア率は
1位：1920px
2位：1536px

そのため「1920pxで作ればOK」と考える人もいるが、 画面いっぱいにデザインしてしまうと、1536pxのモニターでは一部が表示しきれなくなってしまう。

ポイント：最適なコンテンツ幅を考えることが大切

▼コンテンツ幅（表示する内容の横幅） 日本の大手企業サイトでは、コンテンツの横幅は950〜1200pxが一般的。 コンテンツ幅を1200pxとする場合、 アートボードサイズは1440px前後に設定するのがちょうど良いとされている。

▼SP版アートボードの考え方

スマートフォンの画面サイズで見ると、
1位：390px
2位：375px
→様々な機種を考慮して、390px程度で作成するのが最適。

③ウェブサイトで使えるフォント使えないフォント（デザイン制作との大きな違い）

Webで使えるフォント

1. パソコンに最初からインストールされているフォント インストールされていないフォントは正しく表示されない。

2. Adobe Fonts ・使える場合：画像として埋め込む文字（例：バナー、見出し画像など） ・使えない場合：Webフォントとして指定する場合（閲覧者がAdobe未契約だと反映されない）

3. Google Fonts 最も一般的に使用されるWebフォント。 Google上のフォントデータを読み込み、ブラウザに表示する仕組み。 特徴：端末やブラウザに依存せず、どの環境でも同じフォントが表示される。

4. セルフホスティング サーバー上にフォントファイルをアップロードして利用する方法。 注意：フォントのライセンスや権利関係を必ず確認すること。

Q&A

フォントに関して、「各OSに必ず入っているフォント」
→「フォント 共通」などで検索すると、共通フォント一覧が見つかる