VKontakteグループでバナーを作成する方法。 新しい VKontakte デザイン - 水平グループ カバー

02.09.2019 ソーシャルメディア

ソーシャルネットワーク VKontakte には毎日何百万もの人々がアクセスします。 注意を集中させるために、訪問したグループの所有者は VKontakte バナーを使用します。 VK ページにバナーを配置するプロセスには瞬間があります。 VK グループでバナーを作成する方法については、以下の記事で説明しています。 効果的なバナーの例を見て、自分でバナーを美しくする方法も考えていきます。

美しいデザインのグループは常に覚えやすく、より信頼を呼び起こします。 グループのデザインに取り組む必要があるので、新しい VK 製品について話しましょう。

VKontakte コミュニティでは、ピン留めされた投稿、カバー、またはアバターの写真がバナー画像として使用されます。 それはすべて、コミュニティをどのように設計するかによって決まります。

バナーの効果的な活用例を見てみましょう。 これを行うには、「moloko_coffee」公開ページにアクセスしましょう。

ここではヘッダーにあるダイナミック カバーが使用されています。 彼らは抽選終了までの時間をカウントダウンするタイマーを設定し、顧客に時間通りに参加するよう促した。 彼らは視覚的な要素も忘れていませんでした。

したがって、このバナーは、グループの宣伝とスタイリッシュなデザインという 2 つの役割を果たしました。

エディターで VKontakte グループのバナーを作成します


バナー写真を作成するには、さまざまなグラフィック エディタで作業できることが最初に必要です。 残念ながら、今日では特別なスキルがなければ、高品質でスタイリッシュな画像を作成することは非常に困難になります。

十分なスキルがない場合は、専門家の助けを借りたり、後で詳しく説明する既製のテンプレートを使用することをお勧めします。

最も頻繁に使用されるプログラム:

  • アドビフォトショップ;
  • アドビイラストレーター;
  • ギンプ。

これらは最も人気のある 3 つのプログラムです。 少なくとも 1 つを扱うスキルがあれば、本当に美しく便利なバナーを作成するのは難しくありません。

VKontakte バナーにはどのサイズを選択すればよいですか?

次に必要なのは、寸法に関する知識です。VKontakte 上のすべての画像と画像間の距離には独自のパラメータがあり、作業で考慮することが重要です。 それらを使用すると、より良い結果が得られます。

公開ページをどのようにデザインするかに基づいて、適切なサイズを使用します。

  • カバー – 1590 x 400 ピクセル。
  • アバター – 200 x 500 ピクセル。
  • ピン留めされた投稿 (正方形) – 510 x 510 ピクセル。
  • ピン留めされた投稿 (アバターと同じレベル) – 510 x 308 ピクセル。

ヘッダーバナーの作り方

まず、上記のプログラムのいずれかをダウンロードしてコンピュータにインストールする必要があります。 この手順では、Adobe Photoshop プログラムを使用します。

  1. プログラムを起動しましょう。
  2. その中の画像を開いてみましょう。

  1. 次に、「CropTool」ツールを使用して、1590 x 400 ピクセルのフレームを作成します。

  1. 次に、表示された部分を選択して Enter キーを押します。 画像はトリミングされます。

  1. 保存。

したがって、必要なサイズのバナーを受け取りました。

あとは、グループにアップロードするだけです。

  1. 「コミュニティ管理」に進みます。

  1. 右側で「設定」セクションを選択します。
  2. 「Cover」行を見つけて「アップロード」ボタンをクリックします。

  1. パソコン上のファイルを選択し、表示する部分を選択します。

  1. 変更を保存します。

他のエディタのプロセスも同様です。

バナーを一から作成することにした場合(デザイン、スタイル、テキストなどすべて)、デザインスキルも必要になります。

VKグループで固定バナーを作成する方法

固定バナーの作成は、1 点を除いてカバーと同じ原則に従って実行されます。フレームは 510 x 510 (308) ピクセルの寸法で作成されます。

