TOP  >  WEBデザイン

Tag : WEBデザイン

2019年03月17日

アイコンサイズやカラーを選んでSVGで出力できる「ICONSVG」

WEBデザインでは非常に重要となり、利用頻度も高いアイコン。様々なアイコンセットが世に中には出回っていますが、今回紹介するのはJPGやPNGといった画像データでは無くて、SVGでダウンロードしたり、SVGコードで出力できる、ICONサービス「ICONSVG」です。

svgicon001

シンプルでスタンダーどなアイコンが並んで降り、「Arrow」「InterFace」「Media」「Files&folders」「Editor」「Symbols and shapes」「User」「Graphs&charts」「Devices」「Layout」といったカテゴリに分けられて収録されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:42  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2019年01月03日

マイクロインタラクションに使えそうなCSSアニメーション「WickedCSS animations」

WEBサイトのアニメーションはとても重要で印象的なアニメーションをそのサイトの価値を大きく向上させてくれます。大きく派手な動きも大切ですが、細かなアニメーションもクオリティを向上させるためには大切な要素の一つです。今日紹介するのはマイクロインタラクションに使えそうなCSSアクセントアニメーション「WickedCSS animations」です。

wickedCSS

floater(ふわふわ浮く)、barreRoll(クルっと一回転)、RollerRight(回転しながら出現)、heartbeat(鼓動のように膨らむ)、shake(細かく揺れる)など、かなりの数のアニメーションがCSSのみで再現されています。

詳しく以下

(続きを読む…)

続きを読む
posted 07:50  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2018年12月31日

2019年のWEBデザインのトレンドは?「20 web design trends for 2019」

2018年も今日で最後となりました。沢山のWEBサイトが今年もリリースされ様々な印象的なデザインや表現手法が生まれました。今回紹介するのは来年2019年の主流になりそうな、WEBデザイントレンドを紹介したエントリー「20 web design trends for 2019」。

webtrednd

2019年以降に来ると言われているデザイントレンドの中から、国内でも同じようにトレンドになりそうなものを、いくつかピックアップして紹介したいと思います。

(続きを読む…)

続きを読む
posted 06:06  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2018年12月01日

自然の風景を表現したコードスニペットまとめ「10 Beautiful Nature Inspired Code Snippets」

デザインの主役となるコンテンツを考えるとき、簡単に取り入れることができるコードスニペットがあると便利ですよね。今回は、デザインをカスタマイズするときに役立つコードスニペットまとめ「10 Beautiful Nature Inspired Code Snippets」を紹介します。

gazou1
Pure CSS Jellyfish

自然の風景をテーマにHTMLやCSS、JavaScriptで作られたコードスニペットがまとめられています。気になったものをいくつかピックアップしましたので、下記からご覧ください。

