デザイナーのacurryです。

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

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

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

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

アイキャッチ

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

アイトラッキング

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

（情報）アーキテクチャ

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

RGBとCMYK

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

カラースキーム

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

コンポジションワーク

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

画面利用率

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

ジャンプ率

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

スプラッシュページ

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

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

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

トーン＆マナー

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

ユーザインターフェース

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

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

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

ワイヤーフレーム

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


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

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

デザイナーのacurryです。 今日はクロスブラウザテストができることで最近話題の 「Adobe BrowserLab」 を使ってみました。

Adobe BrowserLabとは

先月14日にアップデートされたばかりのAdobe BrowserLab。
あのAdobeが公式でブラウザ比較のツールを出しているんですね。
AdobeIDがあれば、誰でも無償で利用できます。
比較できるブラウザは下記の通り。

■Firefox　2.0, 3,0, 3.5　　Windows XP, Mac OS X
■IE 　6.x, 7,x, 8.x　　Windows XP
■Safari　3.x 4.x 　　Mac OS X
■Chrome　3.0 　　Windows XP

試しにサイブリッジのコーポレートサイトを レンダリング比較してみます

URLを入力したら、上記のように表示させたいブラウザをリストから選択。

あとは表示される（レンダリング）を待つだけ！
上記はFireFox3.0（左）とIE7、共にxpOSでの比較です。

IETESTERなどブラウザ比較の便利なツールは多くあるのですが、これはやはりmacOSでの確認もできるのがとても便利です！是非使ってみてくださいね。
下記から利用できます。

「Adobe BrowserLab」

今回はウェブ制作に役立つサイトをいくつか紹介したいと思います。

http://www.russellbrown.com/
Photoshop の伝道師、ラッセルブラウンのビデオチュートリアル。
Tips & Techniques から色々見れますが、面白い語り口で英語の勉強にもなります。

http://www.adobe.com/jp/designcenter/video_workshop/
Adobe のビデオチュートリアル、本家が出してるだけあって充実してます。

http://www.adobe.com/support/documentation/jp/
Adobe の公式マニュアル、何百ページもあるマニュアルを
pdf としてダウンロード出来ます。

http://www.csszengarden.com/tr/japanese/
ページ右側からデザインを選択出来ますが、このサイトは css 一つで
デザインを全く変えるというコンセプト。 ソースを見ればかなり勉強になりそうです。

http://flex.org/
Flex の実用的なサンプルやショーケースなど。

http://www.actionscript.org/
同じく ActionScript の実用的なサンプルやチュートリアルなど。

http://cssmania.com/
色々なデザインのショーケース。

今回紹介したもののいくつかは英語でしたが、やはり日本語に限らず
便利なリソースはたくさんあると思うのでまた紹介したいと思います。

こんにちは。逆から読んでもきつつきです。


前回、フラクタルノイズを用いた雲をFLASHで描画するサンプルを掲載いたしました。

今回はこちらを改良し、時間経過とともに雲が変化していくものを作成してみました。

･･･なんか速いですね。。フレームレートを落とせば調整できると思います。

改良箇所は5カ所。まずは変数の追加です。

        public var CloudDataV:Array;    // 乱数速度テーブル
        public var CloudDataA:Array;    // 乱数加速度テーブル

次に、init関数にタイマー処理を追加します。

        private function init(e:Event = null):void
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point
           
            // 背景色との加算合成
            this.blendMode = BlendMode.ADD;

            // BitmasDataの初期化
            screen = new BitmapData( stage.stageWidth, stage.stageHeight, true, 0xFF000000 );
            addChild( new Bitmap( screen ) );

            // 雲データの初期化
            initCloud();

            var timer:Timer = new Timer(1, 0);
            timer.addEventListener(TimerEvent.TIMER, refresh);
            timer.start();
           
        }

タイマー処理に伴い、新たにコールバック関数を一つ追加します。

        private function refresh(e:TimerEvent):void
        {
            renderCloudData();
        }

