無料すぎて助かった！WEB制作が「はかどる」素材まとめ

• 作成：2013/01/21
• 更新：2014/11/01
• Web制作 >

無料素材のブックマークが無限に増えてきた

そうだ！整理しよう

今回は一つ一つ紹介せず、すでに「素敵にまとめてあるサイト」をまとめました。まとめ系４８サイトのまとめです。

フォント、素材からレスポンシブ対応した初心者でもOKのWordPressテーマまで、全て無料です。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

１．日本語フリーフォント
２．海外のおしゃれなフリーフォント
３．国内の写真素材
４．アイコン
５．ユニークな素材
６．ベクター
７．Photoshop補助
８．ワイヤーフレーム
９．レスポンシブなWordpressテーマ
１０．スマホ用ページ テンプレート

１．日本語フリーフォント

重複するのもありますが、以下のサイトでほとんどの無料系フリーフォントが揃うと思います。

• 2012年版、漢字も揃っている日本語のフリーフォントのまとめ | コリス
• 漢字も使える日本語フリーフォント98種類まとめ [サンプル書体付き] 2012年2月版 | 56docブログ
• ベーシックで高品質で完全にフリーな日本語フォント - yayuguのにっき

２．海外のおしゃれなフリーフォント

このフォント使ってなかった！というのが多かった。イラスト等に使われているフォントが何かを調べるサイトはこちら。JPGなどの画像ファイルをアップロードすると、候補をピックアップしてくれる。

• 溺愛してやまない激オススメなシンプルフリーフォント、そして有料フォント | バンクーバーのうぇぶ屋
• 細みでスタイリッシュなフリーフォント50 – K'conf
• ダウンロードしておきたい100個のフリーフォント保存版まとめ - Photoshop VIP
• ダウンロードしておきたい30個のオシャレなフリーフォント保存版まとめ - Photoshop VIP
• 必見！Helveticaの代わりに使える30のフォント | SEO Japan

基本的なフォントやWebベースで使えるフォントの基礎知識

• 今さら聞けない？有名なフォント12種類の紹介とフォントの基礎知識について - YATのBLOG

３．国内の写真素材

フリーの写真素材って集めてみると、意外と膨大にあります。写真に写った人物の肌を綺麗に補正するソフトはこちら。

• こんなにあるのか！ 厳選・国内外のフリー画像・写真配布サイト集｜写真関係全般 デジタル＠備忘録
• デザイナーなら必ず知っておきたい国内素材サイト22選｜designaholic -Creative Column-
• えっこれも無料？商用利用できる画像ダウンロードサイトまとめ１５選 | 世界ろぐ

４．アイコン

• これだけあればシンプルアイコン探しには困らないかも！全部フリーのシンプルアイコンを一挙紹介！ | バンクーバーのうぇぶ屋
• 29000個以上もの膨大な数のアイコンが揃ったサイト「Free Icons Web」 | つーる亭
• フリーイラストサイト12点。商用利用OK・著作権表示不要・無料。 - YATのBLOG
• 白黒ベースのサイトを作りたい時に役立ちそうなWeb素材やWebデザイン例などのまとめ - かちびと.net
• 407個のwebデザイナー＆デベロッパーズ向けフリーアイコンとアイコン配布サイト2サイト - YATのBLOG

５．ユニークな素材

吹き出しや漫画系素材の他に、日本地図や矢印、ハンコなど。

• 吹き出し素材専門サイト「フキダシデザイン」
• マンガ素材辞典β-景観、効果線、描き文字、吹き出し、キャラクターなど、マンガ素材の無料ダウンロード
• 白地図、世界地図、日本地図が無料【白地図専門店】
• デザイン枠、飾り罫素材専門サイト「フレームデザイン」frame-design.com
• 地図の無料素材 - 地図AC
• スパムメールから収集したテキスト装飾 : mwSoft blog
• ハンコでアソブ
• 矢印素材いろいろ | DesignWalker
• 無料で商用利用可能な背景画像を提供する「背景倉庫」 – GIGAZINE
• フリーのガーリー素材いくつか / Maka-Veli .com
• 2013年カレンダーPDF無料ダウンロード | アラクネ

６．ベクター

シルエットのAIデータなどもここから補えます。Vecteezy!は無料で eps、ai形式のベクター画像ダウンロード可能。ライセンスは各画像ページに記載

• ベクター画像を大量に無料配布するサイトのまとめ | 日刊ウェブログ式
• 商用フリーで使える影絵素材サイト シルエットデザイン
• これは絶対覚えておいた方がよいシルエットの素材集:phpspot開発日誌
• 和のデザインに使える！国内商用可フリー素材・素材サイトまとめ ｜ Kana-Lier カナリエ
• 無料のベクター素材を提供しているサイト40選 │ Design Spice
• ai eps

７．Photoshop補助

普段撮影した写真やお気に入りの画像などを、プロカメラマンの様な仕上がりにしてくれるPhotoshop用アクション素材。他ブラシなど。

• プロ級の写真加工をワンクリックで完成、Photoshop無料アクション素材50個まとめ - Photoshop VIP
• 和や京都っぽさを演出するのに使えるPhotoshopのパターンとブラシ 全321個 ＋ ブラシファイルの中身が見れるアプリケーション - YATのBLOG
• デザイン力をアップする、質感系Photoshopブラシ素材22個まとめ - Photoshop VIP

PSD素材を探せるサイト

• 写真やベクトル無料でダウンロード| Freepik
• Download Free PSD | PSD Hunter
• 365psd | Download a free PSD every day.
• Design Kindle | Free Premium Web Design Resources
• download PSD - Download Free PSD
• Browsing Application Resources on deviantART

８．ワイヤーフレーム

• ワイヤーフレーム制作のための素材セット「The Ultimate Wireframe UI Kit」 | DesignDevelop
• ワイヤーフレームに使える素材いろいろ | DesignWalker
• ウェブデザインのワイヤーフレームに使えるPhotoshop関連のフリー素材キット27個まとめ - Photoshop VIP
• アイディアは紙から始まる。スマホ、タブレットなどに使えるワイヤーフレーム・テンプレートたち。 – IT / テクノロジー | TechDoll.jp

９．レスポンシブなWordpressテーマ

カスタマイズしやすそうなWordPressテーマをフリーでレスポンシブなものに限定してピックアップ。

• レスポンシブなWordpressテーマ制作のためのスターターテーマまとめ – K'conf
• 厳選！高品質なのに無料で使用できるレスポンシブ対応のWordPressのテーマのまとめ -2012年版 | コリス
• レスポンシブ・デザインの無料Wordpressテーマ12選 | ihayato.書店
• レスポンシブWebデザイン対応、シンプル系WordPressテーマ素材20個まとめ - Photoshop VIP

１０．スマホ用ページ テンプレート

• 【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。 (フェンリル | デベロッパーズブログ)
• HTML5+CSS3の導入時に役立つ7つの設定 : アシアルブログ
• Responsive Web Design用のHTML5+CSS3のテンプレート素材 | コリス
• 5つの効果で作る、よく使うCSS3ボタンデザインサンプル集｜最適化ノウハウコラム記事 ～スマートフォン最適化・スマートフォン対応サイト制作はTOUCH&SLIDEへ～
• iPhone・Androidアプリ等に使えるアイコンセット総まとめ：2010:phpspot開発日誌

以上、素敵な無料素材をまとめてあるサイトのブックマークでした。