サイトをリニューアルした時のメモ | Blog.37to.net
最終更新日 Sun, 28 Jun 2009 11:09:25 +0900 ブックマーク 半年ぐらい掛けて、少しずつ、ひっそりと、サイトをリニューアルしたので、その時のメモです。 当初は簡単なメモだったのですが、いつの間にかメモと言うには量が多くなってしまいました。 眠らせておくのも勿体ないのでまとめて公開します。 少し長いので（最近はむやみに記事が長い気がしますが）、最初に主な内容を書いておきます。 リニューアルの概要 HTMLのコーディング CSSとデザイン Movable Type4.2でのサイト構築 主に上記4つの内容となります。 HTMLとCSSは本職ではないのですが、ちょっと頑張りました。 リニューアルの概要 目的 古いデザインの一新 ブラウズ環境の変化に対する対応 (最新のブラウザに合わせた機能のサポート) (IEは7以上を基準にする。6はごめんなさい) 文字サイズの影響を受
フォント表示サンプル
FONTS Revised 2003/12/10 CSS ではフォントの種類を指定できます。フォントとは、描画される文字のことで、文字の種類には、ゴシック体、明朝体などがあります。各々のフォントの種類には、太字や斜体などのバリエーションがあります。 CSS では、次の 5 つの総称名で分類されています。これらを、 generic family と呼びます。 sans-serif ゴシック体風。ひげ無し。 serif 明朝体風。ひげ付き。 monospace 等巾フォント。大文字、小文字、英数文字の巾が等しい。 fantasy 装飾体。花文字、ポップ文字など。読めないフォント（絵文字、シンボル・フォント）は除く。 cursive 手書き体風。 CSS でのフォントの指定方法 CSS の説明は別項に譲ります。 CSS でフォントを指定する場合、次のように記述します。 font-family:
要素のはみ出しの処理の不具合（IE/overflow）
対象となるブラウザ InternetExplorer（以下IE）には、要素に入りきらない文字の表示方法を定める『overflow』プロパティにスタイルシートの解釈の不具合があります。 この不具合は、以下のブラウザが対象です。 InternetExplorer6を含むそれ以前のバージョンすべて 具体的な不具合 CSSの解釈の通りでは、「overflow」プロパティが指定されていない、もしくは「overflow:visible;」を指定している場合、『「widthとheightプロパティ」が指定されている要素やボックスの中身の文字がその要素に収まりきらないとき、その部分は要素からはみ出して表示される』というのが正しい解釈です。 しかし、IEでは要素やボックスに「widthとheightプロパティ」を設定していて、かつ「overflow」プロパティが指定されていない、または「overflow:v
「すぐバテるボクサー」にどうスタミナを付けさせる？ 欠点を直すアドバイス術
「パンチ力はあるのにスタミナがない」というボクシング選手に対して、もしあなただったらどうやって指導しますか？ 今回は、部下や後輩の欠点を直すためにどうやってアドバイスしたらいいか、についてお話します。 この記事をお読みの方の中には、部下や後輩がいらっしゃる人も多いと思います。彼らを指導していく際に、多くの人が悩んでいることのひとつに「彼らの欠点をどうやって直せばいいか」というものがあります。 ということで今回は、部下や後輩の欠点を直すためにどうやってアドバイスしたらいいか、についてお話ししたいと思います。 関根勤さんの教え方 バラエティ番組で、バイプレイヤーの地位を確立されている関根勤さん。最近は、彼がテレビに出ていない日はないのでは、と思えるくらい、色々な番組に出演されていますよね。 そんな関根さんが、2005年10月に『バカポジティブ』（新書版もあります）という書籍を出版されました。ネ
Photoshop（フォトショップ）で自然な雲を描く方法 | 楽してプロっぽいデザイン | Forty-N-FiveBlog
Photoshop（フォトショップ）で自然な雲を描く方法 下地となる空の色を決定します まず下地となる色を設定します。色は後からでも変更できますのでとりあえず空っぽい色を設定しておきます。 ブラシツールを選択します ソフト円ブラシ（輪郭がぼやけたようなブラシ）を選択し、200pxぐらいの大きさに設定します。 ブラシの詳細を設定していきます－手順1 ウィンドウより、ブラシを選択します。（F5でも可） ブラシの詳細を設定していきます－手順2 「シェイプ」部分を選択し、上記の通り数値を設定します。 ブラシの詳細を設定していきます－手順3 次に「散布」を選択します。同様に上記の通り数値を設定します。 ブラシの詳細を設定していきます－手順4 次に「テクスチャ」を選択します。テクスチャは「雲模様」というのを選択をします。あとは数値を下記の通り設定します。 ブラシの詳細を設定していきます－手順5 最後に
ユニクロはなぜ2ケタ増収を達成できたのか(プレジデント) - Yahoo!ニュース
■マイケル・E・ポーター【5 Forces】 ポーター理論の根底には「業界ありき」という考え方がある。まず業界に魅力があるか否かが大事であり、ポーターの提案した「5 forces」はそれを測るためのツールなのだ。 業界の魅力を重視する理由は、それによって企業が取るべき戦略が変わるからである。 魅力的な業界では、他社との違いを際立たせる必要はそれほどない。すでに業界として儲かる仕組みができているからだ。また、その業界のリーダー企業は、業界の魅力を損なわないよう振る舞わないといけない。わざわざ血みどろの戦いに持ち込んで業界の魅力度を下げることは避けるべきである。 一方、魅力のない業界では品質やコスト面（オペレーション効率）だけではなく、独自の戦略とイノベーションによる競争（戦略的ポジショニング）が一層重要になる。 いずれの業界でも重視されるポイントは、(1)他社とは異なる独自の価値提
このページの先頭へ、をちょこっとおしゃれに | S i M P L E * S i M P L E
ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長～いページだとそのリンクで一瞬に先頭に行ってしまい、読んでいる人が混乱することもよくあります。 そこでご紹介したいのが「するするるーーー」と先頭まで戻ってくれるJavascript。このブログでも導入してありますので是非体験してみてください。 ↑ ページの下の方でこの「↑」を押すとするすると上まで戻ります。 導入方法は簡単でJavascriptを導入し、「このページの先頭へ」リンクにonClickイベントを仕込むだけです。 仕込むJavascriptはこちら。ちなみに元ネタは「A (slightly) better technique for “Back to Top” links.」です。ページ内に書き込んでも、外部ファイルにしてもいいでしょう。 function backToTop() { var x1 = x2 = x3
効果倍増！ アクセス解析から見直す「企業情報」のあり方 | 基本編
一般的な「企業情報」コンテンツは これが最終型なのだろうか？「企業情報」は、ウェブではごく一般的なコンテンツだが、実際のサイトの姿となると幅が広い。 会社概要沿革組織事業所一覧（交通アクセス）などが標準的なコンテンツだが、業種や取引先、企業規模によっては、次のような情報まで掲載しているサイトも少なくない。 社長の挨拶ニュースリリースCM情報／イベント情報採用情報投資家情報社会／環境活動（CSR）調達情報これらの外国語版いずれにしても、根幹をなす会社概要や沿革については、多くのサイトが堅い印象に仕上げているようだ。 また、米国のサイトの企業情報と比較してみると、日本の企業情報に少ないものに「mission（使命）」がある。日本では「社長ご挨拶」が代わりの役割を果たしているのかもしれない。「沿革」にあたる「history」も長い文章になっていることが結構多く、英語が不得意な人にはくたびれるサイ
ウェブサイトの品質を判断する50のチェックポイント | コリス
Search Engine Journalのエントリー「50 Questions to Evaluate the Quality of Your Website」から、あなたのウェブサイトの品質を判断する50のチェックポイントの意訳です。 50 Questions to Evaluate the Quality of Your Website アクセシビリティ ナビゲーション デザイン 内容(コンテンツ) セキュリティ その他：テクニカル その他：マーケティング 法関連 アクセシビリティ コンテンツは、ナビゲーションから独立していますか？ ウェブサイトは、クロスブラウザに対応していますか？ ウェブサイトのコードは、正しいHTML/CSSを使用して、W3Cに準拠していますか？ Altは、画像にありますか？ 画像などマルチメディアで構成された箇所に、代替となるテキストベースの要素がありますか？
アクセシブルなサイトにするための26のステップ
Webmaster World.comのエントリー「アクセシブルなサイトにするための26のステップ」の意訳です。 26 Steps to a More Accessible Website スキップリンクは、キーボード操作をしている人のために目に見えるように設置する、というのにはなるほど、と思いました。 Altのテキストと代替の内容 画像にはAltを記述し、代替の内容を記す。 動画のキャプションや概要 動画の内容・概要・サマリーなどを記す。 「ここをクリック」は使用しない リンクには的確な情報を含める。 リンクの間のスペース 隣接したリンクには、区切りを設置する。 JavaScriptで記述したリンク リンクの記述は、JavaScriptに依存させない。 lang属性の使用 lang属性を使用して、使用言語を明示する。 アニメーションは使用しない ユーザーの気を散らせない。 色に依存しない
検索パターンから見るユーザー行動「Search Patterns」:マーケティング - CNET Japan
今回取り上げるPeter Morville氏の「Search Patterns」は、ウェブサイトにおけるユーザー行動の1つである「検索」の利用方法を体系的にまとめたものだ。 Morville氏は、Semantic Studios社のCEOであり、著書に「アンビエント・ファインダビリティ」「Web情報アーキテクチャ」などがあり、ウェブ情報アーキテクチャにおける第一人者として広く知られている。写真共有サイト「Flickr」のほうにも、彼のコレクション「Search Patterns」を見ることができるのでそちらも参照してほしい。 まず、「Search（検索）」と言っても、さまざまな側面を持つ。Patterns（パターン）、Futures Studies（未来の研究）、Interaction Design（インタラクションデザイン）、 Information Architecture（情報アーキ
グーグルの「1000ページの壁」を破るsite:やurl:検索の使い方 | Web担当者Forum
大規模なウェブサイトのSEOをやっていて不満を感じるのは、グーグルが検索インデックスのごく一部しか見せてくれなくて、もっと多くの検索結果を見ようとすると、すごく難しいっていうことだ。 Webmaster Toolsを使っていても、グーグルのインデックス検索はウェブ検索と同じ仕組みで作られているから、どんな検索結果であろうと最初の1000ページ分しか見られないようになっているんだよね。 1万ページ以上がインデックス化されてるサイトを手がけている場合、この「1000ページの壁」が立ちはだかることがあるんだ。これは、SEO担当者がページを見つけてもらおうと努力していても、複製コンテンツと闘っていても、「robots.txt」の変更点を確認したり最先端のインデックス操作を施したりしていても関係ない。 では、インデックスをより深く掘り下げ、全体像をきちんと見るためにはどうすればいいんだろうか？ ツー
このページはなぜ検索結果で上位にあるのか？ を調べる方法 | Web担当者Forum
サイトやページが良い順位を獲得している理由を分析するとき、僕は主に次のような点を調べている。 Page Strengthのスコアはどうか。概略をぱっと見るのに良い。2位にランクしたBruceのページは6.5だ。Yahoo! Site Explorer（Yahoo! USのアカウントが必要）を使い、ドメイン名へのリンクを見る。Bruceのサイトには4万1314件のリンクがある。上位200件から300件についてユニークドメイン名の数をチェックする。Bruceのサイトの場合、上位250件のうちだいたい50％がユニークドメイン名からのリンクだと推定される。質の高いリンクと質の低いリンクの割合。たいてい手作業で調べる。リンクを張っている人とその理由（自然発生的なものか、不正に操作されたものか、お金を払ったものか）。これも手作業で調べる必要がある。アンカーテキストを確認する（このツールは必須）。「se
CSS記述規則「プロパティ別整理法」の提案 : akiyan.com
2005-03-06 はじめに 2005-03-05 提案の目的 2005-03-07 必須ツール 2005-03-06 注意点 2005-03-11 多くのCSSは図書館方式で整理されている 2005-03-06 図書館方式の例 2005-03-07 図書館方式の利点 2005-03-11 図書館方式の欠点 2005-03-04 図書館方式の何が不満か 2005-03-06 プロパティ別整理法とは 2005-03-04 絶対規則 2005-03-04 推奨規則 2005-03-06 プロパティ別整理法の例 2005-03-11 プロパティ別整理法の利点 2005-03-04 プロパティ別整理法の欠点 2005-03-04 プロパティ別整理法に近い例 2005-03-04 機械との親和性 2005-03-04 Grep検索を活用する 2005-03-04 機械が完全に理解できる 2005-
ブログのユーザビリティを高めるための20の秘策 | P O P * P O P
良いブログとそうでないブログの違いは何だろうか？そう思ったTomさんがまとめたのが今回ご紹介する「Twenty Usability Tips for Your Blog （ブログのユーザビリティを高めるための20の秘策）」です。 もちろんこれが100%正しいというわけではないですが（彼もそう言っています）、とても参考になりますね。ブログのリニューアルを検討されている方には役立つのではないでしょうか。 ではその20の秘策を以下に詳しくご紹介。 ブログのテーマを決めよう ブログのテーマを決めたらそれに関する投稿にフォーカスしよう。そしてロゴの近くにそのテーマが何であるかわかるようにしよう。またそのテーマに関する簡単な説明もすぐそばに置くようにしよう。 これは奇妙に思えるかもしれませんが、実際のところ、テーマを広くとるよりも、一つテーマを決めたほうがたくさん書くことができますよ。 コメントを推奨
ウノウラボ Unoh Labs: ECサイトのユーザビリティ・ガイドライン
こんばんわ、Sashaです。 最近、ECサイトのリニューアルを計画するお手伝いをする、という仕事がありました。特にユーザビリティ的な観点から、どんなことを網羅したらこのリニューアルを成功させることができるだろうか、ということを考えながら、様々なブログを参考にしたり実際のECサイトを検証したりしていたら、以前私が紹介したユーザビリティ・ガイドラインのようなチェックリスト的なものが出来上がったので、もしかしてどこかのだれかのお役に立つこともあるかもしれない、と思い、ここに紹介させていただきます。 まず、ECサイトで実現したい基本的な目標をあげ、その目標に沿って細かく、網羅していきたい事を列挙していきました。 基本的な目標とは、次の5項目です。 見つけたい商品・情報を見つけやすくする ユーザーの労力を極力削減する 買いたい気にさせる 購入までのプロセスを簡単にする オンラインショッピング
第6回 サイト価値を最大化するためのトップページ設計術?4パターンの訪問者を想定して作る|Web担当者Forum
第6回 サイト価値を最大化するためのトップページ設計術 ～4パターンの訪問者を想定して作るトップページデザイン 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題がおきないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） トップページ設計において考慮すべき 4つのユーザー利用シーントップページの設計やデザインは、ウェブサイトの構築を行ううえで、最も難しいポイントの1つだろう。構成するコンテンツの多さに加え、さまざまな制約やこだわりなどによって、四苦八苦したことのある方も多いのではないだろうか。 そんなときに重要なのは
優れたユーザインタフェースを設計する際に考慮する8つのポイント
ユーザーにとって有益なユーザインタフェースを設計する際に考慮する8つのポイントをUsability Postから紹介します。 8 Characteristics Of Successful User Interfaces 以下、その意訳です。 ユーザインターフェイスの設計時に、考慮する8つのポイントを紹介します。 Clear Concise Familiar Responsive Consistent Attractive Efficient Forgiving To conclude… 1. Clear 明快 明快であるというのは、最も重量な要素です。 ユーザインターフェイスデザインの目的は、ユーザーに意味と機能を伝え、利用するアプリケーションと相互につきあえるようにすることです。そのアプリケーションがどのように機能するのか、どこに進むべきか理解することができない時は、ユーザーは困惑しが
Lucky bag::blog: CSS だけで Mac OS X の Dock 風ナビゲーション
Paul Armstrong Designs - Weblog - CSS マウスオーバーした時にグニュって拡大する Mac OS X の Dock っぽい動きを CSS だけで実現させるってアイデア。このギミックがユーザビリティ的にどうかは置いておくとして、隣接セレクタを使ってフォントのサイズを段階的に変えるってのは面白いなぁ。試しに自分でもサンプルを作ってみた。ちなみに動作するブラウザがかなり限定されしまい、 隣接セレクタ未対応の IE はもちろん、Opera や Safari でもうまく動作しない。まぁほぼ Gecko オンリーって感じ。 対応ブラウザ Firefox 等の Gecko 系 Internet Explorer 7 beta 2 テキストをズーム CSS だけで Mac OS X の Dock 風ナビゲーションのサンプル その 1 li { font-size: 1em
サイト公開前に役立つ２５のユーザビリティチェックリスト:phpspot開発日誌
25-point Website Usability Checklist | User Effect サイト公開前に役立つ２５のユーザビリティチェックリストが公開されていましたのでメモしてみました。 サイトの公開前にチェックリストとして使うといいかもしれません。 アクセシビリティ 1. ロード時間が速いか？(60KBぐらいがベター) 2. テキストと背景のコントラスト調整(差異が低く見にくくないか) 3. フォントサイズが読みやすいサイズか？行間、文字間は適切か？ 4. Flashやアドオンは控えめか？ 5. 画像に適切なALTタグが指定されているか？ 6. カスタマイズした404ページがあるか？デフォルトは非常に不親切 7. カンパニーロゴが分かりやすい位置におかれているか？ 8. キャッチフレーズが適切に設定されているか？ 9. 5秒で大体どんな内容が分かるものになっているか？ユーザは
パンくずリストのマークアップを色々考えてみる
久々普通のエントリーだ。 なんか、デジパの中の人が、Web標準の日々に出ちゃうらしいです。 この人→ネットのサラダボウル: Web標準の日々に参加します。 皆色々やってるなぁ～、ボクも負けてられんなぁ～ ソレとは関係ないけど、デジパの社員は半分くらいの人がブログ書いてるんすけど、Ｂ to Ａ 赤坂で働くWebコンサルタントの日記とかのエントリーで逆立ちって。。。。 皆色々やってるなぁ～、ボクも負けてられんなぁ～ さて、そろそろ本題に。 以前のエントリーでパンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種ってのを書いたんだけど、その後色んなサイトで書かれてたパンくずリストのエントリーや、コーディングコンテストのソース覗いてたりして、今後どうやってマークアップしてこうかなぁ～って悩んでた今日この頃。 そんな訳で、良いか悪いかは別として色々考えてみた。 ul要素でやってみ
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rendur 2.4
3 Minutes Networking
http://e0166nt.com/blog-entry-674.html
訪問者を寄せ付けないWebサイトにならない為の10のチェックリスト*ホームページを作る人のネタ帳
[CSS]ナビゲーションやフォームなどを実装するサンプル集 -CSS Portal
Breadcrumb CSS - Appleに習うパンくずデザインCSS - youmos