Haruki_Konaka_Portforio.pdf

Transcript

1. Web Designer PORTFOLIO By Haruki Konaka
2. Profile ・・・・・・・・・・・・・・・・・・・・ 03 自己紹介 / 経歴 サービス内容 / 特徴 HP / LP / バナー 出来ること / 私の強み ご提案の流れ Service ・・・・・・・・・・・・・・・・・・・ 06 Works ・・・・・・・・・・・・・・・・・・・・ 14 Skills ・・・・・・・・・・・・・・・・・・・・・ 40 Flow ・・・・・・・・・・・・・・・・・・・・・・ 43 目次 Portfolio Profile Service Works Skills Flow 02
3. Profile 自己紹介
4. 自己紹介 小中 春貴 1996年 2月11日 奈良県香芝市 ・運動すること ・サウナにいくこと ・旅行にいくこと 名前 生年月日 出身地 趣味 こなか はるき Profile 自己紹介 経歴 04
5. Profile 自己紹介 経歴 経歴 株式会社ネクサスエージェント 大学卒業後、 不動産ベンチャー会社に入社。 1年営業経験後に 契約の責任者として従事。 東京に上京後、 不動産ベンチャー会社に入社。 賃貸管理部として、 カスタマーサポートとして従事。 副業にて動画編集を経験後、 オンラインスクール運営会社に入社。 スクール運営と顧客管理に従事。 半年間デザインスクールで受講後、 フリーランスとして独立。 株式会社GA technologies入社 株式会社SOL入社 フリーランスとして活動 05
6. Service サービス
7. 迅速な対応 ご連絡をいただいてから2時間以内
 にご返信させていただきます。
 またお急ぎの場合は柔軟に対応させ ていただきます。 01 高品質保証 作品に満足していただいた上で 発注いただけるように、 初稿無料で提案いたします。 02 課題解決をする提案 営業経験を活かして、お客様が 課題と感じている部分を
 ヒアリングし、デザインを
 通じてカタチにします。 03 サービスの特徴 Service サービス内容 特徴 13
