POLAR BEAR BLOG: 「クリーンな水平分割」がウェブデザインの最新流行？
海外の WEB2.0 系サイトのデザインを見ていると、どこかしら似ていると感じることが多いと思います。「カドが丸い」「ロゴが反射している」などなど、これまでも様々な点が指摘されてきましたが、最近のトレンドは「クリーンな水平分割」なんだとか： ■ Analysis of Web 2.0 Design & Layout Trends – Part 1: Clean, Colorful and Horizontally Divided (StyleIgnite.com) 「クリーンな水平分割」とは、StyleIgnite による造語。しかしこの表現がピッタリだということは、例に挙げられているサイトを見れば一目瞭然です： ■ shoeboxed.com 上の画像は、現時点でのキャプチャ。画面全体が大胆に水平分割されていて、余白スペースも大きく開けられていますね。まさしく「クリーンな水平分割」。 念
165のフリーなWeb2.0風ベクターアイコン:phpspot開発日誌
liquidicity 165 Vector Icons, Now in 5 Colours You seemed to like our original set of 165 vector icons, so we thought you might like them again. 次のような165のフリーなWeb2.0風ベクターアイコンが配布されています。 イラストレーターのベクター形式なので、ちょっと変更したり、色を変えたり拡大したりと自由自在ですね。 サイト作成用の素材によさそうです。 関連エントリ ブログに使えるフリーな超キュートアイコン集「Tiny Little Icons」 12500以上のハイクオリティなアイコンをまとめたサイト「IconArchive」 iPhone風アイコン作成用PhotoShopテンプレート 16x16ピクセルの芸術的favicon集 小さくて可愛
Web 2.0っぽいロゴがさくっと作れる『LogoCreatr』 | SiMPLE*SiMPLE
またかよ・・・という方もいらっしゃるかと思いますがｗ、Web 2.0風のロゴジェネレーターをご紹介。いろいろ設定できて便利ですよ。 ↑ 設定項目はこちら。フォントの色、サイズ、星の形などいろいろできます。文字ごとに色も変えられますね。 ↑ この設定で作ってみたのがこちら。 ↑ ちなみに別メニューでボタンジェネレータもありますね。こちらも便利。 似たようなジェネレータは他にもありますが、かなり柔軟に設定できるので個人的にはこれが今のところ一番かも。よろしければどうぞ。 » Web2.0 – Logo Creatr こちらもあわせてどうぞ。 » 簡単に2.0っぽいロゴがつくれるメーカー | i d e a * i d e a
無料で使える、Web2.0 風の 3D アイコンが美しすぎる - Forgot the Milk.
無料で使える、Web2.0 風の 3D アイコンが美しすぎるので、紹介します。 今のところこれで全てなので、数こそ少ないですが、クオリティの高い画像です。このページはしっかりウォッチしていきたいと思います。また有益な情報が発信されたら、ここでも紹介しますね。 詳細情報、ダウンロードはこちらからどうぞ。 http://franticindustries.com/blog/2007/05/27/web-20-buttons-3d-style/ タグ [webservice] [webdesign] 同じカテゴリーのおすすめ記事 これは楽しい！10秒でWeb2.0風のボタンをサクサク作れちゃうボタン・ジェネレータ・サービス | My cool button - Forgot the Milk. Gmailよりも巨大なファイルを送れる７つのサービス - Forgot the Milk. gooラボ
Web 2.0 free buttons maker! - The program (Photoshop, hosting php-gd2)
High quality shape button maker Let's create unique amazing buttons quickly with our online button and badge generator. Full access to all generators, unlimited downloads With our premium subscription you can create, customize and download unlimited buttons and use it for your personal or commercial website, for your mobile or desktop application. Mobile retina display image generator We have rele
PhotoshopでWeb2.0風ロゴを作る方法 - ネタフル
Create your own Web 2.0 logosというエントリーより。 You’ll need Photoshop and a downloadable “style” file provided by the author. This file includes the necessary elements to recreate six popular logos (including LinkedIn and Skype), though the idea here is not to copy, but rather to learn the basic techniques and “start your own creativity from there.” PhotoshopでWeb2.0風ロゴを作る方法が書かれている「How Web 2.0 Logos are d
Web2.0風デザインのための秀逸チュートリアル68選 | S i M P L E * S i M P L E
こ、これはかなり使えます・・・。 が、とっても紹介が難しいのでさらりと。今回は実験的なエントリーとして画像一切なしで。 『Web2.0風デザインのためのチュートリアル68選』です。 » Web 2.0 Webdesign-Tutorials | Dr. Web Weblog 以下の7つのカテゴリーにわかれています。 サイトをこれから作るぞー、という人には大いに参考になる素晴らしきチュートリアルかと思います。 ビジュアル効果系（1～11） ロゴ系（12～25） テキスト（26～33）系 バッジ系（34～39） ボタン系（40～46） レイアウト系（47～60） Web2.0まとめ系（61～68） 個人的には1、2、12、13、40、41あたりが好きですね。今後使えそう。 しかし、こういう海外サイトのまとめをまとめとして紹介するのは難しいですよね・・・。そのまま紹介するのも「どうなの、それ？」
【レビュー】ドラッグ&ドロップで今風のWebサイトを作ろうぜ - Weeblyを使いこなす (1) Weebly事始め (MYCOMジャーナル)
ドラッグ&ドロップでWebサイトを作成できる「Weebly」 Ajaxを利用して、ブラウザからオンラインでWebサイトを作成できるというサービスはもはや目新しいものではなくなってきた。こういったサービスはいくつも提供されている。例えば、Wikiの編集部分をAjaxを利用したWYSIWYGコンポーネントに置き換えるものもあれば、テキストエディタとWikiの中間のようなスタイルをとっているものもある。また、ポータルサイトにおける一機能としてポートレットを組み合わせて構築できるようになっているものもある。 ここでは、そういったサービスの一つである「Weebly」に注目していく。Weeblyはドラッグ&ドロップでWebサイトを作成できるという、便利なサービスである(図1〜図4)。 図1 Weeblyの公式サイト 図2 Weeblyで作成したWebページの例(1) - テキストと画像を配置 図3 W
jmblog.jp - Web2.0っぽいグラデーションのコツ
そろそろ「Web2.0的デザイン」という言い回しが恥ずかしくなってきましたが、それはそれでおいといて。グラデーションは今っぽいデザイン（ちょっと言い方を変えてみた）では外せない要素と言えるかと思いますが、プロのデザイナーの方はさておき、素人が挑戦すると、色の選択に失敗してイマイチ・・・なんてことになりがちです。 » A Gradient Tutorial » 9rules Network Official Blog こちらのサイトでは、グラデーションを作る際のポイントが説明されています。 さて、どれが一番きれいでしょう？1 は彩度（鮮やかさ）が足りません。上のサイトでは「a classic problem」と紹介されています。2 はマシですが、ちょっと素人臭さを感じます。まぁ好みは人それぞれだと思いますが、やっぱり 3 が一番きれいだと思います。 ちなみに僕は、次のようにしてグラデーション
『ウェブ2.0 HOW-TO デザインガイド』がよくまとまっています | S i M P L E * S i M P L E
なんだか前にもこういうまとめを紹介しましたが、また良くまとまっているのがあったのでご紹介。 Web design scratchのサイトで「Web 2.0 how-to design guide」なるまとめがありました。 » Web 2.0 how-to design guide 15の項目でまとめられていますね。 Simplicity（とにかくシンプルに！） Central layout（真ん中に寄せるレイアウトで） Fewer columns（段組は少なめに） Separate top section（トップ部分は分けて目立たせよう！） Solid areas of screen real-estate（レイアウトにはメリハリをつけて） Simple nav（ナビゲーションはシンプルに！） Bold logos（ロゴは大きめに！） Bigger text（フォントも大きめに） Bold
Web2.0風サイトを作るのに必要なモノあれこれまとめ - GIGAZINE
Web2.0とは何か？というと、いろいろな解釈に基づいていろいろとあるわけですが、デザインという切り口で見てみるとある共通項が存在することがわかります。 例えばそれは、シンプルなレイアウト、中央に寄せる構図、ちょっとした3次元空間を感じさせる効果、白やパステルカラーと言ったソフトな色調の背景、アクセントには鮮やかワンポイントカラー、アイコンを多用したわかりやすい使ったナビゲーション、大きなフォントなどなどであるわけです。角の丸いテーブルなどはその代表です。 というわけで、Web2.0風なサイトデザインへリニューアルする際に参考となるサイトや、その素材を製作するためのサービスなどを集めてみました。 まず、Web2.0風デザインとはどういうものかについては以下のサイトにまとめられています。先ほど書いたのはこのサイトで触れられていることがメインです。 Current style in web d
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Background Image Maker