2020.12.07

デザインテンプレートをカスタマイズするためのポイントを解説

ホームページ作成サービス「BiNDup」に搭載されているデザインテンプレートは業種に合わせたコンテンツやデザインがあらかじめ設定されています。あなたの目的に合っていれば、そのまま写真やテキストを入れ替えるだけでサイトが完成します。
ただ、目的に合ったテンプレートが見つからなかったり、業種は違うけど気に入ったデザインを使いたいというケースもあると思います。

デザインテンプレートを生かしながら、自身の目的に合ったサイトを作るためのポイントを紹介します。
最後に実際にこの記事でカスタマイズしたサンプルデータも配布していますのでご利用ください。

テンプレートを選ぶ

テンプレートには目的に合わせたコンテンツが装備されているので、まずは業種や目的で探すのがおすすめです。
タグでソートしたり、カラーで選んだり、フリーワードを入力して目当てのものを探すことができます。

該当する業種や目的に合ったテンプレートが見つからない場合は、近い業種や合いそうなデザインで探してみましょう。

今回は最新テンプレートの中からサロンのテンプレートを使って、アートギャラリーのサイトを作ってみます。

サイトの構成を考える

まずはサイトにどのようなコンテンツを入れるかを検討します。
テンプレートの構成をそのまま使う場合は、この工程はスキップしてコンテンツを編集するに進んでも大丈夫です。

どんなコンテンツを入れるか迷った時は、同業種のサイトを参考にしてみるとよいでしょう。
今回は以下のようなコンテンツを入れていきます。

開催中の展示会
お知らせ
今後のスケジュールとアーカイブへのリンク
ギャラリーについて
アクセス情報

ワイヤーフレームを作成

コンテンツが決まったら、ワイヤーフレームを検討します。
ワイヤーフレームとは、簡単にいうとサイトの設計図となるものです。サイト全体のページ構成やリンクの動線などをこの段階でしっかり検討しておくと、サイトの作成がスムーズになります。

テンプレートにはあらかじめ必要なページが入っているので、使用するテンプレートの構成をベースにしながらレイアウトを検討します。
全体像を見通すことが大切なので、ワイヤーフレームは手書きでも十分です。

必要なコンテンツに合わせてレイアウトを検討

テンプレートのコンテンツを並べ替える

ワイヤーフレームに合わせて、実際のテンプレートのブロックを並べ替えます。使わないブロックは削除します。
使うか使わないか迷うブロックは一旦非表示にしておいても大丈夫です。サイトを仕上げる時に削除しましょう。

デザインテンプレートはレイアウトがしっかり作り込まれているので、並べ替えるとレイアウト崩れが起こる場合があります。今回のサンプルのように並び替えが必要な時は、ブロックを1つだけ移動するのではなく、コンテンツ単位でまとめて移動するようにしましょう。

ブロックは1つずつ上下に移動したり、エリアの最上部・最下部に移動したりできます。
シングルページのようにブロックの数が多く、ページの途中に移動するのが大変な時は、ブロックをコピーして移動先にペーストする方法もおすすめです。ペーストした後で、元のブロックを削除してください。

【参考】ブロック編集の概要｜BiNDupサポートサイト

コンテンツを編集する

レイアウトが決まったら、それに合わせて原稿や写真を準備し、実際に反映していきます。

以下が今回編集した部分や、テンプレートを編集する時に気をつけたいポイントです。

画像やテキストを編集

テンプレートに入っている写真やテキストは基本的にサンプルだったりダミーだったりします。ご自身のサイトに合わせた内容にきちんと差し替えるようにしましょう。

コンテンツを追加

テンプレートにないコンテンツは自分で追加することもできます。
新しく作成することもできますが、ブロックテンプレートを利用すれば目的に合わせたコンテンツを挿入できます。今回もブロックテンプレートを利用して、地図のブロックを追加したり、お知らせ（ブログの記事一覧）を違うレイアウトに変えたりしました。

【参考】ブロックテンプレートを利用する｜BiNDupサポートサイト

メニューを編集する

コンテンツが反映できたら、ヘッダー（ページ上部）やフッター（ページ下部）にあるメニューを編集します。メニューのテキストやリンク先を、実際のコンテンツに合わせて編集してください。

シングルページの場合、リンクの目印となるアンカーの設定も間違いがないかを確認します。リンクを飛ばしたいブロックにアンカーを設定し、リンクを飛ばさないブロックのアンカーは削除します。

【参考】アンカーへのリンクを設定する｜BiNDupサポートサイト

余白を調整する

テンプレートのコンテンツを並び替えりした時は、必要に応じてブロックごとの余白も調整します。
どのくらいの余白にしたらいいかわからない時は実際のプレビューを見てみて、コンテンツ同士がくっつきすぎているなと思ったら少し余白を足したり、間隔が開きすぎているなと思ったら余白を半分にしてみたりして、少しずつ調整してみてください。

余白を変えるだけでコンテンツが見やすくなることがあるので、できるだけ気にかけておきたいポイントです。

【参考】ブロックエディタの画面構成【設定タブ】｜BiNDupサポートサイト

デザインを調整する

ここまででサイトは完成といってもよいのですが、少しだけデザインのテイストを変えたい時に使えるテクニックを紹介します。

配色を変更

最新のテンプレートであれば、Dress（デザイン編集）を使って配色を変えることができます。Dressを開き、Dressカラーを変更すればサイト全体の配色を一括で変更できます。

フォントを変更

テンプレートにはWebフォントが使われていることがあります。このフォントを変えるのもワンポイントになります。
Dressを開き、フォントを変更したいパーツを選択します。設定済みのフォントを探す場合は、Webフォントで絞り込むと探しやすいです。

詳細設定からWebフォントが設定されているパーツをまとめて探すこともできます。