ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
デスクトップ版黄金比・白銀比計算ツール
自然界でもっとも美しい「黄金比」を計算する「Webデザイン黄金比計算ツール」。人工物や建造物で安定した美しさを持ち、日本人に古来から浸透している「白銀比」を計算する「Webデザイン白銀比計算ツール」。この2つのWeb版計算ツールをリリースしてきました。 はてなブックマーク - Webデザイン黄金比計算ツールのコメント欄に、このようなコメントがあり、 2008年06月06日 silvetjude わがままを言わせてもらえるのなら、これローカルで欲しい。それくらい便利。 Commit Lab ≫ それ俺です、わがまま言ってすいませんのトラックバックもいただきました。（お体の方は大丈夫でしょうか？） わがままを聞いて、デスクトップ上で黄金比と白銀比を計算できるツールも作りましたのでリリースします。Adobe AIRアプリケーションであるため、アプリを透明にさせて他のウィンドウに重ねるだけで比を確
Webデザイン劇的ビフォーアフター09年春版 (1/4)
この4月、新しい事業年度のスタートに合わせ、各社のWebサイトが相次いでリニューアルした。ここでは、3月下旬～4月にかけて大規模なリニューアルを実施したWebサイトを編集部でピックアップし、リニューアル前後の画面写真付きで紹介する。最新の企業サイトのトレンドをつかみ、自社サイトのリニューアルの参考にしよう。 マイクロソフトが運営するポータルサイト「MSN」は、2008年4月以来ほぼ1年ぶりにトップページをリニューアル。「毎日使いたくなるMSN」（マイクロソフト）を目指し、使い勝手を高めた。 3カラムのレイアウトは従来のままだが、それぞれのカラムの役割を明確にし、各カラムに入る要素を分類、整理している。具体的には、左カラムにHotmailの受信状況や天気などを確認できる個人ツール類を、中央カラムにニュースなどの最新情報を配置。ディスプレイ広告や企画広告への誘導はすべて右カラムに集約した。 ま
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
WEB制作者なら最低限知っておくべき色彩心理とWEBセーフカラー、WEBセーフカラーを出力するRubyコード - 久保清隆のブログ
色彩は、Webサイトが どのように際立つか ユーザの目にとまるか ユーザーにどのような感情を芽生えさせるか ユーザがどんな動作をするか に大きな影響を与える。 ユーザの属性に合わせて適切な色彩を使うことは、売上を増大させたり、滞在時間を長くしたり、直帰率を下げることにつながる。 また、Webサイトだけでなく、 ファッション インテリア エクステリア(住まいの外観) 広告、商品 などにも使えるので、汎用性のある知識だと思う。 色彩心理 色 プラスの心理的影響 マイナスの心理的影響 赤 情熱的 活動的 晴れやか 暖かい 元気の良い 購買欲求 安っぽい 派手 危険 暴力 青 さわやか 清らか 清涼感 すっきり クール 閑静 憂鬱 寂しい 冷淡 未熟 無機質 黄 若々しい 陽気 明るい 楽しい うるさい 目立つ 幼稚 警戒 緑 ナチュラル 新鮮 穏やか すがすがしい 毒 田舎 疲れ 未熟 紫 高貴
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集:phpspot開発日誌
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが１ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう？という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、
jQuery の位置・サイズ関連メソッドまとめ - Cyokodog :: Diary
ばらけてきたのでこちらにまとめます。 索引 位置の設定 css(name,value) 位置の取得 css(name) offset() position() scrollTop() / scrollLeft() event.pageY / event.pageX サイズの設定 css(name,value) / height(value) / width(value) サイズの取得 css(name) / height() / width() attr(clientHeight / offsetHeight / scrollHeight) outerHeight() / innerHeight() コンテナ要素の取得 offsetParent() 解説 位置の設定 css(name,value) 対象要素を指定した位置に配置できます。単位を省略した場合はピクセル単位となります。 $('#
「JavaScript の不思議な面白さ」を再実装してみたよ。 - 桜ヶ丘日記
追記: jQueryプラグイン版も書きました JavaScript の不思議な面白さ (Yahoo! JAPAN Tech Blog)の実装方法もコードもアレなので自分なりに再実装してみた。 まずHTML デフォルトで表示しておく説明文ってtitle属性そのものだと思ったわけです。説明文っていうかタイトルな気がするし。 で、書いたHTMLはこんだけ。ロジックは全部外部JavaScriptファイルに書きます。 <form> <input type="text" name="q" title="検索語を入力" class="add-default-text" /> <input type="submit" value="検索" /> </form> ちなみにYahoo! JAPAN Tech Blogさんでは、 <input (中略) description="ここで検索！"> なんて書いちゃ
アップル ヒューマンインタフェースガイドライン
アップル ヒューマンインタフェースガイドライン 原文：Apple Computer Inc. 訳：かろでん☆みゅーあ 2006-06-28 はじめに アップル ヒューマンインタフェースガイドライン序文 アップルは、強力なコアファウンデーション、そしてアクアと呼ばれる、目の離せないユーザインタフェースを結びつけた、世界で最も先進的なオペレーティングシステム、Mac OS X を手にしました。 進化した機能と、美的に洗練された色使い、そして透過処理、アニメーションによって、Mac OS Xは新規のユーザにはコンピュータ操作をより容易に、同時にプロフェッショナルユーザには彼らがMacintoshに期待する通りの生産性を提供します。 ユーザインタフェース、すなわちふるまいと外見は、よく練られた緊密なユーザ体験を、Mac OS X向けに開発された全てのアプリケーションに利用できるようにします。 これ
5. 自分のページ（およびcookies）がSafariにキャッシュされるのを防ぐにはどうすればよいのでしょうか？ - Safari Developer FAQ
JavaScriptオブジェクトの、お使いのブラウザの値を表示してみてください： navigator. 先頭に戻る 3. SafariはDHTMLをサポートしていますか？ Safariは、JavaScriptを介してページ上のほとんどの要素にアクセスできる、W3C DOM-2を通じてDHTMLをサポートしています。詳細については、アップルインターネットデベロッパ向けの、DOM-2の使用に関する2つのパートからなる記事、Part IおよびPart IIを参照してください。 DHTMLがサポートされているかをスクリプトを使用してテストする場合は、document.getElementByIdメソッドをチェックします。Mozilla、Internet Explorer 5+、その他最新の各種ブラウザもこれをサポートしています。 if (document.getElementById)
CakePHPで高速Webアプリ開発：第1回 CakePHPを使いたくなる5つの特徴｜gihyo.jp … 技術評論社
CakePHPとは CakePHPはオープンソースで開発されたPHP用のフレームワークです。Ruby on Railsの影響を強く受けており、Webアプリケーションを高速に開発するための仕掛けが随所に盛り込まれています。 PHP開発者の方で、Railsで開発してみたいけどRubyの経験がないのでなかなか行動に移せない方などはとくにCakePHPを試してみてほしいと思います。Railsの考え方を肌で理解しつつ、PHPでWebアプリケーションを高速開発するための選択肢を手に入れることになるでしょう。 CakePHP 本家サイト（英語）（左図）。 フォーラム - CakePHP Users in Japan（右図） そのほか、CakePHP プログラマーズ リファレンスガイドも参考になる CakePHPを使いたくなる5つの特徴 まずは皆さんにCakePHPに興味を持っていただくため、フレーム
福井 信蔵 インタビュー | 文化庁メディア芸術プラザ
福井 信蔵 (ふくい しんぞう) 1959年 神戸生まれ。アパレル出身の経験を生かしファッションブランドの広告やブランディングを多数手がけた後、1994年独立。同時にウェブデザインを独学で開始。2000年にデザイン集団「ビジネス・アーキテクツ」を設立。数々のグローバル企業のために多岐にわたるクリエイティブサービスを展開。2005年に同社を退社。現在充電中。1995年ロンドン国際広告賞、1995年GRAPHIS DESIGN、1999年Web Design Award金賞、2003年OneShow Gold、2004年OneShow Bronze、2005年Communication Arts等、国際的なデザイン賞を多数受賞。 福井信蔵氏は、インターネットの黎明期からウェブデザインに携わり、いまやウェブデザイン業界において知らない人はいないという有名ディレクター。その活動範囲はウェブデザイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
KARATE SYSTEM
「Yahoo!ニュース」の表示速度が3～5倍に、そのからくりは……：記事の芽
http://www.designwalker.com/2009/02/clone-webdesign.html
http://e0166nt.com/blog-entry-569.html
http://youmos.com/news/mochaui
インタビュー2009（１）ウェブデザイナーの中村勇吾氏「旧世代サイトを見直したい」インターネット-最新ニュース:IT-PLUS
http://www.designwalker.com/2008/12/webdesign2008.html