UIデザイナー兼コーダーあずさのポートフォリオ

この度はポートフォリオをご覧いただき、ありがとうございます！
UIデザイナー兼コーダーのあずさです。
お気軽にご連絡くださいませ。

【Googleフォーム】簡単2分で入力！相談フォーム
https://forms.gle/isKiST8B1Ejaq1yPA
（分かる範囲でご入力ください。）

【Xアカウント】DMでもOK！お気軽にご相談ください！
https://x.com/shin_web_work

Transcript

1. UI design / coding ⁨⁩Portfolio 2025 SHINSHIKI AZUSA
2. 新敷 梓 しんしき あずさ UIデザイナー兼コーダー 趣味 インド・ネパールのバックパッカーや、パラオや アメリカ旅行など、20カ国以上の渡航経験あり。 旅行会社のバリ島支店で2年の長期滞在。 インドのラダック地方を2ヶ月トレッキング経験あり。 信州の山荘宿泊や雪山トレッキングなどが大好き。 キレイな海で泳いだり、スキューバダイビング、など。 時々、庭で焚き火をして気分転換。 助手席より運転席が好き。 山登り 海 焚き火 ドライブ 海外旅行 スキル UI・Webデザイン 画像加工 イラストデータの色変更など 動画制作 WordPress構築/オリジナルテーマ プロジェクト設計、サイトマップ作成 コーディング/HTML、CSS、Sass コンタクト a. shin shiki@gmail.c om 090-1769-0696 http s: //shinazu sa.c om / http s: //x.c om /shin_w eb_w ork 経歴 2003年10月～2022年12月 株式会社旅工房（旅行会社） 2008年01月～2008年11月 バックパッカ ーのため一時退職 2009年02月〜2011年03月 インドネシアバ リ島支店 2021年09月〜2022年10月 株式会社ミタ イト ラベ ル（合同会社） Webサ イト・Instagram 運用 のディ レクショ ン 2023年10月～2024年5月 株式会社gotch a（旅行会社） スタートアップ企業のWebサイト立ち上げのディレ クション 予約・手配チームのマネージメントや社員育 成、顧客システム入替えプロジェクト、など 幅広く対応しました。 2024年 6月〜 個人事業主 Web 制作(ディレクション、デ ザイン、 コーディン グ）
3. Voice 信頼して任せられた！ 安定の調整力で進めてくれたサイト制作 株式会社gotcha 代表取締役 高山様 お客様の声 状況に応じて、責任者や現場担当者への確認・調整、ヒア リングを自ら進めてくれるスタイルがとても助かりまし た。柔軟な調整力と迅速な対応により、安心して任せるこ とができました。 担当範囲 サービスサイトのディレクション、コーポレートサイトのディレ クション、サイト構築 インタビュー動画 https://shinazusa.com/voice/127/ トレイルラン大会サイト制作と30日間のス ピード納品 EZO TRAIL 代表 今様 お客様の声 リサーチをしっかり行っていただき、次々に提案していた だけたおかげで、厳しいスケジュールにもスピーディーに 対応していただきました。その結果、270名以上の集客を 達成することができました。 担当範囲 ディレクション、デザイン、サイト構築（WordPressオリジナル テーマ） インタビュー動画 https://shinazusa.com/voice/291/ 安心感のある進行で形になった動画制作サー ビスサイト TKS CREATE 動画クリエイター つかさ様 お客様の声 毎回の打ち合わせで、目的とゴールを先に提示していただ けたので、進行が非常にスムーズでした。多くのサイトを リサーチした上で提案していただいたおかげで、最初から 最後まで安心してお任せできました。 担当範囲 ディレクション、デザイン、サイト構築（WordPressオリジナル テーマ） インタビュー動画 https://shinazusa.com/voice/340/
4. 戦略設計からUI設計・開発まで、一気通貫のサービス Concept
5. 市場の立ち位置と流入経路を踏まえた戦略設計 市場の動向やニーズを徹底的にリサーチし、その結果をもとに効果的な戦略設計を行います。
6. 徹底的にリサーチし、最適なご提案をします Webサイト制作前に競合他社や類似業種を含め、約100サイトをリサーチします。 徹底したリサーチを通じて、市場やニーズを把握し、最適な提案をさせていただきます。
7. ビジネス経験で培った強み 10年以上のマネジメント経験 チームビルディング 適材適所の業務振り分けやこまめなコミュニケーションを通 じ、信頼関係を構築しながら会社の目標達成に貢献。 提案力 新しい企画や社内教育の改善の推進。相手の立場を考えた、 事前調整や折衷案をもちいて、承認を得る提案力を発揮。 責任感 課題を自分のこととして考え、上司や取引先と協力して行う問 題解決。新規システム導入や新規事業の立ち上げなどを担当。 旅行系スタートアップ企業のディレクション サービスサイト立ち上げプロジェクトの推進と窓口対応 旅行会社、Web制作会社、旅行システム会社の3社を連携し、 責任者として窓口対応、要件定義、スケジュール調整を担当。 柔軟な対応力で課題解決 未確定な状況でも必要事項をヒアリング・整備し、足りない部 分は自ら手を動かして対応。プロジェクトを確実に進行。 情報設計とリサーチ ツアー詳細など旅行会社特有の項目をリサーチし、ワイヤーフ レーム作成も一部担当。実務と調整の両面で貢献。
8. ・ファネル設計 ・チャネル設計（流入経路） ・ポジショニング整理 ・サイトの目的明確化 ・ターゲット明確化 ・競合リサーチ ・コンテンツ検討 ・サイトマップ作成 ・ワイヤーフレーム作成 ・キャッチコピー作成 ・テキスト作成 ・Webデザイン ・UIデザイン ・サイト実装 （コーディング、デモサイト構築） ・機能実装 ・動作確認（テスト） ・リリース ・競合他社のリサーチを徹底し、具体的なサ イトの方向性を明確化します
 （状況に応じて異業種のリサーチも行い、多 角的な視点で検討します。） ・丁寧なヒアリングを通じて、目的やター ゲットを具体化し、目標に沿ったプロジェク ト設計を行います。 ・ユーザーに伝わるキャッチコピーやテ キストを、ヒアリングを通じて作成しま す。 ・サイトマップ作成の段階で、掲載コン テンツを精査し、成果を重視した構成を ご提案します。 ・ワイヤーフレームをもとに、視覚で訴求 力のあるデザインを制作します。 ・UI設計にも配慮し、ユーザーが迷わず 目的を達成できる動線を意識したデザイ ンをご提案します。 ・ユーザーが快適に利用できるよう、見 やすく使いやすい実装を行います。 ・デザインに魅力を与えるアニメーショ ンを取り入れ、さらにサイトを魅力的に します。 プロジェクト戦略 要件定義・設計 デザイン制作 開発・リリース ポ イ ン ト タ ス ク 例 分 野 マーケティング ディレクション デザイン エンジニア ディレクション 戦略設計からUI設計・開発まで、一気通貫のサービスのフロー Flow
