グラデーションを使ったデザインのやり方 - GIGAZINE
Web2.0のデザイン的要素として「グラデーションをかける」という重要なものがありますが、このグラデーションのかけ方が実際にやってみると実に難しい。ネット上でいろいろ調べてみるとグラデーションのかけ方自体は様々な方法やチュートリアルが見つかるものの、「何が正解なのか？」というのは見つかりません。つまり、何がそのときに最もベストな方法なのかがわからないわけです。 また、ブログのテンプレートを選ぶ際にも、どのようなグラデーションが自分の目指すテーマのブログにふさわしいのかも基本的な知識がないとなかなかわかりにくいものです。 というわけで、今回はグラデーションを使ったデザインの仕方について。デザインをしない人でもどのデザインを選べばいいかがわかるように書いてみました。 ■間違ったグラデーションなど無い まず一番わかりやすいグラデーションについての誤解はこれ、汚いグラデーションやださいグラデーショ
Webデザイナー/開発者が覚えておくとよい２５のテクニック:phpspot開発日誌
25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい２５のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScript や PHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー
アイトラッキングでみるユーザーの閲覧行動 | 実践！Webマーケティング：Blog | ミツエーリンクス
このコーナーでは、企業でWebサイトの運営に携わっている方、マーケティング部門等でWebの活用法について考えておられる方向けに、Webマーケティングの実践のための手法やノウハウ、事例をご紹介していきます。市場に出回る書籍や雑誌では論じられることない、Webマーケティングの最前線に触れていただければと思います。 2007年01月19日 アイトラッキングでみるユーザーの閲覧行動 マーケティングユニット 棚橋 先日、弊社でもアイトラッキング調査のためのシステムを導入しました。 アイトラッキングは、被験者の顔や眼球、角膜反射を赤外線で捕らえることで視線の動きを追跡する手法で、心理学や認知科学などの研究分野でも用いられている科学的な手法です。以前はそれこそ非常に専門的な研究室での使われていたツールでしたが、昨今ではWebの分野においても、Webサイトのユーザビリティ評価や広告およびコンテンツの評価な
Eyetracking points the way to effective news article design
When one of world’s best-known usability experts, Jakob Nielsen, conducts eyetracking research to test what his usability work has shown, the results generate some beneficial tips for online editors. This is what happened in late 2005, when Nielsen and Kara Pernice Coyne, the Nielsen/Norman Group’s director of research, conducted an eyetracking test with 255 people in New York City. With a little
SEOのエキスパートと初心者を隔てる14の壁 | Moz - SEOとインバウンドマーケティングの実践情報
僕たちの業界は、この5年間で途方もなく成長した。Danny Sullivan氏が最初のSearch Engine Strategies（SES）カンファレンスを開催したとき、世界中で自分のことを検索エンジン最適化（SEO）屋と名乗る人は5000人にも満たなかったんじゃないだろうか。現在、自分のことを検索エンジンマーケティング（SEM）担当と名乗る人の数は、おそらく10万人近く、あるいはもっと多いかもしれない。 しかし、SEOやSEM担当のエキスパートと初心者を隔てる要素はたくさんある。その中からいくつか紹介しようと思う。 これから書くそれぞれの特徴は、企業が検索トラフィックを最大限に活用できるよう支援する検索コンサルタントについて述べたものだ。 ブランド企業での経験 一般にエキスパートは、Fortune 500企業（あるいはFortune 1000企業）での経験を持っているが、初心者は名の
新米の開発者とマーケ担当者に贈る24のサイト内SEOチェック項目 | Web担当者Forum
ここで取り上げる話は、たいていの人がウェブサイト自体の、つまりオンサイト検索エンジン最適化（SEO）情報として、かなり一般的な話だと思うだろうけど、どれほど多くのSEOコンサルタントやウェブ開発者が新しいサイトを立ち上げる際に、ここに挙げる基本ステップを無視したり、忘れたりしているか知ったら驚くかもしれない。 オンサイトSEOに関するこれら24のチェック項目やテクニックを利用すれば、どんなリンクビルディングやリンクベイティングでも、すばらしい結果が得られるだろう。 テーマに沿った、または関連性がある最良のキーワードでオンサイト最適化（OSO）を行うため、最初のキーワード調査を終えたら、予算100ドルでAdwordsのテストキャンペーンを実施しよう。 どのページにも、コピーしたものではなくて、上手く書けている魅力的なタイトルとページ内容説明タグがあるか確認しよう。 サイト上の関連性がある個別
zuzara : みんなのブラウザのウィンドウサイズはどのぐらいか調査して分布図をつくってみた
picks.zuzara.com(site closed)のユーザを対象に、ブラウザのウィンドウサイズをどのぐらいの大きさで見ているのか、調査してみました。調査の動機はGoogleAdsenseを貼っていて800pxにあわせると横スクロールが出てしまうことに気付き、そういえば最近のPCは解像度も高いしどのぐらいの大きさのウィンドウでブラウザを開いているんだろう、と思ったところにあります。 8月3日の24時間集めておよそ6000ユーザ分を集計。picks.zuzara.comのユーザはIEが91%のシェアで、30%がFirefoxの当ブログに比べると一般的なインターネットユーザが見ていると言えます。 で、調査結果。1つの点が1ユーザ、ウィンドウサイズの縦横幅をXY座標に実寸大でマッピングしています。 13%のユーザが800px以下の横幅。 分布図の縦方向に線ができているのは、画面横一杯にウィ
lockエラー | 月額200円からのレンタルサーバー JSN
auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。 <script type="text/javascript" xsrc="imagemenu.js" mce_src="imagemenu.js" ></script> <div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" xhref="" mce_href="" ><span>TOP</span></a></li> <li><a class="kwick opt2" xhref="" mce_href="" ><span>CSS</span></a></li> <li><a class="kwick opt3" xhref
お手本にしたい 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 |
これで完璧！ロゴデザインのためのお役立ち資料まとめ | P O P * P O P
これがあればもう完璧ですね・・・300以上ものロゴデザインに関するサイトを集めたまとめです。 チュートリアルからロゴデザインのアイディアまで・・・かな～り使えるのではないでしょうか。300以上もあるのでさすがにいくつかのカテゴリーに分類されていますね。 どんな役立つ資料があるのでしょうか。詳しくは以下をどうぞ。 ↑ ロゴのタイポグラフィーに関する資料いろいろ。フォントは悩みますよね・・・。 ↑ お約束ですが、「2.0っぽい」ロゴデザイン集についてもいろいろ教えてくれます。 ↑ 素敵なロゴデザインを集めたサイトも紹介してくれます。 全てのカテゴリーは以下のとおりです。是非ご活用ください。 Importance of Logo （ロゴの重要性） Logo Design Software （デザインのためのツール） Logo Design Tutorials （チュートリアル） Logo Fil
相性の良い色を自動でピックアップしてくれる「ColorBlender」
ウェブサイトやブログを作る上で配色はかなり重要ですが、それ故に面倒なものです。そういった悩みを解消するのがこの「ColorBlender」。基準となる色を1つ指定すれば、それに合う色を5色出してくれます。 詳細は以下から。 ColorBlender.com | Your free online color matching toolbox まずスライダーでRGBを調節。 色が決まったら右の「Match blend from active colour」を押し、今のパレットを破棄することをOKする。 すると自動でピックアップされた色が出てきます。 Editing modeを「Direct Edit」から「AutoMatch」に変えると、スライダーを動かすだけで色がピックアップされます。 フォトショップ用やイラストレーター用のカラーパレットとして保存でき、作った配色にリンクするURLも生成可能
YSTのSEOとYahoo! Japanからのトラフィック誘導 - SEO 検索エンジン最適化
テクニカルSEOとは、オンページSEOの一部であり、検索結果での順位を向上させるためにウェブサイトの技術的な側面を改善することを指します。検索エンジンにとって、クロールしやすく理解しやすくすることがテクニカルSEOの中心です。具体的には、サイト内のリンク構造を最適化したり、ページ内の論理的な構造を最適化したり、ページの読み込みを高速化することなどの技術的な最適化が含まれます。 著者情報に直接のSEO効果はありませんが、記事にバイラインや著者情報ボックスの形で著者情報を表示することで、読者に対して信頼性や説得力をアピールできます。また著者のプロフィールページを用意し、記事上の著者情報と合わせて構造化データをマークアップすることで、Googleが著者のエンティティを他と識別しやすくなり、著者がGoogleにとって既知の存在である場合にはSEO効果を期待できます。
TRANS - 英語圏から学ぶ、body要素に対するfont-size指定方法のまとめ
YUI Fonts CSSのfont-sizeで悩み始めてから、font-sizeってどういうのがいいのだろう、と考えていました。そこで、英語圏ではどういうふうに指定しているのが多いのだろうと、いろんな記事を読み漁ってみました。いろいろなやり方はあるにせよ、5つくらいのパターンに分けられるんじゃないかなと思うので、まとめておきます。 font-size: 100%; 主に、body要素に用いられるもの。font-sizeを100%で指定しておいて、font-sizeの指定はユーザの好き好みに合わせるというもの。ユーザビリティに配慮したり、ユーザスタイルシートを生かして読んでほしい場合はこの指定が多いようです。 font-size: 100.01%; 最近ちょくちょく見掛ける、body要素に対して100.01%を指定するというもの。これは、Re: WSG Setting Up Font Si
Web サイト制作時の参考文献リスト
完全に自分用メモ代わりですが、Web サイト制作時に参考にする機会の多いドキュメントをまとめてみました。とりあえずは仕様書関連のみ。 英語で書かれたドキュメントばかりを並べてもなんなので、参考までに日本語訳されたドキュメントも私が知っている範囲内で併記してみました。ただし、日本語訳は完全に原文との整合性を保障するものではありませんので、あくまで参考までにご利用ください。 HTML 関連 HTML 4.01 Specification -W3C Recommendation （日本語訳） ISO/IEC 15445:2000(E) ISO-HTML （日本工業規格 JIS X 4156:2000） ISO-HTML: Entities, element types and attributes (DTD) W3C から勧告されている、HTML 4.01 の仕様書に関しては現状、(X)HTML
色で選べる Web デザインギャラリーまとめ
Web デザインを考えるとき、色彩のイメージはとても大切です。配色のヒントは Web 上だけではありませんが、配色に悩んだときに便利な、色で選べる Web デザインギャラリーをまとめてみました。 イメージに合った色の選び方や、レイアウトもとても参考になります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最初に指定しておくと便利なCSS | Tech de Go
http://tagland.net/tone/tone01/tone01_04.htm
JeffCroft.com: SXSWi 2007: Panels, parties, and VIP areas
http://www.designwalker.com/2007/03/nature-design.html
無料で使えるデザインテンプレート集 14サイト - DesignWalker
