ウェブデザインに役に立つアイコン&デザインアイテム40選

ホームページデザインに役に立つアイコン集

ウェブデザイナーのためのオシャレなアイコンデザインコレクションです。
デザイナーは常にトレンドを追っています(流行りは直ぐに廃ってしまうので、、、)そこで、あなたが気に入ると思うデザインコレクションを紹介します。

アイコン、フォント、PSD、テンプレ、モックアップ、UIキットなど、マテリアルデザインにハマっている方なら恐らく気に入ると思います。その他のFreebiesコレクションもチェックしてみてください。

CMSはアウトソーシングして、自社更新できるホームページが構築できているけど、、、
毎日の更新がオシャレに出来ない!そんな広報担当者、ホームページ運営の担当者必見です!

 

この記事の目次

アイコン

ライブラリーアイコン50

ホームページデザインに役に立つアイコン集

地元の図書館で普通に見られるかわいいアウトラインアイコン特集:本、ソファー、メガネなど、全てベクターシェイプで構成されておりイラストレーターで編集できます。

https://www.behance.net/gallery/22946649/50-Free-Library-Icons

 

マテリアルデザインアイコン(色拡張版)

ホームページデザインに役に立つアイコン集

以前、Googleがマテリアルデザインアイコンを発表したのを覚えていますか?
それがこれです!
Googleのガイドラインに従い着色され、素敵なオリジナルデザインが600種以上あります。

http://www.iconshock.com/material-design-icons/

 

モダン UIアイコン

ホームページデザインに役に立つアイコン集

マイクロソフト エクスプレッションデザインを使用して作られたイケてるアイコンです。
シンプルでストレートな感じが特徴で、モダンUIスタイルには最適です。
複数のフォーマットで提供されていて、種類は1200以上があります。
http://modernuiicons.com/

 

ラウンドベクターアイコンセット

ホームページデザインに役に立つアイコン集

線を使用した、とてもシンプルなラウンドアイコンコレクションです。全て好きな大きさに変えられるベクターシェープで、EPS形式でダウンロードします。
https://dribbble.com/shots/1290973-Round-icon-set-Free-Download

 

アイコンフォント/デザインアウトラインアイコン

ホームページデザインに役に立つアイコン集

デザイン(AI、Sketch)とフォント(SVG)両バージョンで使える素晴らしいアイコンフォントです。
アウトラインスタイルはモダンで、見た目も良い感じです。
http://www.bypeople.com/ai-svg-sketch-icon-font-outline-icons/

 

繊細な黒のアイコンセット

ホームページデザインに役に立つアイコン集

音楽やその他をテーマにしたアイコンセットです。
白の背景に黒で描かれたシンプルなデザイン、PSDファイルでダウンロード、修正可能。無料。
https://dribbble.com/shots/1850586-Free-icons-set-from-Shakuro?1418828721

 

SEO関連のラインアイコン

ホームページデザインに役に立つアイコン集

インターネットビジネスで最近頻繁に耳にする用語をイメージした面白いアイコンです:マネタイゼーション (収益化)、SEO、広告など。
http://www.themeraid.com/freebies/free-seo-icons/

 

手書き落書きアイコンセット

ホームページデザインに役に立つアイコン集

PNG、PSD、SVG形式などニーズに合わせることができ、ビジネスに好印象を与えられる手書きアイコンセットです。
http://www.smashingmagazine.com/2014/11/13/free-hand-drawn-doodle-icon-set-100-icons-png-psd-svg/

 

Yoios:iOS 8にインスパイアされたOSX Yosemite

ホームページデザインに役に立つアイコン集

ヨセミテiMacにiOS 8をインストールすることによりアップルの世界を満喫できます。
https://github.com/mmarfil/yoios

 

PSDベクターアイコン120

ホームページデザインに役に立つアイコン集

10ダースの巨大パッケージのベクターアイコンです。
変わった配色と様々なテーマが特徴です。
http://www.bestpsdfreebies.com/freebie/120-vector-icons/

 

ソーシャル手描きアイコン

ホームページデザインに役に立つアイコン集

トップサイトの手描きソーシャルアイコンセットで自分自身のソーシャルネットワークを推進します。
https://www.behance.net/gallery/21928147/Social-Icons-Free-Set

 

