README.md
May 17, 2023 · View on GitHub
誰でもデザイン
サービス概要
誰でもデザインは、Web系デザイン初学者向けの情報検索・閲覧サービスです。
Web系デザインに関する情報をジャンルごとにWebサイト、書籍、動画の3つの媒体に分けて掲載しており
学びたい情報を自分に合った媒体で探すことができます。
ターゲットユーザー
デザイン初心者で何から始めたらいいかわからない人。
Web系のデザインの基本的な情報を手軽に収集、管理したい人。
Webデザイナーやエンジニアを目指しており、デザインの基礎やUI/UXについて勉強し始めた人。
主要機能一覧
・情報の閲覧、検索機能
・情報のレコメンド機能（2種類）
・トレンド情報の閲覧
・情報のお気に入り、リスト化機能
・カラー抽出機能
・UI・UXクイズ
・星レビュー機能
・高レビュー情報のピックアップ
・情報追加時の通知機能
・GoogleMapを用いたデザインギャラリー
情報の閲覧、検索機能
トップページに情報ジャンルの一覧を表示しており、
そこからジャンルごとの情報一覧ページに遷移することができます。
検索バーは情報のタイトルのあいまい検索を実装し、オートコンプリート化しています。
情報のレコメンド機能（2種類）
1つ目は3つの質問を用意し、ユーザーの答えに応じたおすすめの情報を表示する機能です。
もう一つはユーザーがお気に入り登録した情報から情報をピックアップしてトップページに表示するものです。
トレンド情報の閲覧
外部サービスから取得したトレンド情報を閲覧できます。
情報のお気に入り、リスト化機能
ログイン後に気に入った情報のお気に入り登録と、お気に入りした情報を
任意の名前をつけたリストに分類して管理することができるようになります。
カラー抽出機能
GoogleCloudVisionAPIの画像解析機能を利用して
画像に多く使われている色を5色抽出する機能です。
お気に入りの画像や写真と同じ雰囲気のサイトを作りたい時や
ロゴやOGPなどから色を抽出してそれに寄せた配色をサポートすることを想定しています。
UI・UXクイズ
UI・UXについてクイズ形式で学べる機能です。
星レビュー機能
5点満点で情報にレビューを付けることができます。
高レビュー情報のピックアップ
レビューの点数が高い情報をトップページに表示させてユーザーの目に触れやすくしています。
情報追加時の通知機能
新たな情報が追加された際にはユーザーに通知されるようになっています。
未読の通知があると通知ボタンの右上にオレンジのアイコンが表示され、
既読になると消えるように実装しています。
GoogleMapを用いたデザインギャラリー
サービスのアクセントの意味も込めて
GoogleMapを用いて見た目のインパクトのある機能を実装しました。
ピンをクリックすると対象の地域の優れたデザインのWebサイトへのリンクが表示されます。
その他の機能
・ユーザー登録、ログイン機能
・Twitter,Googleログイン機能
・パスワードリセット機能
・利用規約、プライバシーポリシー
・お問い合せ機能
・管理者画面
主な使用技術
バックエンド
Ruby(3.1.3)
Ruby on Rails(7.0.4)
フロントエンド
TailwindCSS
daisyUI
インフラ
PostgreSQL
Heroku
Docker
docker-compose
GitHub Actions
API(ログイン機能に使用)
Twitter API
Google API
Google Cloud Vision API
pixabay API
Google Map API
画面遷移図
ER図
[ER図]