【レイアウト〜コンセプトまで】webデザイナーの名刺の作り方をまとめてみた

東京に来てから勉強会やもくもく会に参加するようになりました。

そこで必ずと言っていいほど行われるのが名刺交換です。

デザイナーの人からいつもおしゃれな名刺をもらっていましたが、悲しいことに僕は名刺を持っていませんでした。

もらってばかりでは格好がつかないと思い、今回初めて自分の名刺を作ってみました

走るとり
初めてだった分、かなり学びが多かったです。

完成品

めちゃくちゃシンプルです。

名刺の制作時間

計ってないですが、入稿まで含めて実質6時間くらい?でした。ぶっ続けではなく2日に分けて制作しました。

名刺のコンセプト

せっかく作るなら渡した後に捨てられたくない!まずその想いがあったので、すこしスタイリッシュに、かつ高級感を持たせようと考えました。

あえて本名を載せていないのは、この名刺にお仕事用という考えがなく、あくまで名刺をもらったら返すための「お返し用」だからです。

でもやっぱりTwitterやブログは見てほしいし、もし仕事の依頼があればメールくださいという気持ちは出しました。

入れる要素が少ないため、レイアウトはかなりシンプルに、色合いは目立つようにしました。黄色と黒は当ブログのイメージに合わせもので、個人的に好きな色の組み合わせを選んでいます。

似せたわけではないのですが、メタルギアのfoxhoundの色合いに似てしまいました。オタ魂…。

この名刺のターゲット

名刺をいただいた人、同じ職種の人たちがターゲット。

おそらく年代的にもそんなに離れていない人たちに渡すので、色も落ち着かせるよりはむしろ目立たせてもいいかなと考えました。

名刺に入れたロゴの意味

必要な要素だけでレイアウトを組んでみると思ったよりシンプルになり過ぎて、レイアウトが少し退屈になってしまいました。

そこで今回はロゴ制作にも挑戦してみました

コンセプトやら何やら手探りでしたが、「ロゴ コンセプト」「ロゴ 作り方」などで検索してコンセプトも設定しました。

まずは形を適当に考えて、整えていく間にコンセプトを肉付けしていった感じです。

色も悩んだ…。

このロゴの自分なりのコンセプトは、

  • ロゴには漢字の「走」を入れました。言わずもがなハンドルネームの「走るとり」からきています。
  • ロゴを左90度に「走らせる」と「走」という文字が出てきます。
  • 四角で区切られた部分は「道」を表しています。やりたいこともなかった僕が、webデザイナーという道を見つけるまで迷いながらここまできた。そんな感じを表しました。
  • 四角はもともと16個で構成されています。16のエンジェルナンバーの意味は“ポジティブな考えと見通しを持っていれば、それがあなたの物質面の問題を解消します”とのこと(完全に後付け)。

性格上、きっちりしたロゴしか作れなかったのですが、そこも自分らしさなのかなと思ってます。

名刺制作での細かいこだわり

横にした理由

単純に載せたい要素が少なかったので。

フォントのイメージ

使用したフォント:Ailerons

シンプルで高級感のあるフォントを選びました。

ただこのフォント、そのまま打つと数字のゼロ(0)と英語のオー(O)区別がつきにくいので、ゼロには斜線を入れてあります。

フォントのダウンロードはこちら

アイコン

無駄に装飾をしたくなかったので、王道Font Awesomeを使っています。

GMAILのアイコンは従来のものではなく、シンプルなメールアイコンにしました。

肩書き

webデザイナーにするか、ランナーにするか、ブロガーにするか悩みましたが、名刺交換するメインの相手はデザイナーになると思うので、WEB DESIGNERにしました。

かなりこだわった「整列」

名前と肩書き

HAWEB

SHIRUdesigner

幅も裏面の要素と揃えました。

 

アイコン

形がバラバラなのですが、高さを文章に合わせました。幅はそんなに差がないので違和感はありません。

高さを整えた上で、アイコン同士は中央揃えにしました。

紹介文

すべて同じ文字でスタートさせることで統一感を持たせました。

Twitterのアカウントはよく@を付けることがありますが、取っても意味が通じるので取りました。

同じ理由でサイトURLhttps://も省いてあります。

ドットのカーニング

.」の前後に幅をもたせて整列させています

名刺ができたら印刷に回そう

デザインをこだわり抜いた後は印刷に回します。印刷を業者に依頼するのも初めてでした。

入稿先はCMでお馴染みのラクスルにしました。注文する前に紙質のサンプルを取り寄せて、どの紙を使うチェックしました。

印刷のことなら格安・激安の印刷通販【ラクスル】

作ったデータはai、アウトライン済みのものを入稿。プレビュー画面で確認すれば、すぐに入稿完了です。

最終チェックでいま一度誤字、ズレがないか確認しましょう。

僕はここでズレに気づいて直しました最終チェックはかなり重要です。

みんなに作った名刺を知ってもらおう

モックアップに名刺をはめてツイートしました。無料でおしゃれなテンプレがあります。

ロゴをより魅力的に見せる名刺のモックアップまとめ | Web制作ナビ

https://twitter.com/hashirutori00/status/1102117617110704128?s=20

まとめ:とくに意識したこと

  • 名刺制作は初めてだし、今後作り直す可能性もあるため気張り過ぎない
  • ダサいかもしれないけど自分なりのコンセプトを大切にする

コンセプトもがっちり固めて最高のクオリティで作ることを、最初からそんなに意識していませんでした。

人に渡してリアクションをもらって、今度はこうしよう、ああしようと考える。名刺は作ったら完成じゃなくて、進化させていくものだと思います。

後日、名刺が届いたので早速名刺交換もしてきました。

webデザイナーが名刺を印刷して実際に名刺交換してきた話【ラクスル】

2019.03.10