11非営利のウェブサイトデザインの優れた例

非営利のウェブサイトは、訪問者に製品やサービスを販売することを目的としていませんが、それでも人々に彼らの目的を支持するよう説得する必要があります。 ウェブサイトは、慈善団体が潜在的な常連客とつながる主要な方法の1つです。

非営利のウェブサイトは、よく整理されていて、ナビゲートしやすいものでなければなりません。 彼らはまた、視覚的に魅力的で、心地よい雰囲気を持っている必要があります。

これらの基準に基づいて、私たちはいくつかの最高の非営利ウェブサイトのデザイン例のリストをまとめました。

1.チャリティー：ウォーター

チャリティー：水は発展途上国の人々にきれいな水を届けるために働きます。

彼らのサイトが優れている理由：

• 画像の優れた選択と配置。 ホームページには、画面の端から端までのスペースをカバーする3つの鮮やかな写真があり、ページを3つの異なるセグメントに分割しています。 配色は明るく居心地が良いです。
• ナビゲーションバーのセクション–なぜ水なのか？ 私たちの仕事と私たちについては、新しい訪問者にそれらについてもっと見つけてもらうのに最適です。
• 召喚ボタンの正しい配置。 右上の[寄付]と[資金調達]オプションは簡単にアクセスできますが、邪魔にならない程度に小さくなっています。 GIVE毎月ボタンは、もう少しフォーカスをとる特徴画像の上に重ね、それでもスペースが慈善という仕事に集中することができます：水はありません。 下にスクロールすると、6枚の写真のグリッドが表示され、短いテキストとその他の行動の呼びかけが表示されます。
• このサイトには、厳選された見出しと整理されたフッターセクションがあります。
• モバイルフレンドリーでレスポンシブデザインのこのサイトは、小さな画面でも同様に見栄えがします。 上部のバーには、行動を促すための[寄付]ボタンが引き続き含まれていますが、スペースを取りすぎないように、募金オプションはオフになっています。

ウェブサイト：charitywater.org

2.赤十字オーストラリア

赤十字AUは、多作の慈善団体のオーストラリア支部です。

彼らのサイトが優れている理由：

• 赤十字のウェブサイトには、非常にユーザーフレンドリーなナビゲーションバーがあります。 バーには3つのセクションがあります–ヘルプを取得する、参加する、サポートしてください。 さらに、ボランティアと寄付という2つの召喚状があります。 連絡先と検索へのリンクもあります
• サイトのすべてのページはすっきりとモダンに見えます。 デザインと配色はサイト全体で一貫しており、赤十字のブランドイメージと非常によく一致しています。
• バナー画像は、赤十字が人々をどのように支援しているかの直接的な例を示しており、訪問者に行動を促すボタンを使って寄付することも奨励しています。
• このサイトはモバイルデバイスでうまく機能します。 さまざまな画面サイズでルックアンドフィールを維持します。 粘着性のあるナビゲーションバーは、1つスクロールしてもその位置に留まります

ウェブサイト：redcross.org.au

3.世界自然保護基金

WWFは、荒野の保護と環境保護に取り組んでいます。

彼らのサイトが優れている理由：

• WWFには、地球全体の野生生物の現状について訪問者を教育することを目的とした非常に有益なWebサイトがあります。 ナビゲーションバーには、私たちの仕事、知っておくべき種、荒野の保全に重要な場所、私たちについて、そしてどのように助けるかが含まれています。 これらの見出しにマウスポインタを合わせると、セクションが整理されたドロップダウンメニューが表示されます。
• 右上隅にある[寄付]ボタンと[行動を促すフレーズを採用]ボタンを使用すると、訪問者は複数の寄付オプションと情報を含むページに移動します。 これは、潜在的な参加者を変換するための優れた方法です。
• ホームページの残りの部分は、WWFからの有益なコンテンツを提示します。 長方形のボックスのグリッドを使用して、画像、テキスト、ソーシャルメディアコンテンツをブレンドします。 このサイトは小さな画面で見栄えがします。 全体的にデザインは視覚的に魅力的です。

ウェブサイト：worldwildlife.org

4.人類の生息地

ハビタットフォーヒューマニティは、困っている人々に住居を提供します。

彼らのサイトが優れている理由：

• 彼らのサイトデザインはシンプルです。 情報、ニュース、ストーリーを提示するために、画像付きの単色グリッドを使用します。 プレゼンテーションはエレガントです。
• トップバーには検索ボックス、いくつかのソーシャルメディアプロファイル、寄付があります。組織はソーシャルメディアプラットフォームで非常に活発であり、彼らは自分のサイトを使用して人々に自分のソーシャルページへのアクセスを促しています。
• 予想通り、このサイトはモバイルデバイスでうまくレンダリングされます。 デスクトップサイトと同様に、一部のサイトで見られる無限のスクロールの代わりに、[ニュースとストーリー]セクションの下部に[さらに読み込む]ボタンがあります。 無限スクロールはソーシャルメディアやeコマースWebサイトにとっては良いことですが、ユーザーはモバイルプラットフォームで煩わしいと感じるかもしれません。

ウェブサイト：habitat.org

5.フィーディングアメリカ

Feeding Americaは、全米で活動している飢餓救済組織です。

彼らのサイトが優れている理由：

