« 2008年5月 | トップページ | 2008年7月 »

2008年6月30日 (月)

画像加工のテキスト

7月に予定している画像加工のテキストがようやくできた。
というより、なんとか2時間分が出来たという感じ。

  • 画像の知識
  • 画像の補整
  • 画像の選択

の3つで構成した。

とてもじゃないが、2時間そこそこで研修なんて無理。

基礎知識と補正だけでほとんど時間を使うだろう。
しかし、基礎知識は退屈である。

サプライズも必要だ。
この授業で興味を持ってもらえたら成功としよう。

テキストを作るだけで50時間以上もかかってしまった。
(これじゃあ、ギャラとあわない!)

しかし、来年以降も使えるだろうし、なにより自分の勉強にもなった。

画像処理は面白いし、時間はいくらあっても足りない。

今週はこの内容で勝負!

2008年6月26日 (木)

集客すれば売れるのか

某サイトの会議に出席。

サイトへの訪問者はまずまず。
全く売れない。

なぜだ。

全員で考える。

もっと人が来ないとだめ?
サイトに魅力がない?
商品に魅力がない?

いろいろ考える。

アイデアがなかなか出ない。

それでも考える。

少し良いアイデアが出る。

じゃあ、それをやってみよう。

そう、この繰り返しが必要。

お金を出せばいくらでも広告が打てるし人もそれなりに集まるだろう。
それで、売れるのか?

答えはそこにはないと思う。

サイトの成功(売上)=考える時間(アイデアの数) × 失敗の数 × 熱意

こんな風に考えてる。

失敗を恐れないチャレンジ精神とそれを支える熱意が必要だ。

そうでないと長続きしない。

そういう人々を励ますのが私の仕事かも。

2008年6月24日 (火)

画像処理のソフトは何

先日のWEBデザインの授業の1日目。

まずまず。
最初に話ばかりだったのでつまらなかったかもしれない。
しかし、WEBサイトを作り出すためには事前の準備は必須。

10%くらいの生徒は熱心に話を聞いていた。
10%くらいの生徒は寝ていた。
残りの生徒は、他のサイトを見ながら適当に授業を聞いていた。

そんな感じ。
でも、がっかりすることはない。
今までも高校生を教えたことがあるが、話だけの授業というのはそんなものである。
よほど面白い内容でない限り、眠くなる。

そこで、黄金比率や白銀比率をエクセルでシミュレートさせる演習をさせてみた。
ここで、全員が目を覚まして授業に参加するのである。やっぱりね。

だから、テキストには必ず演習問題をいれるべきである。
今回は一部の内容に演習問題を組み入れなかった。
時間がなかったのと、その項目に時間をかけていたら全体の内容を教えることができないという2つの点でやむなく話しだけにしたのである。
来年からは演習による研修展開を考えよう。

研修は次週も続く。

予定では7月は画像処理についての授業だ。
みんな画像加工をしたくてたまらない様子だ。

ソフトはPaint Shop Pro 7 が使えるそうな。
このソフトを使って、画像のレタッチなどを教えることになる。

それにしてもPaint Shop Pro 7とは...。
懐かしいというか、操作を思い出すのに時間が必要だ。

Paint Shop Pro 7というのは、起動がすごく早い。軽いのである。
いまだにビューワとして愛用している人も多いと聞く。
そう言えば、Paint Shop Pro 8が出たときに起動が重いのでずいぶんがっかりしたことを思い出した。
その次のPaint Shop Pro 9では、少し改善されて起動が若干早くなった。

今の私はPhotoShop CS2 を主に使用しているけど、よく考えたらPaint Shop Pro 7でも
ほとんどの機能があることに気がついた。
よほどのグラフィックデザイナーでない限り、私のようなプログラマー寄りの人間にはPaint Shop 7でも必要かつ十分である。(まあ、ちょっと便利でないけど)

それにしても、久しぶりにXPマシンにPaint Shop 7を入れた。
起動がびっくりするくらい早い。

授業でも使うので、愛用のレッツノートにも入れた。
レッツノートはVistaである。
完全に動作しない。互換モードで動く。でも、軽さは魅力。
しばらくはビューワとして使おう。