8. Works 制作実績
9. SNOWペットシッター 制作範囲 制作期間 使用ツール 種類 安心してお預けできる ペットシッター デザイン・コーディング 1.5ヶ月 Figma SNOWペットシッター株式会社
11. ターゲット  実家の帰省中にペットを預けたい方  旅行や長時間の外出でペットを預けたい方 ご要望  HPのリニューアルということで、ガラッと印象を変えたい  安心感を与えるようなデザインにしてほしい 目的  大事なペットを安心して預けていただきたい。  HPを通じてなぜ安心できるのか特徴を強調したい。 Works HP LP バナー 17 要件整理
12. レイアウト 飽きさせないレイアウト 写真やあしらいをつけて見やす く、飽きないレイアウトにし た。 また、よくある悩みを冒頭に出 して親近感が湧くようにした。 レイアウト 飽きさせないレイアウト 写真やあしらいをつけて見やす く、飽きないレイアウトにし た。 また、よくある悩みを冒頭に出 して親近感が湧くようにした。 デザイン 安心感のあるデザインを FVのデザインを家の中でペット 達が寝ている写真を選定。 安心感を訴求できるようにした。 また丸みのあるフォントで柔ら かい印象にした。 制作方針 Works HP LP バナー 18
13. レイアウト https://pet-taxikarubi.com/ https://tokyo-petsitter.com/ https://www.pet-ss.com/ レイアウトや機能面の参考サイト ベンチマーク Works HP LP バナー 19 引用元：株式会社 KARUBI様 引用元：日本ペットシッターサービス様 引用元：Tokyoペットシッター様
14. https://pet-jfamily.com/ https://pet-rplus.com/ https://www.oniah.jp/ デザイン デザインのトンマナの参考サイト ベンチマーク Works HP LP バナー 20 引用元：ペットシッター Ｊ・ファミリー様 引用元：ねこ松様 引用元：おに動物病院様
15. 読みやすさかつ親しみやすさを与えるために YuGothicを選定。 落ち着いたイメージを与えるために、ベースカラーは オフホワイトでメインカラーをブラックに選定。 カラー 安心感を与えられる丸みがありフォントを選定。 YuGothic フォント Heisei Maru Gothic Std フォント&カラー #139114 #FFFDF3 #FDDA9B #000000 #4CCC1C デザインの意図 Works HP LP バナー 21
16. ①会社概要 ②よくあるお悩み ③サービス内容 ④対応エリア ⑤選ばれる理由 ⑥お客様の声 ・肉球のイラストを入れて親近感があるデザインにした ・ユーザー目線でよくあるお悩みを入れた。 ・ペットの写真を入れて安心感を訴求した。 ・エリアごとに分けて見やすくした。 ・デザインの反復を使って、見やすく楽しめるデザインにした。 ・実際にお客様が記載していただいた声を添付し、安心感を訴求した。 ① ② ③ ④ ⑤ ⑥ デザインの意図 Works HP LP バナー 22
17. ⑦ご利用画像 ⑧代表の想い ⑨よくある質問 ⑩ペットコラム 　お問い合わせ 　フッター ・実際にご利用いただいた写真を入れてユーザーの方にイメージを湧くようにした。 ・代表がどういった想いで運営をしているのかを記載した。 ・シンプルで読みやすいデザインにした。 ・コラムを記載して、新しい情報が見れるようにした。 ・CTAボタンを緑色にして、目立つようにした。 ・ヘッダーと背景画像を同じにして、統一感を出した。 ⑦ ⑧ ⑨ ⑩ 11 11 12 12 デザインの意図 Works HP LP バナー 23
18. Before After ・家を連想されるデザインにして、安心感を訴求した。 ・様々な方がご利用できるようにポップで親しみがあるデザインにした。 ビフォーアフター Works HP LP バナー 24
19. musubiya 制作範囲 制作期間 使用ツール 種類 手軽に美味しく食べられる おにぎり専門店LP デザイン・ライティング 10日間 Figma・Photoshop 自主制作
21. ターゲット % 仕事をハードワークに働かれているビジネスマン。 % 手軽に美味しく食事を済ませたい人。 ご要望 % オープン記念で10%割引の旨を強調してほしい。 % 和、素材のこだわり、体の優しい、通いたくなる、伝統などを思わせるデザインにしてほしい 目的 % 朝の忙しい時間やランチタイムに食べてもらいたい。 % オープン記念で割引をしていることを伝えたい。 要件整理 Works HP LP バナー 27
22. レイアウト 強弱をつけた 今回オープン記念で10%オフ を１番印象づけたいので、文 字サイズの強弱をつけた。 繊細なイメージを与える為に フォントは明朝体にして、落 ち着きがある雰囲気を出した。 デザイン 優しく和のテイストを 背景画像を和紙にして、和の テイスト印象づけた。 繊細なイメージを与える為に フォントは明朝体にして、落 ち着きがある雰囲気を出した。 制作方針 Works HP LP バナー 28
23. レイアウト https://yamadamura.jp/ https://andon.shop/ レイアウトや機能面の参考サイト ベンチマーク Works HP LP バナー 29 引用元：ANDON様 引用元：有限会社平成食糧様
24. https://sumai-koubou.com/ https://fcn-gohan.com/ デザイン デザインのトンマナの参考サイト ベンチマーク Works HP LP バナー 30 引用元：株式会社住幸房様 引用元：FCN株式会社様
25. シンプ ルかつ高級感のある印象を与える為に Noto Serif JPを選定。 落ち着いたイメージを与えるために、ベースカラーは オフホワイトでメインカラーをブラックに選定。 カラー 繊細なイメージを与えるために明朝体を選定。 Noto Serif JP フォント Hiragino Mincho Pro フォント&カラー #139114 #FCFDF8 #333333 #B9333E #FFFFFF デザインの意図 Works HP LP バナー 31
26. ①商品説明 ②詳細 ③メニュー ④地図 ⑤フッター ・背景に丸を入れて、おにぎりを連想されるようにした。 ・見出しのタイトル文にアクセントカラーを入れてメリハリをつけた。 ・優しいイメージを与えるように商品の背景は丸くデザインした。 ・メリハリをつけるため商品を縦書きにした。 ・SNSのアインコンを追加して、リンク先に飛べるようにした。 ・カテゴリーをタップすると見たいページが表示されるようにした。 ① ② ③ ④ ⑤ デザインの意図 Works HP LP バナー 32
27. Before After ・1番目立たせたいところに強弱をつけて、インパクトのある印象にした。 ・美味しく感じさせられるために、写真を明るくした。 ビフォーアフター Works HP LP バナー 33
28. スワイプ型サイト Tokify 制作範囲 制作期間 使用ツール 種類 挑戦したいと思える デザイナー募集バナー デザイン 2日間 Figma スワイプ型サイト
29. ターゲット ( 実案件をこなしているがスキルアップを目指しているWebデザイナー ( 作品を作ってみたいと考えているデザイン学習者 ご要望 ( LPにトンマナを合わせて一貫性があるように ( 賞金イメージが持てるように、イラストを使ってデザインしてほしい 目的 ( スワイプ型サイトのデザインを作成してくれるデザイナーを募集すること 要件整理 Works HP LP バナー 35
30. レイアウト 数字にインパクトを 賞金が出るということで、背景 に紙吹雪を入れて賑やかなイメ ージにした。 またベースカラーはトンマナを 崩さないようにするために紫色 にした。 デザイン ポップでにぎやかに 賞金が出るということで、背景 に紙吹雪を入れて賑やかなイメ ージにした。 またベースカラーはトンマナを 崩さないようにするために紫色 にした。 制作方針 Works HP LP バナー 36
31. LPのトンマナを崩さないように、ベースカラーは 紫色に選定。 太めのゴシック体にしてインパクトがあるようにした。 また多方面の方に受け入れられるように、ゴシック体 にした。 読みやすさを意識してゴシック体にした。 またタイトルと類似したフォントにして、太さを変え てメリハリを出した。 フォント Hiragino Kaku Gothic StdN Hiragino Kaku Gothic ProN カラー フォント&カラー #D1CDE6 #FBFBFB #FF7E6B #333333 #D1CDE6 #FBFBFB #FF7E6B #333333 デザインの意図 Works HP LP バナー 38
32. Before After ・あしらいを入れてタイトルが目立つようにした。 ・お金のイラストを入れて、賞金に臨場感があるようにした。 ビフォーアフター Works HP LP バナー 39
33. Skills スキル
34. 出来ること Photoshop ・・写真加工、写真補正、合成画像作成 ・・名刺、チラシ、バナー ・・Webサイト、LP、バナーの作成 ・・Webサイトの実装、公開 Illustrator Figma STUDIO Skills Skills 出来ること 私の強み 41 現状スキル
35. 好奇心旺盛 コミュニケーション コミュニケーションにおいて、相手のこ
 とを正しく理解し、良好な関係づくりが
 できます。前職ではお客様の会話の中で
 「本当に求めていること」を理解し、そ
 れを解決できるようなご提案に取り組ん
 できました。
 また相手の立場に立って考え行動するこ
 とで、クライアント間とのコミュニケー
 ションの摩擦を減らします。 一度決めたことは必ず最後までやり抜き
 ます。新卒で不動産会社に就職し、毎日
 勉強することで、3ヶ月間で国家資格に
 合格しました。
 デザインに関しても日々インプットを能
 動的に行い、自身のアウトプットに反映
 できるよう努力できます。 好奇心旺盛で、自分の「好き」を追究す
 ることに努力を惜しみません。好きな分
 野の知識を伸ばすために海外への異文化
 交流や動画編集など、自身の知識を広げ
 るために挑戦してきました。デザインに
 関しても常に幅広い表現を挑戦すること
 で、良いクリエイティブを作ることに貪
 欲に取り組むことができます。 継続力 01 02 03 私の強み Skills 出来ること 私の強み 42
36. Flow 流れ
37. ヒアリング 事前にヒアリングシートをお送り
 します。内容をご記入いただいた
 上で、課題やご要望を30分程度
 お伺いさせてください。 01 ご提案 ７営業日以内にLPまたは対象と
 なるデザインの初稿を無料でご
 提案させていただきます。 02 ご契約 ご提案内容に価値を感じていただ
 けた場合のみ、ご購入またはご契
 約させていただきます。 03 ご提案の流れ Flow ご提案の流れ 44
38. Lasty 最後に
39. 貴重なお時間をいただき、ありがとうございました。 ぜひ、お気軽にご相談くださいませ。