Miyakawa Asami· Let's talk
← 制作物一覧へ戻る Work Detail

  • 制作形態
  • 担当範囲
  • 使用ツール
  • 制作時間

DesignHub

Introduction

DesignHubについて

本アプリは、学生が制作課題に取り組む際に感じている「素材探しにかかる時間」や「作業の非効率さ」を解消することを目的とした制作支援アプリです。 画像やアイコンなどの制作素材を一括で検索できるほか、利用条件が明確で安全に使える素材のみを扱うことで、安心して制作に集中できる環境を提供します。 また、素材の保存や再利用をしやすくすることで、探す時間を減らし、限られた制作時間の中でも作品の完成度を効率的に高めることを目指しています。

ペルソナ 1

ペルソナ：木村ひかるさん

木村 ひかる（20歳・男性・Webデザイン系専攻）

さいたまIT・WEB専門学校 1年／実家暮らし／飲食店バイト週3／ノートPC（Windows）・スマホ（Android）

  • 授業はちゃんと聞くが、課題はできるだけ早く済ませたい
  • 素材探しはGoogle検索で済ませる
  • グループ作業は苦手ではないが、素材共有や方向性決めが面倒

ペルソナ 1 ― ニーズ／不満点

ニーズ

  • 探すよりサッと出てくる素材が欲しい
  • グループのメンバーと素材を統一したい
  • ライセンス説明が面倒だから安心素材から自動で選びたい

不満点

  • ネット検索すると素材が多すぎて選べない
  • 「どこのサイトの画像？」と聞かれるのが面倒
  • 提出前に「形式これであってる？」と毎回不安

ペルソナ 1 ― 潜在的欲求／解決策

潜在的欲求

  • 時間が少なくても「それっぽい仕上がり」にしたい
  • ちゃんと作ったと思われたい
  • グループ制作をもっとスムーズにしたい

解決策

  • 必要素材を1画面で検索→ダウンロード→共有可能
  • 「授業・課題用」の安全な素材を自動推薦
  • テンプレ・提出形式・命名ルールまでまとめてサポート

ペルソナ 2

ペルソナ：天野ほのかさん

天野 ほのか（19歳・女性・UI・Webデザイン志望）

さいたまIT・WEB専門学校 2年／ひとり暮らし／雑貨店バイト週2／Figma・Canva・CodePen・Coolors

  • 作品の雰囲気や統一感を大事にし、「見せ方」にこだわるタイプ
  • 素材やテンプレをよく使うが、他の人と被るのは避けたい
  • アイデア段階で悩みやすく、企画に時間がかかる

ペルソナ 2 ― ニーズ／不満点

ニーズ

  • テーマに合う素材をセットでまとめて探したい
  • デザイン全体の雰囲気を統一したい
  • 企画段階で参考となるデザイン例を見たい

不満点

  • 良い素材を探すと時間が溶ける
  • サイトによってライセンス表記が違い、確認が面倒
  • 用途ごとに探し分けないといけない

ペルソナ 2 ― 潜在的欲求／解決策

潜在的欲求

  • 自分の作品が他と差別化できる仕上がりにしたい
  • テーマに合わせてプロみたいな雰囲気を作りたい
  • 時間を短縮できれば、もっとデザインに時間を使いたい

解決策

  • テーマ入力→色・アイコン・背景・フォントがセットで推薦
  • ライセンス情報付きで安心利用
  • 再利用・共有できるマイ素材ライブラリ付き

ムードボード

ムードボード：スマホ画面3枚
ワークスペース構成イメージ
参考アプリのストア画面

ブランドパーソナリティ

  • 使いやすい
  • 信頼できる
  • 整っている
  • シンプル
  • 効率的
  • 安心できる
  • クリエイティブ
  • わかりやすい
  • 直感的
  • 近づきやすい
  • スマート
  • モダン
  • 楽しい
  • フレンドリー
  • 落ち着いた
  • カジュアル

ブランドポジション

複数機能をまとめて使える

プロ・一般向け、用途が広い

Canva・Adobe Express・Figma

DesignHub

Google・Unsplash・Craft

学校配布テンプレ集
PowerPoint標準テンプレ
授業資料配布サイト

学生・授業・制作課題に特化

1機能特化

Logo mark

DesignHub ロゴマーク

狩野の品質モデル ― 当たり前品質

当たり前品質

  • 素材検索機能（画像・アイコン・テンプレートなど）
  • カテゴリ／タグによる絞り込み
  • 無料・利用可否（ライセンス）情報の明示
  • 素材のプレビュー表示
  • 素材保存（お気に入り）
  • PC・スマホで問題なく使えるUI
  • 基本的な操作の分かりやすさ

