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

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

2011年01月05日

豊富なバリエーションのパターン素材をまとめた「50 of the Best Seamless Pattern Sets」

デザインの背景やパーツ素材として活躍してくれるパターンにはさまざまな種類が存在していますが、今回は豊富なバリエーションのパターン素材をまとめた「50 of the Best Seamless Pattern Sets」を紹介したいと思います。


Tiles Pattern | Free Illustrator Downloads

色々なテイストで活用できるパターン素材が50種類収録されており、見ているだけもその種類の豊富さに納得できるまとめとなっています。気になったものをいくつかまとめてみましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2016年11月19日

ブランディングツールのモックアップ制作におすすめのフリー素材「20 Professional Free Branding Mockups」

企業などのブランディングツールを制作する時に、途中経過でイメージを確認したい・どんな風にツールに展開されるのか知りたい、そんなシーンもあるのではないでしょうか?今回はそんなシーンで活用したい、ブランディングツールのモックアップ制作におすすめのフリー素材「20 Professional Free Branding Mockups」を紹介します。

mock1119_1
Branding / Identity MockUp Vol.7 | GraphicBurger

さまざまな種類のツールをリアルに配置したモックアップ素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:32  |  
Category: Design   
2018年02月08日

学校や塾などの教育関係のデザインに 化学や科学をテーマにしたサイエンスアイコンセット「Radical Science Icons」

情報をわかりやすく整理して、視覚的に見せてくれるアイコンはデザインのキーアイテム。積極的にデザインに取り入れていきたいもの。今回ご紹介するのは、そんなアイコン好きの貴方におすすめな化学や科学をテーマにしたアイコンセット「104 Free, Radical Science Icons」です。

radical-science-icons_2
104 Free, Radical Science Icons

ちょっぴりマニアックなテーマですが、塾や学校など教育関係のデザインなどで活躍してくれそうです。

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

続きを読む
2012年11月16日

さまざまな種類の炭が揃ったテクスチャまとめ「30 Free Burnt Wood Texture with Great Quality」

デザインを作り上げる際にさまざまなテクスチャを利用して、雰囲気のある作品に仕上げるということも多いのではないでしょうか?今回はそんなテクスチャの中から、炭のテクスチャにクローズアップしたテクスチャまとめ「30 Free Burnt Wood Texture with Great Quality」を紹介したいと思います。


Burnt Wood Texture by ~catemate on deviantART

木の種類や模様の異なるさまざまなテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:01  |  
Category: Design   
2014年07月26日

シームレスに使える フリーコンクリートテクスチャ「Free Seamless Concrete Textures For Your Design Project」

定番として使用できるテクスチャは、デザインの幅が広がる要素だけにできるだけ多くストックしておきたいもの。今回はそんな定番として取り入れたい、シームレスに使えるフリーコンクリートテクスチャ「Free Seamless Concrete Textures For Your Design Project」を紹介します。

concrete1
seamless concrete texture by oonerspism on deviantART

シンプルな表情で、いろいろなデザインに応用できるタイプのテクスチャとなっています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:04  |  
Category: Design   
2010年09月11日

CSS、javascriptで実現するタブインターフェイス集「30 CSS and Javascript Tabs Solutions」

数多くの情報をまとめて、限り有るスペースを有効活用することができるタブインターフェイス、情報量の多いサイトで主に利用されていますが、今回紹介するのはCSS、javascriptで実現するタブインターフェイスを集めたエントリー「30 CSS and Javascript Tabs Solutions」です。


Sweet Tabbed Navigation Bar using CSS3

デザイン的に凝ったものから、jQueryやCSS3を使って印象的に見せるものまで、様々なタブインターフェイスが紹介されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:00  |  
Category: WebDesign   
2018年11月21日

IllustratorでもPhotoshopでも使用できる無料のフラワーパターン「Flower seamless free Photoshop and Vector pattern」

特に女性らしいデザインに合わせやすい花柄。いろいろな形で素材配布されていますが、今回は、シームレスなフラワーパターン「Flower seamless free Photoshop and Vector pattern」をご紹介します。

Flower-seamless1

おしゃれでどこかレトロテイストなフラワーパターンがダウンロードできるようになっています。

詳しくは以下より

(続きを読む…)

続きを読む
posted 09:00  |  
Category: Design , WebDesign   
2018年07月18日

デザイナーのための フリーAdobe XD用UIキット20種「20 Free Adobe XD UI Kits for Web & Mobile App Designers」

数年前まで、UIデザインはPhotoshopとSketchを中心に行われていましたが、2017年に正式リリースをしたAdode XDが着実にアップデートを重ね、新たなUIデザインツールとして頭角を表してきています。今回は、WEBやUIデザインに役立つ、Adobe XDのUIキットを20種をまとめた「20 Free Adobe XD UI Kits for Web & Mobile App Designers」をご紹介します。

adobexd_ui_05
Free Adobe XD Collaboration App by Edwin Delgado – Dribbble

どのキットも、無料で利用できるので、チェックしておくと重宝してくれそうです。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: Design   
2011年04月28日

海外の教育分野での魅力的なwebデザイン集「30 Exellent Web Design of Education Niche」

近年、日本の大学や専門学校は生徒を減少に伴い、様々なプロモーション活動が行われています。そんな中でインターネットが普及した今、学校の第二の玄関口として卓越されたwebサイトが求められています。そこで今回紹介するのは、海外の教育分野での魅力的なwebデザイン集30選「30 Exellent Web Design of Education Niche」です。


Body Arts Laboratory

今では多くのサイトが取り入れている、SNSに対応しているwebサイトも数多く紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2018年01月04日

SketchベースでUIデザイン起こす際に便利な「Sketch – Element UI Kit」

昨年秋に発売されたフェイスID機能やフルスクリーンが話題のiPhoneX。実際に使っている人も多いかと思います。アプリなどもフルスクリーンに対応するため、次々と改修が行われています。そんな中今回は、SketchベースでUIデザイン起こす際に便利な「Sketch – Element UI Kit」の紹介です。

UIKit_iPhoneX_01 (続きを読む…)

続きを読む
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.
トップに戻る