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   
このエントリーをはてなブックマークに追加

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

2014年04月30日

ダーク系カラーベースのUIキット「DARKY UI FRAMEWORK」

webサイトやスマートフォンサイトをデザインするには、設計から制作までどうしても時間がかかってしまうもの。さらに高いデザインクオリティを求められると、さらに制作時間を要すると思います。今回はそんなシーンに是非利用したいUIキット「DARKY UI FRAMEWORK」を紹介します。

darky1

ブラック・グレーのダーク系カラーをベースにした、フラットデザインのさまざまなUIがセットになっています。

詳しくは以下

(続きを読む…)

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

ハート柄のボケ足のあるテクスチャをまとめた「A Cool Collection Of Heart Bokeh Textures You Should See」

いろいろな種類のテクスチャ素材がインターネット上に配布されており、気になったものはどんどんとストックされているという方も多いのではないでしょうか?今回はそんなコレクションに是非加えたい、ハート柄のボケ足のあるテクスチャをまとめた「A Cool Collection Of Heart Bokeh Textures You Should See」を紹介したいと思います。

heartbokeh0
valentine bokeh stock by TrishaMonsterr-stock on DeviantArt

女性らしさや可愛らしさを演出する時に使用したい、ハート柄をモチーフとした雰囲気あるテクスチャ素材がまとめられています。

詳しくは以下

(続きを読む…)

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

映像で学ぶイラストレーター「50 Excellent Adobe Illustrator Video Tutorials」

制作のチュートリアルを見てもイマイチ操作方法が分からない、その通りの結果になってくれない…チュートリアルを見ながら制作を進めていて、そんな事に陥ったことも勉強中という方にはあるかと思います。


Patterns and Shapes in Adobe Illustrator

今回紹介する「50 Excellent Adobe Illustrator Video Tutorials」はグラフィックスの制作のためのビデオにチュートリアルを50個集めたエントリーです。実際の操作を見ながら学ぶわけなので文字とスクリーンショットのチュートリアルよりもかなり分かりやすいかと思います。今日はまとめられている中から、いくつかのビデオチュートリアルをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:29  |  
Category: Design   
2009年07月12日

神話や物語のモチーフのシルエットベクターデータセット「Old fashioned vector silhouettes」

世界観を演出するのにとても便利なベクターデータのシルエットデータ。シルエットなのでメインのモチーフの他にも背景的な処理などにも柔軟に使えます。今日紹介する「Old fashioned vector silhouettes」は神話や古代物語のモチーフのシルエットベクターデータセットです。

vectorshir

上記のような神話の世界のやり取りから、歴史を感じさせる物語のワンシーンまで様々なベクターデータが全部で446個収録され配布されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:01  |  
Category: Design , vector   
tag: Design vector
2012年06月26日

雰囲気のある汚れ感を演出できるグランジブラシまとめ「20 Free Photoshop Grunge Brushes」

デザイン背景やパーツ背景に雰囲気をプラスするために利用されるグランジ素材は、模様のニュアンス次第でデザインテイストが大きく変わります。そんな中今回紹介するのが、自分で想い通りのニュアンスを作りやすい、グランジPhotoshopブラシをまとめた「20 Free Photoshop Grunge Brushes」です。


Decay Brushes 2 by ~Leichnam on deviantART

アンダーグラウンドなテイストのブラシからアーンティークなテイストのブラシまで、さまざまなシーンに対応できるPhotoshopブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:50  |  
Category: Design , Photoshop   
2017年07月16日

名刺からパッケージまで幅広くまとめられたテンプレートコレクション「12 Free Business Cards, Resumes, Corporate Identity Packages」

名刺、ロゴ、ブランドイメージ、広告など企業が必要とするデザインは多くあります。その全てを一からクリエイトしていくことはなかなか大変なこと。そんなときにあると便利なまとめ「12 Free Business Cards, Resumes, Corporate Identity Packages」をご紹介していきたいと思います。

businesscards_top
Free Envelope PSD Mockup + Letterhead Mockup | ZippyPixels

名刺やパッケージのテンプレートから新聞広告のモックアップまで、幅広く収録されている中からいくつかピックアップしているのでぜひご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2017年07月05日

WEBデザイナーのための6つのオンラインツール「6 Essential Open Source Tools for Web Designers」

スマートフォンやタブレット端末が普及した今日では、毎日 Webサイトを閲覧するという人も随分多くなったのではないでしょうか。そんな中今回紹介するのは、日々変化していくWebサイトを制作するWEBデザイナーのための6つのオンラインツール「6 Essential Open Source Tools for Web Designers」です。

essential01
Krita | Digital Painting. Creative Freedom.

デザインの手助けをしてくれるアイテムはとても便利で、より良いものを作る事ができる優れものです。その中でも、気になったものをいくつかピックアップしてみました。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: Tool , WebDesign   
2016年01月06日

便利なフリーリソースが集約された「50 Free Resources for Web Designers from December 2015」

常に最新の情報をチェックしておくことで、トレンドのデザインをより魅力的に見せることができるのではないでしょうか?そんな時に参考にしたい、便利なフリーリソースが集約された「50 Free Resources for Web Designers from December 2015」を今回は紹介したいと思います。

resources0107_1
Dallegrave Free Brush Typeface on Behance

昨年2015年末に公開されているまとめ記事で、非常にクオリティの高い素材が多数紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

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

CSS3・jQueryで表現するクリエイティブなメニュー「64 jQuery CSS3 Menu Plugins and Tutorials」

殆どのwebサイトで使用されるメニューは、サイト全体のレイアウトにばかりに手を回しがちで、どうしてもデザインがワンパターンになってしまうことも多いと思います。そんな時是非利用したい、CSS3・jQueryで表現するクリエイティブなメニュー「64 jQuery CSS3 Menu Plugins and Tutorials」を今回は紹介したいと思います。

jqmenu1
Responsive Multi-Level Menu – Demo 1

シンプルで定番として利用できるもの、動きが凝ったもの、形状が個性的なものなど、いろいろなタイプのメニューがまとめられているので、サイトに動きを出したり、ちょっとした仕掛けを取り入れたい時に便利に利用できます。

詳しくは以下

(続きを読む…)

続きを読む
2011年07月17日

jQueryコンテンツスライダー15選「15 jQuery Space-Saving Content Sliders and Carousels」

Flashに替わって、avascriptでコンテンツづくりをする事も多くなってきたと思いますが、今回紹介するのはjQueryで制作する、コンテンツスライダーを集めたjQueryコンテンツスライダー15選「15 jQuery Space-Saving Content Sliders and Carousels」です。


dualSlider

写真がメインのもの、動画含めてスライドするスライダー、文章を中心に見せるものなど、あらゆる種類のコンテンツスライダーが紹介されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:51  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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