毎月1,000ドルを稼ぐBootstrapダッシュボードの構造

私たちCreativeTimは、私たちの製品を使用しているすべてのWeb開発者に優れたツールを提供したいと常に考えてきました。私たちがどのようにビジネスを構築してきたか、そして私たちの原動力は何かについてもっと知りたい場合は、この記事をチェックしてください:サイドプロジェクトを17,000ドルの月間ビジネスに成長させる。

私たちはインターネット上でより良いウェブサイトやウェブアプリを見たいと思っています。そこで、最も人気のあるダッシュボードの1つであるLight BootstrapDashboardのベースを形成する「秘密の要素」のいくつかを共有することにしました。もちろん、私たちはあなたとそれらを共有するつもりなので、それらはもう秘密ではありません。?

このケーススタディでは、ダッシュボードを作成するためのアイデア、インスピレーションを得た方法、すべてを実装した方法、スタンフォードの内部ツール内での使用方法、開発とサポートの資金調達方法について説明します。記事の概要は次のとおりです。

  1. 基本構造とコア機能
  2. デザインの作成方法
  3. オープンソースの上に構築され、巨人の肩の上に立つ必要がある理由
  4. 打ち上げ、上昇、輝き
  5. サポートに資金を提供し、開発者の要求を解決する方法
  6. 今後の開発計画

このチュートリアルが次のようにならないことを期待して、できるだけ多くの情報を提供しようと思います。

1.基本構造とコア機能

ダッシュボードの作成の背後にあるプロセスは、多くのことを学んだ後に受けなければならないテストと考える必要があります。もちろん、製品の開発中に多くのことを学びます。しかし、最初に、「それ」とは何か、そしてそれがどのように「使用される」かについての強い知識を持っている必要があります。コードの最初の行を書く前に、いくつかの調査を行い、計画を立て、やることリストとスケッチを作成し、最終的に何が欲しいかを視覚化するようにしてください。

車輪の再発明をしているわけではないので、インスピレーションを得るために優れた製品を作成している企業(Heroku、Slack、Mailchimp、Stripeなど)を見回す必要があります。また、あなたの競争を見てください。あなたはたくさんの情報を得るでしょう。そして、あなたが始めるとき、あなたがあなたの宿題をしたので、製品を開発することはより簡単になるでしょう。カットを開始する前に、斧を研ぐ必要があります。

「木を切り倒すのに8時間あれば、斧を研ぐのに6時間かかります。」- アブラハムリンカーン

私たちは宿題をしました。インスピレーションを得ることができる例として、100を超える無料のダッシュボードの膨大なリストがあります。それらのいくつかを次に示します。

ダッシュボードの膨大なリストがあり、多くの色、アニメーション、美しいアイコン、小さなグラフ、大きなグラフ、静的または固定のサイドバー、そして何百もの異なる機能があります。あなたの聴衆にとってどれが最良の選択肢であるかをどうやって知るのですか?

ダッシュボード内で人々が何を望んでいるのかわからなかったため、これらのダッシュボードに含まれるすべての機能を書き留め、最も一般的なものだけを使用することにしました。コア機能は、ダッシュボードが必要な場合の約95%を解決することに気づきました。残りの5%は、非常に具体的な問題を解決します。

基本的な要素は、ボタン、アイコン、タイポグラフィ、サイドバー、メインパネル、ナビゲーションバー、およびドロップダウンです。ほとんどのダッシュボードのコア機能は次のとおりです。

  1. テーブル
  2. 通知
  3. タスクリスト
  4. カード(さまざまな種類のフォームと情報の視覚化を容易にするため)
  5. チャート(ドーナツチャート、折れ線グラフ、棒グラフ)
  6. グーグルマップ

わずかな視覚的調整で、コア要素を使用するだけで、世界中のあらゆる企業のダッシュボードの95%を再現できます。残りの5%は、会社とそれが解決する問題によって常に異なります。ここで見つけることができます:

  1. かんばんシステムカード
  2. ドラッグアンドドロップ機能
  3. タイムラインコンポーネント
  4. WYSIWYGエディター
  5. 8レベルナビゲーションサイドバーメニュー
  6. マルチファイルアップローダー+ドラッグアンドドロップファイルアップローダー
  7. フォームX-編集可能
  8. モリスチャート、グーグルチャート、フロットチャート、amChart、フローチャートおよび他の多くのタイプのチャート
  9. そしてリストは200以上の機能を続けることができます

