豆知識。 PR

素人デザイナー・ティムの奮闘記 #2 WEBサイト・ラッピング編

連載第二回。非デザイナーがどこまで自力でできるか!?実制作レポートです。

第二弾はWEBデザインと包装資材

※PRと書いていますが印刷業者さんからの提供はございません。

前回決めたブランドロゴ・カラーを展開して、このサイトと、作品を包装するときに使用する帯紙のリニューアルに取り掛かります。

軽くおさらいすると、大人の女性をターゲットにした高級感あるデザイン。くっきり見やすく、かつ、うさぎ作家らしい可愛らしさを忘れない。そんな感じでまとめてみます。

公式WEBサイトリニューアル

このサイトは設定によって色などをカスタマイズできます。今回見直したカラーやロゴを使って、ちょっとイメージを変えてみました。

カラー設定

メインで使う色は単色ロゴで使用したブラウン。

カラーコードは#62503cです。

当ブログではメインカラーのほかに、アクセントとなる他の色も選択できます。今の設定ではサイト内に少しだけ使われているくすみ黄緑がそれです。このカラーはサイト上で実際に様々な色をシミュレーションして決めました。

主に候補になったのは明度を落として落ち着かせた各色。決定した黄緑のほかに、ターコイズ、彩度高めのピンク、キャメル、ネイビーなど。

左から、チョコミント、抹茶チョコ、イチゴチョコ、キャラメルチョコといった感じでしょうか。一番右のネイビーは、茶色と組み合わせると「アズーロ・エ・マローネ」と呼ばれ、メンズスーツでは王道の配色です。

今回緑にしたのは、やはり木を使う僕にとっては植物系の色がイメージに合っていること。何かと使いやすそうだったからです。チョコミントともかなり迷ったのですが、チョコミント苦手なのです(笑)。くすみ黄緑は大人感ありつつ、キュートでもあり、いい感じ♪カラーコードは#c4c41fです。

この茶色と黄緑をメイン、サブにしてブログの配色を決めていきました。茶色を暗くして文字を明るく抜いた部分(末尾のフッターなど)でメリハリをつけています。

そして忘れてはならない第三のカラーがあります。

それは白です。

背景色は白ベースにしました。これには僕のこだわりがあります。ダークモードのように暗い地の色にすると、そのサイトにいるうちはいいのですが別のサイトに移動したり戻ったりすると急に明るくなって眩しく、それが嫌なんです。

普通に考えると、ダークブラウンの背景に金の箔押しのようなゴールドを合わせればめちゃくちゃ高級感があります。ですが僕にとってはちょっとやりすぎな印象になりました。うさぎさんの絵ですから。もっと軽やかなイメージにしたかった。

白背景のほうが爽やかに見え、また誠実そうにも見えます。※高額な美術品を売ってるんで、胡散臭く思われたらおしまいです。

というわけで、背景は僕御用達の本物の水彩画用紙を自分で撮影した画像を加工して、エンボス調の壁紙に設定しています↓

わずかにセピア調のフィルターをかけ、全体の統一感を出しています。真っ白は真っ白で、やはり眩しいためです。

サイト全体の文字色も真っ黒にはせず、読みやすい範囲でわずかに茶色にして統一感を出しました。その他随所をブランドカラーに寄せて調整してます。

ブランドロゴタイプ

屋号「木彫りうさぎのパパ。ティム」でやらせてもらっています。今回その書体をゴシック体から明朝体に変更しました。

旧ロゴタイプ

新ロゴタイプ

伝統的な美術の描きかたで、少々お高い商品を展開する僕。高級感、伝統的印象を出すなら明朝体、英字ではセリフ体一択です。いま世界的にゴシック体ベースのロゴが流行っているみたいで、時代と逆行しています。が、どうせこのトレンドはすぐ変わります。たぶん。それより、人が普遍的に高級だと感じる印象を信じました。

フォントは「ひな明朝」。「さ」の2画目と3画目がつながってるのがいいなーとかブツブツ言いながら選びました。これ超素敵じゃないですか!?

お堅い明朝体よりも丸っこいフォルム。筆文字のテイストを残した優美なひらがな。微かにゆらいだような線質。遊び心があってかわいらしく、太過ぎず細すぎず、イメージにぴったりでした!

この書体で、まんま形を変えずロゴ化しています。ただ…、

今回のデザインで、素人デザイナーの僕は知らなかった超大切なテクニックを学びました。

「カーニング」。

優れた有料フォントでも、そのまま文字を入力しただけでは文字の間隔が不揃いに見えてしまいます。それを一文字一文字マニュアルで詰めたり広げたりできるのがカーニング。デザイナー必須のテクだそうです。

カーニングする前と後で比べました。どちらも同じフォント、サイズです。

カーニングビフォーアフター

beforeは「木」と「彫」の間が詰まりすぎていること、「。」と「テ」の間が空きすぎていることなど、お気づきになられましたか?なんだ!こんなことができるなら早くいってよ!って感じで目から鱗でした。

フォトショでは、文字入力してカーソルの形を変えてから、ALTキーを押しながら左右の矢印キーを押すと、ちょっとずつ文字を移動できます。文字を細かく移動しつつ最適な配置を決めます。

ただこれ考えすぎると何が正しいかわからなくなるんですよ(笑)。いまでも確信が持てません。ほどほどにね。

見出し・ボタン

