デザはじ

「スキル・コスト・センス」ゼロからはじめるデザイン

デザインのひきだし|見て楽しい!ためになる!デザインの参考サイト5選

デザインのひきだし|見て楽しい!ためになる!デザインの参考サイト5選


アイキャッチを作るとき、Twitterのヘッダなどをつくるときに

「さて、どんなデザインにしよう?」

と悩まれる方、多いのではないでしょうか。

 

PCやスマホを前にしてしばし固まってしまうこと、ないでしょうか?

 

この記事でわかること

・デザイン初心者なので参考になるサイトを知りたい
・このアイキャッチ素敵!どうやって作ってるんだろう?作り方が知りたい!
・いろんなデザインを見てデザイン力を育てたい

アイキャッチやロゴなどのデザインを作る時に参考になるサイト、参考資料としてオススメのサイト5選をご紹介します。

 

あなたのデザイン力のステップアップにぜひお役立てくださいね。

 

 

デザインのひきだし|見て楽しい!ためになる!デザインの参考サイト5選

ふだん、アイキャッチなどをデザインをするときに参考にしているサイトを5つご紹介します。

自分のひきだしにはないテキストの置き方や写真の配置、色使いなど参考になるサイトばかりです。

ベーコンさんの世界ブログ|プロのデザイナーによる情報ブログ

f:id:nyamo-sun:20211128155230j:plain

デザイン本も出版されているプロのデザイナー、ベーコンさんのブログです。

私はロゴ作成もしているのでロゴづくりの記事は大変参考になりました。

他にはアイキャッチの作り方、アイキャッチテンプレートやブログ運営についての記事など話題も豊富です。

 

みっこむ|デザイン初心者のためのヒントがたくさん

f:id:nyamo-sun:20211128155252j:plain

デザインがぐんと良くなるコツが数多く掲載されているグラフィックデザイナーのみっこさんのブログ「みっこむ」。

 

初心者が参考になるデザインに関する情報が豊富でテンプレートの配布もされています。

私も掲載された情報に少なからず影響をうけたブログです。

 

みっこむへのリンクはこちら

みっこむ

デザイン研究所|インスタ毎日投稿!手軽にデザインが学べる

f:id:nyamo-sun:20211128155312j:plain

Instagramでデザインに関する情報が毎日投稿されている「デザイン研究所」。

フォローするとデザインに関するコツや豆知識を毎日見ることができます。

 

ブログではInstagramに投稿された内容をさらに詳しくまとめて紹介されていて見応え抜群です。

 

ピンタレスト|画像検索最大手!デザインのヒントが次々出てくる

有名すぎて説明はいらないかもしれませんが、画像検索の最大手サイト「ピンタレスト」。

プロのデザイナーもデザインに困ったら巡回するほどの便利なサイトです。

私はよく「ロゴデザイン」などで検索して気に入った画像をピン(保存)しています。

 

自分の好きなデザインやあこがれのデザインを日頃から集めてピンしておくことで自分のデザインの引き出しを増やしておく、といった感じです。

 

デザインだけではなく、料理レシピやネイルのデザインにファッションなどなど…検索すると素敵な画像が無限に出てきます。

ネット上の画像を自分好みのものだけ集めてスクラップする感覚に近いですね。

 

ピンをすると次々におすすめの画像が表示されるのでうっかりいつまでも見てしまう罠にハマってしまうことがあるのでご注意を。

 

ブログデザインラボ|デザイン力があがる!ブログ仲間に出会える!

f:id:nyamo-sun:20211128155333j:plain

ブログやSNSデザインをするうえで欠かせないツール「Canva」の詳しい使い方やデザインのヒントなど充実した情報が掲載されている「ブログデザインラボ」。

 

なかでも数多くのブロガーが作成したアイキャッチと添削が掲載されている「アイキャッチ添削」は必見です。

アイキャッチ作成のコツやヒントがたっぷり詰まっているコンテンツです。

現在は30を超えるアイキャッチが添削されています。

私は全て拝見させていただいて、とても勉強になりました。

 

サイトを運営されているどんぐり所長さん(@donguriweb)のTwitterフォロワー3,000人を記念して実施された企画「渾身のアイキャッチ」は私も参加させていただきました。

こちらも150以上のブロガーさんのアイキャッチがずらっと並んで圧巻です!

 

あなたのしっくり来ないアイキャッチの改善点を見つけるヒントがたくさん散りばめられていますよ!

 

そしてブログが好きな方、デザインに悩む方などが集まった「ブログデザイン部」。

私も部員として参加させていただいています。

 

部員専用のDiscordもあり、ブログ運営やブログデザインに関する質問にも答えてくれるので、アイキャッチデザインでお悩みの方やブログ運営に関して

 

「こんなことあんなこと他のブロガーさんに聞いてみたい!」

 

などお悩みの方はぜひ入部してくださいね!

 

ブログデザインラボ関連リンクはこちら

ブログデザインラボ | Canvaでブログをお洒落に

【ブログデザイン部に入部希望の方はこちらから】

#ブログデザイン部 クラブルーム | ブログデザインラボ

まとめ:デザイン力をどんどん貯めていこう

デザインの発想の豊かさを「ひきだし」と表現することが多いですが、今回ご紹介したサイトはその「ひきだし」を自分の中にどんどん増設するのに有益なサイトばかりです。

 

自分の中になかったデザインのヒントを得られたときはワクワクしてすごく楽しいものです。

アイキャッチやSNSなどのヘッダを作成するとき、増やしたあなたのデザインのひきだしをどんどん活用してくださいね!

 

【カラーコード・RGB】カスタマイズやペイントソフトに便利なサイト・書籍

【カラーコード・RGB】カスタマイズやペイントソフトに便利な書籍・参考サイト

WEB上でデザインをする上でかかせないのが色を指定するためのカラーコードやRGB。

ブログのカスタマイズやCanvaでのフォントの色指定など活用することが多いです。

 