詳しくは以下
(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2018年11月29日

ボヘミアンスタイルの素材まとめ「Incorporate Bohemian Style Into Your Designs FEATURED」

デザインテーマにはさまざまな種類があり、テーマに合った素材を上手に選定することはとても重要な要素の一つ。そんな中今回紹介するのは、ボヘミアンスタイルのデザイン素材をまとめた「Incorporate Bohemian Style Into Your Designs FEATURED」です。

gazou1
Yulia.Podlinnova/1341159-Boho-Bordo-Watercolor-Flowers

ボヘミアンスタイルを象徴する様々なモチーフが、水彩画や手書風のタッチでデザインされています。気になるものをいくつかピックアップしましたので、下記からご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2018年09月20日

トレンドの配色をカラーコード付きで参照できる「Trendy Palettes」

デザインの印象を決定付ける、重要な要素の一つに配色があります。色の組み合わせは思っている以上に難しく、いつも同じような配色になってしまう、または配色自体が思いつかないと色で悩んでいる方も多いと思います。今回紹介するのはトレンドの配色をカラーコード付きで参照できるWEBサイト「Trendy Palettes」です。

colorpare00

基本的には三色の組み合わせパターンが登録されており、色の組み合わせとそれぞれのカラーのカラーコードを参照することが可能です。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:30  |  
Category: Design , WebDesign , WebService   
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2017年04月13日

アンティークな世界観を作り上げてくれる フリーゴシック調フォント20選「20 Best Gothic Fonts | Free Download」

アンティークな世界観や格調高いヨーロッパ風の雰囲気を出すことができる、今回はそんなフリーのゴシック調フォントをまとめた「20 Best Gothic Fonts | Free Download」を紹介したいと思います。

003847-A-Gothique-Time-Font-_-dafont.com_

A Gothique Time Font | dafont.com

いろんなデザインシーンで使えそうな凡用的フォントから、デザインの世界観をつくる個性的なフォントまで20種類が揃っています。下記ではまとめからおすすめのフォントを3つピックアップしていますのでご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Font   
2015年02月12日

天気イメージをラフに表現できるアイコンセット「Sunny Icons」

さまざまなテーマのアイコンが公開される中、天候を表現する天気アイコンはすでに定番の種類となっています。そんな中今回は、天気イメージをラフに表現できるアイコンセット「Sunny Icons」を紹介したいと思います。

sunny

手描き調の、ハンドドローイング具合が味のある雰囲気を感じさせてくれるアイコンがセットでダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:25  |  
Category: Design   
2013年09月26日

種類豊富に取り揃えたPhotoshopテクスチャセットのまとめ「10 Free Photoshop Textures You Can’t Live Without」

画像加工ソフトとして有名なPhotoshop。写真の上から異なるテクスチャを被せたり一部を切り抜いて合成してみたり、色々な加工を施すことができます。今回はそんな時に是非使いたいPhotoshopのテクスチャセットをまとめた「10 Free Photoshop Textures You Can’t Live Without」を紹介したいと思います。

10fptyclw_0
30+ Free High Quality Peeling Paint Textures – Designbeep

特徴のあるテクスチャが種類豊富にまとめられています。中でも気になったものをピックアップしたので下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:36  |  
Category: Photoshop   
2014年08月17日

クリックエリアを分かりやすくデザイン的に見せるためのフリーボタン素材「40 Free Web Design Buttons For Web Designers」

webサイト上で、クリックして決定する動作を行ってもらうために必要なボタン。できるだけ分かりやすく、押しやすくするためには、デザインが重要な鍵になってきます。今回はそんなクリックエリアを分かりやすくデザイン的に見せるためのフリーボタン素材「40 Free Web Design Buttons For Web Designers」を紹介したいと思います。

button140817_2
Download Buttons PSD | Free PSD Files

さまざまなクリックシーンで利用できる、いろいろな種類のボタンがセットになってまとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2014年06月01日

いろいろなレイアウトが揃ったフリーwordpressテーマ「40 Fresh And Free WordPress Themes」

さまざまなwebサイトで取り入れられているwordpressは、非常に多くの人に愛され、時にはカスタマイズされ便利に利用されています。そんなwordpressテーマを40種集めた「40 Fresh And Free WordPress Themes」を今回は紹介したいと思います。

wordpress140601_4
News WordPress Theme

いろいろなレイアウトが揃ったフリーwordpressのテーマとなっています。気になったものをピックアップしましたので、下記よりご覧ください。

(続きを読む…)

続きを読む
posted 10:00  |  
Category: WordPress   
2017年03月26日

魅力的なウェブサイトのためのワードプレステーマ14選「14 Free WordPress Themes For Your Website」

WordPressテーマを取り入れることで、簡単かつ手軽にwebサイトを構築できるようになりました。そんな中今回紹介するのは、ウェブサイトを魅力的に見せるためのWordPressのテーマを集めた「14 Free WordPress Themes For Your Website」です。

WP01
MH Impact lite – Free Business WordPress Theme

シーン別に活用できるテーマがいくつか紹介されていますので、ぜひご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:36  |  
Category: WebDesign , WordPress   
2014年01月13日

個性的なオブジェクトも収録されたフリーベクターアイコン「Free download: 200 vector icons」

webで使用するアイコンといえば、ソーシャル系やwebで使用するツールやサービスなどをテーマとしたものが定番となっていますが、今回紹介するのは、個性的なオブジェクトも収録されたフリーベクターアイコン「Free download: 200 vector icons」

200icon1

あると嬉しい・使えばデザインのポイントとして存在感を発揮するアイコンが200種まとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:25  |  
Category: vector   
2011年12月28日

2011年に人気の高かったテクスチャパックまとめ「Awesome Free Texture Packs from 2011」

今年も残すところあと4日。Designdevelopでは2011年も、さまざまなデザイン展開が楽しめるテクスチャを多数紹介してきました。そんな中今回紹介するのは、2011年に人気の高かったテクスチャパックをまとめた「Awesome Free Texture Packs from 2011」です。


Geoff Muskett. Blog.

自然を感じられるものから、表現がユニークな素材まで、たくさんのテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2008年02月26日

プレビューしながらテキストのCSSスタイルを簡単に設定「CSS Type Set勝手に日本語版」

前回「プレビューしながらテキストのCSSスタイルを簡単に設定できる「CSS Type Set」」という記事でお伝えした。プレビューしながらテキストのCSSスタイルを設定できるWEBサービス「CSS Type Set」を紹介しましたが、今回紹介するのはこれの日本語版に当たる「CSS Type Set 勝手に日本語版」というものです。

テキストのCSSスタイルを簡単に

本家の「CSS Type Set」もそこまで難解な物ではありませんが、どうしても英語が苦手、英語のサービスは使う気になれないという方はこちらで試してください。完全に日本語化されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 05:28  |  
Category: WebDesign , WebService   
2017年07月18日

プログラマーのためのWEBサービスや開発系のアイコンセット「devicon」

Twitterなどの有名なアイコンは、自分がよく使用するものはストックとして持っているかもしれませんが、必要時にない場合は探すことになり、非常に手間を感じるのではないでしょうか。そんな手間を省いてくれる「devicon」を今回はご紹介します。

devicon

デベロッパーが持っておくと便利なアイコンが多数まとめられており、ソースコードも記載してくれている優秀なアイコンセットになります。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: Tool , WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る