WD101: 画面ではなく部品から始めてみよう
このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 Webは見た目のコントロールがきかない モニターの外をデザインするのが大半である Webは寛容性をデザインする場である Webのデザインは枠のない世界である Webデザインであるもの、そうでないもの Windows中心設計は5年前の話 すべてのデバイスやソフトウェアで同じように Web サイトをデザインするのは不可能といっても過言ではありませんし、むしろ違いを受け入れ、利用者の環境やニーズを尊重するのが Web デザインの本来あるべき姿です。柔軟性・拡張性をもつ Web ですが、Web デザインはページの概念を強く意識したビジュアルデザインが最優先された時期がありました。 パソコンが Web アクセスの中心だった頃は、利
レスポンシブにデザインするために克服すること : could
画像の課題は解決されつつある 先日 Web担当者 Forum で、レスポンシブ・ウェブデザインの功罪とモバイルファースト という記事が掲載されました。Media Queries を活用するなど実装のための概要を説明した上で、非表示だけど読み込まれているから膨大な画像素材が存在する PC サイトのレスポンシブデザインは不適切であると書かれています。 現存の Web サイトを Media Queries だけでレスポンシブ・ウェブデザインをするのであれば、Web担当者 Forum での指摘は間違っていませんが、実際のところレスポンシブにデザインすることは、Media Queries による対応だけではありません。例えば、画像の表示のさせ方を工夫すれば、記事で指摘している課題はある程度解決できます。Web担の記事からもリンクされている CSS Rador でも取り上げられている解決策もありますが
UXとUIが混同されるワケ
最近 UX と UI を混同して表記されているのを見かけるようになりました。私もウケやすいということで、混同させたことがあります。しかし実際のところ UX と UI は同義語ではありません。良い UI デザインをすれば、UX が向上する可能性はありますが、必ずしもそうではありません。逆もしかりです。最近も UX と UIの違いを分かりやすく表現しようと、シリアルとボールの写真を使った例が登場しましたが、「そうでもない」という意見も多数ありました。 それでは、なぜ混同されやすいのかというと、今のスマートフォン向けのデザインを見るとヒントが隠されています。例えば Twitter クライアントの中で人気のある Tweetbot を見てみましょう。このアプリの中で装飾と呼べるデザインはどれだけあるでしょうか。ほぼ皆無だと思います。 スマートフォンという小さなスクリーンには、UI しか存在しません。
GIMPが提案するソーシャルUI
着実に機能を増やし続けているオープンソースの Photoshop 代替プログラム GIMP。他アプリケーションとの連携を考えると Adobe 製品で揃えた方が有利ですが、機能だけみると Photoshop のライバルと見なしても良いくらい充実しています。GIMPは Photoshop と同様、プラグインやアクションが共有されているので、ある程度の機能のカスタマイズが可能です。 高機能というのは嬉しいですが、それ故に使いたい機能がどこにあるか分からなかったり、どうやって使えば良いか調べるのも面倒だったりします。日本でも書籍は販売されていますし、日本語Wikiもありますが、手間がかかることから結局慣れたソフトウェアに戻ってしまうということもあると思います。 そんな課題を解決するかもしれない機能が AdaptableGIMP です。細かい説明は後にして、まずはビデオを見てください。 達成したいタ
組み立てるだけのサイト制作プロセスを変えるヒント
書籍や雑誌をはじめとした印刷物。TVやラジオで見られるような広告。デスクトップで動作するソフトウェア。これらの制作プロセスは Web サイト制作において影響を与えてきてモデル。テクノロジーやノウハウが蓄積され独自性も多少出て来たものの、Webサイト制作プロセスは基本的なところは10年くらい変わらないのではないでしょうか。 配布してしまったら終わりの印刷物。一瞬でもインパクトがあればそれで良いテレビCM。企画といっても仕様や機能を決める話になり、始めたら後に戻りにくいウォーターフォール式のソフトウェア開発。いずれのプロセスも長所はありますし、それぞれの形に合っているから使われているわけですが、人と人、情報と情報、そして人と情報が常に双方向に繋がり続けている Web という有機体にはいずれの方法も適していません。 流動的に変化を続ける Web だからこそ、アジャイルソフトウェア開発が受け入れら
らくだをデザインしていませんか？
A camel is a horse designed by committee. (ラクダとは委員会によって設計された馬である)Alec Issigonis らくださんがかわいそうですが、いろいろなアイデアを盛り込むことで結果的に何がなんだか分からない不細工なものが出来てしまうという意味が込められています。「We just made a camel（らくだをつくってしまった）」という表現を使う場合がありますが、語源は上記の格言になります。デザインの決定権をもっている人がたくさんいて、彼等の意見をすべて取り入れてしまうことで最初のビジョンとはかけ離れたものになってしまう・・・なんとも人ごとではないシナリオです。 以前「デザインが失敗してしまう理由」でもデザインをしない方や知識のない方が決定権をもつことが失敗に繋がると紹介しました。プロジェクトに携わっているのであれば誰でも言いたいことはあり
インタラクションから生まれる3種類の体験
以前「ところで体験ってなんですか？」という記事で、体験は２つの自己によって形成されていると解説しました。行動経済学者ダニエル・カーネマンによると、今この瞬間を経験する「Experience Self」、記憶を辿る「Remembering Self」という２つの自己が密接に繋がりあい、それが幸せかどうかの尺度にも影響するとしています。つまり、よい体験があったかどうかの判断は、どのようにその出来事を記憶しているかに大きく左右していることになります。 体験の善し悪しを考える上で、ダニエル・カーネマンの提唱する２つの自己は大変参考になります。では、体験をもう少し分かりやすく分類するとどうなるでしょうか。ヒト・モノ・コトと関わり方の違いでも体験の仕方が変わってくるはずですが、どのように分類できるでしょうか。Jodi Forlizzi と Katja Battarbee が共著した文献「Underst
無料で使えるワイヤーフレームツールのまとめ : could
ソフトウェアワイヤーフレーム 無料で使えるワイヤーフレームツールのまとめ Firefox 上で動作するワイヤーフレームツール Pencil をはじめ、無料でしかも便利なツールが増えてきました。紙とペンでワイヤーフレームを描くのは基本ですが、より本物に近いプロトタイプを作るのであればソフトウェアを使うのが最適です。以前紹介した「プロトタイピングの基礎の基礎」も併用に読んで今回紹介するツールの中から自分に合ったツールを探してみてはいかがでしょうか。 DIA: a drawing program UMLダイアグラムに特化していますが、ワイヤーフレームも作れます。基本的にデータは XML で保存されますが、EPS, SVG, PNG といった別形式にも書き出せます DENIM タブレットで操作すると快適そうなプロタイピングツール。サイト内をどのように移動するかを確認するには使えそうです OpenO
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
