動画で解説｜黒ベースのWebデザインのテンプレート活用法【ダウンロード可能】

黒ベースのダークなデザインのWebサイトを制作する際に、取り入れたいポイントや注意すべきポイントをご紹介します。
ホームページ作成サービス「BiNDup」のテンプレートのおすすめのテンプレートとともに、アレンジ例とサンプルデータもダウンロードできますので良かったら参考にしてみてください。

▼動画で見るとより特徴が把握できます。

黒ベースのサイトデザインする上での基礎知識

黒ベースのサイトを作成する上での基礎知識を解説していきます。

黒ベースのwebデザインが人気の理由

黒ベースのWebデザインは、力強さやエレガントさ、伝統的な形式らしさなどの印象をユーザーに与えることができるので人気があります。
黒色を活用することにより、高級感のあるサイトに仕上げることができるので、昔から多くのハイブランドのWebサイトで愛用されてきました。
また最近では、サイトが端末の明るさ設定のダークモードに対応した作りになっていたり、NetflixやHulu、Amazon Prime Videoなどのコンテンツ重視のサイト（アプリケーション）でも多く使われるようになり、黒ベースのWebサイトとの接触機会がより増えてきた印象です。

白いベースの方が「可読性」が高い

心理学者のCosima Piepenbrock氏とSusanne Mayr氏が13年に発表した研究論文によれば、白い背景に黒い文字のほうが、正確さもパフォーマンスも高かったとのこと。実験参加者に視力検査と校正作業を行ってもらったところ、白い背景に黒い文字のほうが読む速度が速く、見つけた誤字脱字の数も多かったとの結果が出ました。
この事からも、ブログのようにページ全体にテキストが占める割合が多ければ白背景の方が良いとされています。

黒ベースのWebデザインのメリット

では、なぜ黒ベースのWebデザインが選ばれるのでしょうか？
Richard Hall博士とPatrick Hanna博士が行なった研究によれば、画像や動画の認識率は、背景色によって決まるとも言われています。
つまり黒ベースのWebデザインにすれば、画像は浮き出るように見え、反対に文字が奥手にあるように見えるので、画像をより強く印象付けることができます。
Netflixなどでは、アートワーク(ジャケット画像など)を多用し、画面に占める割合が多いので、黒ベースのWebデザインが採用されるようになったのです。

黒ベースのサイト作成で注意すべきポイント

「黒」は「死を連想させる色」でもあるので、初心者には暗すぎないバランスが難しく、扱いにくいイメージもあります。そんな黒ベースのサイトを作成する上で、注意すべきポイントを解説していきます。

真っ黒を使わない

真っ黒（#000000）ではなく、少しグレーに寄せたり、色味を入れた色にすることで、怖い印象を減らすことができます。プロの現場では、#333333を、黒色として使用することが多いです。

文章をたくさん書かない

黒ベースは前述の通り、可読性が悪く読み進めにくいので、文章を読むには向いていません。
文字が多いサイトを作成する場合は、白ベースのサイトで作成することも視野に入れた方がいいでしょう。

黒ベースのWebサイトテンプレート「TSUBAME」とは

「TSUBAME」は硬派で洗練されたイメージの訴求に適したBiNDupのテンプレートです。
上記のようなポイントを踏まえて作成されているので、写真や文章を差し替えるだけで、誰でも簡単に高級なイメージを作り出すことができます。
「左官工事（コーポレートサイト）」「民泊施設（サービスサイト）」「生花作家（ポートフォリオサイト）」の３業種を想定したデザインと、ブラック・ダークスカイ・ダークグリーン・パープル・アズキの５色のカラーバリエーションをご用意しています。

コーポレートサイトテンプレート

「左官工事」は、コーポレートサイトに必要な情報で設計されています。大きな漢字のあしらいが、匠の技を連想させます。

追従する問い合わせボタンで、閲覧者がいつでも問い合わせできるよう設計されています。そのボタンを押すとフォームに遷移。デフォルトでは簡易なフォームが設置済み。データ集計もBiNDupでは管理画面から簡単に確認、閲覧できます。

コーポレートのテンプレートを見る

サービスサイトテンプレート

「民泊施設」は、民泊施設を紹介するのに必要な情報で設計されています。黒にさらに濃い黒合わせることで、色が引き締まり、よりスタイリッシュなイメージに仕上げています。

スタッフブログで、リアルな店舗の様子をアピールできるよう設計されています。ブログはスマホから更新可能。投稿内容の更新は自動で行われるので、記事の内容に専念できます。

サービスのテンプレートを見る

ポートフォリオサイトテンプレート

「生花作家」は、生け花教室で作られた作品を紹介するのに必要な情報で設計されています。背景が黒く、可読性がいい意味で悪いことで、写真が浮き立ち、作品に注目を集めやすいサイトになっています。

大きなスライドショーは、閲覧者の目を惹きます。映える作品を掲載して、閲覧者の心を動かしましょう。ここではアルバムのように画面内にたくさんの写真を掲載できるよう設計されています。画面いっぱいに敷き詰められた写真は、新たなインパクトを与えることができるでしょう。

ポートフォリオのテンプレートを見る

プロのアレンジ例

そんな「民泊施設」をプロのデザイナーが「おしゃれなダイニングバー」にアレンジ。写真を中心にしたサイトにするべく、情報を極限まで削ぎ落としました。

写真のエリアも不揃いな画角の写真を並べることで、よりギャラリー感を出しました。
サイト全体の夜の雰囲気と店内の写真が相まって、大人の隠れ家のような店舗イメージを訴求できます。

アレンジサイトを見る

まとめ

いかがでしたでしょうか！
BiNDupには、このほかにもシックで使いやすいテンプレートが揃っています。ぜひ使ってみてくださいね。

BiNDupのテンプレートを見る

サンプルのサイトデータの配布

今回アレンジしたのサイトデータを以下より配布しますので、参考にしてください。

ダウンロードする
※ ファイルは解凍せずに最新のBiNDupにインポートしてお使いください。インポート方法はこちらをご覧ください。
（「2.取り込み先の環境でサイトデータをインポートする」を参照）