PROPOSAL 経歴・得意分野・スキル・制作領域 デザイン提案書・改善提案・プレゼンテーション資料 02. Background & Strengths 06. ESTIMATION この仕事を始めた背景や向き合い方 工程や工数を整理した、分かりやすい見積書の作成 03. WORKS 07. CONTACT 制作実績・担当範囲・制作プロセス お問い合わせ・ご連絡先 スタイルガイド・デザイン仕様書・ヒアリングシートなど、プロジェクトを円滑に進め るためのドキュメント作成 next 01. PROFILE 04. DOCUMENTATION xt e Index t next n
01 es D gn Des i Works s i gn De Ty JAPAN ブランドサイトリニューアル 情報設計からデザイン・実装指示まで携わった案件の概要を紹介します。 プロジェクト概要 クライアントからは、ブランドの認知拡大を目的に、海外公式サイト https://www.ty.com/のようなサイト内にクイズを設置し、ポップで遊 び心のある世界観を表現したいという要望がありました。 一方で、約500種類の商品情報の整理や検索の改善、情報更新への対応 も必要でした。ブランドらしさを損なわず、ユーザーが直感的に商品 を探し、楽しみながら回遊できるサイトの実現が課題となりました。 担当範囲 情報設計・構成検討 / ワイヤーフレーム調整 Web・UIデザイン / PC・SPデザイン デザイン案の比較・修正対応 アニメーション仕様の検討 / 実装指示 https://www.tyjapan.jp/ 世界的なぬいぐるみブランド「Ty」の日本公式サイトリニューアル。 完成デザイン / PC・SP
旧サイトでは、ブランド紹介ページが最大4階層まで細分化され、トップページから直 接アクセスできないページもあり、目的の情報を探しにくい構成になっていました。 サイト構成の改善提案 ① ブランドの魅力を伝えるコンテンツの充実 Aboutページを主要コンテンツとして独立させ、新たにHistoryページを提案。ブラン ドの長い歴史やに込められた想いを伝え、商品だけでなくTyそのものへの興味や理解 を深められる構成にしました。 ② ユーザーの目的に合わせたページの整理 ニュースとイベント情報の性質や閲覧目的が異なる内容の為、それぞれカテゴリーを 分ける構成に。 FAQやショップリストも個別ページに分け、知りたい情報へ直接アクセスしやすい構成 を提案しました。 マップ サイト si サイト構成・情報設計の改善 i gn D e 01 es D Works s i gn De
サイトの目的やユーザーの閲覧行動を踏まえ、FVの見せ方が異なる2案 のワイヤーフレームを提案しました。 ブランドの認知拡大や商品への興味につながるよう、それぞれ異なるア プローチで構成を検討しました。 2つの構成案と設計意図 A案｜最新情報をすぐに届ける構成（採用） FVにニュースやイベントなどの最新情報を配置。ユーザーが必要な情報を すぐに確認でき、各コンテンツへスムーズに移動できる構成を提案。 B案｜ブランドの世界観から興味を引き出す構成 FVではTyの世界観をビジュアル中心に表現。まずブランドへの興味を持っ てもらい、スクロールを通じて商品やコンテンツに自然と触れられる構成を 提案しました。 ワイヤーフレーム si 情報設計・サイト構成の検討 i gn D e 01 es D Works s i gn De
クライアントから「サイト内に隠しクイズや隠しページなど、遊び 心のある仕掛けを取り入れたい」という要望がありました。 実装工数に制約がある中、大手ハンバーガーチェーンのサイトで使 用されていたクイズ演出を参考に、実現可能な範囲で楽しさを表現 できる方法を検討。サイト内に隠されたハートをクリックするとク イズが表示される仕組みを提案しました。 単にクイズを楽しむだけでなく、Tyのぬいぐるみや企業の歴史・ 特徴に関する問題を出題することで、遊びながらブランドへの理解 や興味を深めてもらうことを目指しました。 クイズモーダル si クイズコンテンツのUI・体験設計 i gn D e 01 es D Works s i gn De
トップページのFVは、クライアントから「ハートが弾けるようなアニ メーションにしたい」というご要望がありました。 そのイメージをもとに、ぬいぐるみのシリーズごとに大きさを変えて飛 び出す動きや、クリックするとランダムにぬいぐるみが表示される仕組 みを提案しました。 ぬいぐるみが横に流れるスライドアニメーションなども取り入れ、次の コンテンツにも興味を持ってもらえるよう工夫しました。 エンジニアとの相談・実装調整 アニメーションの指示では、イメージに近い参考サイトを共有し、動き の速さや表示方法についてエンジニアと相談しながら進めました。 エンジニアからも実現方法や改善案を聞き、制作時間や予算に合わせて 調整しました。 アニメーション指示書とホバー・クリック仕様書 si アニメーション設計・実装ディレクション i gn D e 01 es D Works s i gn De
n De s ig s i Works Des i gn Live2Dアニメーション制作会社HP CONTACT menu プロジェクト概要 Live2D・グラフィック制作を得意とする制作会社のコーポレートサイトリニューアル。 クライアントとの直接ヒアリングから入り、要件整理・情報設計・ワイヤーフレーム・Webデザインを担 しました。 ABOUT US 私たちについて クライアントはグラフィックやLive2Dの高い制作力を持つ一方、Webサイト制作については専門外だった 心を動かすモノ作りをしたい！ ため、Webとしての情報整理や導線設計、レスポンシブを考慮した見せ方を補完する役割を担当しまし その想いを胸に、ロゴや絵コンテ、 Live2Dアニメーションなど エンタメ全開で日々制作しています。 チームみんなでアイデアを出し合いながら、 遊び心を忘れずに、 見た人の心が動く表現を目指しています。 た。 対応範囲 ディレクション / クライアントヒアリング / 要件整 https://bugtool.nagoya/ 当。普段から連携しているコーダーとチームを組み、実装まで密にコミュニケーションを取りながら進行 制作期間 主な業務内容 デジタルデザイン制作業務全般 コンシューマー・ソーシャルゲーム 遊技機（パチンコ・スロット） グラフィックデザイン全般 約1ヶ月間 企業情報を見る ターゲット 目標 アミューズメント関係（遊技機系）企業 問い合わせ／商談化率の向上 ゲーム、アニメ制作会社 サービス理解 制作実 績の可視化による信頼感の向上 @Bugtool_hksk 理 / 情報設計 / ワイヤーフレーム / Webデザイン Instagram YouTube bugchan_bugtool @Bugtool_ch 準備中 BUGTOOL公式 オリジナルグッズ発売中! オリジナルグッズ チュートリアル 素材 ...etc THIS IS THE OFFICIAL ACCOUNT AND STORE OF BAGTOOL INC. WE PROVIDE YOU WITH COMPANY INFORMATION AND MORE! PLEASE FOLLOW US!
gn Des i Webサービス モバアド UIデザイン プロジェクト概要 2 クーポン SAミラクルスマイル新居浜 2026 会場で使える！！ ミラクルスマイル新居浜を 応援する企業を知って、 500円OFFクーポンをGET！ 応援する企業を知ると、応援がもっとおトクに クーポンの使い方を見る 対応範囲 情報設計・ユーザーフローの整理／UI・UXデザイン／画面改善提案／デザイン制作／HTML・CSS納品 動画視聴、クーポン管理、会員登録、FAQ、スタッフ受付画面など、計19画面を担当。 スポンサー動画をチェック 残り72枚 残り72枚 500円OFF対象 500円OFF対象 90秒でわかる特典案内 90秒でわかる特典案内 制作期間 約1週間 ミラージュフーズ 残り72枚 ミラージュフーズ 残り72枚 https://mobaad.com/c/miracle-smile スポーツ会場でスポンサー動画を視聴すると、会場で利用できるクーポンを取得できるWebサービス「モ バアド」のUI制作を担当しました。 スポンサー企業の認知拡大とファンとの接点づくりを目的としたサービスで、試合のハーフタイムなど、 限られた時間でも直感的に操作できるUIが求められました。 gn Des i De Works Des i gn
AI・競合リサーチ 03 UI改善・提案 04 Figmaでの調整 クライアントがAIで制作した AIとの壁打ちや類似サービス 情報の優先順位や画面遷移、 改善案をFigmaに反映。 既存UIを確認。画面構成や の調査を通じて、改善の方向 ボタンの文言などを見直し、 レイアウトや余白、文字サイ 操作導線の課題を洗い出し。 性を検討。 改善案を作成。 ズなどを手作業で細かく調 整。 による効率化と品質の両立 AI活用 て改善案の検討や制作を効率化しながら、UIの設計・判断・デザイン調整は自ら担当。 UI改善からデザイン、HTML/CSS実装まで、約1週間で一貫して対応しました。 AIを活用し 05 HTML/CSS実装 完成したデザインをもとに 静的コーディングを行い、 データを納品。 i gn D e Works 03 es D Des i g n s i gn De
omy
katarinadahlin
livdayseo
tonyrice
carmenintech
axbom
honnibal
addyosmani
palkan
rkendrick25
lara
codingconduct
![Contact 長くお付き合いできる 制作パートナーを目指しています。 ご質問、ご相談などいつでもお気軽にお問い合わせください。 中田美穂 [email protected]](https://files.speakerdeck.com/presentations/bd55fe3a33274f638d1d3e0a8b8255b7/slide_20.jpg){kind=link}