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

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

2008年06月11日

長文に便利!滑らかに左右にスクロールできるjavascript「bookreader.js」

特殊な場面で効力を発揮しそうなのが今回紹介する滑らかなに横にスクロールできるjavascriptが今回紹介する「bookreader.js」です。

基本的にはWEBはほとんどが縦スクロールの構成になっていて、長文を読むにはあまり適しているとは言えないので、長い文章を見せるときなんかは有効なスクリプトだと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:42  |  
Category: WebDesign   
2008年05月27日

フリークリップアート専用検索エンジン「Find Free Clipart」

前回「デザイン素材専用サーチエンジン「Design Resources Search Engine」」と言う記事で写真やシェイプなどのデザイン素材専門の検索エンジンを紹介しましたが、今回紹介する「Find Free Clipart」はフリーのクリップアート専門の検索サービスです。

非常にシンプルなインターフェイスなので普段検索エンジンを使っている方でしたらまず迷うことはないかと思います。試しに例に挙がっていた「Vector Flowers」を検索してみました。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:10  |  
Category: Design , vector   
tag: Design vector
2013年11月13日

すぐに使える実用的なjQueryテクニックとチュートリアル集「15 Useful jQuery Techniques and Tutorials for Developers」

以前に比べWebサイトはよりクリエティブな仕掛けや見せ方が求められるようになってきていますが、実際に一からJSを組んでいくとなると時間が掛かってしまうものです。今回はそんな時に役立つ、すぐに使える実用的なjQueryテクニックとチュートリアルをまとめたエントリー「15 Useful jQuery Techniques and Tutorials for Developers」を紹介したいと思います。

15ujtatfd_3
Flyout Image Slider Using jQuery & CSS3 – Webstuffshare – Learn and share. The simplest harmony.

どれもすぐに取り入れることができる実用的なものばかりですが、その中でも特に気になったものをピックアップして紹介したいと思います。

(続きを読む…)

続きを読む
posted 09:00  |  
Category: javascript , WebDesign   
2015年11月11日

カナダ・トロントをインスピレーションに 多彩な種類のアイコンが揃う「City Icons」

いろいろな種類のアイコンが配布されていますが、やはり1つのセットで種類が豊富なものは、1つのデザイン制作の中での使い道のバリエーションが増えることもあり、何かと便利なもの。そんな中今回紹介するのは、多彩な種類のアイコンが揃う「City Icons」です。

ctyicon

カナダ・トロントをインスピレーションにデザインされたアイコンがセットでダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:35  |  
Category: Design   
2007年12月01日

様々なUIを集めたUIデザインのパターンライブラリ「UI-Patterns」

サイトをデザインする上で書かせないのがユーザーインターフェイス。しかしユーザーインターフェイスをデザインするとなるとなかなか難しかったりします。そこで今日は様々なUIを集めたUIデザインのパターンライブラリ「UI-patterns」を紹介したいと思います。

UIパターン集

タグクラウドからページ分割、WYSIWYG、Wikiなど他にも様々なユーザーインターフェイスのサンプルが収録されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:43  |  
Category: WebDesign   
tag: webdesign
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の機能を駆使し制作されたハイクオリティなロゴデザインが、チュートリアルと共に多数紹介されています。中でも特に注目したロゴをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2008年07月28日

そっくりなロゴデザインを集めた「When logos look alike」

世界には様々な企業やサービスがあり、数々のロゴが日々生み出されていますが、今回紹介するのは見た目が似ているロゴマーク、ロゴタイプを集めたエントリー「When logos look alike」です。


Sumpter & Gonzalez LLP and Stylegala

そっくりというか色違いの様なモノから、一部アイデアが被ってしまったのだろうというモノから様々な事例が取り上げられていました。今日はその中から気になったモノをいくつかピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 05:35  |  
Category: Design   
tag: Design
2008年03月09日

和にこだわったphotoshopパターン集を公開する「星宿海 渡時船」

海外でカスタムシェイプやブラシをフリーで公開しているサイトはDesignDevelopでもいくつか紹介してきましたが、今回紹介する「星宿海 渡時船」さんはphotoshopカスタムブラシと和風なパターン集を公開しています。

photoshop和風パターン
公開されている和風パターンの一部

ブラシは主に葉っぱや雪の結晶など自然系の物が中心に公開されていて、パターンは唐草や亀甲など着物の柄などに使えそうな和風のパターンが公開されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:05  |  
Category: Design , Photoshop   
2011年12月31日

HTML5を使うためのチートシート「HTML5 Cheat Sheets」

今年一年で多くの話題を振りまいたHTML5。今年から覚えてみよう、活用してみようという方も多いと思います。今日紹介するのは、HTML5を使うためのチートシート「HTML5 Cheat Sheets」です。


HTML5 Tags Cheat Sheet

HTML5のタグ、イベントの定義にあわせて、それを処理するイベントハンドラ属性の一覧、HTML5がサポートされているブラウザが一目で分かるシートと3枚セットになったチートシートです。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:12  |  
Category: WebDesign   
2012年04月21日

バリエーションに富んだフリーTumblrテーマ集「65+ Best Free and Premium Tumblr Themes」

気になったweb上の記事や写真を簡単にストック・クリップしておくことができるTumblrは、気軽に閲覧できる分、特に見やすさにはこだわっておきたいものです。そんな中今回は、バリエーションに富んだフリーTumblrテーマ集「65+ Best Free and Premium Tumblr Themes」を紹介したいと思います。

シンプルなタイプから、記事見やすさは意識しながらも個性を持ったたくさんのテーマが収録されています。中でも気になったタイプをピックアップしてみましたので、下記よりご覧下さい。

(続きを読む…)

続きを読む
posted 01:06  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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