3. 自己紹介 職業：デザイナー 物心ついたときには絵を描くのが好きだった そのままの勢いで某美大某デザイン科に進学 社会に出たらデザインの話が通じなさすぎて悶絶 そんな社会に対して、デザインの効果をりろんてきに説明して説得しようとしている marippe_
色彩センスのいらない配色講座
3. 自己紹介 職業：デザイナー 物心ついたときには絵を描くのが好きだった そのままの勢いで某美大某デザイン科に進学 社会に出たらデザインの話が通じなさすぎて悶絶 そんな社会に対して、デザインの効果をりろんてきに説明して説得しようとしている marippe_
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
Webサイト閲覧の手前（ユーザーエージェント）に関する雑感 | Accessible & Usable
公開日 : 2008年1月15日 (2011年1月11日 更新) カテゴリー : ユーザビリティ / アクセシビリティ このサイトの読者（現役でWebサイトを制作/運営されている方）の多くは、（勝手な想像ですが...）お正月などで帰省すると「親御さんのパソコンのサポート係」として重宝されるのではないでしょうか（笑）。私自身、父親のパソコンにたまったゴミデータを掃除したり、各種設定を整理したり、ウィルス対策ソフトの更新手続きをしたり、ハードディスクのデフラグをかけたり...と、毎年、ひと仕事です。 そんな、毎年の帰省のたびにつくづく思うことがあります。それは： Webサイト（ホームページ）を閲覧するための環境（パソコン）自体が、そもそも全然、アクセシブルでない（ユニバーサルに誰でも使えるようになっていない）ではないか。 ...ということです。主に「コスト」と「使い勝手」の観点から、述べてみた
シニア層とマウス - シニア現場の隅っこ。was使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)
（以下敬称略） マイクロソフトがICTマスターというホームユーザーに教えるインストラクターの認定制度を作った。 最近、マイクロソフトがシニア層に猛烈にアプローチをしているのはご存知の方も多いのでは。 そして、わが社はICTマスタートレーニングセンターというICTマスターをトレーニングする学校でもある。（試験会場でもある。） そして、さらに、そのトレーナーは私である。 今日は補講でとあるマスター候補生に指導をしていた。 初心者にパソコンを教えることを前提に説明をする、ということをロールプレイングしているのですが。 「はい、それではマウスを握りましょう。人差し指を左ボタンの上に・・・」という説明をひたすら受ける。 私はシニア役。心はすっかり初心者シニア層。 そして、ハタと気づいた。 私、マウス握るのに力入れすぎ。 クリックするのに上から振り下ろすかのごとく人差し指を強くボタンに向かって「たたき
ユーザー調査とユーザビリティ評価の違い：DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 ユーザーがある製品をどんな風に使っていてどんな潜在的なニーズを抱えているかを調べることと、ある製品のデザインにユーザーが使う上でどんな問題点があるかを調べることでは、調査の目的ははっきり異なります。 「ユーザー調査とユーザビリティ評価を混同しない」というエントリーでも指摘しましたが、前者はユーザー調査であり、後者はユーザビリティ評価です。 ユーザーの現実と現実のモノしかし、前回も書きましたが、どうもこの両者は実際のユーザーを呼んで調査を行うということから混同されやすかったりします。 お客さんがユーザーテストをやりたいというのでお話をうかがうと、実はデザイン評価のためのテストではなく、ニーズを探るためのユーザー調査だったりということがよくあります。 どう説明したらよいかはいつ
Alertbox: 天才デザイナーの神話（2007年5月29日）
デザイナーに恵まれたからと言って、ユーザビリティのプロセスが不要になるわけではない。リスクの軽減と質の向上には、ユーザテストをはじめとするユーザビリティ手法が欠かせない。 Myth of the Genius Designer by Jakob Nielsen on May 29, 2007 ユーザビリティに対する否定的な台詞をよく耳にする。“優秀なデザイナーを雇おう。そうすれば、ユーザテストのような厄介事を考える必要がなくなる。 良いデザイナーが、良いデザインをしてくれれば良いだけなのだから”と。 よく例に挙がるのは、Steve Jobsである。確かに、Jobsは偉大な製品を数々この世に送り出してきた。しかし、失敗作も実に多く、中でもNeXTコンピュータとMac Cubeが有名である。Macintoshでさえ、Adobeとデスクトップ・パブリッシングに間一髪のところで救われはしたものの、
ユーザビリティ調査はどこで実施しても同じ
ユーザテストを実施すれば、場所に関係なく同じ洞察を得られる。だから、複数の都市でわざわざテストをする意味はない。ただし、その業界一色になっているような都市は避けて、どこか別の場所でのテストを検討しよう。 Location is Irrelevant for Usability Studies by Jakob Nielsen on April 30, 2007 一ヶ国でしかテストをする予定がないならば、移動にリソースを費やしてまで、複数の都市で同じユーザビリティ調査を繰り返す意味はない。どうせ同じ行動を繰り返し観察することになるだけで、新しい発見は期待できないからだ。そんな予算があるのなら、別のデザイン案をテストしたり、競合の評価に使ったりする方がずっと賢明である。 どこでテストをしても同じだとする今回の結論は、マーケットリサーチでよく言われる教訓とは違う。マーケットリサーチでは、同じ国で
今押さえておくべきWeb制作に役立つ37個のブックマークまとめ*ホームページを作る人のネタ帳
WEB制作に役立つWebサービスやツール等、合計37のブックマークまとめ。 とりあえず全て無料をあつめました。 Webサイト作成のお供にFLASH関連 Wink デスクトップのマウスの操作を含めた動きを全てFLASHへ変換するソフト。 途中注意書きを追加したり、要らない部分のカット等も出来ます。完成したムービーに次へボタンをつけたりも出来ますし、ローディングバーもつけれます。 使い方 2.0にバージョンアップ その他使いやすいデスクトップを動画にするキャプチャ マニュアル作成が１０倍楽になるソフトがありました Flashできれいなパイチャートや円グラフを無料で作る いまはやりの丸グラを作るのにフラッシュの知識がなくても簡単に作れるツール。 動画をまとめて配信するフラッシュコンテンツの作成 各種動画サイトの複数映像をまとめて表示するツール。 役立つWEBサービス 白地図、世界地図、日本地図が
アフォーダンスを意識する | Accessible & Usable
公開日 : 2006年8月20日 (2011年1月11日 更新) カテゴリー : ユーザビリティ アフォーダンス（affordance）という言葉を聞いたことはありますか？「〜を提供する」「〜を利用可能にする」という意味の英語「afford」の名詞形ですが、ユーザーインターフェース設計の世界では、モノの属性（形状、材質、色など）がヒト（ユーザー）に対して「どう取り扱えば良いか」という情報を発している、という考えかたのことをいいます。 たとえば、（無意識にですが）皆さんこんな経験があるのではないでしょうか？ ドアノブ（取っ手）の形状を見て「押して（あるいは手前に引いて）開けるもの」なのか「横にスライドさせて開けるもの」なのかを識別する。 ダイヤルを見て「回すもの」だと認識する。さらに、回す部分の形状や大きさによって「つまんで回すもの」なのか「握ってまわすもの」なのかを識別する。 スイッチの形
多くのユーザーは一度に1本しかジュースを買わない ― ＠IT
ユーザビリティのヒント（1） 多くのユーザーは 一度に1本しかジュースを買わない 「自動販売機での不要な動作から考える」 ソシオメディア 上野 学 2006/6/2 Webアプリケーションのユーザーインターフェイスデザインに役立つさまざまなTips集。自動販売機でジュースを買うときの不要な動作から考える。（編集部） 今回からはWebアプリケーションのユーザーインターフェイスの続編の「Tips編」として、ウェブアプリケーションのユーザーインターフェイスをデザインするうえで役立つさまざまなヒントを、少し細かな視点から具体的に見ていきます。 複雑な構成物を作り上げるには、基本となるコンセプトやアーキテクチャといった抽象度の高い部分から考えていくトップダウン式のアプローチと、構成要素の細部から考えていくボトムアップ式のアプローチの両方が必要になりますが、前回までの経験則編はどちらかといえばトップダ
WD Live! Web標準時代に求められるサイト構築法
Web標準時代に求められる サイト構築法 木達一仁 株式会社ミツエーリンクス WEB開発チーム フロントエンドエンジニア Web Standards Projectメンバー k-kidachi@mitsue.co.jp / kidachi@kazuhi.to 株式会社ミツエーリンクス WEB開発チーム フロントエンドエンジニア（2004年2月～） Web標準準拠サービスの立ち上げ/運用 Web標準Blogの運営 W3C Advisory Committee Representative 海外のWeb標準関連書籍和訳版の監修 Web Standards Project（WaSP）メンバー mixiにてWeb標準コミュニティを主催（2006年5月25日現在3260人が参加） 7月15日「Web標準の日」開催
Feed Icons - Home of the Standard Web Feed Icon
Developer Kit The devkit includes icons ranging from 12x12 to 128x128 in various formats, including AI, EPS, SVG, PSD, PDF, PNG, JPG, GIF. View ReadMe file. Did you know? The story of RSS goes back to around 1995! That's like a century in technology years. And the RSS feed icon is being used by hundreds of thousands of websites including Kiva.org micro-loans that change lives (check them out!), St
RSSアイコン標準化プロジェクト「Feed Icons」 - GIGAZINE
上記画像のRSSアイコン、Firefoxに採用されているRSSアイコンですが、これをRSSアイコンのスタンダード、つまり標準のものとして普及させようというのが「Feed Icons」の趣旨です。既にマイクロソフトの次期Windows Vistaに搭載される「Internet Explorer 7」のRSSアイコンとしても採用が決定しており、事実上の標準アイコンとなりつつあります。 また、元になるアイコンの素材も配布されており、様々なサイズのGIF・PNG・JPEG画像、それぞれの元になったPhotoshop形式画像、EPS形式、Illustrator形式、SVG形式、PDF形式と考えられる限りのアイコン素材が詰め込まれています。サイズも10×10から128×128まで標準で入ってます。これによってデザインは同じでも色を違うものにするとかが簡単にできるというわけ。 ダウンロードは以下のサイト
Internet Explorer 7ベータ2の不具合からWebデザイン業界の混乱が見えてきた - 日経トレンディネット
次期Windows OS「Vista」に標準搭載される「Internet Explorer 7（IE7）」（日本語版）のベータ2が連休明けの9日公開された、という表向きの話はデジタルARENAのニュース「マイクロソフトがInternet Explorer 7 ベータ2を公開」を読んでいただくこととして、こちらはWeb業界には気になる、Web表示の互換性の問題に踏み込んでみよう。 まず、単純な話、IE7って使いものになるのか。なる。最初はメニューが見えないので戸惑うけど、Altキーを押せば出てくる。RSSリーダーの機能だってFirefoxとどっこいどっこい程度には付いている（笑）。マクロソフトの看板アプリケーションに抜かりがあるはずはない。 ところが、IE7で表示したとき、レイアウトが崩れてしまうサイトがいくつかあった。例えば、このコラムを書いている12日現在、「はてなダイアリー日記」はIE
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.openvista.jp/archives/note/257/?257/
東京webデザイナー日記: 日経平均銘柄225社サイトの脱テーブル率調査
Modern Syntax
Engadget | Technology News & Reviews