アイコニックレトロ車両セット

ホームページデザインに役に立つアイコン集

輸送機関の歴史の中で最も愛されたもののパッケージです。細部まで丁寧に描かれいてPSDとベクタ形式があります。
http://www.oxygenna.com/freebies/iconic-retro-vehicles

 

フォント

バークフリー書体

フリーフォント

バークはサイズの大きいもの、タイトルやポスターなどに最も適したフォントです。
個人用やビジネス用、両方に自由に使用できます。
https://www.behance.net/gallery/20322587/Barque-Free-Typeface

 

スウィートパイナップル:手描きセリフウェブフォント

フリーフォント

通常ビジネスにおいて手描きフォントは好印象を与えます。
スィートパイナップルはそれをターゲットにしているのです。
http://medialoot.com/item/sweet-pineapple-hand-drawn-serif-webfont/

 

日曜日のフリーフォント

フリーフォント

晴天の日曜日はリラックスした気分になります。
このフォントは穏やかでのんびりした印象を与え、リラックスしているデザイナーは、全て大文字で出来たこのフォントを試してみるべきです。
https://www.behance.net/gallery/21641889/Sunday-Free-font

 

ベーカーズフィールドフォントファミリー

フリーフォント

ベーカーズフィールドはプリントとウェブの両形式あり、非常に読みやすい幾何学的フォントファミリーです。
いずれも無料です。
http://osamaworks.com/bakersfield-font/

 

ギルデッドハンド:手描きスクリプトフォント

フリーフォント

デザインに優雅さ、甘い手描き感を与える美しいフォントです。
個人用、ビジネス用にも無料で使用できます。
http://medialoot.com/item/gilded-hand-handwritten-script-font/

 

フェアーヴューインダストリアル サンセリフフォント

フリーフォント

簡約されたインダストリアルサンセリフ書体には2つの違ったフォントがあります。
個人用ライセンスを無料でゲットできます。
http://www.losttype.com/font/?name=fairview

 

ラブリーフリーフォント

フリーフォント

大文字の二重線で出来ていて、ラブリーで遊び心のある形をしたクールなフォントです。フォントが3種類あります。
http://fontfabric.com/lovelo-font/

 

デ·ラ·フエンテ

フリーフォント

アレックス·デ·ラ·フエンテ氏がこの書体を作り、自分の名前を付けました。
24pt以下でなければ使用できません。
http://www.delafuentefont.com/

 

ネロフリーフォント

フリーフォント

サイズの大きいもの用にデザインされた最先端の無料のフォントです。大胆な形状や曲線が特徴で、人々の注目を集めること間違いなしです。
https://www.behance.net/gallery/22255825/Nero-Free-Font

 

PSDとテンプレート

ヴィンテージビジネスブランディングテンプレートパック

ウェブデザインにオススメモックアップ

PSD形式で、会社のブランディング効果をもつ素敵なコレクションです。
ロゴ、フレーム、モックアップなど、あなたのビジネスプロジェクトに素晴らしい印象を与えます。
http://www.bypeople.com/vintage-freebie-pack/

 

フォンゾ:ワンページPSDテンプレート

ウェブデザインにオススメモックアップ

簡単ナビゲーションでシンプルに描かれている最小テンプレートです。
フォトショップのウォーリーフリーエディティング用(心配無用編集用)ベクターシェイプで構成されてます。
http://www.bypeople.com/one-page-psd-web-template/

 

ギャラクシー:ニュースレターPSDテンプレート

ウェブデザインにオススメモックアップ

あなたのニュースレターをギャラクシーでイメチェンします。
大胆な色合いとモダンな印象でクライアントを魅了すること間違いなし!
無料のGoogleフォントを利用します。
https://dribbble.com/shots/1862221-Freebie-Galaxy-Newsletter-PSD-Template?1419861889

 

ボックシィファイワンページ テンプレート

ウェブデザインにオススメモックアップ

この無料テンプレートはオンラインスペースに最先端の印象を与えます。主に新興企業やポートフォリオ向けです。
http://tympanus.net/codrops/2015/01/27/freebie-boxify-one-page-website-template/

 

ストラタテンプレート

ウェブデザインにオススメモックアップ

