バナー

banner

バナー(模写)

作品名・概要: バナーライブラリーで見つけた魅力的なデザインを、技術習得と表現力向上のために模写したバナーです。

使用ツール・スキル: Adobe Photoshop

目的: プロのデザイナーがどのような要素を使い、情報を配置しているかを学び、視覚的な表現方法や情報伝達の効率性を実践的に習得すること。

工夫した点:

  • 再現性の追求: 「やってみたい」という気持ちから模写に取り組み、元のバナーが持つ魅力を忠実に再現できるよう、フォントの選び方、色の使い方、写真と文字の配置バランスなど、細部に注意を払いました。
  • プロの技法の学習: プロのデザインをトレースすることで、情報の優先順位の付け方や視線誘導のテクニックを実践的に学びました。

苦労した点: 元のデザインの特定の効果を再現するのに時間を要した

反省点・改善点模写したデザインから、さらに自分なりのアレンジを加えてみるべきだった

制作期間・担当範囲: 2つで約5時間 / デザイン模写全般

バナー(オリジナル/架空会社)

作品名・概要: 架空の「思い出横丁タイムトラベルツアー株式会社」の販促用バナーです。Webサイトのトップページに配置することを想定し、ツアーへの興味を喚起し、クリックを促すことを目的として制作しました。複数のサイズで展開しています。

使用ツール・スキル: Adobe Photoshop

目的: 昭和世代や昭和レトロに興味を持つ若い世代をターゲットに、「タイムスリップしたかのようなリアルな昭和体験」というコンセプトを伝え、ツアーの魅力を表現し、ウェブサイトへの誘導を促すこと。

工夫した点:

  • コンセプトの視覚化: 会社のイメージである「タイムトラベル」と「思い出横丁」を視覚的に表現するため、レトロな雰囲気とワクワク感を両立させるデザインを目指しました。キャッチコピーとビジュアルで、旅への期待感を高めるメッセージを込めました。
  • 複数サイズ展開への対応: 同じメッセージでも、バナーのサイズによって見え方が大きく変わるため、それぞれのサイズ(横長、縦長、正方形など)に合わせて情報の表示順序、文字の大きさ、写真のトリミングを調整しました。特に、小さなサイズでも主要な情報(キャッチコピーやツアー名)が視認性を保ち、クリックを促すボタンが分かりやすいように工夫しました。
  • ユーザーの視線誘導: ユーザーがバナーを見た瞬間に、ツアーの魅力と行動への導線(例:詳細はこちら、予約する、など)が伝わるよう、最も伝えたい要素を目立つように配置し、読み手の視線が自然に流れるようなレイアウトを意識しました。
  • Photoshopの活用: レイヤー機能を細かく使いこなし、要素ごとの調整を効率的に行いました。マスク機能を多用して画像やイラストの切り抜き・合成を行い、文字ツールや調整レイヤーで全体の雰囲気やメッセージを効果的に伝えられるよう加工を施しました。

苦労した点: バナーという限られたスペースの中で、伝えたい情報を全て詰め込まずに、最も重要なメッセージを際立たせること。また、複数サイズ展開する際に、どのサイズでも同じインパクトと視認性を保つことに苦労しました。

反省点・改善点:異なるターゲット層へのアプローチとして、さらに異なるトーンのバナーも試すべきだった

制作期間・担当範囲: サイズ違い5つで約180時間 / デザイン全般

作品名・概要: ハンディファンECサイト用バナー

使用ツール・スキル: Adobe Photoshop

目的: 夏の需要期に向け、ECサイト上でユーザーの目に留まり、購買意欲を刺激するハンディファンの販促バナーを制作すること。特に、製品の「携帯性」と「機能性」を簡潔に伝え、購入へ繋がる行動を促すことを目指しました。

工夫した点:

  • コンセプトの明確化と視覚表現: 「夏の必需品」というキャッチコピーと、涼しげなグラデーション背景を用いることで、製品の持つ快適さや清涼感を直感的に伝えることを目指しました。
  • 情報設計と視線誘導: 限られたスペースの中で、最も伝えたい情報(キャッチコピー、製品特徴、割引情報、購入導線)の優先順位を考慮し、自然な視線の流れでユーザーが情報を理解し、行動に繋がりやすいレイアウトを構築しました。
  • 視認性の高いタイポグラフィとカラーリング: 背景色とのコントラストを考慮した文字色(白文字、オレンジのアクセントカラー)を選定し、文字サイズや太さを調整することで、遠くからでも読みやすい視認性を確保しました。特に割引情報とCTAボタンは、目を引く色と形状で強調し、クリック率向上を意識しました。
  • Photoshopの活用: レイヤー機能を用いて要素を細かく管理し、効率的な編集を可能にしました。また、グラデーション、テキストツール、図形ツール、レイヤースタイル(ドロップシャドウ、境界線など)を駆使して、バナー全体の統一感と品質を高めました。

苦労した点:

  • 正方形という限られたサイズ(500px × 500px)の中で、複数の情報を詰め込みすぎずに、各要素のバランスを保ちながら視認性を確保することに苦労しました。特に、ハンディファン自体の魅力を損なわないよう、テキストと商品の配置に試行錯誤しました。
  • テキストの色と背景色のコントラスト調整や、ボタンのデザイン(形状、色、テキスト)を、目立ちつつも全体のデザインに馴染ませるための微調整に時間を要しました。

反省点・改善点:

  • 今回作成したデザインが特定の層に響くものであったため、今後は異なるデザインアプローチ(可愛らしいデザインやシンプルでスタイリッシュなデザイン)ファミリー層向けのデザインなども考案し、ターゲット層の幅を広げる視点を持つべきだと感じました。
  • 最終的な完成形に至るまでにいくつかの修正を重ねたため、初期の段階でのワイヤーフレームやラフスケッチの段階で、より多くの選択肢を検討し、方向性を早期に固めることで、制作効率をさらに向上させることが可能だと考えます。

制作期間・担当範囲: 約1時間 / デザイン全般

作品名・概要:モダン家具

使用ツール・スキル: Adobe Photoshop

目的: 職業訓練校で学んだPhotoshopのスキル(画像合成、レタッチ、デザイン基礎)を実践的に活用した成果を示すための作品です。学習の過程と、それをアウトプットする能力があることを証明することを目的としています。

工夫した点

  • ミニマルな空間演出: 家具を最小限に抑え、余白を広く取ることで、高級感と洗練されたブランドイメージを表現しました。
  • 自然な合成: 複数の家具画像をPhotoshopで合成する際、部屋の光源や家具の影を意識し、より現実感のある空間に見えるように調整しました。
  • ターゲット設定: シンプルで上質な暮らしを求める20〜40代の男女をターゲットに、彼らの心に響くような、清潔感のあるデザインを心がけました。

苦労した点

  • 複数の画像を合成する際、家具のパース(遠近感)やサイズ感を合わせるのに苦労しました。自然に見えるよう、何度も調整を繰り返しました。
  • 家具の切り抜き作業に時間がかかりました。特に、背景の色と家具の色が似ている部分の切り抜きが難しかったです。

反省点・改善点

  • 絵画や小物などの要素を加えて、もう少し生活感を出すことも検討しましたが、今回はミニマルな雰囲気を優先しました。今後は、目的に応じて要素の追加・削除を柔軟に判断できるようになりたいです。
  • より多様なサイズのバナーを制作し、レスポンシブデザインの知識もアピールできるようにしたいです。

制作期間・担当範囲: 約1時間 / デザイン全般

コメント