問題は、これらの新しいプラグインのそれぞれが、CSS、JavaScriptまたはjQueryライブラリ、およびHTMLを追加することです。フレームワークやモジュラートリックを使用せずにプレーンHTMLで製品を構築したため、すべてのCSS / JavaScriptが1つのファイルにまとめられます。

誤解しないでください、私は機能が良くなかったと言っているのではありません。これらは素晴らしい人々によって開発された素晴らしいプラグインです。しかし、それは私たちがシンプルなダッシュボードに望んでいたものではありませんでした。

そこで、できるだけ軽量にすることにしました(名前を覚えていますか?)。ライトブートストラップダッシュボード。そして、コアを95%解決していた機能のみを実装することにしました。

2.デザインがどのように作成されたか

製品が持つ要素の計画を立てた後、優れたデザインを考えなければなりませんでした。人々がコンテンツ管理システム内にこのダッシュボードを持ちたくなるようなユーザーフレンドリーなデザイン。私たちはすでに有名なBootstrapGet Shit DoneKitを持っていました。Web開発者はそれを気に入っており、30,000回以上ダウンロードされています。そこで、ボタン、ナビゲーションバー、入力などの基本要素のコアデザインとして使用することにしました。

しかし、影響を与え、人々に私たちの製品をひどく欲しがらせるには、それ以上のものが必要であることに気づきました。「ブートストラップに基づく別のダッシュボード」にはなりたくありませんでした。優れたデザインリソースが必要な場合、どこに行きますか?

Dribbbleで「ダッシュボード」を検索すると、信じられないほど美しいダッシュボードと管理パネルがたくさん見つかります。実際、知らない人にとって、ドリブルは視覚的なコカインのようなものです。CreativeMintsのCosminCapitanuとMikeによって作成されたこれらの例のいくつかを確認してください。

これらの美しい例をすべて見ると、そのようなものを構築すれば、間違いなく群衆から目立つようになることがわかりました。また、ダッシュボードやグラフの見栄えが非常に良い場合でも、実際にHTML、CSS、JavaScriptでコーディングするのは非常に困難または不可能です。または、Body Measurementsを備えた最新のダッシュボードなど、非常に具体的な問題を解決しています。

HTML / CSSに関する知識と経験のレベルがそれほど高くなかったため、2年前は不可能でした。今日それらを実装したいのであれば、非常によく似たものを作成する可能性が高いと確信しています。また、テクノロジーとブラウザの容量は私たちをさらに助けてくれます。

さまざまな事業分野の多くの方にご利用いただけるものを作りたかったのです。シンプルで美しいダッシュボードもいくつかありましたが、何か違うものが欲しかったので、それらをインスピレーションとして使用したくありませんでした。

何が欲しいのか正確に説明することはできませんが、どの例にも満足できませんでした。それで、私たちが本当に好きなものを見つけるまで、私たちは研究を続けました:

それは私たちが望んでいたほど完璧でも傑出したものでもありませんでした。しかし、それは正しい選択であり、ダッシュボードを構築するための非常に良い例であると感じました。パブロ・ピカソでさえ、偉大なデザイナーは盗み、アップルは彼の言葉を尊重したと言った。

それはできませんでした。Herokuのダッシュボードは、私たちにその火花を与えるのに十分なものでした。そのため、最終結果ではなく、インスピレーションのためにのみ使用することにしました。これが最初の反復です:

かなり良いスタートです。それがどのように見えるかをよりよく見るために、チャートでいくつかのカードを適切な領域に配置する必要があります。

カードの色はあまりよく見えませんでした。左側のサイドバーの外観には明るすぎました。そこで、チャートとサイドバーの色のさまざまな組み合わせのテストを開始しました。

この時点で、サイドバーの背景に1色だけを保持する必要がないことに気付きました。そして、ユーザーが希望する色を選択できるようにする必要があります。Appleにはフィットネスアプリ用の美しいグラデーションがあることを知っていたので、それらのグラデーションを将来のグラデーションのベースとして使用することにしました。

デザインとUXの面で世界最高の企業が何をしているのかを見守っていれば、インターフェースに非常に高い基準を設定するだろうと常に考えてきました。このようにして、ますます多くのWeb開発者が高品質の製品に無料でアクセスできるようになります。

