ポートフォリオサイト

カテゴリー: Works

  • 【名刺制作】名刺の表面と裏面のデザイン

    【名刺制作】名刺の表面と裏面のデザイン

    【基本情報】

    作品名： 就職活動用 セルフブランディング名刺（両面・横型）
    制作期間： 4日間
    担当範囲： 企画・コンセプト立案、ロゴデザイン、配色計画、レイアウト、タイポグラフィ選定
    使用ツール： Illustrator

    【作品概要】

    第二新卒として挑むグラフィック／Web／DTPデザイナーの就職活動において、面接や会社説明会など「あらゆる就活の現場で信頼を獲得し、自分を印象付けること」を目的としたセルフブランディング名刺です。

    ハローワークの職業訓練「グラフィックデザイナー養成科」で培った基礎スキル、そして自身が目指す「デジタル（Web）とアナログ（印刷）の垣根を越えた柔軟なコントロール」というビジョンを、色彩学と緻密なタイポグラフィを用いて視覚化しました。

    【デザインコンセプト＆各要素のロジック】

    配色計画（カラーギミック）

    背景色（アイシーブルー）： 自身のパーソナルカラーである「ブルーベース・サマー」に合致するアイシーブルー（パウダーブルー）を採用。自分らしさを表現しつつ、就職活動に相応しい清潔感、誠実さ、知性を演出しています。
    文字色（鉄紺 / #263751）： 単なる黒（K100%）ではなく、洋名でミッドナイトブルーやダークネイビーと呼ばれる伝統色「鉄紺」に統一。アイシーブルーの背景とのコントラストを美しく保ちながら、画面全体のトーン＆マナーにプロフェッショナルな品格と一貫性を与えています。

    ロゴマーク（RGBとCMYKの融合）

    　Webの光（RGB）と印刷の三原色（CMYK）を融合させるというコアコンセプトに基づき、形状の色相関係を厳密に維持。

    　その上で、名刺全体の世界観と調和させるため、IllustratorのHSB空間上で色相（H）を固定したまま、彩度（S）を40%に、明度（B）を85%へ均一にシフトさせました。

    　サマータイプ特有の「ソフトトーン」へ厳密にコントロールすることで、コンセプトの強さと視覚的な美しさを両立させています。

    タイポグラフィ（視認性と美しさの追求）

    全てのテキストは印刷時の可読性を担保するため「7px（約10pt）以上」に設定。

    ・日本語： 現代的でクリアな印象を与え、ユニバーサルデザイン（UD）視点を持つ『A-OTF UD新ゴ Pr6N』を採用。

    ・欧文・数字： メリハリと洗練された印象を両立するため、太字部には『Helvetica Neue LT Pro — 77 Bold Condensed』、細字部には
    『Helvetica Neue LT Pro — 45 Light』を適用し、情報の優先度（ジャンプ率）を緻密にコントロールしています。

    幾何学模様に込めたデザインの意図

    名刺の左下に配置したグラフィカルな幾何学模様には、私のデザイナーとしての「思想」「スキルセット」「未来への成長プロセス」を論理的に落とし込んでいます。

    • 媒体特性を象徴する「2つの比率とシェイプ」
      • 正方形（4つ）/ CMYKで彩色：日本の美意識や紙媒体に馴染む白銀比（1 : 1.414）を採用（5mm基準の7.07mm）。DTP・印刷の世界を象徴しています。
      • 正円（3つ）/ RGBで彩色：デジタル・モダンデザインの王道である黄金比（1 : 1.618）を採用（5mm基準の8.09mm）。Web・グラフィックの世界を象徴しています。
    • 配色のこだわり（調和の優先）
      • いずれのシェイプも、あえて彩度を落としたソフトトーンで配色しています。このサイズの幾何学模様を強いアクセントカラーにしてしまうと、名刺全体の美しい比率（トーン＆マナー）を崩してしまうため、視覚的調和を最優先に計算してコントロールしました。
    • 配置に込めた「成長のプロセス」
      • 配置は、左下（現在：訓練校での学び）から右上（未来：プロフェッショナル）へと駆け上がるベクトルを持たせています。
      • 正方形を「ステップアップしていく階段」、正円（それぞれの点を結ぶことで現れる矢印）を「未来へ向かう方向」に見立て、「2つのカラーモード（スキル）を掛け合わせながら、デザイナーとして成長していく」という強い熱意とポテンシャルを表現しています。

    QRコードグラデーション（ディテールのこだわり）

    裏面に配置したポートフォリオサイトへ誘導するQRコードの四端にも色彩設計を反映。

    始点： パウダーブルー（優しく明るい水色）

    中間： スカイブルー（サマータイプの王道である爽やかな青）

    終点： ラベンダーブルー（紫みを帯びたエレガントな青）
    これらを美しいグラデーションで繋ぐことで、細部にまで一切妥協しないデザイナーとしてのこだわりを表現しました。

    【まとめ・工夫した点】

    ・一貫したセルフブランディング： 自身のパーソナルカラー（ブルーベース・サマー）を軸に配色を徹底的にコントロールし、あらゆる就活シーンで誠実さと知性を印象付けるトーン＆マナーを確立しました。

    ・感覚に頼らない「色彩の数値管理」： ロゴマークのトーン調整において、感覚ではなくIllustratorのHSB空間上で数値を均一にシフト（S:40% / B:85%）させることで、コンセプト（RGBとCMYKの融合）を維持したまま、全体の色彩世界観へ厳密に調和させています。

    ・実務を見据えた機能美の追求： 印刷時の美しさと可読性を担保するため、すべての文字を7px以上に設定。UDフォントとHelvetica Neueを組み合わせ、情報整理の「ジャンプ率」と「視認性」を緻密に計算しました。

    ・細部（ディテール）への執着： QRコードのパーツに至るまでサマータイプの3色グラデーション（パウダー/スカイ/ラベンダー）を適用し、「ミリ単位のディテールにも一切妥協しない」というデザイナーとしての姿勢を表現しています。

  • 【グラフィック/印刷物】求職者支援訓練「グラフィックデザイナー養成科」受講生募集リーフレット（A4両面）

    ■ プロジェクト概要

    求職者支援訓練「グラフィックデザイナー養成科」の受講生募集を目的としたA4両面リーフレットです。
    未経験からデザイナー職を目指す求職者の不安を解消し、「私にもできそう」「ここで学びたい」という応募意欲を引き出すデザインを提案・制作いたしました。

    ・制作分類：A4サイズ リーフレット（両面カラー印刷用データ）
    ・使用ツール：Adobe Illustrator
    ・担当範囲：企画・カラー設計・タイポグラフィ選定・紙面レイアウト
    ・制約事項：タイトル周り以外のテキストは一言一句違えない「必須掲載情報」を遵守

    ■ ターゲット＆制作要件

    【ターゲット層】
    20〜40代の女性（未経験者・初学者、子育て後の再就職やキャリアチェンジを検討中の方）

    【デザインコンセプト】
    「やさしい」「親しみやすい」「学び直し」「安心感」「未来への期待感」

    【課題と解決アプローチ】
    未経験の求職者が抱く「専門的な訓練についていけるだろうか」という心理的ハードルを下げるため、単に情報を並べるのではなく、「冬から春、そして修了期の初夏へと変化する成長のストーリー」を配色とビジュアルで表現しました。

    ■ デザイン解説（表面・裏面）

    【表面：未来への期待感を高めるストーリーカラーと明確な情報設計】


    ・カラーで描く成長ストーリー：
    ベースには肌なじみの良いベージュと誠実さを表すブラウンを採用。1月〜5月の訓練期間に合わせて、イエロー（3月の芽吹き・一歩踏み出す勇気）、ピンク（4月の桜・大人の女性への優しさ）、新緑のグリーン（5月の修了・未来への希望）と、季節の変化と受講生自身の成長を重ね合わせたストーリー性のあるカラーリングに仕上げました。

    ・可読性と視線誘導：
    求職者が最も重視する「訓練期間」と「卒業後の就職先（職種・業界）」を視覚的に大きく配置。タイトルには温かみと親しみのあるフォントを使いつつ、本文にはデザイン校らしい洗練されたモダンなフォントを選定し、「親しみやすさ」と「スキルの信頼性」を両立させています。

    【裏面：学習イメージが湧く整然としたカリキュラムレイアウト】


    ・左右分割による視認性の向上：
    難しく見えがちなカリキュラム情報を「学科」と「実技」に整理し、左右に並列配置。忙しい女性や子育て中の方でも、訓練の流れとバランスが一目で理解できるよう配慮しました。

    ・トーン＆マナーの統一：
    学びのスタート地点である「冬」をテーマに、背景には雪の結晶と繊細な樹木のイラストを配置。文字の可読性を第一にコントラストを調整しました。最下部の共通情報エリアには、コスメを思わせるニュアンスピンクを採用し、紙面全体に上品な透明感と親しみやすさをプラスしています。

    ■ まとめ・工夫した点

    「一言一句変更できない」という厳しいテキスト制約の中で、フォントのメリハリ、視線誘導の配置、細やかな点線での区切りなどを駆使し、情報量の多さを感じさせないスッキリとしたレイアウトを実現しました。


    ターゲット（女性求職者）の心情に寄り添い、感情を動かす配色と、正確な情報伝達を両立させたデザインです。

  • 【バナー制作】架空の高級分譲マンション 訴求別WEBバナー2種

    【バナー制作】架空の高級分譲マンション 訴求別WEBバナー2種

    ■ プロジェクト概要

    分譲販売中の高級マンション「グレースコスモ 春日テラス」のWEB広告バナーです。 　

    高所得者層をターゲットとし、ABテストによるインプレッション・CTR（クリック率）比較を想定して、コンセプトの異なる2つのデザインアプローチを提案いたしました。 　

    　

    ・制作分類：WEB広告バナー（SNS・ディスプレイ広告枠想定） 　

    ・使用ツール：Adobe Photoshop 　

    ・制作サイズ：1080 × 1350 px（RGB） 　

    ・担当範囲：企画・キャッチコピー作成・画像レタッチ・デザインレイアウト 　 　

    ■ ターゲット＆制作要件

    【ターゲット層】 　

    30代〜50代の高所得者層ファミリー・プレファミリー（販売価格：3,800万円〜） 　

    　

    【コンバージョン（目的）】 　

    「来場予約」または「資料請求」による顧客情報の獲得　 　

    　

    【掲載要件・制約事項】 　

    ・ABテスト検証のため、2種類（A案・B案）のデザインを作成すること 　

    ・どちらか一方にはモデルルームの内観画像を使用すること 　

    ・最高・最低販売価格は掲載せず、洗練されたブランディングを第一とすること 　

    ・必須要素：「福井駅から徒歩14分」「周辺にバス停・私鉄駅あり」「来場予約・資料のご請求はこちら（CTA）」 　

    ・セールスポイント（好立地・街の近さ・自然・景観の良さ）を伝えるキャッチコピーを考案すること 　

    ■ デザインコンセプト＆解説

    【A案】昼の開放感コンセプト（ライフスタイル雑誌の表紙風） 　

    暮らしのイメージと開放的な空間美を重視した、雑誌の表紙のような洗練されたデザインです。

    　

    ・ビジュアル展開： 　

    「光が溢れる贅沢な空間」を表現するため、モデルルームの内観画像を大胆に全面配置。右下に円形フレームで外観画像を配置し、内観の窓枠を遮らないアシンメトリーなレイアウトでリズム感を持たせました。内観は明るく柔らかいトーンに、外観はコントラストを高めにレタッチし、視覚的な対比を明確にしています。 　

    　

    ・タイポグラフィ： 　

    キャッチコピーには「都市の利便、豊かな自然 / 福井の特等席で、美しい景観と暮らす贅沢」を採用。フォントには高級感と洗練された印象を与える「秀英明朝」を選定し、エッセイの見出しのような上質な世界観を演出しています。 　

    【B案】夜の重厚感コンセプト（ラグジュアリーな建築美） 　

    静寂な空気感と重厚なトーンで、高所得者層に向けたプレミアム感をストレートに伝えるデザインです。

    　

    ・ビジュアル展開：

    夜間の外観画像を画面いっぱいに配置。深い青みと陰影のコントラストを調整し、建築物としての重厚感と静かな贅沢さを強調しました。最下部の情報エリアをブラックで引き締めることで、重厚なラグジュアリー感を演出しています。 　

    　

    ・タイポグラフィ＆視線誘導： 　

    キャッチコピーには「都市の躍動、豊かな自然、 / すべてを手中に収める特等席」を採用。夜の建築美にマッチするモダンで洗練されたゴシック体「noto sans jp」を選定し、微妙なドロップシャドウを加えて視認性を確保しました。 　 　 　

    レイアウトは、左側の縦書き物件名にまず視線を惹きつけ、そこから右上のキャッチコピー、最下部のCTA（予約ボタン）へと自然に視線が流れるZ型・F型の導線設計に仕立てています。　

    ■ まとめ・工夫した点 　

    単にきれいなバナーを作るだけでなく、ターゲット層の心理にどちらのアプローチがより刺さるかを数値検証できるよう、「昼の生活感・開放感（A案）」と「夜のステータス感・重厚感（B案）」という
    対極的なデザイン軸を用意しました。 　

    写真のレタッチ精度、キャッチコピーのトーン＆マナー、フォントの可読性と選定理由まで細部にこだわり制作いたしました。

  • 【Webメディア】デスクセットアップ Webマガジン「DESK LOG」（進行中プロジェクト）

    【Webメディア】デスクセットアップ Webマガジン「DESK LOG」（進行中プロジェクト）

    ※本プロジェクトは現在、コンテンツ拡充およびデザイン・機能の追加実装を進めている進行中（In Progress）のWebメディアプロジェクトです。先行して記事ライティング・SEO構成・コンテンツデザインを中心に構築を行っています。

    👉 ガジェットサイト本体（DESK LOG）はこちら

    ■ プロジェクト概要

    PC作業環境の生産性向上や、漆黒・サイバーミニマリズムをテーマとしたガジェット情報を発信するWebマガジン「DESK LOG」の企画・制作プロジェクトです。

    世界観のあるダークトーンのデザインと、可読性の高い記事レイアウト・構成力を意識して構築を進めています。

    ・サイト名：DESK LOG（Minimal Desktop Setup Media）

    ・制作分類：Webメディア / ブログサイト（WordPress）

    ・使用ツール：WordPress / Adobe Photoshop

    ・担当範囲：企画・サイトトーン＆マナー設計・記事ライティング・アイキャッチ作成・コンテンツレイアウト

    ■ ターゲット＆メディアコンセプト

    【ターゲット層】

    デスク環境や作業空間にこだわる20代〜40代のガジェット好き・Webクリエイター・リモートワーカー

    【コンセプト】

    「漆黒」「サイバー・ミニマリズム」「機能美とロマンの両立」

    暗所やダークモードに最適化された美しく洗練された世界観で、読者の購買意欲とインスピレーションを刺激するWebメディアを目指しています。

    ■ 現在の取り組み＆デザインポイント

    【1. 世界観を統一したダークモード・デザイン】

    サイト全体を「漆黒」と「トワイライトブルー/光の残光」で包むダークトーンに統一。掲載するガジェットやライティング（照明）の魅力が最も映えるコントラスト設計にこだわりました。

    【2. 読者のストレスを減らす「整理された記事構造」】

    ・製品スペックを一目で把握できる整然とした「スペック比較テーブル」の組み込み

    ・要点をまとめた箇条書きと、視認性の高い見出しデザイン

    【3. 購買意欲と没入感を高める記事コンテンツ】

    単なる製品スペック紹介にとどまらず、「デスクツアー」「レビュー」「厳選デバイス紹介」など多角的な企画構成を展開。写真の差し込みやキャプションの入れ方、導入文からまとめへのストーリー展開まで、読者を惹きつけるライティングを実践しています。

    ■ 今後の展開（Roadmap）

    現在は基本デザインおよび記事コンテンツの先行展開段階ですが、今後は以下のアップデートを予定しております。

    ・カテゴリー分類（デスクツアー / ガジェットレビュー / ライティング等）のメニューUI拡張

    ・サイドバーや回遊用関連記事モジュールの機能強化

    ・レスポンシブ表示（スマホ最適化）の細部調整

    ・SEOパフォーマンスの検証とコンテンツ追加

    👉 ガジェットサイト本体（DESK LOG）はこちら