webdesignアーカイブ

リニューアルについて考えていること

IMG_0001

さいきん、Webサイトの表示パフォーマンスの高速化が気になります。

このブログを最後にリニューアルした時は、jQueryが流行りだして、タブやスムーズスクロールを実装してみたんだけど、この前iPod touchでこのサイトを開いたら、Safariがクラッシュしてしまいました。
たぶん表示が重すぎるんだろうなぁ。

表示に時間がかかると、離脱率が高くなると言われているので（当たり前だよな）、サイトの内容と構造を整理して、できるだけ快適に見てもらえるように改装しようと今日は心に決めました。

今の所予定しているのは

  • サイドバーからトラックバックを取る
  • 広告表示は、ブログ記事内以外はテキスト主体にする
  • ブログパーツなどは極力貼らない。
  • 印刷用CSSの見直し
  • 404ページの作成

印刷用CSSは、今もいちおう設定しています。でも改善できる箇所があるはず‥‥。

けっこう今のデザインは、出した時は気に入っていて「見て見て」って感じだったんだけど、今になって見て見るとあれこれ盛り込みすぎて見づらいですね。
何か探し物をしたり、調べ物で立ち寄った人が、すぐ必要な記事にたどり着けて、どういう人がこれを書いているか、ということが、少し（たくさんじゃなくて良いと思う）伝わるのが理想ですね。
自分の「あれしたい、これやりたい」は後回しです。 

この本が参考になりそうなので今度書店で見てみようと思います。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

100日やった。

お正月（正確には1月2日から）続けていたDaiky365への取り組みが、今日で100日目になりました。
100日目はイチゴでした。

20100410004352

割と気軽に初めてみたのですが、やっぱり毎日の題材とかネタを探すのが大変で、MｄNやネットで見つけたチュートリアルを消化している方が多いのが実情です。

ただ、その中でも、自分なりにアレンジしてみたり、新しいツールの使い方を率先して試してみたり、何かしら得るものがあるようにと考えながらやっているので、割と多くのことを学習できているのではないかと思います。

実際、これを初めてから、Illustratorの使い方はけっこう進歩しました（今までがひどすぎた）。
Photoshopでも、フィルタの使い方とかカラーモードの仕組みをより理解できたと思います。

私はものすごくズボラなので、こういうことを「やる」と宣言して続ける仕組みを作るぐらいしないと、新しいことを継続して身に付けるなんて無理なんですね‥‥。
よく「超頑固だねー」と言われますが、これについては「自分で言い出した事を絶対に途中で止めたくない」という、良い方の頑固さに作用しているのでしょう。

まぁ、とにかく、まだ1/3も終わっていないので、この先はもっと手法を身に付けて、オリジナルなものが作れるように、ネタ探しを一生懸命やろうと思います。

XAMPPの修復メモ（WinXPSP3/2010年3月版）

久しぶりのMTネタです。

XAMPP環境が壊れた（破損した？）

今月からMT5の制作･構築業務が始まるので、試しにローカルの環境（XAMPP）にMT5とMTOS5をインストールしてみたところ、どちらもデータベースの作成中にエラーでストップしてしまいます。
無理矢理ページを再読込すると、管理画面が表示されるのですが、ブログの新規作成ボタンが表示されていなかったりと、表示されても何ともできないような感じです。

何度かDBを新規作成してみたり、再度インストールしたりと、いろいろ試してみたのですが、どうしてもエラーが出てしまい、エラーメッセージで検索したところ、出てきたのは２chのMTスレのみというマニアックな状況。
エラーメッセージは：

インストール中にエラーが発生しました
Not a HASH reference at lib/MT/ObjectDriver/Driver/DBI.pm line 471.

というもの。
（このページをリロードすると、また違うエラーメッセージが出るのですが、書き忘れてしまいました）

で、

  • MT本体のファイルを解凍する時に、破損してしまった
  • ローカルの環境が、実はMT5に対応していない

の2つを疑って、MTの動作環境やファイルの再ダウンロードを試したのですがどちらも問題なし。

消去法で、ローカルの環境が破損していると判断し、環境の再構築をおこないました。

Daily365の効用

トミナガです。今日3時間もテレビ見ちゃった‥‥。
そしてもう深夜だね。DMCの映画面白かったよ。

Design Something Everyday(Daily365) が楽しい。


これは今日のDaily365用に描いた絵なんですが、描いたっていうかFireworksでサササと作りました。10分ぐらいで。
この作業の記録は、tumblr.に付けているんだけど、他の人が割とテーマを決めてやっているのに対して、私はその日に思いついたことをバラバラにやっています。

今月やったものだと、ベクターアイコンデータの作成（これは続きものになりそう）、Twitterの壁紙を作ってみる、MdNのチュートリアルの消化などがあります。
例えばMdNを買ってきた時、ぱらぱらと紙面を眺めて「これ今度やってみよ」と思う。そして、とりあえず本棚に入れる。

それで、その「今度」はいつ到来するのか？

私は長らくこの問題を抱えていて、デザイン業をしていると名乗るなら、いろいろなデザインができるようにトレーニングしなくちゃいけないなーと思っていました。

デザインのためのストレッチ

なので、Smasing Magazineでこの記事を読んだ時、英語だったからさーっと見ただけだったけど「これだ！」と思いました。
毎日練習してないから、何もできないんだ！
プレゼンは予行演習するし、ジムに行ったときは必ずストレッチするのに‥‥。

確かに、私はコーディング業務を始める前は、毎日ちょっとずつ自分のサイトを手入れしたりして、30分ぐらい毎日HTMLやCSSを眺めていたのです。
そうかー、そういえばコーディングも随分やったなー、じゃあ今度はデザインをたくさんやらなくちゃ、と考えて、この挑戦に参加してみることにしました。

#daily365 とPixelmator

Little Birds

今日は午後から打ち合わせのために外出したんだけど、けっこう遠い距離を移動しないといけなくて、移動時間も入れたら、1日中打ち合わせだったような感じです。

帰りに、久しぶりにマッサージに行って、ゴリゴリ揉まれてきました。首・肩ががっちがちでした。風邪をひいていたせいもありそうだけど、来週も来て下さいねと言われてしまいました。
でも、これで週末は少し楽になるといいな‥‥。

帰宅した後、資料とメモを見直して、作業の予定を立て、別件の割り込み作業をしてメールを見て（深夜の返信はしない）、#daily365の作業をして、終わったら深夜1時でした。時間がいくらあっても足りないなー。
でもみんなこうなんだよね。

因みに今日は、昨日購入したPixelmatorのチュートリアルをやりました。
これはMac用のPhotoshop Elementsみたいなソフトなんですが、今割り引きセールをやっていて、3,000円ぐらいで購入しました。メニューは日本語化されています。

参考：

私はCould（ヤスヒサさん）の記事を見て、これはいつか絶対買おうと思っていたので、ようやく自分のものにできて嬉しいし、使ってみたらとても楽しかったです！！
Macはこういうアプリケーションの選択肢があるのが素晴らしい。チュートリアルはいろいろあるので、これからも試してみようと思います。これ見ただけでも、いろいろ出来るのがわかるね‥‥！

それにしても、日本の人で#daily365をやっている人が全然いないのはどうしてだろう？
まだ1週間も経過していないけど、私はこれに取り組んでいることが、ものすごく自分のプラスになっていると感じています。

I got THE SMASHING BOOK.

101_3646.JPG

今日、英会話から帰宅したら、THE SMASHING BOOKがようやく届いていました。申し込みをしたのが9月ぐらいだったと思うんですが、船便にしたので余計時間がかかったんですね。年末年始に時間がありそうだったら、辞書を引きながら読んでみようと思います。
いや、時間かかっても、これはせっかく買ったから全部読もう！

内容をざっと確認しましたが、CSSやHTMLのサンプルコード、デザインのフィニッシュワークとかPhotoshopのtipsなどはいっさいありません。普段からSMASHING MAGAZINEをチェックしていて、ブログのまとめ的なものを期待している人には向かないかも。
どちらかというと、Webサイトの構築全般についての記述で多くが占められています。紙面はフルカラーで、全部で300ページ以上あります。
質の良い厚紙に印刷してあるので、本の厚みがけっこうありますね。

私は、後半に出てくるWebサイトの表示最適化（サーバーの調整など）のパートが楽しみです。
タイポグラフィは日本ではどうだろって感じだけど、まあ参考になれば。

日本語で書かれた、皆が持っているようなWeb系の書籍はよく買いますが、これを読んでいる人は周りにはいなさそうだな−。
1つでも多く吸収できるようにがんばろー。できれば英語そのものも！

SaCSS　vol.07 「MovableTypeで作る 企業サイトの基本」補足

遅くなりましたが、前回のSaCSS勉強会で話した内容のまとめと補足を掲載しますので、参加されたかたは参考にしてください。
（なお、スライドデータの公開予定はありません）

MTに関する基礎知識

MTは非常に活発なユーザーコミュニティを持っている。
2004年頃からユーザーが増え始め、2005～2006年頃から企業サイト構築、関連書籍出版などの流れが出来てきた。

MTを使って構築しているサイト

  • 東京もつ鍋天国（コミュニティサイト）
  • 東京ナイロンガールズ

MTタグでできることいろいろ

変数・条件分岐が使えるので、アイデア次第で面白いものが作れます。

ごっごめんなさい‥‥！

サンプルサイトの概要

MTで構築した一般的なサイトの見本として、架空の生花店のサイトを用意しました。

サンプルサイトの概要

サイト構成は、

  • トップページ
  • 店舗紹介
  • お問い合わせ
  • アクセスマップ
  • お知らせ
    • お知らせのアーカイブ
  • 商品一覧
    • 商品一覧のアーカイブ

こういう階層構造になっています。
MT5で構築したので、サイトの中に「お知らせ」「商品一覧」という2つのブログがあり、その他はWebページで構成されています。

これは、小規模な企業・店舗サイトによくある「お知らせだけを自分で追加したい」という要望を満たす仕様として考えました。

CMSいろいろ

トミナガです。
最近なかなか本を読むまとまった時間がないねえ。時間は有限だって常に意識してるはずなのに、気がついたら庭の掃除や食器洗いに時間がかかっています。主婦かよ！

仕事は、最近ずっとMTMTできているので、そろそろ他のCMSもやってみたいのですが、なかなか機会がないですね。提案はしてるんだけど、やはりMTの知名度が高いということなんだろうか。
MT以外だと「無償で使えるの」が第1条件だったりして、なんだかなーという感じです。それが悪いというわけではないけど、なんかモヤモヤした感じが‥‥。
それにしても最初から「このサイトをMTで作る予定なんですが」という引き合いが多いです。年内もう1件あるかも。

WordPressは、私はあまり企業サイト向きではない（アップデートが頻繁だったりするので）と思っているので、これからは

あたりもやってみたいなぁと思っています。もちろんMT5もやるよ。Jimdoはパンフレットサイト的なものを求めている中小企業に良いなと思ったんだけど、どうでしょうね（そもそもそういうサイトを作るなという議論があるのはわかっていますが）。
bingo! CMSもやってみたいけど、テスト用のライセンスを用意するのが難しそうだなあ（お金がない）。

いずれにしてもMT以外の選択肢を増やして提案に幅を出していかないと。
あと作業工程も見直さないといろいろ厳しい昨今です。

あと、明日SaCSSという勉強会でスピーカーします。
MTテンプレートの構築手順のレクチャー的な内容をやる予定です。シックスアパートさんからステッカー・飴などご提供頂いたので、みんなでMT話でもして盛り上がりましょう。

明日起きてから一度スライド見直そうっと。

MTのTinyMCEプラグインの設定

MT5ようやく今週に入って、テンプレートの内容解明や、動作環境、β版のバグの確認などの作業をおこなっています。

私が記事を書くときはHTMLがわかるから、何とでもなるのですが、エンドユーザが手軽に運用できるためには、WYSWYGエディタは必須じゃないかと思って、TinyMCEプラグインをインストールすることが多いです。

今使えるMT用のTinyMCEだと、この2つから選ぶことになるのですが、私は個人ではアルファサード版、仕事ではToI企画版を使っています。

TinyMCEのテンプレート機能

TinyMCEはとにかくテンプレートの挿入機能が素晴らしいので、今後の案件ではフルに活用していきたいところ。

テンプレート機能を使いたい場合、ToI企画版のTinyMCEを使うのが良さそうで、バージョン1.6以降で管理画面からテンプレートの指定ができるようになっています。
システムメニューの「プラグイン」からTinyMCEの設定に移動し、「設定」をクリックします。

