デザイナーのacurryです。

今日はビジネスの現場でよく使われる
Webデザインの用語について書きたいと思います。

IT業界は、ただでさえ横文字用語が飛び交っている業界です。
結局「用語なんて知ってても知らなくてもどっちでもいいじゃん」
と言ってしまえばそれまで、立場としてはアリなのですが、
お客様のところに言ったときに「...？」となるよりは、
知っておいた方が何かと得をするものです。

というわけで、私が実際にお客様との打ち合わせや
実際の現場でよく耳にするなと思う
Webデザイン関連の用語をお届けします。

IT用語まで手をだすと収集がつかなくなるので
あくまでwebデザインに関するものだけ。
かなりくだけた説明なので、詳しい意味は個別に検索してみてください。

アイキャッチ

主にデザインの中で一番相手の注意をひくもの。目立つ物。

アイトラッキング

ユーザの目線の動きを可視化すること。

（情報）アーキテクチャ

知識やデータの組織化を意味し、 「情報をわかりやすく伝え」「受け手が情報を探しやすくする」ための表現技術のこと。

RGBとCMYK

RGB→web用、CMYK→印刷用と覚えておけばとりあえず問題ないです。

カラースキーム

どの色をどの配分で使っていくかという計画です。

コンポジションワーク

各パーツ、構成部を分類し配置すること。レイアウトテクニックのひとつ。

画面利用率

そのデザイン全体に、どれだけ空きがあるかということ。 ※関連語：ホワイトスペース

ジャンプ率

本文に対しての見出しの大きさの違い。これが大きいとメリハリが出ます。

スプラッシュページ

雑誌で言うところの表紙のようなもの。サイトイメージを伝えるもの。
例えばトップでフラッシュが大きく使われているようなページがこれに該当します 。

