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年06月25日

シンプルな構造で幅広く活用できる 人物ラインアイコン「Freebie: Line-Style User Avatar Icon Set」

ビジネス、ライフスタイル、ソーシャルなど、アイコンにはいろいろな種類があり、常にチェックしストックしておくことでさまざまなシーンで役立ってくれます。そんな中今回紹介するのは、人物のラインアイコン「Freebie: Line-Style User Avatar Icon Set」です。

hito_lineicons01

人物をテーマとしたラインアイコンで、シンプルなテイストでありながらもどこか個性を感じるデザインが特徴となっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: Tool   
2009年07月18日

最新のjQueryプラグインとチュートリアル25選「25 Fresh and New jQuery Plugins and Tutorials」

軽量でなおかつ様々な動作が可能な人気のプラグイン「jQuery」。世界中で利用されており、そのテクニックも豊富ですが、今日紹介するのは比較的新しいチュートリアルやテクニックを集めたエントリー「25 Fresh and New jQuery Plugins and Tutorials」です。

newjquery01
Create Featured Content Slider

ツールチップからスライダー式のギャラリー、サウンドプレイヤーなどなどjQueryで実現できる様々なテクニックが紹介されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:18  |  
Category: WebDesign   
2015年01月15日

生地の織り目をテクスチャ化「40 Intricate Weave Patterns For Your Creative Design」

テクスチャにはさまざまな種類があり、イメージしているデザインに合わせて使い分けて使用するため、種類を豊富にストックされている方も多いのでは?そんな中今回は、暖かみのあるデザインなどに特に活用できそうな、生地の織り目をテクスチャ化した「40 Intricate Weave Patterns For Your Creative Design」を紹介したいと思います。

ori1
Pattern / *No Sleep 2 :: COLOURlovers

さまざまな織り方がある生地をテーマとし、いろんなテイストのテクスチャがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:43  |  
Category: Design   
2017年04月08日

ブランディングの強い味方!フリーで利用できるショップバックモックアップ20種類まとめ「20 Free Beautiful Shopping Bag Mockups to Download」

ブランドのイメージを強めるショップバック。店舗を構える業種でのブランディングでは要となる外せない要素です。今回はそんな店舗ブランディングの提案を支える強い味方、ショップバックのモックアップをまとめた「20 Free Beautiful Shopping Bag Mockups to Download」をご紹介します。

different-shopping-bag-mockups
Shopping Bags PSD Template – GraphicsFuel

さまざまなデザインバリエーションで、ショップバックのモックアップが20種類集められています。その中でも気になった素材を下記にて紹介していますのでご覧下さい。

詳しくは以下

(続きを読む…)

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

クリエイティブなデザインを作り出せる 12種のフリーフォントまとめ「12 Super Fresh Free Fonts for Designers」

デザインフォントは、制作物をよりクリエイティブに見せてくれる要素の一つでもあり、選定がデザインの良し悪しを左右するほど重要なものとなってきます。今回はそんなクリエイティブなデザインを作り出せる12種のフリーフォントまとめ「12 Super Fresh Free Fonts for Designers」を紹介したいと思います。

font140528_2
Neuro on Behance

個性的なもの、シンプルで洗練された雰囲気を演出できるものなど、厳選された12種のフォントが紹介されています。

詳しくは以下

(続きを読む…)

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

新しく公開されたフリーデザインフォント15種「15 Latest Free Fonts for Designers」

デザインのトレンドとともに、フォントも次々と新しいタイプのものが登場し続けています。そんな中今回紹介するのは、比較的新しく公開されたフリーデザインフォント15種「15 Latest Free Fonts for Designers」です。

font0424_1
ModernFex (Free Font) on Behance

デザイン性に拘りが感じられるフリーフォントが15種紹介されています。きになったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Font   
2012年04月15日

最近リリースされた使えるフリーフォント11「11 Extremely Useful Fresh Free Fonts」

グラフィックでもWEBでもデザインにおいて、書体選びというのは非常に重要で、書体一つで大きくそのデザインが左右されます。それだけに選べる書体はできる限り揃えておきたいもの。今日紹介するのは最近リリースされた使えるフリーフォントをまとめたエントリー「11 Extremely Useful Fresh Free Fonts」です。


Silverfake

スタンダードというよりはクリエイティブによった、個性的な書体が全部で11個集められています。今日はその中からいくつか気になったエントリーをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:39  |  
Category: Design , Font   
2010年01月05日

WEBページに必須なシンプルなユーザービリティ「Five Simple but Essential Web Usability Tips」

WEBを制作する上で、いくつかポイントがあるかと思いますが、WEBは使われるものなので、ユーザービリティは最も考えなくては行けないものの一つです。今日紹介するのはWEBページを制作する上で、必須なシンプルなユーザービリティ「Five Simple but Essential Web Usability Tips」です。

somotips5-01

WEBページを制作していく上で、知っておいた方が良い要素が簡単にまとめられていました。今回は意訳して紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:47  |  
Category: WebDesign   
tag: webdesign
2008年03月10日

スプレー、ペンキを表現するフリーphotoshopブラシ集「Free Hi-Res Spraypaint Photoshop Brushes」

photoshopでのデザインをさらに広げてくれそうなのが、今回紹介するスプレー、ペンキを表現する高解像度のフリーphotoshopブラシ集「Free Hi-Res Spraypaint Photoshop Brushes」です。前回紹介した「リアルな壁面を作り出すphotoshopブラシ「Free High Res Photoshop Brushes」」と組み合わせて使えばグラフィティ的な壁面を簡単に表現することが可能です。

ペンキphotoshopブラシ
上の6つがver1、下がver2のブラシ描写サンプルです。

ブラシセットは2つ公開されていて、種類違いで二つ合わせて11のブラシが収録されています。どちらもスプレーやペンキを表現していますが、微妙にハネ感やインクの質量が違っています。

詳しくは以下

(続きを読む…)

続きを読む
posted 05:37  |  
Category: Design , Photoshop   
2011年03月21日

Illustratorで作るロゴデザインチュートリアル「40 Tutorials for Outstanding Text Effects in Illustrator」

企業のシンボルや、ブランディング、プロモーションなどに使用されるロゴには、個性が求められるシーンもしばしばあるかと思います。今回はそんな時に是非参考にしたい、Illustratorで作るロゴデザインチュートリアル「40 Tutorials for Outstanding Text Effects in Illustrator」を紹介したいと思います。


Create a Mummy Text Effect In Illustrator | Vectips

Illustratorの機能を駆使し制作されたハイクオリティなロゴデザインが、チュートリアルと共に多数紹介されています。中でも特に注目したロゴをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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