【独学Webデザイン】ショップカードを自主制作｜情報の取捨選択とデザインの工夫

こんにちは、向葵です🌻

看護師として働きながら、独学でWebデザインを学んでいます。
スクールなしで学んでいる試行錯誤中の私の成長記録ブログです💻

今回は、Illustratorで自主制作した
架空の美容クリニック「LUMÉA」のショップカードをご紹介します。

制作したデザインだけでなく、掲載する情報の選び方やデザインで工夫したこと、制作を通して感じた難しさについてまとめました。

Illustratorでショップカードの自主制作に挑戦

Illustratorの学習を始めたとき、まずは自分が興味・関心のある分野から取り組んでみようと考えました。
私は本業が看護師で、以前は美容クリニックで働くことも考えていたため、今回の自主制作では美容クリニックをテーマに選びました🏥

トレースで操作やデザインの構成を学んだあと、オリジナルのショップカード制作に挑戦。

クリニックのコンセプトは、施術を選べる月額制の美容皮膚科。

親しみやすさを前面に出すよりも、美容医療に慣れた中上級者に向けた、洗練された雰囲気を目指しました。

【架空クリニックのショップカード完成品】

ショップカードに載せる情報をどう決めた？

今回、ショップカードの役割の一つとして考えたのは、
手に取った人がクリニックに興味を持ち、ホームページへアクセスしたくなることです。

そのため、予約や詳しい情報を確認するための導線を想定し、QRコードを配置しました。
💡QRコードが読み込みにくい状況でもアクセスできるようにURLも添えました。

また、駅から徒歩10分以内という架空の設定を踏まえ、住所や最寄り駅、
徒歩での所要時間が伝わりやすいように、文字の大きさや情報の優先順位にも注意しました。

さらに、クリニック名の近くには、

「施術が選べる月額制で通える美容皮膚科」というコンセプトを配置💉

クリニックの名前と特徴が一緒に目に入るようにすることで、
どのようなサービスを提供しているのか、
他のクリニックとの差別化
これらが伝わりやすい構成を意識しました。

デザインでこだわった3つのこと

今回のショップカードでは、
洗練された中上級者向けの美容クリニックというコンセプトに合わせ、
余白・ロゴの配置・エンボス加工を意識しました。

① 余白を活かした情報量の調整
高級感や洗練された印象を大切にしたかったため、情報を詰め込みすぎないように注意しました。
一方で、シンプルにしすぎると物足りない印象になるのではないかという懸念もありました。
そこで、余白を確保しながら、ロゴのエンボス表現によって存在感を持たせることにしました💐

② ロゴの配置による抜け感
ロゴは枠の内側にきっちり収めることもできましたが、今回はあえて一部が枠からはみ出す構成にしました。
クリニックの枠に囚われないというニュアンスを残し、
整いすぎた印象を避け、少しの個性と抜け感を加えたかったためです。

③ エンボス加工を想定した立体表現
エンボス加工は、凹凸による陰影や質感で存在感を出せる表現です。
今回はロゴにエンボス加工を想定した表現を取り入れ、色の主張を抑えながら、上品な印象を目指しました。（用紙による物理加工ではなく、デザインのエンボス加工を選びました）

ただし、ロゴを大きく配置する分、文字と重なると視認性が低下する可能性もあります。
そのため、ロゴと文字の間には十分な余白を設け、
デザインの雰囲気と読みやすさの両立を意識しました💭

完成して気づいた、デザインの難しさ

今回の制作は架空案件ですが、実際の依頼では、
クライアントの要望をどのように把握するのかという難しさも考えるようになりました。

クライアントがどの程度具体的に希望を伝えてくれるのか。
また、必要な情報をこちらからどれだけスムーズに引き出せるのか。

要望の確認に時間がかかったり、認識にずれが生じたりしないかという不安もあります。
こうしたヒアリングのスキルは、今後の経験や試行錯誤を通して身につけていきたいと感じました。

また、ショップカードは媒体自体が小さく、印刷された実物では画面上のように拡大して読むことができません。
だからこそ、文字の大きさや情報量、優先順位を考え、必要な情報を取捨選択することが重要だと感じました。

そして、もう一つ大切だと感じたのが、
クライアントの要望と、その先にいる顧客の視点は必ずしも一致しないということです。

たとえクライアントの希望を反映した素敵なデザインが完成しても、それが顧客にとってわかりやすく、意図した行動につながるとは限りません⚠️

狙っていた反応が得られなければ、デザインを見直す必要も出てくるはずです。

デザインの見た目を整えるだけでなく、
「誰に何を伝え、どのような行動につなげたいのか」。

その目的を考えながら制作することの難しさを、今回の自主制作を通して改めて感じました。

自主制作を終えて、次に挑戦したいこと

今後は、今回制作したLUMÉAのショップカードをもとに、
アクセスマップの制作にも取り組む予定です📇

さらに、WebバナーやInstagramのフィード投稿など、ほかの媒体への展開も考えています。

一つのブランドとして制作する以上、媒体が変わっても、LUMÉAらしい世界観を保つことが目標です。

その一方で、洗練された雰囲気を意識するあまり、素朴で単調なデザインになりすぎないようにも注意したいと考えています。

今回のショップカード制作で学んだ、情報の取捨選択や余白の使い方、
デザインの目的を考える視点を、次の制作にも活かしていきたいです。

これからも自分のペースで、ひとまず独学で頑張りたいと思います🌟
足りない部分もあると思いますが、
リアルな成長記録として見守ってくださると嬉しいです🌻

未経験＋Webデザイン＝収益ゼロなのか　リアルな経過