Because We Love Happy Coding

フリーライターがPHPとかJavaとか勉強してます

カンプの原紙を作った

最近、個人プロジェクト「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くらいでいいのじゃないだろうか。

f:id:mogami74:20171030173932j:plain

こうして画面サイズを横並びにして作ることで、他の画面サイズも意識しながらカンプを設計することができる。