タグ

Web制作に関するblanc2005のブックマーク (276)

  • FLASHユーザビリティ3原則 (ユーザビリティ実践メモ)

    FLASHによるWebコンテンツは、ビジュアルでの表現力が高く、最近はサイト全体をFLASHで構築する例もかなり多くなってきました。しかし、通常のHTMLと比べてインターフェース作成の自由度が高いため、非常に使いにくいサイトになってしまう可能性もあります。 今回は、FLASHコンテンツを設計する上で気をつけたいユーザビリティ上の3つの原則をご紹介します。 ユーザがウェブサイトを利用する上で最も頻繁に利用するブラウザの機能が「戻る」です。 弊社で実施したユーザ行動観察調査では、FLASHコンテンツの場合でも一つ前の表示画面へと戻そうとする場合、ブラウザの「戻る」ボタンを押すケースが非常に多く見られます。これは、FLASH画面内に「戻る」ボタンが設置されていても同様でした。 この問題への対策として、「表示画面ごとにURLを設定する」ことが効果的です。ブラウザはURLでページを管理しているので、

  • WebデザイナのためのiPhoneアプリ40 | エンタープライズ | マイコミジャーナル

    SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Sean P Aune氏がSitePointにおいて、40 Essential iPhone Applications For Web Designersのタイトルのもと、Webデザイナ向けのiPhone / iPod Touchアプリケーションを紹介している。Webデザイナの作業はある程度手法が確立されてはいるものの、インスピレーションが重要な職業であることも間違いのないところだ。40 Essential iPhone Applications For Web DesignersではもしPCがない場所でインスピレーションが沸いたときどうすればいいかと切り出し、iPhone / iPod Touchがその時にはメモをとったりカラーパレットになった

  • Webデザイナの労力を減らすCSS3の新機能 | エンタープライズ | マイコミジャーナル

    Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Inayaili de Leon氏がSmashing MagazineにTake Your Design To The Next Level With CSS3のタイトルのもとCSS3を積極的に使っていってはどうかという内容の記事を公開した。いつまでもあまり簡単とはいえないCSSハックを駆使したり、JavaScriptに依存した使い続けることに意味があるのか、というわけだ。 ただ、逆説的だが、妥当検証を通過できなくなるしブラウザごとに設定を追加する必要があるので使わない方がいいことはわかっているものの、Take Your Design To The Next Level With CSS3の冒頭ではまだ

  • メンテナンス中画面を出す正しい作法と.htaccessの書き方 | Web担当者Forum

    今回は、Webサイトやサービスをメンテナンス中にする場合に、どのURLにアクセスしても「メインテナンス中です」の画面を出す正しいやり方を、人間にも検索エンジンにも適切にする作法を主眼に解説します。 この週末の土曜深夜~日曜早朝にかけて、データセンターの設備メインテナンスのため、Web担を含むインプレスグループのほとんどのWebサイトが、どのURLにアクセスしても「メンテ中です」という表示になっていました。 なのですが、その実装がちょっと気になったので、「正しいメンテナンス画面の出し方」を説明してみます。 ※2010-01-16 Retry-Afterを指定するHeaderの指定を修正しました(コメント参照) ※2009-06-17 RewriteCondから [NC] 条件を削除しました(コメント参照) ※2009-06-16 Retry-Afterの記述をGMTに変更しました(コメント参

    メンテナンス中画面を出す正しい作法と.htaccessの書き方 | Web担当者Forum
  • Yahoo!検索の「ユーザーインターフェース設計」

    分業による効果 一般的なデザイン作業において、下記のようなデザイン作業の上流部分をごく限られた人数で行い、そこから先の展開部分を大人数で行う方法を取る場合が多いと思われます。 インタラクションの設計 ビジュアルの設計 主要要素のHTMLマークアップ・CSSコーディング設計 しかし、モジュールの概念を取り入れることにより、デザイン作業の上流部分から分業を行うことが可能になります。 作業者のスキルやサービスへのコミット具合によって、多少ぶれる場合もありますが、そこはサービスの全体的なルールや作業時の補助ツールによってコントロールを行うことが可能です。 そのため、モジュールの命名規則や運用ルールについては、あらかじめドキュメントを作成した上で、ある程度厳密に運用を行う必要があります。 コミュニケーションの効率化による効果 最初にインタラクションの設計時に命名したモジュール名や要素名を、ビジュアル

    Yahoo!検索の「ユーザーインターフェース設計」
  • Webレイアウトの選び方、ディスプレイ解像度の変遷 | エンタープライズ | マイコミジャーナル

    Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Kayla Knight氏がSmashing MagazineにFixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?というタイトルでWebデザインにおいて固定レイアウト、流動的なレイアウト、伸縮性のあるレイアウトのどのレイアウトを採用すればいいかという指針をまとめている。Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?で説明されている内容は次のとおり。 固定レイアウトと流動的なレイアウトの違い (固定レイアウトは幅をピクセル指定で固定長に、流動的

  • 問合せを最低限に抑えるサポート運営術 : LINE Corporation ディレクターブログ

    こんにちは。 yyclub、youbrideのサポート担当の伊藤です。 以前より「ユーザーサポート」という業務について、問合せの対応や業務の内容をちょこちょこと書かせていただいています。 今回は「ユーザーサポート」という業務の中でもメールや電話での対応についてではなく、"問合せを最低限に抑えるサポート運営術"について書いてみたいと思います。 「運営術」などというと大げさな表現になってしまいますが・・・こちらで書いていることはごく基的なことかと思います。 ですが、そのごく基的なことが最も重要な点でもあると思います。 私が担当するサイトはコミュニティサイトで、そこには、「感謝の声」や、「お叱りの声」、「不安の声」と様々な声が届けられます。 日々寄せられるそれらの声の中から「不安の声」をまずは一例としてご紹介します。 今回その不安の声が多く寄せられたのが「年齢確認」実施の時でした。 【01】

    問合せを最低限に抑えるサポート運営術 : LINE Corporation ディレクターブログ
  • Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法

    Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 関連書籍 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。 アドバイス スタティックなリソースは全て、積極的にキャッシュにセットします。 時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ

  • HTML/CSS/RSSの妥当性を検証する14のツール | エンタープライズ | マイコミジャーナル

    SitePoint: New Articles, Fresh Thinking for Web Developers and Designers WebサイトやWebアプリケーション、Webサービスを開発する作業工程のひとつに、作成したHTMLCSSRSSが適切なマークアップになっているかどうかを検証する工程がある。検証に活用できるツールやWebサービスはいくつかある。Sean P Aune氏がSitePointにおいて14 Free Tools To Validate Your HTML, CSS & RSS Feedsという記事をアップしたためチェックしておきたい。検証に使える14のFirefoxエクステンションやWebサービスが紹介されている。 14 Free Tools To Validate Your HTML, CSS & RSS Feedsで紹介されているエクステンション

  • Webサイトを作ったらまずやるべきことチェックリスト | Web担当者Forum

    今日は、Webサイトを作ったらまずやるべきことのチェックリストを紹介しましょう。サイトは作るまでも大切だけど、作ってからのアクションも同じかそれ以上に大切。 すでにサイトを運営している人は、やってないものがないか確認してみましょう。 サイト運営日記をスタートする(変更点を日付と一緒にメモしていく)XMLサイトマップを作って更新内容が含まれるようにするGoogleウェブマスターツールにサイトを登録する → https://www.google.com/webmasters/sitemaps/XMLサイトマップを登録するURLのwwwあり/なしの統一を指定するサイトリンクの表示をチェックして調整(以降随時)Yahoo!サイトエクスプローラーにサイトを登録してXMLサイトマップを登録する → http://siteexplorer.search.yahoo.co.jp/live Webmaste

    Webサイトを作ったらまずやるべきことチェックリスト | Web担当者Forum
  • URL最適化5つのSEOポイント | エンジニアのためのSEO入門

    前回の記事では検索エンジン全体の仕組みをおさらいし、その中でもクローラーの動きに着目しました。最新の情報を検索結果に反映させるためには、クローラーになるべく多くの回数自社サイトを訪問してもらい、ページの内容を適切な情報としてインデックスしてもらう必要があります。 このインデックスの際に重要なのが、サイトに対するクローラーの回遊性「クローラビリティ」です。クローラビリティを向上させる要素の1つとして、URLの最適化があげられます。SEOには、キーワードやカテゴリの設計、HTMLの最適化、外的施策などさまざまな対策が考えられますが、その中でもURLの最適化は、最も重要な要素の1つです。いくら他の対策が完璧でも、URLの設定によってはいい効果が期待できません。 一口にURLの最適化といってもさまざまです。この連載では、以下の3つの方法を説明していくことにしたいと思います。 永続化 ←この記事で解

    URL最適化5つのSEOポイント | エンジニアのためのSEO入門
    blanc2005
    blanc2005 2009/05/31
    「ハイフンの前後の単語は個別のキーワードとして認識されます。逆に、アンダースコアは前後の単語を連結するので、アンダースコアも含めた1つのキーワードとして認識されます」むむむ
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • Webサイトをデザインする5つの作業手順 | エンタープライズ | マイコミジャーナル

    SitePoint: New Articles, Fresh Thinking for Web Developers and Designers 新しくWebサイトを構築する場合、大きくわけて、顧客、プロジェクトリーダ、Webデザイナ、Webデベロッパ、場合によってはデザイナとデベロッパの中間を担当するコーダといった役柄で仕事を回す。大規模なプロジェクトになればデータベースであったりインフラ、ネットワーク、デプロイなどなど、要所ごとに担当が増える。逆に小規模なプロジェクトや、1、2名で回すプロジェクトでは、Webサイトデザインも開発も同じ人が担当することになる。 WebデザイナはWebサイトの構築手順の典型的な作業プロセスについては知っているだろう。しかしWebデベロッパがデザインも兼任することになった場合、作業プロセスがよくわからないため、とりあえずDreamweaverやPhotosh

  • 複製コンテンツが本当に問題になるケース | Moz - SEOとインバウンドマーケティングの実践情報

    複製コンテンツに対するペナルティなどというものは存在しない、これが経験豊かなSEOマーケターたちにとって一般的な通念だ。一般原則としてこの考えは正しいが、例外もある。言い換えると、特定のケースにおいては複製コンテンツに対するペナルティが確かに存在する。今回の記事ではそのことについて説明していく。 一般の通念重ねて言うが、複製コンテンツに関してSEOマーケターたちが持っている通念というものは、ほとんどの場合正しい。それは、次のようなものだ。 複製コンテンツは同一サイト内、あるいは異なるサイトにまたがって発生し得る。 まったく同じ内容でなくても、あるページが他のページの複製コンテンツだと見なされる場合もある。 検索エンジンはインデックス内の特定のコンテンツについて、1つのバージョンだけを検索結果に表示したいと考えている。これは検索エンジンにとって根的な命題だ。なぜなら、もしユーザーが検索結果

    複製コンテンツが本当に問題になるケース | Moz - SEOとインバウンドマーケティングの実践情報
  • グーグルの検索順位を決定する4要素――重要度が増えたのは? 減ったのは? | Moz - SEOとインバウンドマーケティングの実践情報

    各評価基準を簡単に分析してみると、こんな感じだ。 ホストドメインの信用度/オーソリティこの要素については、「Florida」アップデート(2003年11月)まで、ほとんどのSEO業者が真剣に考えていなかったと思う。でもFloridaアップデートの後、あっという間に大勢が知るところとなった。その後じわじわと影響力を強めてから、この2年で再び重要度が急上昇し、グーグルで高い検索順位を得る上で支配的な要因となった。 ただし、「キーワードに完全一致するドメイン名+さまざまなルートドメイン名からの大量のアンカーテキスト」といった手法ではもう、WikipediaAmazon、BBCに時たま顔を出すページを凌ぐことはできない、と言っているわけじゃない。要は、こういったオーソリティサイトが一段と重んじられるようになったということだ。 僕らはつい数日前から、Technoratiのようなオーソリティサイトの

    グーグルの検索順位を決定する4要素――重要度が増えたのは? 減ったのは? | Moz - SEOとインバウンドマーケティングの実践情報
    blanc2005
    blanc2005 2009/04/26
    昔の記事も合わせてチェック!
  • TechCrunch | Startup and Technology News

    Welcome to Startups Weekly — Haje‘s weekly recap of everything you can’t miss from the world of startups. Sign up here to get it in your inbox every Friday. Well,…

    TechCrunch | Startup and Technology News
  • Webサイトを“速く”表示させる7つの計測ポイント(1/2) - @IT

    株式会社ライブドア マークアップエンジニア 浜 俊太朗 2009/3/24 FirefoxやYSlowを使ってWebサイトの問題点を探るには? ライブドアブログを速くした著者が7つのポイントを伝授します(編集部) Webサイトは“見た目”が重要なのは当たり前だが…… 皆さんはWebサイトを作るときに、どのようなことを意識していますか? デザイナや主にHTMLのコーダー/マークアップエンジニアと呼ばれる職種に就いている人は、やはり“見た目”を強く意識しているのではないでしょうか。 例えば、複数のWebブラウザで同じか近い表示になるようにとか、リリース後の更新業務によって表示崩れが起きないように、などです。もちろんそれは職種の適性として正しいものですが、実はほかにも意識した方がよい重要な要素があるのです。 良い印象を与えるには、“速度”も重要 Webサイトを見たユーザーが、良い印象を受けるのか

  • ウェブページの高速化に必要なもの

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、オークション事業部のさかいです。 ネットサーフィンに慣れている techblog 読者のみなさんの中には、あちこち見て回っているうちに重いページに行き当たり、イライラしながら応答を待ったり、容赦なくバックスペースキーで前のページに戻ったり…という経験をされた方が多くいらっしゃると思います。 そういったストレスのないレスポンスが行えるよう、バックエンドのプログラムの最適化や、サーバーのチューニングを行うのは私たち技術者の仕事のひとつです。 しかし、あるウェブサイトにアクセスして、そのサイトを閲覧できる状態になるまでの時間のうち、そういったバックエンドでの処理に必要な時間は 1〜2 割でしかないというデータがあります。残り

    ウェブページの高速化に必要なもの
  • ウェブデザインにおける効果的なコミュニケーションの取り方

    ウェブデザインにおける明確で効果的なコミュニケーションの取り方をSmashing Magazineから紹介します。 Clear And Effective Communication In Web Design 下記は、簡潔に意訳したものです。 1. コミュニケーションのアプローチ方法 ウェブサイトの来訪者とコミュニケーションを取るためのアプローチ方法をいくつか紹介します。 テキスト 見出しやコンテンツ内にかかわらず、来訪者はテキストをメッセージとして受け取ります。コミュニケーションにおいて、極めて重要な要素です。 画像 画像は、テキストよりもすばやくメッセージを伝えるときがあります。画像を作成する際は、メッセージを魅力的に伝えられるようにします。 タイトルとヘッダ タイトルとヘッダは、来訪者に主要なポイントと考えを伝える重要で効果的なものです。 アイコン アイコンはウェブデザインの特徴的

  • http://www.designwalker.com/2009/01/speedup.html

    http://www.designwalker.com/2009/01/speedup.html