paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

思わず使いたくなる!手軽にWeb開発を楽しめる便利なサービスを厳選してみた!

f:id:paiza:20211201131113j:plain

どうも、まさとらん(@0310lan)です!

今回は、さまざまなWeb開発に活用できる便利なサービスを厳選してご紹介します!

本記事で取り上げているWebサービスはすべて無料で使えるものばかりで、さらにほとんどの場合は面倒なユーザー登録も不要なうえ完全なカスタマイズ性も備えています。

自分専用のWebサイト、ポートフォリオ、データベース、API…など、さまざまなWeb制作を楽しめるものを厳選しているのでご興味ある方はぜひ参考にしてみてください!

■独自のブランドガイドを手軽に構築できるサービス!

Baseline

f:id:paiza:20211201131215j:plain

企業だけでなく、個人サイトでもブランディングを意識するケースは少なくありません。このサービスでは、独自のロゴ・テーマカラー・フォント・タイポグラフィなどをまとめた「ブランドガイド」を簡単に作成できます。


使い方は非常に簡単で、いくつかの質問に答えたりロゴをアップロードするだけで以下のようなページが作れるのです!

f:id:paiza:20211201131232g:plain

ロゴのバリエーションを自動生成したり、テーマカラーやフォントの詳細などをキレイにまとめてくれます。また、ロゴの使用に関しての注意事項も勝手に作ってくれるので便利です。

フォントやカラーに関しては、CSSのコードスニペットも生成されるのでWebサイトへ適用するのも簡単です。


また、面白いことに作成した「ブランドガイド」をベースにして、専用のWebエディタからSNSへの投稿用イラストを作成できる機能が提供されています。

f:id:paiza:20211201131320j:plain

自分のブランドガイドに沿ったロゴやフォントを利用して文章を追加したり、豊富なイラストや画像を使うことが可能です。


ちなみにですが、独自のテーマカラーを決める際に「色」の組み合わせを迷ってしまうことがよくあります。そんな時は以下のサイトがオススメです!

Colorbase

f:id:paiza:20211201131349j:plain

カラーコードで検索すると、その「色」に関する詳細な情報を一覧表示で確認できます。

例えば、検索した色に最適な「文字色」「背景色」であったり、黒や白を混ぜた場合の変化、明るさ・類似色・補色…など、色について知りたい情報はほぼすべて網羅されているので重宝します。

独自のブランドを作ってみたい方は、ぜひこれらのサービスを活用してみてください。


<参考リンク>

■セルフホスト可能なAirtable風データベース!

NocoDB

f:id:paiza:20211201131457j:plain

スプレッドシートのような簡易データベースとして使える「Airtable」のような機能を、オープンソースとして誰でも無料で使えるように提供しているのが「NocoDB」です。

自分が用意したサーバー上でホスティングできるため、「Airtable」のようなサービス側による制限や提供の終了などといった心配がありません。作成するプロジェクトやテーブルの数に制限もないのが特徴です。


Dockerなどでインストールできますが、公式サイトからHerokuを利用して無料で使い始めることもできます(Herokuボタンから1クリックで展開できます)。

f:id:paiza:20211201131519j:plain

基本的な使い方やUIの見た目などは「Airtable」とよく似ているので、使い慣れた人であれば迷うことなくデータベースを作成できます。デフォルトで「日本語」が選択できるのもうれしいポイントです。

利用できる入力タイプもテキスト・数字・チェックボックス・タグ・URL…など数十種類に対応しており、関数や並び替・フィルターなどの機能も標準で搭載されています。


また、アプリストアも提供されているので「Slack」や「Discord」などのWebサービスと連携ができるのも魅力的です。

f:id:paiza:20211201131539j:plain

もちろんAPIも提供されており、REST APIかGraphQLを選択して自作のWebアプリやサービスと組み合わせることができます。Webhookによるオートメーションも可能で、データベースの操作に応じて自動的にSlackへ通知を送信するといったことも簡単に実現できるわけです。

まずは誰でも扱いやすいHerokuを利用して実際に使用感を確かめてみるのがいいでしょう。


<参考リンク>

■完全制御可能な独自ポートフォリオを作成!

Glitch In Bio

f:id:paiza:20211201131628j:plain

JavaScriptやNode.jsを使った統合開発環境であるクラウドIDE「Glitch」が、独自のポートフォリオサイトを手軽に作成できるテンプレートを提供したのが「Glitch In Bio」です。

そもそも「Glitch」はコードエディタなので、ゼロから自分でプログラミングすることでどんなWebサイトやアプリでも開発できます。しかし、「Glitch In Bio」を利用すればほとんどコードをいじることなくポートフォリオサイトを誰でも構築できるのが特徴です。


特設サイトのボタンを1クリックするだけで、ポートフォリオを作成するための開発環境がすべて整った状態でエディタが表示されます(試すだけならログインも不要です)。

f:id:paiza:20211201131644j:plain

ユーザーがやることは「settings.json」のファイルを編集するだけです。