公開に追加するには、次のものが必要です。

  1. 投稿を作成します。
  2. 作成の際は完成画像(バナー)をアップロードしてください。

  1. 投稿を公開します。
  2. 省略記号の付いたボタンを押して固定します。

そこで、一番目立つ場所に設置しました。 メニューに広告やリンクを追加するだけです。

VKontakteで隣接するバナーを作成する方法

それでは、最も難しくて興味深い部分に移りましょう。

隣接画像とは何ですか? これらは、互いに直接連続している 2 つ以上の別々の写真です。 この方法は、公開ページだけでなく、VKontakte 上のプロファイルの作成にも使用されます。

次の 2 つのバナーから 1 つを選択できます。

  • 隣接するカバー付きバナー VK。

  • アバターの隣にあります。

最初の画像を作成するときは、両方の画像の左端が一致する必要があります。

2 番目のオプションを作成するときは、次の 3 つの点を考慮する必要があります。

  • グループにはステータスがありますか。固定された部分が 10 ~ 20 ピクセル下にシフトされます。
  • 投稿にテキストが含まれていますか - 写真も下に移動します (テキストのサイズに応じて)。
  • 画像を同じレベルの下端で終了させますか。

アバターと同じレベルの一番下で終わる固定バナーを作成することに決めましたが、20 ピクセルを必要とするステータスがあるという事実を考慮していなかったとしましょう。 その結果、左側の写真が下に移動し、右側の写真と一致しなくなります。

些細なことのように思えますが、結果は良くありません。 したがって、注意してください。

次に、作成プロセス自体に移りましょう。

  1. まず、2 つの空白を取る必要があります。最初の空白は 200 x 500 ピクセル、2 番目の空白は 510 x 308 ピクセルです (他のパラメーターがある場合もあります)。
  2. 次に、1 つ目をアバターの場所にロードし、2 つ目を記録の場所にロードします。

  1. 次に、スクリーンショットを撮ります。
  2. スクリーンショットを Photoshop に読み込みます。
  3. 次に、「CropTool」ツール上で 2 番目のマウス ボタンをクリックし、「SliceTool」を選択します。

  1. ピクセル精度で 2 つの領域を選択します。

  1. レイヤーから鍵アイコンを削除し、非表示にします。

  1. 画像を追加し、フレームに合わせて調整します。

  1. ファイルを Web 用に保存します。 そして設定でJPEG形式を選択します。 html形式で保存され、画像フォルダーに写真が保存されます。
  1. 次に、画像をその場所にロードします。

最終的に得られたものは次のとおりです。

かなり印象的に見えます。 ここに広告やメニューへのリンクなどを追加することを忘れないでください。

既製の VK バナー テンプレート

次に、プロの編集者の知識がなくても、VKontakte グループでバナーを作成する方法を見てみましょう。これを習得するには数か月かかる場合があります。 既製のソリューションを活用してください。

次に、既製のテンプレートについて話しましょう。

まず、必要なサイズのバナーをダウンロードできるサイトがあります。 次のようなサイトです。

  • Vk-oblozhki.ru
  • そうだね
  • Psd-box.at.ua

2つ目は、オンライン上で自分だけのスタイリッシュな画像を作成できるサービスを利用することです。 ここにテキストやロゴなどを追加できます。 これらは次のようなサービスです。

  • Fotor.com;
  • Canva.com。

このようなソフトウェアを使用すると、グループの作成プロセスが大幅に簡素化されます。

結論

VK 公開ページのバナーを作成するには、グラフィック エディターを使用する特定のスキル、忍耐力、問題の理解が必要です。

デザイン要素も忘れないでください。 彼女はとても大切な人です。 グループ内の画像はユーザーを反発すべきではなく、逆にユーザーを引き付ける必要があるためです。

この記事がお役に立てば幸いです。

