Archive for the ‘design’ tag
フッターサイトマップのデザイン
に「Key Footer Information」として、フッターの情報として重要な6つを取り上げています。もうどのウェブサイトを見てもこれらの情報は掲載されていると思いますし、ある意味デフォルト (標準値) であるとも言えます。
フッターに置く重要な要素
- About Us Link/リンク (について)
- Contact Us Link/お問い合わせ (連絡先)
- Terms of Service/サイトの利用方法 (利用規約)
- Privacy Policy/プライバシーポリシー (個人情報の取り扱い)
- Site Map/サイトマップ
- Address and Phone Number/住所や電話番号
ただし、このうち「サイトマップ」については、単にサイトマップページへのリンクを置くこともそうですが、最近のウェブサイトでよくみかけるフッターにサイトマップそのものを掲載してしまうケースをよく見かけます。この「フッターサイトマップ (仮称)」について参考になるエントリーがあったので合わせてご紹介します。
「Benefits of Placing a Sitemap in the Footer」として、フッターにサイトマップを置くことでの価値を6つあげています。
フッターにサイトマップを置く6つの価値
- ユーザーの興味や関心を引くため (クリックや滞在時間を持続させるため)
- ユーザーが情報を見逃さないようにするため
- リンクを促進するため (重要な情報に誘導するため)
- ユーザー (読者) がすぐ次に進めるよう時間の節約になるため
- ユーザーのクリック (数?) の節約になるため
- 機能的なレイアウトデザインのため (サイトを大きく見せるため)
これと、あとはやはりSEOになるでしょうか。ひょっとしたらスパム扱いになりそうな気がしなくもないですが、全ページのフッターにサイトマップを掲載して被リンクを多く持つことはSEOとしては有効だと言われます。
ということで、いくつかの事例を取り上げた上で、Tipsとして下記図にまとめられています。
フッターサイトマップのデザインにおける3つのTips
- サイト構造に合わせて分類する
- タイトルおよびヘッドラインを使用する
- 一貫したルールでコンテンツ (リンク) を並べる
これとぜひ取り入れておきたいのが、下記でしょうか。
- パン屑リスト (経路と現在位置)
- 履歴 (最終訪問ページやそのカテゴリー)
- 目的別リンク (ファセット分類)
そのほか、たくさんの事例 (下記にリスト) と合わせて紹介されているので、参考にしてみてはどうでしょうか。
Web Design Basics
「エクスペリエンス」を直訳すると「体験」になると思いますが、「おもてなし」という言葉で思い浮かぶ方もいるかと思います。
ウェブサイトを設計する際に、どう使ってもらうとか考えると思うのですが、その「どう使ってもらうか」を「エクスペリエンス」と考えた場合、そのためのルール作りには一定の方針が必要になってきます。
「行動指針」という言葉を聞いたことがあるかと思いますが、ウェブサイト上におけるエクスペリエンスを実現するための方針とはまさに「行動指針」に相当するものです。
行動指針の代表的な例としては、リッツカールトンやディズニーがあります。詳しくは、それぞれのサイトを参照してもらうとして、これらのサービス提供者は、そのサービス精神を末端まで行き届かせるために指針を掲げています。
ウェブサイトに関わる人を「ウェブサイト提供者」とした場合にも同じことが言えるわけで、提供する側には常に「HOW」の部分で「指針 (ポリシー)」が必要になります。
ディズニーの例
ディズニーのテーマパークには4つの「行動指針」があります。
- Safety (安全)
- Courtesy (礼儀正しさ)
- Show (ショー)
- Efficiency (効率)
「OLCグループCSRの取り組み」には次のように書かれています。
ディズニーテーマパークには、「SCSE」という行動指針があります。【Safety 安全】、【Courtesy 礼儀正しさ】、【Show ショー】、【Efficiency 効率】の頭文字をとったもので、全キャスト（従業員）にとって、ゲストに最高のおもてなしをするための判断・行動のよりどころとなります。東京ディズニーランド、東京ディズニーシーのキャストは、入社時に「SCSE」を理解するところからスタートし、常にそれを心に持ち続け実践しています。「SCSE」は、その並びがそのまま優先順位を表しており、安全がすべてに優先するということを示しています。
東京ディズニーリゾートサイトにも「エクスペリエンスのための四つの鍵「SCSE」」というのが掲げられています。
テーマショーを通して、ゲストに最高のエクスペリエンス（素晴らしい体験）を提供するための要素は SAFETY（安全性）、COURTESY（礼儀正しさ）、SHOW（ショー）、EFFICIENCY（効率）の四つの言葉に集約されます。この四つの言葉の頭文字「S・C・S・E」は、「人を大切にする運営」を具体的に表現したものです。
ということで。
自分たちが今つくっているウェブサイト、ウェブサービスには指針がありますか?
また、それはどんな指針でつくられていますか?
ウェブサイト設計の重要さはこの指針の重要さに気づくところからはじまります。
Web Design Skills
Web Design Skills: Your Take : D. Keith Robinson’s Asterisk
http://www.7nights.com/asterisk/archives05/2005/05/web-design-skills-your-take
スキルについていろいろ探っていたんですが「Web Designer」に必要なスキルってこういうことなんでしょうかね。
- General Communication
- Interpersonal Communication
- Problemsolving
- Patience
- Adaptibility
- Information Architecture for the Web
- Visual Design
- Programming
- Web Development
- Writing
- Project Management
って、どこまで求めるねんて感じですが……。
誰かのコメントじゃないですが、「General Communication」が一番はじめにある点は興味深いですね。
デザインセクションに見る 創造的マネージメントの要諦
尊敬する山岡俊樹という大学教授がいるのですが、氏が編著した書籍『デザインセクションに見る 創造的マネージメントの要諦 (ようてい)』を紹介します。
Amazon.co.jp： デザインセクションに見る創造的マネージメントの要諦: 本: 山岡 俊樹
デザイン畑からシステムを考える今の自分の立場からしても非常にわかりやすく、まとめて読むことができるので、オススメです。
ここで述べられている一部を要約すると、「デザイン」を以下のように分類にすることができるらしい。
- 可視化作業
- システム系デザイン業務
- 研究業務
- 調査業務
- 評価業務
- 提案業務
- ソリューション業務
- 全社業務
いずれも、「有機的思考力である論理力」が必要な能力としているので、まさに今求められていることとシンクロします。もちろんADにしろIAにしろ同じデザイン業務として一緒に考えています。
また、「考える作業」と「実行する作業 (可視化)」とで分けた場合、「考える作業」にウェイトを置くべき (教育機関は注力すべき) とあります。こちらも納得。
さらに、「デザイン」には、既存の学問である――コンピュータサイエンス、人間工学、認知科学、システム科学、経営学、社会学、統計学、機械工学、建築学などが下支えをするため、これらのうち2つ以上をマスターする必要がある、とも謳っています。
たとえば「人間工学 > デザイン」の人材であれば、ユーザリクアイアメントの抽出やユーザビリティ関係の業務をこなすことが可能であろう。という具合。
いろいろあるので自分で読んだらいいと思うのですが、デザインの分類について少し詳細を書き出すと以下のようになります。
01) 可視化作業
工業デザイン、パッケージデザイン、グラフィックデザイン、他
02) システム系デザイン業務
ユーザーインターフェースデザイン、ユニバーサルデザイン、エコロジーデザイン、他
03) 研究業務
人間工学研究、感性工学研究、認知研究などによる人間系の研究、多用なユーザーの基礎データベース構築 (生理・認知・身体など)、システム系の研究、他
04) 調査業務
ユーザリクアイアメント抽出、ユーザ調査、他
05) 評価業務
ユーザビリティ評価、ユニバーサルデザイン評価、他
06) 提案業務
商品提案 (単なる形状提案ではなく、商品計画をも包含)、コンセプト構築、他
07) ソリューション業務
システム設計のユーザ部分、システム提案、コンセプト構築、システムの運用面の構築 (マクロエルゴノミクス)、他
08) 全社業務
ブランド戦略、CI、他
自分が、これらのうちどういう分野の業務が得意か、どういう分野に興味があるかなどを計る指標にもなるかなと思います。
プロセス オブ ウェブデザイン――企画からデザインへ 落とし込みの技術
karadesign原さんからのお声がけで『プロセス オブ ウェブデザイン――企画からデザインへ 落とし込みの技術 (WEB CREATORS LAB. 著)』への寄稿をしましたのでご紹介。
本邦初！「Nokia」「トヨタist」「KDDIリスモ」…etc.
ウェブデザインの過程で発生した実際の企画書、ラフ、仕様書など全てを見せて解説！本書は、デザインが生まれるプロセスで発生する成果物（企画書、ラフ、スケッチ、メモ、モックアップ、プロトタイプ、サイトマップ、仕様書、要件定義などなど）を題材にして、ディレクションを行う立場の人が折々で発生する問題をどう解決していくか、同時にクライアント、その上司、デザイナーといった立場の人が行うべき大切なことも含めて、実際の事例に関わった人が解説していきます。
制作の方法やワークフローに関する書籍は多数出ていますが、依然としてウェブのデザインプロセスで生まれる成果物はブラックボックスに包まれています。実例を中心に扱った書籍はありません。ウェブ業界に携わる方、これから業界を目指す方にとって非常に価値ある一冊です！！■スペシャルインタビュー■
KDDI：1年の構想を経て、「LISMO」デザインが誕生！
Method：国際的なWebデザインの落とし込みプロセスがわかる！■事例（抜粋）■
◆ガリバー221616.comプロジェクト
◆Tokatsu Film Festival 2005 東葛映画祭
◆Nokia6680 Vodafone 702NK IIのブランディングサイト
◆id＝Nagano「長野のWebを楽しく」
◆ブログdeバーチャル駅長の一連プロジェクト
◆マクロメディア「EIGHT THE PROJECT」プロモーション
◆くすぐるスタイルist
◆auトップページのリニューアル
◆ラーメン花月ショップサイトリニューアル
ということで、昨年末から原さんからお誘いのお話があってから幾度かの修正などを経て、なんとかAmazonで予約可能にまでなりました。
わたしは、目次にある「auトップページのリニューアル」を12P程度ですが担当しています。
この書籍の企画は、10数人の現場で活躍するディレクターを対象に事例を紹介し、デザインに落とすまでのプロセスをフィーチャーしたものです。
現場のラフやサンプルも掲載してあるので必見です。
Designing Interfaces
Jenifer Tidwell氏が『Designing Interfaces』という書籍を発行したらしい。
About the Book – Designing Interfaces
http://designinginterfaces.com/
内容は下記――
- Information architecture for applications
- Navigation
- Page layout
- Maps, graphs, and tables
- Forms
- Graphic editors
- Color, typography, and look-and-feel
下記ブログにもエントリーがありました。
GUUUI – Designing Interfaces: Patterns for Effective Interaction Design
http://www.guuui.com/posting.php?id=1759
Action-Centered Design (アクション・センタード・デザイン)
昨晩 (04/05 (水))、「TOOTH TOOTH (恵比寿)」でユーザー・エクスペリエンス関連の集い「UX Nomikaiパーティー」に参加しました。
そこで長谷川さんと話していた話題に「ACD: Action-Centered Design (アクション・センタード・デザイン)」があるのでメモっておきます。
「UCD: User-Centered Design (ユーザー・センタード・デザイン)」は利用者中心の考え方になるわけですが、必ずしも利用者を中心に考えることが正しいというわけではなく、利用者の行動 (Action) から設計をするという考え方のようですな。
UCDについてはIBMのサイト参照。
IBM Ease of use – UCD – UCDとは – Japan
http://www-06.ibm.com/jp/design/eou/2center/2cen_1.html
Yahoo! Design Pattern Library
Yahoo! Design Pattern Library
http://developer.yahoo.net/ypatterns/
にて米Yahoo!のデザインパターン集が公開されています。
これらはLouis Rosenfeld社が地道に集めていたということでしょうかね。
なにげにユーザー・インターフェースについてもあったりするようですが。
Yahoo! UI Library
http://developer.yahoo.net/yui/
こういったパターン集というのは、実はすごく重宝するのですがボランティアじゃないとなかなかできないのが世の難しいところ。
ナビゲーションやボタンの収集だけでもかなり参考になりそうですが、いかがでしょう。
もちろん「Louis Rosenfeld」のブログから引用しています――
Bloug: Yahoo! Design Pattern Library Launches
http://louisrosenfeld.com/home/bloug_archive/000423.html
Designer or Information Architect?
Designer or Information Architect? : D. Keith Robinson’s Asterisk
http://www.7nights.com/asterisk/archives05/2005/12/designer-or-information-architect
すげえオモロイですね。
Keith氏が言っていることは自分で考えている悩み (?) とも合致しているし、それを解決できないままの状態でみんなコメント寄せている状態が。
このへん自分の中では結構整理がついたんですが、いかんせん日々の業務の中では整理できないまま進行しているのが現状です。
今度議論しましょう (誰かと)。
Top Ten Web Design Mistakes of 2005
Top Ten Web Design Mistakes of 2005 (Jakob Nielsen’s Alertbox)
http://www.useit.com/alertbox/designmistakes.html
ということで、Jakob Nielsen氏の「Alertbox」として「Top Ten Web Design Mistakes」の2005年度版が公開されました。
- Legibility Problems
- Non-Standard Links
- Flash
- Content That’s Not Written for the Web
- Bad Search
- Browser Incompatibility
- Cumbersome Forms
- No Contact Information or Other Company Info
- Frozen Layouts with Fixed Page Widths
- Inadequate Photo Enlargement
また、品質管理の基本として下記のことは抑えておくことを謳っています。
- text they can read;
- content that answers their questions;
- navigation and search that help them find what they want;
- short and simple forms (streamlined registration, checkout, and other workflow); and
- no bugs, typos, or corrupted data; no linkrot; no outdated content.