9. Works 制作実績
10. 企業名 HIS 制作 自主制作 業界 旅行業 ジャンル 海外旅行/国内旅行 制作期間 6日間(20h) 担当範囲 UIデザイン UI Renewal 01HIS 引用元：© H.I.S. Co., Ltd.
11. 海外旅行を予約する旅行会社ランキング 海外旅行の予約は大手旅行会社「HIS」と「JTB」が人気。 出典：MMD研究所「2024年 国内スマートフォン利用動向調査」 （https://mmdlabo.jp/investigation/detail_2383.html） なぜ海外ツアーを取り扱う旅行会社が人気なのか ユーザーは漠然とした不安を持っている ユーザーがなぜ不安を感じるかを深掘り ・旅行先がイメージできない適正価格の旅行代金なのか ・旅行先のことを詳しく知らない ・ホテルがキレイなのか心配 ・ホテルと航空券を別々で予約をすることの注意点がわからない ・旅行中に必要な書類もわからない ・専門的なアドバイスが欲しい （理想のプランであることを確信したい） ・旅行手配の時間を削減したい ・トラブルがあった時にサポートしてほしい、など。 リサーチ｜アンケート結果から見る旅行会社の選択 Works
12. ペルソナ ペルソナ1 30代女性、共働き、夫と3歳息子の3人暮らし グアム旅行に行きたいけど、子連れでも問題なく泊 まれる清潔感と移動しやすく治安のいい立地ってど こだろう。 子どもも楽しめるホテルってあるのかな。
 手配に時間をかけたくない。 ペルソナ2 30代女性、共働き、夫と2人暮らし ハワイへウェディング旅行を予定しています。 安心して家族を招待したいな。 参列者の旅行は、出発地と宿泊数がそれぞれ異なる ので、すべての旅行アレンジも含めて任せたい。 リサーチ｜ユーザーの思考の整理 Works 前職、旅行会社での勤務経験より、よくいただいたお声からペルソナを設定 カスタマージャーニー フェーズ 行動 詳細 気持ち Attention（認知・注意） 旅行への関心が高まる ) 旅行を考え始め、友人との会話で 旅行の話題が出0 ) ハネムーンや卒業旅行などのきっ かけで旅行を検討 ワクワク、嬉しい Interest（興味・関心） 情報収集を始める f ポータルサイトやInstagram、ま とめ記事でおすすめの旅行先を探 p f 旅行会社をググって検索 考える、悩む Search（検索） 旅行プランを比較・検討する f 旅行会社やポータルサイトを訪 れ、詳細を検š f 旅行に同行する人と相談 考える、悩む Action（行動） 旅行の予約・問い合わせを行う f 条件に合った旅行を、予約や問い 合わせし、自分に最適なプランを 選ぶ ワクワクしてきた Experience（体験） 旅行中の体験を実際に楽しむ f 旅行中の体験を実際に楽し! f 現地で観光、食事、アクティビ ティなどを楽しむ ワクワク Share（共有） 旅行体験を共有する f 旅行中や旅行後に、思い出を周り の人に話す、SNSに投稿する 満足、ワクワク
