公開用_Yuma Ishikura portfolio

Transcript

1. Web designer YUMA ISHIKURA PORTFOLIO
2. 目次 Contents プロフィール 03 サービスの特徴 05 制作実績 14 01.オウンドメディアサイト 02.メガネブランドのコーポレートサイト 03.日焼け止めのバナー 04.卓球場のチラシ 貢献できること 52 ご提案の流れ 55 02
3. profile プ ロ フ ィ ー ル 0 3
4. 名前 石倉由麻 出身地 京都府 略歴 2021年3月：立命館大学　法学部・法学科卒業 2021年4月：株式会社日立ソリューションズ 入社　 2024年4月：フリーランスデザイナーとして活動開始 好きなこと 漫画の世界に浸ること　 進撃の巨人・左利きのエレン・東京喰種が特に好き。 最近は左利きのエレンの名言集を 見ながら、 自分を奮い立たせている。 サウナでリフレッシュ 「整う」 の感覚を知ってから虜になり、 週１回の頻度で通う。 サウナ発祥の地フィンラン ドへサウナ旅に行くことが夢。 YUMA ISHIKURA プロフィール profile 04
5. feature サービスの特徴 05
6. キービジュアルのご提案イメージ サービスの特徴 feature 07
7. サービスの特徴 feature 13 意図の汲み取り 定例mtgを必須化してその場で画面共 有しながら、修正内容を確認いたしま す。お客様のディレクション負担を最 小限に抑えた気持ちのよい案件進行を 心がけています。 高品質なクリエイティブ クオリティに満足いただいた上でご契 約いただけるよう、初稿無料でご提案 させていただきます。 営業経験を活かした提案 前職で、お客様と日々接することで得 られた提案力を活かし、貴社の想いや 意図を汲み取ったデザインをご提案い たします。
8. Works 制作実績 14
9. 制作実績「コンサルに特化したオウンドメディアサイト」（コンペ優秀賞受賞） Works 15 Type：Website コンサルプロジェクトを成功させるため のノウハウを提供するメディアサイト 依頼主 デザインコンペ応募作品 制作範囲 デザイン・ライティング 制作期間 要件定義〜デザイン完成まで約10日間 使用ツール Figma/Photoshop URL Figmaファイル
11. 要件整理 Owned Media site ターゲット …— 20代前半の若手コンサルタント～30代前半の中堅コンサルタンƒ ‰— コンサルを頼みたいと思っている大手企業の40代マネージャークラスの人
 →コンサルのナレッジや成功事例に関する情報を集め、プロジェクトを成功させたい。 目的 “ ターゲットに記事を読んで、信頼できるメディアサイトだと認識してもらう。
 →最終的には自社で運営するコンサルタントのマッチングプラットフォームへの流入を達成したい . （CV：コンサル案件の依頼/フリーコンサルタントの登録） ご要望 “ 信頼性があるトーンで作成していただたいT “ かたすぎる昔の中小企業のHPやコンサルファームのHPのようなものより、先進性があると理想的T “ メディアとして他の記事を読みたくなるようなトーンだとありがたいT “ ターゲットが思わずスクロールするように工夫していただきたいT “ 青系統でシンプルなカラーでお願いしたい。 17
12. 方針の策定 Owned Media site 期待感を演出することで、本メディアサイトのベネフィッ トであるビジネスの成功を訴求しようと考えた。 ビジュアルから信頼できるサイトだと感じてもらうことで、本 サイトを知らない新規ユーザにも記事を読んでもらいやすい と考えた。加えて、クライアント様が大切にしている理念 【新しい価値の創造】が感じられるようにし、ファンの増加 に繋げたいと考えた。 コンサルに関する有益な情報を提供してくれるメディアであ ることを認知してもらうために、読みたい記事が瞬時に見つ かる設計が重要だと考えた。 信頼・先進性を想起させる デザイン 期待感が感じられる コンテンツ 記事がすぐに見つかる レイアウト 18
13. ベンチマーク Owned Media site レイアウト クライアント様から頂いた参考サイトを言語化し、 その内容を元にベンチマークサイトを選定。 https://harmonies.kumon.ne.jp/ l 欲求（記事を読みたい）が喚起されるF l 記事の検索のしやすさ、見やすf l スムーズな視線誘導を促すレイアウト https://www.estorage.co.jp/magazine/ https://www.consul.global/ https://designing.jp/ 19
14. ベンチマーク Owned Media site デザイン クライアント様から頂いた参考サイトを言語化し、 その内容を元にベンチマークサイトを選定。 https://callcenternavi.jp/connenavi/ ‡ 信頼感を感じる爽やかなブルー
 →大手らしさを出すため、より重厚感のあるカラー˜ ‡ イラストが多く、少しカジュアルな印象。
 →大手らしさを出すため、サムネ画像は写真メイン。 https://examination.w3.kanazawa-u.ac.jp/ https://ysa.dena.com/ https://www.ad-flex.com/ クライアント様より より大手のような信頼感 があるとベスト 20
