ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
2011年のウェブデザインのトレンドを振り返る
2011年のウェブ制作の話題の中心はHTML5とCSS3でしょう。 ここではデザイン面を中心に、2011年に人気が高かったウェブデザインのトレンドを紹介します。 Popular Web Design Trends in 2011: Over 50 Inspiring Examples [ad#ad-2] 下記は各ポイントを意訳したものです。 Responsive Web Design 点線 サークル レトロスタイル リボン マジックナンバー『3』 少しめくれてるペーパー ボーダーレス グリッド 対角線 Responsive Web Design Responsive Web Designとは、ユーザーが利用する環境（スクリーンサイズなど）に合わせて最適なレイアウトを提供する方法です。デスクトップ用のブラウザだけでなく、iPhoneなどのスマートフォン、iPadなど、あらゆるデバイスに最適な
WEB屋が行き詰まった時、参考にすると何かが舞い降りるかもしれないサイト色々（主にデザイン系） | バンクーバーのうぇぶ屋
※煮詰まる× → 行き詰る○ なんかおもいっっきり日本語間違って使ってました。めっちゃごめんなさい＞＜ 更新が滞るとEvernote開いて整理整頓ついでに記事を書くのが日課になってしまったセナですこんにちは。 さて、数年WEB屋やってると、自分の作るものが単調になったなと思うことがたまにあります。WEBでも紙でも制作技術を学んでいた時はいろんなサイトを見て見まくって、「どうしてこんなに見やすいんだろう。」とか、「どうしてこんなに分かりやすいんだろう。」とか。そんなことを感じては、常に目にする物から何かを吸収しようと躍起になっていたものです。 何かを見る度、知る度に確実に何かを学んでいったあの感覚は、何時になっても忘れてはならないものだと常々思います。 アイデアに詰まっていたり、物づくりへの刺激が欲しい時なんかに見ると、やる気とかが舞い降りてくるかもしれません。 Dribbble クリエイタ
ウェブデザインのマンネリ化から抜け出したい人のためのリンク集
ウェブサイトでよく使用されるエレメントやデザインのアイデアをコレクションしている、インスピレーションを与えるサイトを紹介します。
スタジオグラフィックス プロが教える デジタルカメラの撮影＆レタッチテクニック
運営会社情報 株式会社スタジオグラフィックス 〒164-0012 東京都中野区本町2-51-10 中野坂上OKビル801 TEL 03-6300-5987 / FAX 03-6300-5988
ウェブデザインにおけるネガティブスペースの活用ガイド
ネガティブスペースを巧みにつかったウェブサイトの紹介をはじめ、ウェブページのレイアウトでどのように分析し改善するのか、効果的に活用するガイドをSix Revisionsから紹介します。 Negative Space in Webpage Layouts: A Guide 下記は、各ポイントを意訳したものです。 はじめに ネガティブスペースとは ネガティブスペースの重要性 ネガティブスペースを実例から学ぶ まずはデザインの単純化から ネガティブスペースを分析、そして改善 ネガティブスペースの活用例 おわりに はじめに ネガティブスペースは多くの場合、ミニマリズムのようにシンプルを美とした特定のデザインだけのものであると誤解されています。本来ネガティブスペースというものは、あらゆるデザインにおいて注意を払い、そして慎重に組み立てて使用すべきものです。 ここではネガティブスペースが何であるか、そ
よりリッチで、よりフレンドリーになったウェブデザインの現状 -2010年のトレンド
The Current State of Web Design: Trends 2010 下記は記事の意訳と実例をいくつか抜粋したものです。元記事では他にも多数の実例が紹介されています。 はじめに ウェブデザインとは移り変わりが激しい業界です。他のすべての芸術的な表現とまったく同じように、ウェブデザインは絶え間なく、そして驚くほど早いスピードで進化を遂げてきました。 そして現在、私たちはウェブデザインの黄金時代を経験しているところです。それはこれまでのところ、少なくとも最も良い期間です。主要なブラウザで利用できる新しいツール（CSS3, HTML5, 埋め込みフォントなど）、自由に利用が可能な多くのリソース、デザインコミュニティなど、ウェブのスタンダードの信頼性が高いサポートを持っています。 私たちはより良いインタラクションなデザインや審美的なデザインを見ています。そして同様に個人的で魅力
第22回 Teamgeist | Every team needs a jersey with a story、JORDAN MERO M6、HYPE | gihyo.jp
いま、見ておきたいウェブサイト 第22回Teamgeist | Every team needs a jersey with a story、JORDAN MERO M6、HYPE いよいよ紅葉も本格化し、今年はどこで撮影しようかと悩みながら鍋物をつつく今日このごろ、皆様いかがお過ごしでしょうか。今回も個人的に感じた、素晴らしいサイトの特徴をいくつかお話したいと思います。 変化を見せる“王道”キャンペーンサイト 『Teamgeist | Every team needs a jersey with a story』 ドイツのスポーツ用品メーカーadidasによる、2010年FIFAワールドカップ南アフリカ大会に出場するドイツ代表チームの公式ユニフォームのプロモーションサイト、『Teamgeist（ドイツ語でチームスピリットの意）』です。 図1 adidasのプロモーションサイト『Te
2009年のデザイントレンド総括「CSS Nite in Ginza, Vol.43」行ってきた: Miklog
デザインレンド10minプレイバック2009 前回のCSS Nite42のおさらい トレンドとは最先端ではない、時代に最適化されつつある現象である by原氏 アイコンはリアル指向からシンプルなピクトグラム化（単一色）へ 見立てのデザインを取り入れるなら今！ 増加傾向。 「インテリア的にディスプレイの存在感。映っていて綺麗なサイト。圧倒的に字が少なくなってきている。ビジュアル指向のひとつの現われ」（矢野氏） 2010年の流行りの色は青 パントーンが発表 背景は白色は減った。→うすいグレー 巻き込みリボンは今の流行 ブロックがあったらブロックの後ろに回り込む。巻き込んでいるところの後ろが透明。マイナスインデントで。 テクスチャはステッチ、皮、紙 より物っぽい。手描きめいた。 テキストはより大きく 文字と文字の間もくっついた アンチエイリアスで表示可能なOSのシェア（調査：ネットアプリケーション
デザイナー必見 ポータルのポータル | Topics | DB - KAYAC Designer's Blog （カヤック デザイナーブログ）
こんにちはShiihoです。 ネットに広がる様々なデザインポータルサイト、これが一つの場所に集まったら、ものすごく便利ですよね。 ということで、作っちゃいました。ポータルサイトを集めたポータルです。 デザインの参考等に使用できるので、どんどん活用してください。 ブックマーク FICC Another Bookmark Beta 非常に多くのカテゴリーでブックマークされている。配信されているニュースも参考になる The FWA 多くのFlashサイトを集めたポータルサイト。制作会社も確認でる ikesai.com 企業別に分けられてたカテゴリーが非常に参考になる。 FLASH MANIA Flashコンテンツに特化したポータルサイト WEBデザイン・データベース 企業別のカテゴリー、ユーザーによるサイト評価がある あんじょうできてはる 国別にデザインをソートできるポータルサイト オールラウン
ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方
ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方をSmashing Magazineから紹介します。 5 Simple Tricks To Bring Light and Shadow Into Your Designs 以下、その意訳です。 ライトとシャドウというのは単にそこにあるだけではありません。ライトは対象物を射し、シャドウを生み出します。 形や大きさ、質感を伝え、目にする対象物の理解を深めます。 ウェブデザインでもこのライトとシャドウは非常に重要で、デザインをよりナチュラルにし、感動的で直感的なものにします。 ここに、ライトとシャドウの洗練された5つの使い方を紹介します。 A Quick Anatomy Of Light And Shadow ライトとシャドウの構造 下の図は、ライトが左からあたっています。ハイライトはそのライトが一番強くあたっている箇所です。そして
アイコンの効果的な使い方を実例から学ぶチュートリアル | コリス
アイコンの効果的な使い方を実例から学ぶチュートリアルをSmashing Magazineから紹介します。 How To Use Icons To Support Content In Web Design 下記は、その意訳です。 How To Use Icons To Support Content In Web Design アイコンは、ユーザーをあなたのウェブサイトの内容に惹きこませるシンプルで、効果的な方法です。 アイコンを使用して、ウェブサイトのコンテンツをサポートする素晴らしいサンプルとベストプラクティスを紹介します。 1. How To Use Icons アイコンを効果的に使用する方法 アイコンを使用する際のゴールの一つは、ユーザーに情報を素早く、そして効率的に伝えることです。 アイコンを効果的に使用すると、説明を必要とせずに、有効なコミュニケーションを可能にし、少ないコンテ
ソース付！実用的なページナビゲーション集「24 Web 2.0 Navigation」
TOP > WebDesign > ソース付！実用的なページナビゲーション集「24 Web 2.0 Navigation」 ブログが一般的になってきて、ご自身のブログにページナビゲーションをつけている方も多数いるかと思います。今回紹介するのはページナビゲーションのデザイン例を集めた「24 Web 2.0 Navigation」です。 オリジナルのデザインもありますが、「24 Web 2.0 Navigation」ではFlickrやDigg、yahooなど人気ページのページナビゲーションも収録されていて、CSSも見ることができます。 詳しくは以下 ただ見本としてデザインが掲載されているだけではなく、HTMLとCSSファイルが配布されていますので、そちらを参考に自分のサイトのページナビゲーションにデザインを反映させることが可能です。ちなみに一部画像を利用しているものもありますが、配布し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DIC川村記念美術館 | Kawamura Memorial DIC Museum of Art
Designers Toolbox Web Safe Area
Designers Toolbox: OS Form Elements
とあるiPhoneアプリのデザインが決まるまで（動画）
http://www.yomiko.co.jp/bushido/ja/index.html
http://www.designwalker.com/2009/01/table.html
ドイツのクリエイティブなウェブデザイン 55サイト | DesignWalker
