ウェブデザインに役に立つアイコン&デザインアイテム40選
ウェブデザイナーのためのオシャレなアイコンデザインコレクションです。
デザイナーは常にトレンドを追っています(流行りは直ぐに廃ってしまうので、、、)そこで、あなたが気に入ると思うデザインコレクションを紹介します。
アイコン、フォント、PSD、テンプレ、モックアップ、UIキットなど、マテリアルデザインにハマっている方なら恐らく気に入ると思います。その他のFreebiesコレクションもチェックしてみてください。
CMSはアウトソーシングして、自社更新できるホームページが構築できているけど、、、
毎日の更新がオシャレに出来ない!そんな広報担当者、ホームページ運営の担当者必見です!
アイコン
ライブラリーアイコン50
![ホームページデザインに役に立つアイコン集](https://studio110.info/wp-content/uploads/2015/03/50-Library-Icons-e1426029097669.jpg)
地元の図書館で普通に見られるかわいいアウトラインアイコン特集:本、ソファー、メガネなど、全てベクターシェイプで構成されておりイラストレーターで編集できます。
https://www.behance.net/gallery/22946649/50-Free-Library-Icons
マテリアルデザインアイコン(色拡張版)
![ホームページデザインに役に立つアイコン集](https://studio110.info/wp-content/uploads/2015/03/Material-Design-Icons-e1426029148643.jpg)
以前、Googleがマテリアルデザインアイコンを発表したのを覚えていますか?
それがこれです!
Googleのガイドラインに従い着色され、素敵なオリジナルデザインが600種以上あります。
https://www.iconshock.com/material-design-icons/
モダン UIアイコン
![ホームページデザインに役に立つアイコン集](https://studio110.info/wp-content/uploads/2015/03/Modern-UI-Icons-e1426029174678.jpg)
マイクロソフト エクスプレッションデザインを使用して作られたイケてるアイコンです。
シンプルでストレートな感じが特徴で、モダンUIスタイルには最適です。
複数のフォーマットで提供されていて、種類は1200以上があります。
https://modernuiicons.com/
ラウンドベクターアイコンセット
![ホームページデザインに役に立つアイコン集](https://studio110.info/wp-content/uploads/2015/03/Round-Vector-Icon-Set.jpg)
線を使用した、とてもシンプルなラウンドアイコンコレクションです。全て好きな大きさに変えられるベクターシェープで、EPS形式でダウンロードします。
https://dribbble.com/shots/1290973-Round-icon-set-Free-Download
アイコンフォント/デザインアウトラインアイコン
![ホームページデザインに役に立つアイコン集](https://studio110.info/wp-content/uploads/2015/03/Icon-Font-Design-Outline-Icons-e1426029246670.jpg)
デザイン(AI、Sketch)とフォント(SVG)両バージョンで使える素晴らしいアイコンフォントです。
アウトラインスタイルはモダンで、見た目も良い感じです。
https://www.bypeople.com/ai-svg-sketch-icon-font-outline-icons/
繊細な黒のアイコンセット
![ホームページデザインに役に立つアイコン集](https://studio110.info/wp-content/uploads/2015/03/Delicate-Black-Icons-Set-e1426029272552.jpg)
音楽やその他をテーマにしたアイコンセットです。
白の背景に黒で描かれたシンプルなデザイン、PSDファイルでダウンロード、修正可能。無料。
https://dribbble.com/shots/1850586-Free-icons-set-from-Shakuro?1418828721
SEO関連のラインアイコン
![ホームページデザインに役に立つアイコン集](https://studio110.info/wp-content/uploads/2015/03/SEO-Related-Line-Icons-e1426029305832.jpg)
インターネットビジネスで最近頻繁に耳にする用語をイメージした面白いアイコンです:マネタイゼーション (収益化)、SEO、広告など。
https://www.themeraid.com/freebies/free-seo-icons/
手書き落書きアイコンセット
![ホームページデザインに役に立つアイコン集](https://studio110.info/wp-content/uploads/2015/03/Hand-Drawn-Doodle-Icon-Set-e1426029342560.jpg)
PNG、PSD、SVG形式などニーズに合わせることができ、ビジネスに好印象を与えられる手書きアイコンセットです。
https://www.smashingmagazine.com/2014/11/13/free-hand-drawn-doodle-icon-set-100-icons-png-psd-svg/
Yoios:iOS 8にインスパイアされたOSX Yosemite
![ホームページデザインに役に立つアイコン集](https://studio110.info/wp-content/uploads/2015/03/Yoios-e1426029371929.jpg)
ヨセミテiMacにiOS 8をインストールすることによりアップルの世界を満喫できます。
https://github.com/mmarfil/yoios
PSDベクターアイコン120
![ホームページデザインに役に立つアイコン集](https://studio110.info/wp-content/uploads/2015/03/120-Vector-Icons-PSD-e1426029401464.jpg)
10ダースの巨大パッケージのベクターアイコンです。
変わった配色と様々なテーマが特徴です。
https://www.bestpsdfreebies.com/freebie/120-vector-icons/
ソーシャル手描きアイコン
![ホームページデザインに役に立つアイコン集](https://studio110.info/wp-content/uploads/2015/03/Social-Icons-Hand-drawn-Icons-e1426029432828.jpg)
トップサイトの手描きソーシャルアイコンセットで自分自身のソーシャルネットワークを推進します。
https://www.behance.net/gallery/21928147/Social-Icons-Free-Set
アイコニックレトロ車両セット
![ホームページデザインに役に立つアイコン集](https://studio110.info/wp-content/uploads/2015/03/A-Set-of-Iconic-Retro-Vehicles-e1426029459505.jpg)
輸送機関の歴史の中で最も愛されたもののパッケージです。細部まで丁寧に描かれいてPSDとベクタ形式があります。
https://www.oxygenna.com/freebies/iconic-retro-vehicles
フォント
バークフリー書体
![フリーフォント](https://studio110.info/wp-content/uploads/2015/03/Barque-Free-Typeface.jpg)
バークはサイズの大きいもの、タイトルやポスターなどに最も適したフォントです。
個人用やビジネス用、両方に自由に使用できます。
https://www.behance.net/gallery/20322587/Barque-Free-Typeface
スウィートパイナップル:手描きセリフウェブフォント
![フリーフォント](https://studio110.info/wp-content/uploads/2015/03/Sweet-Pineapple-e1426029550437.jpg)
通常ビジネスにおいて手描きフォントは好印象を与えます。
スィートパイナップルはそれをターゲットにしているのです。
https://medialoot.com/item/sweet-pineapple-hand-drawn-serif-webfont/
日曜日のフリーフォント
![フリーフォント](https://studio110.info/wp-content/uploads/2015/03/Sunday-Free-Font-e1426029580326.jpg)
晴天の日曜日はリラックスした気分になります。
このフォントは穏やかでのんびりした印象を与え、リラックスしているデザイナーは、全て大文字で出来たこのフォントを試してみるべきです。
https://www.behance.net/gallery/21641889/Sunday-Free-font
ベーカーズフィールドフォントファミリー
![フリーフォント](https://studio110.info/wp-content/uploads/2015/03/Bakersfield-Font-Family-e1426029606949.jpg)
ベーカーズフィールドはプリントとウェブの両形式あり、非常に読みやすい幾何学的フォントファミリーです。
いずれも無料です。
https://osamaworks.com/bakersfield-font/
ギルデッドハンド:手描きスクリプトフォント
![フリーフォント](https://studio110.info/wp-content/uploads/2015/03/Gilded-Hand-e1426029636247.jpg)
デザインに優雅さ、甘い手描き感を与える美しいフォントです。
個人用、ビジネス用にも無料で使用できます。
https://medialoot.com/item/gilded-hand-handwritten-script-font/
フェアーヴューインダストリアル サンセリフフォント
![フリーフォント](https://studio110.info/wp-content/uploads/2015/03/Fairview-e1426029662953.jpg)
簡約されたインダストリアルサンセリフ書体には2つの違ったフォントがあります。
個人用ライセンスを無料でゲットできます。
https://www.losttype.com/font/?name=fairview
ラブリーフリーフォント
![フリーフォント](https://studio110.info/wp-content/uploads/2015/03/Lovelo-Free-Font-e1426029688870.jpg)
大文字の二重線で出来ていて、ラブリーで遊び心のある形をしたクールなフォントです。フォントが3種類あります。
https://fontfabric.com/lovelo-font/
デ·ラ·フエンテ
![フリーフォント](https://studio110.info/wp-content/uploads/2015/03/De-La-Fuente-e1426029714184.jpg)
アレックス·デ·ラ·フエンテ氏がこの書体を作り、自分の名前を付けました。
24pt以下でなければ使用できません。
https://www.delafuentefont.com/
ネロフリーフォント
![フリーフォント](https://studio110.info/wp-content/uploads/2015/03/Nero-Free-Font.jpg)
サイズの大きいもの用にデザインされた最先端の無料のフォントです。大胆な形状や曲線が特徴で、人々の注目を集めること間違いなしです。
https://www.behance.net/gallery/22255825/Nero-Free-Font
PSDとテンプレート
ヴィンテージビジネスブランディングテンプレートパック
![ウェブデザインにオススメモックアップ](https://studio110.info/wp-content/uploads/2015/03/Vintage-Business-Branding-Template-Pack-e1426029780943.jpg)
PSD形式で、会社のブランディング効果をもつ素敵なコレクションです。
ロゴ、フレーム、モックアップなど、あなたのビジネスプロジェクトに素晴らしい印象を与えます。
https://www.bypeople.com/vintage-freebie-pack/
フォンゾ:ワンページPSDテンプレート
![ウェブデザインにオススメモックアップ](https://studio110.info/wp-content/uploads/2015/03/Fronzo-e1426029805264.jpg)
簡単ナビゲーションでシンプルに描かれている最小テンプレートです。
フォトショップのウォーリーフリーエディティング用(心配無用編集用)ベクターシェイプで構成されてます。
https://www.bypeople.com/one-page-psd-web-template/
ギャラクシー:ニュースレターPSDテンプレート
![ウェブデザインにオススメモックアップ](https://studio110.info/wp-content/uploads/2015/03/Galaxy-e1426029840745.jpg)
あなたのニュースレターをギャラクシーでイメチェンします。
大胆な色合いとモダンな印象でクライアントを魅了すること間違いなし!
無料のGoogleフォントを利用します。
https://dribbble.com/shots/1862221-Freebie-Galaxy-Newsletter-PSD-Template?1419861889
ボックシィファイワンページ テンプレート
![ウェブデザインにオススメモックアップ](https://studio110.info/wp-content/uploads/2015/03/Boxify-e1426029867935.jpg)
この無料テンプレートはオンラインスペースに最先端の印象を与えます。主に新興企業やポートフォリオ向けです。
https://tympanus.net/codrops/2015/01/27/freebie-boxify-one-page-website-template/
ストラタテンプレート
![ウェブデザインにオススメモックアップ](https://studio110.info/wp-content/uploads/2015/03/Strata-e1426029899391.jpg)
大きな画像とパララックス(視差)スクロールが特徴的なシンプルなポートフォリオテンプレートです。
上品でコンテンツにフォーカスを当てている印象です。
https://html5up.net/strata
パッションEメールテンプレート
![ウェブデザインにオススメモックアップ](https://studio110.info/wp-content/uploads/2015/03/Passion-e1426029924118.jpg)
この素晴らしいEメールテンプレートであなたの次のニュースレターは蘇ります。大きな画像、アイコン、柔らかいシャドーが特徴です。
https://pixelhint.com/passion-html-responsive-email-template
モックアップ
雑誌の表紙モックアップ
![ウェブデザインにオススメモックアップ](https://studio110.info/wp-content/uploads/2015/03/Magazine-Cover-Mockup-e1426029954342.jpg)
色々な角度と現実感が特徴的なカッコいい雑誌モックアップ。
https://www.reviewsapex.com/magazine-cover-mockup/#.VJwoDAAA
ポスターモックアップ
![ウェブデザインにオススメモックアップ](https://studio110.info/wp-content/uploads/2015/03/The-Poster-Mockup-e1426029985233.jpg)
あなたがデザインした最新のポスターを表示できるクールなモックアップです。
PSD形式で様々な照明や背景が選べます。
https://www.behance.net/gallery/10249145/Free-Poster-Mockup
デザイナーのデスク的要素
![ウェブデザインにオススメモックアップ](https://studio110.info/wp-content/uploads/2015/03/Designer-Desk-Essentials-e1426030011624.jpg)
本格的なデスク的要素を持つセットで、ポートフォリオにオリジナリティを加えます。
それぞれのパーツが離れているので自身で構成が可能です。
https://graphicburger.com/designer-desk-essentials/
名刺モックアップ
![ウェブデザインにオススメモックアップ](https://studio110.info/wp-content/uploads/2015/03/Business-Card-Mockup-e1426030051529.jpg)
プレゼンカードの最終デザインを決める前に、それがどのように見えるのかを想像することができます。
現実感を与えるためカードが重なったように立体的に見えるクールな効果があります。
https://www.graphberry.com/item/business-card-mockup-vol-7
ユーザーインターフェースキット
ミニUIキットPSD
![ウェブデザインにオススメモックアップ](https://studio110.info/wp-content/uploads/2015/03/Mini-UI-Kit-PSD-e1426030076982.jpg)
DribbbleユーザーのアフメドがミニUIキットを改良し作りました。PSD形式で利用可能。
https://dribbble.com/shots/1807929-Freebie?1415950976
エベントレイ UIキット
![ウェブデザインにオススメモックアップ](https://studio110.info/wp-content/uploads/2015/03/EventRay-UI-Kit-e1426030102881.jpg)
興味深いダークカラーのパレットです。
チャート、メニュー、カレンダーなどをもつユーザーインターフェース一式です。
https://www.bypeople.com/free-psd-ui-kit-eventray/
スケッチのPausrrUIキット
![ユーザーインターフェースキット](https://studio110.info/wp-content/uploads/2015/03/Pausrr-UI-Kit-for-Sketch-e1426030155259.jpg)
増え続けるスケッチデザイナー向けの美しいユーザーインターフェース一式。
少しずつ全てのものが入っており、ボタン、ウェブサイトレイアウト、アイコンなど全て大胆な色使いと形で出来ています。
https://www.sketchappsources.com/free-source/1044-pausrr-ui-kit-sketch-freebie-resource.html
ダッシュボードUIキット
![ユーザーインターフェースキット](https://studio110.info/wp-content/uploads/2015/03/Dashboard_Ui_Kit_By_Fabric-e1426030185817.jpg)
必要な要素が全て揃う効果的なアドミやユーザーパネルを作成できます。サンタアイコンでさえも揃います。
https://dribbble.com/shots/1852794-Free-Dashboard-UI-Kit
その他
マテリアルデザイン用カラーパレットスケッチプラグイン
![ウェブデザインにオススメなデザインキット](https://studio110.info/wp-content/uploads/2015/03/Material-Design-Color-Palette-Sketch-Plugin-e1426030235811.jpg)
マーシャルデザイナーが常にそばに置いておきたい便利な色パレットツールです。
色やボリュームを選択すると直ぐに色のトーンが作れます。
https://github.com/t32k/material-design-color-palette-sketch-plugin
まとめ
いかがでしたでしょうか?
アイコン、モックアップ、ユーザーインターフェースなど、洗練されたデザインの素材をピックアップしました。
Photoshopやイラストレーターがあれば、すぐに編集でき、自社のホームページに役立てる事が出来る素材ばかりです。