バナー メーカーの最初の利点は、オンラインで利用でき、追加のソフトウェアをインストールする必要がないことです。 スクリーンショットからわかるように、サービス自体は小さく、メニューリンク、コントロールボタン、さまざまな設定で過負荷になっていません。 メイン ページには [マイ プロジェクト] セクションと [インスピレーション] セクションが 4 つだけあります。 Facebook または通常の登録 (電子メール + パスワード) による承認後、バナー、ポスター、または招待状の作成を開始できます。

バナーの作り方

このサービスには、必要なツールがすべて揃っています。 バナーを作る迅速かつ効率的に必要な形式でダウンロードできます。 既製のバナーには、JPG、PNG、PDF などのいくつかの画像形式が使用できます。

バナーを作成するには、始めるだけです。 デザイナーのウェブサイトにアクセスします。

  1. 提案された既製デザインのライブラリから既製デザインを選択できます。 実際、画像とデザインに満足したら、テキストを独自のものに置き換えるだけで済みます。
  2. または、希望のサイズを設定するか、提案された形式 (Facebook、Instagram、ポスターなど) から選択して画像をサービスにアップロードすることで、最初から作成を開始することもできます。

テンプレートから希望のサイズを選択するか、独自の寸法を指定したら、バナー作成ページに移動します。 左側のメニューが変わり、スクリーンショットのようになります。 これで、ギャラリーから写真、背景、またはパターンを背景に追加したり、独自の写真をアップロードしたりできるようになりました。 残りのセクションでは、ライン、フレーム、シェイプなどが見つかります。

追加された各要素は、異なる色で再描画したり、サイズ、位置、透明度を変更したりできます。 テキストは個別に追加され、それに対して上記のすべての変更を行うこともできます。 ロシア語フォントはサービスで利用できます。

完成したプロジェクトはアカウントに保存され、必要なときにいつでも編集に戻ることができます。 完成したバナーやポスターはいつでも画像または PDF 形式でダウンロードできます。 何かがうまくいかない場合は、下のビデオをご覧ください (音が静かです、悲しいことに、結果的にそうなってしまいました)。そこで、バナーなどの簡単なものを作成し、ダウンロードしてみます。

デザイナーと作業するには、Chrome ブラウザを使用することをお勧めします。保存するときに、Mozile が .png 拡張子に適合しないことに気付きました。これは、ファイルの名前を変更し、必要な (ダウンロードされたファイルに) を追加するだけで解決できます。 ) ドットと名前 (png または jpg)。 それだけのようです。

最近では、クローズド チャットのスペシャリスト、初心者のターゲットロジスト、SMMer、さらには、次のことに挑戦している起業家も参加しています。 V 宣伝投稿、非常に多くの場合、「どのサイズが必要ですか?」という質問が行われます。 プロモーション投稿用?。 そこで、具体的にどのようなフォーマットにすればよいのか、例を用いて詳しく説明することにしました。 プロモーション投稿用のバナー、PC、携帯電話、タブレットでできるだけ美しく、ボリュームたっぷりに表示されるようにします。 さて、行きましょう:)

わかりやすい例として、サイズ 1280*720 と 800*525 の 2 つのバナーを比較してみます。 はい、ところで、バナーのサイズと品質は異なる場合があります。ここで最も重要なのは比率です。 したがって、さまざまなデバイスのニュース フィードでこのようなバナーがどのように表示されるかは次のとおりです。

PC - 古いデザインの VKONTAKTE



ご覧のとおり、右側のサイズ 800*525 のバナーは、サイズ 1280*720 を使用した場合よりもインデントが大幅に大きくなります。 ただし、ニュース フィードを介して表示できる範囲はより広く、より広い範囲をカバーします。 これらのバナーが新しい VKontakte デザインでどのように見えるかを見てみましょう。

PC - 新しいデザインの VKONTAKTE


さて、新しい VKontakte のデザインでは、これらのサイズは両方とも高さだけが異なり、幅は同じままです。 また、古いバージョンの VK とは異なり、右側に大きなくぼみは見られません。 ただし、800*525 のバナーは、1280*720 サイズよりもニュース フィード内の表示領域がはるかに大きく、画像がより高く、より大きくなります。

