folderデザインしたい

HTMLテンプレートを自前カスタマイズしてもダサくならないためのデザインの考え方

HTMLテンプレートを自前カスタマイズしてもダサくならないためのデザインの考え方

HTMLテンプレートを自前カスタマイズしてもダサくならないためのデザインの考え方 - https://do.gt-gt.org/how-to-design-template/

サイトを作る上で、初心者にはなくてはならないくらい、とっても便利なのがHTMLテンプレート。そのまま使っても問題はありませんが、サイトを運営するうちに、もっと自分らしくカスタマイズしたいと思うようになるのは自然なことです。

でも、デザインなんて勉強したことがなくて、自分でカスタマイズするうちに、なんだかどんどんダサくなってしまって頭を抱えた……そんな経験がある方は少なくないでしょう。

この記事では、テンプレートをカスタマイズしてもダサくならないための、デザインの基本的な考え方を紹介します。

大前提:大切なのは「統一感」です

まずデザインを考える上で大切なのが「統一感を出すこと」です。

せっかくの自分のサイトなんだから、自分のオリジナリティを出したい! そう思うのは当然のことです。しかし、だからといって不要な色や不要な装飾をあれこれとつけてしまっては、印象が散らばって、まとまりのない感じになってしまいます

既存のテンプレートの雰囲気を壊したくなければ、どのようにして統一感をキープすればよいのかを意識してカスタマイズしましょう。

使う色の数を絞る

初心者が陥りやすい最大の罠が、色数を増やしすぎてしまうことです。

まずはあなたがお使いのテンプレートに使われている主な色をピックアップしましょう。たいていのテンプレートが、3色~多くても5色程度に収まるはずです。また、主に使われている色のうちの2色か3色くらいが白、黒、グレーのような無彩色であることが多いでしょう。

例えば当サイトで配布しているテンプレート「modern」の使用色はこんな感じ。白、黒、グレーがメインの色で、黄色が差し色です。ちなみに「差し色」とは、使われている面積が少ないが、印象的でアクセントとなる色のことをいいます。

ここからさらに使用色を増やしてしまうと、どうしても印象が散らばってしまい、まとまりのない感じになってしまいます

パーツの配色を変えたい場合や、新しいパーツを増やしたい場合は、すでに使われている色を使ってデザインすると、失敗しづらくなります

どうしても色を増やしたい場合は「彩度・明度」を合わせましょう

いや、それでも色を増やしたいんだ……! という場合は、せめて色の彩度や明度を、すでに使われている色のいずれかに合わせましょう

イラストを描いたりする方ならご存じと思いますが、そもそも彩度や明度とは何のことでしょうか? ペイントソフトなどで色を指定するときによく見るカラーパレットを見てみましょう。

左上が白く、左下と右下が黒くて、右上は黄色くなっていることが分かりますね。

彩度とは、色の鮮やかさのことです。つまり、この場合ならどれだけ黄色味が強いかということです。彩度が高いほど黄色く、再度が低いと白やグレー、黒に近づきます。

明度とは、色の明るさのことです。つまり、色が明るいか、暗いかということです。明度が高い色は白っぽく、明度が低い色は黒っぽく、暗くなります。

すでに用意されたデザインに、新しく色を増やす場合は、すでにある色に彩度と明度を合わせると、印象がまとまります

当サイトで配布しているテンプレート「modern」の黄色のテンプレートを例に、使用色を増やしてみましょう。元のデザインはこんな感じです。

右側のカラムにある、黄色い枠線のボックスの色を変更して、もっと目立たせたいとします。枠線の色を変更しますが、このとき彩度と明度は変更しません。では何を変更するかと言いますと、色相(どのような色味を持つかの指標)だけを変更します。

紫の枠線のボックスができましたが、ほかのパーツと色の雰囲気が似ているため、統一感が出ましたね

では、彩度や明度を変えた色を追加してみるとどうなるのでしょうか? さきほどと同じ紫系の色で、彩度と明度をやや低くしたものを追加してみましょう。少し暗めで、グレーに近い紫色です。

枠の色がわかりやすいよう、枠線を少し太くしてみました。他の差し色は鮮やかな黄色なのに、追加したパーツだけグレーがかった暗めの色なので、少し違和感がありますね

使用色の彩度や明度の統一感は、デザインの統一感にもつながる重要な要素です。どうしても色数を増やしたい場合は、すでに使われている色に彩度や明度を合わせることで、印象が散らばってしまうのを防ぐことができます

やたらに装飾を増やさない

「デザイン」という言葉を使うと、なんだか装飾しなければいけないような気になる方もいるようですが、そんなことは全くありません。むしろ、不要なものを増やしてしまうのは良くないデザインだと受け取られる場合もあります。

