top of page
Image by Dong Cheng

千と希の設計図 web版 2023年1月号




限られた素材、

限られた書体、

プラスする要素もなし…


 デザインする人が頭を悩ますのは、「たくさんの情報をいかに詰め込むか」という局面より、「何もない空間をどう処理するか」といった局面でしょう(もっとも前者も問題はありますが)。写真を足そう、背景を足そう、何か特殊なフォントを使おう、という手法に走る前に少しお待ちを。手持ちのものをしっかり配置できているかを見直すのも大事です。存在感のある物体は、それだけで広い空間を支配できます。

 ちなみに出来上がったデザインを見て「悪くないけど、いまいち締まらないな」と感じる時は、大抵悪いのは最初の「組み」です。と、会社で指導する際はよく言っています。ここがダメだと、色や処理

をいくら凝っても良くなりません。ここでいう「組み」とは、文字や写真などの「なくてはならない基本要素の配置」のことを指します。

 下の例を見ていただくのが分かりやすいと思いますが、例えばこのWebサイトのボタン。少し大きめのボタンです。Level0のどこが悪いは、割とすぐ分かります。いろいろ揃ってないですね。これをLevel4まで持っていくのがデザイナーの仕事です。派手なことは特にせず、ボタンとしてのクオリティを上げ、それが全体の(この場合はWebサイトの)クオリティを上げていくのです。




具体的に何をしているか


一つずつ見ていきましょう。



level 0


書体はプロ用のリュウミンRです。この書体は世の中の明朝体の半分以上はこれ、といっても過言ではないほどのクオリティです。ただ、このLevel 0がいまいちよろしくないのはすぐにわかると思います。四角い囲みの中の配置がバラバラですね。



level 1


「取り急ぎ揃えるところは揃えました」というものです。この時点でOKを出してしまうと、全体が出来上がった時にどうしようもなくなります。もう一手間かけてみましょう。



level 2


このボタンの一番伝えたいのは「お申し込みはこちら」です。なので、「資料請求~」の行を小さくしてみました。小さなバナーでしたらここで完成でもいいでしょう。



level 3


さて、ここで白枠のずれを発見し、修正しました。また線の太さを抑え、左右の葉っぱのモチーフもサイズを落として、より文字に対して空間が空くようにしました。少し上品なイメージが加わります。



level 4


ここからがプロの腕の見せ所です。文字詰めを見直し、資料請求のあとの「・」と文字の間隔を調整。また、「こちら」の文字の間隔を調整し、よりバランスが取れた文字組みにします。左右の葉っぱは背景に溶け込むように処理し、周りの白枠もわずかに透明度を落としました。代わりにエンジ色を周りだけ僅かに濃くしました。



おそらく皆さんが見慣れているのはLevel4ではないでしょうか。シンプルなボタンに見えますが、そこそこ手が加わっています。作り手としては、ここまでやってようやく「普通」です。お金をいただく仕事をするためには、Level2くらいで止まらないよう、切磋琢磨が必要ですね。



 

お手本を見なくても描ける!

ハンバーガーのえかきうた♪


作詞・作曲からすべてスタッフと社長だけでつくった「何も見なくてもハンバーガーが描ける絵描き歌」。この絵描き歌を使ったイベントを1月19日に開催! イベントに参加することができない…

という方もぜひお家で挑戦してみてください!