公開用_Yuma Ishikura portfolio

by yuma

Slide 1

Slide 1 text

Web designer YUMA ISHIKURA PORTFOLIO

Slide 2

Slide 2 text

目次 Contents プロフィール 03 サービスの特徴 05 制作実績 14 01.オウンドメディアサイト 02.メガネブランドのコーポレートサイト 03.日焼け止めのバナー 04.卓球場のチラシ貢献できること 52 ご提案の流れ 55 02

Slide 3

Slide 3 text

profile プロフィール 0 3

Slide 4

Slide 4 text

名前石倉由麻出身地京都府略歴 2021年3月：立命館大学　法学部・法学科卒業 2021年4月：株式会社日立ソリューションズ入社　 2024年4月：フリーランスデザイナーとして活動開始好きなこと漫画の世界に浸ること　進撃の巨人・左利きのエレン・東京喰種が特に好き。最近は左利きのエレンの名言集を見ながら、自分を奮い立たせている。サウナでリフレッシュ「整う」の感覚を知ってから虜になり、週１回の頻度で通う。サウナ発祥の地フィンランドへサウナ旅に行くことが夢。 YUMA ISHIKURA プロフィール profile 04

Slide 5

Slide 5 text

feature サービスの特徴 05

Slide 6

Slide 6 text

キービジュアルのご提案イメージサービスの特徴 feature 07

Slide 7

Slide 7 text

サービスの特徴 feature 13 意図の汲み取り定例mtgを必須化してその場で画面共有しながら、修正内容を確認いたします。お客様のディレクション負担を最小限に抑えた気持ちのよい案件進行を心がけています。高品質なクリエイティブクオリティに満足いただいた上でご契約いただけるよう、初稿無料でご提案させていただきます。営業経験を活かした提案前職で、お客様と日々接することで得られた提案力を活かし、貴社の想いや意図を汲み取ったデザインをご提案いたします。

Slide 8

Slide 8 text

Works 制作実績 14

Slide 9

Slide 9 text

制作実績「コンサルに特化したオウンドメディアサイト」（コンペ優秀賞受賞） Works 15 Type：Website コンサルプロジェクトを成功させるためのノウハウを提供するメディアサイト依頼主デザインコンペ応募作品制作範囲デザイン・ライティング制作期間要件定義〜デザイン完成まで約10日間使用ツール Figma/Photoshop URL Figmaファイル

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

要件整理 Owned Media site ターゲット 20代前半の若手コンサルタント～30代前半の中堅コンサルタンコンサルを頼みたいと思っている大手企業の40代マネージャークラスの人  →コンサルのナレッジや成功事例に関する情報を集め、プロジェクトを成功させたい。目的ターゲットに記事を読んで、信頼できるメディアサイトだと認識してもらう。  →最終的には自社で運営するコンサルタントのマッチングプラットフォームへの流入を達成したい . （CV：コンサル案件の依頼/フリーコンサルタントの登録）ご要望信頼性があるトーンで作成していただたいT かたすぎる昔の中小企業のHPやコンサルファームのHPのようなものより、先進性があると理想的T メディアとして他の記事を読みたくなるようなトーンだとありがたいT ターゲットが思わずスクロールするように工夫していただきたいT 青系統でシンプルなカラーでお願いしたい。 17

Slide 12

Slide 12 text

方針の策定 Owned Media site 期待感を演出することで、本メディアサイトのベネフィットであるビジネスの成功を訴求しようと考えた。ビジュアルから信頼できるサイトだと感じてもらうことで、本サイトを知らない新規ユーザにも記事を読んでもらいやすいと考えた。加えて、クライアント様が大切にしている理念【新しい価値の創造】が感じられるようにし、ファンの増加に繋げたいと考えた。コンサルに関する有益な情報を提供してくれるメディアであることを認知してもらうために、読みたい記事が瞬時に見つかる設計が重要だと考えた。信頼・先進性を想起させるデザイン期待感が感じられるコンテンツ記事がすぐに見つかるレイアウト 18

