自分のサイトカラーを決める＆サイトロゴやアイコンを自作

2018年9月6日2019年12月24日テーマ-Lightningのカスタマイズ＆設定

企業や自分のアイコンやロゴが既にある場合は、スキップしてサイトカラーの作り方を見ましょう。

ない場合は、一から作ってみましょう。
デザイナーを雇わなくても、自分の好みで作れます。

オリジナルのサイトロゴを自作できる－無料で使えるツール

サイトロゴを作るにはいくつかのツールや方法があります。

Canva－様々なデザイン作成オンラインツール

Canva では、ドラッグ＆ドロップで様々な機能を使うことができます。

• 背景色の設定
• 画像を追加してトリミングやフィルターの追加、輝度や彩度、透明度の変更
• 様々な無料イラスト、写真、ライン、アイコン、図形、グラフの使用
• たくさんのフォントと文字装飾
• あらゆるロゴやレイアウトデザインの使用

ペンタブなどで自分で描くことができなくても、用意されている素材のみで様々なイメージの実現、装飾ができます。
操作も簡単で直感的にさまざまなサイト素材をつくることができます。
自分で描いたイラストと組み合わせてロゴを作ることも可能

さやっと。ではアイキャッチ画像(記事タイルの画像)をつくったり、イラストやグラフ付きで説明画像を作るときに使っています。

ロゴメーカー－無料ロゴ作成オンラインツール

ロゴメーカー では、自動的に文字のデザインが作れます。

このツールでは文字のみになりますが、文字のサイズ、色、加える効果などを指定すると他にはない文字デザインのロゴができます。

出来上がったロゴを見ながら効果をどんどん変えて気に入ったロゴができるまでランダムに試すこともできます。

文字のみのシンプルなロゴをつくる際におすすめ

ここで作った文字を他のツールでイラストと組み合わせて使うこともできます。

メディバンペイント(MediBang Paint)－本格イラストが描けるソフト

メディパンペイント は、無料で使える本格ペイントソフトです。

自分でイラストなどを描いてロゴにしたい人、筆や質感の細かい調整をして自分で文字を描きたい人におすすめ。

本格ソフトなので、操作を覚える必要があり、多少の手間がかかります。

ペンタブがないと使いづらいですが、フォントもついているので、フォント＋図形の描画で使うことも可能です。

さやは絵のセンスがないので、さやっと。のロゴはそうやって作りました。

今回のアイキャッチ画像(記事の画像)はこのソフトを使ってペンタブで描いています。

素人がロゴ・デザインをつくる際のポイント

整列を意識し、間隔は均等にする。

文字の開始位置や上下左右に直線が引けるよう、揃えることを意識しましょう。
文字の左揃えや右揃えなどが基本です。
同時に、要素と要素の間隔は特別な意図がないかぎりは均等にしましょう。

文字や素材の大きさの差は中途半端にしない

18pxと16pxなど、中途半端な違いは見た人に混乱をまねきます。
どこが大事なポイントかをハッキリと示すためにも、重要な部分はハッキリと大きくして主張させましょう。
サブテキストの文字が小さくても、良いデザインのロゴは読んでもらえます。

様々なデザインを混在させない

素人がつくる際は、シンプルでまとまったデザインのほうがまとまりやすいです。

• 丸いフォントを使ったら、素材も丸いイメージでデザインする。
• 筆のデザインフォントを使ったら、ラインも筆にする。

空白を恐れない

デザインを作る際、ついつい空白を埋めて詰め込みたくなるものですが、空白もデザインの一部です。
ごちゃごちゃと詰め込まれたデザインは見にくく、きれいにまとめるのは非常に難しいので、
空白があっても要素を入れようとせず、初めに決めた要素のみを使うようにしましょう。

良いデザインを作れるようになりたい！方はこの本がおすすめ。

サイトカラーを決めるときのポイント

サイトカラーはサイトのイメージを大きく左右します。

アイコンやロゴを作りながら決めるのがよいでしょう。サイトのカスタマイズを始める前に決めておいたほうが全体のデザインをまとめやすくなります。

CSS(サイトの装飾)では、基本的には色コードを使います。

まずサイトの基本カラーを決め、その色のグラデーション上の色を作ります。

アイコンやロゴを作る際のツールのカラーパレットなどで手動で作っても構いませんが、Encycolorpedia を使うと簡単にサイト基本カラーの淡色が確認できます。

基本カラーの色コードを入力し、色彩勾配を見て、中央にある色と右から二番目の色のコードをメモしましょう。