15. 情報設計 Owned Media site サイトマップ 必要な頁の洗い出し＋今回のご提案範囲 21
16. デザイン Owned Media site フォント＆カラー フォント Montserrat →ゴシック体と相性の良いサンセリフ体、また、大サイズで 利用した時も美しさを保つMontserratを選定。ウェイトは下 げて使用し、スタイリッシュな印象にした。 Noto Sans JP →記事を読んでいただくことが一番重要と考え、可読性の高 いゴシック体。 その中でもシンプルでミニマルな印象の Noto Sans JPを選択。 カラー Gradation ＃FFFFFF ＃00213B ＃150201 Gradation ＃FFFFFF ＃00213B ＃150201 →メインカラーとしてブルーのグラデーションを使用。先に 向かって明るいブルーにすることで「成功」を表現した。 →アクセントカラーとして重厚感のあるブルーを使用し、ご 要望にあった大手企業のような信頼感、またコンサルビジネ スの印象にもマッチすると考えた。 22
17. デザイン Owned Media site FV作成 サービスのベネフィットを整理したのち、 参考サイトをリサーチ＆言語化。 その後、 KVを作成。 構成を検討する際は まずは で記載。 した後、 WF作成に取り掛かります。 手描き 思考の整理が完了 情報設計  サイドバーを固定配置し、回遊性とUX向上を目指した。SP 版は右下に検索ボタンを固定配置し、乖離が少なくなるよ うにŠ  FVで興味を促せるよう、記事はタイトル＋概要文を記載。 また、ピックアップ記事は遷移する仕様でユーザのタッチポ イントを増やしたŠ  記事の読みやすさを優先して、範囲の限られるSP版はヘッ ダーのCVボタンを削除した。 デザイン  コンサル業務から「データ→箱→四角形」を連想し、あし らいに使用したŠ  全体的に角張ったデザインとしたが、CVボタンは丸みをつ けることで注目されるようにした。 23
18. デザイン Owned Media site 下層作成 FVに合わせ下層部分を作成。 ① ② ③ ①新着記事 a 記事の文章が重要と考え、サムネ画像は小さめh a 各カテゴリー記事一覧への遷移ボタンを設け、回遊率の向上を目指した。 ②人気記事一覧（ご提案） a ランキングセクションを設け、ユーザの興味を促すようにしたh a 特に注目して欲しい1位の記事はサイズを大きく、上部に掲載することでメリハ リをつけた。 ③話題のキーワード（ご提案） a ②と同様の理由で、人気タグセクションを設けた。また、キーワード毎の記事数 を記載し、キーワードの多い記事に辿り着きやすい設計にした。 24
19. デザイン Owned Media site 下層作成 FVに合わせ下層部分を作成。 ④メディアサイトのコンセプト（ご提案） w 誰が、どんな想いで、どんな価値を届けるために運営しているのか、示すことで 信頼や好感度の向上を目指した– w 左上部から光が差し込むデザインで、ビジネス成功の期待感を訴求した。 ⑥CTA w 提案文章やマイクロコピーはCVへの敷居が下がる文言を検討– w ２種類のボタンのターゲットがすぐに分かるようアイコンや補足情報を記載– w アクセントカラーを全面に使用し、最も目立つセクションに。 ⑥お知らせ（ご提案） w コンサル記事以外に発信したい情報がある場合は必要と考えた。 ⑦フッター w まずは記事に集中してもらえるよう、へッダーの情報量を少なめにしたため、 フッターで情報を補完した。 25 ④ ⑤ ⑥ ⑦
20. 制作実績「メガネブランドのコーポレートサイト」（架空） Works 26 Type：Website メガネブランドを展開する株式会社 Visonsのコーポレートサイト 制作範囲 デザイン・ライティング 制作期間 要件定義〜デザイン完成まで約1ヶ月 使用ツール Figma/Photoshop URL Figmaファイル
22. 要件整理 visions corporate site 株式会社Visons （架空） について œ メガネブランド「Lunettes（ルネット）」をオンラインで展開しているu œ 環境に配慮した素材を使用したメガネであるため、SDGsに関心がある20~30代の若者中心に人気u œ おしゃれでデザイン性もあるため、ファッションの一部としてLunettesのメガネを取り入れる人も増えているu œ 商品の特a ƒ` オンライン販売のW V` 商品の売上の一部は発展途上国に寄付され† H` 満足しない場合は100%返金保B X` 価格は1万円前後 ターゲット œ 20代~30代の若年層がメインターゲッ² œ SDGs、サステナビリティー、社会貢献、ソーシャルグッド等に興味関心がある。 目的 œ 「どんな会社が運営してるのだろう？」と興味をもった人に企業の情報を届け、信頼を高めるu œ 事業拡大に伴い、自社の採用力の強化にも繋げる。 28
23. 方針の策定 visions corporate site ＋αの価値が届けられる デザイン 新規受注や採用に繋がる レイアウト トレンド感のあるサイトでターゲットの興味関心を促し、本 サイトを読み、＋αの価値提供（＝環境にも優しい）を行なっ ている企業だと知ってもらえるような流れを想定。おしゃれ なだけでなく、環境にも貢献したいという想いを届けること で今以上に愛される企業になると考えた。 競合との一番の差別化ポイントは【環境に優しい素材を使 用】していることなので、この部分を文章だけでなく、視覚 的にも訴求し、分かりやすいサイトを目指した。また、余白 も十分にとり、知りたい情報が入手しやすい設計にした。 29
24. ベンチマーク visions corporate site レイアウト レイアウトや機能面の参考サイト https://rdlp.jp/archives/otherdesign/lp/90535 https://www.zoff.co.jp/shop/contents/seeblue.aspx https://i-ne.co.jp/company/mission/ https://ha-ru2017.co.jp/recruit/ https://www.hoyu.co.jp/ 30
25. ベンチマーク visions corporate site デザイン 情緒面などデザインのトンマナの参考サイト https://www.baumjapan.com/baum/index.html https://qino.jp/ https://www.latte-tokyo.com/ 31
26. 情報設計 visions corporate site サイトマップ 必要な頁の整理 32
27. デザイン visions corporate site フォント＆カラー フォント MinervaModern →企業としての信頼が高まるようセリフ体を。また、イラス ト素材をサイトに使用する予定のため、柔らかい印象になり すぎないようフォントは細身でスタイリッシュな印象の MinervaModernを選定。 Noto Sans JP →可読性の高いゴシック体を使用。その中でもシンプルでミ ニマムな印象のNoto Sans JPを選択。 カラー ＃FFF6ED #839E84 ＃223A22 ＃150201 ＃FFF6ED #839E84 ＃223A22 ＃150201 →メインカラーには環境に良い、サステナブルなブランドイ メージから、緑を選定。彩度控えめなGray Greenを使用 し、スタイリッシュさを表現した。 →アクセントカラーには森林をイメージした濃い緑を差し込 み、ブランドイメージをより深く訴求しつつ、メリハリのあ るサイトを目指した。 33
28. デザイン visions corporate site FV作成 メインビジュアルを印象強く 訴求できているか、 といった視点で何パターンか 構成を試し、 検討しました。 ↑スクロール後のデザイン レイアウト ‹ メインビジュアルを強く印象づけられるよう全面配置型＋メイ ンコピーのシンプルは構成にしたq ‹ グロナビはFVでは世界観の表現を優先するため背景カラーなし で表示し、スクロール後背景ありにした。 デザイン ‹ 眼鏡の奥に豊かな森が広がる構成にすることで「眼鏡を通し て、サステナブルな社会を実現する」をビジュアルで表現q ‹ ロゴデザインについても「O」を地球＋リーフに変更すること でサステナブルさを訴求。 34
29. デザイン visions corporate site 35 下層作成 FVに合わせ下層部分を作成。 ① ② ③ ①ミッション（ご提案） ƒ ミッションをFVの下に配置。冒頭でVisonsへポジティブな印象を持ってもら い、ユーザの興味や期待感を高め、下のセクションへのスクロールを促す。 ②ニュース ƒ 気になる記事をカテゴリー毎に表示できるようにした‚ ƒ サイト運用者の負担を避けるため、タグは全て同一色に統一。 ③ブランド ƒ ２種類の写真を使用し、男女に刺さるレイアウトにした‚ ƒ 視線の先にテキストを配置することでスムーズな視線誘導を促した‚ ƒ 特徴３つをアイコンのように表現し、記憶に残りやすくした‚ ƒ 他社と比較し、お手頃な価格であることを印象づけるため、イラスト素材で親 しみやすい印象に。
30. デザイン visions corporate site 36 下層作成 FVに合わせ下層部分を作成。 ④ギャラリー（ご提案） ‰ メガネブランドの雰囲気をユーザにアピール。Instagramに投稿している内容 を表示する想定。 ⑤私たちについて・採用 ‰ 交互に写真と文章を配置し、ページ下部でも飽きがこないようにした。 ⑥お問い合わせ ‰ 最重要となるCVボタンなので、全体にカラーを使用し、目立たせた。 ⑥フッター ‰ 全項目を一覧で記載したり、FABでいつでもトップに戻れるようにし、UX向上 を目指した。 ④ ⑤ ⑥ ⑦
31. 下層作成 ブラッシュアップ前のトップページ 37 デザイン visions corporate site
32. 制作実績「日焼け止めバナー」（自主制作） Works 38 Type：banner 日焼け止めクリーム 『Dayguard』 の商品紹介バナー 掲載先 検索エンジンのディスプレイ広告 制作範囲 デザイン 制作期間 要件整理〜デザイン完成まで約2日 使用ツール Illustrator/Photoshop Sunscreen Banner
33. 方針の策定 Sun screen ターゲット 日焼けをしたくない、美肌有効成分などの＋αの効果が欲しいと思っている20代〜50代の女性 目的 キャンペーン情報を告知し、新規ユーザーを獲得すること コンセプト 美白を維持しつつ、夏を思いっきり楽しみたい！と感じてもらうバナー 01 ターゲットの年齢層は若いので、弾けるような若々しさや健康的な印象を訴求することを意識する。 02 真夏の日差しの中でも美白を維持しているビジュアルを表現することで、この商品のベネフィットを訴求する。 39
34. ベンチマーク Sun screen イメージボード 参考のバナーデザインを収集し、言語化。 与えたい印象 h 上品、エレガンX h 夏らしU h 健康的でイキイキとした若々しさ 使用したいモチーフ h ターゲット層にマッチする女m h 商品画像とテクスチy h ゴールドの文字や素 h 青空や夏の日差y h 真珠や潤いを感じるあしらい 40
35. デザイン Sun screen 手書きラフ 印象に残ったバナーを元にラフ案を作成。 気づき ` 女性の視線が向く方向にテキストが入ると、スムーズに視 線誘導ができる。 ` キャンペーン情報は下部にある方が、商品について認知し てもらった後に訴求ができる。 41
36. デザイン Sun screen 42 フォント＆カラー フォント Optima →ロゴは上品さを表現するため、セリフ体のOptimaを使用。 Allura Regular →繊細で女性らしい印象のフォントを使用。 しっぽり明朝 →上品な印象を出すため、明朝体を選定。流れるような曲線 が特徴的なしっぽり明朝は上品な雰囲気を出すのに合ってい ると考え、使用した。 カラー Texture ＃FFFFFF ＃FF3C8D ＃5F451D ＃FF3C8D Texture ＃FFFFFF ＃FF3C8D ＃5F451D ＃FF3C8D →背景には青空の素材を使用し、夏を想起させるようにし た。カラーは美白のイメージであるホワイトをメインに使用 し、ターゲットの年齢層に合った若々しい印象のピンクを使 用。キャンペーン情報は他の情報と区別するため、茶色を使 用し、目立つようにした。
37. デザイン Sun screen バナー作成 レイアウト 4 女性の顔や背中がよく見える配置にして、 ベネフィットを強く訴求q 4 Zの法則にならって 「権威性→キービジュアル→キャッチコピー→商品の特徴→ キャンペーン情報」 に流れるようにし、 ユーザの興味関心に合わせて視線誘導す ることを目指したq 4 コピーや特徴３つに斜めにし、 明るい未来が手に入ることを印象づけた。 デザイン 4 肌に自信があることを想起できる女性を選定。 加えて、 若々しさを表現するため、 肌、 背中、 髪の毛に艶感を足したq 4 キャンペーン情報は上品さが損なわれないようにしつつ、 目立つカラーやテクス チャを使用した。 文字にも動きをつけ、 勢いのある印象にq 4 フレアを大きく配置し、 夏の強い日差しの中で美白を保てていることを表現し た。 43
38. デザイン Sun screen ブラッシュアップ前のデザイン レイアウトやあしらいなどの検討 始めは黒文字を使用していたが、 繊細さが損なわれてしまうので、 上品で 見やすい茶色に変更。 また、 あしらいも繊細さがより伝わるものを選定。 カラーパターン検討 上品、 夏らしさの観点で何パターンかカラーを検討し、 若々しさを訴求 するにはピンクが一番合うという結論に至った。 44
39. 制作実績「卓球場のチラシ」（架空） Works 45 Type：flyer 浅草にある卓球場 『ピンポントーキョー』 のチラシ 依頼主 ピンポントーキョー サイズ A4縦(210 × 297mm) 制作範囲 チラシ（表・裏）のデザイン 制作期間 デザイン完成まで7時間 使用ツール Figma
40. 要件整理 Flyer tabletennis ターゲット 0 20代〜30代の男性 目的 0 卓球場への認知・来店 ご要望 0 ダサい卓球のイメージをかっこよくしたいa 0 ロゴ、写真素材は提供しているが、使っても使わなくても良い。 与えたい印象 0 かっこいい 要素・媒体・イメージで分けてリサーチ実施 46
41. ベンチマーク Flyer tabletennis 47 要素の分析 卓球場に関するデザインをリサーチし、言語化。 卓球に関連するカラーを使用することで、一目見て何に対するチラシか理解できる
42. ベンチマーク Flyer tabletennis 48 媒体やイメージの分析 スポーツ系のかっこいい・チラシデザインをリサーチし、言語化。 ‘ 無彩色のカラーを使用、コントラストが強めp ‘ 文字は太めp ‘ 英語を記載すると日本語のみよりも垢抜けるp ‘ スペーツ系で疾走感を与えたい時は右からシュッと移動 しているような加工や掠れ文字が施されているp ‘ カーニングで文字間を詰めているp ‘ 下部にいくにつれて、興味を持ったユーザがアクション するために必要な詳細情報や記載されているp ‘ テキストや画像の始点と終点を揃えると見やすい。
43. デザイン Flyer tabletennis 49 フォント＆カラー フォント Bebas neue ヒラギノ角ゴシックPro →男らしいデザインに近づけるため、線の太さが均一で 角ばった印象のフォントを選定。また、欧文は縦にスリムな BebasNeueを選定し、かっこいい印象を目指した。 カラー Texture ＃FFFFFF ＃B0000C ＃0D0D0D Texture ＃FFFFFF ＃B0000C ＃0D0D0D →卓球を想起させる赤・白を使用、それに加え、黒を加える ことでかっこいい印象を目指した。また、ノイズを加えるこ とで、浅草というレトロな場所にあることを表現した。
44. デザイン Flyer tabletennis チラシ （表） レイアウト s 提供されたロゴに合わせて、 写真素材やテキストも斜めに。 全体的な統一感が出るようにしたf s 枠を配置し、 ユーザの視線が枠の中に誘導されるようにした。 メインコピーはあえてはみ出して 配置させることでインパクトのあるビジュアルを目指した。 デザイン s 全体的に文字の間隔を少し詰めることでクライアントの要望であるかっこいい、 男らしいデザ インを目指したf s 動きをつけたテキストの配置、 また文字装飾を行うことでスポーツの躍動感を演出したf s 実際にWeb検索しているような図を使用し、 ユーザの行動喚起に繋がるように。 50
45. デザイン Flyer tabletennis チラシ （裏） レイアウト t 冒頭で特徴を理解してもらい興味を促し、 その後アクションに必要な情報が得られる構成にy t 料金はプラン毎の比較が見やすくなるよう表にした。 k t ピンポントーキョーのサイトに記載されているコピーを使用 （FRIP〜） し、 ユーザがサイト閲覧 時、 すぐにこのチラシの卓球場だと理解できるようにした。 デザイン t 表面で使用した要素を裏面でも繰り返し使用し、 統一感が出るようにしたy t 卓球ボールをイメージした白円をあしらいとして使用y t クーポンはチケットであることをビジュアルで想起できるように。 加えて、 カットして持ち運び できることを示した。 51
46. What I can contribute 貢献できること 52
47. 現状スキル Skills 53 Skills できること Figma‥Webサイト、 LP、 バナーの作成 Photoshop‥写真加工、 写真補正、 合成画像作成 Illustrator‥名刺、 チラシ、 バナー HTML/CSS‥簡単なコードであれば読解できるレベル(Progate中級編、 書籍 「HTMLとCSS」 終了程度） これまでの学び Progate、Ude my、書籍等を通して独学 で１ヶ月間学び、オン ラインスク ールにてデザイ ンの基礎を学びました。スク ールのカリキュ ラム以外には 、書籍やウェビ ナーへの参 加、 ギャ ラリ ーサイトに掲載さ れてい るW ebサイトの言語化 などインプット 作業を行いつつ 、自 主制作やデザイン コンペに参 加す るなどでアウトプットを行って きました。 業務の傍ら、約半年間継続した結果 、スク ール開催の コンペにて約50人 中、優秀賞(上位 2~4名)を受賞しました。
48. 私の強み Strengths 目標に向けて自ら主体的に行動し、 成果を出すことができます。 営業においても、 新たな提案方法に取り組むことで、 営業同期17人中3 人のみだった最高評価を達成しました。 デザイナーとしても与えられ た業務をこなすだけでなく、 自ら考え行動し、 成果に繋げることを目 指します。 継続力 目標達成 好奇心旺盛 一度決めたことは必ず達成すべく、 継続して努力することができます。 この強みは小学生3年生から10年以上取り組んだテニス活動や陸上部 （長距離） で培ってきました。 デザインにおいても日頃のインプットを継 続して行い、 自身のアウトプットに反映できるよう粘り強く努力するこ とができます。 好奇心旺盛な性格で、 知識を伸ばすことへの努力を惜しみません。 これまでも料理なら料理教室へ、 英語ならカナダへの異文化交流・英 会話などジャンルは違えど、 自身の知識を広げるため行動してきまし た。 デザインにおいても、 幅広い表現への興味→追究→挑戦を繰り返 すことで、 より良いクリエイティブに貪欲に挑戦することができます。 54
49. Flow ご提案の流れ 55
50. ご提案の流れ Flow ヒアリング 事前にヒアリングシートをお送りしま す。内容をご記入いただいた上で、詳 細な課題やご要望を30分程度お伺いさ せてください。 ご提案 5営業日以内にLPまたは対象となるデ ザインの初稿を無料でご提案させてい ただきます。 ご契約 ご提案内容に価値を感じていただけた 場合のみ、ご購入またはご契約させて いただきます。 03 02 01 56
51. Lastly 最 後 に 5 7
52. 最後に Lastly 58 貴重なお時間をいただき、 誠にありがとうございます。 デザインが好きだという気持ち また、営業としてお客さまに日々接することで得られた提案力を活かし、 人の行動や感情を導くクリエイティブを作ることを目指しています。 ぜひ、お気軽にご相談くださいませ。