<aside> <img src="/icons/list_blue.svg" alt="/icons/list_blue.svg" width="40px" /> 目次

</aside>

❶デザインカンプは原寸の設計図

ワイヤーフレームはサイズにこだわらずに作ってOKです。それに対してカンプは原寸で作るのが大原則！

コーディング後の完成形と同じものを目指して、全てのサイズや余白幅を作り込みます。

ワイヤーフレームとの違い

綺麗に作らなくていいし、なんなら手書きでもいい

アートボード幅1366pxなら、ブラウザのウィンドウ幅を1366pxで表示した見え方と同じになるように

<aside> 📏 サイズを指定するもの

左右の余白を除いた幅のこと。ブラウザのウィンドウを広げたり狭めたりしても伸び縮みしない部分のことです。

Untitled

様々なサイトで、ウィンドウ幅を縮めたり伸ばしたりして、コンテンツ幅を見つけてみましょう。（※トリッキーなサイトもあるので、参考を探すときには注意）

まずコンテンツ幅の上限を決めましょう。

PCのよくあるコンテンツ幅例：960px〜1200px

細めのコンテンツ幅のサイト例

下層のブログページの例

広めのコンテンツ幅のサイト例

実際の最適なコンテンツ幅はコンテンツの内容などによって変わってきます。

最初のうちは、いろんなサイトを見たり、プロの人に聞いてみたりしましょう！