この記事でわかること

・効率よくカラーコードやRGB値がわかるサイトが知りたい
・色の組み合わせによく悩む、参考にできるサイトはないかな?
・WEBサイトじゃなくて紙の本で色の組み合わせを調べたい

以上のようなお悩みをお持ちの方に実際に私が利用しているサイトや書籍をご紹介します。

あなたのサイトやSNSを彩る手助けになれば幸いです。

 

 

【カラーコード・RGB】カスタマイズやペイントソフトに便利な参考サイト

カラーコード・RGBって何?どういうときに使うの?

カラーコードやRGBとはデジタル上の色を文字や数値で表したものになります。

カラーコードは「#」から始まる最大6ケタの数字と英数字。

RGBは赤・緑・青それぞれの色の交わりを0から255までの数値で表しています。

 

他にも色を表す記号や数値がありますが、とりあえずこの2つだけ覚えておけば大丈夫です。

 

ブログカスタマイズをするときに色を指定するときに使ったり、Canvaで好みの色を指定するときにはカラーコードを使います。

カラーコード検索・配色の参考に便利なサイト・書籍

色の数は無数にあるけど、欲しい色のカラーコードがわからない!

この色にあう組み合わせの色はどんなのがいいかな?

 

などなど、カラーリングやデザインの参考にぴったりのサイト4選、そして私がカラーリングのお供にしている参考書籍をご紹介します。

和色大辞典|目に優しいくすみ系カラーを探すなら

和色大辞典

日本の伝統色 和色大辞典 - Traditional Colors of Japan

 

当ブログのサイトのカラーリングをするときにお世話になった「和色大辞典」。

日本の伝統色を名前、カラーコードとRGB、補色など組み合わせの相性のいい色が検索できる便利なサイトです。

 

名前で選ぶもよし、気に入った色をクリックしてみるもよし。

名前をクリックすると色に関するデータのページに飛びます。

 

関連サイトは「原色大辞典」「洋色大辞典」など和色大辞典を含めて8サイトあり、自分の好みやサイトデザインにあわせてチョイスしてみてくださいね。

私は個人的にくすみカラーが好みで目に優しいと感じているので和色大辞典推しです。

Pigment by ShapeFactory|直観的に使える2色の配色サンプル

Pigment by ShapeFactory

Pigment by ShapeFactory | Simple Color Palette Generator

サイトを開いたときにランダムで2色の配色サンプルが表示される「Pigment by ShapeFactory」。

好みの組み合わせをクリックするとカラーコード・RGBにPANTONEの色の番号が表示されます。

(PANTONEは個人的にはほぼ使うことがないしスルーしてOKです)

 

表示されているサンプルは左側のメニューにある「Pigment」は彩度「Lightning」で明るさが変更できます。

パレットのアイコンをクリックすると色の系統を選ぶ事ができます。

 

Pigment sample

 

サンプルをクリックすると組み合わせたときのイメージが表示されます。

左端の白丸チェックの場所を変更すると色の明るさが変更できます。

気に入った色があれば下部に表示されているクリップボードのアイコンをクリックすればコードをコピーできます。

 

ぱっと目に入った色から組み合わせを選べるので「全く色のイメージが湧いてこない!」という時にイメージの引き出しをこじあける目的で使っています。

Palettable|選んでいくだけで5色までの配色サンプルが作れる

Palettable

Palettable

「Palettable」はサイトを開いた時に画面に表示される色を「好き(Like)」か「嫌い(Dislike)」で選んでいき最大5色までの色の組み合わせを作れるサイトです。

 

Likeを選択した色に似合う候補が次々と表示されていきます。

Dislikeを選ぶと、色が変更されていくのでピンときた色が出た時にLikeを押せば次のカラーの候補が表示されていくシステムです。

最大数の5色まで選ぶと「Export」というボタンが表示されるので現在の組み合わせのURLかPNG画像をダウンロードすることができます。

 

デザインの基本として「色は3色まで」と言われていまして、なかなか5色までフルで使うことはないとは思いますが、好みの色を集めた見本としてストックしておくといいかもしれませんね。

配色パターンの見本40選|サイト全体の配色構成に悩んだら

配色パターンの見本40選

配色パターン見本40選:ベストな色の組み合わせ確認ツール

「配色パターンの見本40選」はサイト全体のカラーリングを統一するのに便利な見本ツールです。

 

色自体は固定されていて選ぶことはできませんが「万人受けする配色」「親近感を感じさせる配色」など大まかなテーマをもとに配色サンプルが組まれています。

 

色見本をクリックすると、右側のページサンプルに実際にサイトに配色されたときのイメージが表示されます。

使われている色のカラーコードはコピペしてそのまま使用してOKとのことなのでサイトの配色にまとまりを出したい時などに活用すると便利です。

3色だけでセンスのいい色|愛用している配色の参考書籍

アイキャッチなどの配色に悩んだらパラパラと開いてインスピレーションを受けている私の愛用参考書籍「3色だけでセンスのいい色」。

 

ネット検索って「この色!」「このイメージ!」とある程度具体的に決まっていないと検索のしようがないですが紙の本だとパラパラとめくっていくと、なにかの拍子にピンとくる色の組み合わせがみつかることがあります。

色の組合わせにつまづいたら、手にする事が多い本です。

 

詳しいレビューは以前にメインブログでご紹介していますのでよろしければそちらも御覧ください。

 

nyamo3sun.hatenablog.com

おまけ:私が色選びのときに気をつけていること

私の色選びの時に気をつけていることをおまけとして載せておきます。

色数は基本3色まで

デザイナーのブログなどで繰り返し見るルールが「色は基本3色まで」。

書籍でも「3色」というキーワードで出版されているので鉄板ルールですね。

 

3色以上になるとデザインにまとまりを出すのにかなりのセンスが要求されます。

色数が増えれば増えるほど難易度が増すんですね。

