タグ

web designに関するitochanのブックマーク (38)

  • タルタロス:リバース

    

    itochan
    itochan 2014/06/22
    このサイトはすごく見づらい
  • はてなブックマークウィジットが重いので差し替えました | ネットの海の漂流者

    ウェブサイトの速度を測定するウェブサイトの表示速度をチェックするツールはいくつかあるけど僕はPingdom ToolsWebPagetestあたりをよく使う。これらのページはウォーターフォールチャートといってサイトの各パーツの読み込み順や読み込み速度を視覚的に分かりやすく表示する機能があるので、速度改善のヒントになる。はてなブックマークウィジットが重いここ数日朝昼晩と速度測定を行った所、はてなブックマークウィジットの表示に2秒ほどかかっていることが判明した。はてなブックマークウィジットというのは、ブログのサイドバーとかでよく見かける、人気記事を表示するブログパーツだ。こいつはjavascriptで動いているのだが、動的に記事を取得しているため表示速度が速度が遅い。そこでPHPで静的htmlを出力し、サイドバーにincludeする形で速度改善をすることにした。最初はwordpressrss

    itochan
    itochan 2012/08/14
    利用者側としてはこういうのいいねと思うけれど、利用規約とかどうなってるんだか面倒っちい気がする
  • 改行と折り返しの違い - 電脳如是我聞の逆襲

    数日後といいながら、数週間経ってしまうのが、メモ8ブログ時間。ううう。というわけで、日語の書き方についてである。連載である。前回はこちら。 今回は予告した「改行」の話。 商用サイトでは(とは何かという問題は別として) そんなにないけれど こういう書き方をするブログは多い。 つまり折り返し位置を自分で決める書き方。 句点の代わりに折り返すパターンが多いような。 それが必ずしも悪いと言っているんではないんだが、ちょっとどうなのと思うことが多い。高島学は「MMA PLANET」では折り返し位置未指定でベタに流し込むのに、ファイト&ライフの連載だとこういう書き方をする。ひょっとして、これが詩的であるとか思っているんではないか。 あたし彼女 さすがに古いだろ みたいな いや、別にそれはそれで効果が上がる場合もあるんだが、自分はそういう書き方はしない。上記の書き方だと、サイトの設定と読む側の環境次第

    改行と折り返しの違い - 電脳如是我聞の逆襲
    itochan
    itochan 2010/08/20
    固定幅かリキッドか次第であって、2カラムか3カラムかは関係ない >一般的に、ブログの場合は、3カラム(略)だと、内容表示欄の横広がりにストッパーがかかっているが、2カラム(略)だと、横に広がって
  • http://twitter.com/hOnozuka/status/7779483003

    http://twitter.com/hOnozuka/status/7779483003
    itochan
    itochan 2010/01/15
    んだんだ / Silverlightも二の舞になるかもね
  • 「全国大学サイト・ユーザビリティ調査2009/2010」発表、1位は3年連続で徳島大学 | Web担当者Forum

    日経BPコンサルティングは、大学サイトのユーザビリティを横断的に評価した「全国大学サイト・ユーザビリティ調査2009/2010」を12月22日に発表し、調査報告書の販売を開始した。調査の結果、165大学中で最も使いやすい大学サイトは、3年連続で徳島大学だった。 調査は、全国165の大学サイトのユーザビリティ(使い勝手)を、全64項目の調査項目に従って調査員が大学サイトを閲覧して行われる。トップページが使いやすいか、受験生を中心に大学サイトのターゲットが必要な情報を探しやすいか、視覚障害者など誰でも使えるサイトになっているか、サイト内での個人情報保護に対する大学側の姿勢はどうかなど、7つのカテゴリ(診断軸)に分けてチェックした。今回から新たに「ブランディング」のカテゴリを追加している。 6回目となる今回の調査では、総合スコアのベスト3は、徳島大学(国立)、沖縄国際大学(私立)、大阪府立大学

    「全国大学サイト・ユーザビリティ調査2009/2010」発表、1位は3年連続で徳島大学 | Web担当者Forum
  • ウェブデザインの見栄えをよくするための7つのキーワード | コリス

    7 Key Principles That Make A Web Design Look Good下記、そのポイントを意訳したものです。1. バランス2. グリッド3. カラー4. グラフィック5. タイポグラフィ6. ホワイトスペース7. コネクションおわりに1. バランスバランスで一番大切なことは、デザインが一方向に偏らないことです。対称あるいは非対称のものでもウェイトにはバランスをおくようにします。実例: Subtractionこのグラフィックの重要なポイントは右のクロスです。このクロスはビジュアルのウェイトに大きな影響を与えています。 この小さなクロスがどれだけグラフィックのバランスに効果があるかは、あなたの手でクロスを隠して見てください。これが非対称のバランスと呼ばれるものです。ビジュアルのサイズやカラーをコントロールし、ウェイトを調整することができます。 仮にクロスのカラーがオ

  • 名刺にメールアドレスではなくWaveアドレスを書く時代がすぐそこに? - アンカテ

    Wikiを更地から再構築したら Google Waveはいろいろな顔を持っていて、これが何であるかについていろいろな意見が出ると思うが、私は、まずは「更地から再構築したWiki」であると見るべきだと思う。 つまり、「一つの文書を複数の人が共同で編集する」ということに、理論的なモデルを与えることで、以下の特性を加えたものだ。 リアルタイム性(一文字単位で更新が反映される) スケーラビリティ(世界中の人が同時に乗っても大丈夫) 拡張性(地図や動画やチェス盤などいろいろなガジェットを貼れる) 技術的には、Google Wave は、非常に良くできた Wiki ではあるが、目新しいことは何もない。しかし、Google Wave には、もの凄いイノベーションが含まれていて、それは「メールは特殊なWikiである」という、全く新しいものの見方である。 メールとは対話ログの共同編集 メールとは普通に考えれ

    名刺にメールアドレスではなくWaveアドレスを書く時代がすぐそこに? - アンカテ
    itochan
    itochan 2009/06/01
    (雑感)waveは離散型SNSであって、コミュが運営できて、また(日本では社会問題になっている)プロフサイトとして使えるということらしい
  • Google, Matt Cuttsによるrel=”canonical”タグの解説ビデオ

    Matt Cutts(マット・カッツ)氏による「rel=”cannonical”」タグの解説ビデオが、GoogleがYouTubeに開設したばかりのGoogle Webmaster Help Channelにアップされました。 こちらは、プレゼンテーションに使われたスライドです。 「rel=”canonical”」タグは、まだ導入されたばかりの新しい仕組みなので、理解度を深めるために重要と思われるポイントをお伝えします。 まず、「rel=”canonical”」タグを使う前に、できる限り重複コンテンツを防ぐために実行すべきことがあります。 望んだURLだけを生成するようにCMS(Content Management System)を構成しておく ※CMSは1つのページにいろいろなURLを割り当てることがある。たとえば、カテゴリ、月別アーカイブ、プリント用ページなど。 正規化した1つのURL

    Google, Matt Cuttsによるrel=”canonical”タグの解説ビデオ
    itochan
    itochan 2009/03/30
    rel=”canonical” タグや要素というより(linkの)属性な気が。
  • 「重複コンテンツ・重複URL」のおさらい

    GoogleYahooMicrosoftの大手検索エンジンが、重複コンテンツ問題解消のために「rel=”canonical”属性」を共通で導入することになりました。 『rel=”canonical”の正規化で、重複コンテンツを撃退』 いいタイミングなので、「重複コンテンツ」についておさらいしておきましょう。 「重複コンテンツ(英語では”duplicate content“)」とは、ページの内容(=コンテンツ)がまったく同じにもかかわらず、URLが異なるWebページのことです。 僕たち人間のユーザーにとっては、普通は問題になりません。 しかしコンテンツが同じでもURLが違ければ、サーチエンジンは、独立した別々のページとして認識します。 サーチエンジンは、ダブっているとみなしたページを、SERPに表示しないようにフィルタリングし(ペナルティではない!)、代表と判断したページだけを表示します

    「重複コンテンツ・重複URL」のおさらい
    itochan
    itochan 2009/03/30
    URLデザインの話
  • 東京新聞:色弱者にも優しいデザインを 見やすさひと工夫 国・自治体・企業へ普及の動き:暮らし(TOKYO Web)

    交通案内図や商品パッケージなど、カラフルな表示が身の回りにあふれる。一方で、色の見分けがつかないと内容が理解できない表現も増え、色弱の人にとって逆に不便になっている。NPO法人の先導で、国や自治体、企業にも色覚の「ユニバーサルデザイン」を普及させる動きが広がっている。 (山哲正) 色弱者は国内に推計約三百万人。男性の二十人に一人、女性の五百人に一人いるとされ、世界では二億人を超す。遺伝子変異のタイプによって色の見え方が異なり、治療法もない。ほかに白内障などで色覚が変わる人もいる。 色弱者は、赤い文字と黒い文字の見分けが付かない場合が多い。紫と青、赤と緑なども混同しやすいパターンだ。色弱者を助けようと、カラーコーディネーターや医学者らを中心に二〇〇四年設立されたNPO法人「カラーユニバーサルデザイン機構」(CUDO、東京都杉並区)は「多様な色覚の人々に使いやすい色彩環境を」と呼び掛ける。企

    itochan
    itochan 2009/03/28
    カラーアクセシビリティ 富士通のなんとかいうソフト(無料)でテストすればいいやつ?
  • ご指定のページのアドレスは変更されているか、更新作業中です|船橋市公式ホームページ

    itochan
    itochan 2009/03/26
    手打ちなのか…がんば!
  • フロートとネガティブマージンまとめ:CSS | Tech de Go

  • rel="canonical" などを利用して正規ページを指定する方法 | Google 検索セントラル  |  ドキュメント  |  Google for Developers

    フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 rel="canonical" などを利用して正規ページを指定する方法 重複ページまたは非常に類似したページの正規 URL を指定する場合、いくつかの方法で Google 検索に優先事項を伝えられます。正規化に対する効果が高い順に、以下の方法があります。 リダイレクト: リダイレクト先が正規ページになるべきことを強く示すシグナルです。 rel="canonical" link アノテーション: 指定された URL が正規ページになるべきことを強く示すシグナルです。 サイトマップに含める: サイトマップに含まれる URL が正規ページになることを示しますが、シグナルとしては弱いものです。 これらの方法を組み合わせて使用するとより効果的です。 2 つ以上の方法を使用すると、希望する正規 UR

    rel="canonical" などを利用して正規ページを指定する方法 | Google 検索セントラル  |  ドキュメント  |  Google for Developers
    itochan
    itochan 2009/03/20
    これとセットで読む→ Google と相性の良い URL の作成 http://www.google.com/support/webmasters/bin/answer.py?hl=jp&answer=76329&topic=15261
  • セキュリティホール memo - 2009.03.18

    》 FAQ:「Conficker」ワームによる4月1日攻撃の可能性--その実態と対策 (CNET, 3/31)。CNET オリジナルの FAQ みたい。訳の質はいまいち。 関連: 「WORM_DOWNAD」(ダウンアド)ファミリ発症日:2009年4月1日を控えたセキュリティ対策確認 (トレンドマイクロ セキュリティ blog, 3/31)、WORM_DOWNAD.KK URLs (トレンドマイクロ) Conficker Hype Used by Rogue Gangs (F-Secure blog, 3/30) When will it start? (F-Secure blog, 3/31) Containing Conficker (uni-bonn.de)。conficker scanner とかあり。 》 事故米転売「被害者・美少年酒造」が三笠側から裏金30年 (読売, 3/31)

    itochan
    itochan 2009/03/17
    ああ、この視点は忘れていた。ここで改めて覚えておく >リアル Web サイトがシェア No.1 の Web ブラウザに最適化されているのはあたりまえ
  • 色盲の人にもわかるバリアフリープレゼンテーション法

    「色覚障害」とも呼ばれる「色盲」は黄色人種では男性の20人に1人(5%)、女性の500人に1人 (0.2%)に見られます(白人では男性の8%、黒人では男性の4%)。上記調査同時期の日人男性は6,111万人、女性は6,359万人(平成8年 10月現在)ですから、色盲の人は約318万人となり、身体障害者の総計を越える数となっています。色盲は世界的にはAB型の血液型の頻度に匹敵し、極め てありふれた存在なのです。小中学校の40人学級(男子20人)の各クラスに必ず1人、男女100人の講演会場では、2~3人の色盲の聴衆がいるという計 算になります。社会的な差別や偏見といった過去の経緯から自分が色盲であることを隠す人が多いことや、色盲であっても実際にはかなりの色を不自由なく見分 けられることから、これまで色盲の人が色に関する不便を積極的に訴えることは少なかったと言えます。そのため、色盲がこのようにあ

  • ナビゲーションと広告は峻別すべき (agenda)

    ナビゲーションとは何か、そしてそれは「分離」すべきなのか (agenda)が抽象的すぎるので補足。まずは最初の段落から。 しかしながら、製作者側はユーザーの目的を正確に知ることができない。知っているのはユーザーがそのハイパーテキストノードを閲覧しているという事実だけであり、そこから目的地を推測するしかない。この時推測される目的地は、正にそのハイパーテキストノードと深く関係しているはずだ。そして、そのようなリソースへのリンクを提供することは、ハイパーテキストシステムにおける各ノードの主要な役割である。真のナビゲーションに接近する方法として、製作者側が取れる、あるいは取るべき手段は、そのハイパーテキストノードを中心としたリンクを提供してやることだけである。私はこのようなリンクを論理的なリンクと呼んでおり、殊更にナビゲーションと呼んでコンテンツと区別しない。何故なら、論理的なリンクはハイパーテキ

    itochan
    itochan 2009/02/03
    キーワードリンク式またはコンテンツマッチ式等でテキストに論理的につながった外部サイトへのリンクであれば広告とはいわない ということかな(書誌系のリンクも)
  • before,after疑似要素を使ってCSSだけで角丸を実現する - 空繰再繰

    CSSだけで角丸を実現するスマートな方法。 角丸と言うと、テーブル使ったり、Javascript使ったり、余計なタグ書いたりして 実現していることが多いんですが、そういう面倒で(コードが)美しくない方法ではありません。 基的にCSSと画像だけで実現します。ブロック要素ひとつ使うだけで、 あとは余計なものは一切ありません。というわけでサンプル。 CSSだけで角丸 HTMLが非常に手抜きかついい加減なのは突っ込まないでください。(正直かくのが面倒だった) どうやって角丸にしているかはソース見てもらった方が早いですが、 .round:before { display : block ; content : url("./nw.gif") ; background : transparent url("./ne.gif") no-repeat scroll 100% 0% ; } な感じで指定し

    itochan
    itochan 2009/01/21
    いわゆる角丸
  • ウェブデザイナーの作業を助ける12のオンラインツール

    カラースキームの作成、フォントの作成・選択、画像編集などウェブデザイナーの作業を助ける12のオンラインツールをSix Revisionsから紹介します。 12 Useful Web Tools for Designers

  • Pagetest web page performance test

    Speed up the performance of your web pages with an automated analysisWelcome. PageTest allows you to provide the URL of a webpage to be tested. The test will be conducted from the location specified and you will be provided a waterfall of your page load performance as well as a comparison against an optimization checklist. Please visit the PageTest wiki page for more information. Sample results

    itochan
    itochan 2009/01/14
    ロード時間の確認ツール (チェックサーバが日本国内でないことには注意)  / YSlowとの違いは?
  • バナーブラインドネス

    Webサイトの訪問者が、バナー広告のように見える情報を能的に無視する現象のこと。「コンテンツはカラフルで動きのあるものほど閲覧する確率が高い」とされてきた定説に異を唱える主張から生まれた言葉。 バナーブラインドネスという言葉は1998年に作られた造語。Webサイトのユーザビリティテストにおいて、被験者の大多数が意識せずにバナーによって提示された情報を無視した結果を基に作られた。 広告だから敬遠されるわけではなく、重要な情報でも広告と類似したデザイン要素が含まれていると無視される傾向にあるといわれる。

    バナーブラインドネス