次に、iOS 上の VKontakte アプリケーションのモバイル バージョンでこれらのバナーがどのように表示されるかを見てみましょう。

モバイル - ニュースフィード


新しい VKontakte デザインと同様に、800 * 525 のバナー サイズは、1280 * 720 のバナーよりもはるかに大きく (高く) 見えます。 これはモバイル版にとって非常に大きな利点です。モバイル版ではニュース表示領域が小さく、このバナー サイズの広告がその大部分を占めてしまうからです。

さて、ニュース フィードで正方形の画像がどのように表示されるかを見てみましょう。 わかりやすくするために表を作ります。

PC - 古い VKontakte デザインPC - VKontakte の新しいデザインモバイル - VKontakte アプリケーション







さて、800*525 以上のサイズの写真は、正方形に近づき、より良いビューが得られることがはっきりとわかりました。 しかし! プロモーション投稿にはテキストも含まれることを忘れないでください。そのため、画像のサイズを選択するときは、さまざまなデバイスでテキストを表示するために、画像がニュース フィード内の表示スペースをすべて占めないようにする必要があることを忘れないでください。 大事です!

現在、視聴者の一部は新しいデザインを使用して VKontakte に「座っている」ため、ほとんどは古いデザインを使用しているため、サイズ 800*525 を使用することをお勧めします。 はい、右端からのインデントを減らそうと他のサイズを試してみましたが、増加するだけで、最小のインデントは (モバイルでの大きな表示を考慮して) 800*525 でした。

さて、今日はここまでです。 ご注目と質の高いプロモーションをありがとうございます! 😉

ご清聴ありがとうございました!

2016 年の夏、ソーシャル ネットワーク Vkontakte の開発者は、ついに完全に更新されたデザインでユーザーを驚かせました。 正直に言うと、このサイトの常連は新しいデザインに対して非常に複雑な反応を示しました。これは、流出した画像をデザイン (アバター + バナー) として使用するコミュニティの所有者にとってはさらに真実でした。 ピン留めされたニュースとアバターの間の距離は文字通り 2 倍になり、バナーは著しく大きくなり、低くなり、コミュニティのサムネイルは正方形ではなく丸い領域になりました。これらすべての厄介な瞬間が、注文した人々に多くの問題を引き起こしました。グループ向けのデザインを以前にインストールしました。 この状況を打開する唯一の方法は、コンセプトを維持しながら新しい要件を満たすために古い設計を作り直すことでした。

VKontakte コミュニティのデザインは非常に面倒に思えますが (特に他のソーシャル ネットワークと比較した場合、通常は長方形のカバーと正方形のアバターで十分です)、これは実際には完全に真実ではありません。 次に、グラフィック イメージの要件と、一般にそのようなグループを設計する方法について説明します。

コミュニティを魅力的かつ魅力的なものにするための最初の方法は、標準的な「アバター + バナー + メニュー」スキームです。

アバター

アバターのサイズは 200 x 500 ピクセルのままでした (ただし、品質に余裕があれば 400 x 1000 よりも優れています)。ただし、当初、新しいデザインのベータ テスト中に、サムネイルのサイズ オプションとして 200 x 300 が検討されました。は円形になりましたが、この円が正方形に内接する場合、その寸法は以前と同様に 200 x 200 ピクセルになります。

バナー(固定投稿)

最適なバナー サイズは 1024 x 680 ピクセルです (品質マージンあり)。 インターネット上で理想的なバナー サイズのさまざまなバリエーションを見つけましたが、それでも 1024 x 680 であれば、コンピューター、通常のモバイル バージョン、または Android アプリケーションから表示したときに、バナーの一部が切れることはありません。 また、画像上部のコミュニティ名が重複し、投稿日が画像下の領域から重複した名前の場所に移動したため、バナーが低くなっている点にも注目してください。 もう 1 つの重要な点は、モバイル デバイスからバナーをクリックできないことです。 それらの。 携帯電話からは、画像自体ではなく、画像の下のリンクをクリックする必要があります。