20091010093509

設定画面の下のほうにテンプレートの指定領域があるので、例文を見ながらそこにテンプレートファイル（HTMLファイル）の指定と、タイトル（管理画面に反映されます）を記入すればOKです。

テンプレートファイルはHTML形式で、通常は、

mt-static/plugins/TinyMCE/template/ファイル名.html

に格納されます。複数のファイルを利用することも可能で、その場合は、↑の管理画面での指定を

{
    template_templates : [
        {
            title : "テンプレート1",
            src : "mt-static/plugins/TinyMCE/template/template1.html",
            description : "テンプレート1"
        }, // 複数ある時はカンマで区切ります
        {
            title : "テンプレート2",
            src : "mt-static/plugins/TinyMCE/template/template2.html",
            description : "テンプレート2"
        }
    ]
}

のように、テンプレートごとにカンマで区切って記載すればOKです。

エントリーの編集画面では、ビジュアルリッチエディタを指定していて、かつテンプレートの挿入ボタンを表示させていると、画像のボタンを確認できます。

20091010093510

テンプレートのボタンを押すと、設定したテンプレートの挿入ダイアログが開くので、必要なものを選びます。

20091010093508

参考：Movable Type 4.2で使えるTinyMCE プラグイン | Markup Mania :: nagomu.me

今日の勉強会 : WP vs MT

大通

トミナガです。今日はSaCSS第三回に行ってきました。
この記事のタイトルにWP vs MTって書いたけど、今日の内容はWPの基本で、とくにMTと対決するとかではありません。
私がそう思ったというだけなので‥‥。

私がノートに取ったメモと個人的な感想をそのままダイジェストしますと、

  • WPのメリット
    • 無料
    • とにかく無料
    • 絶対的に無料
    • テーマとプラグインが豊富
    • 軽い（管理画面の動作か？）
  • 古いPCで管理画面見ると動作重たい
    →ハードウエアの必要スペックを示す必要があるのかも。ブラウザベースの業務用アプリみたいに。
  • セキュリティに関する注意事項のアナウンスが必要
    納品後のメンテナンスが大変っぽい
  • ほいほいアップグレードすると、プラグインが動かなくなったりする
  • タダってそんなに良いことなのか？　サポートのお尻持つのをみんな避けてるだけでは。
    小規模な制作案件の場合は、ライセンス料にもシビアにならざるを得ないんですけどね‥
  • プラグインは非常に便利だけど、企業サイトの利用は、アップグレード時の動作不良の可能性があり、なるべく使わない方がよさげ。
    で、その時WPを使うメリットはどこにあるのか。MTOSじゃダメなのか。
  • MT＝動作重い、カスタマイズ難易度高いと思っている人が多い。
    動作重い（と感じる）のは管理画面だけで、サイト閲覧者はあんまり気にしてないと思う。静的ファイル見てるわけだし。
  • MTを避ける人は、再構築がお気に召さないようだ
    でも私はサーバーに静的ファイルが残る安心感を感じる
    WPはデータベースのバックアップ必須。

ざっくりいってこんな感じでした。
やっぱりMTと比べちゃいますよねー。

WP、私もsrc.7438.comでは使ってるし、記事書いたりメンテナンスしやすくて好きだけど、みんなMTのことそんなに悪く言わないでーーーー。
MT最高。MTバンザイ。そんな気分。

色々反論したいことがあったけど、twitterに書き散らかしてスッキリしたので寝ます。
おやすみなさい。

今日もWordPressについて勉強した...

トミナガです。
今日も半日ぐらいWordPressやりました。
あ、昨日仕事用サイトのリンクを貼っておいたら、みんなチェックしてtwitterで不具合を教えてくれたので非常に助かりました。ありがとうございます。

修正しながら、WPのテンプレートタグについて勉強しました。
たぶん周りがビックリするぐらいできていないです。

query_posts();だとページ分割が使えない

カテゴリごとのテンプレートが作れるよ！　っていうのは、この前のエントリのコメント欄で教えて頂いたので（あざっす！）すぐ出来るようになってラクラクだったのですが、

  • ページ送りをつけても、ページの移動ができない（同じページにリンクし続ける感じ？）
  • 「お知らせ」「制作実績」については個別にテンプレートを作ったけど、それ以外のカテゴリのテンプレートは共通のテンプレートを作った。
  • 「お知らせ」「制作実績」以外の、たとえば「制作日誌」というカテゴリへのリンクをクリックしても、表示されたページには、他のカテゴリのエントリも混じっている。

という現象。説明しづらいけど、カテゴリーアーカイブの中身がグチャグチャって感じです。

この現象についていろいろ調べた結果、アーカイブテンプレートの中で、query_posts();でループさせた記事は、標準のposts_nav_link();によるページ送りが正常に機能しないことがわかりました。

で、どうすれば良いかと言うと、私がやった解決方法は、query_posts();の代わりにget_posts();を使う方法です。

こちらのサイトの記事で理解できました→名古屋/MovableType/wordpress/WEB制作/ブログ/ホームページ制作/動画制作のE-BORN（イーボーン） » wordpress posts_nav_link と query_posts

get_posts();使う時に、カテゴリを指定して呼出できるのですが、カテゴリ共通の場合は何も書かなくてもいいみたい。
単にquery_posts();のところを、get_posts();に書き直して、適宜カテゴリを指定したらうまくページも分割できるようになったし、その他のカテゴリでは、ちゃんとカテゴリごとのアーカイブが生成されました。

最初、このことに気がつかなくて、サイト設計失敗したと思って超焦りました。

PMBOKはどうだろう？

もう5日か‥‥。時間がない！　いろいろと！

同じことをするのでも、昔より時間がかかるようになっている！　コレはマズイですね。
たとえば、Webサイトのデザインを受注する。
打ち合わせの時に取ったメモや、お借りした資料を見ながらいろいろ考えるんだけど、前に比べたら難しく考えているような気がする。

デザインと行っても、自分で会社起こしてディレクションバリバリやってる人から見ると、

  • なんちゃってデザインの域を出ていないのでは
  • これ、"売れない"デザインなんじゃ
  • 訴求ポイントずれてないかな‥‥？
  • もっと作り込みまくって高級感を出さないと安っぽいと思われそう

とか、やってもやってもやり尽くしてない感がある。

以前なら「これぐらいできていればいいかー」と、適当なところで切り上げたりしていたのだけど、最近は時間のある限り「もうちょっと何とかできるはず‥‥」「いや、これはダメなんじゃ‥‥」と悩みまくりで、髪の毛抜けそうになるまで考えて、作って壊して作って直しての繰り返しで、もの凄く時間がかかっています。

だから、最近はデザインの仕事入ったら、3日ぐらい余裕で家から出ないで過ごしてます。運動？できてないです。今週もジム行けなかったなー。これは本当にマズイ。
集中力をあげればいいのかな‥‥。

今、この余裕のなさにすごく悩んでます。
フリーは気楽だけど、誰にも相談できないのはしんどいです。守秘義務あるから、カンプ見せて友達に意見を伺うなんてできなくて、ひたすら自分との孤独な戦いです。
自分のブログのリニューアルだったら、サッサカとできるのに！

んで、明日1日休日としようかと。
頭整理したいし、本を買いに行きたい。PMBOKの本を薦めていただいたので、見てみて、理解できそうだったら買おうかな。

いろんなことを難しく考え過ぎなんだと思う。でも考えずにはいられない。

Webプロジェクトマネジメント標準 PMBOK(R)でワンランク上のWebディレクションを目指す
▲Webプロジェクトマネジメント標準
PMBOK(R)でワンランク上のWebディレクションを目指す

Nob Sekiさんに薦めていただきました。ありがとうございます。ちょっと立ち読みしてみます。

Webディレクションね。
制作を5年近くやっているので、そろそろディレクションできます！　と言えるようにならないといかん。
そのための問題点も多すぎるんだけど‥‥。
まだ、いろいろお悩み中なり。

おやすみなさい。

note : 20090530（ゆるうぇぶ会）

今日は雨。

h2hamの人が「ゆるく集まってWebの話でもしましょう」という「ゆるうぇぶ会」があったので、顔を出してきました。
最近全然外に出てないし、人にも会ってなかったからね‥‥。

何を話したかについては念のため書きませんが、いろんなポジションでWebの仕事に携わっている人がいて面白かったです。制作だけがWebの仕事じゃないもんね。
あと、私のファンクラブとか‥‥怖いですね。きっと気のせいだ。

また機会があったら誘ってください。＞h2ham

ああいう集まりがあるとき、何が必要かなと考えてみたけど、

  • BGMが欲しい
  • 軽いお題があるといいかも知れない。
    今日は、全員が見られる大きいモニターがあるところだったので、それを使って「仕事に欠かせないWebサービスを1つ紹介しあう」とか「自分のブログを見せあう」とか。
  • 議事録？
  • 誰か慣れた人が中継係やる？

ゆるい会だったので、これぐらいかな。

首都圏ではもくもく会が流行っているようですが、会場探しは人が増えるとけっこう難しくなるよね。
その点、今日の場所は意外だったが良いアイデアだったと思います。素晴らしー。

帰りに、久しぶりにアップルストアに寄って、iWorkとかを見てから帰りました。
いつもお世話になっているSさんに久しぶりに会いました。このかたのおかげで今も楽しくMacを使えていると言ってもいいかも知れない‥‥。
くるりのiTunes Cardをいただきました。いろいろ理由あってくるりは好きなので嬉しい。これを書いたらダウンロードしよう。

それにしても「トミナガさんって、コーディング速いですか？」って聞かれることが多いけど、本当にさっぱりわからないんです。ごめんなさい。
1人でやっているので断言できないけど、遅くはないと思います、たぶん。
速く終わらせて2ch見るぜーって思いながらやってるので、それなりの速度にはなっている、はず。

さて、明日は月末処理のもろもろをやらないとね。

note : 20090324（フリーランスの共同作業）

トミナガです。今日はWBCに短納期の画像作成と、大忙しの1日でした。

実は、昨日猫が熱を出して、動物病院に連れて行って、6000円ぐらいかかったのですが、先生が「お金いつでもいいよ」と言うので、そのまま連れて帰ってきてしまったのでした。
先生いつもすいません‥‥ありがとうございます。もうすっかり、元気になってしまいました。

今日の仕事、夕方までにデータを送らなくちゃいけなかったんだけど、指示内容に不明点があって、でも、それを確認してやりとりしていると、確実に時間足りない！　の雰囲気。
少しどういうケースか考えてから、まずは「画像が足りません！」を回避するのが良いかなと思い、こちらの判断で追加したり、作成したりしました。

2～3日でも作業期間があれば良かったんだけどね。
何しろ時間がない！　なので、

  • 恐らくここはこうして欲しいんだろう
  • この程度の作り込みで良いんだろう
  • きっとここは画像ナシでも大丈夫だろう
  • ボタンのロールオーバー画像までは必要ないだろう

と、勝手に推測しながら作業したのですが、これってすごい危険ですね。
だって全部一方的な思い込みだもん。

とある所で働いていた時、「～だろう」じゃなくて「～～かもしれない」と考えなさいと教えて頂いたので、ここは自分の態度を反省して、

  • 画像不足分については、追加のデータが届いてるかも知れない→問い合わせる
  • デザインについては、踏襲すべきパターンがあったのかも知れない→サンプルデータをお願いしてみる
  • 空いている部分には、画像が必要かも知れない→レイアウトを教えてもらう

というふうに、先を読みつつ懸念事項に対応できるようにしなくちゃいけない。
その上で、進行に必要であれば、こちらから質問票を作ったり、進捗報告の方法について、ロス・ミスの少ない方法を考えなくちゃいけない。

私はフリーランスなので、外部スタッフとして存在することがほとんどなんだけど、「この人は仕事をお願いしやすいなぁ」って思ってもらわないとね。

今日見た"他社と共同開発していく際の心得 - livedoor ディレクター Blog(ブログ)" を見て考えました。
選ばれる存在になるのは大変だけど、この記事読んだら、まだまだ力を入れる余地が沢山あるなって、改めて思いました。
今後は、効率とコミュニケーションの両立を意識していこうと思います。

「iPhoneテンプレートfor MT」を設定しました。

トミナガです。

昨日の寝る前に、すぐ終わるかな～と思って、cremaさんの「iPhoneテンプレートfor MT」を設定してみたのですが、やっぱりアーカイブマッピングでつまづいて、さきほど出来ました。