アクセントカラーはなくても構いませんが、情報量の多いサイトなどでは情報の区別をつけるために必要になります。

Encycolorpediaで中間関係にある色から選ぶと良いでしょう。

色によっては中間関係に良い色がない場合もあるので、そのときはグレーをアクセントカラーにすると無難です。

派手で印象の強い色をアイコンなどでつかって目立たせたい場合、それをアクセントカラーにして、その色に合う落ち着いた色をサイトカラーとして作ると良いでしょう。

サイトのカスタマイズを始める前に、自分のサイトカラーをPC上にメモしておきましょう。

メモにはStickey Notesがおすすめ

Stickey Notes は旧付箋紙アプリで、PCにデフォルトアプリとしてインストールされていることも多い手軽でシンプルなメモアプリです。

タスクバーにピン止めしておけば、色コードを入力するときに画面上にパッと表示させることができるので便利です。
色コード以外にも、よく使うコードやウェブサイトのリンクなどを張り付けてサイト編集作業が楽になります。

メモ帳と違い、シャットダウンしてもデータが消えることはなく、項目ごとにメモを分けて色分けもできます。

アイコンとロゴを自作

実際に取り掛かってみましょう。

Lightningのカスタマイズをする一番の近道では、ファビコンに使われる正方形のアイコンとサイト上部に表示する長方形のロゴが必要です。

一番の近道を使わない方は、自分の使っているテーマの推奨するサイズを確認して作りましょう。

アイコンを作る

• 521px以上の正方形
• 背景は透過またはサイトカラーにする
• 小さいサイズでも見やすいデザインにする
• キャンバスサイズいっぱいの大きさで作る

アイコンはファビコン(ブラウザのタブやブックマークでサイト名の横に表示される)に使われたり、SNSのアイコンとして同じものを使用したりするため、小さいサイズでもどのサイトなのかが認識できるようなデザインにします。

ファビコンは表示が非常に小さいので、ファビコン用とSNS用で２つアイコンを作るのも◎。

ファビコンには組織やサイト名の頭文字を使うか、簡単な絵やマークを使うのが基本です。

アイコンはサイトカラーと合わせ、サイトと同じイメージになるようにしましょう。

なるべく正方形全体を使ってデザインしたほうが小さくても見やすいですが、SNS用のアイコンは丸く切り抜かれる場合も多いので、切り抜かれたときのことを想定して作ります。

ロゴをつくる

• 700pc×150pxの長方形
• サイトタイトルを入れる
• サイトカラーを同時に決める
• アイコンを含めても◎

アイコンを覚えてほしい場合は、ロゴの左端や右端にアイコンを含めると良いでしょう。

ロゴはサイトの上部に常に表示させたり、メニューの横に表示されるため、サイトの顔とも言える目に入りやすいものです。
サイト全体とイメージを一致させるため、サイトカラーを同時に決めるようにしましょう。
カラフルなロゴを使う場合は、サイトカラーは黒や茶色を基調としたおちついたカラーにするなどの工夫が必要です。

似顔絵やイラストを使いたいけど絵が描けないときは…

個人でもプロやセミプロの絵描きさんにアイコンや似顔絵を依頼することができます。

下記のサイトでは500円～気軽に依頼できるのでおすすめ。

スキマ

ココナラ

サイトロゴ・タイトル・基本のサイトデザインを設定するだけで自分のホームページができる！

サイトアイコン・ロゴやタイトル、サイトカラーを決めたら、Lightningにそれらを設定していきます。

この作業が終わるだけで、Lightningのデザインだったサイトが一気に自分のホームページらしくなります。

サイト基本情報でタイトルとキャッチフレーズ、ロゴを設定

ダッシュボードの外観からサイト基本情報に移動します。

サイトのタイトルとキャッチフレーズを入力しましょう。

次に、サイトアイコンを選択し、作ったサイトアイコンをアップロードします。

自分のサイトカラーを元にLightningのデザイン設定

次に、外観のLightningデザイン設定に移動して、ヘッダーロゴ画像を選択します。

キーカラーに濃い色のサイトカラーを、キーカラー(暗)には濃い色のアクセントカラーを設定します。

アクセントカラーがない場合は、サイトカラーのより濃い色か少し薄い色などを設定しておくとよいでしょう。

自作サイトの第一歩が踏み出せました。

自分でアイコンやロゴを作った時点で、もはやサイトを作れない素人ではありません。

オリジナルなデザインを使ってサイトを作る第一歩であり、印象を決める最も重要な部分です。

これを基本として、サイトのデザインを作っていきます。