大企業のサイトや広告・バナーでもほぼこのルールが適用されているので日頃から色の組み合わせにアンテナをはっておくと楽しいですよ。

原色はなるべく使わない

真っ赤、真っ青というような原色はなるべく使わないようにしています。

使いたいときは彩度や明度を少しだけおとして色味をくすませるようにしています。

 

アイキャッチなどに使う文字も真っ黒ではなくてほんの少しだけグレー寄りに配色したりしています。

 

個人的な感想としては好みもありますが、彩度のきつい色は印象が強くてデザインの難易度があがる気がします。

 

この色なんかしっくりこないなーと思ったら色味をちょっとくすませると馴染むことがあるので試してみてくださいね。

まとめ:カラーリングはデザインを大きく左右します。

色選び、色の組み合わせはデザインの多くをしめる大事な要素です。

少しでも色が変わると受ける印象がガラっと変わることも少なくありません。

 

あなたのサイトやSNSを彩るデザインの参考にしてくださいね。

 

無料・商用利用可能で使えるフリー素材・イラストサイト5選

無料・商用利用可能で使えるフリー素材・イラストサイト5選

ブログ・SNSを彩るアイキャッチやヘッダなどのデザインに便利な写真などの素材。

たくさんあってどのサイトがいいか迷ってしまいますよね。

・無料で使えるフリー素材のサイトが知りたい
・ブログに使いたいので商用利用できるものがいい
・高クオリティな素材サイトが知りたい

有名なサイトや多くのクリエーターが愛用されているサイトがありますが、今回は私が実際によく使っている商用利用可能で無料のフリー素材のサイトをご紹介します。

 

 

無料・商用利用可能で使えるフリー素材・イラストサイト5選

Pixabay-高クオリティな写真素材

f:id:nyamo-sun:20211110102838j:plain

https://pixabay.com/ja/

写真の商用利用可能な無料素材サイトとして有名な「Pixabay」。

私はブログのアイキャッチとして素材をよく使わせていただいてます。

会員登録のボタンなどはありますが、登録をしなくても使えます。

 

海外のサイトですが、日本語での検索も可能です。

個人的な感想としては英語で検索したほうが精度が高い気がします。

 

素材を検索していると有料素材サイト「iStok」の写真が表示されますが、そちらは有料素材なので注意してください。

イラストAC-豊富なイラスト素材

f:id:nyamo-sun:20211110103007j:plain

無料イラストなら【イラストAC】
季節の素材など豊富なイラスト素材が無料で使える「イラストAC」。

イラストの他にも吹き出しや見出しなど「あしらい」に使える素材やアイキャッチやヘッダに使える背景素材などもあります。

ニッチなものでも欲しい素材はたいていそろう便利な素材サイトです。

 

使用するには無料会員登録が必要ですが、登録しておいて損はない素材サイトです。

会員登録すれば系列サイトの「写真AC」「シルエットAC」の素材もダウンロードすることができます。

 

注意点としては無料会員は

  • 素材のダウンロードの際に待ち時間があったりアンケートに答える必要がある
  • 1日にダウンロードできる素材の数が9点まで
  • 素材検索が1日4回まで

とちょっと制限があるのですが、それを差し置いても素材の使い勝手がとてもいいのでおすすめです。

icoooon-mono-使い勝手バツグンのアイコン素材サイト

f:id:nyamo-sun:20211110132319j:plain

アイコン素材ダウンロードサイト「icooon-mono」

プロのデザイナーも利用するシンプルかつ使い勝手のいいアイコン素材サイト「icoooon-mono」。

私はロゴ作成やアイキャッチのアクセントなどにものすごくお世話になっています。

 

「icoooon-mono」は「TOPECONHEROES」というグループサイトの中のひとつなのですが、ほかにはシルエットや罫線、吹き出しなど高クオリティで豊富な素材を提供されています。

左上のアイコンから各サイトに飛べて、どのサイトも使い勝手のいい素材が豊富に提供されていますので一度すべてのサイトに目を通しておくのをおすすめします。

Paper-co-使えるテクスチャが豊富な素材サイト

f:id:nyamo-sun:20211110132528j:plain

Paper-co | 紙のテクスチャー素材を無料でダウンロードできるサイト

豊富な紙のテクスチャを配布している「Paper-co」。
こちらも私がめちゃくちゃ活用しているサイトになります。

アイキャッチの背景に使用したり、ロゴ作成のときに効果をつけるのに使用したりしています。

 

紙だけでなく、木や石のテクスチャやラベルやタグの素材も配布されていてラベル素材はYouTube動画でも使用させていただいています。

 

当記事のアイキャッチの背景はPaper-coさんでお借りした素材になります。

BOOTH-フォント・素材など様々なアイテムの販売サイト

f:id:nyamo-sun:20211110133203j:plain

BOOTH - 創作物の総合マーケット

「BOOTH」は同人誌や創作物などの販売サイトなのですが、無料で商用利用可能な素材やフォントなどもあります。

「フリーフォント」や「無料素材」などで検索するとたくさんのフォントや素材が出てきます。

 

利用には会員登録が必要です。

なお無料ではありませんが、数百円程度でクオリティの高い素材やフォントを販売されている作者さんも数多くいるので購入してみるとフリーでは使うことのできない個性的な素材やフォントが使うことができるのでおすすめです。

 

フォントに関しては別記事にまとめる予定ですのでお楽しみに。

素材サイトにお世話になる前に利用規約を確認しよう

素材サイトにお世話になるまえに注意が必要なのが利用規約です。

フリーの素材サイトは無料で商用利用可能と素晴らしくありがたいものですが、素材の製作者さんごとに規約が違うので確認が必要です。

中には商用利用ができない素材もあるのでブロガー・アフィリエイターの方は必ず確認しましょう。

 

フォントサイトの規約によくある「個人利用」ですが、年賀状など私的なものや利益の発生しないブログ・SNSがこれにあたります。

 