メニュー

メニューのデザインと Wiki のマークアップに関しては、一般的には何も変わっていません。 前と同様に、メニュー幅は 606 ピクセル、長さは任意の値を使用します。 モバイル デバイスでの応答性を高めるには、テーブル内にナビゲーションをレイアウトすることをお勧めします。この方法では、携帯電話で表示すると、画面に合わせて単純に比例して圧縮されます。 ただし、項目が単純に上下に配置されるナビゲーションを作成した場合は、これを行う必要はありません。テーブル メソッドは、行にボタンの数が複数あるタイプのメニューにのみ必要です。 。 一般に、ユーザーの利便性を考えると、資料へのリンクだけのメニューを作成するのではなく、複雑な構造の Wiki ページを作成する方が良いでしょう。

デザインに 1 つの画像が必要な場合は、まずアバターと固定ニュースの形式のバナーを実験のためにいくつかのグループにアップロードします。 サンプル コミュニティからすべてのデータ (ステータス、名前) をグループにコピーし (このデータはニュースで重複するため、これは重要です)、クライアントにバナーの上に表示されるテキストを尋ねます。
この後、スクリーンショットを使用してサンプルを取得し、Photoshop に配置する必要があります。

「表紙+バナー+メニュー」といったデザイン方法もあります。 一般に、表紙だけを残し、最も重要な情報をすべてその上に置くことができます。 しかし、いずれの場合でも、アバターを設定する必要があります。アバターはグループ自体には表示されませんが、コミュニティのミニチュアはそこから取得されます。 最適なカバー サイズは 1590 x 400 ピクセルで、「コミュニティ管理」-「コミュニティ カバー: アップロード」コマンドを使用して画像をアップロードできます。

VKontakte デザインの画像サイズ

  • アバター: 200 x 500 ピクセル (品質は 400 x 1000 ピクセル)。
  • アバターのサムネイル 200 x 200px
  • グループ内のピン留めされた投稿のバナーまたはサイズ: 1024 x 680 ピクセル、ただし幅 510 ピクセル以上。
  • メニュー: 幅 606px;
  • 1590 x 400 ピクセルをカバーします。

この記事では、クライアントとクライアントの好みと対話した経験に基づいて、VKontakte グループの設計に関するすべての知識を体系化したいと思います。 さらに、過去 6 か月にわたって、VKontakte は多くの人が気づいていない多くの変更を加えました。 いくつかのイノベーションについてさらに詳しく説明したいと思いました。なぜなら、その中には本当に価値があり便利なものがあるからです。 私たちは皆、VKontakte の再設計後のショックから立ち直ったようで、目に見える変化の背後にあるグループの多変量機能と内容を発見しました。 したがって、グループのデザインには、美しい写真の形式のグラフィック コンポーネントだけに限定されない複雑な手順が含まれます。 現在、所有者は、ビジネスのテーマやユーザーの利便性に応じて、グループ構造を構築する際のさまざまなニュアンスを考慮する必要があります。

これは主に、相互に排他的な 2 つのオプションからのグラフィック デザインの選択、内部メニューの開発、内部メニューへのエントリ ポイントの選択、カタログと製品表示の違いの理解、グループを宣伝するための販促資料の作成、および便利なアプリケーションの使用に関するものです。 。 しかし、まず最初に。 まず、グループの基本的なデザイン要素を見ていき、次にさまざまな組み合わせの形でのそれらの相互作用に進み、その後、いくつかの便利な機能と微妙な点について説明します。

