どうも、まさとらん（@0310lan）です！
今回は、数あるWebサービスやアプリの中から特にアイデアが優れているものだけを集めてご紹介しようと思います！
ユニークな発想に触れることで、さまざまな発見や学びがあるはずなのでこれからサービスを開発しようと考えているエンジニアの方にもオススメです。
仕事に役立つものから学習用途に活用できるものまで幅広く集めてみましたので、ご興味ある方はぜひ参考にしてみてください！
普通のカレンダーを軍事レーダーのようなUIに変えてしまったアプリ！
【 Calendar Scope 】
上記の画像をパッと見てカレンダーアプリと分かる人は少ないのではないでしょうか…。
この軍事レーダーみたいな画面は、カレンダーに登録したタスクを意味しているのが面白いポイントです。つまり、予定時間が近づいているタスクがレーダーに表示されており、どんどん迫ってきているのがよく分かります。
もちろんレーダーはアニメーションで表示されているので、実際の画面はより雰囲気を楽しむことができるでしょう。
とにかくUIを徹底的に作り込んでいるのが印象的ですが、カレンダー・タスク管理・リマインダーなどのツールは一通り搭載されている優秀なアプリです。
ちなみに、類似サービスとしてタスク管理を某アクションゲームのようなUIに変えてしまったWebサービスもあります。
落書きのように描いた図形をパスワードの代わりにできるサービス！
【 forghetti 】
自分の好きな図形を描くことで高度なパスワードを生成することが可能で、さまざまなWebサービスやアプリなどに活用することができます。
図形を描いてパスワードを生成するのは以下のように簡単です！
さらに、ローカルでリアルタイムに生成するという仕様上、サーバにパスワードが保存されないのでセキュリティも高いと言えるでしょう。
パスワードを登録してしまえば、さまざまなWebサービスへ図形を描画するだけでログインできるので便利です。また、PC・スマホ向けのアプリがそれぞれ提供されているので、デバイス問わずどこからでも利用することができます。
＜参考リンク＞
スパイ映画のように自動消滅するドキュメント共有サービス！
【 SafeNote 】
ブラウザ上からテキストを入力してボタンをクリックすると、自動的に高度な暗号化がおこなわれてシェア用のURLが生成されます。あとは、そのURLを友人・知人へ送るだけでテキストを共有できるというサービスです。
URLを受け取った側は【View Note】ボタンをクリックすることで内容を確認することができます。
面白いのは、中身を閲覧すると自動的にURLが無効になるので、もう一度ブラウザから開くことができなくなるという点です。
つまり、特定の相手に1度しか見ることができないドキュメントを共有することができるというわけです。
他にも、便利な機能として以下のようなものがあります。
- サーバのデータ保存期間の設定
- パスワードロック
- 通知機能
- ファイルアップロード
たとえば、相手側が閲覧した瞬間に通知を受け取ったり、ファイルもアップロードできるのでセキュリティの高いファイル共有サービスとしても利用可能です。
ちなみに、Chrome / Firefoxなどのブラウザ向けに拡張機能も公開されています。
＜参考リンク＞
2択のクイズゲームでWebデザインの基礎を学習できるサービス！
【 Can't Unsee 】
2択のクイズ形式でWebデザインのよくありがちな間違いを学ぶことができるちょっと変わったWebサービスです。
たとえば、以下の画像はどちらが最適でしょうか？
正解は左側です！
2つのボタンを同じタイプのスタイルにするよりも、より強調させたいボタンとそうではないボタンに分けたほうが分かりやすいですよね。
次の画像はどうでしょうか？
正解は右側です！
アイコンのカラー配色やスタイルはなるべく統一させたほうがよいですね。
こんな感じで膨大な数の2択クイズが用意されているので、楽しみながらWebデザインの基礎を勉強することができるわけです。
出題されるクイズは少しずつ難しくなっていくので、主に以下のポイントを重点的にチェックしておくとよいでしょう。
- フォントの種類、位置、サイズ
- 余白
- アイコンサイズ、スタイル
- カラー配色
- 画像の妥当性
- etc...
＜参考リンク＞
ショートカットキーだけを横断検索できるサービス！
【 UseTheKeyboard 】
Excel、Visual Studio Code、Slack、YouTube…など、人気のソフトウェアやWebサービスで利用可能なショートカットキーを検索できるのが特徴のサービスです。
たとえばExcelのショートカットキーだと次のように表示されます。
ボタンをクリックするだけで、Windows / Mac向けに切り替えることも可能です。
検索対象のソフトウェアやサービスは随時追加されていく予定になっており、GitHubのIssueから要望も伝えられるようになっています。
また、類似のサービスとしてGoogleアシスタントのチートシート的な検索サイトも公式に公開されているので便利です。
こんなこともできるのか！？ という発見もたくさんありますよ。
＜参考リンク＞
Evernoteを自分のブログとして公開できるサービス！
【 Postach 】
クラウドにあらゆる情報を蓄積できるEvernoteを活用し、新規ノートを作成するだけで自動的にブログとして公開できるというユニークなサービスがこちら。
使い方は非常に簡単で、ごく普通にEvernoteから新規ノートにブログ記事を書くだけです。
最後に「published」というタグを付与するのがポイントです。
すると、リアルタイムにPostachに同期されてブログ記事として公開されるのです。
Evernoteの記事を編集すると、リアルタイムに公開されている記事も更新されるので便利です。
また、ブログのテーマも豊富に用意されており、クリック1発で最適化されたデザインを適用できます。
このように、誰でも簡単に扱えるだけでなくEvernoteにすべての記事が保存されるというのもユニークな点ではないでしょうか。
ちなみにGoogleアナリティクスやSNSとの連携も可能になっています。
＜参考リンク＞
人気Webサービスが初期のころに公開したPR動画を集めるサービス！
【 Startup Demo Videos 】
Dropbox, Uber, LinkedIn, Docker, Snapchat…など、今では定番として多くの人に利用されているサービスが初期のころに一般公開したプロモーション用の動画だけを集めているちょっと変わったサイトです。
たとえば、2007年ごろにGoogleが公開したストリートビューの解説動画。
当時は、まだごく一部の地域だけしか利用できなかったストリートビューですが、このころからすでに360度の画像閲覧ができたりなど一通りの機能を揃えていることに驚きます。
これらの動画を見ていると、まだ誰にも知られていないころにどうやって魅力を伝えてユーザーに訴えかけているのか勉強にもなるので、これから新規サービスを公開する方にも最適ではないでしょうか。
＜参考リンク＞
プログラミング不要でWebVRアプリを開発できるサービス！
【 Patches 】
さまざまな機能を持ったブロックをつなげていくだけで、インタラクティブなWebVRアプリを開発できるサービス。
たとえば、360度画像の中にテキスト情報や動画などのコンテンツを埋め込んだり、仮想空間内にトリガーを作成したりしながら、ユーザーが3Dオブジェクトを操作できるようなVRアプリを簡単に開発できるようになります。
すべての作業をブラウザ上でおこなえるようになっており、数十種類におよぶパッチと呼ばれるブロックを画面に配置していくだけの簡単操作です。
アプリが完成したら誰でも利用できるように、そのままネット上に公開することも可能です。
3Dモデルも取り込めるようになっているので、オリジナルのアバターなどを活用したVRアプリの開発も面白いでしょう。
より詳しいWebVRアプリの開発手順については、次の記事でまとめて紹介しているのでぜひ参考にしてみてください！
＜参考リンク＞
ブロックチェーンの仕組みをWebで体験できるサービス！
【 Blockchain Demo 】
ビットコインやイーサリアムなどの仮想通貨、また最近ではDApps(分散型アプリケーション)によるゲームでも利用されるようになったブロックチェーンですが、その仕組みについてよく分からないという人も少なくないと思います。
そこで、このサービスを利用するとブロックチェーンがどのように形成されていくのかについて、その過程をインタラクティブに学べます。
ブロック内に格納されるインデックス、タイムスタンプ、ハッシュなどの意味や、マイニングがどのような作業をしているのか？ などについて詳しく教えてくれます。
Peer to Peerによるグローバルネットワークの形成についても疑似体験することが可能で、参加人数が増えていくと安全性・正確性・一貫性がどのように守られていくのかをブラウザ上でチェックすることができます。
＜参考リンク＞
URLだけでグラフ・チャートを描画できるサービス！
【 Charty 】
このサービスを利用すると、グラフ・チャートを作成するのにパワポやExcelなどを使ったりライブラリを駆使してプログラミングすることもなくなるでしょう。
必要なのはたった1つのURLだけです！
どういうことかと言うと、URLの文字列にグラフの種類やラベル、データなどをすべて盛り込むことでリアルタイムにグラフを生成することができるのです。
たとえば、次のURLを見てください。
https://charty.live/charts?chtype=doughnutpie&chl=Mon,Tue,Wed&chd=100,90,198
これをブラウザで開くと次のようになります！
URLの意味は以下のとおりです。
- chtype：グラフの種類
- chl：グラフのラベル
- chd：グラフのデータ
他にも、テーマカラーを変更したりタイトルを付与するなど、さまざまなオプションをURLに追加することができます。
このようにURLだけでリアルタイムにグラフを生成することができるので、Webサイトやサービスなどへも簡単に組み込むことができるというわけです。
＜参考リンク＞
README.mdファイルをWebページに変換できるツール！
【 Fiddly 】
マークダウンなどを使って作成したREADME.mdファイルを自動的にHTMLに変換してWebページとして公開することができるツールです。
GitHub PagesやNetlifyにデプロイすることも可能なので便利です。また、スタイルなどもオプションから自由に変更することができます。
標準でシンタックスハイライトや絵文字、ダークテーマなどをサポートしています。
オプションの設定から、ロゴアイコンやファビコンなどを簡単に変更できるようになっており、リンクされている画像については圧縮などの最適化も自動でおこなわれます。
手軽にランディングページなどを作成して公開できるので、Webアプリやライブラリの開発者にも最適ではないでしょうか。
＜参考リンク＞
動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
まとめ
今回は、優れたアイデアをベースにしたWebサービスやアプリを厳選してご紹介してみました。
最近のトレンドであるブロックチェーンやVRなどに関連したサービスは以前に比べて多くなりましたが、ショートカットキーの検索とかURLによるグラフ作成などちょっとしたことを便利にしてくれるサービスも増えた気がします。
これらの事例を参考にしながら、ぜひみなさんも独創性に溢れたサービス開発に挑戦してみてください！
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