そしてブロガーの方が特に気になる商用利用というものに関してはアフィリエイトが商用利用の範囲に該当するので特に注意が必要です。

YouTube の場合は収益化していたらNGなどの場合もあり千差万別です。

 

中には長年使っていた素材サイトが利用規約を変更していた!という場合もあるので使い慣れているサイトでもたまには規約を再確認することをおすすめします。

 

著作権などトラブルの元になりかねませんので気をつけましょう。

 

今回ご紹介しているサイトはBOOTHをのぞいて無料で商用利用可能とあるサイトばかりをご紹介していますがご使用前に利用規約に目を通してくださいね。

(BOOTHは作者さんごとに利用規約が違うのでそれぞれDLの際に確認が必要です)

まとめ:素材を使って彩りあるサイトづくりを

今回は私がブログやSNSのアイキャッチやヘッダなどデザインをするときにお世話になっている商用利用可能で無料で使える素材を配布しているサイト5選をご紹介しました。

 

Canvaを使っているとCanva内にも素材が豊富にあって便利ですが、別の素材やテクスチャを使うことによってひと味違うデザインができて楽しいですよ。

 

また便利なサイトがありましたら引き続きご紹介していきます。

ぜひ活用してくださいね。

 

初心者でも簡単|コピペでOK!ブログカスタマイズの参考サイト【はてなブログ】

初心者でも簡単|コピペでOK!ブログカスタマイズの参考サイト【はてなブログ】

当ブログは「はてなブログ」で運営しています。

無料で始められてブログテンプレートも豊富、カスタマイズも簡単にできてオリジナリティを出しやすいのも魅力です。

 

今回は初心者の方でも簡単!HTMLとCSSがよくわからなくてもとりあえずOK!

当ブログがブログカスタマイズの際に参考にさせていただいているサイトをご紹介します。

 

はてなブログの方向けカスタマイズ参考サイトになりますが、ご紹介する中にはワードプレスブログの方にも参考になるサイトもありますのでチェックしてみてくださいね!

 

 

初心者でも簡単|コピペでOK!ブログカスタマイズの参考サイト【はてなブログ】

HTML・CSSって何?違いは?

HTMLとCSSはどちらもWEBサイトの表示やデザインにかかわる言語です。

細かいことや専門的なことをはぶいてざっくり説明すると「CSSは事前の準備、HTMLでデザインを反映させる」といったものになります。

 

 

当ブログ開設前にTwitterでつぶやいた内容になります。

かなりファンタジーな表現をしていますが、短い文字制限でわかりやすく説明しよう!と無い知恵をしぼった苦肉の策でこうなっていまいました。

 

専門的な目線からしっかりと解説されているサイトがありますので、参考リンクとしてのせておきます。

はてなブログのHTML・CSSの入力方法

はてなブログでカスタマイズする際にHTML・CSSのコードを入力する場所を解説します。

 

CSSをカスタマイズする時は必ずバックアップをとりましょう!

 

デザインに不具合が起きたときに復旧できなくなったり、復旧に大きく時間を取られることになります(経験者は語る)

 

f:id:nyamo-sun:20211026193806j:plain

管理画面にあるパレットアイコンの「デザイン」という項目をクリックします。

テンプレートの変更やサイドバー管理などが集約されています。

f:id:nyamo-sun:20211026193952j:plain

スパナマークの「カスタマイズ」をクリックしてください。

f:id:nyamo-sun:20211026194029j:plain

「{}デザインCSS」という項目にこれからご紹介する参考サイトの「CSSコード」を入力してください。

元から書いてあるコードはお使いのテンプレートによる記述なので変更しないでくださいね。

 

カスタマイズの中には「HTML」の入力が必要になってくるものもあります。

HTMLはカスタマイズを反映させたい場所に入力するのが基本なので、特に記述がない場合は記事本文に入力します。

デザインによっては「ヘッダに入力」など記載してありますのでよく読んで入力してくださいね。

 

入力する場所を間違えるときちんと反映されなかったり、思わぬデザイン崩れを引き起こすことがあります。

コメントアウト|HTML・CSSを見やすくわかりやすく

HTMLとCSSを色々追加していくと「あれ、このコードは何についての記述だっけ?」とわからなくなってしまうことがあります。

 

そんなときに便利なのが「コメントアウト」です。

コメントアウトはコードの内容に干渉せずに記述することができる補足説明やメモのようなものです。

コードを紹介されているサイトによってはコードの中に何についての記述なのかコメントアウトが入力されている場合があります。

 

HTMLでは <!––○○○○––>

CSSでは /* ○○○○ */

(必ず半角英数で入力してください)

 

記号ではさんだ「○○○○」部分に補足説明やメモなどを記述します。

例えば「<!–– フォローボタンヘッダ ––>」とか「/*  見出しh3  */」などコピペしたコードに追加して記述しておけば、あとで見たときに何のコードかわかりやすくなります。

 

HTMLのコメントアウトはブログ記事本文に使えますので、記事本文には表示させたくないけど書いておきたいことを記述できます。

例えば私の利用方法ですが、記事をリライトした時などはじめに記事を書いたのはいつかを覚書として日付などの情報を記述しておいたりしています。

 

「初出○年○月○日、○年○月○日リライト」と更新履歴をブログ記事本文に書くこともありますが、読者の方には必要ない情報かなという場合にはコメントアウトに記述しています。

 

コメントアウトに関して詳細に解説しているサイトを参考としてのせておきます。

当ブログで参考にさせていただいているカスタマイズ関連サイト

私が運営する2つのブログで参考にさせていただいているカスタマイズ関連サイトをご紹介します。

とても便利で参考になるおすすめのサイトです。

はてなブログのカスタマイズが充実-フジブロっ!

はてなブログでも人気のブログテンプレート「Cappuccino」「Neumorphism」の製作者様であるフジグチさん(id:utoutosara)のブログ。

カスタマイズ情報がとにかく充実していて私も大変お世話になっています。

 