1. 横表紙(ヘッダー)
横向きの表紙またはヘッダーから始めましょう。 VKontakte の開発者は、このカバーはそのサイズにより、情報の提供と視覚化においてより優れた操作性を提供すると保証します。 通常、ヘッダーには美しい写真に加えて、ロゴ、付随情報、連絡先、グループに参加するための呼びかけ、Web サイトのアドレスが含まれます。 いつかカバーがグループにとって可能な唯一のデザインオプションになるのではないかと私は疑っています。そのため、後で不可抗力でデザインが変更されることを避けるために、すぐにカバーに切り替えることをお勧めします。





カバーをアップロードする方法
カバーをダウンロードするには、コミュニティ管理 >> 基本情報ブロック >> コミュニティ カバー >> アップロードに移動する必要があります。 推奨されるカバー サイズは 1590x400 ピクセルです。 ヘッダーには、クリックできる機能するボタンはありません。本質的に、それは画像であり、それだけです。 現在、このカバーはモバイル デバイスで表示され、アプリケーションやクライアントでもすでに表示されているようです。

Wiki タブ 最新ニュース
ヘッダーの下の一番上のブロックには、固定された投稿、コミュニティに関する情報、Wiki メニューの 3 つのタブができるようになりました (グループ内のみ。公開ページにはそのようなタブはありません)。 依然としてピン留めされた投稿が強調されていますが、その存在があっても、ユーザーはタブを切り替えることでいつでもコミュニティに関する情報にアクセスできるようになります。 Wiki メニュー タブ (最初は最新ニュースと呼ばれます) を表示するには、コミュニティ管理 » セクション » マテリアル » 制限付き (またはオープン) » 保存に移動する必要があります。

2.縦型アバター
次に、200x500 ピクセルのグループの古き良きアバターに注目してみましょう。 現時点では、これはグループを設計する方法でもあります。 通常、アバターには、ロゴ、付随するテキストまたはスローガン、連絡先、グループに参加するための電話番号などの情報が含まれます。 モバイル デバイスでは、アバター全体は表示されず、その一部 (サムネイル) のみが表示されます。 グループをデザインするには、水平ヘッダー (カバー) または垂直バナーを使用できます。 ヘッダーがある場合、縦型アバターは表示されません。 アバターには押すことができる機能的なボタンはありません。本質的にそれは写真であり、それだけです。

3. ミニチュア
現在、サムネイルの作成には垂直アバターが使用されており、その最小サイズは 200x200 ピクセルです。 サムネイルは、投稿やエントリーではタイトルの近くに小さな円の形で使用され、一部の選択やコミュニティでの言及では大きな円の形で使用されます。 丸型への移行に伴い、ミニチュアへの要求もより厳しくなりました。 ミニチュア上のテキストを完全に読み取るためには、視覚的に円の境界を超えてはなりません。

サムネイルをアップロードする方法
ミニチュアは完全に独立した要素になっており、グループのデザインでカバー (ヘッダー) を使用する場合は、別のミニチュアを作成する必要があることに注意してください。 グループにヘッダー (カバー) がない場合、サムネイルをアップロードするには、アバター ブロック (右上) の [写真をアップロード] をクリックする必要があります。 デザインにヘッダー (カバー) が含まれている場合、サムネイルをアップロードするには、ヘッダーのすぐ下の円をクリックし、そこで「写真をアップロード」を選択する必要があります。

4. バナー
バナー (英語のバナー - 旗、バナー) は、情報、広告、またはインセンティブの性質を示すグラフィック画像です。 バナーは画像として投稿に添付され、内部リンクは 1 つだけ含めることができます。 多くの人は今でも、メイン ページのバナーからいくつかのリンクが作成できると信じています。 これは真実ではありません。リンクを 1 つだけ付ければそれで終わりです。 次のタイプのバナーを強調表示します。

