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

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媒体にしか導入していません。
こちらについてはまだ探っている段階なのでまた追って報告します！

昨日水口さんに話しかけたとき、水口さんのPCを見る目が血走ってて怖いと思いました。
ぽこ太です。

ちなみに今水口さんは、マフラーを頭にぐるぐる巻いているのですが、
その理由は水口さんのtwitterをみてみると、体調不良のようです。

（ジャンクフードの食べ過ぎだと思います。）

最近ではシカータくんもやっているtwitterですが、
おもしろいなーと思ったサービスをのせてみます。

私は基本的にブラウザからtwitterを閲覧・投稿しています。

ブラウザ・メッセンジャーを拡張してtwitterを閲覧・投稿

・Firefox
tweetbar 1.0
サイドバーからTwitterを閲覧・投稿

Echofon for Twitter (Formerly TwitterFox) 1.9.4
ステータスバーから新着ポップアップでTweetを通知

・Opera
ついっぺら
UIが日本語なので使いやすいです

・IE/Sleipnir/Lunascapeなど
Twitter プラグイン

・メッセンジャー
Twitt'd
お気に入りのメッセンジャーから更新できる

twitterのPCサイト(日本語版)からだと、
RT:などがまだ使いにくいので、
こういったアドオン使うと楽に投稿できますよね

おもろいサービス

・Foller.me
指定したユーザーの詳細を表示してくれます。
地図とか。

・muuter
特定ユーザーのつぶやきを一定期間表示させないでくれます。
ブロックはしづらいけど、いちいちチェックしたくないつぶやきに有効です。

・QWITTER
フォローしなくなった人を通知
悲しいサービスです。

・twuffer
指定日時にTwitterへ予約投稿できる。

自分へのメモなどによい。が、サイトが重い。

他にも沢山ここにまとめてあります。

Twitter関連ツール・まとめ - かちびと.net

サイブリッジでやってる人

・水口さん(弊社代表)
・濱田さん(弊社副社長)
・シカータさん(弊社マスコット)
・それをフォローしたりされたりしてる人々

ちなみに私は、水口さん濱田さん共にフォローされているので、
「ねむい」とか超言いづらいです。はい。

デザイナーの拘ることの一つにフォントの選定と配置があります。
勿論、写真の見せ方やイラスト、ユーザビリティから見てのサイト構成も重要なことですが、フォントの使用の仕方で、全体のバランス、印象ががらりと変わります。

また、フォントの歴史や意味などを意識してデザインに落とし込めればデザイナーとして深みもでてくるのではないでしょうか。

たとえばフランス料理屋さんでイタリアのフォントを使っては... 笑

今回は、良く使用されている定番フォントについて簡単にまとめて見ました。

ヘルベチカ (Helvetica)【スイス】

ヘルベチカ (Helvetica) は、ラテン語で"スイス"という意味があります。
現在、世界中で愛されている書体であり、サイブリッジでもよく使用しています。
1957年に、マックス・ミーディンガー (Max Miedinger) と
エデュアード・ホフマン (Eduard Hoffmann) によってデザインされた
サンセリフのローマ字書体です。

特徴：信頼感, 安心感,

ギャラモン（Garamond) 【フランス】

ギャラモン（Garamond, ガラモン、ガラモンド）は、ラテン文字のセリフ体の書体
です。16世紀にフランス人の活字鋳造業者、クロード・ギャラモンが製造した活
字がオールド・ローマンの代名詞のように言われたため、各地の活字鋳造所で
Garamondと名づけられた活字が製作されました。
（wikiより一部参照 http://ja.wikipedia.org/）

特徴：安心感,・心地よさ

ユニバース (Univers) 【スイス】

ユニバース (Univers) は、1957年にスイス人アドリアン・フルティガー (Adrian
Frutiger) によってデザインされ、フランスのデュベルニ&ペニョー鋳造所から写
植活字として発表されたラテン文字のサンセリフ体書体です。
エレガントかつ合理的なスタイルが特徴です。
スイスエアラインズやドイツ銀行、日本国内の企業では三洋電機などが
コーポレート・タイプとして利用しています。
（wikiより一部参照 http://ja.wikipedia.org/）

特徴：デザイン的

Dante【イタリア】

マーダーシュタイクは1946年から56年までの10年をかけて、フランチェス
コ・グリフォがアルダス工房を去ってからの活字をもとにして新刻しています。
これはボッカッチョ著『ダンテ頌』に使用されたのにちなんで「ダンテ」と
名づけられました。
（書体基礎知識より一部参照 http://www.type-labo.jp/）

Cooper Black【アメリカ】

1922年にBarnhart Brothers & Spindler 社よりリリースされ、1924年にドレスデンの Schriftgu 社よりイタリックがリリースされました。
オズワルド・ブルース・クーパーが作成した「Cooper Old Style」が基になっています。
アメリカのアニメやCDジャケットなどで使用され、多くの人に親しまれているフォントです。
（DAYLIGHTより一部参照 http://e-daylight.jp/）

特徴:ポップ, 親しみやすい

Big Caslon【イギリス】

ロンドン生まれのマシュー・カーター（Matthew Carter）より製作された書体です。
また、カーターが手がけたフォントに、Bell Centennial、Charte、Georgia、Skia、メイリオ（欧文部のみ）、DFP痩金体（欧文部のみ）などがあります。
※1965年にニューヨークへ移住しています。
（wikiより一部参照 http://ja.wikipedia.org/）


上記のフォントについては各国を代表する物ではありませんのであくまで参考まで。