by Nicola Albertini ウェブサイトやアプリを初めて使うとき、私たちは無意識のうちにコンテンツをどのように操作するのか、つまり、「タップするのか」「スライドするのか」「メニューはどこか」といったことに頭を働かせています。初めてのコンテンツを操作するにはさまざまな情報を一時的に記憶する必要があるのですが、この時、タスクが多すぎて一度に記憶を保てる容量の限界を超えてしまうと、人は「よくわからない」と、ウェブサイトやアプリの使用を途中でやめてしまいます。処理するタスクが多すぎることを「認知的負荷が高い」と言いますが、ウェブサイトやアプリを作る上でこの「認知的負荷」をできるだけ少なくする基本原則が、ウェブデザイン作成サービスMarvelのブログで公開されています。 Design Principles for Reducing Cognitive Load - Marvel Blog
99designsからのタレコミによると、日本時間で2月21日(木)午前8時から行われるイベントにて「PlayStation 4(PS4)」が発表されるのに合わせて、ロゴデザインコンテストを実施しているとのことで、なかなか秀逸でいかにもありそうなロゴデザインが山ほど投稿されています。 Logo design contest | Community Contest: Create the logo for the PlayStation 4. Winner receives $500! | Entries | 99designs 現時点で高評価になっているランキング上位陣は以下のようになっています。 Logo design by Logosquare | #4617 | 99designs Logo design by eLaeS | #4380 | 99designs Logo desig
「どーもくん」と言えば、NHKのマスコットキャラとして1998年から10年以上も活躍しつづけている、世界的にも知られたキャラクターです。このどーもくんを作ったアニメーション作家の合田経郎氏によって、日産の新たなキャラクター「PLUG（プラグ）くん」と、彼の住む世界「Planet Zero」が作り出されましたが、そのクオリティは、ちょっと尋常ではないほど力が入ったものとなっています。 NISSAN Zero Emission：Planet Zero http://the-planet-zero.com/ これが合田経郎氏によって生み出された日産の新キャラクター「PLUG」。昨今のゆるキャラブームをまったく無視したかのような直線的なキャラクターデザインです。 PLUGくんのすごいところは、彼らがすべて立体で製作され、コマ撮りアニメーションでその世界観と物語が作られているところ。下のムービーでは
Appleは買ってきて開けるまでの過程を明確に他社製品と差別化しており、ユーザー体験の満足度を向上させ、所有欲を満たすようにできています。これら一連のパッケージングデザインは単なるインパクト狙いや俗に言うAppleの哲学、要するに創業者であるスティーブ・ジョブズの美学だけに基づいたものではなく、徹底的にユーザビリティをまず考慮しており、その上で成り立たせているものであるということが、実際の具体的なパッケージングデザインを見るとよく理解できます。 というわけで、「iPad 2」の場合、Appleがどのような工夫をしてパッケージングデザインを行っているのかを見てみましょう。 パッケージングデザインのフォトレビューは以下から。 これがiPad 2のパッケージ このようにしてパカッと開く方式になっており、箱の上や横からスライドさせて商品を出す方式ではありません。これは箱を開けることでiPad 2の
画像加工の技術は年々進歩しており、PhotoshopもCS5が出ることが発表され、これからも次々と偉大なデザインや先進的なアートが生み出されていくことが期待されています。 クリエイティブな仕事をしている人は誰でも実感としてわかっていることですが、そういうオリジナリティの高い作品を作り出す前の段階として必ず誰でも最初は「模倣」から入り、さらにそういった思わず模倣したくなるような作品を見たりすることによって自分の中の創作意欲が刺激され、「あの作品を超えるものを作り出したい！」というようにつながり、模倣から独自の創造性あふれる形へと昇華されていくわけです。 というわけで、見ているだけでインスピレーションをバリバリ刺激するクリエイティブな画像いろいろです。鑑賞は以下から。 WWFのキャンペーンポスター、森林が肺を模した形に。地球も呼吸するというイメージ。 Cyborg model on Flick
「Crestock.com」というストックイメージを扱っているサイトで、「The Crestock Photoshop Contest 2007」が開かれています。参加は自由で、優秀作品にはAppleのMac Proをはじめとする豪華賞品が出るというもの。現在4ラウンドのうち3ラウンドまでが終了したところなのですが、さすがにここまでくるとレベルの高い画像ばかりになっています。 画像は以下から。 これがラウンド3でトップになった"X i o l i t a"という作品。作ったsideshowsitoさんは賞品としてMacBook Proをもらえるそうです。 "My Tiny Cottage" by Janitor "The Power of Dreams" by Donjuki "The Ark by" enjin "Garden" by Hubiiipl "Old McDonald's B
サイト運用をしている人は誰もが悩むトップページのデザイン。もちろん超大手検索サイトのGoogleとYAHOO！もこれまで試行錯誤しながらトップページデザインを変えているのですが、いったいどのように変わってきたかがまとめられています。 詳細は以下から1997年から2007年までのGoogle。毎年デザインが変わっていますが、現在のようなロゴに変わったのは2000年から。 Google 10 years ride in images (Google) 1997年 1998年 1999年 2000年 2001年 2002年 2003年 2004年 2005年 2006年 2007年 そして以下が1996年から2007年までのYAHOO。どんどん情報量が増えていってるのがわかります。 www.yahoo.com back in 1996 AXT Magazine 1996年 1997年 1998年
クリエイティブコモンズライセンスにて提供されており、無料で使うことができます。また、16x16、22x22、32x32の3種類のサイズのPNG画像以外にも、SVG形式で提供されているため、好きなサイズに変換して利用することも可能です。 ダウンロードは以下から。 Tango Icon Gallery - Tango Desktop Project 使用条件についてはこのページの「Terms Of Use」に書いてあります。 また、SVG形式から好きなサイズのPNG形式画像に変換するには、フリーソフトの「Inkscape」を使うと簡単です。 Illustratorのようにベクター画像を扱うフリーソフト「Inkscape」 - GIGAZINE 起動したらSVG形式のファイルを開いて、「ファイル」→「ビットマップにエクスポート」を選ぶ。 あとは幅と高さを設定して「エクスポート」をクリックすればO
16×16、22×22、32×32、48×48、64×64、128×128までの各サイズがそれぞれ600個以上、全合計で3600個ぐらいある無料で利用可能なアイコン集、それが「Crystal Clear」です。クリエイティブコモンズライセンスで提供されており、PNG形式で提供されています。 ダウンロードは以下から。 Everaldo.com : Crystal Icons http://www.everaldo.com/crystal.html アイコンの一覧は以下から見ることができます。 Crystal Clear - Wikimedia Commons http://commons.wikimedia.org/wiki/Crystal_Clear もともとは以下の画像のように、LinuxのKDEのために作られたアイコンセットと言うことで、そのライセンスが適用されているようです。
ということで、今まで数限りなくネットのあちこちで紹介されてきたCSSデザイン関連のサイトがリスト化されてまとめられたようです。これだけあれば当分はブログなどのデザインのネタに困ることはなさそう。インスピレーションを得るのに使うもよし、デザインの参考にするのもよし、知っておいて損はないものばかりです。 リストは以下の通り。 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards http://www.cssbeauty.com/ CSS Drive- Categorized CSS gallery and examples. http://www.cssdrive.com/ Stylegala - Web Design Publication http://www.stylegala.com/ CSS Mania http:
ウェブデザインに限らず、何かパソコンを使ってデザイン関連の仕事をするにはあの「Photoshop」を使いこなすことが必須らしいとはわかっていても、いまいちどういう風に使えばいいのかわからない、あるいは、仕事でPhotoshopを使ってはいるが必要な機能のみを使っているだけであって、ちょっと凝ったことを聞かれると即答できないのでテクニックをブラッシュアップしたいと思っている……そんな人向けに役立つPhotoshopをマスターするためのチュートリアルをいろいろと集めてみました。時間のあるときにでも少しずつ眺めていけば、なんでもできるようになるかも。 チュートリアルの詳細は以下の通り。 まずは基本的なテクニックを具体例と一緒に解説しているサイトを3つほど。初級テクニックから高等テクニックまで具体例を交えて解説しています。 Photoshop Tutorials from PhotoshopCAF
つまり人間はページを見る場合、「F」の字を描きながらページ全体を見ているというわけ。 これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうで。 で、その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描くというわけ。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。 F-Shaped Pattern For Reading Web Content (Jakob Nielsen's Alertbox) http://www.useit.com/alertbox/reading_pattern.html 第1段階： 訪問者は最初にページの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