URLは、http://www.7438.com/i/ です。

こんな感じで、iPhone/iPod touchでの表示に最適化されて表示されます。
ただ、iPhone/iPod touch用のページは、通常PCで見ているのと別のページを出力しているので、1つのHTMLファイルで、デバイスによって表示を変えているというわけではないです。

個別の記事ページはこんな感じ。

iPhone/iPod touch本体を横向きにした時は、ちゃんと幅が広くなります。
このあたりの仕様は調べようと思いつつ、まだちゃんとやってないので、やらなくちゃ‥‥。

設定自体は、ダウンロードファイル内に、非常に丁寧に書かれたreadmeファイルがあるので、その手順に沿って作業すれば失敗することはないはずです。

ただ、アーカイブマッピングと、ページ拡張子を変更している場合は、ちょっと注意が必要です。

コーディングの勉強会の需要について。

トミナガです。あんまり上手いタイトルが思いつかなかったけど、先日ブックマークしておいた"読者の皆様に質問 | THE HAM MEDIA"に関して。
コメントやメールで意見をと書いてあったのですが、長くなりそうなので、こちらに書いておきます。
たいした意見じゃないですが。

今までHTMLとかWebデザインを教える仕事をしてたよ

去年まで、Web制作スクールの講師アシスタントや、短期のHTML講座の講師をやってたので、その経験もふまえて話すと良いのかなと思うのだけど、札幌に関して言えば、お金を払ってコーディングを習えるところってもの凄く少ないです。
だから、そういう場所が増えたほうがいいなって（にニーズはあるので）いう意味で、勉強会はあって欲しいです。

今まで教え役として接してきた中で多かったので、やはり、

  • HTMLはタグ辞典を見ながらやってみてました
  • 個人サイトを作ったことがある
  • グラフィック見るの大好き
  • ブログって日記じゃないの？
  • ホームページってボタンとか1個ずつ作って配置するんですよね
    （一枚の画像をスライスするっていうのは、みんな知らないみたい）

という感じの人が多かったです。

で、この人たちがお金を払って知りたいのは

  • Webデザインってどうやるの？
  • ホームページを作るための画像が作れない
  • 画像は作れるけど、スライスって何ですか
  • 絶対パスとかって何ですか？？？

あたりの内容です。
毎回時間が限られてる授業だったんだけど、適切なスライスの切り方と、正しいマークアップの考え方と、あとはCSSの基本を教えれば、あとは自力で何とかなってく人が多かったです。

まぁ、中にはそうじゃない人もいますが、受講生の顔見ながら教えていると「この人はきっと制作会社に入るだろうな～」という人は何人かいるし、実際そうなりますね。

note : 20090201

今日から2月ですなー。

今日は、作業あるかも、と言われていたので、自宅待機していたけど、結局作業はなく、仕事をしないで本を読んだり、Illustratorでトレースの練習をしたりしていました。

ベジェ曲線は、まぁ描けるんですが、しばらく真面目にやっていなかったので、作業が雑になってるんじゃないかと思って、やってみました。
細かい作業が出来ないと、デザイン作る時も○と□の組合せみたいのしかできなくなっちゃうし。
もう少しトレースの練習をして、慣れたらイラストとかアイコンを、Illustratorで作れるようになりたいです。

最終的には、簡単なSP（セールスプロモーション）用のツール、名刺とかハガキ、封筒なんかを自分でデザインできるようになれると良いなと思っています。
名刺は今も、自分で作って入稿したのを使ってるけど、もうちょっとデザイナーっぽくしたいです。あと裏面にも文字入れたい。

一番やりたいのはハガキなんですけど。
お礼状とか、メールだと何となく流される感じがするのと、サッと出すと良さそうだなと勝手にイメージしてます。ハガキくれる人って最近なかなか居ないんですが、私は受け取るのが好きだし、セミナー会場で名刺交換した人から、後日ハガキを受け取ったことがあって「やるな！！」と思ったりしたので、今年はそういう自分になりたいです。

あとは、WordPressのテンプレート構造を調べたりしてました。業務用サイトを全然更新してないんで、何かしなくちゃと思っています。
でも、今日はもう寝る。スキーで筋肉痛だよ‥‥。

Illustrator ベジェ曲線 [トレーニングブック] CS/CS2/CS3対応 クリエイターのための3行レシピ ポストカードデザイン Illustrator&Photoshop (クリエイターのための3行レシピ)

『携帯サイト コーディング＆デザイン』を読みました

トミナガです。
実は年末に、『携帯サイト コーディング＆デザイン』読者プレゼント！ | IDEA*IDEA で『携帯サイト コーディング＆デザイン』を頂いていたので、今日ざっと読んでみました。
去年は仕事でも携帯サイトの構築を依頼されて「そそそんなのやったことないですよ」て感じで逃しまくりだったんですけど、この本があれば大丈夫です！

この本がターゲットとする人たち

前書きにあるように、現状では携帯サイト作成についてのノウハウがまとまってなく、3キャリアの仕様がバラバラのため、すでにHTMLやCSSを習得している人（私みたいな人）にとっても、モバイルサイトを作るのは敷居が高いです。

「3キャリアできちんと見れる仕様のサイトを作りたい」と思っても、何をやれば良いか、何ができないのか、調べるのにも時間がかかります。
私は去年初めて仕事で携帯サイトの制作を請け負ったのですが、そのとき非常に参考にしたのが、Think ITの連載記事でした。

この記事では、画像の回り込みのtipsが一番役に立ちました。実際のコードと表示画面が出ていたので、思った通りに作れて、やった！　と思ったのを覚えています。

というように、ちょっとヒントが欲しい、こんな形のモバイルサイトを作りたいけど、方法がわからない、っていう人には、この本がとても役に立つと思います。

MTのリニューアルで参考にしたものまとめ。

今回のブログのデザイン変更、たくさんの人に「いいね！」と言ってもらえて、やって良かったなぁと思っています。
いろいろ、HTMLやCSSの文法的なことをできる限り正しくやったり、MTの今までやっていなかったカスタマイズをやってみようとチャレンジしたかったんだけど、できてみれば、ごくごく一般的なブログという感じになってしまいました。
それでも、Jqueryとか、今までやったことがないことを取り入れたのは、良かったかな。

作業するに当たって、いろいろな本やサイトををかなり参考にしたので、記載しておきます。
これからMTのテンプレートカスタマイズやってみたいという人の参考になれば。

XHTML＋CSS関連書籍

タグ辞典とか雑誌は抜いて。

Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻

Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻 (Web Designing BOOKS)

この本で参考にしたことは、主に下記の部分です。

  • 透過PNGの扱いかた
  • clearfixハックの処理のしかた
  • ID・クラス名の命名ルール付け
  • CSSファイルの適度な分割
  • haslayoutプロパティについて
  • セレクタの優先度の計算方法

これは去年出た本ですけど、参考になる部分が多々あって、今まで上に書いた部分は、かなり適当にやり過ごしていたので、改めて「なぜそうするのか？」という理由を考えるきっかけになりました。
もう class="clearfix" 使わない！（遅い）。

レイアウト用の各ブロックのネーミングも、いつも悩むところだったのですが、今はこの本に書いてあるものを採用しています。

ただ、（この先出てくる他の書籍もそうですが）初心者向けではないです。
これからコーディングやCSSレイアウトを勉強したいという人には、『実践 Web Standards Design』がいいんじゃないかと思います。難しいかなぁ。

現場のプロから学ぶXHTML+CSS

現場のプロから学ぶXHTML+CSS

これは最近買った本です。
コーディング作業は、個人の手癖が出やすく、ついつい慣れた方法で手抜きしてやりがちなので、現在の自分のスキル確認として読みました。
後半にはモバイルデバイスやiPhone向けのコーディングの話題も出てきますが、それほど詳細には書いていないので、使う予定があればそれぞれ専門の本を買った方が良いと思います。
今回は、MTのテンプレートごとに異なるCSSを適用する方法として、第3章の「CSSセッティング」を一番参考にしました。

一部CSSのIE6対策をしました。

とみながです。

昨日、mioさんから「IE6で見たらエラーが出ます」と言われたので、CSSと一部背景画像の修正をおこないました。たぶん、今はエラーが出ていないと思います。
ゴメンネ‥‥＞mioさん。

このデザインをコーディングしている時、IE6をどこまでサポートするかということは、相当悩んだのですが、最終的にはアクセス解析の数字を見て、今が切り替え時かなと判断しました。
因みに現時点ではこういう感じです。

2008年12月22日のアクセス解析結果：ブラウザ別

以前、全体的には半数以上がIEユーザーです。因みに私はFireFoxユーザーです。

訪問ユーザーのIE6と7の内訳

IEのバージョン別内訳ではIE7がIE6を若干上回っています。

このデザインを作った時に、背景画像は透過PNGを使おうと決めていたのですが、現在多く使われているブラウザの中で、IE6だけが透過PNGをサポートしていません。
なので、透過PNGを使えるようにするための、Javascriptライブラリというものがあるのですが、主なものに、

などがあります。このサイトでは、IE PNG Fixを使っています。

ただ、IE PNG Fixなどを使っても、完全に透過PNGの利用が可能というわけではなく、背景画像の指定が使えなかったり、今回エラーが出ていた、背景を指定したdivなどのボックスに、position: relative;　などを指定できないなど、不可能なこともあります。

note : 20081216（MTとWP）

トミナガです。1日中MTの検索テンプレートいじくってて、頭いたいです‥‥。今日はこれ書いたら寝よう。

最近は午前中は英語、読書、ニュースの消化とメールの返信、午後は制作作業というパターンが続いています。
仕事もそんなに（というか全然）忙しくない。年末なのに。まぁ、勉強する時間あるだけ良いと思うことにしよう。

午後はずっとMTのテンプレートを作っていました。トップページに記事をリストアップしたり、個別の記事のページを作るのは難なくできるようになったのですが、検索結果やコメントの投稿といった、システムの動作にかかわる部分をいじるのが苦手です。
Mt4.2ぐらいになってから、検索結果のページ分割がついたみたいで、今日はそこをずっと調べたりしてました。すごく時間がかかったけど、何をやるのも最初は時間がかかるもんだと自分に言い聞かせています。これができたら、また1つ可能なことが増えるわけだ。

このMTのカスタマイズがおわったら、WordPressのカスタマイズをやる予定です。
よく、仕事の打合せとかに行くと「WordPressできる？」と聞かれるのですが、「MTならできますけど」と大抵は答えます。WPができないわけではないんだけど、あんまり経験がないので‥‥。

で、なんでそう聞くのか？　と逆に尋ねると「無料だから」という答えが返ってくることが多いです。みんなその程度にしかWebのこと考えないんだなーと（この傾向は広告代理店に多いような気がする。もともとWeb制作会社だったところは、MTも選択肢にあることを理解している事が多いように感じる）非常にガッカリしてしまいます。
私の印象だと、ある程度の規模の企業サイトはMTで作ったほうがやりやすいと思う。WPは、会社案内的な小さいサイトだったら良いけど、本来は個人のブログなんかに使うのが一番良さそうな感じ。

と、考えていても仕方ないので、MTおわったらWPやって、本当にそうなのか、再度考えてみたいと思います。

CMS構築 成功の法則
CMS構築 成功の法則
posted with amazlet at 08.12.17
生田 昌弘 門別 諭
技術評論社
売り上げランキング: 79972
おすすめ度の平均: 5.0
5 CMSとは顧客満足度をあげる為のツール
5 CMS関連書籍では一番ですね
5 CMSってなんだろう！？っていうことがつかめました。
5 ツールの使い方ではない、本当に役に立つCMS本
Amazon.co.jp で詳細を見る

Fireworksの小技が紹介されました。

トミナガです。

先週書いた"Fireworksでよく使う小技""が、メルマガ【DreamweaverではじめるWeb標準】148号に掲載されていました。
ありがとうございます。

あといくつか書こうと思ってるネタがあるので、早いとこ記事にしたいと思います。みんなが知りたいことは何だろう？

もともとは、手順を説明するのが難しいので、動画マニュアルみたいのを作ったらいいかな？　と思ったんですが、うまいスクリーンキャプチャのやり方がわからなくて（ズームとかを入れたい）、調べてます。
画面全体を撮る方法はわかってるのに‥‥！

ところで、この前「Fireworksって、Photoshopみたいにチュートリアルも沢山公開されているわけじゃないし、デザイン作業についての本もあまり無い」と書いたので、どんな本だったらあるんだと思ってアマゾンを見てみたら、すごい高額な本を見つけました。