13. コンセプトと目的 Works ユーザーの目指す姿 企業の目的 旅行が楽しみになる！ 漠然とした不安 売上増＝旅行予約増 対策の1つ：リピート予約の増加
14. 情報量が少なく わかりづらいアプリ BEFORE AFTER 欲しい情報がすぐに見つかるアプリへ 引用元：© H.I.S. Co., Ltd.
15. キャンペーンバナー お得なキャンペーン情報や特集を通じて、 新しい発見や選択肢を提案。 興味を持ったユーザーは、各キャンペーン ページへ遷移可能。
 さらに他のキャンペーンを見たいユーザー には、「もっと見る」ボタンで特集一覧 ページを案内。 人気の旅行先ボタン 行き先に迷っているユーザーにおすすめの 旅行先を提案。
 注目されている方面を決算データからピッ クアップ。 各エリアボタン 行き先が決まっているユーザーに向けたエ リア選択ボタン。
 写真を使ってエリアの魅力を伝え、行き先 が未定のユーザーにもアピール。 アイコン 人気のツアーを左から順に配置。視覚的に わかりやすく、選びやすいデザインを採 用。 ツアー検索フォーム 行き先や日程が決まっているユーザーが、 希望のツアーをスムーズに探せる検索 フォームをファーストビューに配置。 ホームでCVする工夫
16. ツアー検索ボタン エリア写真やおすすめツアーを見た ユーザーが、旅行検索を進めやすいよ う、CVポイントとして設置。 添乗員同行のツアー 北米や欧州など、多くの都市を巡 りたい方や安心感を重視する年配 層に向けた提案。
 選択肢の1つとして「添乗員同行 ツアー」を掲載。 おすすめのツアー 行き先を検討中のユーザーに向け た厳選5ツアーを掲載。
 「＋もっと見る」でさらに詳細を チェック可能。 ホームでCVする工夫 魅力的にツアーを見せる お気に入り あとでツアーを見返せる便利な仕組み を提供。 キャンペーンアイコン お得なツアーであることを視覚的に伝 えるため、キャンペーン中のツアーに 専用アイコンを設置。 大きな画像で視覚で魅せる 旅行のイメージが広がるよう、大きめ 画像のデザインで魅力を訴求。 複数枚の画像 方面やホテルなど、ユーザーの興味を 引く写真を厳選して掲載。
 複数枚の写真を一覧で確認できる点も 特徴。