www.fuji-blo.com

 

サイドバーのプロフィールのカスタマイズや記事本文の囲み枠など活用させていただいています。

 

そして特にオススメポイントがとても便利なカスタマイズの作成フォームです。

カスタマイズを紹介されているサイトのほとんどがカラーコードや必要事項の入力部分を自分で調べて入力して…と手間がかかるのですが、フジグチさんのブログでは必要事項を入力するだけで自分好みのコードを作成してくれるフォームがあるんです。

色選びも好みの色の部分をクリックするだけでコードに反映される素晴らしい仕様です。

 

間違ったカラーコードを入力したり、必要なコード部分を上書きしたり消してしまったりなどミスが少なくてすむのが本当にありがたいです。

 

特にコードを見ただけでは「どこにカラーコードを入れれば色がかわるの!?この英語どういう意味!?」となってしまう初心者さんや私にとっては入力フォームを確認するだけでミスが修正できるので便利ですよ。

HTML・CSS入門ほか幅広い話題のサイト-サルワカ

私がブログを始めた本当に初期の頃からお世話になっているサイトです。

HTML・CSSなどWEBデザインをメインに漫画などの書籍レビューや「力尽きたときの簡単レシピ」など幅広い話題が掲載されているサイトです。

 

saruwakakun.com

 

私は見出しのカスタマイズを利用させていただいています。

見出しの変更はCSSを入力しておけばすでに書いている記事の見出しにすぐ適用されて簡単なのでカスタマイズの第一歩としては最適です。

 

見出しのカスタマイズサンプルはたくさんあって迷うほどです。

私も色々あって本当にどれにしようか迷いました。

結局シンプルなものに落ち着いてしまいましたが。

 

色で迷ったら-和色大辞典

カスタマイズに必要不可欠な「色」。

WEB上の色を指定するのに必ず知っておきたいのが「カラーコード」と「RGB」。

カラーコードは「#」から始まる最大6桁の英数字。

RGBは色のR(赤)G(緑)B(青)の3つ混ざり具合をそれぞれ1から255までの数値で表したものです。

 

和色大辞典は日本の伝統色の名前とカラーコード、RGBの値、配色パターンなどさまざまな情報が掲載されているサイトです。

 

www.colordic.org

 

見たまま色で選んでもよし、色の名前から選んでもよし(私は名前から選んでしまうことが多いです)。

系列サイトとして「原色大辞典」「洋色大辞典」などありますのでそれぞれ見てお気に入りの色を見つけてくださいね。

 

個人的な好みとしてはあまりビビットな色を使うと目に痛いかなと考えてブログで使う色は少しだけくすんだり淡い色味を選ぶようにしています。

 

ちなみに当ブログでメイン使用している色は

白群 びゃくぐん#83ccd2

白群の反対色の#d18882

卵色 たまごいろ#fcd575

の3色です。

もう一つのブログのメインカラーが暖色系なので、正反対の寒色系をメインカラーにしてみました。

 

色味に関してはカラフルにあれこれ盛り盛りにするのも好きなのですが、ブログのトップページに統一感を持たせたくてメインの3色を決めました。

 

カスタマイズやデザインの「色」に関する話題は改めて記事にしようと考えております。

まとめ:カスタマイズでオリジナリティあふれるブログづくり

当ブログではテンプレートの「undershirt」を利用しています。

とてもシンプルなテンプレートで人気のテンプレートのひとつでもあります。

 

シンプルで見やすいというのも人気の理由ではあると思いますが、カスタマイズ次第で他のブログとの差別化ができるというのもあります。

実際、はてなブログのテーマストアで人気順の上位をしめるブログテンプレートのほとんどがシンプルなものが多いです。

 

シンプルなテンプレートは簡単なカスタマイズで見た目がガラッと変わるのでブログを始めたら少しだけ手を加えておくといいですね。

ただし、夢中になって沼にハマりやすいのでご注意を(経験者は以下略)

 

【拡張子】初心者向け画像データ講座|これだけ覚えとけばOK【「.jpg」「.png」など違いは?】

【拡張子】初心者向け画像データ講座|これだけ覚えとけばOK【「.jpg」「.png」など違いは?】

Canva などで画像作成しているとよく目にする「jpg」や「png」。

これは画像データの拡張子ですが、違いをわかって使っていますか?

 

『よくわからないけどCanvaでダウンロードするとき「png推奨」ってあるからそのまま使ってるけど…』

 

という方、いらっしゃいませんか?

この記事でわかること

・そもそも拡張子って何?
・よく見る「jpg」「png」って何?
・それぞれの拡張子の違いは?同じ画像データじゃないの?
・「.ai」「.psd」ファイルって何?プロじゃないと使えないの?
・画像の質を落とさずにデータを軽量化したい!

違いをわかって使うとデータの軽量化につながりブログでの表示スピードがあがったり、Canvaで素材のアップロードなどがはかどりますよ。

 

記事の最後におまけとして私が使っている画像データの軽量化サービスもご紹介します。

 

 

【拡張子】初心者向け画像データ講座|これだけ覚えとけばOK【「.jpg」「.png」など違いは?】

そもそも拡張子とは?

PCを扱ったことがある方なら一度は聞いた、目にした事があるワード「拡張子」。

「○○.jpg」や「○○.png」のドット以降のアルファベットのことですが、そもそも拡張子ってなんでしょう?

 

そのファイルが何のファイルであるのか判別し、ファイルをクリックすると対応したアプリケーションで開くことができるようになっています。

引用:拡張子とは パソコン初心者講座

 

拡張子によって「これはこういった形式の画像データです、開けるアプリケーション(ソフト)は○○です」と判別できる仕組みです。

そして、画像データの拡張子にはそれぞれ特徴があり同じ画像データでも大きな違いがあります。

 

それでは、私がブログ運営やSNSなどで使う・目にする拡張子とその特徴をシェアしていきたいと思います。