画像関係のテキストは、いろいろなサイトで公開されている。
参考にさせてもらおう。

しかし、面白い演習をつけないといけない。
そうでなければ、ただのテキストとなる。

そこがむずかしい。なんか良いアイデアがないかな。
期限は一週間。

またまた寝不足になりそう。

2008年6月18日 (水)

テキストに追加

テキストを読み直していて、情報が不足しているのに気がついた。
「近接の要因」の説明にゲシュタルトの法則の説明が抜けている!

WEBデザインをする人なら誰でも知ってる知識。

簡単に言うと、グループ化と整列の理論。
20世紀の初頭にゲシュタルト心理学の専門家たちによってできたとか。

ゲシュタルトの法則

  1. 近接の要因
  2. 類同の要因
  3. 連続の要因
  4. 閉合の要員

1は、複数のものを近づけて配置すると、見る人は仲間として関連づける。
2は、2つのものの大きさや色などがおなじなら、見る人は同じものとして関連づける。
3は、人間の目は整列によって、連続的な直線や曲線を探そうとする。
4は、人間は、雑多のもののなかで閉じた(固まったようにみえる)形状を探そうとする。

ま、おおざっぱな説明だけど人間はこんな感じで認識する。

それを、WEBデザインに利用しようというわけだ。
私は自分の名刺デザインにもこの法則を利用している。

それにしても、テキストを見直せば見直すほど、内容を追加したくなる。
でも、少し良くなってきた。

ちょっと睡眠不足気味...。

今日、FireFox3.0をダウンロードした。
動きがきびきびしている感じがする。
モバイルパソコンにもインストール。

ギネスに挑戦してるんだとか。

2008年6月17日 (火)

テキストができた

ようやくWEBテキストができた。

今回はデザインに関することなので、不得手な部分も多い。
それでもわからないとは言ってられないので猛勉強した。

学習時間に上限があるので欲張って範囲を広げることも出来ない。
つくづく教科書作りというのは骨の折れる仕事だと思う。

とりあえず、以下の項目を授業で取り上げるつもりだ。

まず、情報デザインの基本。

[1] 情報を整理する
[2] サイト構造を考える

次にレイアウトのテクニック

[1] 画面の分割(黄金比率、白銀比率)
[2] グリッドデザイン
[3] マジックナンバー
[4] ジャンプ率
[5] 版面率
[6] 近接
[7] 反復
[8] 図版率
[9] その他(シンメトリーなど)

これで精一杯というところ。
[6]と[7]はユーザーインターフェイスの本を参考にした。
これがWEBデザインのやり方などという決まった方法がないだけにどのように教えたらよいのかむずかしい。

常に創意工夫を以て進む。

そんな気合いを教えたい。

このテキスト。来年も使えそう。

2008年6月13日 (金)

CSS効果を確かめる

雑誌を拾い読みしてて、面白いサイトを見つけたのでメモ。

