Archive for the ‘webdesign’ Category

webdesign:usability

4月 6th, 2010 by q | No Comments | Filed in design, webdesign

基礎の見直しというか新しいサイト作りに用にちょっとめも。
素人極まりない感じですいません。

制作ルール
【企画書】
サイトのあるべき姿や方向性、想定ユーザーを定義する
【ワークフロー】
作業の手続きや処理ルールを規定する
【スタッフリスト】
各スタッフの役割と責任を明確にする
【スケジュール表】
作業工程の明確化と進捗管理
【ソートアウト】
各ページファイルの名付け、階層、カテゴリー分けなどの情報整理
【サイトマップ】
各ページのリンク関係と構造の設計
【ワイヤーフレーム】
各ページにおいてコンテンツの配置やサイズ指定
【チェックリスト】
ユーザビリティ評価、基準チェック
【システム仕様書】
システムの概要、機能と実装の環境を指定

ナビゲーションの使い分け
ナビゲーション要素
タイトル
グローバルナビゲーション
ローカルナビゲーション
フッターリンク
テキストリンク
プルダウンメニュー
パンくずリスト
キーワード検索
DB検索

    実店舗に学ぶ

  • 商品のある場所が解りやすいか?
  • 一定の秩序に基づいて商品が整理整頓されて配置されているか?
  • 買い物カゴの中身はいつでも確認できるか?
  • あいまいな問いかけに対応できる検索エンジンはあるか?

    効果的なページタイトル

  • ページタイトル:サイト名の順がベスト

    どのページにも設置するグローバルナビゲーションの意味

  • アイデンティティ:そのサイトがどのようなサイトであるか?
  • 目印:ユーザーが今いる位置を知る
  • ユーティリティ:サイトマップ、FAQ、Q&A、ヘルプ、検索
  • 移動:第1階層、または重要なページへのリンク、トップページへのリンク

    パンくずリスト

  • 階層構造のサイトかリニア構造のサイトに有効
  • デファックトスタンダード(認知が多い事実)に近い手法をとる

  • トップへ常に戻れる様にする
  • アイコンはメタファを大切にする
  • リンクとアンカーテキストは箇条書きにする方が見やすい
  • 画像ボタンリンクの場合立体感を出して押せるという意識を持たす
  • リンク先を想定させられるリンク名称をつける
  • 検索用入力窓にはクエリ15文字以上が妥当
  • 検索結果の表示は10〜20件程度表示順の方が大切

    拡張性のあるレイアウトを考える

  • 今後増える予定の情報量
  • 更新ものの情報の発信スペース
  • 季節ごとのデザイン変更

    デザインについて

  • 黄金比を参照する 1:1.618
  • フォントサイズは%で表示しよう
  • 配色の分配を考える ベースカラー70% サブカラー25% アクセントカラー5%

    ページの一貫性について

  • サイト内の重要なリンクは必ず同じ位置に置く
  • リンクへの用語の統一性を保つ

    コンテンツのユーザビリティ

  • カテゴリー分けがしっかりわかる
  • 画像を使用した直感的な情報伝達が可能
  • 伝わりやすい商品説明文
  • ユーザーの評価を入れる
  • 対象が分かる大きな画像を使う
  • ユーザーが欲する情報を想像しフォローする
  • 使う場面をイメージした写真を使用する
  • セキュリティについての表示をする
  • 画面表示以下への情報誘導する為にローカルナビと本文の段落を揃えない
  • ポップアップウインドウは使用しない

    表示スピードと応答時間

  • 無駄なソースを書かない
  • 画像は最適化し軽くする
  • 大きな画像はスライスする

Tags: ,

things:web desigh

1月 28th, 2010 by q | No Comments | Filed in design, webdesign

普段は調べる事がないとお目にかからない
ドイツのweb desigh特集が組まれていました。
その中でちょっと気になったものをいくつか。

iconwerk

iconのlibraryサイト(たぶん)that’s ドイツ!みたいなミニマルで美しいdesign。

neubauladen

font やイラストなどの素材のshopのサイト。
designはかっこいいんだけどshopとしては解りづらいUIでした。

designschneider

無駄なものが一切なくこれだけ削ぎ落とせたらすごいと思う、
インテリアデザイナーのサイト。productが生きています。

その他にもかなりの数のサイトが紹介されています。
やっぱりdesignにもお国柄はでる感じなのでしょうか。

そしておまけ。
日本では出ないだろうdesignのサイト。
グラフィックデザイナーさんの個人サイト、インパクト強烈です。
(あえて小さく貼っておきますw)
mediziehm

(via:Showcase Of Web Design In Germany)

そしてこっちがアメリカなThe 35 Most Beautiful Websites in 2010

toriseye

twitter系のサイト。折り紙の鳥が飛んできて最新tweetが流れてきます。
torieyeってドメインが、、もう。。

trinta

内容は薄いけどそれをdesignでカバーしているサイト(失礼ですみません)
何語かわからないけどデザイナーさんの個人サイトみたいです。

creativespaces

ニューヨークの制作会社さんのサイト。
コラージュがかわいい感じです。

やっぱりここだけ見てもお国柄が出てるような気が。。
日本はどうなんでしょうね。

おまけ:
30 Stylish jQuery Tooltip Plugins For Catchy Designs


Tags: