デザイン

こんにちは！デザイナーのアロード（ @arowd_info ）です。 2021年7月9日（金）に行われた、第8回「できるかもデザイン」のレポートをお送りします。今回は「初学者あるあるデザイン改善ライブ！名刺編」というタイトルで、シリーズ三部作中の第一弾となります。 詳しくはこちらをご覧ください。 https://dekirukamo-d-210709.peatix.com/ できるかもデザインとは？ 「できるかもデザイン」はデザイン初学者の方に向けたオンラインイベントです。 第6回目よりプロによるデザインレビューサービス「PLUSREVIEW（プラスレビュー） 」と働き方を選びたいママのためのオンラインスキルスクール「MuseAcademy（通称：ミューアカ）」のコラボイベントとなりました。 おかげさまで大変好評で、550名に参加いただき、たくさんの応援や感想のコメントをいただくことができました。スタッフ一同感謝しております。 【できるかもデザインはこんな方におすすめ】・デザインに興味があるけど踏み出せない方・作ったデザインになんだか素人感があってお困りの方・独学でデザインの勉強をすることに限界を感じている方・制作会社の先輩デザイナーのような存在が欲しい方・プロが実際に手を動かすところを見たい方・プロの考え方を知りたい方 このイベントシリーズでは書籍やSNSだけでは知ることのできない、「プロのデザイナーはどんな仕事をしているのか？」という疑問の答えをリアルに見ることが出来ます。 まず、今回の目的ですが、文字の大切さを学んで欲しかったので、名刺を題材としました。次回以降では、バナー編（コントラスト・訴求力）→LP編（写真の扱いや雰囲気作り・総合力）とステップアップできる内容となっております ツモマーさんとまるみさんがイベント内で行った名刺のライブデザインは、ブログの後半でお伝えします。イベント時とは時系列的に逆になりますが、解説を読んでいただいてからお二人の改善された名刺を見ることで、より理解が深まると思います。 ではさっそく今回のお題である「名刺デザインのポイント」についてみていきましょう。 名刺を題材に文字のコントロールを学ぶ デザインにおいて、文字はとても大事です。特に名刺は文字の表現が主役になるため、慎重に扱う必要があります。 単純な打ち文字（左）と読ませることを意識した（右）比べてみるとわかりやすい。 プロとアマチュアの差が出やすいのが文字のコントロールです。 デザイン初学者の方は、最初の仕事として名刺を頼まれたり、自分の名刺を作ることが多いのではないかと思います。そんな時にやってしまいがちなポイントがあるので、チェックしながら改善方法を学んでいきましょう。 チェックするポイント 今回抑えるポイントは以下の6点です。 それではひとつづつ解説していきましょう。 名刺なのに名前が小さい ビジュアルを作ることに気をとられてしまうのか、名前を小さく表現してしまう名刺を見かけることが多いです。そもそも、何を作っているのか、誰に向けて作っているのか…をよく考えて、名刺に載せるべき情報の優先順位を確認しましょう。 こちらは参考例になります。名前を小さくしても必要な情報は入っているので名刺として成立はする（左）のですが、「何を見せたいのか？」をもう一度考えた時に、はたしてこれでいいのでしょうか？というお話です。 制作中に迷うことが、たくさんでてくるわけですが、その度に優先順位を確認してみましょう。 こちらは具体的な優先順位例になります。制作の準備段階である、情報整理に戻り、載せるべき情報の優先順位が間違ったものになっていないか、何度も考えてみましょう。 依頼者の要望により順番が入れ替わることもありますが、基本的に名前が最優先な事は変わりません。 アロードライブ後にコメントなどを読ませていただいたのですが、準備の段階で情報整理をしていない方がたくさんいらっしゃいました。ここで書かれているのは、すでに情報整理ができていることが前提で、そこに戻って確認しましょうねというお話です。 準備段階である情報整理は、情報を受け取る色々な人を想像しながら、制作中に何度も何度も振り返って行う必要があります。経験を重ねてきたプロの人たちであっても、客観的な視点を意識して、角度を変えながら何度も立ち返ります。それを頭の中で瞬時に何度も行うようになるので、デザインされたものを見て違和感を見抜き、レビューができるようになるわけです。 情報整理はデザイン作業の中でも最も大事な部分であり、ここを怠ってはいけません。 逆に言えば、ここができていれば半分以上デザインはできているということになります。 適切でないフォントの選択 フォント選び、たくさんありすぎて何を使ったらいいのかわからずに、自分が好きなものを使ってしまうというケースがあります。名刺であれば、渡す相手のことを考えて相手にどういった印象を与えるか想像してみましょう。 名刺は基本的に文字ベースでの表現になるので、文字のカタチは相手に大きな印象を与えます。 3つのフォントを例にみていきましょう。 高級感やエレガントな印象を与えたければ、明朝体やわらかい印象を与えたい場合は、丸ゴシック体読ませやすく明確に伝えたい場合には、ゴシック体 並べて比較してみると、だいぶ与える印象が違うことがわかります。 なんとなくという理由で選んでいたり、自分の好きな書体を選んでいたりすると、望んでいる印象と違った印象を与えることになってしまいますので、依頼者の持つ雰囲気や依頼者にとってのターゲットや年齢層を分析して、選ぶようにしましょう。 迷ってしまう方がいると思いますので、名刺で使いやすい日本語フォントを紹介しておきます。 だれでも気軽に使えるGoogle Fontsに、「Noto Sans JP」「Shippori Mincho」が登録されており、無料でダウンロードすることができます。 「Noto Sans JP」と「Shippori Mincho」はウェイト（文字の太さ）が豊富で使いやすく、Webデザインをする上でWebフォントとしても使用できるので、慣れておくと便利だと思います。 ライブではまるみさんが「Noto Sans CJK」を選択しました。そちらでも問題ないのですが、Webでの使用を考えた際には、CJK（中国・日本・韓国）よりもJP（日本のみ）の方が、書体情報が少ないためデータが軽いです。 名刺などの制作物が商用であっても、「Noto Sans JP」と「Shippori Mincho」のライセンス上、無料で使えるはずですが、使用する際は念のため最新のライセンス条件を確認してみてください。 フォントやウェイトの違いから、受ける印象を見抜き、最適な選択をできるよう訓練しましょう。 ここでいう最適な選択とは、ひとつという意味ではありません。相手にどういった印象を与えたいかによって最適な選択は変わってきます。少しづつ使いこなせるフォントを増やして、自分の引き出しを成長させましょう。 長体がかかっている 文字は正体が美しいはずなのに、自分のデザインの都合で安易に変倍をかけてしまっている例が多くあります。 ビジュアルを作ることにひっぱられすぎて文字に変形をかけるようなことをしたり、無理やりスペースに収められているようなものではなく、情報をすんなりと読み取れるようなデザインができるようになりましょう。 情報伝達を第一に考え、自分の都合でレイアウトしないよう気をつけてください。 それでは、長体とはなんでしょうか？ 例外もあるのですが、フォントは基本的に正方形の中でバランスを取られて作られています。これを横から圧縮したものを長体（ちょうたい）・縦から圧縮されたものを平体（ひらたい、へいたい）と言います。 本来の形が最も美しいので、長体や平体をかけるのは避けましょう。 そのような状況になったとしても、ほとんどの場合、レイアウトの調整やサイズ変更、改行などで解決します。 左のように限られたスペースにギュウギュウに文字を詰め込んでいるような状態をよく見かけます。 余白をさびしいととらえた場合、そこを埋めようとして、こういった結果になったと思われます。右はすべて正体（せいたい・提供されている基本の状態）にしたものですが、文字のサイズは落ちていても、正体に戻して余白を作ると、かなり読みとりやすくなったことがわかります。文字の強弱や文字間を調整して、しっかりと文字組みすることで美しいデザインになっていきます。 欧文フォントの場合は、コンデンス書体を使うという方法もあります。 コンデンス書体は正体が長体のカタチをしているので、それらを使って文字組みをすると、高さを変えずに横幅を詰められます。詰めたスペースに余白をとるなり、他のものを配置できるので、レイアウトのコントロールがしやすくなることもあります。 紙面上の文字が正体ばかりであれば、アクセントにもなるので、コンデンス書体を使ったことがない方は使ってみてください。また違った印象を与えることができます。 フォントは100％（正体）の状態がベストで設計されているはずなので、デザインの意図がない場合は、そのまま使いましょう。 もちろん、長体を活かす効果を狙ってデザインする場合もありますが、初学者さんがそのレベルに達するのは少し先のことです。 今は長体や平体に頼らずに、綺麗に作ることを身につけましょう。 自分の都合でレイアウトしているようでは、まだまだデザイン力が足りていないので、長体をかけたくなったら負けていると思うくらいでいいです。読みやすく情報を伝えることを優先してください。 メリハリがない 名刺だけに限らずなのですが、文字を置いただけのような、ぼんやりとした平坦なデザインを多く見かけます。 デザインする上で大事なこととして、伝わりやすさを意識してほしいので情報の優先順位が読み取れるようにメリハリをつけていきましょう。 今回は名刺編なので、文字でできることを考えていきます。 こちらはきちんとできているように見えますが、まだ改善できそうです。 コントラストを意識して修正していきます。 文字だけでメリハリをつける場合には、大きさ、太さ、文字間でコントロールしていきます。 「適切でないフォントの選択」で解説をしていた時にでていた、ウェイト（太さ）のある書体は使いやすいというのは、ここでの選択肢が増えるためです。ここでは大きさには手をつけていませんが、文字間の調整はしています。名前や会社名など、比べてみてください。また、色でメリハリをつけるという方法もあります。英字部分は面積が狭いので、色を変えてアクセントにしやすいです。 読ませたい情報に誘導できているかどうか、伝わりやすさを意識して制作しましょう。何度も引いて見たり、倍率を変えて確認したり、時間を置いてチェックすると、おかしなところが見えてきますので、自分でバランスをとってブラッシュアップしていきましょう。 余白がバラバラ 余白が計算されておらず、バラバラでグルーピングや視線誘導ができていないものはとても多いです。 これは、デザイン4原則でいう「近接」がとれていないという部分にあたります。 突き詰めて、美しいレイアウトに持っていければベストですが、まずはグルーピングを考えて情報整理が視覚化されていることがわかる余白をつくっていきましょう。 ここで言うグルーピングとは、同じコンテンツや並列に扱う情報をひとかたまりに見せるために分ける作業になります。 あまり極端に例をつくらずだったので、左のものも一見キチッとしているようにみえるのですが、右のものに比べると、余白がバラバラになっています。グルーピングをもう少ししっかり意識したり、周りの余白を計算しながら作ってみると、綺麗なラインが見えてくるようになります。 まず、グルーピングから考えてみましょう。まず、配置されている要素を細かく分けてみます。 ロゴ肩書き名前英字名会社名住所電話番号メールアドレス 今度は大きく分けてみましょう。 ロゴ名前（肩書き・名前・英字名）インフォメーション（会社名・住所・電話番号・メールアドレス） 大きく3つのグループに分けてみました。それぞれに紐づく情報でくくったのが上の図になります。 このグループの区切りを明確にするために必要なのが、余白（マージン）となります。 残念ながら、ほとんどの初学者さんは余白のコントロールができていません…WebデザインやUIデザインでも必要なことなので、しっかりと意識して余白のルールを決めて制作しましょう。 箱を作って考えてみる 余白の考え方の例を解説していきます。これはライブ中もその後のSNSや周りのデザイナーさんにも反応がよかったのですが、私ならこうするという話であって、方法はひとつではありません。私も場合によってはガイドを引きますし、もっと良い方法があるかもしれません。 まず、大まかにレイアウトした後に、最下段の断裁ラインから最初の要素への幅を「A」として、長方形の透過した箱を作ります。 次に、広めにスペースを取りたい部分を2倍の幅で、逆に狭めにしたい部分を半分の幅で長方形のボックスを作ります。 広めに空けたい部分が、大グループ分けしたい幅、狭目にしたい部分は並列に扱いたい情報の幅ということとして余白を設定します。 ひょっとしたらこの手法の名前があるのかもしれませんが、私はいつの間にかこのようにやっていました。グリッドデザインの考え方に近いかもしれませんが、正式な名前があるようでしたら、教えていただけると嬉しいです。 こちらの説明をしている時に、視聴者の方から 「どうしてロゴの左側は揃えなかったのですか？」 というご質問をいただきました。ライブでは私とツモマーさんでお答えしたのですが、言葉だけだとわかりにくそうだったので図説化してみました。ヤジロベー的に考えて、重心を導き出してバランスをとっているという感じでしょうか、このあたりを伝えるのは難しいですが、デザインて面白いなぁと思っていただけたらいいなと思います。 黄金比や白銀比を考えるのもいいのですが、まずは余白のルールを設定し、情報の整理できているレイアウトを組めるようになることが大事です。 自分がやりやすい方法で余白を意識してデザインしてみましょう。 制作を続けていると、余白がバラバラで気持ち悪いなぁ…と思える感覚を覚えるようになっていきます。 極端な言い方をすると違和感を覚えないうちは、まだまだ余白を意識したデザインを作れておらず、力が足りていないということにもなります。 余白は情報の読みやすさをコントロールする事でもありますが、グルーピングされた情報を明確に分けるためでもあります。 ただ、計算して作ることも大事なのですが、最後は自分の目を信じて欲しいです。矛盾するのですが、常に自分の足らなさを疑うことも大事ですし、自分の身につけてきた感覚も大事にした方がいいという…難しいですよね。このあたりを楽しめるようになってくるとデザインの仕事と一生付き合っていけるのではないかと思います。 先日発売された、レタースペーシング（文字間）に関する書籍です。先日拝読したのですが、とても詳しく書かれていて勉強になりました。 ロゴのアイソレーションを考えていない 素人の方や初学者さんが作る制作物でロゴが配置されている時に、周りに余白がなかったり、キツめの背景が下地にあったりするものを見かけます。 ロゴを使用するときは視認性、独立性の確保、企業イメージの保持などのため、ロゴの周りの余白は十分にとるようにしましょう。 アイソレーションとは？ 多くの企業ロゴにはアイソレーションが設定されていて、OKパターンやNGパターンをまとめたレギュレーションが配布されます。ときにはアイソレーションが設定されていないロゴもありますが、その場合はデザインに合わせて、自分でルールを設けてみましょう。 こちらはプラスレビューのロゴのアイソレーションになります。 ロゴはせんざき（@senzaki_d）さんに依頼して作っていただいたものですが、私達の方でレギュレーションは必要ないですとお伝えしてありました。なので、今回設定してみたのが上図になります。 企業のレギュレーションを覗いてみると、ロゴの高さに対して、半分の幅〜2倍で設定されていたりすることが多いので、そちらに習ってみました。実際には色々な制作物や商品に対してロゴを当て込んでみて、ユーザーにどういうった印象をあたえるかで判断し、レギュレーションを設けるのだと思います。 企業の印象を変えかねないので、十分に注意して扱っていきましょう。長体や平体のように変倍して使うようなことはあってはならないことです。 その他、以下の2項目についても触れました。時間が許せば、まだまだお話したかったところです。 原稿通り 原稿通りそのままに作ってしまうようで、どこをデザインしたのかわからないようなものを見かけることがあります。 ご要望はもちろん聞かなければいけませんが、課題解決に結びつかないご要望は検討する必要がありますし、ただ文字を置いただけのものはご提案とは呼べません。要素が足らなかったとしても、お客様にあったモチーフやストーリー、アイデアを盛り込んで期待を超えるものを提供できるよう、心がけたいものです。 断ち落としの概念がない 経験がないので仕方がないと思うのですが、印刷する以上は印刷の知識が必要です。断裁されるということを前提にデザインしていく必要があるので、プレビューで確認しながら作っていきましょう。 繰り返して使える「ワンコインレビュー 本」BOOTHにてダウンロード版を販売中です！ レビュー事例の他、4原則に沿ったデザインの改善など掲載しています。改善ライブでの解説ポイントが好きな方にオススメです。 BOOTHにて販売中！→ 改善ライブ -名刺編- 実際の順番とは逆になりましたがイベントの前半では、まるみさんとツモマーさんそれぞれが作った名刺を交換して改善していくというライブをお送りしました。さほどリハーサルなく、ぶっつけ本番で挑むライブは見応えがありました！ 独学されている方や、会社員でも駆け出しの方にとっても、リモートワークが推奨されるような時代になってきましたので、プロの手が動いているところを見れるのはより貴重になっていくかもしれません。 私の解説部分も概要を伝えておいただけなのに、気にして作っているところは一緒で、やはりプロは見ているところが一緒だなぁ…と思いました。 まるみビジネスに使用する、信頼感高めの名刺にしたいのかな？と思い、かっちり目に仕上げました。 キャッチ縦書き・ロゴ位置などはそのまま活かしつつ要素を整理しています。 裁ち落としギリギリの要素も救済しました。裁ち落としは大事よ！ ツモマー蝶々はできるかもデザインとは関係ないので削除、情報整理していくと「ロゴ」と「株式会社できるかもデザイン」と重複してるのでロゴを採用し、ツイッターIDはQRにすることで検索の手間を無くしました。優先順位としては個人名→個人の情報→企業情報→QRという感じです。 まとめ できるかもデザイン「初学者あるあるデザイン 改善ライブ！ 名刺編」いかがだったでしょうか？ Twitterでのハッシュタグ「#できるかもデザイン」を読んでいくと、大反響だったことがわかり、初学者向けと言いながらも、プロの方たちにも興味を持っていただき、ご意見をいただけたので大成功だったと思っています。 デザインを勉強されている方に今回お伝えしたかったのは、情報整理・優先順位の徹底と、読ませやすさを意識して、情報伝達率の高いデザインをして欲しいということでした。皆さんのデザイン力が少しでも上がると我々も嬉しいです。 次回の第9回できるかもデザインは「初学者あるあるデザイン 改善ライブ！ バナー編」です！コントラスト（メリハリ）と訴求力に焦点を当てて解説できればと思っています。 お申し込みはこちらから、公式Twitterもご確認ください。ありがとうございました。次回もよろしくお願いいたします。 https://dekirukamo-d-210813.peatix.com/ できるかもデザインライブラリにて販売中 実際に行われた内容を観たい！という方には、ライブラリでの販売もございます。お得な3本セットもありますので、ご検討ください！ https://dekirukamo.design/product/de06/ 改善ライブ！3部作 https://plusreview.design/dekirukamo_meishi/ https://plusreview.design/dekirukamo_banner/ https://plusreview.design/dekirukamo_lp/