Slide 13

Slide 13 text

ベンチマーク 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

Slide 14

Slide 14 text

ベンチマーク Owned Media site デザインクライアント様から頂いた参考サイトを言語化し、その内容を元にベンチマークサイトを選定。 https://callcenternavi.jp/connenavi/ 信頼感を感じる爽やかなブルー  →大手らしさを出すため、より重厚感のあるカラーイラストが多く、少しカジュアルな印象。  →大手らしさを出すため、サムネ画像は写真メイン。 https://examination.w3.kanazawa-u.ac.jp/ https://ysa.dena.com/ https://www.ad-flex.com/ クライアント様よりより大手のような信頼感があるとベスト 20

Slide 15

Slide 15 text

情報設計 Owned Media site サイトマップ必要な頁の洗い出し＋今回のご提案範囲 21

Slide 16

Slide 16 text

デザイン Owned Media site フォント＆カラーフォント Montserrat →ゴシック体と相性の良いサンセリフ体、また、大サイズで利用した時も美しさを保つMontserratを選定。ウェイトは下げて使用し、スタイリッシュな印象にした。 Noto Sans JP →記事を読んでいただくことが一番重要と考え、可読性の高いゴシック体。その中でもシンプルでミニマルな印象の Noto Sans JPを選択。カラー Gradation ＃FFFFFF ＃00213B ＃150201 Gradation ＃FFFFFF ＃00213B ＃150201 →メインカラーとしてブルーのグラデーションを使用。先に向かって明るいブルーにすることで「成功」を表現した。 →アクセントカラーとして重厚感のあるブルーを使用し、ご要望にあった大手企業のような信頼感、またコンサルビジネスの印象にもマッチすると考えた。 22

Slide 17

Slide 17 text

デザイン Owned Media site FV作成サービスのベネフィットを整理したのち、参考サイトをリサーチ＆言語化。その後、 KVを作成。構成を検討する際はまずはで記載。した後、 WF作成に取り掛かります。手描き思考の整理が完了情報設計 Â サイドバーを固定配置し、回遊性とUX向上を目指した。SP 版は右下に検索ボタンを固定配置し、乖離が少なくなるように Â FVで興味を促せるよう、記事はタイトル＋概要文を記載。また、ピックアップ記事は遷移する仕様でユーザのタッチポイントを増やした Â 記事の読みやすさを優先して、範囲の限られるSP版はヘッダーのCVボタンを削除した。デザイン Â コンサル業務から「データ→箱→四角形」を連想し、あしらいに使用した Â 全体的に角張ったデザインとしたが、CVボタンは丸みをつけることで注目されるようにした。 23

Slide 18

Slide 18 text

デザイン Owned Media site 下層作成 FVに合わせ下層部分を作成。 ① ② ③ ①新着記事 a 記事の文章が重要と考え、サムネ画像は小さめh a 各カテゴリー記事一覧への遷移ボタンを設け、回遊率の向上を目指した。 ②人気記事一覧（ご提案） a ランキングセクションを設け、ユーザの興味を促すようにしたh a 特に注目して欲しい1位の記事はサイズを大きく、上部に掲載することでメリハリをつけた。 ③話題のキーワード（ご提案） a ②と同様の理由で、人気タグセクションを設けた。また、キーワード毎の記事数を記載し、キーワードの多い記事に辿り着きやすい設計にした。 24

Slide 19

Slide 19 text

