2008/11/21

冬の間に一度サイトリニューアルしたいな～。

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」リニューアルオープン！

毎度の事ですがすごく久々の更新です。研究室に入ってようやく普通の大学生らしく、実験漬けの毎日を送っております。おかげでバイトも出来ないので、相も変わらずノーマネーです。もともとお札を上から入れたら下から出ていく穴あき財布しか持ってないのに、そもそもお札が入ってきません。ノーフューチャーです。

そんなわけで、今年の4月から短期バイトオンリーのポリシーを崩して土日に一眼レフカメラの販売のバイトをちょこちょこと入れてたのですが、お客様に説明していると自分でも欲しくなってくるんですよね。で、気づいたら買っちゃいましたよ。「EOS Kiss X2」（ダブルズームキット）。6月の時点で3年最後の春休みにバイトして溜め込んだ￥97,000 (ポイント20％) をすべて放出。っていうか買ったその日にレースバイトの給料もらってその給料全部つぎ込んで、あまったお金が銀行含めて1000円無かった俺すげぇ。まぁそのおかげで今年のツーリングは写真という新たな楽しみを得て相当楽しかったからモーマンタイ。写真楽しいよ写真。

---

関係無いけど最近研究室でサーバー構築をやってみた。Linuxなんぞ触れるのすら初めてだったけど、3週間くらい研究もしないでひたすら弄ってたらまぁ形になりました。しかしWebサイトと同じで作る分には楽しいんだけど、管理するのは面倒くさいワナ。まぁ短期支援員としてある程度のお金をもらえたのでモーマンタイ。ホームページも即席で作って、PCの組み立て、サーバー構築からWebサイトまで全部自分で構築できました。少しはスキルアップできたかな。
http://poly-bm.eng.hokudai.ac.jp/

---

とりあえず冬は相変わらず暇です。バイクは乗れないし寒くて外に出る気がしないしっていうか金無いし＝引きこもりライフスタート！ってなわけで、そろそろ放置しまくってたこのサイトもリニューアルしてみようかなと考えてます。更新するのは続かないけどWebサイト作るのは好きなんです。良い暇つぶしなのです。サークルのサイト（サーバーがCGIの実行を不許可にしたため更新不可能状態）はMT4OSで構築したのに、自分のサイトが未だMT3.3ってのはアレですし。

研究室とサークルのサイトで裏で作ってたWeb関連のネタの大半を使ってしまったので、主に画像関連では色々と一新する必要がありそうです。春までには完成させたいなぁ。頑張ろう。そして更新しよう(ｵｨ

まぁそんな感じで、それなりに忙しいですが相変わらずマイペースで生きてるFamiです。

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個で。