投稿者: UXPin

 オープンソース プロジェクトは、他の人と共同で作業し、チームワークを通して学ぶユニークな方法を提供します。ロケットサイエンスではありませんが、Reactエコシステムの中で適切な オープンソース プロジェクトを選択するには、多くのことが必要だと言っていいでしょう。

そこで、チャレンジしてコミットしたいと考えている人のために、Reactの オープンソース プロジェクトの正しい選び方についての有益な情報を提供することを目標にしました。

Reactの オープンソース プロジェクトに貢献することのメリット

Reactエコシステムにおける適切な オープンソース プロジェクトの選び方を知る前に、メリットと、貢献することが（ジュニア）ウェブ開発者やUX/UIデザイナーにどのように役立つかについて触れてみましょう。

駆け出しのUI開発者として、 オープンソース プロジェクトへの貢献は以下のようなメリットがあります：

• インスピレーションを得るのに最適な方法である（ユーザーインターフェースを構築するための非常に優れたjavascriptライブラリであるため）。
• 最高のフロントエンド・フレームワークのベストプラクティスを学ぶことができる。
• ユニークな方法で自分のスキルを向上させることができる
• プロジェクトの開発サイクルのすべての段階を経験することができます。
• ネットワーキングの機会となり、自分をアピールすることができる
• 自分のポートフォリオを充実させることができる

それでは、これまでにご紹介したメリットについて、さらに詳しくご説明しましょう。

インスピレーションを得る

React の オープンソース プロジェクトは、Merge テクノロジーを使用する UX/UI デザイナーにとってインスピレーションの源となります。なぜなら、Merge は React を完全にサポートし、Git や Storybook と完全に統合されているからです。コード コンポーネントを使ってデザインしたり、他の開発者の Git リポジトリからコンポーネントをインポートすることができます。

ベストプラクティスを学ぶ

 オープンソース プロジェクトへの参加において、適切なドキュメントや活発なコミュニティを通じたベストプラクティスを学ぶことは、新人やベテランのフロントエンド開発者やUXデザイナーの指針となります。

一方で、ベストプラクティスは、何をすべきか、何をすべきでないか、プルリクエストの適切な送信方法、課題の提出方法など、貢献者としてオープンソースプロジェクトを始めたばかりの頃にはとても重要なものです。

ユニークな方法でスキルアップ

自分の知識や経験、コードを他の人と共有し、他の人にも同じことをしてもらうことは、スキルを磨いたり新しいことを学んだりする上で、非常にユニークで効果的な方法です。

プロジェクトの全サイクルを経験する

Reactのエコシステムでは、プロジェクトの最初から最後までの開発サイクルに完全に没頭することができます。他のコントリビューターとともに、アイデアやプロトタイピングからデザイン、テスト、実装まで、プロジェクトのすべての段階を経験することができ、コラボレーションとコミットメントが重要な役割を果たします。

ネットワーキングと自己宣伝の機会

活発なオープンソース・コミュニティに参加し、そのメンバーと交流することで、評判が高まり、それが後々の就職にも有利に働くことがあります。これが次の、そして最後のメリットです。

ポートフォリオの構築

オープンソース・プロジェクトが、あなたのキャリアにとって正しい方向への一押しとなることがあります。仕事に応募したり、フリーランスの仕事を探したりする際には、自分が貢献したプロジェクトをアピールするといいでしょう。

スキルレベルに関わらず、Reactのオープンソースプロジェクトは、多様なポートフォリオを作成するのに役立ち、ひいては就職にも役立ちます。

そうすれば、初心者レベルの作業や架空のプロジェクトだけでなく、現実のプロジェクトに携わり、支援を行い、既存の問題を解決してきたことを、潜在的な雇用者に示すことができます。

Reactの オープンソース プロジェクトを選択する際に考慮すべきこと

適切なプロジェクトを選択することは、どこから探し始めればよいのか、何があなたの時間と労力に値するのかがわからない場合、困難なことです。しかし、オープンソースプロジェクトを選択する際には、以下のようなことを念頭に置くのが鉄則です：

• アクティブコミュニティ
• プロジェクトの人気
• 整理されたドキュメント

アクティブコミュニティ

アクティブコミュニティがあるプロジェクトに参加するということは、行き詰まったときに助けてくれる人が常にいるということです。また、開発者がプロジェクトを完成させる意思を持っているということは、ある意味でプロジェクトの将来性を意味しています。

難しい問題が出てきたときに、誰かに相談できることも大切です。コミュニティが活発なオープンソースのプロジェクトでは、slackやdiscordのチャンネルが用意されていることが多く、そこではより詳細な議論や経験の共有、コミュニケーションなどを行うことができます。

逆に言えば、プロジェクトのソースコードを個人的な作業のために依存して使用することになった場合、活発なコミュニティは重要です。

プロジェクトの人気

あるReactオープンソースプロジェクトの周りに活発なコミュニティがあれば、そのプロジェクトの人気が高まっていると言ってよいでしょう。また、徹底したドキュメントや仲間の貢献者からの多くの助けが期待できます。

