名刺デザインを自作してみた

エンジニアが集まる勉強会に最近行こうかと思っているのですが、
そうなると名刺を用意しておきたいなと思い、色々調べてみました。

求める条件は以下の二点です。

• 自分でデザインをPDFファイルとして用意したい。
• そのデザインを元にした名刺の印刷をオンラインで注文したい。

使うツール

はてブを漁ったところ、（イラレは除外するとして）Adobe ROMEやpicky picsなどが見つかりました。

Adobe ROME

Project ROME | All-in-one content creation and publishing.

新規作成で91mm×55mm（日本の一般的な名刺サイズ）を入力。

最初はレイヤーもルーラーも表示されてないですが、
表示するように設定すると割と使いやすくなりました。 機能も一通り揃っている印象。

ただ個人的にとても残念だったのが、
オブジェクトをドラッグしても補助線が表示されない点。
補助線が無いと丁度真ん中にオブジェクトを配置、といったことも至難の業です。 PowerPointに慣れている自分としてはどうしても欲しい機能だったのでROMEは断念しました。

picky pics

Picky-Pics

かなり奇麗なテンプレートが揃っており、使えそうな素材もいくつか用意されています。
フォントは数はあまり無いものの、特に問題なさそう。

ただ、図形編集機能の自由度があまりにも少ない。
これは、テンプレートを基本的に使ってほしいということなのでしょうか。
必要十分な機能だけを提供するということなんでしょうが、
今回はちょっと使えそうにありませんでした。

結論

結局色々探してみて、PowerPointよりも良さそうなツールは見つかりませんでした。
最初からそうすりゃ良かった！！

デザイン作成

デザイン作成で行ったことを断片的に羅列。

色の検討

今回作るデザインはFlat UIをテーマにしようと元々決めていたので、
あの有名なサイトを利用しました。

Flat UI Colors

ここからRGBでいくつか色を拝借。

アイコンの準備

SNSなどの連絡先情報を記載する際にアイコンを利用しようと思い、準備しました。

フォントとして埋め込み

最初、Bootstrapでも使われているWebフリーフォント、FontAwesomeを使ってアイコンを表示しようと思い、試行錯誤しました。（参考にしたサイト）

しかし、いくらやってもうまく表示されず、日本語版のPowerPoint for Macには対応していないのだと判断し、断念しました。

ダウンロード

アイコンは以下のサイトのを使用しました。

Icons DB - free custom icons

ここで、contactsとtwitterとfacebookは用意完了。
はてなブログのロゴはさすがに無かったですが、「はてなブログ 公式 ロゴ」で検索したところ、
しっかり公式配布されていたので、拝借。

加工

白抜きにしたいので、事前にGIMPでちょっと加工します。

インポートして、Colors>Colorizeを選択後、Lightnessを100にすることで
画像を無事白に加工することが出来ました。

その他のアイコンの挿入

メールや電話などのアイコンも欲しかったのですが、
これはデフォルトのフォントで用意されているのでそれを利用しました。

やり方は、編集タブ>文字パレットから入力、で表示されたパレットから文字を選択して挿入。

PDFとして出力

作成したオブジェクトをまとめて選択して、「図として保存」を選べばPDFとして出力出来ます。 オンラインサービスなどを利用して、フォントが埋め込まれているか一応確認しましょう。

名刺印刷を注文

今回利用するのは、名刺の達人という業者。

格安名刺・激安名刺はフルカラー100枚560円～の「名刺の達人」へ。

色々業者を調べた感じでは、結局どこも値段は似たり寄ったりということでしょうか。
なので、サイトの作りが割としっかりしている＆サンプルが載っている上記業者様に決定しました。

…この記事を書いている段階ではまだ注文していないので、
注文して名刺が届いたらまた追記します。

---

追記

名刺が届きました！
翌日には校正のメールが届いて、振り込みをしたらその翌日の午前中には届きました。

やっぱりテンション上がりますねー。
デザイン優先しすぎて文字小さすぎたかなーと思ったんですが、
ちゃんと綺麗に印字されててよかったです。