携帯サイト体験セミナー

070324デジハリ横浜校。19時より標記の無料講座に参加。

受講者数７名中、在校生２名は私そして一緒にDTPの講座を受けている若手。
講師は横浜校フロントで活躍されている根鈴氏。デジハリの卒業生である。授業は担当していないが、進行も説明もスマートで面白かった。在校生も参加したためか、Photoshopの技術も盛り込んでいただき、内容の濃い講座だった。体験授業にはTAがつかないので、ひとりで受講生のフォローまで行っていたが、よくこれだけの内容をまとめたと感心する。

前半１時間はTeraPadでタグを打ち、背景色・フォントの装飾・リンクの設定・画像の挿入・テーブルなどHTMLの基礎を確認。SEO対策としてのTITLEやSTRONGタグの使い方の解説。画像の移動によるリンク切れと再設定の実習まで含める。

後半１時間１０分は、Photoshopで素材画像を作り、携帯用にURLと電話のリンクを貼ったサイトに仕上げる。ここではDreamweaverを使って５行１列のテーブルに３つの画像とテキストを加えた。終了時にデジハリのサーバにアップして、各自の携帯で表示を確認した。
普段携帯は電話機能しか使わない。車通勤とPCの環境に慣れてしまっているからだ。携帯のブラウザを使うのも初めてだったし、URLの入力にもたついてしまった。情報発信機能として携帯サイトへの興味は持っていたので、今回の講座に参加できて本当によかった。

DTPアートディレクター専攻の受講生２名にとっては、特に素材画像の作成が面白かった。下の図はPhotoshopで木の写真の上に名前をテキストで入れて、木目のマスクをかけた場面。

背景レイヤーを新規チャンネルにコピーし、明るさとコントラストを上げて文字レイヤーに対してレイヤーマスクをかける。木のくぼみや木目の黒さに応じて白いテキストに覆いをかけているという理屈。下のキャプチャ画像で理解できるだろう。マスクがかかる前なので、テキストは入力したままである。
今回は木の素材を使ったが、岩の画像などにも応用できる。

さらに、★NEWSと★CONTENTSの画像を幅240pxで作成。細かい文字を画像にするので、アンチエイリアスは「鮮明」を選ぶ。

素材画像作成の後、Dreamweaverでの配置。
240pxの５行１列のテーブルを作り、画像とテキストを挿入。
電話へのリンクは href="tel:045・・・・"とする。PCブラウザでは非表示扱いになる。

１か月限定ということだが、デジハリのサーバーにアップされている。
http://www.dhw.co.jp/yokohama/k/igarashi0325/
自分の携帯で確認したが、このブログへリンクしてみると、左のサイドバーの部分をスクロールしきらないとメインコンテンツが表示されない。これはCSSが効かないため、ソース内の配置の問題だから仕方がない。この体験から、携帯で見ることを意識したサイト作りへの視野が広がった。

■セミナー終了後、受講生のM氏と飲みに行く。
横浜駅そばのマリモラーメンへ。混んでいたが、餃子とチャーシューをつまみにデジハリ談義で盛り上がる。
M氏はコンピュータを使っていなかったが、イラストのデザインが好きなのでDTPのクラスを受講している。警備関係のお仕事をされているが、いずれは転職をという希望。彼のIllustratorの修行は大変なものだと感心している。しかしWeb方面には不慣れであり、HTMLの基礎からの復習ができたことを喜んでいた。もうひとつ、画像のキャプチャによるメモ取りを教えたので、この講座中に実践してマスターした。これも喜んでいた。

春休み中には、私がキャプチャ用に利用している２種類のソフトを紹介しよう。