編集と言っても、テキストを変えたり、SNSのリンクを変えたり、画像を変更したりといった簡単なことだけです。エディタ上部の「Show」メニューからネット上に公開されたライブバージョンにすぐアクセス可能なのでシェアも簡単です。

もちろんHTML / CSSなどを好みに応じてカスタマイズできるうえ、JavaScriptを書いて新しい機能を追加することもできます。

ちなみに、エディタ下部のオプションメニューから独自ドメインも無料で設定可能で、今回のような静的サイトであればサーバーは休止することなくホスティングを維持してくれます。

公式サイトにはいくつかサンプル例も紹介されているのでぜひチェックしてみてください。


また、「Glitch」には独自のブログを簡単に構築できるテンプレートも提供されており、マークダウンで素早く記事を書いて公開できます。詳細は以下の記事でも解説しているので合わせて参考にしてみてください。

paiza.hatenablog.com


<参考リンク>

■無数のロゴ・アイコン・アバター画像を無料で作る!

IconKitchen

f:id:paiza:20211201131812j:plain

スマホアプリ、デスクトップアプリ、Webアプリ、PWA…など、さまざまな種類のアイコンをまとめて作成してダウンロードできるのが「IconKitchen」の特徴です。

豊富なクリップアートを使ってカラーやエフェクトなどで加工したり、テキストベースのアイコンや手持ちの画像をアップロードして利用することができます。プレビューを見ながら直感的に編集できるので重宝します。

ダウンロードボタンをクリックするだけで、目的の種類別にフォルダ分けされた画像を丸ごと一気にダウンロードできる仕組みです。

DesignEvo

f:id:paiza:20211201132004j:plain

ビジネス・テクノロジー・飲食・医療・スポーツ・旅行…など、およそ1万を超えるロゴのテンプレートが搭載されており、どれも自分で好きなようにカスタマイズできるエディタを標準搭載したロゴメーカーです。

海外サービスとしては珍しく、日本語のフォントも搭載されているのでバリエーション豊かなロゴを作成するのに便利です。とにかく膨大なロゴのサンプル例を参考にできるのは大きな魅力です。

低解像度のロゴ画像であれば無料でダウンロードできますが、「DesignEvo」のリンクを付与する必要があるので注意しましょう(別途、ロゴの著作権を購入することも可能)。

react-nice-avatar

f:id:paiza:20211201131940j:plain

WebサイトやSNSなどに活用できるアバター画像を手軽に作成して無料ダウンロードできるのが「react-nice-avatar」です。

頭・髪・目・鼻・口…などのパーツごとにボタンが用意されており、クリックするたびにさまざまなバリエーションを組み合わせることができます。エディタ下部にはランダム生成されたアバター画像もあるので、1クリックで手軽にダウンロードもできます。

また、JavaScriptからも利用できるように設計されており、プログラムに組み込んで自動生成するような使い方も可能なので便利でしょう。


<参考リンク>

■完全無料の独自ステータスページを構築する!

Statsig Status

f:id:paiza:20211201132135j:plain

自分がチェックしておきたいWebサイトのURLを登録するだけで、サービスが停止していたりエラーを起こしていないかをモニタリングできるステータスページを作成できます。

このツールはGitHubで公開されており、リポジトリをフォークするだけですぐに使い始めることができます。GitHub Pagesでそのまま公開できるのでサーバーを用意する必要もなく、テキストファイルを少しいじるだけなので専門的な知識がなくても使えるのが特徴です。


リポジトリをフォークしたら、「urls.cfg」というファイルに対象のURLを追記するだけですぐにステータスページへ反映されるので簡単です。

f:id:paiza:20211201132152j:plain

対象のURLは、GitHubアクションを経由して1時間ごとにサイトの状態を確認して更新される仕組みになっています。そのため、自分でymlファイルを編集して更新頻度を変更したり、実行するシェルスクリプトをカスタマイズすることも可能です。

余裕があればHTML / CSSを自分好みにカスタマイズしてみたり、独自のWebサイトやサービスに組み込んでもいいでしょう。


<参考リンク>

■膨大な量の開発系ミニツールを好きなだけ使う!

Web Developer Tools

f:id:paiza:20211201132238j:plain

Web開発に便利なちょっとしたミニツールを豊富にまとめているサイトです。

すべてそのまま無料で使うことができるうえ、面倒なログインなども一切不要です。ツールが膨大に搭載されているのですが、ほんの一例を紹介すると以下のようになります。

  • エンコード&デコード、エスケープ、ミニファイ
  • 多彩なファイル形式、画像に対応した相互変換
  • 暗号化、ハッシュ生成、パスワード生成
  • テキスト操作全般、変換、検索、抽出
  • ランダムなJSON、CSV、バイナリ、IPなどの生成
  • 日時計算、ビット計算、素数生成、バイナリ操作
  • 単位変換、IP探索

このサイトを1つブックマークしておけば、「何かいいツールないかな…」といちいち検索することも少なくなるでしょう。


