Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

水城 絵里香

水城 絵里香

地方で活動するフリーランスWEBデザイナーの水城です。
これは2025年7月作成のポートフォリオです。

Avatar for 水城絵里香

水城絵里香

July 31, 2025
Tweet

Other Decks in Design

Transcript

  1. 2012.03 福岡県立久留米筑水高校 卒業 2012.04 地元企業にて生産管理を経験する 2016.12 第一子出産の為退職 2020.07 地域密着型セレクトショップ勤務 独学でIllustrator、Photoshop、Canvaを習得

    (※2021.03~2023.03まで第二子出産のため離職) 2024.09 退職 長男の病気が発覚し看病のため退職
 在宅でできる仕事を検討しだす 2024.11 STUDIO(ノーコード)学習開始 2024.12 WEBデザイナーとして活動開始 FigmaやAIなどの学習を開始する E R I K A M I Z U K I 水城 絵里香 1993.08.09 福岡県うきは市在住 エレクトーン 映画 焼き鳥 生 ま れも育ちも 福岡県の 田舎町 で 、
 田んぼに囲 ま れ た 自然豊か な 環境 で 暮ら し てい ます 。 生 ま れも育ちも 福岡県の 田舎町 で 、
 田んぼに囲 ま れ た 自然豊か な 環境 で 暮ら し てい ます 。 27 歳から個人店舗 の 運営 を 経験 し、 個人店ならではの面白さや 同時に大変さも身を持って体験しました。 27 歳から個人店舗 の 運営 を 経験 し、 個人店ならではの面白さや 同時に大変さも身を持って体験しました。 そ の 体験から 「地域で活動する事業者さまをデザインの力で応援したい」 とい う 想い が 大 き く な り 、 前 職の 経験 を 活か し て ”目標を達成するためのデザイン”をモット ー に活動しており ます 。 そ の 体験から 「地域で活動する事業者さまをデザインの力で応援したい」 とい う 想い が 大 き く な り 、 前 職の 経験 を 活か し て ”目標を達成するためのデザイン”をモット ー に活動しており ます 。 Prof ile 自己紹介
  2. 目的 目標 想い 価値 価値 背景 思考 その人の 目指す形に寄り添い デザインします

    個人店や地域で活動する事業者さまを、個人店舗運営の経験 を踏まえ少人数のスタッフでも対応ができ、持続可能な運営 を目指すデザインを丁寧にご提案させていただきます。 My policy 大切にしている価値観
  3. 01 01 一貫したデザインと サービスでご支援します 課題を引き出す ヒアリング 04 ビジネス全体を 見据えたサポート 04

    03 完成までの流れを 随時報告・共有 03 02 全体を見据えた デザイン設計 02 Feature 私の強み
  4. S e r v i ce サ ー ビ ス

    の 特 徴 01 課題を引き出すヒアリング 事業内容や目指す姿を丁寧にヒアリングし、根本にある課 題やなりたい姿を言語化します。 |ヒアリング後のまとめ 02 全体を見据えたデザイン設計 事業形態や実際に運営するスタッフの得意・不得意を考慮 し最適な導線・デザインをご提案、設計いたします。 |提案書
  5. 動くUI体験はこちら 参考:「2nd STREETアプリ」公式(App Store) 2nd STREET Co., LTD. 引用元:株式会社セカンドストリート  2nd

    STREET Co., LTD. ※当デザインはポートフォリオ用の自主制作リデザインです。実際の運営元とは一切関係ありません。 参考:「2nd STREETアプリ」公式(App Store) 2nd STREET Co., LTD. 引用元:株式会社セカンドストリート  2nd STREET Co., LTD. ※当デザインはポートフォリオ用の自主制作リデザインです。実際の運営元とは一切関係ありません。 Secondhand Store App リユースストアアプリUI改善 # ※ 自主制作
  6. Production 制作概要 リユースショップアプリのUI/UX改善を行いました セカンドストリート ジャンル オンラインショップ 使用ツール figma 制作範囲 UI

    /UX 情報設計 制作期間 3週間 リ サ ー チ リ サ ー チ 課 題 整 理 と 明 確 化 課 題 整 理 と 明 確 化 改 善 方 針 の 設 定 改 善 方 針 の 設 定 情 報 設 計 構 成 案 の 制 作 情 報 設 計 構 成 案 の 制 作 U I デ ザ イ ン 制 作 U I デ ザ イ ン 制 作
  7. 事業内容 リユース リユース 買取 買取 循環 循環 ブランド ブランド  モノの価値を循環させる、リユースの専門店

    ターゲット  お得に掘り出し物を買いたい   ・低価格でトレンドアイテムを手に入れたい   ・ちょっとしたお宝探し感覚で利用 「掘り出し物」や「一点 物」を探すリユースファ ンの心を掴み、迷いなく 購入まで導く 「掘り出し物」や「一点 物」を探すリユースファ ンの心を掴み、迷いなく 購入まで導く 目的 実店舗のような感覚で ショッピングできるよう よりリユースショップ向 けの商品掲載方法に改善 実店舗のような感覚で ショッピングできるよう よりリユースショップ向 けの商品掲載方法に改善 課題 Problem 要件定義 Before
  8. Research リサーチ 改善のために 、 実際の利用者の意見をインタビューしさらに しました アプリレビューを分析 店舗運営側の課題も予測 自分の求めている 商品を探すのがたいへん

    ・まとめて検索したい ・早く探したい ユーザー視点 店舗スタッフが写真を 撮っている ・写真の撮り方に個人差がでる ・店舗営業の合間に作業している 予測課題 店舗営業とオンライン ショップの同時管理 ・同じものを同時に販売していて  在庫管理が難しい 予測課題 実物と掲載写真に 「差がある」 ・写真がわかりずらい ・写真の枚数が少ない ユーザー視点 カートに入れた商品を 数日後注文したら 「在庫がありません」に ・店舗在庫と連携できてないの? ・まだ購入できると期待させて  おいて買えなかった ユーザー視点
  9. Improvement concept デザイン改善のコンセプト 仮説 「一点もの」特有 スタッフの作業負荷を下げつつ 明確に伝える必要 の負担システムを減らし、 実店舗での 購入者側には

    リユースショップ独自のシステムを がある 写真+動画で掲載方法を簡略化&リアルに 写真だけでは伝わりづらい箇所を動画をとりいれカバー カテゴリ選択画面を複数選択可能に ユーザーの欲しいアイテムを探す手間を省き離脱率削減へ TOPから商品を見せリユースショップ感を 掘り出し物をみつけるワクワク感をユーザーに感じてもらう タイマー方式で「仮確保」システム導入 カートには期限をつけて「入れたまま状態」を防止する POINT 01 POINT 02 POINT 03 POINT 04
  10. Persona ペルソナ設定 改善の意図や目的を明確にするため、ペルソナを設定 店長/10年目 佐藤 祐 (34) 家族構成 母 妹

    働き方 店長 研修あり フルタイム 現在の悩み 業務が多様化して一律が難しい 店舗運営も日々忙しくてアプリ管理が大変 古着好き/自営業 石田 太郎 (48) 家族構成 妻 長男(18) 長女(16) 働き方 中古車販売 代表 家族営業 現在の悩み ネットショップ初心者でまだ少し抵抗がある 最近仕事が忙しくてでかけることができない
  11. ユーザー視点 User Journey|ユーザー視点でカスタマージャーニーマップを作成しました。 行動 タッチポイント 感情 課題・不満 改善点・効果 商品を探す 絞り込み設定

    商品を閲覧 購入手続き 商品到着 リピート・レビュー 気になる商品を
 アプリで探す 商品カテゴリを 絞り込み 商品詳細・画像 動画を確認 カートに入れて 決済 商品を開封 確認 商品レビューや 再購入検討 アプリトップ 検索バー 絞り込みUI フィルター 商品詳細・写真 動画 カート 支払い画面 配送された商品 明細 アプリ・メール通知 SNS連携 見つけやすい! カテゴリ設定がみやすい 動画で状態が 良くわかる 迷いなく 購入できた 思ったお通りの 商品だった また利用しよう 以前は探しにくく 離脱していた 絞り直しが 面倒だった 写真だけでは 汚れが見えなかった 中古品だと 迷いやすい イメージと 違っていた時が不満 良いレビューを 書きづらい仕組みだった TOP画面から見れる
 キーワード検索強化 絞り込み保持状態で ストレス減 動画追加・定角度 撮影で信頼感UP 中古説明や状態 ランクの明確化 満足度アップで 返品減 良い体験からの 継続利用と拡散 Customer Journey Map カスタマージャーニーマップ
  12. 運用者視点 作業内容 ツール・環境 感情 課題・不満 改善アイディア 商品仕入れ 撮影準備 商品撮影・登録 アプリ掲載確認

    購入後対応 振り返り・改善 商品の査定 分類 商品撮影スペース 設置準備 規定枚数の撮影と 360度動画撮影 表示確認と カテゴリ整理 発送準備 在庫反映 登録制度と 販売実績確認 査定用ツール 撮影スペース ガイド 撮影ガイド 動画撮影端末 管理画面 アプリ表示確認 梱包資材 出荷端末 販売レポート 改善会議 やること多いけど 慣れてる 準備が大変… スペース確保が課題 撮影ガイドで 迷わずできた 登録の見栄えが 良くて安心 問い合わせが 減った 売上に繋がって やりがいあり 人手不足で 仕分けも忙しい 撮影スペースが狭い 物が多い 混雑時は撮影時間が 取りづらい 表示ミスがあれば クレームに直結 商品の確認 発送が遅れがち 商品登録者ごとの 品質差の管理が必要 査定支援AIの導入 撮影ブースの固定化 枚数・角度ガイドを 壁に貼る 表示内容チェック リスト作成 出荷チェック リストの運用 スタッフごとの実績 表示で意識向上 Customer Journey Map カスタマージャーニーマップ Employee Journey|運用者視点でカスタマージャーニーマップを作成しました。
  13. Information design 情報設計・画面推移 ホーム Point ・TOPの最初からリユース  商品を掲載 ・リユースショップならで  はの活気あふれる印象に カテゴリ選択

    Point ・カテゴリはボタン式に ・上部に選択済みのカテゴ  リを表示 カテゴリ選択後 Point ・常に選んだカテゴリを確  認できるよう上部に表示 ・いくつ絞り込み検索して  いるかを数字で表示 商品選択 Point ・360°動画で商品を確認で  きる仕様を取り入れ写真  では確認できなかった部  分を確認することができる
  14. Information design 情報設計・画面推移 商品選択後 Point ・店舗在庫と共有の為未注  文は「仮確保」状態に ・「仮確保」は時間制限を  設けてユーザーにも周知 購入手続き

    Point ・上部とボタンに「仮確保  時間」を常に表示 ・お届け先などの情報をす  べて入力すると次へ進める 内容確認 ・上部とボタンに「仮確保  時間」を常に表示 ・お届け先など確認後に注  文を確定するを押す Point 注文完了 Point ・注文完了! ・一点ものを購入できた安  心感と喜びをイラストで  表現
  15. Recruitment Web site キャリア採用特設サイト改善 # ※ 自主制作 参考: KOBELCOキャリア採用特設サイト 引用元:株式会社神戸製鉄所

    Kobe Steel, Ltd. 公式サイト(https://www.kobelco-gr.jp/) ※当デザインは自主制作のリデザイン案です。実際の企業・団体とは関係ありません。
  16. 事業内容 鉄鋼 鉄鋼 機械 機械 電力 電力 技術 技術  鉄、機械、エネルギーで社会を動かす技術を届ける会社

    ターゲット  安定企業で専門性を活かしキャリアを広げたい ・海外プロジェクトや最新技術開発に挑戦したい ・他メーカーや建設・インフラ企業からの転職希望 数ある同業の中から自分 が挑戦できる環境に飛び 込み、社会を良くしなが らさらに自分を磨きたい 数ある同業の中から自分 が挑戦できる環境に飛び 込み、社会を良くしなが らさらに自分を磨きたい 目的 写真のトンマナがやや無 難で、大手製造業の「堅 実さ」は伝わるが、挑戦 心・未来感が弱い 写真のトンマナがやや無 難で、大手製造業の「堅 実さ」は伝わるが、挑戦 心・未来感が弱い 課題 Problem 要件定義 Before
  17. Benchmark ベンチマーク・競合調査 競 合 レイアウト カラー ・要素を重ねて配置し躍動感のある  表現を取り入れて挑戦や未来といっ  たイメージを表している ・ブランドカラーをアクセントカラー

     にすることで、企業の色を表現して  いる ・人の顔写真をたくさん配置して、  いろんな人が働いている様子を表し  ている ・手書きのフォントでキャッチコピー  を書くことで、メッセージのように  なっている ・ブランドカラーもしくは「青系」が  比較的多く、ビジネス感を色で表現  している ・グラデーションを用いることで、  未来や挑戦を表している。写真は同  系色で加工している
  18. Persona ペルソナ設定 工場製造部/5年目 山田 圭人 (27) 家族構成 妻 長男(1) 働き方

    2勤交代制度 製造部 エンジニア 現在の悩み 成長できる環境に変わりたい 周りがどんどん成長していて焦りがある 工場開発部/15年目 山下 悠太 (42) 家族構成 妻 長男(10) 長女(8) 働き方 開発担当係長 出張あり 残業多い 現在の悩み 人間関係で悩むことがある もっと専門的な知識を深めながら働きたい 改善の意図や目的を明確にするため、ペルソナを設定
  19. 未 来 を つ く る 」   「 仲

    間 と 挑 む 与える印象 信頼感 挑戦 ブランド力 仲間 挑戦したいという気持ちと、無数 にある同業の工場とは違うブラン ドの見せ方で優秀な人材との縁を 結ぶことをコンセプトにしました。 Improvement concept デザイン改善のコンセプト
  20. #FFFFFF #2468B7 #FACE2A ⁨⁩Base Colors Typography F⁨⁩f Hiragino Sans あアAa

    F⁨⁩f 851MkPOP Aa CTA|ボタンデザイン CTA|ボタンデザイン ・背景に柔らかく温かみと未来のようなテクスチャのグラデーションを取り入れ、  「挑戦心」や「同業者との違い」を表現しました。 ・「誠実」「信頼」「真面目」感を表すためにボタンや写真などは四角に、  推移ボタンは四角のボタンの中でも目立ちやすいように丸でデザインしました。 表 現 し ま し た 。 手 書 き 風 フ ォ ン ト で ・ 「 仲 間 」 「 親 し み や す さ 」 を Design system デザインシステム
  21. Baby Food tips LandingPage 離乳食期情報配信のLP改善 # ※ 自主制作 参考: あかちゃんごはんLP 株式会社一条工務店 ICHIJO

    CO.,LTD. 引用元:株式会社一条工務店 あかちゃんごはんLPサイト(https://www.kobelco.co.jp/) ※当デザインは自主制作のリデザイン案です。実際の企業・団体とは関係ありません。
  22. Benchmark ベンチマーク・競合調査 競 合 レイアウト カラー ・子どもらしい色使いやあしらいと、  子どもやテーマにちなんだ写真を使  うことでメッセージが伝わってくる ・企業として「

    子育てを応 援してい る」という想いが伝わり安心感や信  頼につながっている ・柔らかい質感のイラストや中央寄せ  の配置にすることで包み込まれてい  る印象がある ・適度にカーブを入れることで、安心  感を演出している ・明るいオレンジや黄色をベースにす  ることで、男女関係なく受け入れや  すいカラーに ・黒い縁を使うことで、少しポップな  印象になり、親しみがあるデザイン  になっている
  23. Persona ペルソナ設定 改善の意図や目的を明確にするため、ペルソナを設定 公務員/10年目 田中 幸太 (36) 家族構成 妻 長女(0)

    働き方 地域活性化 出張あり 主任 現在の悩み 子どもが生まれてマイホームを考えている 子育てをどう手助けしていいかわからない 育児休暇中/パートタイム 坂本 なつこ (34) 家族構成 夫 長男(0) 働き方 地元のスーパー レジ・品出し 週4 現在の悩み 初めての育児でわからないことが多い 離乳食に対して漠然と不安がある
  24. パ ー ト ナ ー 」   「 育 児

    の 優 し い 与える印象 安心感 愛らしい ブランド力 支援 「家族で育む、安心と成長のごは ん時間」となるよう家族の絆が より強くなるためのパートナーに なることをコンセプトにしました。 Improvement concept デザイン改善のコンセプト
  25. #FEF4DA #EE86AD #FACE2A #FFFFFF Colors Typography F⁨⁩f Noto Sans JP

    あアAa F⁨⁩f Noto Sans JP あアAa CTA|ボタンデザイン CTA|ボタンデザイン ・パパもママも受け入れやすいブルーとピンクをアクセントに、柔らかいベージュであかちゃんを包み込む  ような優しいイメージを表現しました。 ・全体的に柔らかい色味を多用しているので、ボタンははっきりとわかる色を選択しました。 Design system デザインシステム
  26. 昨今の「パパ」の育児休業取得率拡 大に応じて、パパママのイラストを 大きめに配置し「パパママ共に安 心」を表現しました CTAボタンをわかりやすく表現し、 迷わず友達追加できるようにしました スマホの画面をTOPで表現する ことにより、スマホで「情報を得 ることができる」ことを一目でわ かるようにしました

    タイトルに「LINE」のアイコンを入れる ことで、この情報がどこから得ることが できるのかをわかりやすく表現しました リボンをカーブさせることによ り、「安心」や「柔らかさ」を表 現し工務店という真面目で硬い印 象を和らげる工夫をしました
  27. 事業内容 コワーキングスペース コワーキングスペース 不動産業 不動産業 駅近 駅近  自社が管理・所有しているテナントを有効活用する ターゲット  車を持たないフリーランス、個人事業主、スタートアップ

      ・博多エリアで外勤が多い営業職、ビジネスマン   ・起業を検討している人 不動産物件の稼働率を高 め、安定したストック収 益を作りながら、地元地 域で働く人を応援する。 不動産物件の稼働率を高 め、安定したストック収 益を作りながら、地元地 域で働く人を応援する。 目的 博多駅周辺には既に大手 のコワーキングビジネス が多く、競争が激しい。 不動産のイメージが強い。 博多駅周辺には既に大手 のコワーキングビジネス が多く、競争が激しい。 不動産のイメージが強い。 課題 Problem 要件定義
  28. 事業内容 人事評価 人事評価 システム システム IT IT  人事評価を通じて企業の成長を支援する ターゲット  企業の人事部長、経営企画部門の担当者

      ・人事評価制度に課題を感じている企業マネジメント層   ・他社システムからの乗り換えやDX推進を検討中の層 人事評価に課題を感じてい る企業が価値に気づき、導 入検討を始めるきっかけを 作る。 人事評価に課題を感じてい る企業が価値に気づき、導 入検討を始めるきっかけを 作る。 目的 人事部長・経営層など決 裁権者は多忙なので、一 瞬で「必要かも」と思わ せる強さが必要。 人事部長・経営層など決 裁権者は多忙なので、一 瞬で「必要かも」と思わ せる強さが必要。 課題 Problem 要件定義
  29. 立体感のあるあしらいで、よりボ タンの存在を強調し押したくなる デザインに サンプルページを大きくあしら うことで、目に留まりやすく、 また評価システムのイメージも しやすくしました 薄く丸いあしらいを重ねたりち らしたりして、「個」と「組 織」を表現しています

    シャドウをつけ、全体的なバラ ンスを考え配置し、奥行きを演 出しています。かっちりしたイ メージを少し軽く演出すること により、「システム」という難 しい雰囲気が和らぐよう表現し ています より信頼のイメージを伝える ためにあしらいを使いながら ランキングを表現しました あしらいと同じく、ゴールド で表現することにより、強調 したい言葉を目立たせる工夫 をしました
  30. 事前ヒアリング ヒアリング前に、ご依頼内 容や現状のお困りごとなど をアンケートにご記入いた だきます。 ヒアリング 事前アンケートを元に、お 話しながら「目的」「目標」 などを丁寧にヒアリングい たします。

    02 ご提案・お見積り ヒアリングした内容を元に、 構成やスケジュール、ご予 算などをご提案させていた だきます。 03 ご契約 内容にご納得いただけまし たら、ご契約となります。 プロジェクト成功まで伴走 させていただきます! 04 01 Flow ご提案の流れ
  31. キックオフ プロジェクト成功を目指し て、ヒアリング内容を元に 「ゴール」の設定をさせて いただきます! デザイン・修正 「ゴール」の設定を軸にデ ザインの制作に取り組みま す。随時フィードバックの 元、進行いたします。

    02 納品・フォロー 納品後に、運用方法や必要が あれば動画やテキストによる マニュアル作成も可能でござ います。 03 中長期サポート 「SNSを始めたいけど運用 がわからない」などといっ た中長期にわたるサポート も可能でございます。 04 01 Flow ご契約後の流れ
  32. Q&A よくあるご質問 Q デザインの実績が少ないようですが、依頼しても問題ないでしょうか? Q デザインの実績が少ないようですが、依頼しても問題ないでしょうか? A デザイナーとしての実務経験が浅い分、「目的」や「目標」「お困りごと」を丁寧にヒアリングし、独 自のリサーチを重ね、問題解決策をご提案させて頂きます。 Q

    初めて依頼するのですが、個人経営でひと手がなくHPなど運用できるか不安です。 Q 初めて依頼するのですが、個人経営でひと手がなくHPなど運用できるか不安です。 A はい、私も個人店で活動経験があるのでよくわかります。 SNS投稿については運用しやすいようテンプレート化したデザイン案も納品可能です。また、HPの更新 ができるか不安のある方は別の方法など、今の事業体制に合わせたご提案をさせていただきます。 Q デザインの修正は何回まで可能ですか? Q デザインの修正は何回まで可能ですか? A 基本的には修正回数制限は設けておりません。ただし、プロジェクトを円滑に進行できるよう、事前の ヒアリングや「目的」「目標」「デザインのゴール」を一番最初に一緒に決定させていただきます。そ こから大幅にデザインを変更する場合は、内容に応じで別途追加料金をお願いすることがあります。