【駆け出し必見】Webサービスを作る時に役に立ったサイト

# この記事は何?

この記事では私が初めてWebサービスを作成した時に
役に立ったサイトを紹介する記事です

初めて自分でWebサービスを作る方や駆け出しエンジニアの方
にこの記事が役に立てれば嬉しいです😃



### ※ また何かいいサイトを見つけたら更新予定です

# 何を作ったの？(宣伝なので良かったら読んでください)

私が初めて作ったサービスはスポーツ選手向けの
デジタルスポーツノートを開発しました

これまでのスポーツ選手たちはノートブックに文字で記録をつけて
自分のプレーを振り返っていましたが
私の作ったスポーツノートでは
動画を使用して体の動きやプレーを詳細に記録できます😀

動画による分析は文字だけの記録では捉えられない
細かな動作や技術の改善点を明確に示し
選手の技術向上に大きく貢献する事ができます！

このデジタルツールにより選手たちは自分のプレーをより深く理解し
パフォーマンスの向上を図ることが可能です！

## 実際作ったもの
https://play-archive.com/

![main_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986281/489ed62a-5737-7526-9004-e6901f43f53b.png)


## 作った時の記事
https://zenn.dev/iccyan/articles/d76805dcb7c65c





# デザインで役に立ったサイト

## Mobbin
このサイトは、iOS、Android、Webなどの多様なプラットフォームに対応した
画面デザインを考える際に非常に役立ちました🙄

Mobbinは、現代的でトレンドを反映したデザインパターンを豊富に提供しており
デザイナーにとって大変便利なリソースです

特に、ユーザーインターフェースの多様な例を参照することができる点が素晴らしく
インスピレーションを得るのに最適なサイトです

https://mobbin.com/browse/ios/apps

## Screenlane
このサイトもMobbinと同じような多様なプラットフォームに対応した
画面デザインを考える際に非常に役立ちました🙄

便利なのは、画面の種類やUIパーツ
さらにはサービスのジャンルごとに絞り込み検索ができる点です

これにより、特定のデザインニーズやインスピレーションを探す際に時間を節約でき
より具体的なアイデアを得ることが可能です😎

https://screenlane.com/

## Pinterest

Pintersetもとても画面デザインを考える時に役に立ったサイトです！

このサイトには、さまざまなカテゴリーのデザインが豊富に揃っており
幅広い情報を提供してくれます

Pinterestは画面デザインに特化しているわけではありませんが
その多様性がむしろ魅力です

MobbinのようにUI/UXデザインに特化したサイトと比較すると、
Pinterestは異なるアプローチを提供します😐

それでも便利なサイトだと思います！

https://www.pinterest.jp/

## icons8

Icons8は、魅力的で多様なアイコンが揃っている素晴らしいサイトです

このサイトは、幅広いスタイルとカテゴリーにわたる高品質なアイコンを提供しており
デザイナーにとって非常に価値のあるリソースです😆

https://icons8.jp/

## Figma
Figmaは、デザイン制作において非常に便利なツールです

このプラットフォームは
他のサイトで見つけたデザインアイデアを実際に試作するのに最適な場所です

Figmaの強力な機能と直感的なインターフェースは
デザイナーがアイデアを現実に変える過程を大いに支援します

ぜひ使ってください！

https://www.figma.com/

#  設計で使えるサイト
## Draw.io

Draw.ioはデータベースの設計図を考える際に非常に便利なサービスです

このツールは、ER図（エンティティリレーションシップ図）を含む各種の図を
簡単に作成できるため、データベース設計において重宝します

他にもフローチャート作成やネットワーク図をUML図などを
作成できるので是非使ってください

https://app.diagrams.net/

# 使用したストレージ
## Google Cloud

動画や写真などのメディアファイルを保存するためにGoogle Cloudを使用しました

Google Cloudは高い信頼性とスケーラビリティを提供するクラウドストレージサービスで
大量のデータを安全に保管・アクセスできる環境を提供します

また、Google Cloudは強力なデータ分析と機械学習の機能を統合しており
保存したデータから価値ある洞察を得ることも可能です

https://cloud.google.com/


# デプロイする時に役に立ったサイト

## Render　

Renderは、特にインフラに不慣れな方にも強くおすすめするサイトです🤘

特に私はインフラがあまり好きではないので
(初心者の時にAWSに7500円請求されたトラウマがあるため)

このサービスの最大の魅力は、GitHubとのシームレスな連携により
インフラの知識がほとんどなくても簡単に
Webサービスをデプロイできることです

プロジェクトのコードをGitHubにプッシュするだけで
自動的にデプロイとホスティングが行われる仕組みは
開発の効率を大幅に向上させます

さらに！！！！！！！

### Renderでは無料でWebサービスサーバーやデータベースを利用することができます

これにより、コストを心配することなく
実験的なプロジェクトや練習用のアプリケーションの開発が可能になります😍

このようにこのサイトは私みたいにインフラが苦手な人でもおすすめです

https://render.com/

## Netfly
NetlifyもRenderと同様に
GitHubとの連携によって簡単にサイトを構築することができるサービスです

特に、静的サイトのデプロイメントに特化しており
GitHubリポジトリにプッシュするだけで自動的にサイトが公開されます

Netlifyの主な制限は、静的サイトのホスティングに限定されている点です
これは、Renderが提供するよりも多機能なサービスと比較すると
機能面で劣るかもしれません。

しかし、特定の用途においてはNetlifyが優れた選択肢となります

特に、ドメインの紐付けに関しては、Netlifyが大きな利点を持っています
Renderではドメインの紐付けに1日程度かかる場合がありますが
Netlifyではほとんど待つことなく即座にドメインを紐付けることが可能です

これはプロジェクトを迅速に公開したい場合に特に便利です🤩

https://www.netlify.com/


# サービス公開後に役に立ったサイト

## Googleアナリティクス

Googleアナリティクスはどれだけの人が見に来てくれるかなどのユーザー行動を
分析するための強力なツールです

Googleが提供するこの無料サービスを利用することで
ウェブサイトの所有者やマーケターは

訪問者がどのようにサイトを使用しているかどのページが最も人気があるか
ユーザーがどの地域からアクセスしているかなど
貴重なデータを得ることができます

ここではリアルタイムで分析できるので特におすすめです🤩

https://developers.google.com/analytics?hl=ja

## Google AdSence

Google AdSenceはWebサイトに広告を貼り付けて収益ができる
サービスです

このプログラムに登録し、審査を通過することで
ウェブサイトのオーナーは自サイトにGoogleの広告を掲載し
クリック数や表示数に応じて収益を得ることができます🤘


https://adsense.google.com/intl/ja_jp/start/

## KIYAC

KIYACは、弁護士が監修する法律文書ジェネレーターです

いくつかの質問に答えるだけでプライバシーポリシーや利用規約など
さまざまな法律文書を自動で生成できます

自分で書かずに済むのとすぐに作成できるのでとてもおすすめです😎

Google AdSenceの審査にもプライバシーポリシーや利用規約を作ることが
必要なのでとてもおすすめです！

https://kiyac.app/



# 他にもいいサイトがあればこの記事に追加して更新します

以上が、私がWebサービスを作る際に役立ったサイトの紹介です👀

これらのツールは、デザイン、設計、開発、デプロイメントの
各段階で大きな助けとなりました

他にもこのサイトが役に立ちます！とかこれ便利です！

っていうサイトがあれば教えてもらえると嬉しいです😍

そしてこの記事が皆さんのお役に立てたら嬉しい限りです😤

良ければフォローしていただけると嬉しいです☺️