これからの教養を考える としちるのブログ

ブログカスタマイズ

ブログデザインをカスタマイズする際にお世話になってる私的参考サイトまとめ

投稿日:2016年12月4日 更新日:

当ブログでデザインに凝ってからチラシ作りからサイトのデザインまでいろいろなデザインの作成を頼まれるようになりました。と言っても、僕は絵が下手くそな素人なのですが、さまざまなツールを駆使してなんとか褒めて頂けるデザインを多少は作れるようになってきたという感じです。

今回は、自分が普段お世話になってるデザイン作成に役立つおすすめの参考サイトをいくつかまとめて紹介したいと思います。

初めに

この記事の対象者

デザイン作成を支援するサイト・ツールは腐るほどあるので、とても追いきれません。僕もこの記事にてあげたものをちゃんとすべて活用しきれているわけではなくて、見つけてただブックマークしているだけのとこもいっぱいあります。

ここでは一応、ブログを始めたてもしくは慣れてきたけどあまりデザインには力を入れてこなかった人で「もっとおしゃれにいじってみたいけどなに見たらいいの?」に多少は応えられるよう、まとめてみました。

と言っても、僕も使い切れていないので半備忘録的なまとめです。

もっといいサイトがあったら教えて頂けると助かります。

ブックマークに「デザイン」用のフォルダを作ろう

腐るほどある支援サイトを徐々に使いこなしていくためにも、まずは保存していつでも使える状態にしておきましょう。

勉強と同じです。テストで問題に解答するためにはまずは最低限記憶しないといけません。

というわけで、ブックマークのところを右クリックして「フォルダを作成」を選び、デザイン用のフォルダを作ってそこに主に見るサイトはブックマークしておきましょう。

RSSを活用して定期的に記事の更新をチェックしよう

さらに定期的にサイトの更新情報をチェックしたい場合はRSSを代表する『Feedly』などを活用するのがおすすめです。

ブックマークがあふれてしまっても見にくいので、取っておきたい記事は『Evernote』に放り込んでおくと後で編集する際に便利です。

以下の記事は、『Feedly』から『Evernote』に保存する際の流れを解説しています。

それではこれから個人的によく参照している・利用しているサイトを紹介していきたいと思います。

はてなブログ

www.yukihy.com

はてなブログのカスタマイズと言えばこの人というほど名が知れているのではないかt思われるゆきひーさんのブログデザインカスタマイズ記事のまとめです。このブログでも大変お世話になっています。おすすめ!

georges.hatenablog.jp

個人的にこの方の記事が好きです。ブログのカスタマイズについてもいろいろと書いてくれています。この吹き出しもジョージさんのブログから使わしてもらっています。

shirokai.hatenablog.com

はてなブログにはこちらで紹介されているフォントが埋め込まれていて、コードを記述すれば使えるようになっています。当ブログのメニューもこのフォントを活用しています。

ブログ全般

naifix.com

Elloraさんという方が運営している『Naifix』でもいろいろなブログカスタマイズ方法を初心者向けに解説してくれています。その他にもいろいろと勉強になるのでおすすめです!

これはいわゆるアフィリエイト用の商品紹介パーツなのですが、便利でいろんな方がこのパーツのカスタマイズを紹介してくれています。これをやるとデザインがきれいに整うようになるのでおすすめです。

Web全般

www.webtoolnavi.com

Web制作に関する記事が雑多にまとまって紹介されているサイトです。最近見つけたのでまだあまり見ていないんですがいい感じだと思っています。

www.webcreatorbox.com

とあるWebデザイナーさんが運営している個人サイトですが、サイトを見て分かるようにかなりポップでおしゃれな感じになっていて、記事も参考になりFeedlyに入れてチェックしています。

www.nxworld.net

こちらのサイトさんもあまりマジマジと見てはいないのですが、下の記事など分かりやすくかつおしゃれで大変参考にさせて頂いています。

photoshopvip.net

このサイトは個人的に化物だなと思っているんですが、日本のサイトから海外のサイトまですごい量のデザインに関する記事がどんどん公開されています。正直、見てるだけで楽しいサイトです!

無料画像

日本のサイト

日本で有名な無料画像サイトがこちら。特にイラスト屋さんのサイトはユーモアというかブラックジョーク?風刺?的なイラストも多く、見ていて思わず笑ってしまいます。

www.irasutoya.com

www.photo-ac.com

pixabay.com

