ECコンサル アラタナはeコマースを中心とした「新たな○○を創造する」会社です!

ネットショップWEBデザイン向け無料素材・ツールBEST19

こんにちは!
アラタナでネットショップ専門WEBデザイナーをしている保久上です。

今回はデザインチームがお客様からよく聞くお悩みと共に、「ネットショップ向け無料デザイン素材・ツールサイトまとめ」を皆さんにご紹介します。

ネットショップ運用で悩むことといえば、運用や数字のことだけではなく、バナーを作ったりコンテンツページを作ったりというデザイン面での運用も、ネットショップ担当者の頭を悩ますポイントです。
そんなお悩みを少しでも軽くするためにも、デザイナーの私たちも活用しているツールをご紹介します。しかも今回は無料にこだわってご紹介します!

 

お悩みその1
インパクトのあるオシャレフォントを探してます!無料で!

「フォントってどれがいいのかサッパリ。けど、イメージに合うフォントを使いたいです…」

ネットショップ運用担当の、デザインの悩みどころを解決してくれるポイントが「フォント」。
もちろん、ちょっとインパクト欲しい…と頭を抱えるのも、「フォント」です。

悩みどころではありますが、サイトの雰囲気に合わせてフォントを選ぶことで、デザインの作りこみをせずに印象をガラッと変えることも、ネットショップのクオリティもぐん!と上げることも出来るので一石二鳥です。
フォントの種類に関しては、【身の回りの調味料パッケージフォントデザイン24選】を是非チェックしてみてくださいね。

今回オススメするのはこの3つの和文フォントです。さっそく見てみましょう。

 

①自家製 Rounded M+

1

windowsユーザーには嬉しい丸ゴシックです!
https://sites.google.com/site/roundedmplus/

macだと、初期から丸ゴシックがインストールされていますが、windowsだと残念ながらデフォルトでは入っていません。
丸ゴシックは読みやすくありながらも、普通のゴシックや明朝とは違ったイメージを持たせることが出来るので、入れておいて損はなし!オススメです。

 

②こども丸ゴシック

2

もっと素朴なやわらかさが欲しい!そんな時には手書き風の丸ゴシック。
http://typingart.net/

このフォントは、手描きの柔らかさがありつつも読みやすい素敵なフォントです。
特殊で凝ったフォントを使うと、どうしても読みやすさが下がってしまうこともあるので、フォントのインパクトだけでなく、”ちゃんと読んでもらえるかな?”という点を考えてフォントを選びたいですね。

 

③たぬき油性マジック

3

http://tanukifont.com/tanuki-permanent-marker/

ポップっぽいバナーを作るならイチオシ!どうしても人の手で作ったあたたかみがなくなりがちな、ウェブのバナーですが、こういったフォントを使うことで、人情に訴えかけるようなバナーデザインも出来ちゃいそうですね!

 

注意しよう!
無料フォントにもルールがあります!

利用規約をよく読み、商用利用でも無料で使えるのかなど、しっかり確認しましょう。

 

お悩みその2
デザインのアクセントでアイコンを入れたいんです!

「ワンポイント入れたいけど、自分では作れないし…無料でいいものありませんか?」

サイトのワンポイントや、よりバナーに賑わい・わかりやすさをプラスするアイコンですが、これを一から作るとなると、結構難しいものです。
特に、セールに合わせてバナーを作らなきゃ!と、時間との戦いに追われるネットショップ担当者にとって、アイコンを一から作る作業というのは、途方もなく大変なことです。

 

④ICON HOIHOI

4

カラフルで見やすく親しみやすいアイコン素材が揃っています。とってもクオリティが高い!
http://iconhoihoi.oops.jp/

ネットショップのカテゴリだけでなく、ウェブや医療系、季節もののアイコンまで豊富に揃っているので、欲しいアイコン素材が見つけやすいです。

 

⑤デザイン素材.com

5

ミニマムな使えるワンポイントアイコンが揃っています。
http://designsozai.com/

ネットショップで使いたい、配送関係のデザインアイコン素材が充実しています。テイストがオールマイティー。いろいろなデザインのネットショップで使えるアイコン素材になっています。

 

⑥DOTS DESIGN

6

http://dots-design.com/

HTMLメルマガにも使えそうな、ミニアイコンがたくさん揃ってます。
ちょっとでもメルマガのデザインに凝って、ネットショップに来てもらいたいんだよね…と頭を抱えている運用者の皆さんにオススメ。もちろん、スマートフォンページ等で使っても、素敵なアクセントになること間違いなし。

 