大きな画像とパララックス(視差)スクロールが特徴的なシンプルなポートフォリオテンプレートです。
上品でコンテンツにフォーカスを当てている印象です。
http://html5up.net/strata

 

パッションEメールテンプレート

ウェブデザインにオススメモックアップ

この素晴らしいEメールテンプレートであなたの次のニュースレターは蘇ります。大きな画像、アイコン、柔らかいシャドーが特徴です。
http://pixelhint.com/passion-html-responsive-email-template

 

モックアップ

 

雑誌の表紙モックアップ

ウェブデザインにオススメモックアップ

色々な角度と現実感が特徴的なカッコいい雑誌モックアップ。
http://www.reviewsapex.com/magazine-cover-mockup/#.VJwoDAAA

 

ポスターモックアップ

ウェブデザインにオススメモックアップ

あなたがデザインした最新のポスターを表示できるクールなモックアップです。
PSD形式で様々な照明や背景が選べます。
https://www.behance.net/gallery/10249145/Free-Poster-Mockup

 

デザイナーのデスク的要素

ウェブデザインにオススメモックアップ

本格的なデスク的要素を持つセットで、ポートフォリオにオリジナリティを加えます。
それぞれのパーツが離れているので自身で構成が可能です。
http://graphicburger.com/designer-desk-essentials/

 

名刺モックアップ

ウェブデザインにオススメモックアップ

プレゼンカードの最終デザインを決める前に、それがどのように見えるのかを想像することができます。
現実感を与えるためカードが重なったように立体的に見えるクールな効果があります。
http://www.graphberry.com/item/business-card-mockup-vol-7

 

ユーザーインターフェースキット

ミニUIキットPSD

ウェブデザインにオススメモックアップ

DribbbleユーザーのアフメドがミニUIキットを改良し作りました。PSD形式で利用可能。
https://dribbble.com/shots/1807929-Freebie?1415950976

 

エベントレイ UIキット

ウェブデザインにオススメモックアップ

興味深いダークカラーのパレットです。
チャート、メニュー、カレンダーなどをもつユーザーインターフェース一式です。
http://www.bypeople.com/free-psd-ui-kit-eventray/

 

スケッチのPausrrUIキット

ユーザーインターフェースキット

増え続けるスケッチデザイナー向けの美しいユーザーインターフェース一式。
少しずつ全てのものが入っており、ボタン、ウェブサイトレイアウト、アイコンなど全て大胆な色使いと形で出来ています。
http://www.sketchappsources.com/free-source/1044-pausrr-ui-kit-sketch-freebie-resource.html

 

ダッシュボードUIキット

ユーザーインターフェースキット

必要な要素が全て揃う効果的なアドミやユーザーパネルを作成できます。サンタアイコンでさえも揃います。
https://dribbble.com/shots/1852794-Free-Dashboard-UI-Kit

 

その他

マテリアルデザイン用カラーパレットスケッチプラグイン

ウェブデザインにオススメなデザインキット

マーシャルデザイナーが常にそばに置いておきたい便利な色パレットツールです。
色やボリュームを選択すると直ぐに色のトーンが作れます。
https://github.com/t32k/material-design-color-palette-sketch-plugin

 

まとめ

いかがでしたでしょうか?
アイコン、モックアップ、ユーザーインターフェースなど、洗練されたデザインの素材をピックアップしました。
Photoshopやイラストレーターがあれば、すぐに編集でき、自社のホームページに役立てる事が出来る素材ばかりです。

ABOUTこの記事をかいた人

GeoDesign

ホームページは、情報収集が得意なメディアです。 集めたデータを活用することで、ホームページの改善だけではなく、リアルマーケティングや、新商品開発に発展するまでにできるのです。
  • 成果の見えるホームページを運用したい。
  • デジタルマーケッターになれる広報担当者を育成したい。
  • 自社メディアでブランド力の強化と、顧客創造を図りたい。
こんな欲求をかかえるあなた。
  • どうしたらウェブサイトから成果が上がるのかわからない
  • 簡単に運用できるシステム、時間ロス・コストロスを減らしたい
こんな悩みをかかえるあなた。 私達にその欲求や悩みを改善するお手伝いを任せてみませんか?