「KONOCODE（コノコード）」とは？
制作のプロが実際の案件で使用しているHTMLやCSS、さらにはJavaScriptやCMS処理などのソースコードを有料（一部は無料）で購入利用できる、フロントエンド専門のコーディングリファレンス（Tips集、チートシート）です。
KONOCODEは主な利用目的として、以下の2点を想定して開発されたサービスです。
既存のソースコードを使い回すことで、高速開発を可能にする「リファレンスツール」としての利用
フロントエンド（コーディング）の実装を「既存のソースコード」から使い回す（コピペする）ことで生産性を向上させます。
また、リファレンスツールとして集約することで「自身のPC内に存在する複数のプロジェクトのどこかで使ったソースコード」を探す手間と時間を短縮します。
自身に経験のない「今、目の前の実装」やデバッグに対応するための、熟練エンジニアのナレッジ活用
フロントエンド（コーディング）において、未経験の実装（1回目の実装）や未経験のデバッグ（1回目のデバッグ）は解決までに時間を要するものです。ただ、経験を得ることで2回目以降はその時間が飛躍的に短くなります。
KONOCODEでは、熟練エンジニアの「経験」を共有することで、1回目から大幅な時間短縮が可能になります。
KONOCODEを利用するメリット
モジュールの組み合わせで、開発時間をより短く。
フロントエンドでもっとも重要なことは、「ソースコードをゼロから書き上げること」ではありません。
モジュールの共通化などサイト全体の構成設計と、それにあわせて適切にモジュール同士を組み合わせることです。
KONOCODEを使うことで「コードを書く時間」を短くし、その他の重要工程に多く時間を割くことができるようになります。
結果として、開発時間全体を短くすることが可能になります。
ソースコードを統一し、より高い品質へ。
フロントエンド開発では、1つのデザインを再現するためのソースコードが無数（無限）に存在するため、一定以上の知識を得ると「どれが本当に良い書き方か選べない」という状態になってしまうことがあります。
それほどソースコードの整合性や命名規則の統一性は難しく、こだわりだすとキリがありません。
KONOCODEでは、BEM（getbem記法）で書かれた規則性と整合性がしっかり練られたソースコードをご提供していますので、品質の向上にも寄与します。
経験が浅い人も、熟練者が書いたソースコードを自分のものに。
フロントエンド開発の基本はパズルと同じ「組み合わせ」を考えることから始まります。
経験が浅い場合、その組み合わせるモジュールの開発自体に労力が必要なのですが、KONOCODEを使うことでモジュールの開発に苦労することがなくなります。
熟練したエンジニアが書いたモジュールを活用することで、本来の設計に注力でき、また自身の技術向上にもお役立て頂けます。
KONOCODEの特長
- コーディング専業のプロが実際の案件で使用するコードをご提供します。
-
- 有料記事・限定コンテンツが見放題のパス会員プランを３種類ご用意。
-
- 定期的な点検とアップデートで、常に「使えるコード」をご提供します。
-
KONOCODEでは「フロントエンドエンジニアがコーディングリファレンスとして活用すること」に特化したユーザビリティを目指しています。
できる限りシンプルなレイアウトで「すぐに目的のソースコードにたどり着け、迅速にコードをコピーして開発中の案件にペーストする」ことを何よりも大切にしています。
有料記事・会員限定コンテンツが見放題のパス会員プランを３種類ご用意し、「リファレンスツールとして常用したい」というニーズにお応えしています。また「必要な時だけ使いたい」場合、有料記事の単発購入（500円税込〜、閲覧期限30日間）もご利用いただけます。
有料で提供する以上、ユーザーの皆様に安心してお使い頂けるように、最新ブラウザへの対応など、常にチェックとアップデートを心がけています。
フロントエンドの最前線でプロの熟練エンジニアが実際に使用しているソースコードを使いやすい価格で提供します。
わたしたちがKONOCODEをつくった理由
「あ、このレイアウト前作った」
「このJS処理、以前に書いたコードがそのまま使えそう」
私たちはフロントエンド開発（コーディング）を主力事業としている会社です。事業を通じてより速く、より品質の高い施工を目指していく中で、当事者として私たちが気付いたことがあります。
それは『フロントエンド開発には「たとえ見た目のデザインが大きく異なっても処理構造がほぼ同じ」であるソースコードが数多存在すること』です。
「あ、このレイアウトは前に開発したあのソースコードを転用すればすぐ実装できそう」
「この複雑なJS処理、前に苦労して開発した処理とほぼ同じだな」
「このCMSの処理は記述量が多いから、いつものあの処理を転用しよう」 …etc。
でも、そんな時によくある現象として、こんな場面にもよく遭遇します。
「あれ？どのプロジェクトで実装したソースだった？」
そして結局、ソースコードを探すのに時間がかかってしまい、ゼロから書くのとあまり変わらなくなってしまう。
コーディング専業である私たちのPCには、多数のコーディングプロジェクトのソースが眠っています。そこから探している処理を見つけるのは、意外に時間がかかるもの。熟練者であればその数は数百にも登るため、探す手間も大変です。
初心に返ってゼロから書こうとしても、「前に書いた処理の方がスマートだった気がする」思いがどうしてもよぎりますし、「ヒントにしたあのサイトのあのページ」が検索エンジンのどこを探しても見つからない（何というキーワードで探したっけ？）…などといったことも日常茶飯事です。
手元にあるはずなのに、求めているコード、探しているコードがすぐに見つからない。
この問題を解消しない限りコーディングの抜本的な高速化は実現が難しく、文字通り私たちの前に立ち塞がる「壁」となっていました。
「手元の大量のデータから必要なリファレンスを探す」手間を省き、そして隣に座る同僚エンジニアのソースコードも活用できるように。
自分のPC内のソースコードをコーディングリファレンスとして活用する場合、もっとも大きな課題は「本当に欲しい時ほど目的のソースコードが見つからない」ことです。
基本的なレイアウトや簡易な処理ならある程度の経験者であれば何も参照せずに書くことができますが、単独でも複雑な処理やレイアウトとJS処理が複雑に絡み合う組み合わせコードなどに挑む時こそ、「前の経験値を活用したい」ものです。
ただ、そんな機会は頻繁に発生するわけではありません。
ときどき探す、でもなかなか見つからない…。この問題を解決する方法は一つしかありません。
「使えるソースコードを全てインデックス（字引）化したらどうなる？」
なぜ見つからないか、その原因はインデックス化されていないからです。
目当てのソースコードが眠る場所は「探す」目的に最適化された場所ではありません（特定のサイトデータの特定のブロックのコードだったりするため）。
ではインデックス化すれば良いのではないか。
さらにはwebにアップすることで異なるエンジニア同士のそれぞれのPCに眠る「マイリファレンス」を統合すればどうなるか。
集めた知見はクラウド化の効果を発揮し、「自分以外のエンジニアが開発したソースコード」も「マイリファレンス」として使えるようになる（＝知見の共有）のではないか。
それがKONOCODEをつくる主な原動力となりました。まずは自分たちのコーディング開発をもっと速く、もっと便利に、もっと安心な品質にするために。
また、同時に「マイリファレンス」から転用する際にいつも行っていた手直し（当然ですが、他のサイトで実装した処理を別のサイトでそのまま使うことはできないためです）も予め想定し、汎用性の高いソースコードに書き直してリファレンス活用することで、より有用性が高まる（＝誰でも使える）のではないかという仮説もKONOCODEでは実践しました。
「基本構造はゼロから作らない」「複雑な処理は転用」。
それだけで飛躍的な高速コーディングが可能になりました。
KONOCODEをきっかけとして、私たちのコーディングのあり方は大きく変わりました。
これまでは毎回ゼロから組み進めていた構築を、header・contents（wrapper）・footerといった大きな枠だけを用意して、そこにデザインに適したレイアウトモジュールをKONOCODEで探して組み込む、という方法に変わったのです。
結果は即座に現れました。コーディングの速度が飛躍的に向上し、副次効果として「時間を使って考えないといけない難度の高い処理にしっかり時間をかけられる」ことができるようになり、生産性に大きな伸びしろを実感することができました。
フロントエンドの本質はソースコードを書くことではなく、「全体設計と各モジュールの最適な組み合わせを考えること」であると改めて気づかされました。
さらには経験の浅いエンジニアでも高度な施工ができるメリットも。
KONOCODEでご提供するソースコードは、価値のない有象無象になってしまわないために「一定以上の技量を有するエンジニアが書いたコード」を、さらに当社でも「特に経験と実績が豊富なエンジニア」が汎用的な内容に書き直したものです。
そのため、以下の点が活用する上での安心材料になります。
・ソースコードにバグや初歩的なミスがない
・ソースコードがきれい
・class命名が統一されていて使いやすい（BEM形式）
この点から、特に経験の浅いエンジニアのコーディングに大きな影響を与えました。
「熟練した先輩エンジニアのソースをそのまま自分のコードとして使える」からです。
おおよその全体像をKONOCODEのソースコードでつくりあげ、そこから細かい作り込みに入る。当然そこには技術や専門知識が必要になりますが、以前と比べてはるかに効率よく取り組めるようになりました。
結果として、エンジニアとして成長する速度もあがりました。
これらの工程で得た知見と、つくりあげてきたKONOCODEの仕組みに対して、市場からのニーズがあるのではと考え、この度正式にサービスとしてリリースすることにしました。
フロントエンドに関わるエンジニア全ての方にぜひご活用頂けますと幸いです。
KONOCODEのご利用料金
1. 無料会員の場合
-
料金 - 登録無料でご利用頂けます。
（無料記事・会員無料記事のみ閲覧可能です。）
有料記事 - 有料記事の閲覧には、記事の「単発購入」が必要です。
-
記事ランクに応じて、「500円〜」から購入可能です。
（価格は変動する場合がございます）
閲覧期限 - 有料記事の閲覧期限は、記事購入から30日間です。
- 閲覧期限を過ぎた場合、再度購入が必要です。
お支払い方法 - クレジットカード決済
各種クレジットカードをご利用頂けます。 - PayPalアカウントでの決済
PayPalへの支払情報の登録が必要になりますので、詳しくはPayPalのホームページをご覧ください。
- 登録無料でご利用頂けます。
記事ランク
「有料記事」は記事内容によって「ブロンズ〜プラチナ」までのランク付けがされており料金が異なります。
| 記事ランク | ブロンズ | シルバー | ゴールド | プラチナ |
|---|---|---|---|---|
| 料金 （税込） |
500円 | 1,980円 | 4,980円 | 4,980円〜 （※記事内容によって料金が異なります） |
| パス会員の 見放題対象 |
○ 対象 | × 対象外 （※パス会員であってもご購入が必要です） |
||
| 記事ランク | 料金 （税込） |
パス会員の 見放題対象 |
|---|---|---|
| ブロンズ | 500円 | ○ 対象 |
| シルバー | 1,980円 | |
| ゴールド | 4,980円 | |
| プラチナ | 4,980円〜 （※記事内容によって料金が異なります） |
× 対象外 （※パス会員であってもご購入が必要です） |
- 有料記事の記事ランク及び料金は定期的に見直しが行われ、告知なしに変更される場合がございますので予めご了承ください。
登録は簡単！まずは無料会員へ！
2. パス会員の場合
有料記事が見放題の「パス会員」は
３種類のプランからお選び頂けます！
-
3カ月パス
有効期限 3カ月 プラン料金
（税込）6,380円
（約2,127円/月）1年間継続した場合の料金
（税込）25,520円 -
6カ月パス
有効期限 6カ月 プラン料金
（税込）9,470円
（約1,579円/月）1年間継続した場合の料金
（税込）18,940円 -
年間パス
有効期限 1年間 プラン料金
（税込）12,680円
（約1,057円/月）1年間継続した場合の料金
（税込）12,680円 -
お支払い方法について
-
パス会員がオススメの理由！
- お得な料金設定で経済的。
- 有効期限内は有料記事をいつでも閲覧可能。（※記事ランクが「プラチナ」の記事を除く）
- リファレンスツールとして常用することで、コーディングの生産性を向上して開発時間を大幅に短縮。
- 有料記事の実装方法やDEMOプレビューが確認できるので、使いたい内容か判断しやすい。
- 記事を単発購入する手間がかからないのでストレスフリー。
- パス会員限定「レイアウト,パーツ」カテゴリ記事を閲覧可能！ 各種レイアウト・パーツをコピペで高速実装！さらに開発速度が上がります。
- 案件で使える記事が盛り沢山！ 空いた時間に色々な記事を確認すれば、コーディングの引き出しを増やせます。 コーディング初級者の学習にもオススメです。
注意事項（必ずご確認ください）
- 記事ランク「プラチナ」の有料記事はパス会員の有料記事見放題の対象外になります。閲覧には別途記事の単発購入をして頂く必要がございます。
- ご利用のパス会員プランの有効期限が切れると、アカウント期限切れ状態になり有料記事が閲覧できなくなります。引き続き、パス会員を継続される場合は、再度ご希望のパス会員プランにお申し込み頂く必要がございます。
- パス会員利用途中でのパス会員プラン変更は出来かねますので予めご了承ください。
- 「パス会員」から「無料会員」へ会員レベルを変更する場合、メニューにある「会員レベル変更」ページから変更頂けます(パス会員の場合のみ無料会員への変更ボタンが表示されます)。なお、パス会員プランの有効期限内に無料会員に戻った場合、パス会員プラン料金のご返金は出来かねますので予めご了承ください。
パス会員にご登録頂く前に、「無料会員」へのご登録が必要になります。