自分のデザインに自信のないうちは「デザインは引き算だ」くらいに思っておきましょう。装飾をつけすぎて邪魔になることはあっても、装飾がなさすぎて邪魔になることはほとんどありません。

いろいろと装飾したくなる気持ちはグッと抑えてシンプルにキメた方が、良いデザインになる場合もたくさんあるということを、ぜひ覚えておきましょう。

フォントを増やしすぎない

色数の話とも共通するのですが、使うフォントの種類を増やしすぎてしまっても、印象が散らばる原因になります

今はWEBフォントを使えば可愛いフォントが無料で利用できますから、いろいろ試したくなる気持ちはよく分かります。しかし、ひとつのWEBサイトに対して利用するフォントの上限数は3つまでにしておきましょう

また、使用フォントを追加・変更する場合は、明朝体系のフォント、ゴシック体のフォント、手書き風のフォント……など、使うフォントのおおまかな雰囲気をそろえておくと、統一感が出やすいでしょう

余白を意識する

デザインに不慣れな人が陥りやすい大きなポイントの一つが、余白です。カスタマイズの際に適切な余白の大きさが分からないのであれば、余白の広さをテンプレートの既存のデザインに合わせることが大切です。

テンプレートに何かデザインを足す場合は、とりあえず、以下の4つの余白を意識してみましょう。

  • margin:要素の外側の余白
  • padding:要素の内側の余白
  • line-height:行間の広さ
  • letter-spacing:字間の広さ

margin:要素の外側の余白

要素の外側の余白は、CSSでいうとmarginプロパティを指定します。色数についての項目で例にした枠線付きボックスでいうと、枠線の外側の余白がmarginです。

padding:要素の内側の余白

要素の内側の余白は、CSSではpaddingにあたります。枠線付きボックスでいうと、枠線とボックスの中身との間の余白です。

line-height:行間の広さ

文章の行間の広さはline-heightにあたります。テンプレートやフォントにもよりますが、1.6em~2.5emあたりで指定されることが多いです。

letter-spacing:字間の広さ

字間の広さはletter-spacingで指定します。本文に指定されていることはあまりありませんが、見出しタグなどでは広めに設定されていることが多いです。

テンプレートで使われている色、フォント、余白の大きさなどを調べる方法

自分でダウンロードして使っているテンプレートでも、どの部分にどの色、どのフォント、どれだけの余白が適用されているかは、一目では分かりづらいものです。

そんなとき、ほとんどのPC用ブラウザに標準装備されているデベロッパーツールという機能を使えば、どこにどんな色やフォント、余白が適用されているのかが一目で分かってしまうのです。

使い始めは慣れずに苦戦するかもしれませんが、テンプレートを自前でカスタマイズしたいなら必須といってもいいくらい便利な機能ですので、ぜひ使ってみてください

そうはいっても……個人サイトは自由だ!

ここまでいろいろなデザインの考え方を紹介してきました。しかし、そう言われてもな……と思われた方もいるかもしれません。

  • カラフルが好きだから、10色くらい使いたいんだよな~
  • ベースはゴシック体だけど、ここだけどうしても明朝体にしたい!!
  • このフォント可愛いから絶対にここに使いたい!!
  • このフリー素材のデザインが好きだからどうしても使いたい!!

構いません、あなたのための個人サイトです。デザインのセオリーをあえて無視しても、誰もあなたを責めません。捨てられないこだわりがあるのなら、好きなようにやっちゃいましょう! あなただけの個人サイトなのですから!

この記事を書いた人

ガタガタ

このサイトと、このサイトの掲載記事のほとんどと、このサイトで配布しているプログラムやテンプレートのすべてを作った人。絵を描いたり、文章を書いたりして暮らしています。

関連記事

ファビコンの設定方法!サイト独自のアイコンを作ってオリジナリティアップ
folderデザインしたい favorite 27

ファビコンの設定方法!サイト独自のアイコンを作ってオリジナリティアップ

デベロッパーツールの使い方を画像付き解説!CSS編集の強力な味方にしよう
folderデザインしたい favorite 16

デベロッパーツールの使い方を画像付き解説!CSS編集の強力な味方にしよう

サイト更新ごとにCSSファイルを新しく読み込ませてキャッシュ問題を回避する方法
folderデザインしたい favorite 27

サイト更新ごとにCSSファイルを新しく読み込ませてキャッシュ問題を回避する方法

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方
folderデザインしたい favorite 53

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方

クリックで内容を展開するアコーディオンメニューをCSSだけで実装する方法
folderデザインしたい favorite 38

クリックで内容を展開するアコーディオンメニューをCSSだけで実装する方法

コピペでOK!オシャレなフォントが無料で使えるGoogle Fontsの導入方法
folderデザインしたい favorite 35

コピペでOK!オシャレなフォントが無料で使えるGoogle Fontsの導入方法