qumk.net

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

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

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

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

効果的なページタイトル
• ページタイトル：サイト名の順がベスト

どのページにも設置するグローバルナビゲーションの意味
• アイデンティティ：そのサイトがどのようなサイトであるか？
• 目印：ユーザーが今いる位置を知る
• ユーティリティ：サイトマップ、FAQ、Q&A、ヘルプ、検索
• 移動：第1階層、または重要なページへのリンク、トップページへのリンク

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

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

拡張性のあるレイアウトを考える
• 今後増える予定の情報量
• 更新ものの情報の発信スペース
• 季節ごとのデザイン変更

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

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

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

表示スピードと応答時間
• 無駄なソースを書かない
• 画像は最適化し軽くする
• 大きな画像はスライスする

受け売りではないですが、
Well Designed Mac App Websites
という記事を見つけました。

まぁ、いっぱい便利そうなアプリケーションが紹介されてるじゃないですか！
ということで個人セレクト。

Sequel Pro

MySQL database management application

MySQL使わないけど。。ローカルにこういう編集もできるアプリがあれば
とても便利かなぁと。ブラウザからじゃやはり重いですしね。

Coda

code editer

これは実際試用してるんですが使いやすいです！
なのでセレクトしてみました。リファレンスのカスタマイズができます。

Pixelmator

image editer

photoshopに近いことは大体できちゃうみたいです。
UI自体似ている気がするのは気のせいでしょうか。。

FontExplorer

font管理アプリ

よくあるフォント見られますよってのと何が違うかなんですが
フォント自体を一覧印刷できる、オンラインストアから直接購入できる。
うーん、それくらい？でもあった方が助かるアプリケーションです。

紹介したはいいですが、すべて有料です。
でも試用期間があるのでさくっと試してみるのもありですね。

他にもいっぱい紹介されてるのでご覧になってみてください。

参考：
Well Designed Mac App Websites

flasherではないですが、flashの諸先輩方のブログをチェックさせて頂いております。

昨日、Adobe Flash CS5 (Beta) によって作られたiPhoneアプリ、Simple Metronomeがリリースされました。
製作者はfladdict 深津さん。もちろん早速ダウンロードしてみました。
下はアプリのUIの画像です。

参考：Flashで作った iPhoneアプリがリリースされたよ

昨日としてはシンプルなMetronomなんですが、
ああ、これFlash CS5で動いてるんだなっとしみじみ。

まだまだ技術的にはiPhoneアプリなんて作れませんが、
先日のhigh5でAdobe sessionのことをちらっと思い出しながら。
・iPhoneアプリのファイル形式ipa形式で直に保存が可能
・ローカルからiTuneにコピーでアプリの審査が受けられる
なんとかおっしゃっていたような。。
ローカルから審査っていうところが、開発者の方には便利なのかな。
期待度が高まります、Flash CS5！

このリリースの流れを受けて
多数のブログで記事が取り上げられているのを拝見しました。

その中でちょっとひっかかったものを。それがこちら。
trick7さんのDieter Rams のデザインの10大原則という記事。

Braun 社Dieter Rams さん
デザインの10大原則

良いデザインは革新的である
良いデザインは機能的である
良いデザインは美的である
良いデザインは製品をわかり易くする
良いデザインは出しゃばらない
良いデザインは正直である
良いデザインは長持ちする
良いデザインは細部まで周到である
良いデザインは環境にやさしい
良いデザインは最小限である

もう衝撃的というかその通りじゃないかという。
この10原則すべてを満たしたモノってあるかな。。

個人的にこれをproductに置き換えて考えると、なかなか出会えてないなと思います。
個人の主観ですが最小限に抑えられて
出しゃばらないということさえクリアできていないと思う。
それはもう、パッケージにしろ、街並みにしろ、ディスプレイにしろ。

本質を見るのに飾りがそんなに必要かと思うくらいこってりしている。

こってりしているデザインが元々好きではないんですが、
いつも思う事があります、何事にもおいて
飾るより削ぎ落とす作業の方が何倍も難しいと。

ぜひ原文を読んで感じてみてください。

(via:デザインの10大原則）

ちょっと横道反れてメモ的にデザインをする時に便利な色々を。

まずwebsite作りに結構めんどくさいモック作り。

webサービスで簡単に作れるツールがあります。

mock

簡単で簡潔、ついでにサービス自体のデザインもcoolです。

gloo.com

他にもモックアップ系のサービスあるみたいで
mockingbird
fluidia
など。時間がある時にどれが使いやすいか比べてみるといいですね。

続いてはデザインする時点になって心強いフリー素材たち。
できるだけ海外サイトを日々見るようにして使わない時も好みのものを
集めたりしています。日課になりつつありますね。

font

minimalで視覚的にも美しいと感じるフォントを集めています。

fontsquirrel
ripetype
myfonts
fontshop
deviantart
有料サイトの無料コーナーなんかもチェックします。

detail

次にillustraterやphotoshopの素材。
Photoshopの無料パターン：20 Places To Download Free Pattern
Photoshopのショートカット集： Unknown Tricks and Time-Savers
こういった記事によく無料素材が紹介されているんですが、
developer向けのサイトを英語を読む練習も兼ねて購読するようにしています。

aceinfowayindia.com
devsnippets

technic

なかにはおおって思う記事もあったりして。
14 Helpful Cheat Sheets for Front-end Web Development
10 NEW WordPress Wanted Hacks and Powerful Techniques
Create a awsesome images gallery using css3 and jquery
10 Beautiful Video Blogging WordPress Themes
と、まぁ、こんな感じで実際のwebデザインをする時に備えて
inputを増やしておくことは最大限のoutputにつながると思うんですね。

あ、そうかむしろここでアタシがチェックした情報を書けばいいんだよねw