JPG(.jpg、.jpeg)-一般的な写真、イラストに使われる

f:id:nyamo-sun:20211021123153j:plain

 

画像データで一番よく目にする「.jpg .jpeg」という拡張子。

画像編集ソフト・アプリで対応していないものはないと断言できるほどのメジャーなデータ形式です。

写真やイラストなど色数が多いデータ向けで圧縮によりデータを軽量化する事が可能です。

当ブログに掲載している画像データもほとんどがJPG形式です。

 

JPG向けの画像は?

・写真やイラストなど色数が多く繊細に表現したい画像
・ブログのアイキャッチなど圧縮して軽量化したい画像

PNG(.png)-背景透過ができる

f:id:nyamo-sun:20211021123217j:plain

 

ブログなどに使える素材サイトなどで使われる「.png」という形式のデータは背景を切り抜いて透明化することができます。

 

当ブログのヘッダ(ブログの先頭にあるタイトル)はPNGの画像データを使って背景の色が透けるようにしています。

 

JPGと違って背景を切り抜いた状態で保存できるので別の写真やイラストに重ねても余白を削除する作業が必要なく、使い勝手がいいのも特徴です。

Canvaにアップロードした際も背景が透過された扱いやすい画像データになります。

 

反面、表現できる色数がJPGと比較すると少なく、色数を多くするとデータも重くなりがちなのでロゴやシンプルな色数が少ないアイコン素材などに使うのがオススメです。

 

PNGにオススメの画像は?

・背景を透過して表示させたい画像
・ロゴやシンプルな色数の素材

GIF(.gif)-パラパラ漫画のように動く画像データ

Twitterなどで動画ではなく動いている画像を目にしたことはないでしょうか?

画像データを並べてパラパラ漫画のようにすることができるのが「.gif」です。

 

ブログでも文章説明に補足する形で動きがわかりやすいようGIFを掲載している方もいます。

最近ではYouTubeの動画を補足として使う方が多いので最近ではあまり見かけない印象です。

 

特徴としては動画のような画像が掲載できますが、何枚もの画像データの集まりでデータは重くなりがちなのでブログでの使用はあまりオススメはできないです。

使うとしても最小限にしたほうがいいです。

写真などをGIFにする場合、画像もあまりキレイに表示できないので使い所が限られます。

 

それでもGIF画像を作りたい!という方はペイントソフトのCLIP STUDIO PAINT PRO GIMPが対応していますし、WEB上で作成できるサービスもあります。

(「GIF画像 作成」で検索すると多くのサービスがあります)

簡単にGIF画像が作成できるサイトを参考リンクとして置いておきます。

AI(.ai)-Adobe Illustrator固有のファイル保存形式

イラスト素材サイトの「イラストAC」で素材をダウンロードするとき「AI」という項目を目にしたことはありませんか?

 

これは「.ai」という拡張子のデータでAdobeのIllustratorというソフト固有の保存形式になります。

「ベクター形式」といって拡大縮小しても画像ににじみや劣化がおきず対応するソフトで画像や文字を歪めたり曲げたりと変形などの編集も容易です。

 

Illustratorというソフトはデザイナーさんが主に扱うソフトでプロも使うソフトとあって月額料金もかなり高め。

(月額や年額制で買い切りはありません)

高いソフトは手が届かない!じゃあ、まったく使えないの?というとそうではありません。

 

Inkscape」というフリーソフトで閲覧編集が可能です。

あとは画像作成のWEBサービス「Canva」でも2021年10月のアップデートでAIファイルが読み込めるようになりました。

特にCanvaでAIファイルを使うと素材画像の拡大縮小と色変更がとても簡単で使い勝手バツグンです。

 

InkscapeとCanvaについては当ブログで以前にご紹介しているのでリンクを掲載しておきます。

注意したいのが、画像作成した作者さんのIllustratorのバージョンが古かったり、他のソフトや媒体で読み込めるように設定されていないと、InkscapeやCanvaで正常に読み込めなかったりうまく素材活用や編集できない場合があります。

 

ダウンロードした素材がそういった保存設定のデータだった場合、Illustratorじゃないとデータの閲覧・編集は難しいです。

私も「なにか手立てはないかな」と引き続きリサーチしていますので、新しい情報があれば追記します。

PSD(.psd)-Adobe Photoshop固有の保存形式

PSDはAdobeのPhotoshopというソフトの固有の保存形式です。

「レイヤー」という画像の重なりとそこに付与されたフィルターなどの効果を保持したまま保存することができます。

ペイントソフトを利用しない限りこの「レイヤー」という概念やPSD形式を扱うことはまずありませんが、素材や画像作成の講座などPSD形式で配布されることが稀にあるので頭の片隅にでも置いておくといいですね。

 

そしてこのPSD形式はPhotoshopでしか開けないの?というとこちらもそうではなく、前述のCLIP STUDIO PAINTやGIMPで閲覧・編集が可能です。

アイキャッチなどブログの画像の軽量化に!愛用のWEBサービスのご紹介

画像のデータ量を軽量化するために手っ取り早いのが「適切な拡張子のデータを利用する」「画像サイズを小さくする」ですが、表示させたい場所によっては拡張子を変えたくない、画像サイズそのものを小さくするのが難しいという場合もあります。

 

そんなときに便利なのが「画像の軽量化サービス」です。

 

画像の大きさを変更せずに、そしてできるだけ劣化させずに画像データを軽量化してくれるという便利なサービスです。

私もブログの画像などに活用しています。

 

「画像 軽量化」などと検索するとかなりの量の画像軽量化サービスがあります。

個人的な感想としては、色々使いましたがどのサイトも差はあまり感じられないので自分の使いやすいサイトを利用されるといいです。

 

なお、スマホのみで画像データを軽量化できるサービスは見つかりませでした。

スマホのみで軽量化したい場合は最低限画像サイズを小さくするという方法を取るしかありません。