デザイン Owned Media site 下層作成 FVに合わせ下層部分を作成。 ④メディアサイトのコンセプト（ご提案） w 誰が、どんな想いで、どんな価値を届けるために運営しているのか、示すことで信頼や好感度の向上を目指した w 左上部から光が差し込むデザインで、ビジネス成功の期待感を訴求した。 ⑥CTA w 提案文章やマイクロコピーはCVへの敷居が下がる文言を検討 w ２種類のボタンのターゲットがすぐに分かるようアイコンや補足情報を記載 w アクセントカラーを全面に使用し、最も目立つセクションに。 ⑥お知らせ（ご提案） w コンサル記事以外に発信したい情報がある場合は必要と考えた。 ⑦フッター w まずは記事に集中してもらえるよう、へッダーの情報量を少なめにしたため、フッターで情報を補完した。 25 ④ ⑤ ⑥ ⑦

Slide 20

Slide 20 text

制作実績「メガネブランドのコーポレートサイト」（架空） Works 26 Type：Website メガネブランドを展開する株式会社 Visonsのコーポレートサイト制作範囲デザイン・ライティング制作期間要件定義〜デザイン完成まで約1ヶ月使用ツール Figma/Photoshop URL Figmaファイル

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

要件整理 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

Slide 23

Slide 23 text

方針の策定 visions corporate site ＋αの価値が届けられるデザイン新規受注や採用に繋がるレイアウトトレンド感のあるサイトでターゲットの興味関心を促し、本サイトを読み、＋αの価値提供（＝環境にも優しい）を行なっている企業だと知ってもらえるような流れを想定。おしゃれなだけでなく、環境にも貢献したいという想いを届けることで今以上に愛される企業になると考えた。競合との一番の差別化ポイントは【環境に優しい素材を使用】していることなので、この部分を文章だけでなく、視覚的にも訴求し、分かりやすいサイトを目指した。また、余白も十分にとり、知りたい情報が入手しやすい設計にした。 29

Slide 24

Slide 24 text

ベンチマーク 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

Slide 25

Slide 25 text

ベンチマーク visions corporate site デザイン情緒面などデザインのトンマナの参考サイト https://www.baumjapan.com/baum/index.html https://qino.jp/ https://www.latte-tokyo.com/ 31

Slide 26

Slide 26 text

情報設計 visions corporate site サイトマップ必要な頁の整理 32

Slide 27

Slide 27 text

デザイン visions corporate site フォント＆カラーフォント MinervaModern →企業としての信頼が高まるようセリフ体を。また、イラスト素材をサイトに使用する予定のため、柔らかい印象になりすぎないようフォントは細身でスタイリッシュな印象の MinervaModernを選定。 Noto Sans JP →可読性の高いゴシック体を使用。その中でもシンプルでミニマムな印象のNoto Sans JPを選択。カラー＃FFF6ED #839E84 ＃223A22 ＃150201 ＃FFF6ED #839E84 ＃223A22 ＃150201 →メインカラーには環境に良い、サステナブルなブランドイメージから、緑を選定。彩度控えめなGray Greenを使用し、スタイリッシュさを表現した。 →アクセントカラーには森林をイメージした濃い緑を差し込み、ブランドイメージをより深く訴求しつつ、メリハリのあるサイトを目指した。 33

Slide 28

Slide 28 text

デザイン visions corporate site FV作成メインビジュアルを印象強く訴求できているか、といった視点で何パターンか構成を試し、検討しました。 ↑スクロール後のデザインレイアウトメインビジュアルを強く印象づけられるよう全面配置型＋メインコピーのシンプルは構成にしたq グロナビはFVでは世界観の表現を優先するため背景カラーなしで表示し、スクロール後背景ありにした。デザイン眼鏡の奥に豊かな森が広がる構成にすることで「眼鏡を通して、サステナブルな社会を実現する」をビジュアルで表現q ロゴデザインについても「O」を地球＋リーフに変更することでサステナブルさを訴求。 34

Slide 29

Slide 29 text

