Figmaは、ワイヤーフレームを作ったりできるブラウザツールです。
最初の選択
Figmaは、下記の３つの選択肢がある。
- 新しいデザイン ファイル
- 新しい FigJam ファイル
- インポートファイル
新規にワイヤーフレームを作る場合は、「新しいデザイン ファイル」を選択する。
普通は、スマホサイトのデザインを作ってからPCサイトのデザインをするんだったかな？
確か、そんな事が何処かに書いてあった気がする。
今回は、PCサイトがメインでスマホサイトはおまけみたいなもんなのでPCサイトからワイヤーフレームを作っていこうと思う。
細かい事は説明する気が無いので、詳しくは下記のサイトを見てくれ。
【初心者必見】figmaの基本的な使い方を紹介！実際にデザインしながら使い方をマスターしよう！
https://jp.code-dict.com/media/web-design/3652/
【初心者必見】figmaでワイヤーフレームを作ってみた！figmaで作成するメリットとは？
https://jp.code-dict.com/media/web-design/3869/
フレームを作成
とりあえず、フレーム作成ツールを選択して右のとこにある「デスクトップ」という箇所を選択してみた。
なんか画面に1440×1024のフレームが出来た。
希望するサイズと違うので、ちょっと弄って希望するサイズにする。
希望サイズ
エントランスページは、縦横フルウィンドウ表示
トップページは、(横幅：100%) 縦幅：任意)
最大サイズで計算するとディスプレイごとに変わってしまう。
最小サイズはスマホ表示になってしまう。
なので任意の表示サイズに設定する。
アートボードサイズってのとコンテンツ幅ってのがあって、
アートボードサイズは画面幅だけどブラウザをフル画面で使っている人ってそんなに居ないんじゃないかなと思う。
大体、少し小さくして使ってるよね。
画面幅が、1920pxでも実際のブラウザ幅は1100pxとか、
サイトによって、マチマチだし何が正解とは限らないんだよね。
今の主流ってのはあるけど。
コンテンツ幅・ファーストビュー・アートボードサイズって３つあって、
コンテンツ幅：1720px
ファーストビュー：850px
アートボードサイズ：1920pxくらい
アートボードサイズがディスプレイ幅で
コンテンツ幅は、コンテンツ幅で
ファーストビューってのが、ブラウザの横幅を小さくしていても表示されるサイズみたいな。
んで、ワイヤーフレームはどの大きさで作るのが正解なんだ？って話だよね。
どのみち後で調整するし、とりあえず横幅1100px 縦幅 1024pxくらいで作っとけば問題ないか？
知らんけど
実際作ってみて、ブラウザで色々試してみてベストのサイズを割り出そう。
とりあえず自分が使っているディスプレイサイズは、
1920 x 1080
このサイズより横幅が、小さければ良い。
縦幅は縦に長いサイトにするのか、フルウィンドウでファーストビューに収まる大きさにするのかで変わる。
あとは、まぁ適当に作成