狩野の品質モデル ― 一元的品質 / 無関心品質

一元的品質

  • 検索の速さ・精度
  • 素材の探しやすさ（並び替え・おすすめ順）
  • 素材ジャンルの豊富さ
  • ブックマーク・履歴管理のしやすさ
  • グループでの素材共有（リンク共有）
  • テンプレートの使いやすさ
  • UIの見やすさ・操作の少なさ

無関心品質

  • 派手なアニメーション演出
  • カスタマイズ性が高すぎるUI設定
  • SNS共有機能
  • 細かすぎる個人設定
  • デザイン装飾を重視した演出

狩野の品質モデル ― 魅力的品質 / 逆品質

魅力的品質

  • テーマ・雰囲気入力による素材セット提案
  • 課題内容に合わせたおすすめテンプレ提示
  • よく使う素材を学習したパーソナライズ表示
  • 提出用形式チェック（サイズ・拡張子など）
  • 制作フローを意識したナビゲーション
  • 学生向け制作事例・参考ギャラリー

逆品質

  • 強制ログイン・会員登録
  • 過剰な通知やポップアップ
  • 広告表示が多いUI
  • 機能が多すぎて迷う画面構成
  • 初回起動時の長すぎるチュートリアル

サイトマップ

app icon
→
login
→
HOME
→
探す
→
素材詳細
→
保存
→
マイページ

要素の洗い出し ― ログイン／HOME

ログイン画面

  • アプリロゴ表示・サービス名表示
  • ログインボタン／ゲスト利用ボタン
  • SNSログイン（Google／Apple等）
  • 利用規約・プライバシーポリシーリンク

HOME画面

  • 検索バー（最重要）
  • 素材カテゴリ／おすすめ・人気素材
  • 最近見た素材・保存一覧への導線

要素の洗い出し ― 素材検索／素材詳細

素材検索画面

  • 素材一覧・サムネイル・素材名
  • カテゴリ切り替え・タグ表示
  • 条件フィルタ・並び替え・件数表示

素材詳細画面

  • 素材プレビュー（拡大表示）
  • 利用条件・ライセンス表示
  • 保存（お気に入り）・共有ボタン
  • ダウンロード／コピー案内

要素の洗い出し ― お気に入り／マイページ

お気に入り画面

  • お気に入りにした素材一覧
  • 並び替え
  • 削除・管理機能

マイページ／設定

  • ユーザー情報・ログイン情報管理
  • 通知設定・表示設定
  • ヘルプ／ログアウト／各種規約

キーワード

Do

  • シンプル／整理されている／直感的
  • 分かりやすい／効率的／安心感がある／迷わない
  • 軽い・スムーズ／学生向け／作業に集中できる
  • 統一感がある／ミニマル／実用的／クリーン

Don't

  • ごちゃごちゃした／情報過多／装飾過多
  • 操作が複雑／分かりにくい／派手すぎる
  • プロ向けすぎる／広告感が強い／重たい動き
  • 学習コストが高い／迷わせる導線／世界観がブレる
  • 実用性のない演出／過剰なアニメーション

カラーマップ

SOFT（やわらかい）

WARM（暖かい）
クリア・さわやか
COOL（クールな）

HARD（かたい）

配色のポジションは「言語イメージスケール」（株式会社日本カラーデザイン研究所）の考え方を参考にした簡易図です。著作権の関係で原資料の図版は掲載せず、位置関係のみを示しています。

配色

Blue
White
Light Gray
Charcoal
Gray
1 / 22

※ 発表スライドの内容をそのまま掲載しています。

概要

制作目的

制作プロセス

機能検討 → 自分でプロトタイプ作成 → 課題を整理 → AIでUIをブラッシュアップ → 自分で確認・修正

まず必要な機能や画面遷移を整理し、自分でFigmaを使ってプロトタイプを作成しました。その後、作成したプロトタイプをもとにFigma Makeを活用し、余白や情報の優先順位、操作性などを改善しました。AIが生成したデザインをそのまま採用するのではなく、必要な機能や画面構成を指定し、生成結果を確認しながら調整しています。

  • 情報量を整理
  • カテゴリを拡充
  • 素材を見つけやすい構成へ変更
  • 利用規約を視覚的に確認できるよう改善
  • タップ可能な要素を分かりやすくした

主な機能

    工夫した点

    学んだこと

    初期プロトタイプ（Figma） ブラッシュアップ後プロトタイプ（Figma Make）