読者です 読者をやめる 読者になる 読者になる

clock-up-blog

go-mi-tech

CSSで名刺を作ってみた

CSS デザイン 印刷

名刺が切れた。次の名刺は自分でデザインしたい

名刺が切れた

そろそろ刷り直す必要があります。フリーランスになってから(正確にはフリーランスになると決めてから)、名刺を交換する機会が増えました。だいたい1年間も活動すれば100枚は消える。

これまでの名刺の作り方

僕は普段 Zazzle で名刺を作ってます。テンプレが山ほどあって良い。
ただ、そろそろ自分でデザインしたくなってきた。

デザインツール使えなくても CSS ならなんとか…

しかしながら僕はいまだに PhotoshopIllustrator も使いこなせてません。
スタイルシートは一応仕事で触るっちゃ触るのでなんとなく分かります。

CSS で名刺をデザインしてみる

Metro UI CSS を使ってみる

最近、自サイトのデザインをまるまる差し替えるために、Metro UI CSS というメトロ風の CSS フレームワークを使いました。なかなか使い勝手が良かったので、これは名刺デザインにも使えるのではないかと。

作ってみた

こんな感じになりました。フォントは スマートフォントUI を使用。

スタイル記述はぐっちゃぐちゃです。とりあえず見た目さえ整ってれば今は良いのです。

画像作成~入稿

流れ

さてデザインは出来上がったものの、これをどうやって名刺にするかというと、これすごいシンプルです。

  • (1) ブラウザで拡大表示して
  • (2) PrintScreenして
  • (3) ペイントツールで適当にトリミングして
  • (4) 画像保存して
  • (5) 名刺印刷サービスに入稿

んまぁ、こんなものです。
(1),(2)とかアホみたいでしょ?でも画質こだわらなければこれで十分かなー、と。
(というかこのくらいの解像度でどんな感じの仕上がりになるのか実験してみたい気持ちもあった)

画像作成

今回のスタイルシートデザインは 700 x 400 px で作ってますが、
これを1.75倍して 1225 x 700 px の画像を作りました。
f:id:kobake:20140429014034p:plain:w600

もっと良い画像作りたい場合

css で zoom:4 とかして、その状態で、Full Page Screen Capture でページ保存するとかすると、もっと良い画質のファイルも作れます。

入稿

Zazzle で無地のテンプレート選んで、
f:id:kobake:20140429014533p:plain:w400

画像をアップロードする。
f:id:kobake:20140429014545p:plain:w400

表裏それぞれ1枚ずつアップロード完了した状態。
f:id:kobake:20140429014550p:plain:w400

あとはポチポチと決済情報とか送付先情報とか入力していって、注文完了。

届きました

注文してから4日後くらいに届きました。やったぜ!
f:id:kobake:20140428122903j:plain:w400
f:id:kobake:20140428122915j:plain:w400

解像度

さすがに 700 x 400 px の 1.75倍の 1225 x 700 px だと、少しばかりアラが出るかな、という印象。パっと見ではそれほど気になりませんが。
700 x 400 px を3倍した 2100 x 1200 px くらいがちょうど良いかも、という感触。
むしろ解像度よりも文字の物理的なサイズが小さすぎたのが気になった。

文字のサイズ

ちょっとばかり文字が小さすぎました。Twitterアカウントのところとか、少し目を凝らさないと文字がよく見えない。印刷の問題ではなく単にフォントサイズの設定の問題。
ちゃんと実物サイズで確認しないとサイズ感はつかみにくいですね。実際に実物を手に取るまで、まさか字が小さすぎるなんてことは考えてもいませんでした。

入稿する前に家のプリンタで確認するのが良い。(うちのプリンタは白黒レーザーですけどね…)

色合い、質感

質感はテンプレ使う場合と変わらない。良い品質。

色合いがちょっとくすんで感じました。ディスプレイで見るのに比べると、やや彩度が落ちたかな、というところ。

…と、ここまで書いて気づきましたが、もしかしてこういうところこそ CMYK で色調整すべきところだったのかも。私プログラマなので(という言い訳は糞ですが)色表現とか気にしたことなかったです。もうちょっと勉強します。

統括

  • CSSでも割と悪くない感じに名刺が作れた。
  • 反省点
    • 700 x 400 px を3倍した 2100 x 1200 px くらいで入稿する。
    • 文字サイズが小さくならないように気を付ける。
    • 色合いはディスプレイの表示と異なることを意識する。CMYK で管理したほうがよさげ。
    • 入稿前に家のプリンタでちゃんと印刷確認しておく。
});