Webのページデザインを勉強しよう

Twitterの方では多少書いておりましたが、体調を崩してしまい四週間の長期休暇をとっておりました。その休暇も最終週に入り、ようやく仕事の内容を思い返す心の余裕も出てきました。

直前のプロジェクトについていろいろ反省する中で、ページデザインで非常に苦労したことを思い出しました。ページデザインと言っても、ユーザビリティを考慮したUIデザインの話ではなく(本来こちらのほうが重要なのですが)、パッと見の印象のデザインですね。私の場合、VBアプリ時代のUIデザインが根っこにあって、色合いや枠外のデザインなどを真面目に作り込む機会が数年間ありませんでした。

で、前のプロジェクトでは、フレームワーク設計とともに画面のデザインベースを作る仕事もあったんですが、レイアウトと申し訳程度のスタイルシートを作ってレビューにかけたところ、「ダサい」「ショボい」とボロクソだったわけです。

そんなら専門のデザイナーに頼んだ方が、という気がしないではないですが、まあ普通のお客さんなら、一般向けのウェブサイトならともかく、社内システムの「見た目」だけにそんなにお金を使いたいとは思わないでしょうし、私自身言われっぱなしというのも悔しいので、求められたときに、それほどダサくないデザインをぱぱっと作れればな、と。

ただ、そうは言っても、デザイナーさん必携のAdobeスイート製品なんか末端SEが使わせてもらえるわけもないので、なんとかフリーのツールや素材で回す事になります。

というわけで、これからデザインとツールを勉強し直そうと思った次第。併せて、これも仕事で触れる機会のなかったイマドキのJavaScript関連も慣れとかないと。

とりあえず、ツールとか参考になりそうなサイトをメモがてら列挙。

  • GIMP – The GNU Image Manipulation Program www.gimp.org/
    • グラフィックツール。高機能すぎて使うのが大変ですが、グラデーション背景とかボタンとか作るのになんだかんだで使うので、ちゃんと腰を据えて使ってみないと。
  • Aptana Studio www.aptana.org/
    • Webオーサリングツール兼JavaScriptのIDE。Eclipseベースで個人的には馴染み深いですが、一応必須ツールとして。
  • jQuery: The Write Less, Do More, JavaScript Library jquery.com/
    • 昨年あたりからよく使われているJavaScriptのフレームワーク/ライブラリ。最近のWebデザインのノウハウ本にもこれが前提となっているTipsが頻出します。
  • jQuery 1.3.2 日本語リファレンス semooh.jp/jquery/
    • 上記jQueryの日本語リファレンス。
  • DesignDevelop design-develop.net/
    • Webデザインで有用なツール、サービス、素材集等を続々紹介してくれるノウハウ系ブログ。眺めてるだけでも、デザインのトレンドがなんとなく見えます。
  • コリス coliss.com/
    • こちらもWebデザイナー向けノウハウ系ブログ。素材集の紹介が多いです。ときどきやってくれる権利フリー素材の紹介が非常にありがたい。
  • Selenium IDE seleniumhq.org/projects/ide/
    • Webテストツール。昔ながらのHTTPリクエスト自動発行ツールとは違い、ブラウザ上での挙動も含めてテストできる優れもの。Firefox上でテストスクリプトをレコーディングするツールも用意されており十分実用に耐えます。

とまあこんなところで。「こんなのもあると便利だよー」というのご存知でしたら、コメントで教えていただけると幸いです。

  1. コメントはまだありません。

  1. トラックバックはまだありません。