最近、個人プロジェクト「LvUp↑」のカンプを描いている。
カンプに適していると言われるツールがいろいろあるけれど、私はIllustratorの練習も兼ねてIllustratorで描くようにしている。Adobeに高いお布施を払っているんだから、少しは取り戻さないとね。それを言ったら、AdobeCreativeCloudのツールでもカンプを意識したのがあるけれど、そちらはまだ使ってみてもいない…。
「Office事件簿」ブログのCSSを描きながら感じたのが、きちんと全テンプレート×全サイズのカンプを描くのがやはり理想、ということ。中途半端に描くと、後から「あっ、サイズ大きくした時どうなるんだこれ」とか「このテンプレートに適用しづらい」とか出てくる。
Bootstrapでは4つのサイズに分けるらしいので、私もそれに倣うことにした。実感としては、普通のサイトは3つに分けたら十分じゃないかという気もする。960以下のスマホ＆タブレット端末、960〜1200のPC、1,200以上の高解像度環境。でもまぁ、私は勉強中の身の上なので、Bootstrapに倣っておくことにしよう。
で、WordPressのテンプレートに適応する形で1ファイル作ることにする。WordPressのfront-pageに対応する用、front-page.aiファイルを作る。
中にはIllustratorのアートボードを4つ、サイズ違いで用意する。幅320px（iPhone5）、768px、998px、1200px。高さは、スクロールするので多めに1200〜2000くらいでいいのじゃないだろうか。
こうして画面サイズを横並びにして作ることで、他の画面サイズも意識しながらカンプを設計することができる。