おしえて!!FIREWORKS 8 (毎コミおしえて!!シリーズ)
おしえて!!FIREWORKS 8 (毎コミおしえて!!シリーズ)
posted with amazlet at 08.12.12
森川 眞行 森川 みゆき
毎日コミュニケーションズ
売り上げランキング: 210128
おすすめ度の平均: 4.0
3 まぁまぁのデキです。
4 とても役にたちました
5 とても、分かり易い。
Amazon.co.jp で詳細を見る

今現在で5,000円近くになってるんですけど‥‥。

でも、そろそろCS4も出荷されるから、新しい本が見たいですね。でも、出るかどうかわからないし、私が提供できる小技は、継続的に書いて（たいしたことじゃないけど）シェアできると良いかなーと思っています。

CS4は、Firewoksだけアップグレードしたい。

Fireworks CS4 (V10.0) 日本語版 Windows版

note : 20081210（jQueryをやってみた）

SPAMのチャーハン

トミナガです。
今日は家にあったSPAMの缶詰でチャーハン作って食べました。こんな写真を載せたら、普段全然料理してないってばれるな。

12月に入ってしばらく経過したけど、仕事はそんなに忙しくない。
というか、フリーランスになってから最初の年は結構忙しくて（寝る時間があまり無かった）、年々暇になっていってるような気がする‥‥！　何とか生活できてるからまだ良いけど、景気悪いなぁと思うことは多々あります。

今日の仕事は書類作成とか事務作業メインで。メール書いたり進行管理など。来年は、制作スピードの向上とディレクション力をつけないと、いよいよ感です。ヤバス。制作の仕事が40までできると思えないし、やってたらマズいよなー。とか考える。


Fireworksでよく使う小技

とみながです。
今日は資料も何も届かず、特にする仕事もないので、このサイトのリニューアル用のカンプをがーっと作りました。

今のもそうなんだけど、私はWeb用のデザインは全部Fireworksで作っていて、今はCS3を使っています。
Photoshopと比べると美しくないとよく言われますが、工夫次第ではかなり良い感じに使えるのでは‥‥と思うのですが。現行バージョンだとテキストのアンチエイリアスがあまりキレイじゃないかなーと思うぐらいで、フィルタ関係は使い方を工夫すれば大丈夫です。

Fireworksでうまく影をつける

よくやるのが、ぼかしをフィルタでやらないで、ぼかしをつけたいオブジェクトを複製し、背面に配置してエッジをぼかす方法。
これはあれこれ試行錯誤して、どうやったらPhotoshopの「光彩（外側）」に近づけるかと考えて、結果的にこの方法になりました。

わかりにくいので図を作ってみました。

20081202_fw01.jpg

すごく単純な方法なのですが、なぜかよく質問されます、これ。
FWってそもそもPhotoshopとは違うソフトなので、同じエフェクトかけても、同じ見た目にはならないんだよねー‥‥。

上に書いたのは基本的な方法で、場合によっては、影の部分を変形したり、マスクをかけたりしています。

Fireworksのチュートリアルをやってみた。

Vista風のグラフィック

FireWorks大好き、トミナガです。
大好きだけど、上手くできないことも多く、世間に数多と溢れる美しいグラフィックのうち、いくつかは、きっとFWで作成されたものもあるはず‥‥と、毎日目をギラギラさせています。

今日は仕事をお休みして、英語のページで見つけたチュートリアルをいくつか試してみました。

上の写真は"Create Vista-like Wallpapers with Fireworks | Firetuts.com"の説明を、読めるところまで解読して作成したものです。30分ぐらいでここまで出来ました。
ポイントは、描画モードの「オーバーレイ」＋透明度の組み合わせと、ぼかしフィルタを「放射」でかけてみる。ちょっとねじれたような、キレイなぼかしができます（右下の部分で使ってます。

なんとなくAppっぽいアイコン。

icons

トミナガです。寒い。

はてなブックマークで見つけた、"Glossy Icon Pack - 4 pieces Free PSD"がカワイかったのですが、色があんまり好みじゃなかったのと、最近ずっとApp Storeを見ていて、こういうアイコン流行るのかなーと思っていたので、それっぽいアイコンを、Photoshopで練習がてら作ってみました。

作っている途中で気がついたことは、

  • 境界線もっと細くていいかも。
  • 真ん中から下のグラデーションがちょっと難しい。
  • 細かいところのキワを小さくてもハッキリ見せる処理が必要だ。

ってところでしょうか。意外と「光彩」を使いましたよ。

一時期のWeb2.0っぽいピカピカした感じみたいに、やたらめったらは使わないと思いますが、処理された画像を見て、どうやったら同じものを作れるか考えるための、良い練習になりました。
色は青の飛行機のが気に入ってるけど、緑色のメールのやつが上手く出来ているんじゃないでしょーか。色はウサギがカワイイけどね！

新しくなったWordPressの本を買おう。

引き続きぱっとせず。午前中はWordPressやる。まぁまぁ順調に進んだけど、1年ぐらい前に購入した本を見ながらなので、WPに関しては書籍を新規にいくつか購入することを考えています。
候補は、

たぶんこれ、いっぺんにではないにしても、全部買うと思います。
ネットで調べるという手もありますが、手元の書籍を見るとスピードが全然違うのです。MTも、本沢山買って覚えてきたし。
あと、ネットのリファレンスをずっと見てると、目が非常に疲れる。印刷してもいまいち読みづらいなどの不便なところがあって、ちゃんと取り組もうと思ったものに関しては、本買います。

業務用のサイトをMTOSでやろうと一時期考えたのですが、どうも業務的にはWPに関する問い合わせの方が圧倒的に多いので、WPで作ったほうがいいのかしら。
検索ワードも圧倒的にWPの方が多いです。うーん。ここでリハビリするべきか。悩む。

でも久しぶりにWPやったら面白かったから、WPでやるのもアリかな。

午後からは仮病人。頭が痛くて体がだるく、ずーっとソファの上に横になってました。気がついたら17時ぐらいで、そのときのガッカリ感と言ったらもう‥‥。
明日からは心を入れ替えて、真人間になろうと思います。

おやすみなさい。

WORDPRESS2.6 標準ガイドブック　Webプロフェッショナルのための黄金則 WordPressテンプレートタグ虎の巻 (Web Designing Books) (Web Designing BOOKS)　WordPress逆引きデザイン事典[2.X対応]

北海道WEBコンFESTA 2008「夏祭り!アドビ特集」行ってきました。

トミナガです。

今日は北海道WEBコンFESTA 2008「夏祭り!アドビ特集」に行ってきましたよ！
いやー、流石に人多かったっす。しかし普段滅多に聞けないセミナーを沢山受講できて、満足。

簡単に内容をば。

Adobeクリエイティブツール最前線!

Adobeクリエイティブツール最前線

今年はDreamweaverとFireworksが10周年というおめでたい年だそうで、初めてベータ版を一般公開したそうです。10年かー。私が初めて使ったDreamweaverはバージョン2でした。それが今やCS3‥‥。なんだか感慨深いです。
あと、FLASHプレーヤーの普及率について具体的な数字を見ましたが、驚異的だなと思いました。もはや標準ですもんね。

で、次バージョンのFLASHプレーヤーのデモがあったのですが、何と縦書きサポートですってよ！！！　
あとはDreamweaverのレンダリングエンジンがWebkit（Safariとかのやつだけど、Dreamweaverにいじくってるので、全く同じ描画ではない）になるそうです。結構改善されそう。楽しみ。

Webサイト制作の「今」とともに進化するDreamweaver CS4

Dreamweaver4のデモンストレーションでした。いやー、スゴイ楽しみ。それに尽きる。
特にSubversionの機能。もう「別名で保存」を繰り返さなくてもいいんですね‥‥！！
終わったあと、神森さんに直接聞いたら、最新のMacOSには最初からSubversionが搭載されているらしいので、導入しやすいとのこと。
フォローアップを楽しみに待っているところです。

北海道WEBコンFESTA 2008 「夏祭り!アドビ特集」は今週末。

http://hwcon.org/hwconfesta2008

北海道WEBコンソーシアム » 北海道WEBコン FESTA 2008 「夏祭り!アドビ特集」開催のお知らせ via kwout

トミナガです。
もっと先のことかなーとのんびりしていたら、もう今週末だったんですね。

北海道WEBコンFESTA 2008 「夏祭り!アドビ特集」

日時
9月6日(土)10:00-16:30
参加費
一般・2,000円　学生・1,500円(学生証提示必須)
会場
北海道自治労会館 ４Fホール
出演：
西村真里子（アドビシステムズ）、鷹野雅弘（スイッチ）、神森 勉（アンカーテクノロジー）、渡辺英輝（ビーコン・コミュニケーションズ）、古本光司（24-7）　敬称略

私は一般で参加します。懇親会も行くよ。
前回のCSSniteからかなり時間が空いた感じがしますが、今回も楽しみ満載な内容。
特にカンプをFireworksで作成する派の私には、「Fireworks as phoenix」が嬉しすぎる‥‥。「sのうち消えるだろ」とか「イラレとフォトショが合体して、フォトストレーターになるから消える」とか、消える消える言われてましたけど、まだあるよっ！！
最近「ラフはpngで作成してください」という依頼も増えました。

事前申込みは明日、9月3日までだそうです。
急げ！

あ、で、来る人は教えてください。当日すれ違いになるとサミシイので。

４種類のCMSをインストールしてみた。

といっても、今のレンタルサーバーはDM5個までしか作れないので、ローカルの環境にね。

ずっとMTをやっていて、WordPressがいまいちMTほど理解できないってのと、その他のCMSの名前もよく聞くようになってきたので、管理画面を見てみようかってことで、DOMの勉強を止めて、今日はCMSを色々試してみることにしました。

今日入れてみたのは以下の通り。

で、簡単な感想をば。

WordPress

管理画面はデフォルトでこんな感じ。

WordPressの管理画面

特に私が申し上げることは無いのですが‥‥。やっぱりリソースが豊富で、日本語のリファレンス・書籍もMTの次に多くて、汎用的だなーという感じがします。
ただ、管理画面で何かしようとすると、他のCMSに比べてクリック数が多いと思います。もうちょっとサササとアクセスできるといいのになー。

そういえば、最近WordPressの本がすごく増えてきたみたい。

WordPress逆引きデザイン事典[2.X対応]　WORDPRESS2.6 標準ガイドブック

WPはタグ事典持ってないから、買おうかなと思っています。

為せば成る。

為せば成るの意味を調べてみたら、

やればできる。

と書いてありました。非常にシンプルなことなんですな。

以前やると書いたような気がするのですが、講師業務が今日で終わりました。短期集中型だったので、1週間だけ。
この期間でWebのこと全部教えるわけにはいかなかったので、後のカリキュラムと相談しながら、実務の面から見て「覚えておいて欲しいこと」を重点的にやった、つもり。
受講した人が理解してくれたかどうかは、アンケートを取ったりしていないのでわかりませんが（前のスクールはあった）。

ワタシはHTMLとCSSについては、誰かに教えてもらったという経験はなくて、ほとんどの部分を独学でやってきました。
結果的には後からスクールで補う形になりましたが、お金はかかったけど、それ以上のものを取り返したので良かったなーと思います。

授業ではもうちょっと面白い話とかしたかったんですけど、まぁ、大人の事情もありますので、あんまり横道に逸れるようなことはしませんでした。50％減（当社比）って感じ。
いきなりやって理解するというのは難しいので、身に付けるためにはいかに反復するかという話を最後にしてきたのですが、みんなちゃんとやってくれるかなー。
勉強って何でもそうなんだけど、繰り返しやらないと覚えないのよね。HTMLのコーディングが早くできるのだって、数こなしてナンボだし、デザインも幅広くやると、表現のバリエーションが増えてくる。

ただ、HTMLとかを教えるのも大変なんですけど、現在札幌に、イラレ・フォトショを習えるようないい学校があるのかわからないのが心配です。
あるにはあるんだろうけど、どんな学校なのは、私にはわからないので、行った方がいいよと言いにくい感じ。他の学校の卒業生の知り合いもいないし。
やっぱりイラレ・フォトショ、あとFireworks使えないと実務では厳しいのです。

でも、過去のことを考えると、私自身もいろんな人にいろんな事を教えてもらってこういう風になったので、Webデザインの勉強がしたいと考えている人には、何らかの形で力になってあげたいなーと思っています。
それほど実力があるわけでもないし、おこがましいかもしれないけど、他にそれをやる人がいないのだったら、それが私の役割なのかなと考えています。

