33 Neat Coming Soon and Under Construction Templates | Naldz Graphics
You’re surfing through the net, opening all your most visited sites… With your fast and reliable internet connection, you are quite confident that you can open all the websites that you please immediately. Suddenly, there it hits you. One site you cannot open because of technical issues that need to be fixed…’ Annoying isn’t it? But that is for the viewer/surfer’s point of view. Now, for the websi
よりリッチで、よりフレンドリーになったウェブデザインの現状 -2010年のトレンド
The Current State of Web Design: Trends 2010 下記は記事の意訳と実例をいくつか抜粋したものです。元記事では他にも多数の実例が紹介されています。 はじめに ウェブデザインとは移り変わりが激しい業界です。他のすべての芸術的な表現とまったく同じように、ウェブデザインは絶え間なく、そして驚くほど早いスピードで進化を遂げてきました。 そして現在、私たちはウェブデザインの黄金時代を経験しているところです。それはこれまでのところ、少なくとも最も良い期間です。主要なブラウザで利用できる新しいツール（CSS3, HTML5, 埋め込みフォントなど）、自由に利用が可能な多くのリソース、デザインコミュニティなど、ウェブのスタンダードの信頼性が高いサポートを持っています。 私たちはより良いインタラクションなデザインや審美的なデザインを見ています。そして同様に個人的で魅力
コンテンツをつかんで操作する新感覚ウェブサイト -Grip
コンテンツをつかんで横にスクロール つかむ操作が苦手な方には上部の「OPEN MENU」をクリックすると、ナビゲーションから各コンテンツに遷移できます。縦のつかむはマウスのホイールでも同様に動作します。 各コンテンツは個別URLが発行されているので、直接アクセスすることも可能みたいですね。 Blog
WEB上のボタンをひたすら集めたタンブラー「House of Buttons」
WEBデザインには欠かすことが出来ないボタン。ユーザーインターフェイスに直結する部分なだけに、重要な要素の一つです。今回紹介するのはWEB上で実際使われているボタンをひたすらポストしているタンブラー「House of Buttons」です。 検索ボタンから、支払いボタン、Twitterへの追加ボタンなどなど、様々なボタンが公開されています。公開されているボタンをいくつかまとめて下記に紹介いたします。 詳しくは以下 タグ付けも色で行っているみたいで、ボタンの色味で絞り込むことができます。似たようなものが、たくさんというよりは、集められているボタンの中にもの個性があるような気がします。 通常ボタンのデザイン、制作はサイトに合わせて行うものだと思いますので、全く同じでというワケにはいかないと思いますが、デザインの処理などはボタンをデザインする際に大いに参考になりそうです。まだそこまで数は多くない
ナンバリングがついたjQueryとCSSで制御するスライダー「 Automatic Image Slider w/ CSS & jQuery」
TOP > WebDesign > ナンバリングがついたjQueryとCSSで制御するスライダー「 Automatic Image Slider w/ CSS & jQuery」 非常に高機能なjavascriptライブラリとして、WEBではかなり利用されているjQuery。今回紹介するのはjQueryとCSSで制御するスライダー「Automatic Image Slider w/ CSS & jQuery」です。 View Demo この手のjQueryを用いたスライダーは数多く存在しますが、「Automatic Image Slider w/ CSS & jQuery」はHTML部分、CSS部分とてもシンプルに作られており、カスタマイズが非常に簡単に行なう事ができます。また動きの部分のjQueryもシンプルなので、カスタマイズもjavascriptを知らないというかたでも何とな
魅力的なフッタをコレクションしているサイト -Footerabulous Gallery
海外のサイトだけでなく、国内のサイトでも最近は魅力的で有意義なフッタが増えてきました。 そんなフッタに注目し、多くのサイトのフッタだけをコレクションしているサイトを紹介します。 Footerabulous Gallery 各フッタはカラー別にカテゴライズされており、配置されている要素ごとにタグが割り当てられています。 タグは下記のようなものがあります。 navigation contact about social media portfolio back to top link rss feed 最近のウェブサイトのトレンドとしては、フッタのデザインと機能性を充実させ、より魅力的な一コンテンツとして活用されています。 具体的にフッタをどのようにすればよいのか、は当サイトでもいくつか取りあえげています。 ウェブサイトのフッタを魅力的にする10のシンプルなアイデア 使い勝手の良いフッタにする
40 Beautifully-Designed Navigation Menus | Vandelay Design Blog
These earth tone color palettes are perfect for a wide variety of nature-inspired designs. Use the provided hex codes to save time choosing colors.
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
![アルファ画像を扱うalphafilter.jsライブラリ[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
死ぬまでに見ておくべきCSSデザインサイト集まとめ - GIGAZINE
ということで、今まで数限りなくネットのあちこちで紹介されてきたCSSデザイン関連のサイトがリスト化されてまとめられたようです。これだけあれば当分はブログなどのデザインのネタに困ることはなさそう。インスピレーションを得るのに使うもよし、デザインの参考にするのもよし、知っておいて損はないものばかりです。 リストは以下の通り。 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards http://www.cssbeauty.com/ CSS Drive- Categorized CSS gallery and examples. http://www.cssdrive.com/ Stylegala - Web Design Publication http://www.stylegala.com/ CSS Mania http:
ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方
ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方をSmashing Magazineから紹介します。 5 Simple Tricks To Bring Light and Shadow Into Your Designs 以下、その意訳です。 ライトとシャドウというのは単にそこにあるだけではありません。ライトは対象物を射し、シャドウを生み出します。 形や大きさ、質感を伝え、目にする対象物の理解を深めます。 ウェブデザインでもこのライトとシャドウは非常に重要で、デザインをよりナチュラルにし、感動的で直感的なものにします。 ここに、ライトとシャドウの洗練された5つの使い方を紹介します。 A Quick Anatomy Of Light And Shadow ライトとシャドウの構造 下の図は、ライトが左からあたっています。ハイライトはそのライトが一番強くあたっている箇所です。そして
ウェブデザインにおける効果的な背景の使い方
Backgrounds In Web Design: Examples And Best Practices 以下、その意訳です。 ウェブデザインのスタイルは常に進化しており、大きな変化の一つに背景の使い方があります。 背景の重要な役割は、ウェブサイトへの興味を視覚的にひきつけることです。 背景はウェブサイトのテーマを支えるものであり、あらゆる可能性を考慮し設計を行う必要があります。 ここではウェブデザインの最近のトレンドをふまえた、背景のベストプラクティスを紹介します。 1. The Basic Background Structures 良い背景を設計する際に、背景の基本構造を知る必要があります。 Body Background bodyの背景は、昔から使用されている背景です。 主にイメージ、イラスト、テクスチャ、パターンなどを使用します。 Content Background コンテ
最新のＷＥＢデザインは、手描きスタイル | ECommerce Knowledgebase
斬新なアイデア、デザイン、全ては紙にメモをする事から始まります。WEBデザインは「普通」のデザインとは多少異なりますが、大体デザイナーは紙にスケッチする事から始めるでしょう。もちろん、ユーザーはそのメモやスケッチを見ることはできませんが。 CSSで作られたデザインも良いのですが、言い換えるとただの箱の集まりにすぎません。もし一味違ったデザインにしたいのなら、デザイナー自身が手描きしたものを取り入れることを検討しましょう。実際にブログ・ＥＣショップ・広告などで、Flashや(X)HTMLを使って作っているサイトもあります。 手描きスタイルにはオリジナリティを発揮する力があるのです。リンク・アイコン・背景・ステッカー・線に手描きスタイルを使ったレイアウトは、サイトに「人間味」を与え、ユーザーの興味をひくページとなるでしょう。（注：手描きスタイルは、文字化けを起こす場合もあります。）それでは最新
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://m.cssiphone.com/
http://www.designwalker.com/2010/06/redesign.html
シンプルなデザインの各種コンテンツが揃ったウェブサイトの無料テンプレート -Aurelius
ZURB U | Library
http://www.designwalker.com/2009/11/corporate-tutorial.html
ホームページのタネ | サイト制作からSEO、マーケティングまで
http://www.designwalker.com/2009/04/wireframe-2.html
ウェブデザインのクオリティをアップする7つのポイント | コリス