⑦商用利用可のWEB素材が無料な素材屋

7

http://ec-sozai.net/

クリアな印象のアイコンが揃っています。キレイ目な美容・コスメ、レディースアパレル系のネットショップにおすすめの素材です。
何気ないテキストのページでも、ちょっとしたアクセントが入っていると、女子のハートを鷲掴み!ネットショップの好感度も上がりますね♪

 

⑧WEBデザイナーが作った0円の素材集

8

http://sozai.any-style.net/

落ち着いた色合いのアイコン素材が揃っています。オーガニック推しのネットショップにピッタリだな〜といつも妄想しています!
こういったミニマムアイコンは、スマートフォンページデザインで使ってみたいところ。最近ではスマートフォンでの運用も考えなければいけない担当者さん、どんどんこういった素材を活用して、デザインを作ってネットショップを盛り上げましょう。

 

注意しよう!
無料素材にもルールがあります!

利用規約をよく読み、商用利用でも無料で使えるのか・使い方ルールなど、しっかり確認しましょう。

 

お悩みその3
ページにイラストを入れて分かりやすくしたいんです!

「目につきやすいように、イラストとかデザインに入れたいんです!…描けないですけど」

もっと見てもらいやすく、分かりやすいページやバナーデザインを作りたいけど、アイコンやイラストを使うにも、自分では上手くかけないから文字ばっかりになっちゃう・・・
急いで作らないといけないけど、凝ったものを作りたい。そんなことありませんか?

このお悩みには、イラスト素材で解決です!

 

⑨Illust AC

9

http://www.ac-illust.com/

イラストをデザインに使いたいんだけど、イメージがぼんやりしてて…とりあえず探したいんだよね。って事もありますよね。うんうん。
季節ものからイラスト・文字だけのイラストと幅広いので、ぜひ活用してみてください!登録することでダウンロード出来ます。

 

⑩いらすとや

10

http://www.irasutoya.com/

ほんわかやさしい、暖かくて味のあるイラストがいい!そんなあなたはこちらがおすすめ。
ファミリーや女性、子供向けのネットショップ等で大活躍ではないでしょうか?
ランディングページのちょっとした説明部分に入れるもの、分かりやすくて使いやすいです。これが無料だなんて、信じられません!

 

⑪矢印デザイン

11

http://yajidesign.com/

⑫フキダシデザイン

12

http://fukidesign.com/

ページやバナーでちょっとしたアクセントが欲しいけど、アイディアが…という時には、矢印・フキダシデザインに頼っちゃいましょう!いろいろなパターンの吹き出し・矢印素材たちが集められています。

ベクターデータでも配布されているので、自由な編集が出来ます。愛用されているデザイナーさんも多いのでは?

 

⑬シルエットデザイン

13

http://kage-design.com/wp/

「カッコいいバナーを作りたい」「ちょっとしたアイコンにシルエットがほしい」という時に、オススメなのがシルエットデザイン。
あ〜これこれの定番から、こんなものまで!?と幅広いシルエッデータ素材が配布されています。

 

「クラウドソーシングで制作を頼む」という選択肢も!

けど、使える予算は決まっているし、なんとかならないものか…「具体的なイメージはあるけど、無料で見つからない。」そんな時もありますよね。
そんな時には、クラウドソーシングでデザイン作成を依頼するもの、一つの方法です。

代表的なクラウドソーシング例(50音順)
※ 外部サービスとなりますので、利用規約等をしっかりと確認の上、ご利用下さい。

クラウドワークス
http://crowdworks.jp/

yahoo!Japan クラウドソーシング
http://crowdsourcing.yahoo.co.jp/

ランサーズ
http://www.lancers.jp/

 

お悩みその4
バナーやコンテンツページで使える写真が無くて困ってます

「使える綺麗な写真素材が欲しい。撮影するには予算が…無料でいいものないですか?」

ネットショップで使える写真素材を準備するのって、本当に大変ですよね。
自分で頑張って、ネットショップ用バナーを作りたいけれども、手持ちの写真はイマイチ。

手元のカメラで撮ってみたものの、あまりパッとしないし、カメラマンにお願いしてまでお金は掛けられないし…あわよくば無料で、タダで、良い写真素材が無いものか。