(なにか新しいアプリやサービスを発見したら追記します)

 

それでは私が使っている軽量化サービスですが、なかでも特に知名度のある「TinyPNG 」です。

(英語のサイトになります)

tinypng.com

サイトに行くとパンダさんがどーんと目に入るサービスです。

軽量化サービスを検索すると知名度が高いだけあって紹介されているブログやサイトが多いですね。

 

JPG・PNGが対応しており、ドラッグ・アンド・ドロップでファイルを対象ファイルを選択できるので操作も簡単。

右上に「LOGIN」とありますが、そのまま気にせず登録不要で利用することができます。

 

実際に利用してみるとわかるのですが、軽量化したものとよくよく見比べても画像の違いはほとんどわかりません。

 

特に画像掲載を多くするブログではこの軽量化が表示スピードを大きく左右することもあるので利用することをオススメします。

 

ワードプレスの方はこのTinyPNGのプラグインがありますのでそちらを活用したほうが簡単に軽量化できるようです。

(私ははてなブログでワードプレスのプラグインに関しては門外漢なので参考リンクを貼っておきます)

まとめ:覚えておいて損はない「拡張子」

今回は「とりあえず覚えておけばOK!」な基本的な拡張子を中心にお伝えしました。

 

「なんとなく適当に使ってた!」という方も違いがわかって使い分けると、特にブロガーの方が気になるブログの表示スピードは大きな違いが出てくる場合もあるのでこれからのアイキャッチ作成などに役立ててくださいね。

 

拡張子のなかでもJPGとPNGの2つはよく使われる画像データですが、意外に違いがよくわからないで使っている方もいるので、この機会に「知らなかった!」という方は覚えておくと便利ですよ。

 

【全部無料】SNS投稿などに使える画像作成・ペイントソフト・アプリ【スマホ・タブレット編】

【全部無料】SNS投稿やアイコン作成に使える画像作成・ペイントツール【スマホ・タブレット編】

先日、PCで使える無料の画像作成ツールをご紹介しました。

 

【全部無料】アイキャッチやヘッダ作成に使える画像作成・ペイントツール【PC編】 - デザはじ

 

ですが、「PC持ってない!」「スマホやタブレットしかない!」という方が多い時代です。

そのような方に向けて、先日に引き続いて今回は

「無料で使える画像作成ツール【スマホ・タブレット編】」

をシェアしていきます。

 

画像作成のソフトの多くはスマホ・タブレット版をリリースしているものが多く、記事内容としましては前回のPC版と重複するアプリが多くなりますがご了承ください。

 

この記事でわかることは次のとおりです。

・アイコンやヘッダ画像を簡単に作れるアプリが知りたい

・無料で使えるオススメ画像作成アプリは?

・スマホやタブレットだけでなくPCともデータ共有したい

・PCで使っている便利なソフトをスマホ・タブレットでも使いたい

以上をふまえてお伝えしていきます。

 

 

【全部無料】SNS投稿などに使える画像作成・ペイントソフト・アプリ【スマホ・タブレット編】

Canva-SNS投稿テンプレートも豊富な画像作成アプリ

f:id:nyamo-sun:20211011112342j:plain

※画像はPC版のものです

 

PC編でもご紹介したCanvaです。

Canvaはアプリもリリースされていて、同一アカウントならPCとのデータの連携もスムーズです。

 

外出先で撮影した写真をアプリで取り込んで編集、お家に帰って仕上げをしたり印刷したりすることができます。

Instagramの投稿や簡易的な動画編集もできるのでストーリー作成もできてそのままスマホでUPすることも可能です。

 

基本無料ですが、有料版機能にある「背景リムーバー」は人物や物体を切り抜くことができる人気の機能です。

 

「背景リムーバー」は30日間の無料トライアルでお試し可能です。

(無料期間を過ぎたら課金されてしまうので、終了したい場合は解除を忘れずに!)

 

Canvaのサイトはこちら

Canva 

Canvaの詳細についてはメインブログでも取り上げています。

 

【Canva Pro】あのアニメ・ゲームのフォントが使える!無料お試しも - にゃもぶろ

Fotor-コラージュテンプレートが人気の画像作成サービス

f:id:nyamo-sun:20201204172331j:plain

※画像はPC版のものです

 

PC編でもご紹介したFotorはアプリ版もリリースされています。

 

私が気に入っているフィルター効果のほか、Fotorはコラージュ機能が人気です。

複数枚の写真をコラージュしてSNS投稿などもいいですね。

ハートの枠があるコラージュテンプレートなどもあり面白いです。

 

 

Fotorもメインブログで取り上げていますので詳細記事をリンクしておきます。

 

【Fotor】無料で使える高機能なオンライン画像加工サービス - にゃもぶろ

ibispaint-無料で使えるペイントアプリ

アイビスペイント ibispaint

お絵かきアプリとして知名度のあるアイビスペイント。

私はインスタ投稿の手書きの文字入れによく使っていますがイラストやロゴ作成など幅広い画像作成ができるアプリです。

 

使い勝手がいいアプリでスマホ・タブレットのアプリがリリースされています。

(PC版はありません)

 

無料版は広告がつく、使えるブラシなどに制限がある(広告を見ると使えるようになります)など若干不便な点はありますが、それを差し引いても使えるアプリです。

 

キラキラや星型のブラシなど写真に使っても面白いブラシも豊富で楽しいです。

 

アイビスペイントX
アイビスペイントX
開発元:ibis inc.
無料
posted withアプリーチ

MediBang PAINT-完全無料のペイントアプリ

f:id:nyamo-sun:20211011113804j:plain

引用:MediBangPaint

 

PC版でもご紹介したメディバンペイントは完全無料のお絵かき・漫画作成ソフトです。

PC・スマホ・タブレット版がリリースされています。

 

無料なのに充実したお絵かきアプリとして知名度があり、ユーザーも多いです。

