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

デザインツールは『自分が使いやすい』ではなく、

制作チーム全体の中で制作プロジェクトに適応したツールを選ぶ。

PhotoshopとIllustratorは不向きなのか？

→それぞれ写真やイラストに特化したツールのため、デザイン専用ではない。

Photoshopで使う写真を加工し、Illustratorでアイコンやあしらいを作り、

それらをfigmaで配置してデザインデータを作成する。

💡アートボードの考え方

PCの場合

意識するポイント①モニターサイズとコンテンツ

モニターサイズそのままで作ると、それより小さいサイズだとはみ出してしまう。

コンテンツの幅を意識して制作をする（横幅は固定）

⭐️日本の大手企業サイトのコンテンツの横幅→950〜1200px

1200pxがコンテンツ幅の場合、アートボードは1440pxくらいが良い

スマホの場合

小さいサイズだと320px〜意識する

割り切れる方ファ良いため、アートボードは390pxくらいがOK

意識するポイント②レスポンシブ

ユーザーが表示するモニターサイズは様々

→全てのモニターでどんな時でもどんなサイズでも崩れない表示にすることが大切

💡webで使えるフォント、使えないフォント

・webで使えるフォント→最初からパソコンにインストールされているもの

注意点

・WindowsやMac、iOSとAndroidによって使えるフォントが異なる

→インストールしない限り使えないので、元々あるものに置き換えられる

・同じフォントでもOSによって表示が異なる

→游ゴシック・・・それぞれの環境で共通で使えるが、文字の太さが異なる　など

⭐️それぞれのOSでどのようなフォントが入っているのか確認をする

💡Adobeフォント（使ってる人多いから注意）

使える場合；webサイト内に画像として埋め込む場合

使えない場合；webフォントとして指定する場合

→webフォントとして使用する場合はサイトの持ち主がAdobeと契約する必要がある

💡グーグルフォント

→グーグルのインターネット上にあるデータを読み込んでブラウザに表示

端末やブラウザに依存しないため、どの端末でも使える＋崩れない

💡セルフホスティング

→サーバー上にフォントファイルを置いて利用する

注意点

・フォントデータを抜き出すことができるため、

フリーフォントでもセルフホスティングは禁止しているフォントもある。

ライセンスや権利関係は必ず確認する。

それぞれのOSに必ず入っているフォントを調べたい時は

フォント　共通　などで検索すると一覧が確認できる。

現場ではグーグルフォントが主流になっている。