ミニマリズムから学ぶウェブデザインのセオリー
伝えるべきメッセージを明確に伝え、余分なものを取り除くミニマリズムから学ぶウェブデザインのセオリーを紹介します。 Minimalism in Web Design: A Guide [ad#ad-2] ミニマルなウェブデザインってどういうの？ という方には、下記の記事もおすすめです。 ミニマルなウェブデザインで使用される特徴的な12のエレメント 下記は各ポイントを意訳したものです。 はじめに 1. ミニマリズムの概念 2. 取り除く美学 3. よりスマートなカラー 4. タイポグラフィ 5. レイアウト構造 6. ネガティブスペース 7. バランス 何を学ぶべきか はじめに ミニマリズムは多くの異なるコンテクストで話し合われるワードです。それがライフスタイル、あるいは芸術スタイルにかかわらず、なにかがミニマリズムであるということはいろいろな意味をとることができます。 ウェブデザインにおいて
Googleをもっと使いこなしたい人に贈るクエリオペレータ一覧 » SEO Japan
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ Googleでキーワード検索する際、単純にキーワードを入力する以上に色々なクエリオペレータがあることを知っている人は多いと思います。とはいえ、インデックス数をチェックする site: 検索や被リンク数をチェックする link: 程度はしっていても、細かいオペレータになると良く知らない、使わない人が意外と多いのではないでしょうか。今回はサーチエンジンランドがそんなクエリオペレータを一覧表にまとめてくれました。これであなたもGoogleサーチマスター？ — SEO Japan 私はプレゼンを行うとき、ミーティング中、あるいは、顧客候補と話をする際に、グーグルの強力な検索スキルを自慢するのが大好きだ。
JIS X 8341-3:2010 解説
はじめに この文書が扱う内容 この文書は，JIS X 8341-3:2010を利用する際に役立つ解説として，ウェブアクセシビリティ基盤委員会が作成・公開しています．規格と合わせて読むことで，規格票には書くことができなかった内容や，規格の利用者のためにウェブアクセシビリティ基盤委員会が作成している資料の利用方法などがわかります． 以下，まず，ウェブアクセシビリティ基盤委員会が公開している資料について説明し，次に，そもそもウェブアクセシビリティとは何で，JISのような規格（ガイドライン）はウェブアクセシビリティ向上にどのような役割を持っているのかを解説します．その後，規格の構成に沿って，重要な箇条を解説します． 規格票の購入方法 ウェブアクセシビリティ基盤委員会が公開している資料は，日本規格協会が発行している規格票の代わりとなるものではありません．JIS X 8341-3:2010を使用する際
解析しやすいは作れる！ | dIG iT
dIG iT Digital Marketingに関する様々なテーマで発信するブログ。 若干ペースが落ちているものの、１本は濃い内容で書いてみてます！ 解析しやすいサイトは作れます。制作時にいくつかのポイントを意識するだけで、その解析のしやすさは飛躍的にあがってきます。 逆に言えば、アクションにつなげやすいサイトは、解析のしやすいサイトであり、それは結果としてサイト構造がしっかりしたものとも言えます。 ということで、サイトを作っていく上で＜解析視点から＞押さえておくと良いポイントをご紹介したいと思います。 USで起きている変化 まずは最初にUSで起きている変化について少し触れてみたいと思います。個々数年、USの上位に評価されているコマースサイトのTOPページなどを見ていくと、実際に＜解析しやすい＞が意識的に作られていると感じています。 下記のキャプチャはBest BuyのTOPページを現在
WDE08 Blog: Object Oriented CSSとCSS Systems
CSSが普及し、いまやCSSでウェブサイトをレイアウトすることに異論を挟む人はいないだろう。CSSというのは今や小さな２ページからなるウェブサイトでも、1000ページにものぼるウェブサイトでも使われています。 ではどのようにCSSを読み込ませたり、整理しているでしょうか？効率よくCSSをコントロールすることは仕事の時間をへらしプライベートの時間を増やしたりすることができるかもしれません。 WDN09にてOOCSS（Object Oriented CSS）なるものがNICOLE SULLIVANより発表されました。興味の有る方はご覧になってみてください。 ビデオ スライド Object Oriented CSS View more presentations from Nicole Sullivan. ロンドン近郊に拠点をおく、ClearleftのNatalieがBarCamp London
「Google JavaScript Style Guide」に沿ってチェックしてくれる、グーグル製JavaScript文法チェッカー
「Google JavaScript Style Guide」に沿ってチェックしてくれる、グーグル製JavaScript文法チェッカー グーグルはJavaScriptコードのスタイルガイド「Google JavaScript Style Guide」を公開しており、同社自身もこのスタイルに従って開発を行っているとされています（スタイルガイドの日本語訳の例）。 このスタイルガイドに従った開発を支援してくれるツールがグーグルからオープンソースとして公開されました。同社のClosure Tools Blogのエントリ「Introducing Closure Linter」で紹介された文法チェックツールのClosure Linterです。 Closure LinterはPythonで書かれたツールで、コマンドラインから利用します。上記のエントリによると、次のようなJavaScriptをチェックに書
フォームのラベルと入力欄を縦一列に配置するとより速く書きこめる三つのポイント
フォームのラベルと入力欄を縦一列に配置すると、横一行に比べてユーザーがより速く書きこめる三つのポイントを紹介します。 Why Users Fill Out Forms Faster With Top Aligned Labels 下記は各ポイントを意訳したものです。 visual fixation visual direction vertical space まとめ visual fixation 「visual fixation」は一点（面）をみつめる固視のことで、上記の五つ入力項目があるフォームでは、横一行：10箇所、縦一列：5箇所になります。 縦一列は一つの入力項目に対して、半分の固視ですみます。 visual direction 「visual direction」は視方向です。横一行は水平・垂直方向の二つを必要とし、縦一列は水平方向の一つのみです。 vertical space
[JS]よく使う機能だけに絞り込んだ、シンプルなカルーセルのスクリプト -bxCarousel
画像をはじめさまざまなHTML要素をスライド表示させるカルーセルのスクリプトを紹介します。 下記のデモでは、Example One（表示数4、移動数2、手動操作）、Example Two（表示数3、移動数1、自動操作）となっています。
GoogleのSEOにかなり強くなるマニュアル | 京都のSEOコンサルタント松尾茂起のブログ
GoogleのSEOにかなり強くなるマニュアル:京都のSEOコンサルタント松尾茂起のブログ 京都のSEOコンサルタント松尾茂起のブログTOP > Google SEO > GoogleのSEOにかなり強くなるマニュアル 久しぶりのブログ更新です。 Yahoo！の検索エンジンがGoogleになるという発表があってから、約40日が過ぎました。 現在、Yahooでは上位表示しているけれど、Googleでは上位表示されていないという方の中には、戦々恐々とされている方も多いようですが、正直なところ、アルゴリズムが変動しやすいYahooに比べれば、Google対策の方がはるかに生産性のあるSEOができると思います。 Googleでの上位表示は、コンテンツ戦略をきちんと設計しておけば難しくありません。 今回は「Google SEOにかなり強くなるマニュアル」と称して、Google SEOを行う上で重要な
t32k.com - このウェブサイトは販売用です！ - t32k リソースおよび情報
このウェブサイトは販売用です！ t32k.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、t32k.comが全てとなります。あなたがお探しの内容が見つかることを願っています！
“良いSEO” と “競争上の利点になりうるSEO” の違いはどこにある？ | Moz - SEOとインバウンドマーケティングの実践情報
SEOを愛する人間として、そして熱意ある（いや、熱に浮かされたような、と言った方が正確かもしれない）新興企業の設立者として、僕は自分たちが関わっている分野、つまりオーガニック検索の検索結果が支配するこの分野が、検索結果の利用法を知っている企業にとってどれだけ「一方的な競争上の利点」となりうるか、正しく伝えたい。 そう思ったのは、ジェイソン・コーエン氏の記事が、論争を巻き起こしていたからだ。 コーエン氏の記事の主旨は次の通りだ。 私は先週、競争上の利点をめぐる非常によくある誤解について詳しく論じた。 要約すれば、こういうことになる。真似できるものは真似される。機能でも、宣伝文句でも、価格設定でも何でもだ。君が人気ブログで目にした内容は、他の人だってみんな読んでいる。情熱があるとか、懸命に働いたとか、経営体質が「スリム」だというだけでは、「強み」を持っているとは言えない。 競争における真の利点
ロングテールSEOの工程と2つの指標 - キーワード - リアルSEO
ロングテールキーワードの考え方のつづきです。 前回、安易なネーミングを使ってしまいましたが、 ロングテールキーワード という言葉は無いんだと思います。ニッチキーワードが数多くあつまって、サイトがロングテール化していくので・・・。 こんなはなしはどうでもよいかもしれませんが、念のため。 ロングテールSEOを成し遂げるには、 「テーマを掘り下げる」 「コンテンツの数を増やす」 「競合の少ないキーワードで数多く、上位表示させる」 という工程が必要です。 そうなってくると何百ページ、何千ページと増えていきます。 さすがに、これは管理（数字の把握）が難しくなります。 どれくらいロングテール化が進んだの？ と聞かれても、具体的に答えようがありませんね。 ロングテール化の効果指標 そこで、何らかの効果指標を考えてみたいと思います。 無料で使えるGoogle Analyticsを使ってみましょう。 まず「
ECサイトの色やデザインと購買意欲の関係 | Webクリエイターボックス
色と消費者 色はデザインの重要な要素のひとつです。しかし、全世界において共通しているとは言えません。北アメリカで注目されやすい色がインドでも同じとは限りませんよね。下記は北アメリカのオンライン消費者への色の働きです。 黄色 楽観的・若々しさ。ウィンドウショッピングをしている人の注意を集めるために使われます。 赤 エネルギッシュ。心拍数を高める色。緊急性があり、セール中の商品に使われます。 青 信頼と安全の色。銀行や企業のメインカラーとして使われます。 緑 裕福・リラックスを連想させる色。目に優しく、一連のプロセスを容易に見せます。 オレンジ 活発・活動的な色。「購入する」「購読する」などのCTAボタンに使われる事が多いです。 ピンク ロマンチック・女性的な色。若い女の子や女性に向けたECサイトで使われます。 黒 パワフル・滑らか・光沢など。高級な商品を扱うサイトで使われます。 紫 落ち着き
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
Googleの検索結果に表示されるパンくずリストがmicrodataとRDFaに対応
Googleの検索結果に表示されるパンくずリストがmicrodataとRDFaに対応 ネタ元:Google、パンくずリストでのURL表示にマークアップを利用可能に | 海外SEO情報ブログ・メルマガ これまでWEBサイト所有者が制御できなかったGoogle の検索結果に表示されるパンくずリストがmicrodataとRDFaで制御が可能になったようです。 パンくずリストは次のように検索結果のURL中に表示されます。 microdataでの記述 HTML5 で策定されているmicrodataは、特定の種類の情報（レビュー、人物、イベントなど）をラベル付けする方法の 1 つです。 <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/dresses" ite
今作ってるやつ
jQueryのアニメーション重すぎて使えない タッチイベントをハンドリングしないといけない ネイティブのスクロールの仕組みは overflow:scrollとかでできない ↓ transitionベースのアニメーション タッチイベントのラッパー ネイティブまねっこスクロール これができれば普通に書ける（ハズ） $.ui.swipable http://dl.dropbox.com/u/268240/scriptsInDev/ui.swipable/index.html スワイプイベント $(element).bind('swipe.right', function(){ alert('right swipe occured'); }); $(element).bind('swipe.left', function(){ alert('left swipe occured'); }); $.
Google、パンくずリストでのURL表示にマークアップを利用可能に
Googleは、検索結果に出たウェブページのURLの代わりにパンくずリストを表示する機能を昨年の11月に導入しました。 今ではSERPでのパンくずリスト表示を目にする機会が増えてきました。 URLの代わりにパンくずリストを表示するかどうかや表示する場合の階層はGoogleのアルゴリズムで自動化されていて、サイト管理者は設定できません。 そんななか、リッチスニペットのためのマークアップでパンくずリストの情報を適切にGoogleに知らせることができるようになりました。 microdataかRDFaのいずれかのマークアップで記述されたパンくずリスト情報をGoogleは認識できます。 詳しいことがヘルプで説明されています。 すでにパンくずリストが表示されているサイトは何もする必要はありません。 またパンくずリスト情報をマークアップしたからといって、リッチスニペットの一部としてパンくずリストが必ず表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptは盗んで学べ！ 知識0のデザイナーでもできるjsdo.itの遊び方
プロユースにも耐えうる高品質なフリーフォント -AW Conqueror
SEO研究所サクラサクラボ