• ホームページには、適切な召喚状を含む魅力的な画像のカルーセルがあります。 ウェブサイトの各ページは、実際の写真を使用して組織のメッセージを伝えています。
• フィーディングアメリカは、フードバンクを見つけたり、困っている人たちの助けを得るのをとても簡単にします。 サイトを下にスクロールすると、ナビゲーションバーが上部に固定されます。 通常の寄付に加えて、ヘルプが必要ボタンがあります。
• サイトの全体的なデザインはきちんと整頓されています。 完全にモバイル対応です。

ウェブサイト：feedingamerica.org

6.グリーンピースオーストラリア

グリーンピースは、環境に配慮した平和な未来のために活動しています。 彼らは抗議やキャンペーンで環境問題に取り組んでいます。

彼らのサイトが優れている理由：

• グリーンピースのサイトは美しくデザインされています。 彼らは、画像、空白、グラフィック、ソーシャルメディアの投稿を組み合わせて、ウェブサイトを生き生きとさせています。
• グリーンピースは、行動に焦点を当てた組織として、さまざまな環境キャンペーンへの行動リンクを提供することにより、人々が自分たちの運動に簡単に参加できるようにします。

ウェブサイト：greenpeace.org.au

7.1滴

一滴で、世界中の何百万もの人々に安全な水への持続可能なアクセスを提供します。

彼らのサイトが優れている理由：

• このチャリティーウェブサイトは、美しい配色のモダンなデザインです。 大胆な色の使用、画像の適切な組み合わせ、美しいタイポグラフィ、実際の写真の使用により、このサイトは他の非営利団体のWebサイトから際立っています。
• サイトのホームページには、One Dropのような訪問者とその行動を確実に理解できる、インスピレーションあふれるフルページのビデオが掲載されています。 ホームページの残りの部分はシンプルですが、同時に、美的にも組織が運営するプロジェクトやイベントを訪問者に紹介しています。
• One DropのWebサイトは、小さな画面でも同様に見栄えがします。 インタラクティブな要素とスムーズなトランジション効果があります。

ウェブサイト：onedrop.org

8.ロータリー

ロータリーは、永続的な変化を生み出すために世界中で活動している社会組織です。

彼らのサイトが優れている理由：

• このサイトでは、ホームページに複数のセグメントがあるビデオを使用して、ロータリーの人々の活動を紹介しています。 自動再生動画はすべてのサイトに最適というわけではありませんが、ここでは目的を果たします。
• サイトのナビゲーションバーはよく整理されています。 マウスポインタをその上に置くと、詳細なドロップダウンが表示されます。検索バーや、参加や寄付などの行動を促すフレーズもあります。

ウェブサイト：rotary.org

9.オックスファムオーストラリア

オックスファムは、コミュニティに力を与え、世界中の貧困に取り組む有名な国際組織です。

彼らのサイトが優れている理由：

• オックスファムは、標準的な非営利ウェブサイトの優れた例です。 彼らのサイトは非常に組織化されており、有益であり、いくつかのケーススタディが含まれています。 人間の顔と緑に焦点を合わせたカラーパレットを備えた画像の選択は、訪問者とすばやくつながるのに役立ちます。
• このサイトでは寄付が簡単で、いくつかの寄付オプションがあります。 オックスファムのプロジェクトページのいくつかは、フルページの画像、アニメーション、トランジション効果を利用した興味深いデザインを持っています。 これらのページは、他の非営利寄付Webサイトの中で目立つのに役立ちます。
• このサイトは完全にモバイル対応です。 コンテンツの多いページの一部でさえ、モバイルで完全に機能します。

ウェブサイト：oxfam.org.au

10.チルドレンインターナショナル

チルドレンインターナショナルは、貧困の中で暮らす子供たちを支援しています。

彼らのサイトが優れている理由：

• このサイトでは、背景に子供たちの画像を使用したスクロールを使用しています。 全体的なデザインは、非営利団体のブランドイメージとよく一致しています。
• ナビゲーションバーの検索ボックスとは別に、訪問者がスポンサーとなる子供を検索できる別の検索機能があります。 これは優れた機能です。

ウェブサイト：children.org

11.フォード財団

フォード財団は、公正で平和な世界を構築することを使命とする民間組織です。

彼らのサイトが優れている理由：

• フォード財団は非常にシンプルなウェブサイトを持っています。 しかし、それは組織化されており、ユーザーフレンドリーな設計原則に従っています。 ホームページには、リンク付きの複数のバナー画像があります。 左矢印または右矢印をクリックしてスクロールできます。
• ホームページの残りの部分には、ニュースやブログ投稿に関する見事に表示されたセクションが含まれており、タイプでフィルタリングできます。 ナビゲーションバーは適切に構成されています。
• すべてのページは、すっきりとした外観、たくさんの空白、エレガントなデザイン要素を備えています。 サイトのシンプルなデザインの選択は、それをより魅力的にします。

ウェブサイト：fordfoundation.org

非営利のウェブサイトにはさまざまなビジネス目的があります。 それでも、ターゲットグループやサポーターに必要な情報を提供するには、Webデザインのベストプラクティスに従う必要があります。

良いブランドイメージを維持することもまた別の重要な要素です。 見栄えの良いウェブサイトは、非営利団体がより多くの人々にリーチし、訪問者が彼らの目的を前進させるように動機付けるのに役立ちます。 あなたがウェブデザイナーであるならば、あなたは上記のサイトが有用なデザインインスピレーションであるとわかるでしょう。

一方、非営利団体を運営している場合は、これらの例を新しいサイトのサンプルとして自由に使用してください。 サイズや種類に関係なく、すべての非営利企業は確かなWebプレゼンスを持つに値します。 結局のところ、彼らはより大きな利益のために働いています。