portfolio.pdf

Transcript

1. 『成 果の最大化』をデザインする Web制作 Portfolio name sou
2. 名前・場所 sou 福岡出身/京都在住 自己紹介 2024年からYOSASOUDAという事業所名で、 LP・HPなどのマーケティング・デザイン・コーディ ングを通じて、クライアント様の成果の最大化を目 指し、日々活動しております。 経歴 2010.04 大学卒業後、製造業で会社員として勤務開始 2023.11 Webコーディングの学習開始 2024.06 Web制作者として活動開始 2025.03 Webマーケティングの学習開始 2025.04 Webデザインの学習開始 好きなこと 暖かい地域や島への旅行 旅行先で美味しいものを食べる、お酒を飲むこと 豚骨ラーメン ソウ Profile プロフィール
3. V V M 未来を共創する最も信頼される事業参謀 ミッション ビジョン バリュー 誠実さを基盤にWHYから導く戦略で常に成果を最大化する 正しい戦略で成長を未来へ繋ぐ クライアント様の現状とありたい姿を把握しそのギャップ＝問題から課題を導き出して施策を打ち、 ありたい姿を実現すること。 事業のサービスの枠を超えて事業の根幹に関わる提案を行い、クライアント様のビジネスを成功させるために 必要なことを本気で考え、単なる外注先である“制作者”ではなく、かけがえのない“事業参謀”になること。 Ideal State 目指す姿
4. S E R V I C E よ く あ る 課 題 ・ わ た し の 強 み ・ サ ー ビ ス の 特 長
5. こんなお悩みに心当たりはありませんか？ かっこよさ、きれいさはあるが成果につながらない制作物だった。 コミュニケーションコストがかかり、やりとりに時間を要した。 全く提案がなく、指示通りの制作物しか出来上がらなかった。 連絡したものの返事が遅く、不安に感じた。 デザイナーとサイト制作者が別の人のためコンセプトがぶれた。 Problem よくある課題
6. ご安心ください！ お見積りから納品後のアフターフォローまで、 しっかり提案・伴走いたします！ 設計 提案 進行 管理 レスポンス 実際にこのように取り組んでいます Strong Point わたしの強み 事業内容を理解し、競合他社の調査を行い成果の出るサイトを設計 事業参謀となり、必要に応じて積極的な提案 スムーズな進行とストレスを感じさせないコミュニケーション 稼働時間中は即レス、遅くとも12時間以内のレスポンスを実施 設計～デザイン～制作まで一気通貫で管理
8. features - voice サービスの特長 - クライアント様からの声 - 前向きな声をいただけるのが 一番の喜びです！
9. Figma 幅広いスキルセットで成果を最大化します！ ・LP ・コーポレートサイト ・バナー ・名刺 ・ロゴ ・資料作成　など ・AI活用（ライティング等） ・VBA（Excelマクロ） ・RPA（winactor） ・SEO対策 ・MEO対策 ・Googleリスティング広告 ・ワイヤーフレーム作成　など features- skill サービスの特長 - スキル マーケティング デザイン コーディング その他 静的サイト構築 HTML CSS Sass(Scss) 動的サイト構築 WordPress PHP アニメーション構築 JavaScript GSAP
10. W O R K S 制 作 実 績
11. Works 制作実績 モバイルアプリ開発会社の コーポレートサイト 企業様 株式会社WAKE WONDER 制作期間 1ヵ月 制作範囲 ワイヤーフレーム デザイン ライティング 使用ツール Figma 種類 自主制作
13. 事業内容 UXデザインと高度な技術力を融合させ、クライアントのニーズに 応える高品質なアプリを提供しているモバイルアプリ開発会社。 ターゲット アプリ開発のリソースや知識が不足する中小企業、スタートアッ プ企業、公共機関。 課題 自社プロダクトアプリ「OHA!」の普及に対し、企業とし ての知名度が低いという課題を抱えています。コーポレー トサイトを通じて運営会社としての存在感を確立し、既存 の中小企業だけでなく、スタートアップや公共機関へと ターゲット顧客層を拡大することを目指しています。 施策 課題解決のために、ターゲット顧客のニーズに合わせた訴 求を行い、お知らせセクションやブログの定期更新を通じ て、アプリ開発に関する有益な情報や独自の情報を発信す ることで、サイトへの流入増加と企業ブランディング強化 を図ります。 目的 Figma ご要望 設立5年目を迎え、アプリ開発事業の拡大に伴いWEBサイト のリニューアルを決定。既存サイトは簡易的に作っただけ で、運用や活用が全くできていない状態。自社プロダクト 「OHA!」のさらなる普及と、ITスタートアップ企業や教育機 関・自治体への積極的なアプローチを目的に、会社の事業内 容や強みを効果的に訴求できるサイトが欲しい。 Works 要件定義
14. Works ベンチマーク 競合 アプリ開発における先進性や体験価値の提供、 具体的な成功事例の魅せ方が、信頼性、安定性を与えている。 デザイン 落ち着いたトーンと、情報が体系的に整理されたシンプルなレイ アウトが特徴。セクションごとの明確な区切り、画像を多用した 直感的なレイアウトで情報量の多いサイト構成でも煩雑さを感じ させない。 カラー メインカラーは落ち着いたブルーで、 グレーやホワイトを基調とした配色。 企業の信頼性、プロフェッショナリズム、 安定感を象徴し、堅実なビジネスイメージを構築している。 カラー デザイン 競合 参考サイトを集め、競合・デザイン・カラーの3つの角度から ベストプラクティスを言語化。
15. Works デザインコンセプト / キーワード デザインコンセプト 技術力と先進性でアイデアをカタチに。 顧客のビジネス課題にどこまでも寄り添い成功へと導く 「信頼できるクリエイティ ブ ・ パートナー」 。 キーワード 信頼感 技術力 先進性 クリエイティブ 共創 アイデア シンプル 親しみやすさ
16. Works フォント / カラー フォント Noto Sans JP 可読性を最優先に設計されたフォントで、長時間読んでも疲れにくく、 高い信頼性や誠実な印象を与える。 Montserrat 都会的で幾何学的なフォルムが特徴のサンセリフ体です。そのスタイリッシュな佇まいは、先 進性や技術力を重視するIT・テクノロジー系の企業イメージと非常に相性が良いです。 カラー #005AAA #666666 #CCCCCC #EFBC19 #333333 #666666 #CCCCCC #EFBC19 #FFFFFF ・ブルー系の色によって、信頼性と最先端のテクノロジーを想起させる先進性を印象を付けてお ります。また、背景に敷くことでサイト全体にプロフェッショナルで一貫性のある世界観を構築 しています。 ・ エナジェテ ィックイ エロー （#EFBC19）によって、視 線誘導や 行動喚起を 促すと 同時に、 ポジテ ィブさや エネル ギーといった 人間的な 温かみを 加え、 「技術的に高 度だが、 親し みやす く、 共に 新しいものを 創り 出す ワク ワク 感」を 伝えております。 ・ ホワイト、 グレー系の色によって、 ユー ザーがスト レスなく 情報を読 み進 められるよ うにして おり、 豊富な 余白によって、 コンテン ツへの 集中を 促進しております。
17. Works ＦＶ ナビゲーションメニュー 主要な４つのナビゲーションリンクとお問い合わせボタン に絞り込み、ユーザーにサイトの全体像を一瞬で把握さ せ、アクセントカラーで際立たせたお問い合わせボタンに 視線と意識を誘導します。 キャッチコピー 頭の中にあるアプリ開発のアイデアをカタチにしたいク ライアントへの共感、カタチを『』で囲み単なる形では なく、アプリや成功といったゴールそのものを表現、余 白を多くとりこの一文の重要性を際立たせています。 CTA 白い背景の中に彩度・明度が高いイエローのボタンを置くことで、視線をひきつけ最も重要であること を表現し、「何か新しいことが始まりそう」という期待感を抱かせ、クリックへの心理的ハードルを下 げます。また、右向きの矢印（＞）でユーザーが迷うことなくボタンと認識します。 メインイラスト 写真ではなくイラ ストにすることで、クリエイ ティブで 親しみやすいチー ム であることを表現してます。また、チー ム一 丸となって 課題解決にあたる共 創の 姿勢を 示し、「チー ムが全 力でサ ポートします」という心 強い メッセー ジになってます。
18. Works ＴＯＰ 企業情報 サイトの基調色であるディープブルーを背景に敷くことで、専門性と技術 力の高さを視覚的に訴求しています。右側に配置された「顧客と共に画面 を創り上げる」イラストは、顧客に寄り添う「パートナー」であること を表現しています。 代表アプリのご紹介 背景色を切り替えることで、前のセクションからの場面転換を演出してま す。企業の理念（ミッション）とプロダクトを結びつけて語ることで、単 なる技術提供者ではなく、ビジョンを持った創造者集団であることを印 象付けています。 サービス 再びディープブルーの背景に戻すことで、ここが企業の核となる「提供価 値」のセクションであることを表現してます。2つの主要サービスを、明 確に分離されたカード型のUIとミニマルなイラストで提示し、ユーザー に自身のニーズがどちらに近いかを直感的に判断させます。 お知らせ リスト 形式の レイ アウトは、 時系列に 沿った 情報の提示に 適して おり、 拾 い 読みし やすいさを 生んでます。カ テゴリタグで、ユーザが 興味ある 情報 へアクセスするのを 助けています。 ブログ アイ キャッ チ画 像をイラストにすることで、 記事の 内容を視覚的に要 約 し、ユーザーのク リックを 促します。「業 界の 最新ト レンドを 深く理 解 し、 その 知見を お客 様に 還元で きる専門 家集団です」という メッセージを 発信する 役割を 担います。 お問い合わせ 背景を再び 穏やかなライト グレーにすることで、ユーザーにプ レッシ ャー を 与え ず、 安心して 行動を 起こせる 心理的な 空間を創り出しています 。 アクセントカラーのイ エローでユーザーの視 線を 引き付けます。
19. Works その他の制作実績 主にコーディングの実績となります。 HPからご覧ください。 https://yosasouda.com/work/
20. F LO W ご 提 案 ～ ご 契 約 の 流 れ
21. 01 ヒヤリング オンラインMTGにてヒヤリングをさせてい ただきます。クライアント様の手間を極力減 らし、より有意義なMTGにするために、事 前にフォームにていくつかのご質問にご回答 いただく場合がございます。 02 調査・ご提案 ヒヤリング内容をもとに、競合他社や市場な ど調査を実施しご提案資料を作成してご提案 させていただきます。 03 ご契約 ご提案内容に価値を感じていただけました ら、ご契約をお願いします。 Flow ご提案の流れ（一例）
22. Flow ご契約後の流れ（一例） 01 デザイン デザイン作成→FB→修正を経てデザインが 完成となります。 進め方は、３割作成してFB、FVのみ作成し てFBなどクライアント様に合わせて臨機応 変に対応します。 02 開発・納品 デザイン確定後に、実装→FV→修正→検収 を経て納品となります。 03 アフターフォロー 納品後も新規のご相談やご提案など継続的に サポートさせていただきます。制作し納品す ることを最終目標とせず、クライアント様の ビジネスの成功を目指します。
23. C O N T A C T よ く あ る ご 質 問 ・ お 問 い 合 わ せ 先
24. FAQ よくあるご質問 制作料金はいくらですか？ / 料金プランを教えて下さい。 Q 目的、規模、実装機能によって変動しますので、クライアント様のビジネスゴールをヒヤリングした 上で、最適なプランをカスタマイズしてご提案します。 A デザインの修正は何回できますか？ Q デザイン完成後の大幅な修正、変更については別途料金が発生してしまいますが、 完成前の修正回数に制限はございません。ご安心下さい。 A SEO対策（検索で上位に表示されるための対策）はしてくれますか？ Q 内部SEO対策（適切なHTML構造・表示速度の最適化）は標準でご対応いたします。 コンテンツSEOや広告運用については、制作とは別のプランでご提案可能です。 A サーバーやドメインなどWeb知識に疎いですが大丈夫ですか？ Q サーバー/ドメインの取得や設定まで全てサポート可能です。過去に取得から公開まで全て対応した 経験もございますのでご安心下さい。 A
25. 最後までご覧いただき、ありがとうございます。 クライアント様のビジネスを成功させるために必要なことを本気で考え、 課題解決に向けて全力で取り組みます。お気軽にご連絡・ご相談下さい。 Contact お問い合わせ先 https://yosasouda.com/contact/ https://x.com/sou_web1988 yosasouda@gmail.com HP Ｘ gmail