http://www.designwalker.com/2009/01/web-layout.html
ウェブページを見る目の動きは「F」パターン - GIGAZINE
つまり人間はページを見る場合、「F」の字を描きながらページ全体を見ているというわけ。 これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうで。 で、その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描くというわけ。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。 F-Shaped Pattern For Reading Web Content (Jakob Nielsen's Alertbox) http://www.useit.com/alertbox/reading_pattern.html 第1段階： 訪問者は最初にページの
Resolution dependent layout
Experiment Resolution Dependent Layout Date created 21 September, 2004 Date last modified 19 January, 2006 Discussion Visit the discussion Resize your browser window below (or above) 800 pixels wide to change the layout of the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi consectetuer faucibus nulla. Nulla at enim eu lacus fementum elementum. Proin pulvinar ante ac erat.
第26回 どこにメニューをおくべきか，どこが画面の一等地か：ITpro
Webサイトのデザインの中で，ここ2年で大きく変わりつつある「常識」があります。それは，「メニュー（索引）」の位置と「一等地」の場所です。ユーザーの閲覧環境が加速度的に変化しているという認識の下で，それでも最良のユーザビリティを提供しようとするなら，どのようなことを考えておく必要があるでしょうか。 左メニューと右メニュー（視線との交差）のどちらがベスト？ まだモニター画面の大きさが小さかった時代（1995年前後），情報へアクセスしやすくする「メニュー」の位置は，ほとんど誰が考えても左側にあり，議論もされなかったように記憶しています。確実に画面の中に入り，ユーザーも基本的に左端にさえ注意を向けていれば，大切な情報にたどり着けるという「暗黙の常識」が存在していたかのような時代でした。 しかしここ数年，メニューが左側にあると本当に操作性が良いのかという議論を聞くようになり，大手のWebサイトでも
かっこいいウェブサイトのできるまで:CSSでレイアウト
CSSなどにもMTをやっていたらだいぶなれてきました。 マージンやパディングなどの設定とか、 テーブルを使わないレイアウトができるようになると、 HTMLがスッキリしてSEO的にもよくなります。 でもレイアウトをするとき、 全体の幅を750PX、サイドメニューを200PX、 メインを550px、さらにPタグで書くスペースを500px程度にするために、 マージンやパディングを取ったりします。 このとき、メインの中に入れるタグのCSSの設定が、 数字的におかしいと、レイアウトが崩れます。 その計算って最初訳がわからなくて、 混乱しました。 でも、その計算をやってくれるソフトを発見！ http://www.divlayout.com/index.html 探すと便利なフリーソフトっていっぱいありますよね。
(旧)sideblue weblog | [sb] サムネイル画像自動リンクプラグイン v000c
元画像を開くウィンドウのサイズを画像のサイズに合わせて表示できるオプションを追加しました。 デフォルトでは今まで通り普通のウィンドウで開くモードですので、この機能を利用する場合は plugin_init 内の fit の 値を 1 に変更してからプラグインのインストールを行ってください。 またテンプレートの編集も必要です。 テンプレートのHTMLの<head>〜</head>内(場所的には</head>の直前でOKかと思います)に下記JavaScriptをコピー＆ペーストしてください。 sample [[DOWNLOAD]] ・画像サイズに合わせたウィンドウを開くJavascriptについて 画像サイズに合わせたウィンドウをオープン、画像をクリックするとウィンドウをクローズする。 といった動作をするスクリプトです。 WindowxXP上でIE6.0、Firefox1.0でのみ動
困った時のカラーイメージ＿WEBデザイナーのすすめ
サイトのイメージを左右する配色決めに悩んだ事ありませんか？クライアントに企業のイメージカラーがある場合も、どういった配色をすればもっともイメージカラーを生かせるか・・・また、イメージカラーがない場合、サイトに対する「思い」や「イメージ」に近い色使いにするためには・・・？そんな時のちょっとしたヒントになれば嬉しく思います。
「色」が持つ3つのチカラ
第一印象を判断する時間は短く、約5～7秒程度で決まると言われています。 初めてブログを訪れた時の第一印象は、以前、イメージは色で決まる でも書きましたが、文章でもデザインでもなく「色」なんです。 Webデザイン エンジニアリング第23回 「色」が持っている三つのチカラ：ITpro こちらの記事を読んで、「色」が持っている三つのチカラ「強調」「印象」「関連」についてとても参考になりました。 テキストを読んでいるつもりでも、無意識に「色」の情報が伝わっているんですね。 1. 注目してほしいところ タイトルや見出し テキストやリンク色 2. 与えたいイメージ 女性らしさ、優しい印象（ピンク系）←わたしはココ！ 楽しい印象（黄色やオレンジ） 信頼、さわやか（ブルー系）など 参考：色が与える印象の違い 3. 同じ色でグループ化 サイドバーやカテゴリーごとに分類する。 メインカラーと同系色か、3色まで
LOVE IS DESIGN : Webデザインと黄金比の関係
Webデザインや配色に役立つ（かもしれない）テクニック、便利なツールを紹介しています。 /*無駄にエロいのは仕様です*/ 01 About 02 Blog 03 Color 04 Design 05 Love 06 etc ベストセラーのダ・ヴィンチ・コードにも出てくる「黄金比」という言葉を、みなさんも一度は聞いたことがあるかと思います。 先日テレビを見ていたら、「黄金比」について番組で取り上げていたので、興味深く見ていたら、なんとオードリー・ヘップバーンの顔の中にも黄金比がたくさんひそんでいたんだそうです。 ピラミッドやパルテノン神殿などの建築物、ミロのヴィーナス・モナリザの絵でも有名ですが、はるか昔から、最もバランスのとれた美しい比率とされる「黄金比」がなぜ美しいと言われるのでしょうか？ 松ぼっくりやひまわりの種など、自然界にある多くのものに、この法則が当てはまるというのがひとつの説に
美しいレイアウトを計算してくれるツール :: Love & Design ::
以前 Webデザインと黄金比の関係 でご紹介した、白銀比、黄金比、白金比、第二黄金比を使った美しいレイアウトを計算してくれるツールが、さらに再分割できるようになりパワーアップしました。 電脳狂想曲 レイアウトの小技 使い方と説明 実際に画像を表示しながら分割ができるので、サイドバーや画像の大きさを決めるときや、ロゴやメニューを配置するときに便利です。 【使用例】段組（２カラム）するとき 横幅780px の場合 黄金比：横幅 / 552px / 228px 白銀比：横幅 / 512px / 268px 白金比：横幅 / 571px / 209px 第二黄金比：横幅 / 565px / 215px ↓もしかして黄金比？ これまでテキトーに決めていたという方も、Webデザインだけでなく、プレゼンの資料などにも活用できそうなので、ぜひ一度お試しください。 参考記事 「見えない線」に沿ってページをレ
CSSのレイアウト40種類を集めた「Layout Gala」 - GIGAZINE
サイトのコンテンツのレイアウトを考える場合、コンテンツをどのようなレイアウトでは位置すればいいのか悩む場合が多々あります。2コラムにするのか3コラムにするのか、それぞれのコラムの下にさらに子コラムを入れるのか否か、右サイドに置くのか左サイドに置くのか、などなど。 そんな場合に参考になるのがこの「Layout Gala」。CSSによるレイアウトの例が40種類あるので、自分の作りたいサイトのスタイルに近いレイアウトを実際に見てから、CSSファイルをダウンロードできます。Layout Gala http://blog.html.it/layoutgala/ 全部のレイアウトのファイルを詰め込んだファイルのダウンロードは以下から。 http://blog.html.it/layoutgala/allLayouts.zip また、「Yahoo! UI Library」にも単一のCSSファイルで100
ページ配色を決めるのに便利な無料サービスいろいろ - GIGAZINE
まずは何も考えずに配色を考えたい人向けの「Color Wheel」から。 Color Wheel - ver 2.0.1 http://www.webwhirlers.com/colors/spinwheel.asp 「SPIN」をクリックすれば次々と配色が自動的にドンドン変わっていくので、お気に入りを見つければいいだけという超簡単仕様。各配色は背景や文字色などに割り当てられており、チェックマークを押すことで入れ替え可能。また、「HOLD」にチェックを入れればその色は「SPIN」を押しても変化しないようにできるので、気に入った色を見つけたらそれだけ固定して、さらに次の色も固定して入れ替えて…というようにすれば、いくらでも自分好みのカラーパターンを生成できるというわけ。 また、「Example1」以外にも「Example2」を押せば違うページレイアウトでの使用例も見ることができるので、同じ配
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
東京都三鷹市の自動車ガラス交換、ガラスリペア、ガラスコーティングはワカシマガラスへ
電脳狂想曲 Webデザインの小技