みんな頑張れよー。

講師アシスタント業務終了

花束

本日で講師アシスタント業務、全て終了しました。受講生がお花をくれました。ありがとう。

長かったなー。自分が卒業した後だから、3年ぐらい？　大体まる3年だと思います。途中お休みしてた期間もありましたけど。

何人ぐらい教えたんだろう？　もしかしたら100人以上いるかもしれません。
その中で「トミナガに習ったことが役に立った」と思っている人が何パーセントいるかは不明ですが、私が伝えたことが、少しでも何かの役に立っているといいなぁ、と思います。

3年間の大半でコンビ組んだ上にご指名下さったH氏に多謝を。
この方が推薦してくれなければ、私がこの仕事をやることはなかったでしょう。いやぁ、実に楽しかったです。

さて、次にどこで何を教えるかは、まだ確定してませんが（確定してないのは本当だよ）、何かしらの形で、またこういう業務はやりたいなと思っています。
Web講師をお捜しの方は、声をかけていただければと思います。

CSS clipに掲載されました。

トミナガです。

以前、ブログリニューアル前に、「デザインを完成させたら、各種CSSギャラリーサイトに掲載申請する」と書いたので、それを実行しました。

CSS Clip.

どうしようかなと、かなり悩んだのですが、1人で考えて居ても仕方ないので、エイっと申請して、CSS clipの管理人さんから昨日連絡をいただきました。
他のギャラリーサイトにもいくつか申請したのだけど、通らなかったのか、日本語だからなのか、掲載が確認できたのはここだけでした。

いちおうWebデザイナーを名乗っているので、デザインで結果出さないとってずっと思っていて。 このサイトは今はブログだから、文章の読みやすさが最優先だけど、プラス、見た目の良さっていう価値を付けるにはどうしたらいいだろう？　って色々試行錯誤して、リニューアル宣言してるのに遅れて遅れて、そのうちMTが4になって‥‥とか、結構やると決めてからいろいろあったなーと思いました。
もっと集中力持ってやらないとダメだなーと、また1つ課題ができました。

でも、とりあえず、掲載していただけて、ある程度の結果は出せたかなと、ホッとしています。
次はもっと良いもの作れるように、がんばります。

【Web】複数のIE用ブラウザチェックツールのメモ

先ほど日記に書いたIEのブラウザチェックですが、私の環境はWinXP＋IE6＋IE7スタンドアロン版、でやっております。
が、スタンドアロン版のIE、VistaのIE、WinXPに入れたIE、それぞれ挙動が異なることが、ごく希にあるらしい（都市伝説かもしれない）。
IE7と一口に言っても、異なる環境にインストールした場合はいろいろ疑わしい事があるわけで、Webコーダーとしては早急にVista環境を作って、入念にブラウザチェックできるようにしなくてはと思っています。

今現在、取り急ぎのためにオンラインのツールとかスタンドアロン版を使ってるので、それのメモ。
いずれ不要になるだろう。

  • ScreenShots.jp

    オンラインでURLを指定すると、IE、Firefox、Safari、Netscapeのバージョン違いのスクリーンショットを取得して表示してくれる。Safariは早いけど、IE7だと待ち時間結構長し。
    無料版は広告や画像に透かしが入ったり、IEがバージョン7しか対応してないけど、IE7だけ見たいので、私は気にならない。お金を払うと、PDFに変換してくれたりもするようです。
  • “ウノウラボ Unoh Labs: IE7 RC1をスタンドアローンで動作させる方法”
    で、紹介されていた方法。
    1. IE7 Standaloneのサイトから、IE7 StandaloneのZIPファイルをダウンロード。
    2. マイクロソフトのIEのサイトから、IE7もダウンロード。
    3. IE7 Standaloneに入っているSetup.batを実行してしばし待つ（途中でキーボードを1回押すところがありました）
    4. IE7 Standalone Setup.batを実行してまた待つ
    5. IE7.batをダブルクリックして実行。15秒待つ‥‥。
    6. しばらくすると、IE7が起動。
    このスタンドアロン版IEは、私が今まで使っていたものより安定しているようです。
    しばらくこちらで様子を見ます。
  • IETester

    なんと、複数のIE環境をいっぺんにチェックできる。まだβ版の模様。
    私は入れていないので、使えなかったけど、IE5.5~IE8ぐらいまで調べられるみたい。
    参考：Vista（64bitも）で動く、IETesterを入れてみた｜CSS HappyLife
  • multiple versions of IE

    これはまだ試してないけど、便利そうなので、明日入れてみます。特記事項があったら追記するかも。

特に指定が無い限り、NetscapeとMacIE5ではチェックしてません。環境もないし、サポートしてないブラウザですので、工数がかなりかかるのですね。
OPERAは、あんまりしないんだけど、Fxでちゃんと見えてる場合は、OPERAでもちゃんとなってる事が多いので、あんまり心配していません。

あーさてさて、明日もIE7チェックです。コーダーの皆さん、お薦めツールがあったら教えてください。

【MT】リニューアル直前

このブログの体裁を変えようと四苦八苦してきたのだけど、諸先輩方のお力と、最近購入した何冊かの書籍と、オンラインのリファレンス記事のおかげで、何とかあともう少しってとこまで来ました。
favicon作りなおそうと思ったけど、次でいいや‥‥。

今ちょっと迷ってるのが、「テンプレートの分割（グローバルテンプレートの使用も含む）」については理解したのですが、ニュースサイトや長く続けてる個人ブログ（例：ここ）の場合、やっぱりMT3.xまで用いられていた、phpによるページのモジュール化をやったほうがいいのでしょうかね？

サーバーのパフォーマンスにもかなり依存するかと思うのですが、MT3.xの時は、phpのreadfileつかってかなり再構築が高速化して、ビックリした覚えがあります。

普通の、中小企業サイトだったら、そこまではいらないかな。

でも、再構築しないとメニューが新しくならないとか、そういう問題は今のところ聞かないですね。
もう少し自分の環境で試してみます。

Movable Type プロフェッショナル・スタイル MT4.1対応は重版決定、おめでとうございます。

Movable Type プロフェッショナル・スタイル MT4.1対応
▲Movable Type プロフェッショナル・スタイル MT4.1対応

CMSとして使うMovable Typeガイドブック
▲CMSとして使うMovable Typeガイドブック

あー。管理画面カスタマイズやりたいなぁ。
MTOS結構やりがいあるんじゃないかって思ってるのですよ。MTOSで自分が構築したらどうなるか？　考えてみる値はありそう。

【本】ユニクロのデザイン

ちょっと前に書店で見つけて、あ、これは手元に置いておかなくては、と思った本。

アイデアという雑誌の別冊（ムック？）のようです。

ユニクロのデザイン (SEIBUNDO Mook)
ユニクロのデザイン (SEIBUNDO Mook)
posted with amazlet at 08.04.19

誠文堂新光社
売り上げランキング: 52423
Amazon.co.jp で詳細を見る

今朝のユニクロのチラシに入っていたので思い出しました。
結構厚みがあって、自力で購入して持ち帰るのは大変だなーと思って、その場での購入を見送ったので、アマゾンでこれから買いますー。

アマゾンでユニクロ本を調べると、マーケティング関連のが結構出てくるんだけど、これは歴代の広告グラフィックをまとめた本みたいでしたよ。
クリエイターのインタビューもあったし、過去のヒット商品（フリース、Tシャツとか）の写真を見ると、ちょっぴり懐かしさもアリ。

いつもビックリするような広告を仕掛けてくる会社ですから、見応えありそうですね。結構分厚い本でしたよ。

need navigation icon?

note

トミナガです。
本日の手書き。
私はあまり絵が上手い方ではないが、よく「面白い絵を描くね」と言われます。面白いらしいです。
上の写真は、タグってどんな形だっけ？　と思っているところ。ナビゲーションにアイコンって必要だろうか。
直感的に理解できるかなと思ったのだけど。
まぁ、自分のサイトなので好きにやります。

今日も朝8時ぐらいに起床、起きたらすごく雪が積もっていたので、母と2人で除雪。相当疲れたらしく、終わった後ウトウトと横になってしまった。
昼食はそうめんと、さつまいもをふかしたもの。甘くて美味しかった。

午後からPCの前に座って、昨日のMT作業の続き。
MTがというよりも、CSSを書いて修正してる方が多いです。夕方に1回休憩して、夜になってからデザイン作業に移行。
しかし色々見過ぎて迷うので、全然進まない。結果、上の写真のように、紙の上にあれこれ描いてみたりするんですがー。
ああカッコよくしたい（漠然としすぎ）。

あと、タイトルを作るフォントが決まらない。明日も考える。

今日もCSSギャラリーサイト見てから寝ます。

私の「いいWebサイト」

トミナガです。もうね、今日は、くたくたです。まぁでも昨日よりは早く寝られるのでヨシ。
今日も写真とってる時間がありませんでした。

昨日の「いいWeb」の話の続きですが、

私が考える「いいWebデザイン」っていうのは、見た人が、「スゴイ！」とか「かっこいい」「きれい」「カワイイ」とかの、何かしらの感情の動きを持つものです。

と書いたのですが、具体的に、最近「これはイイ！」って思ったサイトはあったかな？　と考えて、いくつかリストにしてみました。

  • ニコニコ動画
    双方向的なコミュニケーション（動画投稿者と閲覧者の）がものすごくスムーズにいってるのを見てビックリした。
    UIも好みが別れるだろうけど、私はすごく好き。
    細かいところも結構使いやすく作っていると思うけど、まだ改善の余地があるよね？
    11月からずっとお金払ってます。
  • twitter
    可愛くてとっつきやすく、フレンドリーな雰囲気がロゴとかアイコンで上手く出せているサイトだと思います。
    コミュニケーションのタイムライン？　やっていることは基本のキなんだけど、見せ方一つなんだなぁと。
    Webサービスとしては、背景画像を入れ替えられたり（フォームからアップロードするだけ）、テキストの色変更など、やりりすぎない程度のカスタマイズができるとこが良いと思う。
  • 百式
    超有名ですね。とにかく文章が読みやすい。ページデザイン、画像（とそのサイズ）、文章、全てが設計されているサイト。
    自分の書いたものを人に読んでもらおうと思う時、どうしたらもっと可視性が上がるかな？　と思うとき、必ずこのサイトのことを思い出します。
    メールマガジンも取っています。参考になるわ（仕事柄）。

たぶん、私が「これいいな」と思うのは、感情の動きが基準になってるんだろうなー。楽しいとか‥‥100式は感心するってのが多いけど。面白い！っていうのもあるね。

それから、多少関連して、
3ping.org : 何のための道具？

HTMLやCSSの技術を習得した後、さてどうするか？　って話題なんですが、

僕の記事へのフィードバックの中に、「HTMLそのものが楽しい」というのが多くありました。それが悪いことだとはちっとも思いません。僕は HTML を大工道具としてトンカチに例えましたが、トンカチを見つめなおした時に、その設計や取扱説明書そのものに興味が沸いて、それが勉強するモチベーションにもなっていました。
ただ、そこだけに面白みを感じていると、使い方をある程度覚えたところで満足してしまいがちです。 使い方を覚えるのも楽しいですが、それを実際に使って何かを作ることはもっともっと楽しいものです。 仕様に詳しいほど、何か作る時に楽できるよ?

という部分にグッときました。
私もHTMLを覚えたて、それが表現してみるのが楽しくて仕方ない時期ってあったな～って思い出しました。
まだ20代の真ん中ぐらいの時ね。HTMLタグ辞典みながら、日曜日をまるまる過ごしたりとか。

全文はリンク先を見て頂きたいのですが、今日も仕事で「HTMLコーダーは、工程の中で軽視されてるな‥‥」と思うことがあって、ガックリしてたので、なんか元気出ました。
頑張ろう。

だってデザイナーの作ったPSDだけじゃ、Webページにはならないもんな～。
それに、自分がラフ作る時は、コーディング時に矛盾が出ないように考えながらできるし‥‥。たまにですけど、「これは一体どうしろと？」とお聞きしたくなるようなラフデザインってありますから。

XHTMLとCSSについては、基本的な部分については理解できた（と自分では思っている）ので、今はグラフィック処理のお勉強というか努力・精進をしようという気分になっています。
だって、きれいなサイト作って、きれいにコーディングしたいもん。
私がいいと思ったものが正しい。私が作るサイトに関しては。ま、残念ながら仕事ではそういかないことが多いんですけどね。

