2007/3/22

Web製作の手順を考える。

2007/3/17

グラフィックの勉強でも始めてみようかな。

2007/2/22

"Web Developer Toolbar"がスゴイ。

2007/2/18

ブラウザについてアレコレ、第2段。

2007/2/18

IE7私的まとめ

2006/11/03

IE7をインストールしてみた。

2006/7/21

"Movable Type 3.31-ja"にアップデートしてみた。

2006/3/05

「MOGSTYLE」開設から1ヶ月が経ちました。

2006/3/03

ケータイからこんばんわ。

2006/2/18

MOGSTYLEのTOP画像について

2006/2/12

ブラウザ対応の幅を広げてみました。

2006/2/05

「MOGSTYLE」リニューアルオープン！

http://tutorialaday.com.nyud.net:8080/web-design-workflow-complete-overview/

↑のTutorialaday.comのJosh氏のエントリーに、Web製作の製作手順について「プロ」のやり方が説明されてました。

クライアントとよく話し合う、ってのは個人サイトでは自分の中でコンテンツの構想を練る、ってのに置き換えられるかな。で、スケッチを書いて大まかなレイアウトを決めてから、Photoshopで大まかにデザインしていく。デザインの方針が固まったら細かいデザインをPhotoshop上で行って、最後にXHTMLとCSSでコーディングをする……って流れらしいです。

「MOGSTYLE」について、サイトのデザインはやはり基本的にPhotoshopで完結させていました。ロゴのマークくらいは流石にスケッチをして何通りかデザイン作ってからしたけど、Photoshop上でイメージを膨らませていくことが多かったです。……が、やっぱり時間がかかってしまう。スケッチをしたほうが早いのかなぁ。次のサイトでは簡単にスケッチくらいしてみようかな。

で、今のバイト先では皆さんIllustratorでサイト全体のデザインをされてます。俺は最近少しずつ練習してるとはいえ、基本的にIllustratorはド素人です。……いや、最初はホントに困った。画像サイズがちっとも合わないし、切り抜き方は分からないし。何とか慣れては来ましたが、やはり俺はPhotoshopでデザインするほうが性にあってるっぽいです。

Photoshopでデザインすると、基本的にはブラウザで見るのとほぼ同じ見た目を作ることが出来ます。サイト全体のイメージを作りやすいし、ドロップシャドウとかの効果が簡単に使えるからデザインの自由度も高い。Photoshop上でデザインを完結させれば、後はスライスして必要な画像を一気に書き出してやればOK。画像とサイト構成さえハッキリしてれば、コーディング自体はデザインをしているときに大体の構造は頭の隅で考えてるのでそんなに時間はかからない。

Photoshopの弱点は、レイヤーを重ねすぎると、非力なPCだと如何せん実に重い。サイト全体のデザインを完結させるくらいにレイヤーを重ねまくると、いちいち動作に時間を食うようになってしまいます。また、スカラーゆえ画像サイズに関する融通が利かないのもちと面倒と思うことも。

対してIllustrator。ベクトルなので画像の大きさなどを簡単に入れ替えまくって試行錯誤出来るのがすごく大きい。パスを重ねまくっても結構軽いし、サイズが可変だから紙に印刷したいときも綺麗に印刷できます。

……が、ベクトル形式ゆえフォントとかの見栄えや大きさが実際にブラウザで表示したのと結構違ってくるのがマイナス。Photoshopではデザインをした時点でサイトの全体像が把握できるのに対して、Illustratorだと、実際に組んでみると文章が収まりきらなかった……みたいなことも結構あったりしました。

好みと慣れの問題なんだろうけど、重さを考慮しても私はPhotoshopのほうがWeb製作には使いやすいかな～。全てのデザインをPhotoshopだけで完結させられるのが楽チンで、一度慣れると辞められないです。こういうのやってると、PCにメモリ2G積んどいて良かった～、と思います。次のサイトはちゃんとスケッチしてからPhotoshopで作成しようかな、と思っております。

---

Today's Practice:A Glossy Starburst & Orange Icon

今日は一昨日サボった分、簡単なのを2個作ってみました。「Glossy-Starburst」と「Orange Icon」です。前者はWeb2.0を謳うサイトでは結構見ることが多いマークですね。どっちも作り方は結構単純だけど、デザインには結構使えるかな。特に前者は、色々なサイトで使われてるだけあってなかなか使いやすい。……まぁ、逆に言えば色んなサイトで使われている分、相当工夫しないと逆に使いにくいわけですが。

今回は、photoshopitと、Solutiondesigns.netのHeadshot氏のチュートリアルを参考にしました。

http://photoshopit.wordpress.com/2006/09/19/a-photoshop-tutorial-on-starbursts-badges-web20-style/
http://www.solutiondesigns.net/Tutorial/2/26/Orange%20Icon/

Web製作をやってると、グラフィックは切っても切り離せない関係にある、と最近痛いほど自覚してます。……が、俺はそもそもグラフィックの技術が初級者以下です。絵は描けないしIllustratorは全く使えないし。Flashを覚えたいとかそういうのの前に、元になるグラフィックを作れなきゃ話にならないな、と。

今までは写真加工をトライ＆エラーでごまかしごまかしやってくことで対処してたけど、それももう限界っぽい。そもそも写真の腕も初心者以下なわけで、趣味のレベルにしても自分の「壁」が見えてきてしまいました。

