Ningでコミュニティを設計する方法
公開: 2018-05-16コンテンツは間違いなくあなたのNingネットワークの最も貴重な資産ですが、デザインにも非常に真剣に取られるべきものです。 あなたのコンテンツがどれほど関連性があり魅力的であっても、醜いウェブサイトを閲覧することに特に興奮する人はいないでしょう？ 真実は、 38％の人が、魅力的でないと感じた場合、Webサイトへのアクセスをあきらめることです。 明らかに、ネットワーククリエーターとして、これほど多くのオーディエンスを失いたくはありません。 それどころか、あなたはユーザーにあなたの作品のあらゆる側面に満足してもらいたいのです。
視覚的に魅力的でユーザーフレンドリーなネットワーク設計は、人々の注意を引き付け、可能な限り最高のユーザーエクスペリエンスを保証するのに役立ちます。 それは美的美しさだけの問題ではありません。 あなたのウェブサイトのデザインがプロフェッショナルで直感的である限り、より多くのユーザーがそれと対話したいと思うので、より多くの人々があなたのネットワークに参加し、あなたがあなたのウェブサイトに追いやるトラフィックが増えます。
さらに、ユニークで個性的なデザインにより、ネットワークを他のネットワークから際立たせ、その真のアイデンティティを明らかにすることができます。 結局のところ、私たちはニンが有名なパーソナライズされたソーシャルネットワークについて話しているのです。
しかし、見た目がかっこよく、ナビゲートするのに最適なWebサイトを設計するにはどうすればよいでしょうか。 Ningプラットフォームとその機能の調査を始めたばかりの人に役立つヒントをいくつか紹介します。
NING DesignStudioの使用を開始する
Ningの最優先事項の1つは、常にユーザーがネットワークの外観を最大限に制御できるようにすることです。 これが、DesignStudioが作成された理由です。
NING Design Studioは、Ningプラットフォームで作成されたソーシャルWebサイトのデザインをカスタマイズできるツールのセットです。 これは、すべてのNingネットワークをユニークで美しいものにすることを目的とした豊富なカスタマイズオプションをユーザーに提供します。
Design Studioは、すべてのネットワークページの左上隅にある緑色のツールバーとして使用できる管理ダッシュボードの対応するアイコンをクリックすることで簡単に起動できます。
DesignStudioメニューにはいくつかのカスタマイズカテゴリがあります。
- テーマ：ウェブサイトの一般的なデザインテンプレートを選択します。
- 背景：Webサイトの背景に表示される画像を選択して構成します。
- ヘッダー：ネットワークのトピックに一致するヘッダーを設計します。
- ページ：ネットワークページの全体的な外観を設定します。
- カスタムCSS ：カスタムCSSコードを挿入して、Webサイトのデザインに高度な変更を加えます。
各カテゴリには、いくつかの特徴的なカスタマイズオプションが含まれています。 真にプロフェッショナルに見えるWebサイトを設計するには、時間をかけて、あるカテゴリから別のカテゴリに徐々に進み、創造的なビジョンに従ってネットワークの各要素のパラメータを設定します。 あなたはあなたの美的好みに一致するようにあなたのウェブサイトデザインの実質的にすべての側面を構成することができます。
さらに、Design Studioを使用すると、変更を実際にネットワークに適用する前に、変更をプレビューできます。 これにより、カスタマイズプロセスが非常に便利で直感的になります。
実際のところ、すべてのデザイン要素はユーザーフレンドリーなインターフェイスを使用して簡単に変更できるため、DesignStudioを使用するのに技術的な知識やスキルは必要ありません。 ただし、自由に使用できるカスタマイズオプションの基本的な考え方を理解するために、それらをさらに詳しく確認してみましょう。
テーマ
テーマは、Webサイトの基本的なデザインを決定するテンプレートです。 ネットワークにテーマを適用することにより、ヘッダー、背景画像、ページレイアウト、ナビゲーションバー、フォントなどのデザイン要素のプリセットの組み合わせを適用します。
Ningは、さまざまなタイプのWebサイト向けに細心の注意を払って設計された、すぐに使用できるテーマを幅広く提供しています。 ポートフォリオのウェブサイトが必要ですか？ ライブラリ内の対応するテーマを選択してください。 音楽コミュニティを作成する準備はできていますか？ 問題ありません。Ningにもそのためのテンプレートがあります。
Ningが開発したすべてのテーマは、DesignStudioメニューの[テーマ]タブにあります。
目的に最も適したものを選択して、[公開]ボタンを押すだけです。 テーマを適用する前に、プレビューすることができます。
Ningテーマは、既存のすべてのプラットフォームで最高のパフォーマンスが得られるように慎重に最適化されているため、デスクトップデバイスとモバイルデバイスの両方で見栄えがします。
さらに、「テーマ」タブには2つのサブタブがあります。
- 履歴：以前にネットワークWebサイトに適用したすべてのテーマを確認できます。
- 管理：ここでは、テーマをインポートおよびエクスポートできます。 Design Studioは、.txt形式のテーマをサポートしています。
あらかじめ設定されたテーマをそのまま使用することもできますが、さらにカスタマイズして、完全にユニークなデザインにすることもできます。
バックグラウンド
背景画像を設定して、テーマのカスタマイズを開始します。 それを行うには2つの簡単な方法があります。
- Ningが提供する標準画像の1つを選択します。
- 独自の画像をアップロードして、背景として適用します。
自分の画像をアップロードするには、[背景]タブを選択し、カメラアイコンをクリックします。 
画像選択リストの右側には、背景画像を微調整するためのいくつかの追加オプションがあります。
- 色：背景の色を設定します。
- 配置と向き：背景画像の9つの位置から1つを選択します。
- レンダリング：背景画像がページ上でどのようにレンダリングされるかを定義します。 ドロップダウンメニューには、[並べて表示]、[横に並べて表示]、[縦に並べて表示]、[ストレッチ]、[標準]の5つのオプションがあります。
- スクロールオプション：スクロールを有効にするか、対応するラジオボタンをオンにして背景画像の位置を修正できます。
背景画像が完成したら、Webサイトデザインの最も重要な要素の1つであるヘッダーに進みます。
ヘッダ
ヘッダーは、Webサイトに関する紹介情報（名前、ロゴなど）とナビゲーションバーを含むブロックです。 ヘッダーはWebサイトのすべてのページに表示されたままで、通常は上部に配置されますが、デザインコンセプトによっては、ページの右側または左側に配置することもできます。
ウェブサイトのヘッダーのデザインを開始するには、[ヘッダー]タブをクリックします。 
タブ内には、ヘッダーのさまざまなパラメーターを設定できるいくつかのサブタブがあります。
スタイル：
ここで、ヘッダーの位置と方向を設定できます。 従来のオプションは上部にあるヘッダーで、背景画像、ネットワーク名、ロゴ、ナビゲーションバーが下部に含まれています。 ただし、ネットワークを目立たせるために、他の利用可能なバリアントを検討することができます。
さらに、対応するボックスに必要な値（ピクセル単位）を入力することで、ヘッダーのサイズ（高さと幅）とそのパディングを自由に変更できます。
ヒントほとんどのテーマのデフォルトの高さ制限は135pxです。
名前/ロゴ：
ヘッダーの重要な機能の1つは、Webサイト名（または会社/ブランド名）を伝達することです。 写真を完成させるには、ロゴも表示する必要があります。 NING Design Studioを使用すると、名前とロゴの両方を簡単にカスタマイズできます。
ネットワーク名を設定するには、管理ダッシュボードからアクセスできる[ソーシャルサイトマネージャー]メニューの[一般設定]に移動し、[サイト名]テキストボックスに名前を入力します。
次に、Design Studioに戻り、Webサイト名に適用するフォントのスタイル、色、およびサイズを選択できます。
ネットワーク名のカスタマイズが完了したら、ロゴをアップロードします。 これを行うには、カメラアイコンをクリックして、コンピューターで必要な画像ファイルを見つけます。 
ロゴがアップロードされるとすぐに、右側にあるスライダーバーを使用してロゴのサイズを調整できます。 パディングのサイズとロゴの配置を変更することもできます。
ナビゲーション
このメニューでは、ナビゲーションバーをカスタマイズできます。 背景色と境界線の種類を変更したり、タブとサブタブの両方のフォントを調整したり、色を設定したり、ホバー効果を制御したり、タブのパディングサイズを変更したり、タブ間の間隔を調整したりできます。 
バックグラウンド
ヘッダーを美しくユニークにするには、見栄えの良い背景画像を設定します。
「背景」メニューでは、キャンバスの背景と全幅の背景の両方をカスタマイズできます。 これにより、ヘッダーデザインを試すためのより多くの方法が開かれ、色と画像の適切な組み合わせを選択できるようになります。 選択したデザインテーマとネットワークのトピックに一致するものを見つけてください。 あなたは好きなだけ創造的になることができます！
適切な画像を見つけましたか？ 良い。 カメラアイコンをクリックしてアップロードし、位置と配置を調整するだけです–簡単です！
また、ヘッダーのサイズに合うように画像を編集したり、フィルターや効果を適用したりすることもできます。これを行うには、 BeFunkyやPixlrなどのオンライン画像編集ツールを使用します。 
アカウントバー
ここでは、各ネットワークページの上部に表示されるアカウントバーの色を設定できます。 背景色、テキストの色、ホバー効果を制御できます。 さらに、アカウントバーをブラウザウィンドウの上部に固定するオプションがあります。 
ページ
Design Studioメニューの[ページ]タブは、ネットワークページの全体的な外観をカスタマイズするのに役立ちます。 いくつかのサブタブが含まれています。
- 一般：ページの背景色を設定し、ページに表示されるフォントを選択し、段落の間隔を調整し、ページのパディングサイズとページ幅を変更します。 ウェブサイトをフルスクリーンモードで実行する場合は、[ページ幅]ドロップダウンメニューで[100％]を選択します。
- モジュール：モジュールのパラメーターを制御します。 モジュールは、ネットワークのページ全体に表示されるコンテンツブロックです。 背景色、フォント、タイルとコンテンツのパディング、タイルの配置などを変更できます。
- リンク：ページナビゲーションボタンや投稿タイトルなど、Webサイトに表示されるリンクの外観をカスタマイズします。
- ボタン：サイトでさまざまなアクションを実行するボタンのデザインを微調整します。
- 効果：ページとコンテンツモジュールの角をシャープまたは丸くし、プロフィール写真の形を設定します。
カスタムCSS
組み込みのカスタマイズオプションでは不十分で、コーディングに慣れていない場合は、[カスタムCSS]タブを調べてください。 カスタムCSSコードを挿入して、Webサイトのデザインに高度な変更を加えることができます。
CSSコードを入力できる領域は2つあります。
- グローバルCSS ：ユニバーサルカスタマイズを指します。
- テーマCSS ：テーマ固有のカスタマイズを指します。
技術に精通したユーザーは、カスタムCSS機能が、視覚的な表現に関してさらに印象的な結果を達成するのに特に役立つことに気付くでしょう。
あなたの完璧なウェブサイトをデザインする
視覚的に魅力的なウェブサイトをデザインすることは、インスピレーション、創造性、そして用途の広いカスタマイズツールの問題です。 NING Design Studioはこれらのツールを提供し、見栄えがよく、ナビゲートしやすいと感じるユニークで魅力的なWebサイトを開発することをお勧めします。
うまくいけば、Design Studioのコア機能のこの簡単な概要が、視聴者を本当に感動させるソーシャルWebサイトの作成に役立つことを願っています。 その間、実験を続けてください！ さまざまなこととそれらの組み合わせを試して、あなたが幸せで誇りに思うデザインに到達してください。