デザイン visions corporate site 35 下層作成 FVに合わせ下層部分を作成。 ① ② ③ ①ミッション（ご提案）ミッションをFVの下に配置。冒頭でVisonsへポジティブな印象を持ってもらい、ユーザの興味や期待感を高め、下のセクションへのスクロールを促す。 ②ニュース気になる記事をカテゴリー毎に表示できるようにしたサイト運用者の負担を避けるため、タグは全て同一色に統一。 ③ブランド２種類の写真を使用し、男女に刺さるレイアウトにした視線の先にテキストを配置することでスムーズな視線誘導を促した特徴３つをアイコンのように表現し、記憶に残りやすくした他社と比較し、お手頃な価格であることを印象づけるため、イラスト素材で親しみやすい印象に。

Slide 30

Slide 30 text

デザイン visions corporate site 36 下層作成 FVに合わせ下層部分を作成。 ④ギャラリー（ご提案）メガネブランドの雰囲気をユーザにアピール。Instagramに投稿している内容を表示する想定。 ⑤私たちについて・採用交互に写真と文章を配置し、ページ下部でも飽きがこないようにした。 ⑥お問い合わせ最重要となるCVボタンなので、全体にカラーを使用し、目立たせた。 ⑥フッター全項目を一覧で記載したり、FABでいつでもトップに戻れるようにし、UX向上を目指した。 ④ ⑤ ⑥ ⑦

Slide 31

Slide 31 text

下層作成ブラッシュアップ前のトップページ 37 デザイン visions corporate site

Slide 32

Slide 32 text

制作実績「日焼け止めバナー」（自主制作） Works 38 Type：banner 日焼け止めクリーム『Dayguard』の商品紹介バナー掲載先検索エンジンのディスプレイ広告制作範囲デザイン制作期間要件整理〜デザイン完成まで約2日使用ツール Illustrator/Photoshop Sunscreen Banner

Slide 33

Slide 33 text

方針の策定 Sun screen ターゲット日焼けをしたくない、美肌有効成分などの＋αの効果が欲しいと思っている20代〜50代の女性目的キャンペーン情報を告知し、新規ユーザーを獲得することコンセプト美白を維持しつつ、夏を思いっきり楽しみたい！と感じてもらうバナー 01 ターゲットの年齢層は若いので、弾けるような若々しさや健康的な印象を訴求することを意識する。 02 真夏の日差しの中でも美白を維持しているビジュアルを表現することで、この商品のベネフィットを訴求する。 39

Slide 34

Slide 34 text

ベンチマーク Sun screen イメージボード参考のバナーデザインを収集し、言語化。与えたい印象 h 上品、エレガンX h 夏らしU h 健康的でイキイキとした若々しさ使用したいモチーフ h ターゲット層にマッチする女m h 商品画像とテクスチy h ゴールドの文字や素 h 青空や夏の日差y h 真珠や潤いを感じるあしらい 40

Slide 35

Slide 35 text

デザイン Sun screen 手書きラフ印象に残ったバナーを元にラフ案を作成。気づき ` 女性の視線が向く方向にテキストが入ると、スムーズに視線誘導ができる。 ` キャンペーン情報は下部にある方が、商品について認知してもらった後に訴求ができる。 41

Slide 36

Slide 36 text

デザイン Sun screen 42 フォント＆カラーフォント Optima →ロゴは上品さを表現するため、セリフ体のOptimaを使用。 Allura Regular →繊細で女性らしい印象のフォントを使用。しっぽり明朝 →上品な印象を出すため、明朝体を選定。流れるような曲線が特徴的なしっぽり明朝は上品な雰囲気を出すのに合っていると考え、使用した。カラー Texture ＃FFFFFF ＃FF3C8D ＃5F451D ＃FF3C8D Texture ＃FFFFFF ＃FF3C8D ＃5F451D ＃FF3C8D →背景には青空の素材を使用し、夏を想起させるようにした。カラーは美白のイメージであるホワイトをメインに使用し、ターゲットの年齢層に合った若々しい印象のピンクを使用。キャンペーン情報は他の情報と区別するため、茶色を使用し、目立つようにした。

Slide 37

Slide 37 text