雲の初期化関数initCloudに、速度テーブルと加速度テーブルの初期化処理を加えます。

        private function initCloud():void {
           
            // 配列の確保＋乱数テーブルの作成
            CloudData = new Array(SIZE + 1);
            CloudDataD = new Array(SIZE + 1);
            CloudDataV = new Array(SIZE + 1);
            CloudDataA = new Array(SIZE + 1);
           
            var i:int;
            var j:int;
            for (i = 0; i < SIZE + 1;++i)
            {
                CloudData[i] = new Array(SIZE + 1);
                CloudDataD[i] = new Array(SIZE + 1);
                CloudDataV[i] = new Array(SIZE + 1);
                CloudDataA[i] = new Array(SIZE + 1);
               
                for (j = 0; j < SIZE + 1;++j) {
                    CloudDataD[i][j] = (Math.random()*2-1.0);
                    CloudDataV[i][j] = 0;
                    CloudDataA[i][j] = 0;
                }
            }
           
            // 乱数テーブルから雲データの作成
            updateCloud();
        }

最後に、renderCloudData関数の変数宣言直後に雲の更新処理を加えます。

            // 雲の更新
            for (i = 0; i < SIZE+1;++i) {
                for (j = 0; j < SIZE+1;++j ) {
                   
                    // 加速度をランダムに変化
                    CloudDataA[i][j] += (Math.random() * 2 - 1.0);
                    CloudDataA[i][j] *= 0.9;
                   
                    // 速度に加速度を加算
                    CloudDataV[i][j] += CloudDataA[i][j];
                    CloudDataV[i][j] *= 0.9;
                   
                    // 速度を乱数テーブルに加算
                    CloudDataD[i][j] += CloudDataV[i][j];
                    CloudDataD[i][j] *= 0.9;
                }
            }

            updateCloud();

処理の内容としては、雲の濃度値を変化させるために、濃度値の1フレームあたりの変化量(速度)と、変化量の変化量(加速度)を設けて、乱数テーブルを毎フレーム変化させています。

FLASH的な部分としては、タイマーによるビットマップデータオブジェクトの描画アニメーションのサンプルです。無駄なフラクタルノイズで着飾ってます。

こんにちは、ぴんしゃんです。

大学時代には社会調査士プログラムというものに参加していて、
統計学や社会調査などを学んでいました。
実は「社会調査士」という資格の第一期生でもあります。

というわけで、今回はクライアントからもよく聞かれる
「おすすめのモバイルアクセス解析」を紹介します。

MOBYLOG

http://www.mobylog.jp/



UIが優れていてさらにシンプルで分かりやすいため、直感的にさわることができます。
アクセス解析はあまりよく分からないというクライアントでも抵抗なく使ってもらえるツールです。
高機能で使いやすいのに、割と低価格から導入できるところもポイントです。

特に行動解析はビジュアル化されて分かりやすいので、離脱ページの分析などに便利に使っています。

うごくひと2

http://ugo2.jp/



無料のモバイルアクセス解析ツールです。商用利用も可能です。
クライアントからはよく「無料のモバイルアクセス解析で何かいいのないですか？」と聞かれるのですが、そんなときはこちらを紹介しています。

基本的な機能は十分に備えていてシンプルで使いやすい、それなのに無料！あついですね。
設置もフッタにちょこっと記述するだけで済むので導入も簡単です。
機能追加もされているので、今後にも期待です。

wellout

http://www.wellout.net/



世界で初めて携帯サイト専用アクセス解析サービスを開始したとして知られています。
SEO、SEMの機能が充実しているので、モバイルSEOに力を入れたいという方におすすめです。


PC版で多くの企業が導入しているGoogle Analyticsですが、
昨年末やっとモバイルにも対応したようです。
http://analytics.blogspot.com/2009/10/google-analytics-now-more-powerful.html
ただ設定が面倒なのでサイブリッジの自社媒体でも実験的に2媒体にしか導入していません。
こちらについてはまだ探っている段階なのでまた追って報告します！