4.1 情報バナー
企業、グループ、サービス、イベントに関する一般的な情報と、特典やその他の付随資料の詳細なリストを含む一般的なタイプのバナー。 グループ内の固定投稿としてよく使用されます。 このバナーのサイズは 510x307 ピクセルです。 このサイズでは、バナーの下部がアバターと一致します。 アバターとの関連性がなければ、任意のサイズを使用できます。 たとえば、サイズは 600x350 ピクセルを使用します。 510x510 ピクセルの正方形フォーマットも便利で、現在人気が高まっています。このサイズでは、バナーはニュース フィード内で可能な限り最大の領域を占めます。

4.2 内部メニューに入るバナー
前の段落のバナーに「メニューを開く」というキャッチーな碑文を追加すると、内部メニューへのエントリ ポイントとして機能することを主な役割とするバナーが得られます。 場合によっては、バナー上に複数のボタンの形でおとりを作成することがありますが、これは錯覚であり、ユーザーはクリックすると内部ページにアクセスし、各ボタンには独自のリンクが設定されます。 このバナーのサイズは 510x307 ピクセルです。 このサイズでは、バナーの下部がアバターと一致します。 メニューへの入り口がアバターに関連付けられていない場合は、バナーを任意のサイズで作成できます。「メニューを開く」と書かれた狭いボタンでも可能です。 主なことは、バナーの幅が少なくとも 510 ピクセルであることです。

4.3 再投稿、プロモーション用のカード
最近、リポストやプロモーション用のカードが特に重要になってきています。 そのタスクは、特定のアクションを呼び出すことです。 基本的には「グループに参加し、リポストまたはいいね!をして賞品を獲得する」です。 このようなバナーは、独自のグループ内および他のグループのプロモーションの両方で、広告キャンペーンまたはプロモーションの一部として使用されます。 私は通常 600x350 ピクセルを使用します。

4.4 GIF アニメーション付きバナー
今年の初めに VK 開発者が gif 画像のサイズを大きくした後、gif はすぐに情報バナーと同等の地位を確立しました。 たとえば、GIF バナーでは、変化するいくつかの製品やテキストの画像を表示でき、動きはすぐに注目を集めます。 そして6月に機能が追加されたとき 自動実行GIFアニメーションニュースフィードにおいて、GIF は広告主やマーケティング担当者の注目を集める対象となっています。

5.アバター+固定バナーデザイン
最近まで、アバターとピン留めされたバナーで構成されるこのモジュール型デザインが、グループをデザインする最も一般的な方法でした。 この設計を行う方法の詳細については、レッスンで説明します。 ヘッダー(表紙)の登場により、このデザインの人気は少し下がるかもしれません。

さらに、過去 6 か月間に 2 回発生したように、VKontakte がブロックの一部のパラメータを再び変更し、その後デザイン全体が崩れてしまう可能性があります。 したがって、グループオーナーの皆さん、グループのデザインを選択するときは、この事実を考慮してください。 はい、そしてもう 1 つ、モバイル デバイスでは、アバターは表示されずサムネイルのみが表示され、ピン留めされた投稿はそのすぐ下にあるため、1 枚の写真の美しさはすべて表示されません。

6. 内部ナビゲーションメニュー
アクティブ リンクの形式のメニューは内部 VKontakte ページにあり、wiki マークアップ コマンドを使用して記述されています。 内部ページ自体の作成方法はレッスンで説明されています。 メニューを使用して、ユーザーはグループ内を移動します。 以下では内部メニューの種類について説明しますが、ここではいくつかの重要な点に焦点を当てます。

内部メニューへのエントリ ポイント
あまり重要視されていない微妙な点を 1 つ指摘したいと思います。 クライアントが私に内部メニューを注文することがありますが、ユーザーがどのようにしてこの内部メニューにアクセスするのかまったくわかりません。 そして、これには 2 つの方法でアクセスできます。1 つはピン留めされたバナー (4.2 項を参照) から、もう 1 つはステータス ラインの下の上部タブにあるテキスト リンクからです (下の図を参照)。 場合によっては、インターフェイスの右列の「リンク」ブロックにテキスト リンクが配置されることもあります。