見出しのデザインを細い線ベースにしました。以前は塗り面積が広い目立つ見出しでした。

少し主張控えめにすることで、高級おしゃれ路線のロゴや配色とのバランスを取りました。

ボタン色もブランドカラーに近い系統に。

ちなみにこのマーカーペンエフェクトも茶系に。

ファビコン

ブラウザのタブについているアイコンを公式ロゴに変えました。

残念なことに想定外だったのが、ダークモードにすると周りの色に埋まって見えてしまうこと。

これはしゃーない。

以上、webデザインが決まりました。次はパッケージツールです。

帯紙と下げ札

売れた絵画作品を発送するとき、額箱などに紙の帯をつけてあしらいにしています。

クラフト紙にインクジェットプリンタで手作り。

ロゴ・ロゴタイプが変わったのでこれも作り直しです。ここでも屋号はカーニング済みのデータを使用しました。

帯紙では屋号とロゴのほかにブランドスローガン「あなたの「大好き!」でいっぱいのカタチ。」を入れています。大好き!の部分を手書きフォントで。

ただちょっとこの仕上がりには不満です。印刷業者にお願いして、もっときれいな品質で印刷したいのと、クラフト紙ではなく「第三の色」である白を基調にしたい、紙質もちょっといいやつにしたいです。トレーシングペーパーとかおしゃれ。画用紙系もいいですね!

後日。FUDAさんに発注しました!

どうしてもクラフト紙の帯紙に満足できず、リニューアルしました。こちら!

絵画作品には帯紙を、彫刻など立体作品には右の丸いタグを使います。

画用紙のようなエンボス紙に金の箔押しでロゴとロゴタイプ、ブランドスローガンを配置。箔押しは金型を使って紙にプレスするように加工するので、印刷面に微妙な凹凸ができ、それが反射具合の違いとなってキラキラ光ります。箔プリントと箔押しの違いですね!

帯紙

帯紙にはエンボスが効いたタント紙が使われています。帯として使うので、厚みがある紙だとくっきり折り目がついて汚いので薄い紙がいいなぁと思っていたのですが心配無用でした。

これくらいの薄さで柔らかいです。幅50mm、長さはA4長辺と同じ297mmです。

後で説明する理由でロゴのサイズを24mmと大きめにしました。余白は広めにとる方が高級感がでるので、リニューアル前は帯の上下に入れていた罫線を省略しました。

下げ札

下げ札に使用されているアラベール紙は上品できめ細かいエンボスが抜群の上質感。プロのデザイナーさんが好んで取り入れる紙だそうです。

アラベールの質感
アラベールの質感

上の写真では照明を横から強く当てて接写し陰影を強調してますが、自然な光源からパッと見た印象は最初の写真に近いです。主張しすぎない品のよさが魅力です!

大きさは直径50mm。ロゴの大きさは帯と同じ24mmにしました。

キラキラなタグ

ちなみにロゴの周りに円形に文字を入れるのはフォトショだと簡単です。

パスの上にテキストツールのポインタを合わせると形が変わるので、クリックして文字を入力するだけ。

文字は英語バージョンも試作しましたが、なんかよそよそしいので日本語にしました。フォントはロゴで使用しているひな明朝に統一。

業者さん決定

画用紙またはトレペの質感に金の箔押し、そんなイメージが決まった段階で、それをやってくれる業者さんを探しました。

オリジナルデータで入稿したいがillustratorは持っていないのでフォトショで入稿したい。これも必須要件でした。

それが可能な業者さんを探し、FUDAさんに決めました。

箔押しアクセサリー台紙FUDA

展開している帯やタグの質感はまさに僕のイメージ通り。さらにPhotoshopでオリジナルデザインを入稿できることが決定的でした。早速発注する前に、あともうひとつ…。

細かい形は箔押しできない!?

ネットを見ると、今回のロゴデザインのように細かい模様は箔だと細部がつぶれやすい、と書いてあるんですよね。それがどの程度なのか…。

安全をみて、旧デザインでは16mmくらいだったロゴを24mmに拡大しました。これで業者さんに問い合わせました。

細部が多少潰れるのはやむを得ない、24mmでこのロゴデータを印刷し、全体としてみた時に木とうさぎさんの形がわかるくらいにはできますか?と問い合わせ、可能とのお返事が✨

これをもってデザインを完成させ、約一週間で納品されました。

改めて納品物を。このクオリティ!

※帯とタグ両方とも紙や箔の質感を漏らさず撮影するのに超苦労しました(笑)

気になる潰れについて。確かにロゴ全面が光っているところを写真に撮ると木の隙間が完全に潰れているように見えます。実際には隙間部分もかすかに箔が薄くなって再現されており、光沢感の違いがあるので木として認識するには十分でした。よかったー!

角度を変えてみると細かい白抜きも再現されている

この帯やタグでお客様に作品をお届けするのが楽しみです♪

以上、WEBサイト・ラッピング編でした。次回はSNSアイコン・価格表編です。次回もぜひお楽しみに!今日も最後までありがとうございました。

絵画彫刻その他制作承ります。

ご家庭やお店に木彫りのうさぎさんをお迎えしませんか?

彫刻・絵画・イラスト(アナログ/デジタル)等多数制作しています。

うさぎの作品なら、経験・実績豊富なうさぎ専門作家におまかせください!

ぷい
ぷい
何でも聞いてくださいね!
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です