【Figma】デザインの学び7月②〜軸から作ることがクリエイティブ〜
こんにちは、Tomichaです👒
7月の学び2本目なのですが、学習の仕方をちょっと変えてみます！
前回投稿を経て、力がついてる感じがしなかったのでやり方を変えてみました。
前回まではオリジナルで作るMVとフッターをなんとなく作っていたところがあったのでそこを改善します。Figmaに慣れつつ、あしらいの表現や、目を引くようなビジュアルを凝ってみる。
お手本にしたものの文字組みを意識しつつも、オリジナルの作品やコンセプトの部分もちゃんと考えないとデザインが全く進まず手こずったのでその時間を使ってある程度のコンセプトや説明ができるようにNotionとは別に、noteにまとめていこうと思います。
学習経過①
姫路の工務店 |はだしの家.株式会社
建築や、化粧品のサイトが好きで、その1つに空気感や落ち着き、余白が視覚的にゆとりを感じさせるような表現が好きなのですが、こちらのサイトも余白によって情報を整理して見やすくし、サイト全体が洗練された印象を感じます。
自然光で撮影された製品の写真明るく柔らかいクリーンでミニマルなデザインです。
分析詳細はNotionで📝
前回同様実際の写真は利用せず似た雰囲気のサイトを作れるように模写しました。空と建物の間に少し白っぽくすることでよりコントラストがはっきりして立体感が出ていることにも気づきがありました👀
サイト全体の雰囲気を回収して勢いがそのままにデザインされる印象に残るフッター👀
オリジナル制作
Gradients Card
UIのトレンドである鮮やかかつノイズのあるグラデーションとカードをアイソメトリックのプラグインを使って動きのあるMVを制作してみました。
模写したMVのナビゲーションとフッターの構図、配置などを意識してオリジナルのLP を部分的に作成しました。
背景とコンセプト
顧客中心のアプローチ：信頼性と親しみやすさを兼ね備えた色使いは、顧客との強い関係を築くことを目指しています。
技術革新：テクノロジーとイノベーションを象徴する色は、カード会社が最新の技術を駆使していることを示しています。
市場の多様性：多様な色の組み合わせは、異なる顧客層や市場に対応できる柔軟性と包括性を表現しています
ペルソナ
田中 健一（たなか けんいち）
基本情報性別：男性
年齢：35歳
職業：IT企業のプロジェクトマネージャー
年収：800万円
居住地：東京都港区
ライフスタイルと趣味趣味：ゴルフ、サイクリング、旅行
休日の過ごし方：友人とゴルフ、家族とアウトドア活動、最新のテクノロジー製品を試す
情報収集：テクノロジーブログ、ビジネス雑誌、SNS（特にLinkedIn）
性格と価値観性格：アクティブで社交的、計画的で効率を重視
価値観：キャリアの成功とバランスの取れた生活を重視、最新技術やトレンドに敏感
金銭感覚：投資や貯蓄に対して計画的、ポイントやキャッシュバックを重視
利用するクレジットカードの特徴特典：旅行保険、空港ラウンジアクセス、ポイント還元
利用目的：ビジネス出張、日常の買い物、オンラインショッピング
デジタルサービス：モバイルアプリでの管理、即時通知、バーチャルカード
ニーズと悩みニーズ：高いポイント還元率、充実した旅行特典、セキュリティの高いデジタルサービス、自分の身の丈に合う高級感、デザイン性
悩み：複数のクレジットカードの管理が煩雑、カードの有効活用方法に悩む
口癖「効率的に使いたい」「セキュリティは大丈夫？」
このペルソナは、キャリア志向が強く、効率的な生活を求める現代のビジネスマンを反映しています。彼は、クレジットカードの特典やポイント還元に関心が高く、デジタルサービスの利便性を重視しています。
Webサイト訪問の目的:新しいクレジットカードの比較・検討
ポイントプログラムや提携サービスの調査
このペルソナは、デジタルネイティブで、キャリア志向が強く、効率性と利便性そしてその利用シーンを想像して自分に相応しいデザインか、格好がつくか重視する人物を想定しています。カード会社のWebサイトでは、特典やポイントプログラム、デジタルサービスの充実度などに特に注目すると考えられます。
支払いシステムや金融サービスに革新的な変革をもたらすことをアピール
デザイン説明
ブルー
信頼性とプロフェッショナリズム：青は一般的に信頼性、誠実さ、プロフェッショナリズムを象徴する色です。カード会社にとって、顧客からの信頼を得ることは非常に重要です。この色は、会社の信頼性と堅実さを強調します。
テクノロジーとイノベーション：濃い青はまた、テクノロジーやイノベーションを連想させる色でもあります。カード会社が最新の技術を駆使していることを示唆します。
ピンク:
親しみやすさと感情的なつながり：ピンクは温かみがあり、親しみやすさや感情的なつながりを強調します。顧客との関係を大切にし、フレンドリーでアクセスしやすいイメージを与えます。
若い世代や新しい市場をターゲットにしている場合、この色は特に効果的。
オレンジ:
エネルギーと活力：オレンジはエネルギー、活力、創造性を象徴します。カード会社が活気に満ち、ダイナミックなサービスを提供していることを示します。
行動喚起：オレンジは行動を促す色でもあり、ユーザーに対して積極的にサービスを利用するよう促す効果。
グラデーションの意図
視覚的な魅力:
グラデーションは単色よりも視覚的に魅力的で、ユーザーの注意を引きやすいです。これにより、サイト全体のデザインがより動的で興味深いものになります。
流動性とモダンな印象:
グラデーションは流動性を感じさせ、モダンで洗練された印象を与えます。これは、カード会社が最新のトレンドを取り入れ、常に進化していることを示します。
ブランドの多様性と包括性:
複数の色を組み合わせることで、ブランドの多様性と包括性を強調します。異なる色がシームレスに融合することで、異なる顧客層や市場に対応できる柔軟性を示します。
キャッチコピー
世界観をMVで表現するために、社名などではなくコピーを主張
革新性の強調：従来の支払い方法を根本的に変える新しいアプローチを提案していることを示唆
技術の進歩：最新のテクノロジーを活用して、支払いプロセスを改善
顧客体験の向上：より簡単で効率的な支払い方法を提供することで、ユーザー体験を大幅に改善
業界のリーダーシップ：支払い業界において先駆的な役割を果たしていることを
主張未来志向：支払いの未来を形作る先進的なソリューションを提供していることを強調
変革の約束：顧客の金融生活に大きな変化をもたらすことを約束
フォント
Avenir
モダンさとクールな印象:
Avenirは幾何学的なデザインが特徴で、未来志向と安定感を同時に表現できます。これは、革新的でありながら信頼性も重視するカード会社のイメージに合致。
読みやすさとデジタル適性:
Avenirは画面上での読みやすさに優れており、特にモバイルデバイスでの表示に適しています。これは、デジタルサービスを重視する現代のカード会社のニーズに合っています。
Interとの相性:
AvenirはInterと視覚的に調和しやすいフォントです。両者ともにクリーンでモダンな印象を持ち、ウェブサイト全体の一貫性を保つことができます。
ブランドイメージとの適合:
Avenirは専門性と親しみやすさのバランスが取れています。これは、信頼性を重視しつつも、顧客に寄り添うモダンなカード会社のイメージに合致します。
学び
ワクワク感好奇心、期待感を持たせる表現を重視しているサイトを意識して制作してみました。
・流行りはインパクトと先進性をつ当てるのに最適だが、奇を衒ったもの寿命は短くなる点も注意しなくてはならないと感じました✍️
・日本のカードのビジュアルが出てくるサイトには、主に信頼感が重視され、高級感も感じるLPが多い印象があったので、あえて今回はそのパターンではなくUIの流行りに乗り、動きもあるような表現に挑戦。
・日本と海外のサイトは大胆さは異なる印象ですが、海外の迫力、スマートさにインパクトがあっても圧迫感はなく、心地よい体験が提供されていると感じました。
学習経過②
株式会社オグロ
振り返り 軸から作ることがクリエイティブ
長いですよね、文章量が多くなりました。
量がこなせていないのは懸念点ですが、前回を踏まえて、ただ勉強内容をそのまま配置しただけのノートのようになってしまっていたので今回は自分で考えた部分も踏まえて言語化してみました！
見て頂いた方ありがとうございました🌷
この記事が気に入ったらサポートをしてみませんか？