コマ割りなどの機能があるので漫画風での解説画像やブログやSNSの漫画投稿などにも使えます。

 

メディバンペイント
メディバンペイント
開発元:MediBang inc.
無料
posted withアプリーチ

おまけ

おまけでご紹介するアプリは完全無料ではない、コンセプトが面白いなどの理由で別にご紹介させていただきます。

内容はPC編と重複していてスマホ・タブレット版もリリースされているものです。

CLIP STUDIO PAINT-プロも使っているペイントアプリ

f:id:nyamo-sun:20211011120533j:plain

引用:CLIP STUDIO PAINT

 

CLIP STUDIO PAINT(通称クリスタ)は多くの漫画家やイラストレーターなどプロも愛用しているイラスト・漫画制作ソフトです。

PC版との違いは料金で月・年額制のサブスクのみで買い切りがないという点です。

 

スマホのみ1台分のライセンスだと月額100円、年額700円とかなりお手頃。

タブレット版ライセンスはPC版と同額の1台分が月額480円、年額2,800円。

他にもPCやiPadなど様々なデバイスで2台、4台とお得にライセンスが月額・年額購入できるプランもあります。

 

初回に限り3ヶ月の無料お試しがあるのは一緒なので思う存分お試しできます。

(3ヶ月をすぎると課金になりますのでご注意を)

 

CLIP STUDIO PAINTを無料で試してみる

CLIP STUDIO PAINT PRO

ジャンプPAINT-ジャンプ公式の完全無料ペイントアプリ

f:id:nyamo-sun:20211011113819j:plain

引用:MediBangPaint

 

メディバンペイントが提供するジャンプ公式の完全無料の漫画作成ソフト「ジャンプペイント」。

こちらもアプリ版がリリースされています。

実際の作品をお手本に漫画の描き方が学べるという面白いコンセプトのペイントアプリです。

 

機能面ではメディバンペイントと一緒です。

お手本を元に画像作成することはメディバンペイントの使い方の練習のにもなりますので興味のある方はこちらのアプリからはじめてみるのもいいですね。

 

サイトトップのサンプル画像はモノクロの漫画原稿ですが、もちろんフルカラーで着彩できるのでアイコン作成などにも使えます。

 

ジャンプペイントのサイトはこちら

ジャンプPAINT

まとめ:スマホ・タブレットでお手軽デザイン

PC編に引き続き、スマホ・タブレットで画像作成が無料でできるアプリをご紹介しました。

 

私はご紹介したすべてのソフト・アプリを使いこなしているわけではないのですが、普段使い慣れているものや特に便利に使っているソフトやアプリ関してはロゴ作成やインスタの手書き投稿など、実際の使い方を例にご紹介していく予定です。

 

デザインをはじめたい人を応援するブログ「デザはじ」です!

f:id:nyamo-sun:20211005174219j:plain

はじめまして、にゃもと申します。

普段は「にゃもぶろ」というライフスタイル系ブログを書いている主婦です。

 

ライフスタイル系ブログと当ブログ、そしてTwitterやInstagramに使用する画像を外注サービスに頼ることなく自分ですべて用意して運営しています。

 

 

デザインをはじめたい人を応援するブログ「デザはじ」です!

いまや多くの人がやっているTwitterやインスタなどのSNS、ブログやYouTube などのメディア運営はプロじゃなくても必要最低限のデザインが必要になります。

 

「デザイン」といっても難しく考えず、簡単に言い直せばブログやSNSの「見た目」のことです。

 

アイコン、ヘッダ、チャンネルアート…いろいろな場面でデザインが必要になってきますね。

有料で作成をしてくれるサービスもありますが、金額もかかりますし

「できれば自分でなんとかしたい!」

と思っている方もいらっしゃるでしょう。

 

当ブログ『デザはじ』ではそんな方へ

『「スキル・コスト・センス」ゼロから始めるデザイン』

をコンセプトにデザインの情報をお届けしていきます。

当ブログでお伝えしていく内容

アイコンや画像などを手軽に作成できるサービスはWEB上にたくさんありますが、良質なサービスは多くの人が利用しがちで

「あ、この画像見たことある」

「これは○○のサービス使って作ったやつだ」

とふと気づく瞬間はありませんか?

 

確かに手軽で高品質なデザインを入手できるサービスは素晴らしいですが

「できれば人と被りたくない!」

と思っている方も多いのでは。

・デザインにできるだけお金をかけたくない!
・スキルやセンスがないけど自分だけのデザインを作りたい!
・すでにブログやSNSを始めているけど運営などに関するお役立ち情報が知りたい!

ブログ・SNSで使うデザインや画像づくりの情報をまったく初めての方でもわかりやすくお伝えしていきます。

コメントで疑問や質問があればお答えします

このブログでは今までのブログ・SNS運営で私が学んだり取り入れた情報をできるだけわかりやすくお伝えしたいと思っています。

 

ブログの各記事の下部にコメント欄を設けていますので、わかりづらかった部分やさらに知りたい項目などありましたら質問等にお答えしていきます。

新しい記事づくりの参考にしたり、該当記事のリライトの際の品質向上にも役立ちますので気がねなくコメントしてくださいね。

「デザ」インを「はじ」めたいあなたへ

「デザインブログ」というのは数多くありますが、個人的な感想としては「難しい」と感じるブログが少なからずあります。

 

それというのも「難しい」と感じるブログは実際にデザインを仕事にしている人、これからプロになろうとしている人、そんな初歩的な知識が必要ない人に向けて発信されているからです。

 

「自分のブログやSNSがデザインできる程度の初歩の知識でいいんだけどな」

「とりあえず簡単なことから知りたいな」

 

そんな「最初のステップ」を踏み出したいあなたに。

デザインをかじる…といっても端の端、ブログ運営とSNSという「デザ」インの「はじ」っこをかじってブログやTwitterでアイキャッチやヘッダ、ロゴ作成などしている私が「自分でなんとかしたい」あなたを応援します。