800サイト以上の構築をお手伝いする中で、かなりのネットショップ運用者様からご相談を受ける多くが、この写真のお悩みです。そんな時にオススメしているのが、この写真素材です!

 

⑭足成

14

http://www.ashinari.com/

いろいろな年齢層のモデルカットがあったり、「これが欲しかった」、痒いところに手が届く写真素材サイト。このクオリティが無料!
キーワードで直接検索してみると、欲しかった写真にたどり着きやすくなりましたのでオススメ。
商品の成分紹介で、必要なお花の写真があるんだけど…という場合などなど、写真量が多いのである確率も高く、かなり便利な写真素材サイトです!

 

⑮ぱくたそ

15

http://www.pakutaso.com/

ランディングページ・バナーで使えそうな人物写真や、イメージカットとして使えそうな料理写真、食材のカットなど、ネットショップには嬉しい写真素材が多く提供されています。
ネタから本気の美麗写真まで、クオリティが素晴らしいです。ネットショップのブログ写真で使われてみては?

 

⑯photoAC

16 http://www.photo-ac.com/
写真ボリュームと幅広いジャンルがすごい。さわかやで綺麗な印象の写真素材が多いので、コスメや美容関係のネットショップには重宝されそうだな〜と思っています。
あとは無料ではなかなかない、水のイメージが豊富なのも感動です!美しい〜!!
無料ではありますが、会員登録で好きなだけ写真をダウンロード可能となってます。

 

お悩みその5
バナー作りたい!画像編集で無料のツールはありませんか?

「ツールがなくてバナーも商品画像編集も、文字入れもできない!なんとかしてください…」

ネットショップ運用担当者様からのご相談で、一番多いお悩みは画像編集についてです。
画像編集ツールを使って、商品画像をより綺麗にしたり、サイズをトリミングしたり、特集やセールなどのバナーを作ったり。これらが、ネットショップ運用で必要になってくる画像編集作業です。

画像編集を行うには専用のツール・ソフトが必要になってくるのですが、そこがどのネットショップ運用者様も頭を抱えるポイントのようです。
デザイナーが使うツールのPhotoshopやFireworksなんて高いもの買えない!けれども、バナーをおくために、画像編集で文字入れしたり切り抜きしたり、合成したり…やりたいことはあるのに…!

そんな時にオススメの無料ツールはこちらです!

 

⑰Gimp

17

http://www.gimp.org/

無料版photoshopとして有名なソフトです。ダウンロードして使います。
画像加工編集をしたり、イラストを書いたり、そこからバナーをデザインするのにはピッタリです。

ただし、公式サイトや実際のツールも英語なので、探り探り使わないといけません。使えるようになれば心強い味方になりますので、ぜひチャレンジしてみてはいかがでしょうか?
初心者向けのサイトも多数ありますので、調べながらだとわかりやすいですね!

 

⑱INSCAPE

18

http://www.inkscape.org/ja/

こちらは、無料版のillustratorとして有名なツールです。こちらもダウンロードして使います。
最近流行りのフラットなデザイン・文字だけの簡単なバナーを作ったり、図形を作ったりするのにはピッタリなツールです。
日本語の公式があることと、解説も日本語で準備されているので、少しは使い始めやすいのかな思います。

 

⑲PIXLR

19

http://pixlr.com/

ブラウザで画像編集が出来るスゴ腕ツールです。3種類ありますが、一番最適なのは、エディターでしょうか。
こちら:http://pixlr.com/editor/
画像を読み込んで、比率を設定して切り取りができたり、フィルターを使って画像加工ができたり、かなり高機能…!しかも無料…!このツール、できる…!!
手軽に画像加工を始めたい方は、ぜひお試しください。

 

 

まとめ

いかがでしたか?きっとみなさん、当てはまるお悩みも多かったのではないでしょうか。
ネットショップ運用の中で、デザインする作業は本当に苦労が多いです。

ですが、この苦労を乗り越えることで、より見て欲しい商品へご案内出来てより多くの方に買って頂けたり、わかりやすいご案内でファンを増やせたり、ブランドイメージをどんどんアピールできたりと、お客様により寄り添ったショップへと成長させていけることでしょう。
ぜひその一歩を進むためにも、800サイト以上の構築実績の中で蓄積してきたネットショップのデザインナレッジで、少しでもお悩みを解決できたらなによりです!

素敵なデザインライフを♪

 

 

この記事を書いた人

ECのノウハウを知る

イベント・セミナー情報