ティザーページ(サイト）

発売前の新製品等に関する断片的な情報のみを公開し、
閲覧者の興味を引くことを意図したプロモーション用のページ。
キャンペーンサイトなんかだと、作る事があります。

トーン＆マナー

広告表現の核となるコミュニケーションメッセージやデザインに
一貫性を持たせること。広告系の会社に行くと耳にします。

ユーザインターフェース

UIとも略されます。
コンピュータシステムとユーザが情報をやり取りするときの境界面、
パソコンでいうと画面とか目に見えるシステムの部分ですね。

ユーザビリティ・アクセシビリティ

ユーザビリティ：「使いやすさ」のこと。
アクセシビリティ：万人が不自由なく利用できる状態にあること。
混同されやすい。

ワイヤーフレーム

Webページの大まかなコンテンツやレイアウトを 大まかに試作したものです。
デザインラフを作成する前にまずこれを作成することが多いですね。


逆にWebデザイン・ITに関する専門用語を
話している相手が知らないというケースも多々あるので、
そういった際はわかりやすい言葉に置き換えることも大事です。

状況に合わせて必要な言葉を選んでいけるように、
日々精進したいものです。

かのうです。
新年明けましておめでとうございます。本年もどうぞよろしくお願いいたします。

先々々週の ハシモト さんの記事で少しふれていた「TypeKit」について、使用方法とサンプルについて記載したいと思います。

TypeKitとは？

@font-faceを簡単に利用することが出来るサービスです。 @font-faceとは、使用するフォントの名前、そのフォントデータのURI、そしてその使用条件を記述することでフォントデータを指定する際に用いられるCSSです。 TypeKitを使えば"ユーザ側が持っていないフォント"でも画像を使わずに表現することが可能なのです。TypeKitは@font-faceに対応したブラウザ （Firefox 3.5、Safari 3 、IEも） であれば表示できます。日本語も対応すれば非常に表現の幅が広がりますね！

TypeKitのフォントサンプル

・Continuo Web

ABCDEFG HIJKLMN OPQRSTU VWXYZ

・Scrivano

ABCDEFG HIJKLMN OPQRSTU VWXYZ

などなど、トライアル版でもフォントはもっとたくさんあります。
ただトライアルで使用できるサイトは1つ、フォントは2つまでです。

TypeKitの使用方法

1. アカウント登録

TypeKitの右上「Register 」をクリックして、使用するプランを選択する。プラン名下の「Sign up」をクリックし、アカウント登録と使用するサイト登録を行って下さい。

2. JavaScript の埋め込み

登録後表示された JavaScript コードを登録したサイトの head 要素内で読み込みます。管理画面 （Kit Editor） のヘッダにある 「Embed Code」 からも取得できます。

3. フォントを選択

「Browse by Style」のフォントカテゴリかALLを選択し、フォント一覧から使用したいものは「Add」をクリックします。後ほど変更可能です。

4. CSSを指定する

管理画面にフォントを追加したら、右側の「Selectors」部分で、class 名（.example）や id 名（#example）、要素名（span）を登録して、あとはサイト内で指定するだけ！設定を変更したら、左下にある 「Publish」 ボタンを押して下さい。もちろんデフォルトで設定してあるclass名をそのまま使用してもOKです。 「Advanced..」 をクリックするとcssのサンプルも明記されているので、それを使用しても大丈夫です

以上、まだ試してない方はぜひー


余談ですが、2010年は寅年ということでtwitterのシカータくんもトラ仕様ですので、ぜひ見てねっ　http://twitter.com/shicata

こんばんは、ハラです。

2009年もあとわずか！ということで、今年最後のラボブログ更新です！
年末恒例の（？）2009年を振り返ってみようと思います。

まずは、googleがCM広告をしたこの年、
○○とは　で検索されるようになりましたね。
Google Zeitgeistによるキーワードランキングです。

Google Zeitgeistは検索数のランキングではなく、
検索の上昇率を元にデータ化しているので、
ランクインしているものは今年もっとも注目が多かったキーワードランキングになっています。

急上昇ワードランキング

1. ドラゴンクエスト 9
2. 田中 美絵子
3. bing
4. 北野 誠
5. シンケンジャー

「○○とは？」ランキング

1. twitter とは
2. FX とは
3. CSR とは
4. RSS とは
5. アドオン とは

急上昇ワードランキングに「ドラゴンクエスト 9」、「○○とは？」ランキングに「twitter とは」がそれぞれ1位にランクインされていますね。
GoogleでYahooを検索するということもまだあるようです。

2009年、サイブリッジでは社内のみなさまがドラクエ9にハマり、水口代表・シカータ君はついったーを始めました。
先日の説明会でもY先輩、M先輩がおっしゃってましたが、「情報にどん欲になる」「流行に乗る」というのはこういうところから始まるものなのかもしれませんね。

ちなみに2008年だけで900%の成長を達成したTwitterはWebのアカデミー賞といわれる程有名なWebbyでWebby Breakout of the yearを受賞いることでも有名です。


米Yahoo・米Googleから共にランキング1位にあがったのは、世界規模に大きな話題を呼んだ、Michel Jacksonでした。

Windows7など新しいキーワードがありつつ、
Yahooの6位にはNarutoがランクインされています。
ちなみにアメリカのオタク文化にでもっともポピュラーなのは、Narutoなんだそうです。（米友人談）

窓の社 大賞 2009では、Windows7を抜いて「Visual Studio 2008 Professional Edition」が大賞に輝き、個人的に意外な結果になりました。Windows7の発売が10月だったからかもしれませんが。


では、続いてWebデザインのトレンド2009年。
SMASHING MAGAZINEからエントリーされた Web Design Trend for 2009と、追加エントリーから。

エレメント

透過PNG。
IE6用の優良Javascriptが増えて、積極的に透過PNGを取り入れているサイトがどんどん増えてきたのも今年です。

テキスト置換：
HTMLテキストをJavascriptでFlashムービーに置き換え、
アンチエイリアスが掛かった選択可能なテキストとして表示させたり、
テキストの上にグラデーションの透過PNGをかけて表示、などといった手法も出てきてました。

リッチユーザインターフェース、コンテンツ

モーダルダイアログボックスなどJavascriptでのポップアップボックス（Lightroom等）、
Flashを使用した動画配信や、Flash/Javascriptのスライドショー形式が増え始め、
あらゆるサイトで取り入れていました。

レイアウト

ページ遷移無し・1ページのみのレイアウトや、色鮮やかなグラフィックを全面に出して印象付けるレイアウト、
また、ミニマムに余白スペース領域をとったレイアウトといったレイアウトに人気がありました。

テイスト

水彩画デザインを始め、手書き、ノート・メモ帳など、
テイストとしてはレトロ・ビンテージ、グランジ系といった
どちらかというとモニター外で見かけるモノを取り入れたデザインなどが注目されていました。

SMASHING MAGAZINEからはまだですが、Web Design Ledgerでは、2010年のトレンドが発表 されています。
レイアウト・エレメントデザインの他にも、CSS、Scriptなどにも勿論、トレンドってあるんです。

たとえば色。
ちょっとWebから離れますが

PANTONEが選んだ2010年のトレンドカラー

参考：Splashes of sunshine for spring 2010（英文）
一般的に流行色と言われるものは、
INTERCOLOR、JAFCAが発表していますが
PANTONEからも毎季節のトレンドカラーが発表されています。
PDFもDLできるので、是非みなさんチェックしてみてください。


それでは、みなさん
メリークリスマス＆よいお年を！！

こんばんは、デザイナーのやまぴーです。

うちの会社では、メインのデザインアプリケーションとしてAdobe Fireworksを使用しています。（サブアプリケーションとして、PhotoshopやIllustratorも使用します）

Fireworksは、Webのデザインツールとしては、もの凄く使い勝手が良い。
効率化を重視している社内では、いかに早くキレイなデザインを作るか
というところも重要なポイントなので、とても役立っています。

そこで今日は、以前から気になっていたFwの拡張機能を
役にたちそうなものをピックアップし、実際に試してみました。

FontBrowser

FontBrowser

Adobe Fireworks CS3\Configuration\Command Panels　に、解凍したswfを入れる。
ウィンドウメニューの内にfontBrowser-2-001があればOK。

下記のような感じで、任意の文字列のフォントを確認できます。
デフォルトのフォント機能より、全然使いやすいですね。

Web 2.0 styles

Web 2.0 styles

スタイルパネルから、web20styles.stlを読み込む。

下記のような感じで、web2.0っぽいスタイルが登録されます。

デザイナーは基本使用しませんが、
たとえば営業マンやプログラマーが「手軽にデザインしたい」
という時には便利なのではないでしょうか。

Export Commands

Export Commands

書き出しのコマンド集です。実行すると、コマンド に追加されています。
急いでる時や、画像を大量に書き出したいときには結構便利です。

• Export Selected Elements:選択したものをパーツごと分けて書き出す。
• Export Selection:選択したものを１枚の画像に書き出す。
• Export All Elements: １度に画面内すべてのイメージをエレメントごとに書き出す。
• Export Full Slices: すべてのスライスを書き出す。

Text v2.0

Text v2.0

テキストに関するコマンド集です。
私は特に下記が便利だと思いました。

ひとつのテキストのなかに複数のスタイルがある時...

選択後、コマンドの中からSplit Text Boxesを適用

すると、スタイルごとにテキストが分割されます

そのほかにも下記のような便利なコマンドが入ってます。

• Merge Text Boxes：テキストボックスを合体
• Paste Text Attributes：テキストのスタイルだけペースト。
• Split Selected Text：選択したテキストを基準にテキストボックスを分割

Fwに関しても、それ以外でも、多くの拡張機能が開発・公開されています。 アプリケーションを自分に便利なようにどんどんカスタマイズしていって、より効率のいい作業をしたいものです。