CSSの効果を試すサイト「CSS Sandbox」(http://aurelio.net/css-sandbox/)だ。

画面中央に出てくる見本の文章に対して、下の画面のCSSをいろいろクリックして効果を確かめることができる。

気に入った表現であれば、画面の右下のCODEというところをクリックするとソースが表示されるのでコピペできる。

CSSなどの研修サンプルに使用できそうなのでとりあえずキープ。

いつもCSSの説明が面倒。かといって、CSS辞典みたいなものを1ページずつ説明していたんじゃ時間がいくらあっても足りない。

2008年6月11日 (水)

クエリーは1回でよかったんだ

ここ6年くらいphpによるwebアプリの作成にかかわってきた。
LAMP(Linux Apache Mysql Php)やWAMP(Windows Apache Mysql Php)ありとオープンソースだらけ。
特に照会系のアプリケーションをたくさん作ってきた。

たくさんの結果がヒットしたときには、Googleのようにページ送りの機能をつけるのを常としている。
そうでないとWEBに表示するにも時間がかかる。

例えば1000件ヒットしたとして、最初に50件表示させる。すると残りは950件なので19ページ分のページ番号を作る。
次ページは、50件から100件までを表示。同じようにページ番号を振る。
この一連のデータベース問い合わせ(クエリー)には、合計件数を取得するために1回。
50件分だけ取り出すために1回。計2回のクエリーを発行していた。

データベースはMySQLである。

あるとき、ふと、マニュアルを読んでいたら、FOUND_ROWS() という関数に目がとまった。
なになに、「状況によっては、LIMIT を指定しなかった場合にいくつのレコードが返されるかを、ステートメントを再度実行することなく確認したいことがある。」と書いてある。

えっ、それって...。

SELECT 文に SQL_CALC_FOUND_ROWSを使用すると、対象のテーブルの件数をSELECTと同時にCOUNT。
そのため、通常は2回のSELECT文が必要な所を1回のクエリで取得できるそうな。

いろいろ調べてみるとパフォーマンスも70%よくなるとのこと。

早速試してみる。

...速い。

そう、私が6年間もずっと書いてきたプログラムは間違いではなかったけど、非効率であることがわかったのである。

知らなかった。クエリは1回でよかったんだ。

もっと、マニュアル読もう。

2008年6月 9日 (月)

高校生にWEBデザインを教える

今年もWEBデザインを教えることになっている。

今回は初めて教える高校である。

う~ん。どうやって教えようかと思案中。

世の中の教科書をいろいろ調べたけど、コレというものがない。
だいたい、授業の時間が短すぎる。

決められた時間(50分)でひとつのことを教えようなんて無理がある。
昨年もその前の年も、一生懸命教えたけど何人の生徒が理解してくれたのだろうか。

興味を持たせながら教えるのがむずかしい。
せいぜいヒントを与えるくらいだ。

私はデザインの専門家ではない。すべて独学。

だから、毎年いろいろ試している。

今年は、黄金比率と白銀比率を説明しようと考えている。
それにグリッドシステムを絡ませる。

生徒達には私の作ったエクセルを配布。
そのエクセルにはあらかじめグリッドを作成しておく。
次のシートには「黄金比」と「白銀比」の簡単な自動計算シートを用意しておく。

これらを使って、レイアウトを起案させる。

うん、なかなかいい!
比率の組み合わせとグリッドシステムは覚えておいて損のない知識だ。

これをWEBテキストにして配布しよう。

来年も使えるぞ。

2008年6月 5日 (木)

講習でいっぱい

ここのところ、講習の依頼が多い。

企業から1件。
商工会から3件。

どうにも予定があわない。

実践的な内容の依頼が2件。
基礎編の依頼が2件。

よくよく話を聞いてみると、私がちょうど3年前くらいに苦労していた内容について
講習して欲しいとか。

ちょうど、知れ渡るために必要な時間が3年くらい?

そのころ、汗をかいて作ったマニュアルが今頃になって役にたつ。

しかし、ちょっとやばい。このスケジュール。

休みがない...。

2008年6月 4日 (水)

IE6で:hover疑似セレクターを使う

テーブルやフォームにカーソルを当てたときに背景色を変える。
そうすると、ユーザーは今どこを見ているのかがわかりやすい。

そんな効果を出すために、ジャバスクリプトを使ってきた。

firefoxなどは:hover疑似セレクターを使えば簡単に実現できる。
しかし、IE6.0は、a以外のタグには:hover疑似セレクターが対応していない。

そんなことで、しばらく「:hover」には興味を示さなかった。

ところが、ふと読んだ雑誌にIE6.0の独自拡張CSSプロパティ「behavior」を使えば
できると書いてあった。

試してみると、確かにできる。

そこでメモしておくことにする。

[1] 「whatever:hover」というサイトから「csshover.htc」を入手する。
    バージョンがあがっているみたいなので、version 2.xをダウンロードして、名前を「csshover.htc」とリネームしておく。

[2] 適当なフォルダに保存しておく。

[3] HTMLのヘッダー部分もしくは外部CSSファイルに次のように記述する。

    body {
      behavior:url("script/csshover.htc");
    }

"script/csshover.htc"の部分にはフォルダへの正しいパスを記述する。

これだけである。

あとは、tableタグに適応させるなら、
table tr :hover td { background-color:#cccccc;}
のように指定するだけ。

あるいは、
input focus { background-color:#cccccc;}
というように指定すると
インプットタグにマウスがあたったときには背景色がグレーになる。

focusでもhoverでもどちらでもよいようだが、hoverを指定したときに、アニメーションgifを
使ったら、アニメーションが終了した状態で表示されるので、focusのほうがよいのだそうだ。
ふ~ん。参考になった。

2008年6月 2日 (月)

勉強会

仲間内の勉強会。

知的財産報告だ。

今日は中古トラックの売買の会社と美容室、それに板金業の3つの話題。

どれもユニークな会社ばかり。

よいところばかり目立つんだけど課題も多い。

着眼点はよくても事業を軌道に乗せるまでは大変。

どの事業主も自分の強みに自信を持っている。

私にはよくわからない。

待てよ。私がよくわからないということは説明をろくに聞いていない人はもっとわからないはず。

中古トラックの売買の話もややこしい。
中間マージンをすっ飛ばして直接ユーザーと取引しようってんだから。

それにもましてややこしいのが某美容室。

どうみても宗教がかってる。

ちょっとみただけでは、インドの「まんだら」を見ているよう。

こんなことで本当に美容に役立つのだろうか?

なんでも心のなかからよくするのだそうである。

よくわからないけど、仕事として受けてしまったら理解するようにしなければならないだろうね。

今日の話では、起業家はすべて雄弁ではない。

もどかしいことを翻訳してほしいこともあるそうだ。

魅力的なヒントを抱いている人には会ってみたい。

広告を見る

いつも依頼されるサイトというのはだいたい次の2つに分類できる。

[1] 商品を売る
[2] 企業を売る

[1]は扱う商品(もしくはサービス)を売るためのサイト。
とにかく自社の扱う商品が売れて欲しい。

[2]は、名刺代わりに作るサイト。
企業として最低一つは持っていたい情報サイト。
自社のことをアピールする、もしくは、売り込むサイトである。

いままではどちらも同じようなデザイン技術を利用して作成していた。
XHTMLとCSSを駆使し、ジャバスクリプトを使い、状況が許せばDBも使う。
画像処理は専門ソフトを使って、とにかくプロらしい画像に仕立てる。

最近、疑問に思うことがある。

時間をかけて一生懸命作るんだけども、ほんとうに目的にあったものになっているんだろうかと。

特に[1]の場合。きれいだから売れるとも限らない。

そこで、毎日、広告をひたすらクリックして見ることにしている。
ジャンルを問わずクリックして、「3秒」じっと見つめる。

どんなサイトでなにを提供しているのかをぱっと把握する。
「3秒」でできなかったらおさらば。

これをひたすら繰り返す。
3秒というのは短いようで長い。

*当然、FLashなどが動き出すサイトはパス。(待ってられない)
*字面がびっしりつまったものはパス。(細かな字をヒマはない)
*スクロールしなければ要点が把握できないものはパス。(そんなヒマはない)
*タイトルが英字であるものはパス。(直感的にわからない)
*タイトルが画像だけもパス。(意味が理解できない)
*ゴチャゴチャした感じはパス(どこ見たらええかわからん)
*文字が小さなサイトはパス(小さすぎて見えない)

あくまで個人的な意見だが。

そうこうしているうちに、ハッとわかるサイトに出くわすことがある。

なんで、こんなにわかるのか?

そんなサイトはためらわずにブックマークしておく。
プロが作ったようなサイトではないものも多い。

思わず、その次を見たくなってスクロールしていたりする。

私は仕事柄、画像処理などにこだわるケースが多い。
サイトの「美しさ」にこだわる。
それが、本来の目的にあっていないケースも多々ある。

もっと、商売人の気持ちにならんとあかんな。

いつも反省しきり。

商品を徹底的に売るようなサイトを研究しよう。
デザインを犠牲にしてでも商品を徹底的に売る。
ベタなサイトでもかまわない。

しばらく、このテーマで試してみる。

« 2008年5月 | トップページ | 2008年7月 »