デザイン Sun screen バナー作成レイアウト 4 女性の顔や背中がよく見える配置にして、ベネフィットを強く訴求q 4 Zの法則にならって「権威性→キービジュアル→キャッチコピー→商品の特徴→ キャンペーン情報」に流れるようにし、ユーザの興味関心に合わせて視線誘導することを目指したq 4 コピーや特徴３つに斜めにし、明るい未来が手に入ることを印象づけた。デザイン 4 肌に自信があることを想起できる女性を選定。加えて、若々しさを表現するため、肌、背中、髪の毛に艶感を足したq 4 キャンペーン情報は上品さが損なわれないようにしつつ、目立つカラーやテクスチャを使用した。文字にも動きをつけ、勢いのある印象にq 4 フレアを大きく配置し、夏の強い日差しの中で美白を保てていることを表現した。 43

Slide 38

Slide 38 text

デザイン Sun screen ブラッシュアップ前のデザインレイアウトやあしらいなどの検討始めは黒文字を使用していたが、繊細さが損なわれてしまうので、上品で見やすい茶色に変更。また、あしらいも繊細さがより伝わるものを選定。カラーパターン検討上品、夏らしさの観点で何パターンかカラーを検討し、若々しさを訴求するにはピンクが一番合うという結論に至った。 44

Slide 39

Slide 39 text

制作実績「卓球場のチラシ」（架空） Works 45 Type：flyer 浅草にある卓球場『ピンポントーキョー』のチラシ依頼主ピンポントーキョーサイズ A4縦(210 × 297mm) 制作範囲チラシ（表・裏）のデザイン制作期間デザイン完成まで7時間使用ツール Figma

Slide 40

Slide 40 text

要件整理 Flyer tabletennis ターゲット 0 20代〜30代の男性目的 0 卓球場への認知・来店ご要望 0 ダサい卓球のイメージをかっこよくしたいa 0 ロゴ、写真素材は提供しているが、使っても使わなくても良い。与えたい印象 0 かっこいい要素・媒体・イメージで分けてリサーチ実施 46

Slide 41

Slide 41 text

ベンチマーク Flyer tabletennis 47 要素の分析卓球場に関するデザインをリサーチし、言語化。卓球に関連するカラーを使用することで、一目見て何に対するチラシか理解できる

Slide 42

Slide 42 text

ベンチマーク Flyer tabletennis 48 媒体やイメージの分析スポーツ系のかっこいい・チラシデザインをリサーチし、言語化。無彩色のカラーを使用、コントラストが強めp 文字は太めp 英語を記載すると日本語のみよりも垢抜けるp スペーツ系で疾走感を与えたい時は右からシュッと移動しているような加工や掠れ文字が施されているp カーニングで文字間を詰めているp 下部にいくにつれて、興味を持ったユーザがアクションするために必要な詳細情報や記載されているp テキストや画像の始点と終点を揃えると見やすい。

Slide 43

Slide 43 text

デザイン Flyer tabletennis 49 フォント＆カラーフォント Bebas neue ヒラギノ角ゴシックPro →男らしいデザインに近づけるため、線の太さが均一で角ばった印象のフォントを選定。また、欧文は縦にスリムな BebasNeueを選定し、かっこいい印象を目指した。カラー Texture ＃FFFFFF ＃B0000C ＃0D0D0D Texture ＃FFFFFF ＃B0000C ＃0D0D0D →卓球を想起させる赤・白を使用、それに加え、黒を加えることでかっこいい印象を目指した。また、ノイズを加えることで、浅草というレトロな場所にあることを表現した。

Slide 44

Slide 44 text

デザイン Flyer tabletennis チラシ（表）レイアウト s 提供されたロゴに合わせて、写真素材やテキストも斜めに。全体的な統一感が出るようにしたf s 枠を配置し、ユーザの視線が枠の中に誘導されるようにした。メインコピーはあえてはみ出して配置させることでインパクトのあるビジュアルを目指した。デザイン s 全体的に文字の間隔を少し詰めることでクライアントの要望であるかっこいい、男らしいデザインを目指したf s 動きをつけたテキストの配置、また文字装飾を行うことでスポーツの躍動感を演出したf s 実際にWeb検索しているような図を使用し、ユーザの行動喚起に繋がるように。 50