ちなみにこのサイトを提供しているのは、クロスブラウザテストをオンラインで実現する「Browserling」というサービスです。

対象のURLを入力して「OS」と「ブラウザ」の種類を選択します。

f:id:paiza:20211201132335j:plain


すると、実際に動作するライブバージョンのクロスブラウザテストが可能になります。

f:id:paiza:20211201132348j:plain

ブラウザの種類だけでなく異なるバージョンも選択可能で、ちょっとした動作確認にも重宝します。無料でも3分間は自由に使える仕様になっており、何度でも試すことができます。


<参考リンク>

■即座にモックAPIを作成して公開できるサービス!

Mockachino

f:id:paiza:20211201132446j:plain

自分でカスタマイズできるモック用APIをとにかく簡単に構築して公開できるサービスです。

面倒な初期設定やユーザー登録などは不要で、サイトにアクセスしたらそのまますぐに編集できるように設計されているのが特徴です。


レスポンス用のJSONを記述して「Create」ボタンをクリックするだけで、即座にAPIが公開されるのでそのまますぐにプログラミングを開始できます。

f:id:paiza:20211201132504j:plain

自分専用のスペースも提供されており、URLをメモしておけばいつでも編集が可能です。もちろん複数人でスペースを共有するような使い方もできます。


また、簡易的なAPIドキュメントも自動生成してくれるのですが、以下のサービスを使うと本格的な技術ドキュメントを手軽に作成できます。

The Docs

f:id:paiza:20211201132529j:plain

APIドキュメントとして使うのはもちろん、プログラミングの学習コンテンツやナレッジベースとしても活用できます。

複数人での共同作業も可能で、全文検索やバージョン管理などの機能も充実しています。


<参考リンク>

■ユニークな背景パターンを手軽に作成する!

Starback.js

f:id:paiza:20211201132630j:plain

専用のJavaScriptライブラリを読み込んで簡単なコードを描くだけで、Webサイトの背景に流れ星が降ってくるアニメーションを実装できます。

星のカラー・移動量・速度などのアニメーションをJavaScriptで簡単に調整できるようになっており、星の高さ・広がり・重なり具合といった高度な設定も値を指定するだけで実現できるので便利です。


また、背景に特殊な柄を実装したい場合は以下のサイトが便利です。

CSS backgrounds


f:id:paiza:20211201132700j:plain

他ではあまり見ない特殊な柄が100種類以上も提供されており、1クリックでCSSのコードスニペットをコピーできる仕組みになっています。

気になったパターンをクリックすると、実際にこのサイトの背景が指定したパターンに変化するので分かりやすいです。また、カラーや透明度なども手軽に調整できるように工夫されており、自分でコピーしたコードをカスタマイズできるのもありがたいです。


<参考リンク>

■URLだけでチャートやグラフを作成するサービス!

Image-Charts

f:id:paiza:20211201132802j:plain

折れ線グラフ・円グラフ・バブルチャートなど、一般的なグラフやチャートをURLにクエリパラメータを追記するだけでWebページに表示できるのが「Image-Charts」の大きな特徴です。

例えば、以下のURLをクリックしてみてください。

https://image-charts.com/chart?cht=p&chs=400x400&chd=t:60,30,10

円グラフが表示されたと思います。

これは専用のエンドポイントに、以下のようなクエリパラメータを追記したことで円グラフを自動生成できたわけです。

  • cht:チャートのタイプ
  • chs:チャートの大きさ(サイズ)
  • chd:チャートのデータ


追記できるパラメータはたくさんあるのですが、公式エディタも提供されているのでGUIから直感的に編集できて便利です。

f:id:paiza:20211201132846j:plain

さらにJavaScriptからも制御できる仕組みがあり、詳しい使い方やプログラミング手法を以下の記事でも解説しているので合わせて参考にしてみてください!

paiza.hatenablog.com


<参考リンク>

■動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、Go、Kotlin、JavaScript、HTML/CSS、SQLなど、プログラミング初心者でも動画で学べる体験・入門レッスンを公開しています。

Python体験編」「C#体験編」「ITエンジニアの就活準備編」といった人気講座は完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、「STEINS;GATE(シュタインズ・ゲート)」とpaizaがコラボしたプログラミングゲーム「電脳言語のオルダーソンループ」をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!

■まとめ

今回はWeb開発に便利な無料のサービスを厳選してご紹介してみました。

いずれのサービスも手軽に使えるように工夫されているのが特徴なので、非エンジニアの方でもユニークなWeb開発を楽しめるはずです。

他にもまだまだ紹介したいサービスはいくつかあって、例えばNetlifyが提供する「Netlify Drop」はユーザー登録不要で静的ファイルをホスティングして公開してくれます。

Listen2It」はブログの記事を音声に変換して埋め込み用の再生プレイヤーを生成してくれます。

markmap」はマークダウン記法で書いたドキュメントをマインドマップに自動変換してHTMLやSVGとしてダウンロードできます。

これらのサービスも組み合わせながら、ぜひみなさんもユニークなWeb開発を楽しんでみてください!




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.