詳解HTML&XHTML&CSS辞典 第3版

デジタルハリウッド札幌校が閉校へ

デジハリ札幌閉校のお知らせお手紙

実は去年の12月には伺っていたのですが、先週正式に文書通知を頂きました。
そして、その手紙を写真にとってUPのせようと思ったら、どっか行った‥‥。

デジタルハリウッド札幌校の閉校が、正式に決まったようです。私はもう1年以上、講師アシスタントも行ってなかったですし、あまり受講生は多くないのかな、程度にしか思ってなかったので、最初にその話を聞いたときはびっくりしたというか、とても残念でした。
自分がたくさん勉強させてもらったところだからねー。

まぁしかし、スクール運営に対しては、受講生から少なからず不満も出ていたと思います。
大人なので、詳しくは書きませんけど。私が受講生の時にもありましたし（というか、私がやらかしたのだが）。

札幌は、他のパソコンスクールもどんどん閉鎖していって、勉強するところがなくなっている感じです。

これからWebデザインやりたい！　っていう人を、お手伝いできることってできないかな‥‥と思います。
札幌だと、インターンの受け入れ先になってくれる会社もなかなかないしね。
私は運良く1ヶ月体験できたので、当時受け入れてくださったLさんには（今や同業の大先輩だ）には大変感謝しています。

Webデザイナー1年生―プロになる前に知っておきたい!仕事の中身と進め方 (WORKFLOWプロになる前に知っておきたい!仕事の中身と進め方)　Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。

書籍だけで身につくことじゃないしねぇ‥‥。
とにかく残念だな（自分が尽力できなかったことも含めて）というのが感想ですね。
営業は今年の6月いっぱいまでだそうです。

追記；
なお、今後の卒業生・受講生サポートについては、東京本校にて引き続き行なうそうです。
しかし、札幌からはさすがに遠いので、今までのように気軽に就職相談に立ち寄ったりすることはできなくなりますね。

仕事熱は静かに燃焼中‥‥

トミナガです。

今日は1日、自宅で過ごしました。外に出たのは灯油を入れに行ったときだけ。どんだけ動かないのだという話です。明日からはまた仕事だー。

仕事熱はまだ持続中。どうなることやら。
私は比較的飽きっぽいほうだと思うのですが、今月の仕事欲は異常‥‥なんだけど、肝心の制作案件はあんまりやってなくて、ビジネス書を読んだり、こんなサイト作ってみたいなーって絵を描いたりばっかりしています。まぁ、アレだ、やる気はあるんですよ。データが来ないだけで‥‥。

午前中は、部屋の片付けをして、読み終わった雑誌や新書をアマゾンのマーケットプレイスへ。
マーケットプレイス、結構いいお小遣いになっています。毎月買った本はきれいに読んで、2～3回読んで、もう読まない or 残念だけど置き場所が‥‥って場合は、どんどん出品してます。発送はメール便で。ヤマト便のお兄さんもすっかりおなじみですよ。
毎月、購入した費用と、売れた代金でトントンになる感じです、私の場合は。ただ、今月はちょっとオーバーかな。

午後からは、図書館で借りたビジネスマナーの本を半分読み、名刺の整理をして（ローロデックスまだ買ってない！）、レンタルサーバーの資料に目を通す。収入が一定になるまでは、あまり贅沢な環境にはできないので、コストパフォーマンス重視になりそうです。DB1個しか作れないとかは、今時ないよなぁ。その後ちょっと家事。

それから仕事で一緒になった人に、よく「ショッピングサイト作れる？」と聞かれるのですが、ほとんどやったことがないので、とりあえず無料のCMSみたいのはないかなと、ECキューブのサイトを閲覧。
ダウンロードしてみたのだけど、かなりデータサイズが大きくてびっくり。マニュアルを見ていると母帰宅、そのまま夕食の時間。窓の外を見たらすっかり暗くなっていました。

ECサイトというと、OSコマースかZenCartって感じなのでしょうが、私はどちらもカスタマイズしづらくて、あまり好きではないです。というか、ZenCartについては管理画面が煩雑すぎて、PCの操作に慣れてないショップオーナーさんだったら、かなり手間取りそう。
どれを使うにしても、オープンソースのものを使うのだったら、GPLライセンスやコピーレフトについて理解しておく必要がありますなー。あとは、それぞれのシステムの特性ね。

その辺については、うまくまとめた書籍が出たみたいなので、来月あたり購入しようと思っています。

▼WebクリエイティブのためのCMSツールガイド (Web Designing BOOKS)
WebクリエイティブのためのCMSツールガイド

明日はデータ届いたら制作業務をしますが、届かなかったらAMはメール返信、問い合わせと、PMは、デモとサンプルサイトでも作ろうかな。
ってな感じで、いろいろやりたいなぁと思っています。

生き返った。

とみながです。

ずっと風邪をひいて、ハンズオントレーニング受講後は何日か寝ていたのですが、今日の午後になってようやく熱が下がりました。よかった良かった。
明日からは通常通りに活動できそうです。寝ている間にもあれこれ考えたりしたので、やりたいことが山積みで困っちゃう。今週末からもう12月だしね。

メモ代わりに、寝たり起きたりしながらちょこっとチェックしてたサイトの一覧をば。

こういうリソース公開ってオモシロイよね。他の人はどんなの見てるのさ‥‥！　とか。私はこのブログのカスタマイズ＋リニューアルを亀の速度で進めていて、その途中にもたくさんの知識を得ているので（幸せだね）、少しずつ予定よりも良いものができそうな気がしています。
その分時間はかかるかも知れないけど、うまくいくって信じてる。信じてないと、やってられません（笑）。

Adobe Creative Suite 3 Web Premium欲しい

おはようございます。
こんにちわ。
こんばんわ。
トミナガです。

先週のCSS niteでアドビ西村さんのセッションを見てからずっと、CS3欲しい欲しいと呪文のように言っているわけですが、今日、やっぱり買おうかな！　と、ふと思いました。
買おうかな、というか、おそらく買っちゃうだろうなという気がするのです。今使ってるPhotoshop、バージョン6とかだし‥‥（軽いよ！）。
取引先の人も、みーんなCS2使ってるので、特にイラストレーターのデータなんかは、バージョン落として送ってくださいってお願いするのも心苦しいですし。
マクロメディア系のソフトも、アドビと統合されてみんないい感じ。特にFLASHね！　あんまり作らないけどね！　っていうか作り方忘れた（笑）。あまりにもFLASHの仕事なくて‥‥。まぁ、あれは苦手だし、他で頑張ればいっか、って感じです。

CSS niteで見て、よさそうだなと思ったところは（from 西村さんセッション＆鷹野さんセッション）

  • FLASH CS3：PSDデータをダイレクトに読み込み（レイヤー効果等の保持）
  • FLASH CS3:モバイル関係の制作環境の向上（Device Centralが高機能すぎる！）
  • Dreamweaver CS3：なんと言ってもAjaxフレームワークの「Spry」の手軽さが魅力
  • Dreamweaver CS3：CSSの管理が以前より柔軟かつ使いやすくなったように見えた
  • Fireworks CS3：これはセッションなかったけど、私が無いと困るので。Photoshop仕様のブレンドモード搭載他、イラレ・フォトショとの連携が強化されたようです。うっはー！欲しい！

値段はもう、WEBプレミアムになるとめちゃ高いですけど、これを買って仕事の効率があがれば安いもんだ。PC買うときにも同じこと言ってたような気がするけど、効率が良くなるのは時間を買うのと同じだと思います。
創造性も上がるかもしれないし、チュートリアルのサイト見ても「うちのフォトショじゃできないんだよ、ペッ！」とか言って毒づくこともなくなるかも知れない。

Creative Suite 3 Web Premium Windows版 Creative Suite 3 Web Premium Macintosh版

ま、今やってるアドビ貯金を今月から加速して、今年度中には買えたらなぁって思っています。
仕事頑張るぜー！

あ、既に使ってる人、ここがいいよとかあったら教えてください。

11/24-11/25のハンズオン行くよ。

トミナガです。CSSniteの記事から人が来てるなぁ。
セミナー内容についてまとめてあるのだけど、明日か明後日には書きたい！　しかし、ポッドキャストも早くしてくださいと言われている！　どーする、オレ？

眠たいので手短に。

今日やったこと。

  • コーディングデータ画像差し替え、新規1P作成。
  • 友達にメールの返信を何通か書いた。残りあり。
  • 仕事の合間に家事を少しやった。比率を増やさないと。
  • IE7のCSSハックについて調べた。多少理解した。

明日やらねばいけないこと。

  • セミナー受講料支払い
  • 打ち合わせアポイント取る
  • 本日作業分データ送信
  • 11月の残り受注案件の進捗管理
  • mixiにきてたメッセージ返信すること

上記は必須項目で。
こうやって日々自分にタスクを課し、なおかつそれを人目に晒さなければ実行できないという‥‥。あー私ってほんと実行力ないなーと思います。机上の空論の人っつーか。

受講するセミナーは、サイバーガーデンbizの”XHTML+CSS実践講座 札幌 2007年11月24日・25日”です。
コーディングは好きなのだけれど、何しろほとんど我流ですので、手抜き・雑って思うことが多いです。もうちょっときれいなソース書けないもんかなぁと。
WEB制作、特にコーディングの部分に関しては、独学で試行錯誤してきた部分が多いので、それを矯正する良い機会にしたいですね。益子さんにまたお会いできるのも楽しみです。

そういえば、益子さんは、ご自身のことを「大藤チルドレン」とおっしゃってましたが、この講座を受けると、私は益子チルドレンになるんでしょうか？？

▼益子さんの本（これは買う）

Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
posted with amazlet on 07.11.15
益子 貴寛
秀和システム (2005/07)
売り上げランキング: 10842
おすすめ度の平均: 4.5
3 Web標準を「学びたい」人のために
5 2冊目に買う本
5 「web標準」を知る上で必読の書
Amazon.co.jp で詳細を見る

▼大藤さんの本（これは3冊持ってる）

詳解HTML&XHTML&CSS辞典 第3版
詳解HTML&XHTML&CSS辞典 第3版
posted with amazlet on 07.11.15
大藤 幹
秀和システム (2007/03)
売り上げランキング: 3117
おすすめ度の平均: 5.0
5 Webサイト制作に欠かせない1冊
Amazon.co.jp で詳細を見る

CSSnite行って思ったけど、本当にこの仕事はいくら勉強しても、し足りないというか、常に前進できる人じゃないとやっていけないわよね。
私も、あきらめ気味の時期もあったけど、改めてもうちょっと頑張って食らいついて行こうと決めました。

CSS Nite in SAPPORO

トミナガです。
今日は、CSS Nite in SAPPOROに行ってきました。

100_1492

どれぐらい人が来るのかなと思っていたんだけど、会場いっぱいの北海道じゅうのWEBクリエーター‥‥。
私は受付始まってすぐに会場入りしたのですが、目が悪いので一番前に座りました。

んで、今日、1番驚いたことは、

「ブログ見てます！」

って、10回以上（たぶん、もしかしたらもっと何回も）言われたことですねー。
いやーホント全然たいした事書いてないし、単に長く続けてるってだけで私自身は全然普通なので申し訳なかったです。ゴメンねこんなニート寸前で‥‥！

各セッションでは、それぞれ「知らなかった！」と内心ドキドキするような話を聞けておもしろかったです。特にアドビCS3ね。すっごい欲しくなりました。欲しい欲しい。明日体験版をダウンロードしてみようっと！　そしてSpryしてみるよ！

っていうか、懇親会で飲み過ぎて眠たいんですよ、すんません。

しかも、懇親会場を予約したりしたのが私だったので、最後に主催者あいさつの後に少しコメントさせてもらいました。ありがとうございます。
知ってたらもっと気の利いたこと言ったのに！！！

主催の株式会社24-7の皆さん、お休み（本来ならそうだと思うのだけど）のところ、受付、会場設営、金銭管理や人数の把握などなど、いろいろ見えないところで大変だったと思います。社長の田村さんはじめ、皆さんお疲れ様でした。
そして、遠くから寒いところいらしてくれた、株式会社スイッチの鷹野さん、株式会社サイバーガーデンの益子さん、アドビシステムズの西村さん、締め切りが迫っていると言いつつ懇親会でフレンドリーにしてくれていた大藤さん、本当にありがとうございました。