Slide 45

Slide 45 text

デザイン Flyer tabletennis チラシ（裏）レイアウト t 冒頭で特徴を理解してもらい興味を促し、その後アクションに必要な情報が得られる構成にy t 料金はプラン毎の比較が見やすくなるよう表にした。 k t ピンポントーキョーのサイトに記載されているコピーを使用（FRIP〜）し、ユーザがサイト閲覧時、すぐにこのチラシの卓球場だと理解できるようにした。デザイン t 表面で使用した要素を裏面でも繰り返し使用し、統一感が出るようにしたy t 卓球ボールをイメージした白円をあしらいとして使用y t クーポンはチケットであることをビジュアルで想起できるように。加えて、カットして持ち運びできることを示した。 51

Slide 46

Slide 46 text

What I can contribute 貢献できること 52

Slide 47

Slide 47 text

現状スキル Skills 53 Skills できること Figma‥Webサイト、 LP、バナーの作成 Photoshop‥写真加工、写真補正、合成画像作成 Illustrator‥名刺、チラシ、バナー HTML/CSS‥簡単なコードであれば読解できるレベル(Progate中級編、書籍「HTMLとCSS」終了程度）これまでの学び Progate、Ude my、書籍等を通して独学で１ヶ月間学び、オンラインスクールにてデザインの基礎を学びました。スクールのカリキュラム以外には、書籍やウェビナーへの参加、ギャラリーサイトに掲載されているW ebサイトの言語化などインプット作業を行いつつ、自主制作やデザインコンペに参加するなどでアウトプットを行ってきました。業務の傍ら、約半年間継続した結果、スクール開催のコンペにて約50人中、優秀賞(上位 2~4名)を受賞しました。

Slide 48

Slide 48 text

私の強み Strengths 目標に向けて自ら主体的に行動し、成果を出すことができます。営業においても、新たな提案方法に取り組むことで、営業同期17人中3 人のみだった最高評価を達成しました。デザイナーとしても与えられた業務をこなすだけでなく、自ら考え行動し、成果に繋げることを目指します。継続力目標達成好奇心旺盛一度決めたことは必ず達成すべく、継続して努力することができます。この強みは小学生3年生から10年以上取り組んだテニス活動や陸上部（長距離）で培ってきました。デザインにおいても日頃のインプットを継続して行い、自身のアウトプットに反映できるよう粘り強く努力することができます。好奇心旺盛な性格で、知識を伸ばすことへの努力を惜しみません。これまでも料理なら料理教室へ、英語ならカナダへの異文化交流・英会話などジャンルは違えど、自身の知識を広げるため行動してきました。デザインにおいても、幅広い表現への興味→追究→挑戦を繰り返すことで、より良いクリエイティブに貪欲に挑戦することができます。 54

Slide 49

Slide 49 text

Flow ご提案の流れ 55

Slide 50

Slide 50 text

ご提案の流れ Flow ヒアリング事前にヒアリングシートをお送りします。内容をご記入いただいた上で、詳細な課題やご要望を30分程度お伺いさせてください。ご提案 5営業日以内にLPまたは対象となるデザインの初稿を無料でご提案させていただきます。ご契約ご提案内容に価値を感じていただけた場合のみ、ご購入またはご契約させていただきます。 03 02 01 56

Slide 51

Slide 51 text

Lastly 最後に 5 7

Slide 52

Slide 52 text

最後に Lastly 58 貴重なお時間をいただき、誠にありがとうございます。デザインが好きだという気持ちまた、営業としてお客さまに日々接することで得られた提案力を活かし、人の行動や感情を導くクリエイティブを作ることを目指しています。ぜひ、お気軽にご相談くださいませ。