あなたが好きになるバンドのウェブサイトのレイアウトを作成する7つの方法

新しいバンドのウェブサイトのデザインを始めたばかりでも、作業中の新しいプロジェクトのためにサイトを更新する場合でも、Bandzoogleのプラットフォームは、ウェブサイトのレイアウトの可能性を広げるための優れたツールを提供します。

どのバンドのWebサイトテンプレートを選択しても、レイアウトをカスタマイズして、特定のニーズと美的感覚に実際に役立つ外観を作成する方法はたくさんあります。

バンドやその他の音楽プロジェクトのウェブサイトを構築するときは、アーティストとしてのブランディングと価値観に忠実でありながら、可能な限り明確な方法で情報をレイアウトすることが重要です。

「画像とテキスト」機能は、Webサイトページの独自のレイアウトを作成するときに使用する私のお気に入りの機能の1つです。 これは非常に用途の広い機能であり、すべてのデバイスでクリーンなフォーマットを保証します。

この機能をセクションのカスタマイズと組み合わせて使用​​して、Webサイトでさまざまな目的のために7バンドのWebサイトレイアウトを作成する方法を紹介します。

最初に、必要に応じて使用または省略できる「画像とテキスト」機能のすべての要素について説明します。

• 画像：もちろん、「画像とテキスト」機能に画像を追加することはできます。 この画像は、正方形、円、または5：4または16：9の比率でトリミングできます。 [画像リンク]領域で、この画像にハイパーリンクを追加することもできます。 ウェブサイトに画像をアップロードする前に、必ずウェブ用に画像を最適化してください。
• 見出し： [テーマの編集]タブの[見出し1]設定から、フォントスタイルを取得する見出しを追加できます。
• 小見出し： [テーマの編集]タブの[見出し2]設定からフォントスタイルを取得する小見出しを追加できます。
• 説明：ここでの説明または「本文テキスト」は短くても長くてもかまいません。テキストがかなり長い場合は、画像の周りにテキストを折り返すオプションがあります（おそらく、詳細なアーティストの経歴については、後で詳しく説明します）。 ）。 説明領域のテキストにハイパーリンクを追加できます。
• ボタン：ボタンは、外部ページ、サイトのページ、トラック、アルバム、ファイル、または電子メールアドレスにリンクできます。

ここで、この機能とその他のレイアウトのカスタマイズをWebサイトに適用する7つの興味深い方法を紹介します。お楽しみください。

1.音楽カタログ、プロジェクトポートフォリオなどを整理します

ページ上で強調したいさまざまなプロジェクト、サービス、アルバムなどがある場合は、ページの複数の列に複数の画像とテキスト機能を使用して「ランディングページ」を作成することをお勧めします。

これが実際に動作していることを確認するには、Jojo Worthingtonの「ProductionandEngineering」ページをチェックしてください。このページでは、画像とテキスト機能を使用して、すべてのクレジットを整理された方法で一覧表示しています。

アーティストのウェブサイト：Jojo Worthington

同様の外観を得るには、最初に新しいページまたはセクションを作成します。 新しいページを作成するには、[コンテンツの編集]で[ページ]> [ページの追加]をクリックし、必要に応じてページに名前を付けます。 「マイページを作成」をクリックします。

新しいセクションを作成するには、[コンテンツの編集]で、ページの2つのセクションの間にカーソルを合わせ、青い[+セクションを追加]ボタンをクリックします。

あなたの音楽にマッチするカスタムルックアンドフィールで見事なウェブサイトをデザインしてください。 今すぐBandzoogleでウェブサイトを構築しましょう！

まず、ページのセクションを2列または3列に分割することをお勧めします。 [コンテンツの編集]で、[新しいセクション]（ページレイアウト内の青い水平線）をクリックし、作成したセクションにカーソルを合わせて[列の編集]をクリックし、ここで[2列]または[3列]を選択します。

「画像とテキスト」機能を追加するには、「機能の追加」>「画像とテキスト」をクリックし、灰色の配置矢印を使用して、このセクションの列の1つに機能を配置します。 「スタック」表示オプションを選択して、ボタンとテキストを画像の下に配置します。