また、来年にでも、CSSnite in SAPPORO vol.3 として開催できたらいいなー（そしてそのために自分ができることを考えなくてはいけない）と思っています。
あ、あたしのmixiのプロフィールはこちらですので、今日お会いした方は何か送ってください。是非。

みんなどうもアリガトです。

実践Web Standards Designでコーディングが速くなった件

今日、ふと見てみると、googleのページランクが「4」にあがっておりました。
最近バックリンク？　何だっけ。有料でリンクを張るサービスを使ってるページ（大手サイトでも）のページランクが激ダウンしてるみたいなので、その反動なのかしら。
ていうかそろそろアクセス解析ちゃんと見ないと‥‥。
ていうかこのMTのテンプレを何とかしないと‥‥。
でも、今、短納期の仕事が続いてるので、今週は無理ぽ。
来週か再来週からまた頑張ります。

因みに今はこんな感じ。

MT4code.jpg

‥‥えーと、HTMLだけです。

あ、でもね、最近コーディング早くなりました。少しだけど。

実践Web Standards Design（通称ホップ本）を、毎日少しずつ読み直してるんだけど（1日5ページ～10ぺージぐらい）。毎日新発見しまくり。新しい技発見しまくり。
今まで無駄なCSSの書き方をしていたこともよーくわかって、仕事の合間にわけのわからない調べ物をする回数もめっきり減りました。
今のところは、これが私のレベルに合っている教科書かなーという感じです。

そうそう、早くなったと言っても、1人で仕事してるので、一般的なレベルで見たら遅いかもしれないし（きっとそうだろう）、ソースコードも汚いかもしれません。ご了承ください。

ホップ本を見て、一番変わったことは、コーディングに入る前にラフデザインを見て「ここはH1、ここから続く見出しはH2かH3」と決めて、先にHTMLだけをがーっと書くようになったことですね。
それからCSSのクラスを当てていく。

前のやり方だと、div id="○○" って書いてから、CSSに戻って div#○○{～省略～｝、っていう書き方をしていたんだけど、先にHTMLを書いておくと、行ったり来たりする回数が激減して目にもやさしい、かも知れない。
そんな感じで、毎日仕事に入る前には、ホップ本の時間（今更）。いや、今更でも、読んで実践することに意味があるんでしょ。
いいよこの本。中級者以上には激おすすめです。

実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips

と、今日は宣伝めいて終わる‥‥。 今週はコーディングウイークなので、明日も早起きして頑張ります。

UNIQLOCKその他はエロくは無いけど色々と凄いですよ（メモ）

まず、UNIQLOCKを知らない人（あんまりいないと思うけど）が、どんなブログパーツなのかを。
音はデフォルトで出ないようになっていますが、出しても構わない人は、下のスピーカーマークをクリックしてみてください。

音楽はFPM田中氏、映像ディレクターはわかんないけど、心地よい時計の「ピ、ピ、ピ」という音と、テンポの良いUNIQLOCK GIRLSのダンスについつい見入ってしまって、気がついたら1時間半ぐらい経過していました（実話）。

もともと、最初にこのキャンペーンが面白いなって思ったのは、

ユニクロのUNIQLOCK、これ今年いちばんのオンラインキャンペーンなんじゃないんですかね:[mi]みたいもん！

あのね、もうね、センスのないブログパーツをつくっている人たちはこれみて反省するべきですよ。ブログパーツの基本なんて「あ！これ貼ってみたい！」っていう気持ちになるかだけなんだから。

という一文を見まして、このパーツに興味を持ったわけです。
しかし、7月当時の私は、FLASHを使ったブログパーツでサイトが重くなるのはちょっとなあと懸念していたため、断念。

その後UNIQLOCKのことはすっかり忘れておったのですが、先週末にユニクロに買い物に行った時にもらった冊子で、新しくカシミヤキャンペーンをやっていることを知りました。
ブログパーツ貼った人の中から抽選で、カシミアストールもらえるんだって！　ほら、こうやって貼りたくなるんだよ！

で、最近になって、

2ch方面では、パンチラだとか見えたとか見えないとか、胸が大きいとかそうでないとかで盛り上がってるみたいなんですが（笑）。
でも、口コミでこうやってたびたび広がっているわけで、ユニクロの中の人にしてみたら、してやったりって感じなんだろうなあ。

そのほかにも、最近のキャンペーンというかマーケティングでは、ユニクロ×YouTube×はてなダイアリー×Flickr!　ってのもあって、これもちょくちょく見ています。はてなダイアリーのUNIQLO JUMPってサイトなんですが、これまた興味深いです。マーケティング的に。

だって、ひたすら店員さんがユニクロの洋服着てジャンプしてるだけで、オンラインストアとかユニクロ公式へのリンクがあるわけでもなく‥‥。

でも、はてダとようつべとフリッカーの組み合わせって上手いよね。最初見たとき「おぉー」ってなりました。

で、今日、WindowsとMacの両方に、スクリーンセーバー入れた（笑）。もうダメ。これ中毒性高すぎ（笑）。気がついたらダラダラ見ちゃうから、音は出さないようにしています。
隣のMacモニターでは、夜のUNIQLOCK GIRLSの様子が‥‥。凝ってるねー。時計も見やすいし、テンポいいし、同じクリエイター（一応）として、なんか自信なくしたりもしたんだけど、マーケティングの勉強もちゃんと研究したりして、アンテナ張ってないとダメなんだな、と自分にダメ出しして今日は終わる。

なんだ、このブログパーツの良さを全然書けてないじゃないか、自分‥‥。

基本に戻ってCSSの勉強をしてみた。

このように、アマゾンでも大変評判の書籍を以前購入したのですが、あまりの分厚さに尻込みして、たまにパラパラめくる程度になっておりました。

実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
posted with amazlet on 07.10.12
市瀬 裕哉 福島 英児 望月 真琴
九天社 (2007/02)
売り上げランキング: 1263
おすすめ度の平均: 5.0
5 ボックスハックで泣かされた方に
5 基本から応用までしっかりサポート！
5 XHTML,CSSについてきれいにまとめられています
Amazon.co.jp で詳細を見る

しかし、それはイカンだろと思った。
理由はいろいろあるんだけど、

  • 自分のCSSの書き方がかなり適当だと思う
  • 自分用の定型フォーマットをちゃんと作っていない
  • 子孫セレクタとか、実はあんまりよくわかんない
  • で、clearfixって何？
  • IEだけズレて色々困ります
  • 急いでコーディングすると、どっかおかしくなってビックリすることが多い

などなど、最近コーディングの仕事をやっていて「もしかして、私のCSSスキルって古くなってる？」って思う事が多々あったので、ちゃんと読んでみることにしました。
幸い（？）なことに、実は今、仕事ないんです。お客さんの都合で流れちゃって。なんで、MT4いじって自分のテンプレ作ったりとか、先週からずっと自習してます（そりゃ儲からんわ！）。

で、この本なんですが、順番に読んでいって、今1/4ぐらい読み終わったところなんだけど、読んだ部分は随時現在作成中のMT4テンプレートに反映させる式にしておりまして、かなり理解度も高まり（ドリルみたいな使いかた）、良い感じで御座います。
仕様書の内容に触れたり、アカデミック？　と思うところもあるけれど、それ故に「何故そうしなくてはいけないのか」という部分が理解しやすくなっているように感じました。

今日は、ブラウザごとのデフォルトスタイルの差異をなくすベーススタイルのところを読んで、今までとはテンプレとかサイト構造・デザインのやりかたを変えた方がいいかなと思ってしまいましたよ。
なので、今回のこのblogについては、コーディングとデザインの組み込みを平行してやっていくような、実験的な方法で構築されていくのではないかと思います。
それもまた、新しくやってみる作業なので楽しみ超！　やっぱ私Web好きなのかなー？　自分でもよくわかんねーや（笑）。でも、やってるうちに日が暮れてたりするので、まあ、面白いことは確かです。
明日も続きをやるるん。

しかしこの本だけでは難解であるのも事実なので、HTMLもちゃんと覚えたり調べたい人にはこれがダントツおすすすめ。

詳解HTML&XHTML&CSS辞典 第3版
詳解HTML&XHTML&CSS辞典 第3版
posted with amazlet on 07.10.12
大藤 幹
秀和システム (2007/03)
売り上げランキング: 12201
おすすめ度の平均: 5.0
5 Webサイト制作に欠かせない1冊
Amazon.co.jp で詳細を見る

あ、別に私大藤氏のまわしものではないのですが‥‥。このタグ辞典は初版ぐらいからずっと使っていて、もう版違いで手元に4冊ぐらいあるんだけど（笑）。
CSSの基本は、これ一冊で覚えましたね。あとはテクニカルな記事とか、まとめたblogとか読んで。でも、まだまだ出来ないこととか、ソースの煩雑さ、きれいに書けないっていうのはあるので、これからはよりシンプルで、構造と見た目の分離をスマートにできるようになりたいです。

画像編集ソフトが使えるのと、作った画像の見え方を考慮できるのは違うよね？

またRSRネタで。
だいたいの人はmixiやってるという前提で書かせてもらいますね（わからない人にもわかるようにしよう）。

mixiに「RISING SUN ROCK FESTIVAL」っていう巨大コミュニティがあるのですが、その中に、mixiのプロフィールの画像を、RSRに参戦してますよ、というのに変更するため、気が向いた人が画像を作って投稿するトピックがあります。
（因みに、去年までこのコミュニティのTOP画像は私が作ったものが使われていました）

因みに今私がプロフィールに設定しているのはこの画像です。