色、グラデーション、カード、グラフのさまざまな組み合わせをすべて行っているときに、Slackのインターフェイスを構築したMetalabの人たちが、Slackの28億ドルの秘密のソースという記事を書いているのを目にしました。これは、次のステップのインスピレーションになりました。この記事の全体的なアイデアは、Slackの秘密のソースは、優れた遊び心のあるインターフェイスと小さなインタラクションの組み合わせによって作成され、製品をよりユーザーフレンドリーにするというものでした。

「見た目も感じも違い、音も違います。」

他のダッシュボードにはない何かを追加したかった持っていました。透明度のあるグラデーションが画像上でどのように見えるかを常に気に入っています。そして、私はさまざまな画像とグラデーションの不透明度で遊び始めました。ちなみに、2015年に使ったダブルトーンのグラデーション画像(名前も知らなかった)は、2017年のウェブデザインのトレンドのひとつのようです。これはかなりかっこいいですね。?

完全に満足していない…

これは私たちを幸せに感じさせた眺めでした、それは私たちにとってちょうど完璧でしたか?また、オープニングドロップダウンアニメーションや通知の表示効果などの小さなインタラクションを追加しました。

グラデーションと小さなアニメーションを使用して画像を追加すると、次のような気分になります。

3.オープンソースの上に構築され、巨人の肩の上に立つ必要がある理由

最初に言ったように、私たちは車輪の再発明をしたくありませんでした。また、ダッシュボードに必要な要素を構築できる専門家と契約するための資金もありませんでした。私たちにとって最善の選択肢は、他の人々が作成して共有したものを無料またはオープンソースで使用することであると判断しました。

最近、私たちが実際に行ったことは巨人の肩の上に立つことであることがわかりました。つまり、すでに強力で、大きなコミュニティによって適切に管理されているツールを可能な限り使用したということです。これについての詳細と、ゼロから何かを構築したいときにこのテクニックを使用する必要がある理由については、Quincy Larsonによって書かれたこの素晴らしい記事を読んでください:巨人の肩の上に立つ方法。

実際にボンネットの下にあるものを見てみましょう。

  • フレームワーク:Bootstrap — Bootstrapは、レスポンシブなモバイルファーストプロジェクトをWeb上で開発するための最も人気のあるHTML、CSS、およびJavaScriptフレームワークです。
  • デザインレイヤー:Get Shit Done Kit —無料のBootstrap3ユーザーインターフェイスキット。これは、構築しているオンラインプロジェクトの最良の出発点です。これは、すっきりとした見栄えの良いインターフェイスのオンラインコミュニティの商標になっています。
  • フォント:Roboto —二重の性質を持つGoogleフォント。それは機械的な骨格を持っており、形は主に幾何学的です。
  • 小さなアイコン:Font Awesome — Font Awesomeは、CSSを使用してカスタマイズできるスケーラブルなベクターアイコンを提供します。
  • 大きなアイコン:ストローク7アイコン—これはiOS7に触発された202個の細いストロークアイコンの完全なセットです。
  • チャート:Chartist.js — Chartist.jsは、他のチャートライブラリによって提供される機能に失望したコミュニティの製品です。
  • 通知:Bootstrap Notify —このプラグインは、標準のブートストラップアラートを通知のような「うなり声」に変えるのに役立ちます。
  • マップ:Googleマップ—マップを表示するためのプラグイン。
  • 写真:スプラッシュ解除—無料(好きなことをする)の高解像度写真。
「何の役にも立たないようなものはありません。あなたの個人的な成功を含むすべてには、支払わなければならない代償があります」—ナポレオンヒル

私たちはコミュニティから多くを使用したので、コミュニティに還元するのは公平でしょう。そこで、数週間前にMITライセンスでリリースすることにしました。このようにして、より多くの開発者が、個人的および商業的なプロジェクトのために、法的な制約なしに貢献して使用することができます。

4.打ち上げ、上昇、輝き

約50〜60日間(斧を研ぐ)調査を行うことで、わずか15日(木を切る)でダッシュボードを開発する可能性が得られました。?