17. 行き先が決まっているユーザー 迷わず検索できる直感的なUIを設計。 行き先が決まっていないユーザー おすすめのツアーや旅行先が見つけや すいUIを採用 売上に直結する重要な項目をわかりやすく配置し、 ユーザーの目的に応じたスムーズな体験を提供。 希望条件で検索した結果一覧を表示。再検索や並び替えが簡単に行えるよう、 分かりやすいボタン配置と操作性を重視した設計です。 ナビゲーションバー よく使うメニューに最適化。ユーザー が目的の機能にすばやくアクセスでき るデザインに一新。 ファーストビューの一新 ツアー検索結果一覧
18. お気に入り ツアー詳細 希望条件で検索した結果一覧を表示。再検索や並び替えが簡単に行えるよう、 分かりやすいボタン配置と操作性を重視した設計です。 希望条件で検索した結果一覧を表示。再検索や並び替えが簡単に行えるよう、 分かりやすいボタン配置と操作性を重視した設計です。 共有・お気に入りのアイコン あとでツアーを見返せる便利な仕組みを 提供。 ツアーポイント ツアーの魅力的な情報を厳選して掲載。 ユーザーが選びやすいように工夫。 条件と旅行代金 ツアー代金が一目でわかるデザインを採 用。詳細な条件も確認可能。 予約・問い合わせボタン オンライン予約にスムーズに遷移できる ボタンを設置。
 また、まだ予約を決めていないユーザー 向けに、問い合わせ用のボタンも用意。 ツアー画像 ホテルの外観や室内、旅行先の写真な ど、最大100枚まで登録可能。
 写真から得られる情報はツアー選びに欠 かせません。 ツアー画像 ホテルの外観や室内、旅行先の写真な ど、最大100枚まで登録可能。
 写真から得られる情報はツアー選びに欠 かせません。 フォルダ名 自由に作成可能。 お気に入り 慣れ親しんだUI( Instagram）
19. UI Renewal 02 東横INN 企業名 東横INN 制作 自主制作 業界 宿泊業 ジャンル ビジネスホテル 制作期間 5日間(11h) 担当範囲 UIデザイン 引用元：© Toyoko Inn Co.,Ltd.
20. アンケート：人におすすめしたいビジネスホテルチェーン 1位が24.7%の東横INN 出典 マイナビニュース編集部「ビジネスホテルチェーンの人気ランキング! コスパよく安いホテル一覧」 『マイナビニュース』2023年12月11日公開 URL: https://news.mynavi.jp/article/20231211-2838554/ （アクセス日: 2024年12月26日） 19.1% ドーミーイン 9.7% アパホテル 19.1% 東横INN 24.7% ホテルルートイン 9.4% スーパーホテル 9.0% 東横INNを数字で見る リピーターが多い ご利用客数：2068万人 ホテル稼働率：73.9％ 宿泊者：90%以上が日本在住者 ※2019年4月〜2020年3月（1年間） 正確な数字は2018年発表のリピーター率7割。 それ以降の割合は公開されていないが、リピーターが多いと発表されている。 出典 日経ビジネス編集部「この 3つの要素が満たされている場合、成約率は7割に上る」 『日経ビジネス』 2023年6 月2日公開 URL: https://business.nikkei.com/atcl/report/16nv/052400010/060200002/ #:~:text=%E3%81%93%E3%81%AE3%E3%81%A4%E3%81%AE%E8%A6%81%E7%B4%A0%E3%81%8C, %E3%81%AF7%E5%89%B2%E3%81%AB%E4%B8%8A%E3%82%8B%E3%80%82 （アクセス日: 2024年12月26日） 東横イン「東横インについて」
 『東横イン採用情報』公開日不明
 URL: https://www.toyoko-inn.com/recruit/content/4/ （アクセス日: 2024年12月31日 ） リサーチ｜アンケート結果から見る東横INN Works
21. ペルソナ ペルソナ1 30代男性、月1回出張で利用、リピーター ポイントが貯まるし、清潔感もあり立地もいいの で、リピートしています。 会員カードは、持ち歩くようにしているが忘れるこ ともある。財布にあれこれ入れたくないので、本当 はアプリで一元管理したい。 東横INNの会員制度 リピーターが多い理由の１つ：東横INNクラブカード ・入会費1500円 ・特典が魅力的 ・ご宿泊当日に会員カードがないと、 　会員割引・ポイント付与ができない　 リサーチ｜ユーザーの思考の整理 Works アンケート結果などからペルソナを設定 カスタマージャーニー フェーズ 行動 詳細 気持ち Attention（認知・注意） 出張先の宿泊施設を検討する 3 出張予定が決まり、宿泊施設を探 ( 3 仕事の合間や移動中に、ビジネス ホテルを調べる 面倒、早く決めたい Interest（興味・関心） 宿泊施設の選定、情報収集する 3 いつも泊まるホテルをチェッ‚ 3 他のホテルの価格や設備も比較し て情報収集 考える、悩む Search（検索） 宿泊先の空き状況と料金を調べる 3 公式サイトや予約サイトで空室状 況を確 3 会社へ申請する 決めたい、焦る Action（行動） 宿泊先を予約する 3 空室状況を確認し、予約を確定 安心 Experience（体験） 宿泊する 3 チェックインし、宿Ý 3 仕事の合間にリラックス 快適、落ち着く Share（共有） 体験を共有する 3 同僚や友人に体験を話す 満足
22. アプリの評価 アプリの口コミ リサーチ｜東横INNの現状 Works 競合ホテルと比べてもアプリの評価が極端に低い
23. コンセプトと目的 Works ユーザーの目指す姿 企業の目的 直感的に操作できるアプリ アプリ内の会員カード 紙の会員カード 操作しづらいアプリ 売上増＝予約増 対策の1つ：リピート予約の増加
24. BEFORE BEFORE AFTER 操作しづらいアプリ 直感的に操作しやすいアプリへ 引用元：© Toyoko Inn Co.,Ltd.
25. 会員カード チェックインやポイント付与に使用。 予約メールや紙の会員カードを持ち歩く手 間を削減。アプリなら、会員カードを忘れ る心配もありません。 条件で検索 日程や宿泊エリアなど、希望条件に合わせ た検索が可能。 近隣検索 急な予定変更や近隣での宿泊希望時に便利 な機能。すばやく近場の宿泊施設を検索で きます。 ナビゲーションバー よく使うメニューを厳選し、ユーザーが迷 わず操作できるよう最適化。必要な機能だ けを揃えたシンプルで使いやすい構造。 ユーザー視点も企業視点も叶えるホーム 検索の遷移先 ホーム画面は、最も使用頻度の高いと予測する2つ、 会員カードと検索画面を設置。 すべての機能が直感的に操作できる設計。
 「パッと見」で必要な情報がわかり、選びやすさを重視しました。 条件で検索時の検索結果 近隣検索の遷移画面
26. 予約管理画面の改善案 現在の予約管理画面はWebサイトへ遷移す る設計。 以下の改善を提案P BR アプリ内での予約管理機能の実7 4 ユーザー体験がよりシンプルかつス マートにP 4 外部遷移の手間を削減P R データ取得の容易x 4 アプリ内でデータを一元管理するこ とで、ユーザー行動やニーズの把握 が容易にP 4 得られたデータをもとに、さらなる UI/UXの改善が可能。 現在の予約管理画面 ホーム画面と検索機能の最適化による利用促進 現行の予約管理画面は、必要な情報が揃っており、視認性にも優れている。 現状の設計をベースに、さらなる利便性向上の検討の余地はある。 ホーム画面のUI刷新と固定ナビゲーションバーの最適化により、操作性が大幅 に向上します。 これにより、新規利用者の増加だけでなく、リピーター率の向上も期待できま す。さらに、ユーザー体験の改善を通じて、アプリ評価の4点台達成を目指し ます。
27. New Website 03 EZO TRAIL 制作 実案件 企業名 EZO TRAIL 業界 アウトドアスポーツ/トレイルラン ジャンル イベントサイト 制作期間 30日間 担当範囲 ディレクション、デザイン、 サイト構築（WordPressオリジナルテーマ） 集客実績 270名以上の集客 サイトURL https://ezotrail.net/
29. 100サイトリサーチ 参考サイト 競合他社トレイルランサイトや、アウトドア、スポーツ系のサイト、ランニン グのポータルサイトなどを中心にリサーチ。 ユーザーが自己実現を叶えられると感じる、スタイリッシュでかっこいいサイ ト構成を目指して、リサーチ結果をデザインに反映。
30. 目的 トレイルラン大会の集客 流入経路 Facebook、X、ポータルサイト、スポーツ用品点など ターゲット トレイルランをしている30代〜40代男性 イメージ かっこいい サイト設計 ワイヤーフレーム制作前にヒアリングを通じて要件を整理し、効果的なサイト 構造を設計します。これにより、ユーザーにとって使いやすく、成果に繋がる サイトを構築します。 カスタマージャーニー フェーズ 行動 詳細 気持ち Attention（認知・注意） 新しいトレイルランイベントを知る　 Û SNSや友人の投稿、ポータルサイ トからイベント情報を目にす· Û 自然豊かなコースや独自のコンセ プトに興味を引かれる ワクワク、かっこいいと感じる Interest（興味・関心） 詳細情報を調べる Û 公式サイトで大会概要やルートを 確認す· Û エントリー条件や参加費を確認し て参加を検討する 興味津々、少し迷う Search（検索） イベント参加を計画する Û 大会日程や自分のスケジュールを 調整す· Û 移動手段や宿泊施設を検索す· Û 友人を誘うかなどを決める 考える、悩む Action（行動） 大会エントリーを完了する Û エントリープラットフォームで申 し込† Û 参加費を支払い、装備の準備を始 める 満足感、楽しみが増す Experience（体験） イベントに参加する Û コースの魅力や達成感を味わÍ Û 自己発見や次の挑戦に意欲が湧Ö Û 仲間と写真を撮ったり、他の参加 者との交流を楽しむ 充実感、達成感 Share（共有） 大会の思い出を共有する Û SNSに大会の写真や感想を投" Û 友人や同僚に大会の良さを話し、 次回の参加を誘Í Û ブログなどで体験を記録する 誇らしい、かっこいいと感じる ペルソナ 依頼者自身がトレイルランの経験者であり、知人の主催する大会にも参加した ことから、ターゲット層を深く理解。 その視点を活かし、以下のペルソナを設定しました。 ペルソナ1 30代男性、トレイルラン大会経験者、会社勤め トレイルランに参加することを「かっこいい」と感 じ、自己実現の一環として取り組む。 練習イベントや大会に定期的に参加し、トレイルラ ンを趣味として楽しんでいる。
31. メインビジュアル トレイルランのかっこよさを伝える画像を 選定。スライダー機能で複数の写真が入れ 替わる演出を採用。 CTA 「大会・イベント一覧」への遷移ボタンを 設置し、ユーザーの行動を促進。 イベント トレイルラン大会や関連イベントをメイン ビジュアル直下に配置。
 お客様自身が情報を登録できる仕組みを構 築しています。 お知らせ 大会やイベントの告知、選手紹介、宿泊先 案内などを発信するお知らせ一覧。 お客様が簡単に更新できるよう、使いやす い設計を採用しています。 GALLERY、ABOUT、CONTACT フッター上に配置した3つのボタンで、必 要な情報にスムーズにアクセス可能。 サイト構成のポイント
32. New Website 04 TKS CREATE 制作 実案件 企業名 TKS CREATE 業界 動画制作 ジャンル サービスサイト 制作期間 2ヶ月間 担当範囲 ディレクション、デザイン、 サイト構築（WordPressオリジナルテーマ） サイトURL https://tkscreate.com/
34. 100サイトリサーチ 参考サイト 動画制作会社を中心に、関連業種であるWeb制作会社もリサーチ。 「動画制作」「採用動画」などのキーワードでGoogle検索し、まとめサイト や上位表示されたサイトを調査。SEO対策を含め、競合サイトをリサーチ。 動画制作会社を中心に参考サイトを厳選。
 料金表示の工夫やよくある質問の内容、制作フローの見せ方まで幅広く参考に し、サイト全体のテキスト作成から構築まで一貫して対応しました。
35. プロジェクト設計 Webサイト制作前に、流入も含めてサイトの設計を行います。
36. サイトマップ作成 競合他社のコンテンツを徹底的に分析し、全てを洗い出しました。
 その上で、依頼者の目的達成に必要なコンテンツを厳選し、構成案として反映。無駄のない分かりやすいサイト設計を実現します。
37. ワイヤーフレーム キャッチコピーを含め、ユーザーに効果的に伝わる配置とテキストを慎重に選定。 視線の動線や情報の優先順位を考慮した設計で、直感的に理解できる構成を目指します。
38. メインビジュアル お客様が制作した動画を採用。 問い合わせを「無料相談」とすることで、 CVのハードルを下げた。 赤をアクセントカラーに使うことで、かっ こよさも 動画制作のポイント よくある悩みを解決できる3つのポイント を紹介 幅広い動画制作 どんな動画が制作できるかを動画で見せ る。 また動画を見せたいので、アクセントカ ラーを取り入れつつシンプルなデザイン。 検索条件で実績を絞り込む ユーザーが見たい動画にスムーズにたどり 着けるよう、「用途・目的」「業種」の２ 軸で絞り込みできるよう実装しました。 制作実績 画像を大きく配置し、視覚からも実績を見 ていただけるように、補足でタイトルなど の必要な情報のみを選定し、記載。 サイト構成のポイント トップページ 制作実績
39. 動画制作の料金プラン 3つのプランを提案し、ユーザーが自分に 最適な選択をしやすいようにしています。 各プランに含まれるサービス内容を明確に し、価格に対する価値が伝わるように工夫 しています。 プラン別サービスの特徴 指定された料金プランで提供される動画の 内容や特徴を、具体的な動画例とともに紹 介。ユーザーがイメージしやすく、納得し て選べるように構成しています。 動画制作の流れ アイコンを使って、ユーザーに分かりやす く制作フローを示し、各ステップでの重要 なポイントを簡潔に説明。お問い合わせボ タンを目立たせ、問い合わせへの導線もス ムーズにしています。 よくある質問 ユーザーが抱えがちな不安や疑問に対する Q&Aを作成。依頼者が簡単に更新できる仕 組みを整え、最新の情報を提供し続けられ るようにしています。 サイト構成のポイント 料金プラン 制作実績 よくある質問
40. 制作 テスト制作 業界 不動産 ジャンル 住宅・不動産マッチング 制作期間 6日間(34h) 担当範囲 キービジュアルデザイン UI Renewal 05Real Estate
41. キービジュアル3パターンをご提案 ABテストなどを行うようとして、キービジュアルを3パターンご提案しました ボタン ・会員登録ボタンを目立たせつつ、ログインボタンも視認性を確保 ・ユーザーの動線を考慮し、クリックしやすい配置に ロゴ ・背景にロゴを薄く設置し、ブランド感を演出 ・デザインのアクセントとして機能させる 背景 ・土地をイメージした装飾で奥行きを表現 ・画面に立体感を持たせ、空間を意識したデザインに スマホデザインを画像 ・スマホでの利用が多いことを意識し、ユーザーにとって馴染みやすく、 　親近感を持たせた インパクト ・パッと見で伝わるように、立体的な文字を使用 ・メッセージが一瞬で目に入る、強調されたデザイン 背景 ・グラデーションと光のあしらいを追加し、先進的な印象に ・モダンで洗練されたデザインに仕上げ、未来感を演出
42. Presentation Slides 06 Oh my teeth 制作 実案件 企業名 Oh my teeth 業界 ヘルスケア/歯科矯正 ジャンル ウェビナー資料 制作期間 3日間 担当範囲 スライドデザイン・構成 ページ数 42ページ Oh my teeth
44. LP Design 07 SBC 制作 自主制作 企業名 湘南美容クリニック 業界 美容医療業界 ジャンル 美容整形 制作期間 9日間(29h) 担当範囲 LPデザイン 引用元：© SBC Medical Group Holdings Inc.
45. 伝わりづらいデザイン BEFORE AFTER 一目で魅力伝わるLPデザイン 引用元：© SBC Medical Group Holdings Inc.
46. リサーチ 競合他社の強みや弱み、市場のトレンドをしっかりリサーチします。 その結果をもとに、他にはないオリジナリティやユーザーが求める情報を的確 に盛り込んだデザインと構成を提案します。 ワイヤーフレーム リサーチ結果をもとに、ユーザーの動線や重要な情報をスムーズに配置できる よう、シンプルでわかりやすい構成を提案します。
47. モニター価格 お得感を強調しつつ、高級感を損なわないデザ イン。 二重術のポイント 耐久性や安全性など、ユーザーが心配になる要 素をしっかり説明。安心して施術を選べるよう 配慮。　 CTAボタン 「無料」とキャンペーン期日で行動を後押し。 ファーストビュー画像 透明感のある背景と厳選した画像を使用し、二 重術の魅力が直感的に伝わるよう工夫。ユー ザーに安心感と期待感を与えるビジュアルを意 識。 ファーストビュー比較デザインの意図と特徴 2パターンのデザインを制作し、ユーザー反応 を比較。
 興味を引き出し、CV獲得を目指した要素を取 り入れつつ、違いを明確にして効果を判断しや すくしています。 3つのポイント 不安を解消し、施術の魅力をシンプルにアピー ル。視認性を高めるデザインを採用。 モニター価格 画像のすぐ下に配置し、即時性を重視。
 見やすさとお得感を両立したデザインを採用。 施術前と施術後の写真 具体的なイメージを伝えるため、CTAボタンの 直前に配置。 施術前と施術後の写真 実際の施術後の二重の仕上がりをわかりやすく 提示。具体的なビジュアルにより、ユーザーが 施術後をイメージしやすくする工夫。 魅力的な二重術LPのデザインポイント ABテストなどを行うようとして、ファーストビューは2パターン制作。
48. 魅力的な二重術LPの構成ポイント 選ばれる3つの理由 ユーザーが抱える問題を解決す る具体的な理由を提示します。
 3つの強みを簡潔に表現し、信 頼を築きます。 ポイントタイトル ジャンプ率を高くして、おすす めポイントをしっかり伝えま す。 問題定義 よくある不安や悩みをピック アップし、ユーザーが抱えがち な疑問に焦点を当てます。
 その後、医師の写真とともに 「お悩みに向き合います」とい うコメントを入れ、安心感を 与えます。 説明文 イラストや箇条書き、写真など を使い、メリハリをつけて視覚 的にわかりやすく解決策を示し ます。 症例数 具体的な数字を見せることで、 実績に基づいた信頼感と安心感 を伝えます。
 数字で表すことにより、権威性 を高め、説得力を増します。 医師からのコメント 医師の写真とコメントを掲載 し、寄り添う姿勢を強調しま す。
 これにより、安心感と信頼感を 与え、ユーザーが共感しやすく なります。
49. AD Banner 08 Glamping 目的 集客（グランピング予約） ターゲット グランピングで検索しているユーザー 制作 自主制作 企業名 グランマーレ淡路 業界 アウトドア産業 ジャンル グランピング 制作期間 4日間(7h) 担当範囲 広告バナーのデザイン glamping 引用元：© Booking Resort, Inc.
50. BEFORE AFTER ABテストできるよう、２パターン制作 温泉付き客室の魅力を伝えつつ、グラ ンピングやBBQの魅力的な画像も見せ ることで贅沢な体験を表現。 グランピングで楽しむBBQの魅力を前 面に押し出し、アウトドアでの贅沢な ひとときを感じさせるバナー。 情報がわかりづらい 情報が目に入りやすいバナーデザイン 引用元：© Booking Resort, Inc.
51. リサーチ 競合や他の広告バナー、同じ季節のバナーなど幅広くリサーチし、市場のトレンドを把握。 リサーチ結果をもとに、差別化されたデザインと構成を提案し、ユーザーが求める要素を反映 させます。 ワイヤーフレーム、他デザイン ワイヤーフレームで基本的な構成とユーザーの導線を設計します。
 その後、複数のデザイン案を作成し、さまざまなアプローチやスタイルを比較して最適なもの を選びます。
52. SHINSHIKI AZUSA 最後までご覧いただき、 ありがとうございます。