RSRロゴ(準備中）

で、私もPhotoshopが苦手だったり、ロゴとかバナーとか、小さいものを作るのが実はすごーく苦手だったので、腕試しのつもりで何個か投稿しました。
幸い気に入ってくださる方がいて、時々自分の作った画像をプロフィールに設定している方もお見かけします。ありがとうございます。

他の投稿者の方がどうかわかりませんが、私がこの画像を作るときのポリシーとして、

  • パソコン、携帯電話等、様々なデバイスで見る人が多いmixiなので、環境を問わず、何の画像なのか一目でわかる
  • ある程度縮小しても可読性を損なわない（携帯電話だと小さく表示されるので）
  • 文字を詰め込みすぎない
  • 正方形にする（一覧表示した時、正方形の画像が多いから）
  • 元のロゴの形を損なわない

というのがあります。
要するに、余計な事をごちゃごちゃ書かず、見やすくわかりやすい、というのが私のやり方です。

たとえば、上の画像を半分の大きさにすると、こうです。

RSRロゴ(準備中）

まぁ、何とか見える。たぶん。

紙のめくれ（折れ）表現するためのチュートリアルを探してみた

まだ「めくれた紙」のベストアンサーを求めて彷徨ってるわけですが、自分で描いてみたりしても、今ひとつ納得いかないので、他にやり方はないものかと思って、海外のサイトまで行ってチュートリアルをいくつか探してみました。

この4つぐらいしか見つけられなかった‥‥。

どうしてもわからなかったら、はてな先生に質問してみよう。恥を忍んで。
週末の間にトライしてみまっす。

ところで、慣れていないPhotoshopでやっているからダメなのかなあ？　と思って、試しにFireworksでやってみたんだけど、やっぱりフォトショよりはキレイにはできませんでした。
やり方はすぐわかったんだけど。残念。

Photshopのめくれた感じのチュートリアルを試してみました。

札幌ドームの写真

こんな風になりました。
そして、チュートリアルを見ながらやったにも関わらず、よく理解できないところがあった。Photoshopのクリッピングマスクって何だ？？　イラレなら分かるけど。

まあ、なんか机の上にあるっぽいっていうか、陰ができてる感じにはなったからいっか（よくない）。

あ、いや、もっとキレイに出来るように頑張ります。

Photoshopでめくれた紙を表現したい

たとえば、こんなのとか、

Ungarbage

あるいは、こんなのとか、

coolboom

みたいに、メモ用紙の端っこがめくれた感じにさせたくて、その方法を調べているうちに、一日終わってしまった‥‥。
ちょっと下の黒いのはわかりづらいので、リンク先も見てください。

「Photshop　めくれ　紙」でググったら、一番目についたサイトが「Photoshopチュートリアル めくれた感じを表現する - DesignWalker」だったのですが、そこで紹介されている方法は、1番がちょい難しい、2番目は好みじゃない、3番目が好み！　だったけどPS7には該当機能なし（！）、4番目はいつも私がやってる方法、5番目はリンク切れ、と。
画像を斜めに配置するのがあまり好きじゃないんだけど、1番目の方法は明日やってみるつもり。

やっぱフォトショップだと描くのが早いのかなあ。画像の下部分だけだったら、大まかな陰の形を描いて、変形（ペンツールで修正）→ぼかし（ガウス）→変形で上の画像サイズに合わせる、って感じです。
でも、私は上の画像みたいにリアルにしたいんだけど～。
というわけで、あきらめきれずにプラグインを探してみることにしました。

可読性の高い配色の検証をしてみたい。

ネタを思い出したので頑張って書きます。腱鞘炎で手が痛い！　写真の切り抜きはもう嫌だ！　と思いつつ（笑）。

ブログやニュース、テキストサイトを読むとき、一番読みやすい配色のパターンってどれなんですかね？
試しにいくつか見本作ってみました。
私はWindows環境なので、フォントはMSPゴとかにしておきます。大きさは14pxぐらいだけど、これも私の好み。

いや、12pxとか、そもそもpx指定があり得ないんだけど、そのぐらいの文字サイズって乱視のきつい私には有り得ません。余談ですが。

CSSテクニックと印刷プレビュー

自称WEBデザイナーのトミナガです。

仕事柄、気に入ったデザインのサイトは画面ショットを撮って、Photshopで貼り付けをして、A4サイズに収まる範囲で印刷して、時間のあるときに眺めたりしています。 しかし、一般的なネットユーザーがみんなこういった方法を知っているとは思っていません。これはあくまで個人的なコレクションの方法だし。

文章でも、気に入ったものはブックマークもしますが、印刷する時もあります（あとでor移動中にゆっくり読もうとか思って）。地図もそうだよね。

初めて行く場所や、バス・電車の時間表を印刷して持っていくこともあります。あと、ぐるなびのクーポン券とか。

といった感じで、実はWEBサイトは見るだけではなく、印刷して手元に置いておいたり、持ち歩くことも意外と多いメディアなんでないか？　とふと思いました。

私は仕事でコーディングをする場合、大半のケースで、

  • ロールオーバーするものはJavascriptで
  • 見出し要素（h1～h4かh5ぐらいまで）の中に画像（＋altテキスト）を入れることは普通
  • リンクテキストには必ず下線つける
  • フォントサイズは相対指定
  • CSSファイルはむやみに分割しない（他の人がみたら大抵意味不明）
  • CSSファイルには見出しをつけて、どういう順番で何が書いてあるのかわかるようにする

としています。
いろんな環境でいろんな動作を検証していたら、自然にこうなってったって感じですが。

コーディングでぐったり＋CSSの勉強におすめの書籍

できそうだと思ったら上手くいなかったり、思ったとおりに表示されなかったりと、今日も1日コーディングには苦労させられました‥‥。
でも好きだからやるけどね。

よく、CSSとかMTを覚えるのにどうやって勉強したのですか？ と聞かれますが、私の場合は本を買ってきて、読む→実際に同じコードを書いてみて練習、というパターンが多いです。

CSSの勉強で一番役立ったのはMTのカスタマイズかなぁ。
「こうしたい！」っていうのがあるから、死に物狂いで調べました。

今まで勉強した本を順番に並べてみますね。
これからCSS本格的にやるぜーって人は、一番最後のタグ辞典を最初に用意して、あとは上から順番にやっていくといいかと思いますよ。
もちろん、習熟度によっては不要なものもあるかもしれませんが、参考になれば幸いです。

リニューアル予告

今日1日でポッドキャストのリスナー20人増えたって、何があったんだいったい？？ すげー不思議っす。

いろいろ調べるついでに、はてなブックマークでこのサイトがどれぐらいブクマられているのか見てみたら、全然なかった。いや、まあ、いいんですけど（笑）。
自分で自分の記事はブックマークしないしなぁ‥‥。

で、番組の最後で急いで話してるんだけど（今日の私は喋りすぎ）、このMTをそろそろリニューアルしようかなと思っています。去年1年かけて（遅い！）いろいろ改造したんだけど、使っているうちに見づらいところやアラが気になってきたし、仕事関係の人も見てるみたいなんで、あんまり恥ずかしくないようにしないと。

っていうのは半分で、自分が飽きたからっていうのが大きいですなー。
リキッドレイアウトのやり方もそれで調べたりしてたんだけど、まだあんまり自信がないので固定でいくんじゃないかなあ。無理やりリキッドにする理由も見つからないし。

名刺を作った。

いちおうデザイナーを名乗っているのですが、名刺とか葉書とか、カード類、あとA4サイズのフライヤーでも、とにかく印刷物は苦手です。
だってWEB専門だから。6ポイントって何ですかって感じなんです。
12pxでも見づらいのに、その半分の数字って‥‥！！

でも、業務上必要に迫られて‥‥って言うか、単に名刺切らしてるだけなんだけど、明日はアップルストア札幌で「CSS Analysis Live!」というセミナーがありので参加しまっす！
終わった後の懇親会も行くよ。

しかし、私、ただいまメールアドレスの変更に伴って名刺を切らしておりましてー。
以前にビジネス用の名刺をお渡しした方には、mooのカードを渡そうかなと思っているのですが、初対面の方も多そうなので、ここはがんばって自分でインクジェットプリンタで名刺を作ってみました。

世界のCSSギャラリーサイト

もともとはmixiに書いた記事だったのですが、今日配信されたメルマガ「DreamweaverではじめるWeb標準」に掲載されていたので、こっちにも書いておきますわ。

海外のグッドデザインサイトを巡回していたら、こんなところを見つけたのですよ。

Tanya Merone - Online Portfolio

とても素敵なデザインで（女性らしい！）、ソースコードもきれいだし、すごいなあと思って下まで見たら、CSSギャラリーサイトのまとめリンクみたいのがありまして。
mixiに転載させて頂いた次第です。後からがんばってご本人にメールでもしてみようかな‥‥。

以下リスト。（リストのリンク先は新しいウインドウが開きます）

FireFoxに入れている拡張機能のメモ

3月にPCのHDDがクラッシュしたときに、システムを入れ替えたのですが、そのときブラウザもついでに乗り換えたんですよね。
今はFireFoxを使っています。前に使っていたSleipnirも軽くてマウスジェスチャー使えて便利だったんだけど、CSSとかHTMLのソース見るときにいまいち不便だったので、思い切ってチェンジ！

いくつか（動作が重くならないように気をつけつつ）拡張機能を入れてみたんだけど、すっごい便利でビックリです。もっと早く乗り換えればよかった‥‥。

そんな拡張機能で、今日見つけた面白いやつ。

FoxyTunesというやつです。
ブラウザのステータスバーに、iTunes（以外にもいろいろあるけど）の操作バーを表示してくれる。

foxytunes_01
▲細くて見づらいので、クリックして拡大画像を見てくださいな

いちいち画面切り替えなくても次の曲に送ったり、音量調節とかジャケット画像を探すこともできるようです。

foxytunes_02
▲ジャケット画像はアマゾンのサーバーから取得。国は選べます。

あ、FoxyTunes for IEってのもあるみたい。IEの人も使ってみてください。すごい便利です。

その他、便利だなと思った拡張機能。

GIMPやってみたよ報告

家で使っているphotoshopのバージョンが7なので、そろそろ新しくしたい感があるのですが、いかんせんお金ないのですぐにというわけには行きません。

最近はオープンソースのソフトウエアも増えてきたので、GIMPの本を買ってきて（どう考えてもPS7よりは多機能だ）、前からやってみたかったミニチュア写真をやってみた。

PSで作る手順だと、7には入っていない「ぼかし⇒レンズ」フィルタがなくて、どう試行錯誤しても上手くいかなかったりでイライラしてたのですが、GIMPに拡張機能足したらあっさりいきました。
まぁ、最初だからあんまり上手くないのは勘弁して。

before

before

after

after

彩度をいじっているので、かなり違った印象に。

手順は以下のとおり。

インターネット物理モデルについて

東京に行ったら毎回行きたいぐらい（でも次回はいかない、遠いので涙をのんで）、日本科学未来館 のインターネット物理モデルが見たくてたまらない。
しかも今すぐみたい。

IT関連の仕事してる人はみんな一回見たほうがいいよ。

画像とか無断で引用するのも気が引けるのだけど、イカすからちょっと見てね。

インターネット物理モデルパケット

インターネット物理モデル全景

こんな単純な白黒の2つのボールの組み合わせで、メッセージの送信ができる。
はじめて見た時は、インターネットの仕組みを飛び越えて、コミュケーションの未来な感じがした。

たまんないですね。
早くまた見に行きたい‥‥っていうか、あそこのプラネタリウムはいつ行ったら並ばないで見れるの？？


参考：
ボールの流れでInternetの仕組みを表現した「インターネット物理モデル」の構築
↑必見！！！！

日本科学未来館に「インターネット物理モデル」の巨大オブジェ

STUDIO VOICE / 写真集の現在

私のまわりにアート好きな人がいなくてちょっと寂しい‥‥。
スタジオボイスの記念号をようやくゲット。

アマゾンでは新品があったりなかったり、街の書店でも見かけないので、気になる人はレッツゴー。

STUDIO VOICE (スタジオ・ボイス) 2007年 01月号 [雑誌]
STUDIO VOICE (スタジオ・ボイス) 2007年 01月号 [雑誌]
posted with amazlet on 07.01.20

INFASパブリケーションズ
売り上げランキング: 119509
Amazon.co.jp で詳細を見る

私はマーケットプレイスで倍額ぐらいで買いました。
手に入ったらからいい。
内容がとても良いので。

これ一冊で、見逃してたあの1冊とか、いつか買いたいと思っていたアレとか、いろいろ確認して写真も沢山楽しめます。幸せだ‥‥。

因みにこの次に出た、80年代カルチャーの号も持っています。

STUDIO VOICE (スタジオ・ボイス) 2007年 02月号 [雑誌]
STUDIO VOICE (スタジオ・ボイス) 2007年 02月号 [雑誌]
posted with amazlet on 07.01.20

INFASパブリケーションズ
売り上げランキング: 9271
Amazon.co.jp で詳細を見る


んー。
たまらん。懐かしい系だけど、ちゃんとアートとして刺激のあるものが沢山ある時代だったんだなぁ‥‥。

この本は紙面デザインが好きで、いつも仕事で生かせないかなあと思っています。
週末にパラパラめくってみよう。

ハックしません。

いちおうWEBデザイナーなので、CSSとか書いてみるのですが、HTMLと同じでソースを書く人によって手癖が出るなあと感じています。

最近はスタイルガイドとか考えている人も多いみたいなので、自分でもやってみようかな、と思っていたのだけど、一体どこから手をつけていいのかわからない。
っていうか、どういう考え方で進めたらいいのかわからない。

あと、CSSで段組レイアウトするとき。
私はfloat使ってやるのが好きなのだけど、マージン値のマイナス指定をする方が一般的なのでしょうか？？
HTMLの構造を優先させると、float使わないほうがいいのかなあと思ったりするのですが、このblogはfloatしまくってます。まぁ、そういう前提でレイアウト組んだりしたしね。

という感じで、ある程度までは独学できても、さらに壁があるなーと思っていた状況で買ってきたのがこれ。



ちゃんとCSSするためのスタイルガイド入門
ちゃんとCSSするためのスタイルガイド入門
posted with amazlet on 07.01.11
長谷川 恭久 上ノ郷谷 太一 有坂 陽子
翔泳社
売り上げランキング: 4752
Amazon.co.jp で詳細を見る

星のような物語-星野道夫展

デザインというかアート？　写真展見てきました。

DAIMARU MUSEUM（札幌）でやっていた「星のような物語」が明日までだったので。

大丸のページから引用：

アラスカに魅せられ、かの地を棲家にして、たぐいまれな自然の世界を描写した写真家 星野道夫(1952～1996年)。 取材中に、カムチャッカ半島で、不慮の死を遂げてから今年8月で10年が経とうとしています。彼が残した膨大な写真や文章は、多くの人々を魅了しつづけてきました。

ホッキョクグマ大好きなので、大変面白かった。それ以外の動物も。

写真家の星野道夫さんが没後10年ということで、再構成された写真とアラスカの四季を撮影したビデオが中心でした。
動物と自然を愛していた人なのですね‥‥。

関連：
星野道夫公式サイト
星野道夫 - Wikipedia

このサイトについて

管理者
location
Sapporo, Japan
job
Webデザイナー、コーダー
趣味
写真と猫

札幌でフリーランスのWebデザイナーをしています。このブログは、主に日常の出来事とWeb制作に関するメモを書いています。

>>read more

あわせて読みたい