次に、1つのプロジェクト/アルバムなどを表す画像を追加し、必要に応じてテキストを追加します。 タイトル/説明が不要な場合は、テキストフィールドからプロンプトを削除し、空白のままにします。

この画像にリンクを追加するには、画像のサムネイルの下にある[編集]をクリックします。 画像の横にメニューがポップアップ表示されます。 「リンク」をクリックして、リンクの種類を選択します。ディスコグラフィーページを作成している場合は、「アルバム」または「トラック」にリンクして、サイトに設定されているアルバムまたはトラック/シングルにリンクできます。 プロデューサー、エンジニアなどとしてポートフォリオを作成している場合は、「外部ページ」にリンクして、表示されたフィールドにプロジェクトのURLを入力できます。 [適用]をクリックします。
最後になりましたが、ボタンオプションがあります。ボタンを除外するには、[ボタンリンク]の下の[リンクなし]を選択します。 または、別のリンクタイプ（画像に適用したのと同じリンクの可能性が高い）を選択します。

[保存]をクリックして、これらの変更をすべて保存します。 ディスコグラフィー、プロジェクトポートフォリオなどのすべてのアイテムに「画像とテキスト」機能を追加し続けます。それらが構築されると、サイトの訪問者がクリックできるアイテムの優れたグリッドができます。

2.ホームページでプロジェクトまたは製品を強調表示します

「画像とテキスト」機能を使用するもう1つの優れた方法は、バンドのWebサイトのホームページでいくつかの重要な項目を強調表示することです。 ホームページは、最新のプロジェクトとサイトが提供するすべての概要を簡単に説明するのに最適な場所です。 おそらく、いくつかのエキサイティングな発表があるか、サイトの訪問者を新しいアルバム、オンライングッズストア、またはツアースケジュールに誘導したいと考えています。

「画像とテキスト」機能を使用して、これらのものをきれいに強調表示し、このコンテンツを見つけることができるサイトの内部ページに人々をリンクすることができます。 画像を使用すると、サイトの訪問者の注意を引くのに常に便利です。 これにより、ホームページがすっきりとシンプルに見え、サイトの内部ページとのやり取りが促進されます。

Wolf＆MoonとLightbound Musicはどちらも、ホームページでこれをうまく処理しています。

アーティストのウェブサイト：Wolf＆Moon

アーティストのウェブサイト：Lightbound Music

これらのページの両方で「コラージュ」表示スタイルが使用されていることに注意してください。 彼らは、コラージュオーバーレイの背景色がアートワークと完全に一致するように、新しい製品/プロジェクトを補完するようにWebサイトテンプレートをカスタマイズしました。

ここでは、セクションの背景色、コラージュオーバーレイの色、ボタンの色、使用する画像の色の間で、複数の色を実際に試すことができます。

3.あなたのバイオを増強して個性を追加します

「画像とテキスト」機能のタイトル、サブタイトル、ボタン、および画像オプションを使用すると、ミュージシャンの経歴を作成するときに多くの個性を追加できます。 必要に応じて、これらの項目のいずれかを含めるか省略するかを選択できます。

アニー・スミは彼女のバイオページでこれをうまくやっています。 アニーは、「画像とテキスト」機能の「小見出し」フィールドに、彼女の音楽の練習に共鳴する引用を配置しました。 これはスタイルが異なり、彼女の略歴の上部で強調表示されます。 彼女は「分割」表示オプションを使用して、画像をバイオテキストの横に配置しました。

彼女はアーティストの顔写真の画像を円に切り取っています。これは画像を補完するだけでなく、音楽のテーマとうまく調和しています。 「画像とテキスト」機能で画像を切り抜くには、画像のサムネイルの下にある「編集」をクリックします。 画像の横にメニューがポップアップ表示されます。 ここで「切り抜き」をクリックして、自分に合った切り抜きスタイルを選択します。 必要に応じて画像をドラッグして配置し、[適用]をクリックします。

彼女はまた、「オプション」の下の「テキストを折り返す」スイッチを「オン」に切り替えて、テキストが画像を折り返すようにしました。 これにより、さまざまな画面サイズに適切に対応し、バイオの全長にわたってページレイアウトが完全に見えるようになります。

アーティスト：アニー・スミ

