portfolio2025_kanakoohata

フリーランスUI/WEBデザイナー・コーダー大畑加奈子のポートフォリオです。

Transcript

1. デザイナー コーダー KANAKO OHATA PORTFOLIO 2025
2. INDEX 目次 02 PROFILE 自己紹介 p.03 SERVICE サービス p.06 WORKS 制作実績 p.12 FLOW ご契約までの流れ p.60 アプリUI改善 p.13 LPリニューアル p.33 コーポレートサイト p.44 コーディング実績 p.57
3. PROFILE 自己紹介 03
4. 大畑　加奈子 OHATA　 KANAKO 略歴 2004 病院栄養士 2022 カスタマーサポート（コールセンター） 2023 WEBコンサル会社にてコーダー勤務 2024 フリーランスとして独立 PROFILE わたしについて 出身地 東京都 趣味・好きなこと フルート（吹奏楽） 料理（栄養士） ヨガ 猫 資格 コーディング実務検定 ITパスポート 栄養士 04
5. PROFILE スキル デザイン WEBデザイン コーポレートサイト/ランディングページ UIデザイン デザイン WEBデザイン コーポレートサイト/ランディングページ UIデザイン コーディング WEBサイトコーディング HTML/CSS(SASS） アニメーション JavaScript(jQuery/GSAP） WordPress PHP 開発環境 GitHub/Gulp/FLOCSS 05
6. SERVICE サービス 06
7. SERVICE わたしの強み デザイン コーディング 課題とニーズをヒアリ ングして調査/分析を行 い、ロジカルなデザイ ンをご提案 アニメーションなどの 実装を想定したデザイ ンのご提案 ご提案から納品まで対 応できるため、円滑な プロジェクトの推進 07
8. 制作を依頼する時に こんなお悩みありませんか？ SERVICE わたしの強み 初めての制作で 進め方がわからない 言われた作業しかしてくれず、 提案をしてくれない 他の業務があってディレクション の負担が大きい 仕様変更でデザイナーとエンジニアの やり取りがスムーズにいかない どんな見せ方やデザイン が良いのか分からない 進捗状況が分からない PROBLEM 08
9. 要件定義シート ヒアリングシート SERVICE わたしの強み 私が選ばれる理由① 競合やターゲット分析によるロジカルなデザインを提供し ます。 制作パートナーとして常にお客様に寄り添ってご意見を丁 寧に聞くことを大切にしています。 課題とニーズをヒアリングして調査/分析を行い、業界や特 徴に沿ったデザインを提案します。 SOLUTION 09
10. 私が選ばれる理由② ご提案から納品まで全行程のサポートをいたします。 デザインとコーディング一貫してお引き受けできるので ディレクションの手間がかかりません。 デザインとコーディング同時対応で仕様変更にも素早く 対応できます。 SERVICE わたしの強み SOLUTION 全 て の 工 程 を 担 当 で き ま す ヒアリング 要件定義 デザイン コーディング サーバーアップ 10
11. スケジュール管理シート ディレクトリ構成シート SERVICE わたしの強み SOLUTION 私が選ばれる理由③ ご提案から納品まで一貫してお引き受けてきるので円滑 なプロジェクト推進をお約束します。 どこまで進んでいるか一目でわかる、スケジュール管理 シートを共有します。また定期的に進捗状況をご報告す るので安心いただけます。 11
12. WORKS 制作実績 12
13. WORKS 制作実績 01 UIデザイン 制作期間 3週間 使用ツール Figma 担当範囲 構成案制作 デザイン 13 引用元：© AEON RETAIL Co.,Ltd. アプリUI改善 自主制作 お買い物クーポン アプリ イオンお買物アプリ 01
14. Overview 毎日のお買い物をもっと楽しく！ 私はいつも食料品や日用品の買い物はイオンモールで購入していて「イオ ンお買物アプリ」はヘビーユーザーです。でも、最初に使い始めた時は操作 方法が分からずバーコード表示が出来なくて、レジ前でモタモタ… 結局、あきらめてしまい初回はクーポンが利用できず残念な思いをしまし た。 さまざまな種類のクーポンが豊富でとってもお得なのに、アプリ操作であき らめてしまうなんてもったいない！と思い、ユーザー視点でのアプリUIの 改善提案をいたしました。 WORKS 制作実績 01 UIデザイン ※「イオンお買物アプリ」は、イオンが提供する公式ショッピングアプリです。 •アプリ限定デジタルクーポン配信 •アプリ限定のキャンペーン情報配信 •登録店舗のチラシや最新情報をスムーズに確認 •スタンプカード機能で特典や割引を受けられる 14
15. お買物クーポンでユーザーが抱えるニーズとは？ WORKS 制作実績 01 UIデザイン 考察 15
16. 仮説① WORKS 制作実績 01 UIデザイン クーポンでユーザーが抱えるニーズは お得情報 楽しい スピーディ 「お得情報」が豊富で「楽しく」買い物ができて、かつ レジ清算時に「すぐにクーポンが使える」状態になって いれば、来店数増加やリピートにつながるのでは？ お得情報 スピーディ 楽しい 紙のクーポン アプリ 競合分析 16
17. クーポンが消費者行動に大きな影響を及ぼしており、クーポン を活用することで、新規顧客の獲得からリピーターの増加、そ して売上向上へとつながる可能性が期待される。 クーポンがきっかけで初来店 クーポンがきっかけでリピート どのようなタイプのクーポンを利用したか https://media.aupay.wallet.auone.jp/articles/950 WORKS 制作実績 01 UIデザイン アプリクーポンの利用率は年々増加している。紙クーポンはあら かじめ切り取っておかなければならないし、自宅に置いてきてし まいクーポンを利用したくても利用できない事も。スマホはいつ も持ち歩くので機会を逃さず使える事から利用者が増えてきてい る。 https://iridge.jp/news/202309/34715/ リサーチ① アンケート調査 17
18. 仮説② WORKS 制作実績 01 UIデザイン アプリクーポンでユーザーが抱えるニーズは お得情報 楽しい スピーディ 使う店舗ごとのお得情報が定期 的に配信される 使う度にポイントがたまるなど リピートするほどお得になる レジ清算時にすぐに取り出せて スムーズに利用できる 18
19. 機能は備わっているのに、口コミ評価は使いにくいというユーザーが多数。UIを見直すことでアプリ を利用するユーザーが増加してリピートや売上増加につながるのではないかと考えました。 WORKS 制作実績 01 UIデザイン App Storeのイオンお買物アプリ評価レビューより リサーチ② 評価レビュー調査 19
20. ペルソナ 名前: 佐藤 彩香 年齢: 35歳 性別: 女性 職業: 営業事務 家族構成: 夫（40歳）長男（7歳）長女（4歳） 効率と節約を重視し、家事・育児に忙しい30代の主婦。仕事 の昼休みにスマホでWEBチラシをチェックし、帰宅途中に買 い物がしたい。イオンお買い物アプリは、お得な買い物、家 事の効率化で生活の質向上を支える理想的なツール。 名前: 山田 恵子 年齢: 55歳 性別: 女性 職業: パート（スーパーのレジ） 家族構成: 夫（60歳、会社員）、長男（32 歳、既婚・別居）、長女（29歳、別居） 堅実で節約を心掛ける50代主婦。スマホ操作に不慣れでアプ リ利用に戸惑いを感じているが、分かりやすい機能や簡単な 操作性が提供されれば、利用意欲を高められる可能性あり。 WORKS 制作実績 01 UIデザイン 20
21. カスタマージャーニー 感情 WORKS 制作実績 01 UIデザイン 行動 思考 きっかけ 認知・関心 登録・初回利用 使用段階 推奨・維持段階 売り場の値札にアプリ割 引の表示、店内ポップを 見る。 アプリについて検索、機 能やメリットを確認す る。アプリストアでレ ビューをチェックする。 アプリをダウンロードし て会員登録する。 毎日アプリを開いて特売 情報やクーポンをチェッ クする。買い物時にアプ リクーポン利用。レシピ を検索して夕食を作る。 ママ友にアプリのメリッ トを伝える。SNSで感想 を投稿する。アプリを継 続して利用する。 最近の物価高で食費を節 約したい。イオンをよく 利用するからもっとお得 に買い物したい。 特売情報や多くのクーポ ンが魅力的。他のアプリ と比べて使いやすそうか 気になる。 無料で使えるなら試して みよう。よく利用する店 舗登録や他のイオンサー ビスとの連携が少し面 倒。 特売情報がリアルタイム で確認できて便利。クー ポンでお得に買い物でき た。レシピ検索機能も役 立つ。 アプリのおかげで食費が 節約できて嬉しい。ママ 友にも勧めたい。 21
22. アプリが普及する前は新聞の折り込みチラシを見てお買い得 商品をチェックし、買い物に行くのが一般的でした。チラシ に近いUIにすることで、アプリでチラシを見ているような感 覚でクーポンを利用できるとより購買行動につながるのでは ないかと考えました。 使ったクーポンの合計割引金額を見える化して、ゲーム感覚 で今までお得になった金額がたまる。貯める楽しさとお得に なった嬉しさでアプリを使い続けてくれるのではと考えまし た。 WORKS 制作実績 01 UIデザイン アプリクーポンで楽しいお買い物体験を提供したい！ お得 楽しい チラシとアプリのコラボ！ ゲーム要素で楽しく使い続ける 22
23. WORKS 制作実績 01 UIデザイン 改善ポイント 改善ポイント① お買物行動のメンタルモデルを意識したUIUXの改善 クーポンの見た目を馴染みのあるチラシのようなデザインに変更し、紙からデ ジタルへの移行を違和感なく達成できるように改善しました。 改善ポイント② お得な感情と行動心理学で顧客満足度を向上 これまで使ったクーポン割引の合計金額を表示する機能を追加して、リピート 率向上やゲーム性で楽しい買い物体験が出来るように改善しました。 改善ポイント③ ユーザーが最短距離で目的のアクションを達成できる情報設計に改善 バーコード表示までの動線を減らして、クーポンをカートに入れてセットすれ ばそのまま割引になる仕様に変更しました。 23
24. クーポン機能を持つたくさんのアプリUIを研究しました WORKS 制作実績 01 UIデザイン アプリ分析 24
25. WORKS 制作実績 01 UIデザイン デザインの一貫性を持たせるためにFigmaのコンポーネント、バリアント機能を 使用し、デザインシステムを作成します。 デザインシステム フォントファミリー 和文は可読性や視認性を高めいNoto Sans JPを使用。クーポンの割引金額にはチラシのイメージに 近いRoboto Bold Italic斜体を使用。 和文 Regular Noto Sans JP Medium Noto Sans JP Bold Noto Sans JP 数字 Roboto Bold Italic Roboto Bold Italic 見出し 見出しM(h2) 14 Bold 140% 0.04em 見出しS(h3) 10 Bold 140% 0.04em タイトル 16 Medium 150% 0.04em 本文 16 Medium 150% 0.04em ラベル 10 Medium 150% 0.04em 補足L 12 Regular 180% 0.04em 補足M 10 Regular 180% 0.04em ボタン 14 Bold 100% 0.04em ボタン(ナビゲーション) 8 Medium 150% 0.04em 25 キーカラー リンクカラー gradient #E833AE-#821D62 #FFFAB2-#FFD84B-#D99730 マゼンダ #E833AE イエロー #FFE100 レッド #CA2A1E #821D62 #3A9DFF #FFE5FC #FFFFE5 #FFFFFF background primary secondary 共通カラー #333333 #BCBCBC #FFFFFF
26. WORKS 制作実績 01 UIデザイン バーコード を表示 バーコード を表示 今日 まで あと 1日 あと 2日 あと 3日 1回限り 10円引き 1回限り 20円引き 1回限り 30円引き 1回限り 40円引き 1回限り 50円引き 1回限り 100円引き 10円引き 期間限定 何度でも利用可 20円引き 期間限定 何度でも利用可 30円引き 期間限定 何度でも利用可 40円引き 期間限定 何度でも利用可 50円引き 期間限定 何度でも利用可 100円引き 期間限定 何度でも利用可 コンポーネント お得になった 合計金額 1,850 円 \ランクアップで割引クーポンプレゼント/ プラチナステージ 500円引 ゴールドステージ 300円引 シルバーステージ 100円引 ブロンズステージ 50円引 プラチナステージ 500円引 ゴールドステージ 300円引 シルバーステージ 100円引 ブロンズステージ 50円引 キャンペーン詳細を見る 1回限り 50円引き 1回限りご利用 商品名 50円引き 店舗選択 お知らせ 店舗情報 チラシ メニュー ホーム キャンペーン クーポン 見つける クーポン すべて見る クーポンの利用条件はクーポン詳細をご確認ください スクロール 絞り込み すべて 飲料 菓子 食品・その他 日用品 美容・健康 暮らし・衣料品 キッズ・ベビー EC・ネッスーパー 専門店 イベント ホームに戻る 26
27. WORKS 制作実績 01 UIデザイン 27
28. BEFORE AFTER 「すべて見る」が目立たず 分かりにくい 情報がバラバラで統一感が なくお得感が感じにくい お知らせバーが幅を取って いてキャンペーンセクショ ンが隠れてしまう バーコード表示ボタンが 小さくて分かりにくい バーコード表示ボタンを大き く、操作しやすい位置に変更 切り取り線をいれて、 より紙のクーポンイ メージに近づけた すべて見るを青字にし てひと目でリンクと分 かる見た目に変更 チラシ風のUIに変更してア プリでチラシを見ているよ うな感覚でクーポンをセッ トできる お知らせ領域を減らしたこ とで、キャンメーンバナー が見える 使用期限を表示すること で、クーポン利用を促進 WORKS 制作実績 01 UIデザイン 引用元：© AEON RETAIL Co.,Ltd. 28
29. BEFORE AFTER クーポンの数字が小さい 商品の写真がおいしそうに見えない メニューが２つに分かれて いる。スクロールできるか わかりにくい 商品は器に入れた像を追 加してよりおいしそうに 見えるように工夫。 ボタンを少しはみ出して 見せることでスクロール できることを視覚的にわ かりやすく 絞り込み検索機能を上部に まとめて見やすく改善 利用期限近い商品をまとめ て表示 WORKS 制作実績 01 UIデザイン 引用元：© AEON RETAIL Co.,Ltd. 29
30. BEFORE AFTER バーコード表示前に１回限 り利用のクーポンのチェッ ク画面がでてスムーズに バーコード表示ができな い。 セットしたクーポンは 一覧で表示 クーポン画面でセットし ておくことで、バーコー ドまでの距離を短くして スムーズに会計ができる ように改善。 WORKS 制作実績 01 UIデザイン 引用元：© AEON RETAIL Co.,Ltd. 30
31. BEFORE AFTER 現状は一部専門店のみスタ ンプ機能があるが、利用者 層によっては全く使わな い。 あとどれだけクーポンを 使えばランクアップする かわかりやすく表示 使ったクーポンの割引を 合計して表示すること で、お得な感覚になる。 ランクアップでどんな特典 が付くのか分かりやすく表 示 WORKS 制作実績 01 UIデザイン 引用元：© AEON RETAIL Co.,Ltd. 31
32. WORKS 制作実績 01 UIデザイン ホーム画面からクーポン利用までの画面遷移 32
33. 02 ランディングページ リニューアル 自主制作 ソースコード管理サービス GitHub 制作期間 3週間 使用ツール Figma 担当範囲 構成案制作 デザイン 33 引用元：© 2024 GitHub, Inc. WORKS 制作実績 02 LPデザイン
34. WORKS 制作実績 02 LPデザイン 要件定義 ターゲット エンジニア、企業 サービス ソフトウェア開発の効率化、コードのバージョン管理 目的 会員登録・サービス利用 現状の課題 今のサイトはレイアウト的にもメリハリがなく少し見にくい。 説明が多く、サイトを見てもつまらないと感じそう。 配色もメリハリがなく寂しい。 引用元：© 2024 GitHub, Inc. BEFORE 34
35. WORKS 制作実績 02 LPデザイン 改善ポイント デザイン、レイアウト、コンテンツの観点から 課題解決への制作方針を立てる。 改善ポイント① スタイリッシュでクール、高品質なトンマナ GitHubは世界中の多くのエンジニアや企業が利用しており、エンジニアが日常的に触れ ているコードエディタのイメージをデザインに落とし込みました。 改善ポイント② 情報の整理と見やすいレイアウト 見出しや本文のジャンプ率を上げてメリハリをつけて情報を読み取りやすくし、詳細説 明もセクションごとに揃えることで統一感が生まれるように改善しました。 改善ポイント③ Gif画像の使用でより臨場感を感じられるように GitHubのターゲットはエンジニアが大半のため、ツール系やAI系のサイトを参考にして Gif画像を入れるように改善。ライブプレビューを見ているような臨場感があり、親近感 がわくのではないかと考えました。 35
36. WORKS 制作実績 02 LPデザイン 36 競合・関連サイト分析 表現方法を検討するため、 関連サイト、競合サイトをリサーチ
37. WORKS 制作実績 02 LPデザイン ファーストビュー作成 トンマナパターン別にFVを２案作成 Concept A 地球の表面のような曲線と世界地図で、世界中の多くの開発者に利用 されていることを表現しました。 Concept B GitHubの利用者はエンジニアが多数を占めていることから、馴染みのあ るエディタのテイストをイメージしました。 こちらのコンセプトを採用 37
38. WORKS 制作実績 02 LPデザイン デザインシステム デザインの一貫性を持たせるためにFigmaのコンポーネント、バリアント 機能を使用し、デザインシステムを作成します。 フォントファミリー 和文は可読性や視認性を高めいNoto Sans JPを使用。欧文はエンジニアに馴染みのあるコー ドエディタで標準で使われているConsolsを使用。 和文 Regular Noto Sans JP Medium Noto Sans JP Bold Noto Sans JP 欧文 Regular Consols Bold Consols 見出し 見出しL(h1) 64 Bold 140% 0.04em 見出しM(h2) 48 Bold 140% 0.04em 見出しS(h3) 20 Bold 140% 0.04em 本文L 16 Bold 180% 0.04em 本文M 16 Medium 180% 0.04em 補足L 16 Bolod 180% 0.04em 補足M 12 Medium 180% 0.04em ボタン 24 Bold 100% 0.04em ボタン(header) 16 Bold 100% 0.04em 38
39. WORKS 制作実績 02 LPデザイン キーカラー 共通カラー gradient #73FABD-#405AFF #3BB97B-#405AFF ニュートラル #0E0C0D ライトグリーン #73FABD ライトブルー #405AFF #222222 #3BB97B #0E0C0D #0E0C0D #BCBCBC #FFFFFF background primary secondary ボタン hover GitHubに登録する GitHubに登録する GitHubに登録する GitHubに登録する 新規登録 新規登録 ログイン ログイン hover hover リンク hover お問い合わせ お問い合わせ icon ロゴ コンポーネント 39
40. 40 WORKS 制作実績 02 LPデザイン
41. WORKS 制作実績 02 LPデザイン ブランドカラー＃0e0c0dをベースカラーにして、より スタイリッシュな印象に 欧文フォントにはコードエディタで標準で使われている Consolsを使用。エンジニアが日常的に触れているフォ ントを使用し、より親近感がわくようにしました 背面に上から光が差し込むようなブルーをさりげなく配 置して立体感を出しました 現状の「サインイン／サインアップ」は日本人になじみ がないので、「ログイン／新規登録」に変更 ベネフィットをFVに表示することで、信頼度があるこ とをわかりやすくしました 企業ロゴはイメージを崩さない様にモノクロで表示 ブルーとライトグリーンはGitHubのコードの中でも使 用され、グラデーションにすることでエレガントさや高 品質をイメージ 41
42. WORKS 制作実績 02 LPデザイン CTAのテキストはより簡潔にしてボタンが目立つように 見出しと本文はジャンプ率を上げて情報を読み取りやす くしました 背面から光がにじむようにさりげなくあしらいをいれ、 立体感を表現しました Gif画像でライブプレビューを見ているような臨場感を 出しました 詳細説明はセクションで統一したデザインにすることで 一体感を感じられるようにしました。また、アイコンを 使用してパッと見て分かりやすくしました 左右からスポットライトが当たっているようなあしらい で、世界中の多くのエンジニアや企業から注目されてい るコンテンツであることを表現しました 42
43. BEFORE WORKS 制作実績 02 LPデザイン AFTER 引用元：© 2024 GitHub, Inc. 43
44. 03 コーポレートサイト 通信制高校サポート校ホームページ 秋川高等学院様 制作期間 ２ヶ月 使用ツール Figma WordPress 担当範囲 ヒアリング リサーチ 構成案制作 デザイン コーディング サーバーアップ 44 WORKS 制作実績 03 コーポレートサイト
45. Overview みんなちがって、みんないい。 未来のために、今できること。 小中学校で様々な理由で学校に行きづらかった子、中卒の社会人 の方を対象とした、星槎国際高等学校と提携している通信制サ ポート校です。生徒一人ひとりの個性に合わせた学習支援を提供 し、卒業後の進学や就職が可能となるよう必要なスキルや自信を 養い、自立と社会適応をサポートしています。 WORKS 制作実績 03 コーポレートサイト 45
46. 要件定義 ターゲット 不登校や高校中退を経験した中学生・高校生や社会人 子どもが不登校の悩みを持つ保護者 サービス 高校卒業資格が取れる通信制高校サポート校 目的 学校見学や相談の申込み 新入生・転入・編入の申込み 現状の課題 FVテキストがバラバラで情報が読み取りにくい。 電話・ライン・フォームの問い合わせ動線の優先順位が分かりにくい。 安心感につながる要素が少なく、悩みを抱える人には相談しにくく感じる。 WORKS 制作実績 03 コーポレートサイト BEFORE 46
47. ペルソナ 名前: 中村 直子 年齢: 42歳 性別: 女性 職業: パートタイムの事務職 学校になじめず不登校の子供を抱える母親 息子が安心して学べる環境、少人数制の手厚いサポート、将 来の就職支援など、息子の学びやすさと成長を第一に考えた 教育環境を望んでいる。 WORKS 制作実績 03 コーポレートサイト 名前: 佐藤 陽太 年齢: 16歳 性別: 男性 職業: 高校1年生（現在は不登校 学校環境に馴染めず不登校となった繊細な10代男子 個別対応と安心できる学習環境を求めており、高校卒業資格 の取得、将来の就職に向けた準備、自己成長を望んでいる。 47
48. 改善ポイント デザイン、レイアウト、コンテンツの観点から課題解決への制作方針 を立てる。 改善ポイント① 安心できる居場所を提供する高校をイメージしたトンマナ 学校のアカデミックなイメージでメインカラーにネイビーを使用、柔らかいグラデー ションで安心感を表現しました。 改善ポイント② 情報の整理と見やすいレイアウト テキスト情報を一カ所に集めて情報を読み取りやすく改善。お問い合わせ動線を見直し て電話＞ライン＞フォームの優先順位をわかりやすくしました。 改善ポイント③ 職員の顔を掲載して電話相談のハードルを下げて相談しやすく まずは電話相談で悩みを抱えている方が相談しやすいように、相談を受ける職員の顔を 表示して安心感を与える。 WORKS 制作実績 03 コーポレートサイト 48
49. 競合・関連サイト分析 表現方法を検討するため、 関連サイト、競合サイトをリサーチ 49 WORKS 制作実績 03 コーポレートサイト
50. WORKS 制作実績 03 コーポレートサイト 情報設計 サイトマップ・WF・ガントチャート・システム要件・ディレクトリ構成などを設計 サイトマップ 手書きのWF ガントチャート システム要件・ディレクトリ構成シート 50
51. ファーストビュー作成 トンマナパターン別にFVを２案作成 WORKS 制作実績 03 コーポレートサイト こちらのコンセプトを採用 Concept A 人物の背後にキャッチコピーを配置して、秘めた思いや思慮深さを表現。視線の先 には期待と希望、未来に向かって羽ばたくイメージで鳥のあしらいを入れました。 Concept B みんなちがって、それぞれの色やかたちを持っている事を人物の切抜きで表現しま した。生徒に寄り添うスタッフが温かく見守るイメージをブルーとオレンジのグラ デーションで表現して安心を感じられるようにしました。 51
52. WORKS 制作実績 03 コーポレートサイト デザインシステム フォントファミリー 和文は可読性や視認性を高めいNoto Sans JPを使用。FVキャッチコピーは背景のやさしい雰 囲気に合った丸みのあるZen Maru Gothicを使用。 Regular Noto Sans JP Medium Noto Sans JP Bold Noto Sans JP Regular Zen Maru Gothic 見出し 見出しL(h1) 64 Regular 140% 0.04em 見出しM(h2) 40 Bold 140% 0.04em 見出しS(h3) 20 Medium 140% 0.04em 本文L 16 Regular 180% 0.04em 本文M 16 Medium 180% 0.04em 補足L 14 Bolod 180% 0.04em 補足M 12 Medium 180% 0.04em ボタン 16 Bold 100% 0.04em ボタン(header) 18 Bold 100% 0.04em キーカラー 共通カラー ネイビー #1F286F ライトブルー #D9F0FF オレンジ #FFEFD9 #FFFFFF #333333 #BCBCBC #FFFFFF background primary ボタン LINEで相談 LINEで相談 お問い合わせ お問い合わせ hover hover hover 詳しくみる 詳しくみる 52
53. WORKS 制作実績 03 コーポレートサイト 53
54. WORKS 制作実績 03 コーポレートサイト お問い合わせの優先順位は電話＞ライン＞フォー ムがわかる様にサイズや色で誘導 みんなちがって、それぞれの色やかたちを持って いる事を人物の切抜きで表現 温かみのあるオレンジを背景に使用して安心感を 表現 手書き風のやわらかいフォントで親近感と寄り添 う気持ちを表現 ベネフィットの表示で卒業資格取得や経験豊富な スタッフの存在で安心感を与える 追従CTAは電話相談しやすいように、スタッフの 顔を入れて安心な印象に 写真はカーブで切り抜いてやさしさを表現しまし た 54
55. WORKS 制作実績 03 コーポレートサイト お知らせは写真も見えるようにして活動の内容を 見れるように 各ページリンクは写真をカーブで切り抜いて柔ら かい感じを表現 CTAは電話が一番目立つようにレイアウト フェイスブックから活動の様子を見ることが出来 ることで安心感につながる 55
56. BEFORE AFTER WORKS 制作実績 03 コーポレートサイト 56
57. 04 コーディング実績 静的サイト・WordPressオリジナルテーマ構築 使用ツール VScode WordPress 担当範囲 コーディング 57 WORKS 制作実績 04 コーディング
58. WORKS 制作実績 04 コーディング 58 コーディング検定 WEB業界の専門知識とスキル、コーディング実務 遂行能力を測るための検定試験に合格しました。 2024.8 第3回コーディング実案件チャレンジ 2024.9 コーディング実務検定
59. WORKS 制作実績 04 コーディング チャレンジ学習塾様 コーポレート WordPress 寛雅（自主制作） コーポレート WordPress Repose hair（自主制作） コーポレート WordPress Day Maga（課題） コーポレート WordPress Global Standard（架空） コーポレート WordPress 見つけて尾道レトロキャンペーン(架空) LP Garden Salad（架空） LP sobolon（架空） LP OHA!（架空） LP Body Makey（架空） LP 59 デザインカンプを忠実に再現した、保守性に優れたコーディングを行います。 WordPressオリジナルテーマ構築からカスタマイズ、SEO対策、CMS管理、セキュリティ対策など幅広く対応可能です。
60. FOLW ご契約までの流れ 60
61. FLOW ご契約までの流れ ヒアリング ご要望やプロジェクトの目的、 デザインのイメージについて丁 寧にお話を伺います。ヒアリン グの内容を基に、最適なデザイ ンプランとおおまかなスケ ジュールをご提案いたします。 ご提案・お見積り お客様の課題やニーズに応じた ご提案いたします。併せてお見 積もりもご提示いたします。
 ご契約 提案内容に価値を感じて頂けま したら、正式にご契約させて頂 きます。ご契約が完了次第、プ ロジェクトをスタートし、デザ イン作業に取りかかります。 61
62. THANKYOU 最後に THANKYOU 最後までご覧いただき、誠にありがとうございます。 お客様のご要望や悩みを正確に共有し、課題を解決できる WEBサイト制作に取り組んでいます。 お客様の制作パートナーとしてお任せいただけますと幸いです。 どうぞお気軽にご相談ください。 kanakooohata@gmail.com https://www.chatwork.com/naco589 62