UIデザイナーが知っておくべきエンドユーザーの10の特徴
ユーザーの視点に立ってデザインされていないインターフェースは、エンドユーザーに受け入れてもらえないはずだ。そこで本記事では、UIデザイナーが念頭に置いておくべきユーザーの習慣や考え方について焦点を当てる。 つい最近、「Ubuntu Unity」はUbuntuに正式搭載されてから1周年を迎えた。また、「Windows 8」はリリースを間近に控えている。こういった状況のなか、すべてのユーザーインターフェース（UI）は同じように作られていないという事実が明らかになってきている。実際のところ、コンピュータの使い方に革命的な変化をもたらすような素晴らしいUIデザインもあり得るだろうが、エンドユーザーを念頭に置いていないものは、その素晴らしさを証明する間もなく失敗作という烙印を押されてしまうはずだ。 筆者は長年に渡るコンピュータ経験のなかで、ほとんどすべてのLinuxデスクトップと、あらゆるバージョン
iPhoneやiPadでHTMLのソースを見るブックマークレット『i-sourceview』 | KUMALOG
i-sourceviewというのをGAE/Pythonでつくってみました。 iPhoneやiPadでHTMLのソースを見るのつくった – Webtech Walker iPhoneやiPadのSafariでHTMLのソースを見ることができるブックマークレットが便利そうだったのでメモ。 他にもこういうブックマークレットが存在した気がしますが、今回紹介するものはシンタックスハイライトの機能があるのでオススメです。 i-sourceviewの登録はコチラからi-sourceview 使い方などi-sourceviewにはJS版とServer版の2タイプがあります。JS版とServer版の特徴は以下の通り。 JS版 JSのdocument.documentElement.outerHTMLでHTMLを取得するJSでDOMが書き換えた後のソースが取れるXML宣言やDOCTYPE宣言が取れない認証がか
ke-tai.org > Blog Archive > ブックレビュー：携帯サイト コーディング&デザイン
ブックレビュー：携帯サイト コーディング&デザイン Tweet 2008/12/26 金曜日 matsui Posted in ブックレビュー | No Comments » なんとあの「携帯ホームページを作ろう！ – ちょっと詳しいモバイルサイトの作り方」の管理人でもあるshibaさんから、ご献本をいただきました。 これはうれしいです。ありがとうございます！！ というわけで、まだ届いたばかりで細部までは見ることができていないのですが、読んだ範囲で早速レビューを書きたいと思います。 → Amazon 携帯サイト コーディング&デザイン (Amazonでは本日12/26から発売とのことです) 携帯サイト コーディング＆デザインというタイトルなのですが、HTMLに関する説明だけではなく、ケータイ業界の話からPHPのサンプルプログラムまで幅広く解説している本です。 目次は次のようになっています。
ke-tai.org > Blog Archive > ブックレビュー：ケータイHTML ポケットリファレンス
ブックレビュー：ケータイHTML ポケットリファレンス Tweet 2010/7/23 金曜日 matsui Posted in ブックレビュー | No Comments » ケータイ関連の書籍を購入しましたので、ブックレビューを書かせていただこうと思います。 → amazon ケータイHTML ポケットリファレンス [amazon.co.jp] 本書「ケータイHTML ポケットリファレンス」は、2010年5月に発売されたばかりの書籍です。 その名の通り、ケータイHTMLのリファレンスとなっており、目的や用語、タグなどのキーワードを元に辞書的に使える本です。 このポケットリファレンスは、他にも多くのシリーズが出版されており、よく目にしますね。 詳細な目次はこちらのページにあります。 → 技術評論社 書籍案内：ケータイHTMLポケットリファレンス [gihyo.jp] さすが出たばかりの本
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
プロジェクトメンバーが幸せになれるワイヤーフレームの作り方 : LINE Corporation ディレクターブログ
こんにちは、livedoor Blog 担当の飯田です。 ちょうど新機能のワイヤーフレームを描いている最中だったので、今回は正解があるようで無いディレクターのメイン業務の一つ、ワイヤーフレームについて自分なりにどう考えて作っているかを簡単にまとめてみました。 特にワイヤーフレームをこれから初めて作ってみるという人の参考になればと。 ワイヤーフレームって？ ウェブサイトを構成する要素・動作をまとめた資料になります。構成書・モック・スケルトン・青写真と呼び方は人それぞれです。 ということで、実際以下の感じでワイヤーフレームを作っていきます。 とりあえず紙に描く 頭の中で考えていることをとにかく裏紙などを利用して紙に描いてみます。ワイヤーフレームと聞いてデジタルなイメージがありますが、こうした構想やアイデアベースの状態のときは、たくさん手を頭を動かして思いを出し切った方が整理がしやすくなります。
HTML5についてのおさらい｜Web制作 W3G
Updated 2010.07.29 / Published 2010.07.29 これからHTML5を使いはじめようという方に向けたHTML5のおさらいです。HTML5の記述方法にはじまり、導入にあたって間違いやすいところや勘違いしがちなところをまとめてあります。 hgroup, header, footer要素の説明を含めた続きもあります(続HTML5についてのおさらい)。 HTML5の記述方法 まず最初に、必ずDOCTYPE宣言を行います。HTML5には公式のDTDがないので、すごくシンプルになっています。 <!DOCTYPE html> 続いて、html要素にドキュメントの言語を宣言します。 <html lang="ja"> そして順番にhead要素ときて、文字エンコーディングの指定ですが、charset属性が新たに利用できるようになりました。 <meta charset="UTF
2010年版 ユーザーインターフェース（UI）・ユーザビリティ必見サイト/必読書 - Feel Like A Fallinstar
ウェブサイト 実はユーザー中心設計やユーザビリティ、インターフェースについてちゃんとまとまったサイトは国内には少数です。 ここに挙げたサイトはどれも大変充実したものだと思います。 ※残念ながら、海外の記事を紹介しているブログでよいものは見つからず。 劣化コピペサイトを紹介するのも気が引けるので割愛しました。 ヤコブ・ニールセンのAlert Box ユーザビリティ・ユーザ調査の世界的権威であるヤコブ・ニールセン博士のナレッジを発表しているサイトです。 実際の調査結果、そこに対する考察も含め、とてもよくまとまっています。 アップル ヒューマンインタフェースガイドライン Max OS Xのためのインターフェース資料に始まり、アプリケーションをデザインしている間、心に留めておくべき基礎となるデザイン原則がまとまっています。 もちろん、Windows / Linusユーザーにとっても必見。 ユーザビ
今でも役立つ、ペーパープロトタイピングのススメ - Feel Like A Fallinstar
ここ数年、オンラインの描画ツールが現れ、Dreamweaverのようなソフトも、CSSやJavaScriptのライブラリもどんどん整って来ました。 ある程度のデザイン・HTMLなら、その場で作れる環境が出来上がりつつあるのじゃないでしょうか。 しかし、実際にそうやって出来た画面がベストかというと、そうでもなかったりします。 そんなわけで、今日はプロトタイピングについて少しばかり。 これは、コンサルタントの話しなのですべての職種で当てはまる話ではないかもしれませんが・・ 大体、画面設計が上手だったりUI理解に優れている人は、紙の上でラフを作って試行錯誤を行うことが出来る人です。 （もちろん、100%がそうなわけではないですが・汗） じゃぁ何でそんなことになるか、ということなんですが4つほど原因があるのかな、と個人的には思っています。 とにかく圧倒的に素早い 最初の画面にこだわらず、どんどん「
Yahoo!ニュース高速化へのサイトデザイン側からのアプローチ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Yahoo!ニュースのデザイナーの黒田・由衛です。 Yahoo!ニュースが2009年4月27日にリニューアルしました。今回のリニューアルでは、お客様に快適にサイトを利用していただけるよう最速でページを表示させることに重点をおきました。 お客様がウェブを閲覧するのは1日の中のほんの限られた時間です。その貴重な時間を割いてYahoo!ニュースに来ていただくわけですから、1ページでも多くの記事を「読みやすく」「ストレスなく」見ていただけるようにするのが、Yahoo!ニュースがお客様にできる最高のおもてなしだと考えています。そこで、今回のリニューアルでは、サイトデザイン側からのアプローチとして以下の2点の施策を行いました。 １
不況時代に適した費用対効果重視型ウェブサイトリニューアル手法
◆本コラムのサマリ ・限られた予算の中で最大の成果を創出する場合におすすめなウェブサイトリニューアル手法として、「シナリオベースリニューアル」がある。 ・「シナリオベースリニューアル」とは、ウェブサイト内のシナリオ（ユーザーー心理と行動導線）に注目し、シナリオ上にある問題点の大きさと改善コストや改善による期待効果の大きさを考慮して、費用対効果が高い部分に特化したリニューアルを行うことを指す。 ・ウェブサイトの画面設計や、ウェブサイト外からの集客施策を検討する上でもシナリオは活用できるため、費用を抑えつつ中途半端ではなく着実に成果にフォーカスしたリニューアルを実施することができる。 費用対効果が高いウェブサイトリニューアル手法の必要性 2008年末からの世界同時不況は国内企業に直接・間接的に大きな影響を与えており、2009年は新規投資の見直し・凍結が相次ぎ企業活動が縮小する年となりそうです。
[CSS]divもfloatもclearもhackも使用しないで組む3カラムレイアウト | コリス
TJK Designのエントリーから、ヘッダ・フッタ・3カラムのレイアウトをdiv, float, clear, CSS hackを使用しないで実装するスタイルシートの紹介です。 A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK! 対応ブラウザは、WidnowsがIE5.01, 5.5, 6, 7, Fx0.8, 1.5, 2.0, Op9.0, 9.24、MacがIE5.2, Safari2.0, 3.0, Fx2.0、LinuxがKonqueror, Mozilla、そしてiPhoneとなっています。 仕組みは、簡単に説明するとリストを使用したもので、実装方法は８つのステップで紹介されています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Expired
ファーストビューは何pxまで？ ブラウザの表示領域サイズ5年間の変化を大公開 | 初代編集長ブログ―安田英久
【HTMLタグの簡単検索】TAG index - ホームページ作成情報
http://kachibito.net/web-design/css-html-coding-tips.html&title=%E3%82%88%E3%82%8A%E6%97%A9%E3%81%8Fcss%E3%82%84html%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%8C%E8%A1%8C%E3%81%88%E3%81%9D%E3%81%86%E3%81%AA%E6%83%85%E5%A0%B1%E3%25
Amazon.co.jp: 職人芸としての携帯サイト制作 ケータイサイトの制作・運営でつまずく65のポイントとその解決策: 三森努: 本
youmos.com