内部メニューリンク
通常、注文の際、顧客は次のメニュー項目を指定します: 当社について、当社製品 (カタログ)、配送方法、支払い、保証、レビュー、連絡先、プロモーション、割引、スケジュール、注文方法、ポートフォリオ、質問と回答、情報、注文する。 メニュー項目からのリンクは、外部サイトの対応するセクションに移動できます。 その後、リンクが新しいウィンドウで自動的に開きます。 ほとんどのポイントは内部の VKontakte ページにつながります。 この場合、ページは同じウィンドウで開き、リンクまたは「メインメニューに戻る」ボタンを作成する必要があります。

写真やビデオが含まれるアルバムへのリンクが新しいウィンドウで開きます。 ディスカッションのあるトピック (レビューなど) へのリンク、メッセージを作成するためのダイアログ ボックスへのリンク、アプリケーション (ポイント 10 を参照)、ハッシュタグによる選択 (ポイント 12 を参照) へのリンクが同じウィンドウで開きます。この場合、次のリンクに戻ることができます。メニューには、サイトのメイン ページ、またはブラウザの「戻る」ボタンからのみアクセスできます。 おそらく、このようなリンクで最も不便な瞬間がこれです。

メニューの編集
クライアントから、内部メニューを編集できるかどうかよく尋ねられます。 私の答えは、自信のあるユーザーで、Wiki のマークアップと編集モードに精通していれば編集できる、ということです。 しかし、これらすべてに精通していない場合は、絶対にそうではありません。 この場合、すべての設定が台無しになります。

VKontakte開発者自身の言葉を引用します。 「1 つのシンプルなアドバイスがあれば、多くの労力と神経を節約できます。つまり、1 つのモードだけで作業するということです。 ビジュアル モードまたは Wiki マークアップ モードのいずれかです。 マークアップの作業中にこれら 2 つのモードを切り替えるときに、ほとんどの問題が発生します。画像が小さくなったり、さまざまなパラメータが消えたりする可能性があります。 これは将来的には間違いなく修正される事項の 1 つですが、現時点ではこの事実を心に留めておく必要があります。」

モバイルの応答性
そして適応性についてもう一つ。 内部メニューをモバイル デバイスでも同じように表示するには、テーブル上にメニューをレイアウトする必要があります。 そうすればイメージはしっかりと固定されます。 そうしないと、画面サイズが小さくなったときに、画像が次々と下に移動して、本来の順序に反してしまう傾向があります。

ここでもまた、適応性についての開発者の言葉を紹介します。 「Wiki メニューはモバイル ブラウザーに表示されますが、画面サイズに適応しないため、画像がコンピューター上で表示されるものと同じに見えない可能性があります。 Wiki マークアップをモバイル デバイスに適応させる方法に関するガイドはオンラインで見つけることができますが、それらでもすべてのデバイスで 100% のパフォーマンスが保証されるわけではありません。」

7. 内部ナビゲーションメニューの種類
以下は、最も一般的なタイプの内部メニューです。 高度な信頼性を備えた、よりシンプルで安価なソリューションがあります。 また、グラフィックスやレイアウトの点で、より複雑で労力のかかるデザインもあります。 しかし、それらはより印象的に見えます。

7.2 大きなグラフィカルメニュー
この場合、リンクの垂直列は大きな背景画像上に配置され、しっかりと固定された構造を持ちます。 ここからはレッスンです。

7.3 アイコン、タイル形式のメニュー
このデザインには、グラフィック アイコンとその碑文、またはグラフィックの多色またはモノクロ タイルの形で複数の行と列が含まれます。

7.4 ナビゲーション効果のある動的メニュー
ボタンのクリックや訪問したリンクのその他のマークの効果を使用して、サイト ナビゲーションをシミュレートする非常に印象的なデザイン。 このようなメニューは管理が非常に難しく、Wiki マークアップ内のページの情報も編集する必要があるため、Wiki マークアップと通信するスキルが必要です。 このトピックに関するレッスンは次のとおりです。