※上のは日本のサイトというより日本語化されているサイトでした。

www.pakutaso.com

www.ashinari.com

海外のサイト

こちらは海外のサイトですが、英単語を適当に入力すればいろいろと見て気軽にダウンロードできるので使ってみてください。特に『Pexels』というサイトはおしゃれでかっこいい写真ばかりで愛用させてもらってます。

unsplash.com

negativespace.co

photocollections.io

gratisography.com

ソーシャルメディア

デザインをいじっているとソーシャルメディアの色を知りたいだとかいろいろあると思いますので、検索した際に参考にさせてもらった記事を置いておきます。

weboook.blog22.fc2.com

design.webclips.jp

homepage-reborn.com

素材サイト

facebook.design

fontawesome.io

freebiesbug.com

www.subtlepatterns.com

以下の素材サイトはすべて同じ人が運営している(と思われる)無料の素材集としては最強クラスのものです。自分で作るには技術がいるし大変なので、これらを活用すれば素人には十分だと思っています。いやはや、本当にありがたい…

kage-design.com

frames-design.com

pictogram2.com

fukidesign.com

yajidesign.com

flode-design.com

design-ec.com

free-line-design.com

flat-icon-design.com

event-pre.com

bg-patterns.com

town-illust.com

icooon-mono.com

速度関連

「Webデザイン作成のまとめ記事で速度改善?」と思う方もいるかもしれません。ですが、非常に関連しています今はGoogleもスマートフォンの普及によるモバイル端末からのインターネットアクセスの増加を背景に、検索の評価基準もモバイルに優しい表示速度が早いサイトが今までより重視されるようになってきました。

基本的にパソコンで見る時より非力かつ外で通信するスマートフォンの方が表示する速度には時間がかかってしまいます。

そこで、デザインを作る上ではやたらめったら画像などを使うのではなく、ページの表示速度にも気をつけながらデザイン制作することも重要です。

www.seohacks.net

tools.pingdom.com

www.cleancss.com

編集サイト&ソフト

compressor.io

おすすめの画像容量削減サイトが『Compressor』です。ブラウザ上で簡単にできるし、見た目もほとんど変わりません。以下のような紹介記事も書いたことがあります。

www.777logos.com

www.canva.com

design.webclips.jp

Adobe関連

デザインを自分でいじるとなると、Adobe製品を使う必要が出てくるかもしれません。自分もAdobeを契約していろいろと作りながら勉強しています。Photoshopはまだ上手くつかえないんですけど、Illustratorはそこそこ慣れてきたところです。

studio810.sakura.ne.jp

illustrator-design.com

デザインの基本のきは「色」と言っても過言ではないでしょう。1クリックで色コードをコピペできるサイト3つと配色の基本を解説するスライドを一緒に載せておきます。

www.materialui.co

www.colordic.org

www.slideshare.net

デザイン全般

研究発表のためとなっていますが、デザインで「伝える」ということを学ぶ際に勉強になったので貼っておきます。

最後に

思ったより多くて時間がかかってしまいましたが、こういったサイトをなめまわしてみながらデザインをいじっていけばそこそこおしゃれなサイトしていけるんじゃないかと思います。

なんとなくコメントを吹き出しにしてみたんですが少しうざいですね…

このように使い過ぎには注意です!

直すの面倒なのでこのままでいきます。

それでは~

 



学ぶ編集者

としちる

日本サッカー協会に入るため筑波大学体育専門学群を目指すも、受験前に父親が逃亡し、やむなく部活を辞める。教材費と受験費を稼ぐためにバイトしながらの宅浪生活を2年間送った後、国際総合学類に入学。タイにて日本語指導と留学も経験。帰国後、「人から始まる学問の見える化」を旗印とした『入門学術メディア Share Study』を創設。運営サイトは4つ、記事執筆数は250以上、イベント運営に携わった数は50以上(17年8月現在)。最近、VALUも動かしてます。

この記事が気に入ったら
いいね!しよう

Twitter で

「教養」をテーマにフリーランス系アカデミアンとして活動するとしちるのLINE@を始めました。ブログやTwitterではなかなか語れないことやLINE@登録者限定の資料も公開していく予定でっす!つれづれちるままに基本不定期更新で、執筆した記事をまとめて配信。確実に購読して、よりよく生きたい方どうぞ登録してやってくださいーッ!

-ブログカスタマイズ
-

Copyright© TIRU LABO , 2017 All Rights Reserved.