はじめに
こんにちは🧑💻
ラボルのデザイナーの寺岡です。
突然ですが、デザイナーのみなさん。名刺データってどうやって管理・作成してますか？ 僕は今までスプレッドシートでテキストを管理して、Illustrator(デザインファイル)で情報を入力していく、という作成方法でした。
スプレッドシートを見ながらイラレの中でレイヤーを複製して、名前やメアドとかを手動でカタカタ…といった作業でした。 まぁ、社員数も少ないし変更も数ヶ月に1回なので、このままの運用方法でいいかと思ってました。
しかし、今後は弊社は採用に力を入れていくつもりです。そうすれば当然、名刺作成作業の頻度は増えるはずです。 新入社員の名刺作成だけでなく、オフィス引越しなどの住所情報の変更が生じた際に名刺を全て手動で変えなければいけません。 作業としても大変ですし、手動だと入力ミスがありそうですね。
今回は、そんな問題を解決できるように「名刺データから名刺デザインを自動生成する」方法をご紹介します。 「手作業での名刺作成大変だなー」「誤植で怒られたことあるなー」といった経験のある方は、是非ご一読ください！
目次
前提
前提として、まず名刺デザインはできているものとします。 今回の名刺は画像のような完成イメージです(名前などのテキストはダミー)
今回は、役職・氏名・アドレスなどをテキストデータでまとめて、人数分aiファイルを作成していきましょう。
デザインデータ・テキストデータの用意
まずはテキストデータ(.csv)を用意します。 今回の場合、以下のようにスプレッドシートで管理します。
ちなみに弊社の場合、ビジネスサイドの方がシートを管理しているので、この時点でデザイナーがやることは、(初回だけ)シートのルール決めと(依頼の度に)ファイルの書き出し程度です。
シートの1行目は「役職」や「氏名」などの項目名にしましょう。
ちなみに、名刺に写真を使いたい場合はヘッダー行の項目の先頭に@を追加すると、画像パス(絶対パス)を記述できます。
→詳細: 【公式】データソースファイルの準備
これをCSVで書き出しましょう。
💡 [ファイル] > [ダウンロード] > .csvを選択
次に、CSVを流し込むデザインデータ(.ai)をテンプレートとして用意します。 この時点では、データを反映したい部分のテキストは適当で大丈夫です👍
変数機能
デザインデータにCSVを読み込み
Illustratorで変数パネルを開いて、先ほどダウンロードしたCSVファイルを読み込みます。
💡 [ウィンドウ] > [変数] > 「読み込み」を選択
このように、CSVの1行目が「変数」として表示されます。
読み込みできない時は、CSVの内容を修正する必要があります。 詳しくは公式さんの注意点を参照してください。
🚨 エラーケース - 半角スペースが含まれていると読み込めません。"山田_一郎"のようにアンスコなどで代替してください。(なぜか全角スペースは許容される) - 読み込みは可能ですが、空のセルがあるとNullとして判定されて、データ列が一列ズレたりします。空にしたい時は全角スペースのセルを作ってください。
読み込めたら次はテキストレイヤーと変数をリンクさせていきます。
変数とリンク
変数と紐付けたいテキストレイヤーを選択したあと「変数を動的に設定」でリンクさせます。 LEGOみたいなマークのやつですね。
それぞれのリンク全てを設定すると、こんな感じになります。
反映の確認として「データセット」から任意のデータを選択します。 10人いるので「データセット10」までありますね。
山田さんの1〜10郎までいますね。
10人とも、データが正しく反映できていることが確認できました！ 次は人数分のaiファイルを展開する工程です。
アクション機能
アクションの作成
先ほどリンクさせた10人分のaiファイルを別名保存していく流れになります。
別名で保存するアクションを新規作成します。
💡 [ウィンドウ] > [アクション] > 右上のmenuから「新規アクション」
記録が開始されるので「別名で保存する」という行動をイラレ君に覚えてもらいます。
💡 [ファイル] > [別名で保存する](Shift + ⌘ + S)
保存したら、アクションパネルに戻り■ボタンで記録の停止をします。
ここまでが「アクションの作成」です。次はこのアクションを自動で実行してくれるバッチ処理の設定です。
バッチ処理
次に、アクションを繰り返し実行できるようにバッチ処理をしていきます。 アクションパネルのメニューから「バッチ…」を選択します。
以下のようにバッチを設定しましょう。
💡 アクション: {さっき作成したアクション}
💡 ソース: データセット
💡 「アクションの『保存』コマンドを無視」 にチェック
「OK」で実行すると、人数分のaiファイルが自動で書き出されます。
meishi_{番号}_{名前}みたいな命名で保存できたらいいんですが…まぁ仕方ない。
アウトライン化しよう！
テキストをアウトライン化しないと印刷会社に入稿できないですね。 名刺作成に必要なこの作業も、自動処理させちゃいましょう！
アクションの作成
さきほど書き出した名刺データを開いて、新しく「アウトライン化する」アクションを追加します。以下の行動を記録させましょう。
💡 全てを選択(⌘ + A) 💡 アウトラインを作成(Shift + ⌘ + O) 💡 別名で保存(Shift + ⌘ + S)
バッチ処理
また、実行のためにバッチを設定します。
💡 アクション: {さっき作成したアクション}
💡 ソース: フォルダー
🚨 すでにアウトライン化してしまった場合、エラーでバッチが実行されないのでテキストレイヤーであることを確認しましょう。
実行すると、すべてがアウトライン化されたaiファイルが複製されました！
アウトライン化できているかな？
入稿直前のチェックとして大事なのが、レイヤー全てがアウトライン化されているかの確認です。
任意のaiファイルを開いて、すべてを選択⌘ + Aしたあと、フォントの検索をしましょう。
💡 [書式] > [フォントの検索と置換]
テキストレイヤーがまだ残っていれば、以下の赤枠に表示されてしまいます。 ここに何も表示されてなかったらアウトライン化ヨシ！
あとは入稿するだけ！おつかれさまでした！👏
まとめ
今回は、CSVでテキストデータを用意し、イラレの変数機能・アクション機能を駆使して名刺データを書き出す、という手法をご紹介しました。 この方法を使えば、社員数が10人でも1000人でも、名刺作成作業を効率化できますね。
他にも「自分はこんな効率的な作業してるぜ」というご意見あれば、是非教えてください！
それでは👋
関係ない雑学
カニのオス・メスって、「ふんどし」というお腹の模様で見分けるんですよ、知ってました？ ふんどしは、メスは卵を抱えられるように丸っこくなってるんだとか。ちなみにふんどしは食べられます。
最後に
ラボルでは、エンジニアを積極採用中です。1、2年目のエンジニアから経験豊富なテックリードやエンジニリングマネージャーまで、興味がある方はぜひご応募ください!!