整理されたドキュメント

Reactエコシステムの オープンソース プロジェクトを選択する際に考慮すべきパズルの最後のピースは、参照可能なよく整理されたドキュメントです。適切なドキュメントがあれば、プロジェクトが現在直面している問題に精通するという意味で、物事がより簡単になります。

 オープンソース プロジェクトを始めるには

初心者が貢献するのに最適なReact オープンソース プロジェクトは、従事しながら最も多くのことを学ぶことができるものです。一方、経験豊富なUI/UX開発者にとっては、最高の オープンソース プロジェクトは、彼らが最も貢献できるものです。

有用なヒント：GitHubは開発者にとって最高のプラットフォームなので、 オープンソース のプロジェクトはGitHubで探すのがいいでしょう。また、GitHubを探索する際には、プロジェクトに付いている星の数、コメント、課題、プルリクエスト、スターゲイザーからの閲覧数などをチェックしてみてください。基本的には、自分のスキルや時間に合っているかどうかを判断するための視覚的な手がかりになります。

まとめ

要約すると、オープンソースプロジェクトへの貢献は、コミュニティの助けを借りて知識や学習を広げながら、自分のスキルを向上させるのに役立ちます。また、自分の専門分野の人たちとプロフェッショナルな関係を築くことができ、いつか仕事につながるかもしれません。

また、プロジェクトの開発サイクルのすべての段階に参加できるという点で、貴重な経験となるでしょう。ただ、特定のプロジェクトに参加する前に、これまで述べてきたことを忘れないようにしてください。

さて、今回はReactのエコシステムにおける オープンソース プロジェクトの選び方について、最も重要な点を取り上げました。デザインやアイデアを開発する際に、開発ツールやライブラリと調和して動作するツールが必要になることがあります。UXPinのMerge技術は、Gitリポジトリから送られてくるReactコードコンポーネントやStorybookのオールフレームワークコンポーネントを最大限に活用することで、デザインと開発のギャップを効果的に埋めることに焦点を当てています。これらをデザインツールと同期させることで、デザイナーは完全な機能を維持したまま、異なるプロジェクトでコードコンポーネントを再利用することができます。そうすることで、スムーズなハンドオフと製品開発プロセス全体の高速化というメリットが得られるのです。

これらの404ページの例は、デザイナーが単純なコンピューティングエラーをブランド化されたユーザーエクスペリエンス（UX）に変える方法を示しています。

初期のパーソナルコンピュータは、RAMが64k以下のモデルでした。プログラマーは物事をシンプルにする必要がありました。そこで、プログラムの機能を分類するシステムを開発され、入力エラーはクラス400に割り当てられました。

• 400 Bad Request. 入力の構文が間違っています.
• 401 Unauthorized. ユーザー名とパスワードがないとアクセスできません。
• 403 Forbidden. 禁じられています。ユーザーはファイルにアクセスする権限を持っていません。
• 404 Not Found. ユーザーが存在しないURLを入力またはリンクしました。

昔は、ユーザーは正確なURLを入力する必要がありました。例えば、Yahoo Financeの場合だと: https://www.finance.yahoo.com

URLを入力する際にキーボードを入力ミスをしてしまうと、エラーコード400または404が表示されました。

最近のブラウザでは、www.finance.yahoo.com や finance.yahoo.com のような省略されたアドレスを入力することができます。実際には、上の例のような構文で検索バーに完全なアドレスを入力すると、ブラウザはリダイレクトします。 なぜでしょうか？それは、HTTPを使った古い構文だからです。更新されたサイトは、HTTPSを使ったより安全なURLになっています。最新のブラウザでは、自動的に修正されます。

404エラーをランディングページにして、ユーザーにウェブサイトの継続利用を促すことができるようになりました。404ページのデザインは、ユーザーが離脱しないようにする必要があります。

使用する要素としては、以下のようなものが考えられます：

• ホームページやその他の有用なページへのハイパーリンク
• 検索バー
• サイトのブランドを反映したグラフィック要素
• ブランドの声でユーザーに伝える簡単なメッセージ

これらの404ページの例では、さまざまなブランドがこれらのUX要素をどのように使用しているかを見ていきます。  

404ページ 例：ホームページリンク

UXPin

まず、弊社の404ページを見てみましょう。

ご覧のとおり、シンプルなデザインにしています。宇宙をテーマにしたグラフィックの周りには、たくさんのホワイトスペースがあります。メッセージはシンプルで、「キャプテン！どうやら間違った惑星に向かっているようです！」というシンプルなメッセージです。

CTA（コール・トゥ・アクション）ボタンを設置して、ユーザーをトップページに誘導しています。

Google

Googleの404ページも非常にシンプルで、ホワイトスペースが多く使われています。 “リクエストされたURLは、このサーバーでは見つかりませんでした。情報は以上です。”