プロジェクトを立ち上げた後はどうしますか?それに対するフィードバックが何であるか、人々がそれを使用したいかどうか、そしてあなたが作成した単純なダッシュボードが彼らの問題を解決しているかどうかを確認する必要があります。彼らがそれを使いたくないのなら、あなたにはビジネスがありません。さまざまなコミュニティに提出しましたが、非常に好調でした。たとえば、次のようになります。

  • Hacker Newsで170の賛成票があり、その週の視聴回数は9位、88.000回を超えています
  • / r / webdevsubredditで247の賛成票
  • / r / web_design subredditに対する80の賛成票(「スパム」タグを取得したため80でブロックされ、サブスクライブポップアップがいくつかありました…後で削除しましたか?)

コミュニティはアイデアを検証しました。カスタマイズを容易にするためにSASSファイルを追加したり、GitHubに投稿したりするために、多くのフィードバックもあります。

次に、このダッシュボードの使用方法を学びたいと思っている初心者がたくさんいることを確認しました。そのようなものと相互作用しなかった人々がそれを扱う方法を学びたいと思ったほど、それはとても美しかったです。

当社の製品を使用してWordPressダッシュボードを複製する方法に関する一連のビデオチュートリアルの開発に約3週間を費やしました。非常に人気のあるダッシュボードであるため、WordPressダッシュボードを使用することにしました。そして、私たちの製品を使って何でも作れることを人々に理解してもらいたかったのです。

チュートリアルは非常に好評で、今日の時点で78,000回以上の閲覧があります。これは、Light Bootstrap Dashboard1 / 3を使用してレスポンシブ管理テンプレートを作成する方法に関する最初のビデオです。

5.Web開発者からのサポートとリクエストにどのように資金を提供するか

製品を簡単に構築し、存続させるのは困難です。

開発を継続したり問題を修正したりするために、作成者が十分な現金を持っていないか、十分な収益を上げていないために死にかけている素晴らしいプラグイン/テンプレートがたくさんあります。

私たちの製品に同じケースは必要ありませんでした。製品を存続させるための最良のオプションは、継続的な開発をサポートするのに十分な収益を生み出すことができるPROバージョンを作成することでした。

Web開発者からのフィードバックを使用して、より多くの要素とプラグインを備えたプレミアムバージョンを作成することにしました。特定の機能が必要で、5%のカテゴリに属している人たちの一部も支援したいと思いました。5%のカテゴリからできる限り役立つプラグインを選択することは、私たちにとって非常に困難でした。

プレミアムダッシュボードの調査を再開しました。また、フルカレンダー、DataTables.net、Sweet Alert、Bootstrap Wizardなどのプラグインと、ログインページ、登録ページ、ロックページなどの追加ページを追加しました。

これがPROバージョンのライブプレビューです。オプションや機能が多すぎず、同じ構造を維持し、軽量化したいと考えていることがわかります。

PROバージョンからの収益を得て、製品をサポートするだけでなく、PSD / SketchバージョンやAngular2バージョンなどの新しいファイルタイプを作成することもできました。どちらも無料で共有されます。

6.将来の開発計画

ダッシュボードに関するいくつかの統計は次のとおりです。

ブランドに合わせてカスタマイズするのはとても簡単です。これは、スタンフォード大学の救急医学部門のカタログなどの内部ツールで使用されていました。

ダッシュボードをAngular2、Angular CLI、React、Meteor、VueJS、またはRailsGemなどのさまざまなフレームワーク上に構築したいというWeb開発者からの多くのリクエストがあります。これらすべてのバージョンを作成し、MITライセンスの下で無料でサポートすることは、それぞれにPROバージョンがある場合にのみ機能します。私たちはAngular2から始めましたが、それを使用する多くの人々を見て、それを改善する方法について多くのフィードバックをもらいました。したがって、他のフレームワークに参加したい場合、またはこれらの製品をより良くする方法についてアイデアがあれば、もっとお話しさせていただきます。

ライトブートストラップダッシュボードの構築の背後にあるソースとプロセスを示すには、多くの勇気が必要でした。これから何かを学ぶことを願っています。フィードバックや提案があれば、コメントでお話しさせていただきます。

便利なリンク:

  • www.creative-tim.comからHTMLバージョンをダウンロードします
  • www.creative-tim.comからAngularバージョンをダウンロードします
  • www.pixelsvibe.comからPSD / Sketchバージョンをダウンロードします
  • ライブプレビューで遊んでください
  • GitHubリポジトリで問題を投稿して報告する
  • 私たちのブログをチェックしてください://blog.creative-tim.com/

私を見つけてください:

  • Eメール:[email protected]
  • Facebook://www.facebook.com/axelut
  • Twitter://twitter.com/axelut