本記事は、Simon Holdorf氏による「10 Inspiring Ideas for Your Next Front-End Project」（2021年1月5日公開）の和訳を、著者の許可を得て掲載しているものです。
ご好評いただいている記事「2020年にフロントエンド開発者が作りたい9つのプロジェクト」と、その2021年改訂版「ポートフォリオに役立つJavaScriptプロジェクト40選（動画あり）」の続編です。
フロントエンド開発者のための刺激的なプロジェクト10選
Photo by NeONBRAND on Unsplash
はじめに
ウェブ技術と創造性を組み合わせることで、驚くべきものが作れます。この記事で紹介するものはすべて、JavaScript、HTML、CSSだけで作成されています。Photoshopなどのツールは一切使用しておらず、ブラウザ上ですべて完璧に動作します。
ここで紹介するものを調べて試すだけでも楽しいですが、すべてのプロジェクトのソースコードを見られるのはさらに良いことです。新しいことを学び、優れたクリエイターから多くのインスピレーションを得る絶好の機会を与えてくれます。
CodePen.ioで公開され、一般公開されている素晴らしい事例を10個選びました。CodePenはChris Coyier（css-tricks.com創設者）が共同で作った秀逸なプラットフォームです。
彼らは、開発者やエンジニアがプロジェクトで協力し、自分たちの仕事を披露し、物事をコミュニティと共有したり、新しいアイディアをプロトタイプ化したりすることができる、ソーシャルな開発環境と自称しています。
私は、ここで紹介する例を調べ、試し、どのように動作するか理解することを強くお勧めします。大いに楽しむだけでなく、ウェブ上の創造性について多くのことを学べるでしょう。そして忘れてはならないのは、クリエイターの卓越した仕事に敬意を表することです！
1. ボタンをクリック！
私が最初に選んだのは、ノルウェーの才能豊かなクリエイターBård N Hovdeの「ボタンをクリック！」です。
シンプルなのに印象的で、ひねりが効いていて、試す度に気分が明るくなるので、CodePenの中でお気に入りのPenです。がっかりすることはないので試してみてください！
See the Pen Click the button! by Bård N Hovde (@bnhovde) on CodePen.
2. クレジットカードフォーム
最近は多くのウェブサイトで、クレジットカードの詳細を何らかのフォームで入力するよう求められます。私にとっては、フォームの作り方のせいで必ずしも楽しいものではありません。
CodePen人気No.1クリエイターに最近選ばれたMuhammed Erdemの「クレジットカードフォーム」を見つけた時は、良い意味で驚き、なぜウェブサイトクリエイターはこんなに美しいフォームを使っていないのだろう、と思いました。
このフォームにカードの詳細を入力するのは楽しいことで、すべてのウェブサイトのオーナーが最も関心を持つべきことです！
See the Pen Credit Card Form - VueJs by Muhammed Erdem (@JavaScriptJunkie) on CodePen.
3. Pure CSSの静物
Ben Evansのこの作品は、CSSの可能性を示す最たる例です。この美しい絵を作るのに画像を使っていないことを、いまだに信じられないことがあります。
そして、CSSで何ができるかを思い出させてくれます！Benは他にもCSSマジックを作っているので、彼のCodePenのプロフィールもチェックしてみてください。
See the Pen Pure CSS Still Life - Water and Lemons by Ben Evans (@ivorjetski) on CodePen.
4. ソファに色をつけて！
Kyle Wettonは、ソファと背景をカラーリングするインタラクティブで印象的なPenを作りました。軽量なので、家具を販売するeコマースサイトで使えます。
さらに、SVG とブレンドモードで何ができるかの良い例です。
See the Pen Color this sofa! – SVG + Blend Mode trick by Kyle Wetton (@kylewetton) on CodePen.
5. ルービックキューブ
これは単なるウェブ技術のデモ以上のもので、ほとんどの人が知っているであろうゲームです。Boris ŠehovacがこのPenで実証した創造性と実行力に感服します。
これは2019年のCodePenで最も愛されたプロジェクトの1つでもあり、私はこれに同感しかありません！
See the Pen The Cube by Boris Šehovac (@bsehovac) on CodePen.
6. フェイスボタン
Katherine Katoがこの小さなPenで示しているように、印象的であるために、必ずしも複雑なプロジェクトである必要はありません。
このインタラクティブで楽しいデモに必要なコード量がどれほど少ないか、見てください。少ない方が良いこともあるという事実を思い出させてくれます。Katherine、お見事！
See the Pen Face Button by Katherine Kato (@kathykato) on CodePen.
7. ミニ音楽プレイヤー
Muhammed Erdem の能力を示す、もう一つの素晴らしい例です。もし私が優秀なエンジニアを必要としている会社なら、誰よりも先に彼を雇うでしょう。
このデモで再生される音楽については好みが分かれますが、プレイヤーの外観と操作性については議論の余地がありません。Muhammed、よくやった。
そして、すべてのストリーミングプロバイダは、これを見たら何か学べるかも！
See the Pen Mini Music Player - VueJS by Muhammed Erdem (@JavaScriptJunkie) on CodePen.
8. シンプルなCSSの波
フィンランドのDaniel "Goodkatz" Östermannは、CSSだけでできるもう一つの素晴らしい例を見せてくれます。
個人ウェブサイトやランディングページに使っているところを想像してください。手間はかからないのに優れたビジュアル。軽量でありながらパワフル。この組み合わせが好きです！
See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz) on CodePen.
9. CSSカードホバーエフェクト
インタラクティブなウェブサイトにJavaScriptが必要ないケースがよくありますが、Jhonier Riascos Zapataの例で、それが良く分かります。私は本当にこのPenが好きで、このカードを一日中ホバーしていられます。Jhonierに感謝！
See the Pen CSS Card Hover Effects by Jhonier Riascos Zapata (@Jhonierpc) on CodePen.
10. パッカパッカパッカ
最後はSteve GardnerのPenで、プロジェクトで使うものではないかもしれませんが、これがCSSだけで作られているというのは、本当に、本当に感動的です。
そう、その通り、CSSだけです。すごいと思いませんか？
これを見るといつも、CSSをもっと真剣に受け止め、CSSが提供する無数の可能性を探求するためにもっと時間を費やさなければならないと思い知らされます。それでは、読者の皆さん、乗り心地を楽しんでください！
See the Pen Clip Clop Clippity Clop [CSS Only] by Steve Gardner (@ste-vg) on CodePen.
おわりに
さて、エンジニアが持つ計り知れない創造性を示す壮大なデモンストレーションはこれで終わりです。私はこれらのPenを調べることで、たくさんのインスピレーションを得ました。あなたもそうであることを願っています！
こちらもどうぞ！
「フロントエンド開発者のための便利なオンラインツール11選」
「フロントエンド開発者が知らない11の秘訣」
「ウェブ開発者は必ず入れたいブラウザ拡張機能13選」
翻訳協力
この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。
Original Author: Simon Holdorf(@simonholdorf)
Original Article: 10 Inspiring Ideas for Your Next Front-End Project
Thank you for letting us share your knowledge!
選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen
ご意見・ご感想をお待ちしております
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。Twitterでもご意見を受け付けております。
皆様のメッセージをお待ちしております。