これはウェブページです｡
たいしたページではありません｡ あるのは言葉だけ｡ それをあなたは読んでいます｡ オシャレなデザインや､レスポンシブなレイアウト､魔法のようなスクリプトに私たちは魅了されてしまいました｡ でも､ウェブで一番強力な道具は､今も昔も言葉です｡ 私が書いた言葉を､あなたが読んでいる｡これこそ魔法です｡ 私はブリティッシュコロンビア州の小さな都市にいますが､あなたは別のどこかにいることでしょう｡私は2013年6月20日の早朝にこれを書きましたが､あなたは違う日時にこれを読んでいることでしょう｡私はノートパソコンでこれを書きましたが､あなたは携帯電話でこれを読んでいるかもしれないし､タブレット端末やデスクトップ端末で読んでいるかもしれません｡ 私とあなたがこうして繋がることができたのは､私が書いた言葉をあなたが読んでいるからです｡ウェブとはそういうものです｡場所や端末､タイムゾーンが違っても､このシ
スマートフォン利用にある異なる６つの価値感
スマートフォンがアーリーアダプターのものではなくなった今日。 「スマートフォンユーザー」と一言でいっても、好みや重要にしているものは人それぞれです。利用者のアプリの使い方、アプリの並べ方、デバイスの持ち方、そして行動にまで影響します。同じように見えるスマートフォンも、人の性格が出ていることがありますし、気付きを与えてくれることがあります。 最近、人のを見て「なるほど」と思ったアプリの配置。よく使うアプリは Dock や上部に置かず、右手の親指で届きやすい左下に集中させている人が何人かいました。 デザインを皆で考えるときに難しいのが、何がフォーカスするべき重要なことなのかを共有するとき。スマートフォンへの価値観が異なることから、話がすれ違ったり、プライオリティをうまく決めることができないことがあります。そこで、プロトタイプを作る前にシナリオやペルソナをつくって「こういう価値感をもっている人を
多種多様なWebアクセスにおけるパソコン向けデザインの弱点
通信機器の普及率を2010年と2012年度で比較（総務省 2013年）。 日本も既にポストPC時代 先週、総務省が平成二十四年度の通信利用動向調査を発表しました。詳しくは公開されている PDF (又は生データで公開されている Excel/CSV) を参照してほしいですが、特筆すべき点は以下の 6 つです。 パソコン（デスクトップやノート）からの Web アクセスは 2009 年をピークに毎年下降している 家庭内、外関係なくパソコンからの Web 利用は低下している 同時に低下しているのは従来の携帯電話。保持率は依然高いが Web アクセスは減ってきている 従来のアクセス端末の利用は低下しているが、今まで以上に Web アクセスする人は増えている 10代から40代の Web 利用率は頭打ちをしているが、増えてきているのが 65 歳以上の高齢者 パソコンや従来の携帯電話の代わりになっているのが
パフォーマンスは技術課題ではなくデザインの課題
人気デザインギャラリーサイトから幾つかモバイル向け Web サイトのパフォーマンスを検証してみました。以下が各サイトのリクエスト数とファイルサイズになります。 FELISSIMO 500色の色えんぴつ: 81リクエスト / 1.94MB 旅館 大村屋 55リクエスト / 1.52MB UR オンラインストア 90リクエスト / 705kb JiNS PC 78リクエスト / 1.39MB らでぃっしゅレシピ 69リクエスト / 987kb 明治北海道十勝カマンベールチーズ 54リクエスト / 1.12MB いずれもスクリーンショットでは素晴らしい見た目で使いやすそうに見えますが、中身はかなり重いことが分かります。1MB 以下に抑えているサイトもありますが、それでもかなりリクエスト数が多いのが分かります。リクエスト数が多いということは、回線が安定しない場合、すべての要素が読み込まれない可能性
レスポンシブWebデザインのサイトに「デスクトップ表示」ボタンが必要な2つの理由
レスポンシブWebデザイン（RWD）で作ったウェブサイトを運営しはじめてから気になっていたことが一つあります。それは、RWDで作られたウェブサイトでもデスクトップ版のレイアウトが見られるようにする機能が必要かという疑問です。僕が書いた本でもp.176のコラム「レスポンシブWebサイトでも『PCサイト』ボタンが必要？」で触れた内容ですが、先日のBruce Lawson氏のブログ記事を読んでいて、再び気になったので自分の考えをまとめてみました。 モバイル版ブラウザの「デスクトップ表示」機能 たとえばDolphinやChromeといったモバイル向けブラウザにはデスクトップ版を表示するための機能が用意されています（FirefoxやMobile Operaにもついてるそうです）。わざわざこういうった機能が装備されているということは、これがユーザに求められる機能だからだと思います。（以下はiPhone
THE SHOP ONLINE
現在、THE 洗濯洗剤のTrial setのみをご購入の場合送料が無料です。通常は１回のご注文につき、送料900円を頂戴いたします。ただし、商品の購入金額が5,000円以上の場合には送料は無料です。環境配慮方針により簡易包装でのお届けとなります。ギフトラッピングは対応致しかねますのでご了承ください。
Webデザインが抱える制約と評価の仕方
先週になりますが、Don Norman 氏が PHD-DESIGN のメーリングリストで発した言葉が話題になりました。カリフォルニア大学デービス校デザイン課の Web サイトが酷いというので彼が厳しく避難した内容。こんな文字が小さい Web サイトをつくるデザイン課を受講する意味はないと言い放っています。その後、Webマスターも登場するなど様々な意見が交換されています。 Webサイトをみると分かりますが、10年くらい前につくったように見えても仕方ない見た目です。文字が小さいだけでなく、文章の背景にアニメーションを付けたいがために Flash を導入したのだろうと思わせる演出もあります。Webデザインを仕事にしている方なら思わず突っ込みたくなるところがあると思いますし、Norman 氏のような意見を発する人もいるかと思います。 私も Web デザインを仕事にしている端くれなので、言いたいとこ
新しい「iPad」とウェブデザイン--「Retina Display」がウェブサイトにもたらす影響
米CNET編集者注：この記事は、Mobifyの最高経営責任者（CEO）のIgor Falestki氏がゲストとして寄稿したものだ。記事の最後にFalestki氏の略歴を記載した。 新しい「iPad」は、3月16日に発売されて以来、飛ぶように売れている。現在、300万人を超える人々がこのつややかな新しいデバイスを手にしている。 何らかの理由でその刺激的な宣伝を見逃した人のために説明すると、新しいiPadは「Retina Display」を採用したことでスクリーンの解像度が飛躍的に向上した。「iPad 2」の4倍（HDテレビの100万倍）のピクセル数を詰め込んだRetina Displayは、信じられないようなビジュアル体験をエンドユーザーに提供する。 しかし、消費者にとっては非常にシンプルに思えるテクノロジでも、ウェブサイトオーナーにとっては新たな頭痛の種になる可能性がある。Retina D
Micro Icon Set - Icon Deposit
Here is my biggest Icon Set yet! This on includes 110 icons in total and is 16x16 pixels. This is entirely vector and can be scaled to any size if needed. It also includes a photoshop PSD like always, enjoy :) REMEMBER: Since this is such a big freebie, you will need to link back to this site or post any time you decide to use these icons. You may NOT host these icons elsewhere, you also may NOT s
首相官邸サイトリニューアル、しかしすぐに再リニューアルが必要 | 水無月ばけらのえび日記
公開: 2012年4月8日16時40分頃 首相官邸 (www.kantei.go.jp)のサイトがリニューアルしたそうで。 4500万円かかったと報じられていますが、何をやったのかが分からないので、高いか安いかは評価のしようがないですね。単純に規模から「やるべき事」を考えてみると、CMS抜きで4500万円かかっても不思議ではないと思います。戦略をみっちりやったり、それなりなCMSを入れたりすれば足りなくなるかもしれません。 そして実際にサイトを見てみると、まず、見た目だけで以下のような点が気になるわけです。 背景にうっすらと写真が敷かれていますが、肝心な部分がコンテンツの下敷きになってよく見えない上に、「首相官邸」というタイトルまわりが読みにくくなってしまっています。プロがこういう中途半端な写真の使い方をすることはまずありません。写真を見せたいならちゃんと見せるでしょうし、見せなくても良い
当社Webサイトのリニューアルについて | コラム | ミツエーリンクス
既にお知らせ「 当社Webサイトをリニューアル 」にありますように、先月23日、当社ミツエーリンクスの企業サイト（www.mitsue.co.jp、以下「当サイト」）をリニューアルしました。それまで、私が入社した2004年2月時点での情報構造やビジュアルデザインを維持してきましたから、少なく見積もっても8年以上ぶりのリニューアルになります。その間、Webの閲覧環境はもとより、デザインのトレンドや実装技術は大きく変化してきました。 2004年4月に当サイトのWeb標準準拠を実施し（コラム「 Web標準に準拠する価値 」参照）、以後も継続して運用に参加してきた立場ゆえ、早くリニューアルをしたいという思いは日常的に抱いていました。とりわけ自分の担当したマークアップ/スタイルシート設計について、「今の自分ならこうする」「最新の技術ならこう作れる」といった点は多く認識してきました。そうであればこそ、
Google+ プロフィールバナー画像作成用 PNG ファイル
Google+ のプロフィールページって、メインのプロフィール画像以外に最大 5つまでスクラップブック写真っていう画像を掲載することができるんですよね （プロフィールバナーと呼ばれているみたいですが）。で、ここに 1枚の画像を分割して掲載したかったので簡単にサイズ調べてスライス用のレイヤーを作ったんですが、折角なのでシェアしようかなと思います。 実際に設定するとこんな感じになります（画像クリックで実際のページが開きます）。下記はこの Blog の Google+ ページに設定してみた例です。 PNG でスライスレイヤーを設定済みですので、Fireworks で開いてもらって、スライスしたい画像に丸ごとコピペするなどしてもらえればあとは画像を書き出すだけです。 PNG ファイルのダウンロードは下記のリンクからどうぞ。 Google+ プロフィールバナー画像作成用 PNG ファイル （zip
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webamb.com
screenqueri.es
stroll.js - CSS3 Scroll Effects
http://webdesignmatome.com/webdesign/parallax_jp
Edits Quaterly
東京オリンピック・パラリンピック競技大会における知的財産の活用について インフォメーション | 東京大学TLO
ウェブデザインのセンスを磨こう、素敵なUIデザインのまとめ