ってなわけで、最初はヘタクソでも時間かけてグラフィックの練習、せめてソフトの使い方くらいは習得して行こうかな～、と思い立ちました。どうせ夜中は時間それなりに余ってるし、大学始まったら暇なんぞいくらでもあるだろうし。毎日1個づつ……は無理だろうから、週に3個くらいPhotoshopなりIllustratorなりのチュートリアルサイトで気に入った画像効果を練習してみようかなと。で、そのヒストリーをアクションとして記録しておけば、センスは磨かれないまでも画像加工の「選択肢」は増えるだろうな～、と淡い期待を抱いてます。まぁ、俺のことだからいつまで続くかわからんけど。

そんなわけで記念すべき第一弾、「デジタルスターエフェクト」。上のほうに貼ってある画像がそうです。以下の「Photoshop Tutorials」のDenny Tang氏のチュートリアルを参考にしました。

http://photoshoptutorials.ws/photoshop-tutorials/photo-effects/digital-star-effect.html

とりあえずアクションに登録して色々な写真にこのエフェクトをかけてみました。で、一番しっくり来たのが上の画像。実は、6日前にMOGSTYLEに貼った新メガネの画像だったりします。上のほうのレイヤーがチュートリアル通りに「スクリーン」だとどうも見た目が決まらなかったので、「ハードライト」にしてみたらなかなか面白い画像に仕上がりました。

まぁこんな感じで、ちょくちょくと画像加工の練習をしていこうかなと。……とりあえず目標30個で。

バイトの試用期間を乗り越えました。これで一安心。3月末までバイト出来る事が確定したわけで、さぁ頑張って働いて春に向けて貯蓄だ貯蓄だ！ってな感じのFamiですこんばんは。

仕事に慣れてくるにしたがって任される仕事の内容のレベルも上がってまいりました。画像加工やCSS編集、Dreamweaverのライブラリ作成などを含めたページ作成をカテゴリ単位で任される程度になりました。多少コーダーっぽいこともやらせてもらえるようになってきてます。自分でも少しずつレベルアップしているのが実感できてホントに楽しい。これほど達成感があるバイトもそうそう無いです。素晴らしい。

で、そんな話とはあまり関係なく、バイト中に同じバイトの方に教えてもらったFirefoxの拡張「Web Developer Toolbar」がすごい。Web製作者向けに様々な便利機能を提供してくれるツールバーなのですが、コレがいよいよもって「Lunascape」からの移行を考えたくなったくらいに便利です。

機能があまりにも豊富なので書ききれないほどです。ブロック要素の階層構造を示してくれたり、画像やCSSの情報をまとめてくれたり、文法チェッカにリンクしてくれたり……製作者としては作業効率UP必須の便利機能が豊富に用意されてます。こりゃスゴイ。ほんとにスゴイ。マジで感動しました。

あまりにも便利な上に、今バイト先でやってる作業の効率が確実にアップする機能があったので、バイト先ではついにデフォルトブラウザをFirefox2.0に変更してしまいました。まさかLunascapeをデフォルトブラウザから外す日が来るとはおもわなんだ。

Web製作者の方はもちろん、一般のユーザーの方も是非、お試しアレ。製作者なら間違いなく感動します。ホントに。

---

で、Firefox。機能を追加できるとはいえ……やはり、プライベートのデフォルトブラウザとしては「Lunascape3 Lite」を超えられない。乗り換えようと思って改めて気付く「Lunascape」の偉大さ。ブラウザの使い方にこそクセって強く現れるものだと強く実感しましたよ。

まずお気に入りの色分け。全部同じ色じゃ数が増えてくると探しづらいにもほどがあるので、色分けは必須です。そしてタブ機能の使いやすさ。色々試してみたけど、Firefoxのタブブラウジング機能は拡張を入れて設定してもどうしても肌に合わない。「Lunascape」では当たり前だった操作が出来ないと、それだけで強いストレスを感じてしまいます。

例えば、ローカルのファイルを開くときに別タブで開いてくれない。タブの大きさを指定できない。拡張入れすぎると無駄に重い。タブ切り替えをホイールで行えるのがタブバー上のみ（Lunascapeはブラウザにフォーカスが当たってればメインウィンドウ以外のどこでもホイールで切り替え可能）。タブロックをアイコン表示してくれない。ホイールの使い方を細かく設定できない（例えば左クリック+ホイールクリックでページ更新など）。etc......

「何だそんなこと」と思うかもしれませんが、何せ俺はパソコン持ち始めて以来ずっとLunascapeを使ってきたわけで。バージョンが1.0以前のころから使い続けてきましたよ。長年使い続けてもはや当たり前になった操作が効かないと、相当に強いストレスになってしまうわけです。コンマ数秒でも待たされた感覚を受けるとストレスを感じてしまうわけで。結局、プライベートでは「Lunascape」から抜け出せそうに無いな～、と改めて実感しました。

だけど、正直俺が気に入ってるのはあくまで「Lunascape3 Lite」であって「Lunascape4」はむしろ嫌いな部類。ごちゃごちゃ機能追加して重くなったり不安定になったりしてるんじゃ本末転倒。俺が何よりも重視してるのは「軽さ」です。機能を追い求めて個性化を図るのもいいですが、軽量化を追及する「Lite」の開発も怠って欲しく無いと切に願ってます。

……とりあえず、「Lunascape3 Lite」がせめて"Web Accessibility Toolbar"（上記のIE版。機能的にはFirefox版のほうが上）に対応してほしいと切に、切に願うところです。