イラストレーターを勉強しよう - DesignWalker
あなたのサイトを色盲の人がどう見ているか教えてくれる『Colour Blindness Simulator』 | P O P * P O P
色盲の人にとってあなたのサイトは見えにくいかもしれません。 そこで便利そうなのが「Colour Blindness Simulator」。 このサイトでは指定した画像を色盲の人がどう見ているかを教えてくれます。 以下に使い方をご紹介。 ↑ とりあえずこのサイトのスクリーンショットでテストします。 ↑ ファイルと色盲の種類を指定します。 ↑ 変換結果。ちょっと小さいですが、まったく違う色になっちゃってますね・・・。 指定できるファイルは100KB以内および、1000ピクセル×1000ピクセル以内のJPEGなのでサイトなどで試すときは気になる部分だけで試してみると良さそうですね。 アクセシビリティに注意しなくてはいけない方はご利用になられてはいかがでしょうか。 » Colour Blindness Check – Etre
フッターが素晴らしい19サイトを参考に足もとを見直そう | Web担当者Forum
通常、フッターには基本的なナビゲーションを繰り返して用い、著作権情報やプライバシーポリシーなど「細字部分」にあたるものが書き込まれる。また、標準に基づいたデザインの人気が高まり、フッターにXHTMLやCSSへの準拠を示すバッジが置かれるようになった。 新しいクライアントのために、フッターが完全に不足しているサイトを再デザインしながら、僕がデザインをまとめるとフッターがやる気のない付け足しになってしまうのはどういう具合なんだろうと思った。僕のフッターはたいてい内容が乏しく、デザインも大好評とはいかない。これまでに作った最も内容豊かなフッターはおそらく、ミニサイズのサイトマップとコンタクト情報がちょっとばかり入った、Avatar Financialのものだろう。 こうして僕は興味をもった。ほかのウェブデザイナーはフッターを何に使っているんだろうか？ウェブを回って集めた、フッターが目を引く19サ
「左上の魔術師」理論
Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ
ブログのユーザビリティを高めるための20の秘策 | P O P * P O P
良いブログとそうでないブログの違いは何だろうか？そう思ったTomさんがまとめたのが今回ご紹介する「Twenty Usability Tips for Your Blog （ブログのユーザビリティを高めるための20の秘策）」です。 もちろんこれが100%正しいというわけではないですが（彼もそう言っています）、とても参考になりますね。ブログのリニューアルを検討されている方には役立つのではないでしょうか。 ではその20の秘策を以下に詳しくご紹介。 ブログのテーマを決めよう ブログのテーマを決めたらそれに関する投稿にフォーカスしよう。そしてロゴの近くにそのテーマが何であるかわかるようにしよう。またそのテーマに関する簡単な説明もすぐそばに置くようにしよう。 これは奇妙に思えるかもしれませんが、実際のところ、テーマを広くとるよりも、一つテーマを決めたほうがたくさん書くことができますよ。 コメントを推奨
ウェブのテキストがもっとも読みやすい文字色と背景色は？ | POP*POP
1997年の研究ではありますが、「ウェブ上のテキストがもっとも読みやすいのはどういうとき？」なるものが紹介されていました。 » Web page readability: Green text on yellow works the best この研究では、フォント、色、スタイルをいろいろ変えてどの組み合わせが読みやすいかを調べたようです。 いくつか参考になりそうな結果があったのでご紹介していきます。 では早速その研究結果から。 もっとも読みやすかったのは「黄色の背景」に「緑の文字」だそうです。ただしフォントが斜体のArialのときはこの組み合わせは最悪だそうです。 Times New RomanのほうがArialより読みやすい。 フォントも合わせて考えると「Times New Romanで、斜体で、黄色の背景で、緑の文字」が一番読みやすかったそうです。 ↑ こんな感じですね・・・。 「グ
photoshop- 1ピクセルラインで質感を高めるテクニック - WEBデザイン BLOG
下記の画像はこのサイトのトップページの画像です。両者の違いは、1ピクセルのラインが入っているか、いないかの違いです。左の画像はピクセルラインあり、右側はラインなしです。（画像クリックすると原寸表示されます。） ピクセルラインを入れることで、立体感を演出することができ、さらに質感を高めることができます。 さらに拡大した画像も下記の画像をクリックすることでご覧いただけます。
黄金比をサイトのデザインに取り入れる簡単な３つの方法 | コリス
その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、１つの値
お手本にしたい Web デザインのギャラリー10選 :: Love & Design ::
Web デザインに限ったことではありませんが、何かを学ぶときは良いお手本を探すことが大切ですね。そのお手本を真似ながら、たくさん 練習することが上達するための何よりの方法だと思います。 そんなお手本にしたいきれいな Web デザイン（CSS）ばかりを集めたギャラリーを10サイト選んでみました。配色に悩んだり、デザインのアイデアが浮かばない、そんなときもインスピレーションを与えてくれそうです。 01 CSS Mania CSS デザインといえば、まずここ 02 Most Inspired クールな CSS デザインを一括チェックできます。 03 CSS Impress ブログデザインの参考に 04 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards タグで分類されていて目的にあわせて選びやすい 05 CSSclip |
サイトに使えるCSSベースのクールなメニューナビゲーション8個:phpspot開発日誌
8 web menus you just can't miss There's no point to discuss the importance of a web menu, how it's done and how it looks. Many people may remember a website for it's great looking menu. サイトに使えるCSSベースのクールなメニューナビゲーション8個が紹介、ダウンロード公開されています。 サイトのナビゲーションデザインはシンプルだけど使い勝手のよいものにしたいですね。 そこで、サンプル集があればサイトにあったナビゲーションを考えることが出来そうです。 CSSベースの色んなタイプのナビゲーションがあるのでサイト作りに役立ちそうですね。 関連エントリ Webデザイナー/開発者が覚えておくとよい２５のテクニック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Yahoo! JAPANがトップページデザイン変更を発表、秋からβテストを開始
12のフリーCSSテンプレート集:phpspot開発日誌
テキスト表示設定をウェブ上でシミュレーションできる『CSSTYPE』 | 100SHIKI
http://www.designwalker.com/2007/03/line-design.html
http://youmos.com/news/sifr_bjkit.html