壊れたロボットのグラフィックは、ハイテクブランドを反映しています。CTAはなく、マウスオーバーして初めてGoogleのロゴがホームページへのリンクであることがわかります。

UXライターの多くは、CTAを省くことは大きな間違いだと言いますが、ほとんどの場合はその通りです。忘れてはいけないのは、訪問者にサイトを使い続けてもらいたいということです。

Googleは例外で、訪問者が必ず戻ってくることを知っているからです。

404ページ 例：有用なページリンク

Angi

Angiの404ページは、他の有用なページへのリンクがたくさんあるホームサービスのコントラクターサイトです。

ユーザーへのメッセージは端的です：

“まずい、これは厄介だ…”　（現在は”Something went wrong（何かが変だ…）”）

“お探しのページは、移動、削除されたか、存在しないようです。ご不便をおかけして申し訳ありません。” です。

CTAは、提案されたページへのリンクのリストになっています。

フッターには、ニューヨーク、シカゴ、ロサンゼルス、ダラスなどの大都市圏のサービスを探すためのリンクがあります。その他の便利なリンクもフッターにあります。

Angiはすべてを “above the fold “にしています。つまり、どのリンクに行くにもスクロールする必要がないのです。

Starbucks

Starbucksの404ｐページでは、かつてカップがあった場所にコーヒーリングがあるというイメージが、そこにないページのメタファーとなっています。

このページでは、何が悪かったのかを説明し、次に何をすべきかを提案しています。

訪問者がリンク切れを報告するためのリンクも用意されています。

Glassdoor.com

Glassdoorの404ページを見てみると、人気のある求人情報サイトがいくつかの行動を提案しています。

• 求人情報を検索する
• 企業の従業員レビューを読む
• 社員の給料を見る
• インタビューの質問と回答を見る
• 働きがいのある会社のランキングを見る

404ページ 例：グラフィック重視

eBay

冬用コートを着てフードを目深にかぶった子供の写真が、eBayの404ページの焦点となっています。

“あらゆる場所を探しましたが”

“このページは行方不明のようです。それでも助けが必要な場合は、ヘルプページをご覧ください。”

下にあるのは、eBayのホームページにアクセスするためのCTAボタンです。

ページの下部には、トレンドのお得な情報を掲載したスクロールボックスがあります。

Lego

この404ページにアクセスすると、『レゴ・ムービー』のエメットが表示されます。彼は、「すべてがまだ素晴らしい」と言っています。

404ページ 例：エレメントのローテーション

Amazon.com

Amazonの 404 ページ は”Amazonの犬 “の写真とともに上部の検索バーを使って、検索するか、ホームページのリンクをクリックするかを提案しています。犬の写真をクリックするとアマゾンの犬にやさしい職場に関するニュースページにリンクしています。

ページを更新すると、別のアマゾンの犬の写真が表示されます。何度か更新すると、ランダムにたくさんの犬の写真が表示されます。404ページのために何匹いるのかはわかりませんが、7,000匹以上の犬がアマゾンで「働いて」います。

Marvel Comics

Amazonと同様に、Marvelも複数のバージョンの404ページをローテーションしています。これらのページでは、マーベル・コミックの世界の画像が表示され、次のようなメッセージが表示されます：

• “プロトコルが見つかりません…既存プログラム…”
• “ヒドラがこのページを攻撃中！”
• “$#&%、壊したな！冗談だよ”
• “ヌアツの目でさえ君の要求を見ていない”
• “ヒドラはシールドのデータベースから このページを盗んだんだ！”

IMDB

International Movie Database (IMDB)の404ページもローテーションしています。IMDBはブランドを維持し、映画の引用を提供することで、ファンに親しみやすさを提供しています。

• “ウェブページ？私たちが行くところにはウェブページは必要ない” – エメット・ブラウン博士、「バック・トゥ・ザ・フューチャー」
• “いつの日か見つけよう…ウェブサイトのつながりを” – カエルのカーミット、「マペット・ザ・ムービー」
• “確かに、あなたは本気ではないでしょう。” “私は本気よ そして、シャーリーと呼ばないで” -テッド・ストライカーとラムネ、「エアプレーン」
• “我々がここで得たものは…コミュニケーションの失敗だ” – キャプテン、「クール・ハンド・ルーク」
• “ページが見つからない？考えられない！” – ヴィズィーニ、「プリンセス・ブライド」
• “ここはもうカンザスではない気がする” – ドロシー、「オズの魔法使い」

UXPinで 404ページ のプロトタイプを作成する

UXPinは、フルスタックのUX/UIデザインプログラムで、どんなプロジェクトでもコンセプトから製品発売までを1つのアプリで実現できるツールを提供します。

404ページをデザインする際には、プラットフォームから直接、コラボレーターや関係者とリアルタイムで共有することができます。コラボレーターや関係者はコメントを加えることができるので、何度もメールをやり取りする必要がなく、イテレーションをスムーズに進めることができます。今すぐ無料トライアルを開始しましょう。