Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ポートフォリオ_赤塚亮太

 ポートフォリオ_赤塚亮太

ポートフォリオ資料になります。

アカツカリョウタ

January 24, 2025
Tweet

Other Decks in Design

Transcript

  1. HP ・学習塾のHP UI/UX ・乗換案内アプリのUI/UX Banner ・クリームチーズケーキのバナー LP ・国産うなぎの通販LP 06 CONTACT

    お問い合わせ 05 FLOW ご契約までの流れ 04 PRICE 料金パック 03 WORKS 作品 02 SERVICE サービス / 提供価値 / 選ばれる理由 01 PROFILE プロフィール/これまでの経験 目次
  2. 大学在学中にプログラミングを学びました。 その後新卒で塾講師として働く中でWEB制作に興味を持ち、WEB制作の職業訓練校に半年ほど通いコーディングとデザインソフトの操作を学びWEB制作会 社に入社いたしました。 そこでアートディレクター兼マネージャーとしてホームページ制作の案件進捗管理、制作における品質チェックとデザイン品質向上のための基礎作り、制作 アルバイト20名ほどのマネジメントを約3年ほど従事し退職。 現在、フリーランスデザイナーとして活動しています。 1996.09.01 三重県津市出身 赤塚 亮太

    2024.10 同社を退職。フリーランスデザイナとして活動中 2021.11 株式会社ガーディアン 入社 2021.3 WEB制作コースの職業訓練校 受講 2019.4 株式会社早稲田アカデミー 入社 2019.3 日本大学生産工学部数理情報工学科 卒業 経歴 前職ではアートディレクターポジションでサイト制作案件の進捗管理や顧客との打ち合わ せ、マーケティング視点でのサイト品質チェックをしていました。 ディレクション AI ChatGPT・Photoshop、素材加工、ス プレッドシートで使用。 Chromeの検証ツール HTML/CSSの追加変更やサイト内の画像 サイズ確認に使用 HTML/CSS 職業訓練校で基礎から半年ほど学習。 Figma WebデザインやUIデザイン、パワポ作成 に使用 Illustrator WEBデザイン、紙デザインに使用 Photoshop Webデザインや写真レタッチに使用 スキル ネット検索・通販を見る テレビ 動物 野球 グルメ 趣味 ダックス 飼ってます プロフィール
  3. デザインを提供します ターゲットの心を動かす 商品・サービスの魅力を伝え デザインを提供します ターゲットの心を動かす 商品・サービスの魅力を伝え ディレクション DIRECTION ヒアリング HEARING

    前職での経験からリアルでのコミュニケーションはもちろ んオンラインでのコミュニケーションもたくさん経験して おりました。丁寧なヒアリングと徹底した報連相を行い、 認識齟齬がないよう制作してまいります。また進捗管理と 共有を徹底し期限遵守にて進めてまいります。 前職での経験からリアルでのコミュニケーションはもちろ んオンラインでのコミュニケーションもたくさん経験して おりました。丁寧なヒアリングと徹底した報連相を行い、 認識齟齬がないよう制作してまいります。また進捗管理と 共有を徹底し期限遵守にて進めてまいります。 事前に顧客情報と競合他社をリサーチした上でビジュアル 面だけでなくどうしたら成果をあげられるのかという視点 を第一にしてヒアリングいたします。 事前に顧客情報と競合他社をリサーチした上でビジュアル 面だけでなくどうしたら成果をあげられるのかという視点 を第一にしてヒアリングいたします。 サービス
  4. します 決 解 そんなお悩みを 成果を出すため を いたします。 積極的な提案 主体的な提案をしてほしい ご連絡には

    に 返信いたします。 5時間以内 レスポンスが遅い ディレクション経験を元に での ご提案もさせていただきます。 マーケティング視点 デザイン以外もみてほしい 毎営業日 記録を取り、 をいたします。 進捗の共有 進捗がわからない
  5. 3つの理由 選ばれる 3つの理由 選ばれる 見た目だけいいデザインでは成果をあげるこ とはできません。ただ指示されたことをこな すのではなく競合他社と世の中の結果が出て いるクリエイティブを分析し、成果にコミッ トした主体的な提案をいたします。 成果重視の

    戦略設計・プランニング 見た目だけいいデザインでは成果をあげるこ とはできません。ただ指示されたことをこな すのではなく競合他社と世の中の結果が出て いるクリエイティブを分析し、成果にコミッ トした主体的な提案をいたします。 成果重視の 戦略設計・プランニング 日中は5時間以内にレスポンスを行い円滑な コミュニケーションを行います。また案件進 捗の見える化を行うため、毎日進捗や不明点 等の報連相をいたします。 迅速なレスポンス と報連相 日中は5時間以内にレスポンスを行い円滑な コミュニケーションを行います。また案件進 捗の見える化を行うため、毎日進捗や不明点 等の報連相をいたします。 迅速なレスポンス と報連相 デザイナーのみの視点で制作をしてもただの 自己満足なものが制作されるだけです。前職 での経験を生かしてデザイナー・ディレク ター・顧客の3視点での制作を心がけており ます。 ディレクター視点での デザイン デザイナーのみの視点で制作をしてもただの 自己満足なものが制作されるだけです。前職 での経験を生かしてデザイナー・ディレク ター・顧客の3視点での制作を心がけており ます。 ディレクター視点での デザイン サービス
  6. Opportunity (機会) 強みを活かして 脅威を回避し切り抜ける Threat (脅威) 弱みのを理解し 脅威による影響を最低限にする Weakness (弱み)

    弱みの補強/改善で 機会を掴めるように対策する Strength (強み) 強みをチャンスとなる 成長機会に活かす 外 部 環 境 内 部 環 境 マイナス要因 プラス要因 SWOT分析 顧客層 購買行動 顧客ニーズ 市場・顧客 強み/弱み 市場シェア 企業理念・ビジョン 競合 強み/弱み 他者評価 企業理念・ビジョン 自社 3C分析 設計が間違っていると どんなに良いデザインでも 成果を上げることができません。 分析結果を元に USPを明らかにし適切な訴求を デザインで行っていきます。 地域密着型学習塾の分析例 ◆市場・顧客◆ 少子化にも関わらず塾業界では売上げが伸びて いる。それは誰もが塾に通うことが当たり前に なってきたという背景がある。 ◆競合◆ オンライン授業塾が増えている。大手塾は学生 アルバイト講師が多く授業の品質にムラがあ る。 ◆自社◆ 分析結果と自社の強みから以下をUSPとして打 ち出していく ・ただ学習を教えるだけでなく学習習慣などを 身につける指導も行い人間力の育成を行う学習 システム ・塾長自ら指導を行い一人ひとりをサポート ・現在少なくなってきている対面だからこその 熱血指導 見た目だけいいデザインでは成果をあげることはできません。 業界市場・競合他社を分析し成果にコミットした主体的な提案をいたします。 成果重視の戦略設計・プランニング 01
  7. B:権威性を訴求 A:素材感を訴求 訴求軸 デザインする前に訴求軸を明確にすることが大切です。 ディレクター/閲覧者視点でどういった訴求軸が適切か を見極めてクリエイティブを制作します。 B:権威性を訴求 A:素材感を訴求 訴求軸 デザインする前に訴求軸を明確にすることが大切です。

    ディレクター/閲覧者視点でどういった訴求軸が適切か を見極めてクリエイティブを制作します。 様々なデザインを収集 テイスト ディレクター視点で顧客情報を元にしっかりとリサーチ を行った上でテイストを決めてデザインしていきます。 またディレクターが行うワイヤーフレームでの情報設計 作成や複数パターンの作成も可能です。 様々なデザインを収集 テイスト ディレクター視点で顧客情報を元にしっかりとリサーチ を行った上でテイストを決めてデザインしていきます。 またディレクターが行うワイヤーフレームでの情報設計 作成や複数パターンの作成も可能です。 制作会社でのディレクター経験を生かしたデザインを作成いたします。 ディレクター視点でのデザイン 03
  8. テイスト、レイアウト、コンテンツから制作方針を立てる デザインの制作方針 コンテンツの上部には商品である国産うなぎの和風で高級感のある イメージにし、下部には閲覧差視点になったデザインにしていく。 また目を止まらせたいコンテンツには大きく画像を配置したり余白 を取って目を引くポイントをつくる。 和風で高級感な中にも親しみやさをだす コンテンツ 閲覧者が自然と下に読み進めてもらえるようなレイアウトにしてい く。

    見せたいものと読ませるものを分け、サイズのコントラストをつけ て表現する。 コンテンツ間の境目には繋がりを持たせて一体感をだす。 閲覧者に飽きさせないレイアウトに レイアウト 国産うなぎの和風で高級なテイストをデザインで表現する。 背景には黒を使用することで高級感を、あしらいには和雲や細い 線、フォントにはシンプルな明朝体と筆体、配色には赤色と金を使 用し高級感をだす。 和風で高級感のあるデザインに テイスト 作品
  9. 以下のように選定。 フォント・カラー フォント 日本語・英数字 Noto Serif JP シンプルでありながら和風で高級感があるため使用。 数字など注目させたいポイントには斜体で強調。 日本語見出し

    TA風雅筆 インパクトのあり和風なイメージであるため使用。 使用箇所はキャッチなど目を引きたい箇所に限定。 ベースカラー 和と救急感の雰囲気をだすため黒を使用。 メインカラー 黒背景で目立ちトーンを調整できることで 和風な印象を出すこともできる赤いろを使用 アクセントカラー 高級感がありながらギラギラしていない 落ち着ついた金色を使用。 カラー 作品
  10. 東京と沖縄にお店をかまえ チーズケーキやスコーンなどの洋菓子を製造し 店舗、通販、および毎月全国で 開催するイベントショップで販売している。 事業内容 ◆職種:主婦 ◆名前(年齢):吉田かなこ(47歳) ◆居住地:大阪府大阪市 ◆情報: 大阪市内の高層マンションに住んでおり旦那は大

    手広告代理店勤務で年収1000万円。子どもはい ない。スイーツが大好きで毎月通販でいろんなス イーツを取り寄せている。 ペルソナ 広告バナーから商品に興味関心をもってもらい クリックしてもらう。 目的 ・目を引くデザインになっていない ・商品の良さが伝わらない ・テキストが小さくバナー感がない 改善点 作品
  11. テイスト、レイアウト、構成から制作方針を立てる デザインの制作方針 今回は2パターンのデザイン構成を用意する。 訴求軸は素材イメージでの訴求と権威性と商品画像での訴求の二軸 でデザインをしていく。 商品イメージと権威性を軸に訴求 構成 目を引くためにキャッチコピーを大きく入れて商品情報に視線を誘 導する。 今回は2案のデザインを作成するため訴求に合ったレイアウトを作

    成していく。 目を引くキャッチと商品画像をメインに レイアウト 現状のシンプルな温かみのあるイメージからHPやSNSなどの会社情 報を元に品のあるナチュラルなブランドイメージの世界観をデザイ ンで表現する。 また商品の推しポイントである滑らかな味で材料のレモンと牛乳が 視覚的に伝わるようにする。 ブランドイメージにあった世界観に テイスト 作品
  12. 以下のように選定。 フォント・カラー フォント 日本語・英数字 Noto Serif JP シンプルであり品がある明朝体を使用。 キャッチコピーは縦比率を伸ばして使用。 日本語(1パターンで使用)

    Noto Sans JP 明朝体との対比で目を引くキャッチコピーに使用。 ベースカラー 品がありナチュラルである薄いオレンジを使用 メインカラー ブランドイメージカラーを使用 商品が黄色系のため背景に使用して商品を映えさせる アクセントカラー 商品の色を使用 デザイン全体に統一感がでて青との組み合わせで目を引 く色味 カラー 作品
  13. 実際に3名ほどにアプリを使用してもらい行動や思考を洗い出しました。 体験設計 ・いきなりマップがでてきてわ かりづらいな。 まずはルート一覧で比較したい な ・ルートの特徴を知りたいな ・普段と違うUIで使いづらいな ・手で押しづらいな ・とりあえず京都に特化してい

    るアプリで良さそうだし試して みるか ・TOP検索画面が使いづらくて 不安だけど経路検索詳細を見て みよう ・大手アプリは電車の乗り換え はわかりやすいがバスも含む ルートは分かりづらい ・マップでバス亭までの道のり をわかりやすく案内してもらえ る機能がほしいな ・旅行期間しか使用しないの で、無料アプリがいいな なるべく交通費を抑えながら 効率よく観光したいので バスと電車をうまく活用したい 自分が使用したい 経路を選択して使用 情報を入力し、検索する アプリを開く インターネット、SNS、アプリ ストアから良さそうなアプリを 探して比較検討する バスと電車を使った 乗換案内をしてくれる サービスに関心が高まる 京都乗り換え案内アプリをダウンロードし交通経路を検索する 京都乗り換え案内アプリを ダウロードし 交通経路を検索する 複数の乗換アプリを 比較した上で どのアプリを利用するのか決定 京都へ旅行することになり 交通ルートを下調べする 思考・心理 行動 定義 フェーズ アプリの利用 比較検討 アプリ利用のきっかけ 作品
  14. AppleやGoogle Playにある 京都市交通局が作成した市民や観光客が 出発地から目的地までの最適な交通手段の情報を 簡単に入手できるアプリで観光案内もついている。 App内容 ◆職種:会社員 ◆名前(年齢):小川恭平(27歳) ◆居住地:千葉県習志野市 ◆情報:

    普段からよく乗換案内アプリを使用している。 京都市内への観光でアプリを使用と思っている。 ペルソナ アプリで交通手段の検索と観光案内を利用してもらう。 目的 ・UIが分かりづらい ・検索時に経路一覧がない ・観光案内の機能が独立してしまっている 改善点 作品
  15. 以下のように選定。 フォント・カラー フォント 日本語・英数字 Noto Sans JP シンプルで信頼感のある読みやすいゴシック体を使用。 ベースカラー 和風で落ち着いた薄い黄色を使用

    メインカラー 京都のイメージがある茶色を使用 アクセントカラー メインとのコンテラストがある黄土色を使用 カラー 作品
  16. 老若男女だれでも使いやすいと意識し 大きく構成を変更。 検索TOPのデザイン Point01 左右どちらでも押し やすく目立つ検索ボ タン 読みやすさを意識し た時刻テキストの順 番と検索範囲のアイ

    コン 直感的にわかりやす いレイアウトとテキ ストの読みやすさ 上部にタブを追加 検索履歴とお気に入 りを入れアプリを普 段から使用している 方の使いやすさ向上 After 検索TOP時点でお気 に入りボタンは不要 (検索してみてみな いとわからない) 一番大切な検索ボタ ンが右に寄っていて 左手で押しづらい ボタンを押さないと 意味が伝わらない 指で押しづらいレイ アウト 経路を逆にするボタ ンと経由の位置も右 にあり機能が直感的 に分かりづらい Before 作品
  17. 機能を洗い出し どこに配置すればいいのかを 考えデザインしました。 経路詳細のデザイン Point02 予定時間が変わった 時に備えてコンテン ツ下にボタンを追加 既存では独立してい た観光案内を到着地

    にいれることで機能 をより使ってもらえ るように バスと電車を区別で きるようテキストを 追加 出発地と到着地は時 刻に背景をつける 既存では「駅情報」 となっていたボタン を直感的にわかる時 刻表と周辺地図に変 更 直感的にわかる経路 タブと経路情報 After アイコンだけだと電 車かバスか分かりづ らい ボタンが押すまでな んの機能があるのか わからない 駅やバス停の情報が なくて不便 必要最低限の情報は あるが直感的に分か りづらい 他の経路も比較でき ない Before 作品
  18. 三重県津市にある小中高生を対象とした学習塾。 少人数クラスで一人一人と時間をかけて 正面から向き合った指導をしている。 事業内容 ◆職種:主婦 ◆名前(年齢):山田よし子(37歳) ◆居住地:三重県津市 ◆情報: 他塾に通っている中学生の息子がいるが成績に伸 び悩んでいる。少人数クラスで生徒一人一人に合

    わせた丁寧な指導をしてくれる塾を探している。 ペルソナ 少子化が進む中でeラーニングの塾や同じ地域の他塾に 生徒を取られており生徒数が減っている。 対面授業の塾として他塾との競合に勝ち地域に根ざした 塾を目指していきたい。 ビジネス課題 ・ただ勉強を指導するのではなく、一人ひとりに向き 合い人間力から変えていく指導 ・勉強に集中できる環境(先生がきちんとみてくれる) ・塾長 が指導(学生講師 がいない) USP HP から塾に興味 を持 っても らい 体験 授業のお問 い合わせにつ なげ る。 目的 ・塾のUSP がわからない ・タ ーゲット がわからない ・閲覧者視点 でコ ンテ ンツ の構 成がさ れていない HP改善点 作品
  19. テイスト、レイアウト、構成から制作方針を立てる デザインの制作方針 既存サイトからの改善としてMVとMV下のコンテンツで塾のUSPを 訴求して興味を持ってもらえるような構成にしています。 コンバージョンは閲覧者の心理を考えここでお問い合わせしたいポ イント2箇所設置しています。 USPが伝わり興味を持ってもらう構成に 構成 奇抜なおしゃれさは不要でシンプルで見やすいレイアウトにしてい く。生徒や教室の様子など画像がメインとして良いイメージを与え

    られるようにしていく。 情報のみやすさを第一に レイアウト 現状のサイトは当たり障りのない人間味のないテイストになってい る。そのため塾らしい信頼感のある雰囲気を残しつつ塾のUSPであ る人生を変えるというコンセプトにあったデザインに落とし込む。 塾らしい誠実感と先生の想いを入れる テイスト 作品
  20. 以下のように選定。 フォント・カラー フォント 日本語・英数字 Noto Serif JP シンプルで信頼感のある読みやすいゴシック体を使用。 日本語見出し TA風雅筆

    先生の想いを伝えたい見出しに使用。 ベースカラー シンプルで清潔感のある白を使用 メインカラー 人間味あり先生の熱い想いが伝わる赤を使用 アクセントカラー 学習塾らしい信頼感のある青を使用 カラー 作品