ウェブ制作やデザイン制作の助けになるサイト12選

こんにちは。はてブ初めて1年….時間の流れの速さを感じる….しかもプロって自動更新されないと言う事実を知ったwみなさんも気をつけえてください。そんなこんなで毎日学校で忙しい日々を送ってます。それで、自分が課題で使ってるウェブ制作用のフリー素材サイト（日本、海外）や学校で教えてもらったツールをまとめて紹介していこうと思います。

素材系

基本的には全部著作権フリーです。

イラストAC

無料イラストならここですね。jpg, png, ai-eps（イラレ）データを選んでダウンロードできます。

写真AC

ここはよく自分のブログのアイキャッチとして使わせていただいています。

イラストAC

外部リンク

 

1198 Users

799 Pockets

無料イラスト/フリー素材なら「イラストAC」

https://www.ac-illust.com

イラストACは、かわいくておしゃれな無料イラスト・人物・フレーム・動物・年賀状などの素材がフリー。AI・EPSやJPEG・PNG形式の画像も無料でダウンロードOK！商用利用、編集もOKなイラストAC。

icoon-mono

写真AC

外部リンク

 

1107 Users

1117 Pockets

写真素材なら「写真AC」無料（フリー）ダウンロードOK

https://www.photo-ac.com

無料写真素材を提供する「写真AC」のフリー写真素材は、個人、商用を問わず無料でお使いいただけます。クレジット表記やリンクは一切不要です。Web、DTP、動画などの写真素材としてお使いください。

アイコン専門です。サイズも選べて拡張子も選べます。すごい便利。

Pixabay

ログインなしでダウンロードできるので急ぎの時には便利です。しかし、いくつかの写真には著作権があるみたいなのでしっかり確認しないといけません。

リンクが動作しないのでテキストで貼ってます。直接コピペしてみて下さい。

https://pixabay.com/

Subtle Patterns

たくさんの背景画像があります。自分で作った背景も投稿できます。

https://www.toptal.com/designers/subtlepatterns/

調べる系

HTML Color Codes

htmlcolorcodes.com

外部リンク

 

37 Users

2449 Pockets

https://htmlcolorcodes.com

https://htmlcolorcodes.com

色を探す時に楽です。って言ってもフォトショとかでもできるんですけどねw

Special Characters

特殊文字が必要な時に探せます（英語です。）

WIRED

外部リンク

 

13 Users

16 Pockets

Special Characters

https://www.wired.com/2010/02/special-characters/

To make special characters and accented letters show up on your pages, use a special set of codes called character entities, which you insert into your HTML code and which your browser will display as the corresponding symbols or characters you want. The most common character entities have been collected by the International Organization for

コピペ、テンプレート系

CSS Zen Garden

CSSのテンプレがダウンロードできます。

www.csszengarden.com

外部リンク

 

395 Users

3158 Pockets

CSS Zen Garden: The Beauty of CSS Design

http://www.csszengarden.com

A demonstration of what can be accomplished visually through CSS-based design.

 Listamatic

これはあるサイトの中の<ul>でどんなナビゲーションメニューが作れるかの例が載っています。とりあえずこのサイト自体のデザインがやばいんですけどねw

css.maxdesign.com.au

外部リンク

 

149 Users

185 Pockets

Listamatic: one list, many options - Using CSS and a simple list to create r...

http://css.maxdesign.com.au/listamatic/

CSS3.0 Maker

CSSで大まかにできることを選択するだけで勝手にコードを作ってくれると言うツールです。

www.toptal.com

外部リンク

 

389 Users

1634 Pockets

Toptal's CSS3 Generator Tool allows you to easily generate useful snippe...

https://www.toptal.com/developers/css3maker

Toptal's CSS3 Generator Tool allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.

CSS3 Button Generator

CSS3.0Makerと同じ原理でボタンを勝手に作ってくれます。

css3button.net

外部リンク

 

567 Users

326 Pockets

CSS3 Button Generator – This site was closed.

https://css3button.net

TExt to ASCII Art Generator

これは打った文字をそのままモスキーアートにしてくれますw

あんまり使う機会はないかもしれないですね（笑）

patorjk.com

外部リンク

 

1575 Pockets

Text to ASCII Art Generator (TAAG)

http://patorjk.com/software/taag/#p=testall&amp;#038;h=0&amp;#038;f=Train&amp;#038;t=hello%20world

このくらいですね。とりあえずHTML/CSSはおおよそカバーしてるのでどんどんウェブサイト作っていきたいですね！！！

それではまたCyaaaaaa!!!!

sgw

フロントエンド

TwitterFacebook

カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。