4.超組織化されたEPKを作成します

「画像とテキスト」機能のもう1つの表示オプションは、「画像上のテキスト」です。 これにより、非常に多くの可能性が解放され、非常に画像に焦点を合わせた素敵なレイアウトを作成できます。 このオプションは、ウェブサイトにEPKを作成するのに最適です。予約者や他の業界の人々は、ワンクリックで探しているものをすばやく見つけることができるので、喜ばれます。 私は自分のバンドのEPKからこの例を引き出しています。ここでは、「Textonimage」オプションを使用して要素の輪郭が明確に示されています。

ここでは、上記の「ランディングページ」の提案（＃1）から同様のレイアウトを設定しました。 新しいアルバムで行った写真撮影のテクスチャ画像をいくつか使用し、これらすべてを円としてトリミングしました。 次に、各画像とテキスト機能に簡単な「見出し」を追加して、バンドのEPKに含まれるさまざまな要素にラベルを付けました。

各画像は、各カテゴリのコンテンツを保持する個別のメニュー外ページにリンクされています。 たとえば、私は特別な「EPK-写真」ページを持っており、その中にすべてのプレス写真が含まれています。

非常に視覚的なEPKページでこれを試してみてください！

アーティストのウェブサイト：The Lifers

5.サブスクリプション、サービスなどの情報ページを作成します。

メンバーの多くは、サイト訪問者にすばらしいサービスを提供しています。これがファンサブスクリプションの販売であろうと、その他のカスタムサービス（音楽レッスン、レコーディングセッション、セラピーなど）であろうと、メンバーが世界にもたらすものには常に驚かされます。

ジャッキーゲージは、サブスクリプションオファリングのすばらしい情報ページを作成しました。 ジャッキーは、「画像とテキスト」機能の「分割」表示オプションを使用して、提供するサービスの種類の概要を示します。 ジャッキーは、画像とテキスト機能の見出し、小見出し、ボタンのコンポーネントをうまく活用して、サイトの訪問者に重要な情報の概要を明確に示しています。 ここで素晴らしい仕事を！

アーティストのウェブサイト：ジャッキーゲージ

6。 レイアウトに大きな影響を与えるには、セクションの背景を使用します

素晴らしい画像には非常に大きな力があります。 セクションに背景画像を追加することで、ページを視覚的に分割します。 この休憩は私たちのスクロールする人間の目によって歓迎され、そのコンテンツはすぐに重要でエキサイティングなものとして飛び出します。 これは、ページのどこかに召喚状を組み込むためのもう1つの優れた方法です。

Intune Experienceは、ホームページでこれを美しく実行します。 彼らは、ホームページの途中のセクションに「セクション背景画像」として素敵なテクスチャ画像を設定しました。 彼らは「テキスト」機能に自分たちからの引用を追加し、その後にリンクされたボタンが続き、訪問者にセッションを予約するように呼びかけています。

このレイアウトは、個人的な感触を与え、視覚的に興味深く、魅力的なメッセージを明確に提供するため、完璧です。 シンプルさがここでの鍵です。

アーティストのウェブサイト：Becki Fleischer

7.楽しんでください！

少し実験したいのであれば、レイアウトを楽しくする方法はたくさんあります。 これは、形をしたトリミング、楽しい色、セクションの背景、さまざまな列のレイアウトなどを使用したレイアウトの可能性を試すサイトの優れた例です。

Piper Hayesは、ボーカルコーチングサイトで、円形のトリミングと画像とテキスト機能の「コラージュ」表示オプションを使用して、優れた美学を生み出しました。 このサイトは、素晴らしいカラーパレット、素敵なテクスチャイメージ、大胆不敵な個人的なタッチを組み合わせて、非常に居心地の良いオンラインスペースを作成します。

アーティストのウェブサイト：Piper Hayes

この投稿が、ページにさまざまなレイアウトを作成することで、自分のWebサイトに個人的で審美的に心地よいタッチをもたらす方法についてのインスピレーションを提供するのに役立つことを願っています。 もちろん、作成したものを確認してフィードバックを提供したい場合は、受賞歴のあるサポートチームに連絡してください。 メンバー全員に無料のバンドウェブサイトレビューを提供しています！