Webデザイン > プログラマでも出来るWebデザイン

2007年01月08日

年始早々に大幅リニューアルした当ブログですが、リニューアルのお知らせでも書いた通り、 今回のデザインリニューアルに当たっての作成過程や、使ったツールを書いていきます。

デザインセンスの無い私にとって、今回のリニューアルは良く出来たと自負しているので、 お題はプログラマでも出来るWebデザイン。

前提として、CSSでコーディングが出来て、ある程度HTMLは設計出来る、でもデザインは・・・orz な人を対象にしています。

使用したツール・サイト一覧

作成過程は後半に書くとして、今回使用したサイト・ツールです。

デザインテンプレート

Open Web Design - Download Free Web Design Templates
相当な数のテンプレートがある。クオリティはバラバラ。

背景画像

Background Image Maker
Web2.0っぽい背景画像を生成
RoundedCornr: Rounded Corner and Gradient Generator
角丸画像を生成

タイトルロゴ

フォント
Download the font Arial Rounded MT Bold
丸っこいフォント。
画像
Open Clip Art Library :: openclipart.org :: Drawing Together.
クオリティの高い画像色々。
画像編集ツール
GimP
使えもしないのにPhotoShopなんて買えません。Win版。
使わなかったけど、検討したツール
Logo Maker : Web 2.0 Stylr
Web2.0っぽいロゴをお手軽に作成。幅広くオプションを指定出来てお勧め。

作成に役立ったツール

Firebug - Web Development Evolved
おなじみのFirefox拡張。Webデザイナー御用。1.0になって益々便利に。これがないと始まらない。
ご存知無い方は、
FireBug歴3時間の私が語る FireBugでCSS編集 (ueBLOG)
便利すぎて困る程のFireBug1.0系を使ってみよう:phpspot開発日誌
firebug.mov (video/quicktime Object)(英語のムービー)
辺りが分かりやすいと思います。
ColorZilla Extension for Firefox and Mozilla
地味に活躍したColorZilla。Web上のあらゆる色をピックアップ出来ます。

作成ダイジェスト

デザインテンプレート

デザインセンスの無い私がデザインをするという事は、カラオケで歌えるだけの人間に曲を作れと言っている事と同じで、 今からデザインを学ぶには遅すぎる。

という事でデザインテンプレートの出番。 これを決めればデザインは出来たも同然。

今回使ったのはOpen Web Design - Download Free Web Design Templatesで
配布されていた、Stylized Beauty

固定幅のレイアウトにしたかったのと、デザインが気に入りこれに決定！

テンプレートを楽に自サイトに適応させるちょっとしたTips

事前にHTMLとCSSを、ある程度しっかり設計しておく
いわゆる見栄えの分離です。
CSSを変更するだけで、デザインをがらりと変える事が出来るような状態にしておくと、今後のデザインリニューアルが非常に楽になります。
HTMLはいじらない、テンプレートのCSSから自サイトのCSSに必要なものだけをコピペ。
CSSを変更すれば見栄えが変わる状態で、テンプレートのHTMLとCSSをそのまま適応させるのは至極困難
テンプレートのCSSを読んで、必要な部分をコピペして、微調整を加える方がずっと楽。

背景画像

以前から使用したいと思っていた、Background Image Makerを使用する事に。
こんな素敵なジェネレーターを作って頂いたid:secondlifeさんに感謝！

背景画像を適当に作成して完了。

角丸の背景も欲しくなったので、RoundedCornr: Rounded Corner and Gradient Generatorから調達。 だんだんそれぽっくなってきた。
背景画像を使うだけでそれっぽく見えるから不思議だ。

タイトルロゴ

ロゴはサイトのアイデンティティを表す重要なファクター。
やっぱりこだわりたい。

最初に考えたのは、
Logo Maker : Web 2.0 Stylr を使ったWeb2.0なロゴ。

色やフォントを指定出来て簡単に今風なロゴを作れる。
でも一つ問題が・・・。

背景を透明に出来ない。

今回使用するテンプレートでは、タイトルの背景にグラデーションが掛かった朱色なので、 鏡面反射の部分がどうしても浮いてしまう。
あえなく断念。

しかたないので、フォントだけ良いのを探して、画像にする事に。

Arialのrounded系のフォントを探してて、Arial Rounded MT Boldが使えそうだったのでこれに決定。

使えもしないGimpを起動してロゴを作る事に。
また問題が・・・。
gifで保存すると文字がギザギザにorz

調べてみると、背景に色がついてるとギザギザになるらしい。 悪戦苦闘しながら解決出来た方法は、

  1. 文字と背景色を「可視レイヤーの統合」で一つのレイヤーにする。
  2. 選択ツールの「あいまい選択」背景色を選択。
  3. 選択メニューの「境界を明確化」
  4. 選択したまま、背景色削除

これで、文字のまわりを僅かに背景色が包んだ状態になり、文字のギザギザはなくなった。

ロゴに画像を加える。

調子に乗って画像を加えてみる事にした。

使用した画像はここから拝借。
Open Clip Art Library :: openclipart.org :: Drawing Together.
全体的にクオリティが高くお勧め。

画像を加えるだけで、それっぽいロゴに。
満足。

こんな感じでドメイン別に、

ロゴを作成。背景が透明なので見にくいですが・・・。
labsはGoogleにならってフラスコの画像を使用しようかと思ったんだけど、 おもしろくないのでバイオハザードのシンボルにした。

ゾンビプログラムでも作成してそうな危ない雰囲気がほんのりします。 タイラントのようなバグを量産しないように頑張ります。

検索ボタン

さらに調子に乗って検索ボタンも作ってみた。

本来は<input type="img" />を使いたい所だけど、クエリパラメータが変わってしまう為、 CGIが正常に動かないだろうという事で、背景画像に使用して、文字サイズを0pxにした。

IE6だと完全に消えないので、colorを背景画像の色と同じにしてごまかす。 う〜ん、バッドノウハウorz

value=""にした方が手軽なんだけど、アクセシビリティも一応考えて、文字サイズを変更する手法をとった。

ちょこちょことCSSを編集して出来上がったのが、今ご覧頂いているデザイン。

おわりに

誰でも簡単に出来るとは言えないかもしれませんが、プログラマでもいろんなツールを組み合わせれば、 それっぽいデザインを作る事が出来るはず！

本職の方には敵いませんが、自分のブログぐらいならば出来ると思います。

蛇足ですが、昔に書いたWebデザインに役立つサイト - Blog.37to.netに Web作成に役立ちそうなサイトを集めているので、一緒に読んで頂ければ参考になるかと。

あと、私のdel.icio.usの

辺りにも色々あります。 はてなブックマーク - k_37toのブックマークとk_37toのクリップ - livedoor クリップにもミラーリングしてるので宜しければどうぞ。

  • 車輪の再発明はしない。
  • 既にあるものを上手く利用してこそプログラマ。
  • デザインもまた然り。
  • プログラマでも出来るWebデザイン。
  • バイナリからフロントエンドのデザインまで出来てこそプログラマ3.0。（私はすべてにおいて未熟ですが・・・）

と意味不明な言葉を残して本エントリを締めます。

posted by 37to at : 01:58 | コメント (8) | トラックバック (6)

コメント

lomo: 2007/01/08 10:35:35

こんにちはー
タイトルのフォントかわいーなーって思ってました。
リニューアルに合わせてFaviconも変わってますよね??

今はホントに便利でパッケージソフトを買わなくてもWebには便利なツールがいっぱいありますよね。
デザインが本業じゃないなら、センスとかスキルよりもそういったツールを探し出す能力の方が大事なのかもしれませんねー

37to@webmaster: 2007/01/08 14:19:06

lomoさんこんにちは！

> リニューアルに合わせてFaviconも変わってますよね??
そうなんです。書き忘れてました＾＾；
これもGimpで60×60pxの画像を作成して、ご存知だと思いますが、下記のサイト
Favicon Japan!! -16×16の小宇宙ファビコン-
http://www.favicon.jp/
でfavicon.icoに変換しました。

> 今はホントに便利でパッケージソフトを買わなくても
> Webには便利なツールがいっぱいありますよね。
そうですね、便利なツールを公開して下さる方がたくさんいらっしゃって、それをSBMでシェア出来る。

少々センスがなくても、便利なものを知っていれば何か出来てしまう。
良い世の中になったものですね。

> デザインが本業じゃないなら、センスとかスキルより
> もそういったツールを探し出す能力の方が大事なのか
> もしれませんねー
個人的にはデザインを形にする技術は無くても、センスは磨いていきたいなーと思っています。

センス良くとまではいかなくても、配色とかレイアウトが出来る最低限のセンスは持っておかないと、せっかくのツールがもったいないなーと思いますので＾＾；

センスの良いサイトと、便利なツールを収集する能力。
どちらもSBMでカバー出来るかなと＾＾

まだまだ勉強中です！

進藤: 2007/01/08 18:01:34

こんにちは。はじめまして。
とても勉強になりましたー。

多謝多謝ですわん。

37to@webmaster: 2007/01/09 01:01:49

> 進藤さん
初めまして。
コメント頂きありがとうございます！

> こんにちは。はじめまして。
> とても勉強になりましたー。

> 多謝多謝ですわん。
お褒め頂きありがとうございます。

まだまだ修行中の身なので、まだまだ改善したい所がたくさんあるのですが、
今回のリニューアルで私自身勉強になったので、記事に致しました。

参考にして頂けて大変ありがたい限りです。

今後とも宜しくお願い致します。

yupa: 2007/01/10 09:55:50

はじめまして、yupaといいます。

タイトルのフォントのイメージと
サイトのデザインが合ってないような印象を受けました。

それだけでした。

では

37to@webmaster: 2007/01/10 22:57:29

> yupaさん
初めまして、コメント頂きありがとうございます！

> タイトルのフォントのイメージと
> サイトのデザインが合ってないような印象を受けました。
ご意見頂きありがとうございます。

フォントについては、色々探した上で一番しっくりしたものを選んだのですが、他にも良いフォントがないか探してみます。

今後の参考になる貴重なご意見ありがとうございました！

いっちぃ: 2007/01/18 11:40:00

なかなか参考になりました。
タイトルのフォントのイメージとサイトのデザインは
合ってるんじゃないですかね？

使い続けるとしっくりくる場合もあるし、最初にピンときた直感を信じたほうが良いと思います。

感じ方は人それぞれですねぇ。

ここで紹介されているサイトを参考に、いろいろ
作ってみようと思います。

ありがとうございました。

37to@webmaster: 2007/01/19 00:15:42

> いっちぃさん
はじめまして、コメント頂きありがとうございます！

> タイトルのフォントのイメージとサイトのデザインは
> 合ってるんじゃないですかね？
>
> 使い続けるとしっくりくる場合もあるし、最初にピン
> ときた直感を信じたほうが良いと思います。
>
> 感じ方は人それぞれですねぇ。
確かに使い続けるとしっくりくる場合もありますね。
色々見てみましたが、今の所は現在のフォントのままで行こうと思います。

> ここで紹介されているサイトを参考に、いろいろ
> 作ってみようと思います。
>
> ありがとうございました。
こちらこそ、ご覧頂きありがとうございます。
少しでも参考にして頂けて、書き手冥利に尽きます＾＾

サイトの作成頑張って下さい！


投稿する

投稿者情報を保存しますか?


トラックバック

トラックバックURI


一覧

[Design]プログラマでも出来るWebデザイン - Blog.37to.net
ここ1年くらいで本当にWebデザインの敷居が低くなったように思います。やはりblogが流行してCSSレイアウトが一般化したことと、Ajaxの隆盛に伴うデ...
Tracked by: devworks at 2007年01月08日 23:27
[日記]課題オワタ
つかれた・・・　ただ、ただ、疲れた。 WEBサイトを作る課題が終わりました。 ラフ絵では、リストでのサイドバーなデザインでしたが、タブメニューなデザイン...
Tracked by: まったり日記＆メモ帳 at 2007年01月09日 00:56
ツールを活用したWebデザイン
プログラマでも出来るWebデザイン 先日のエントリで、プログラマなりに頑張っ...
Tracked by: ヒマをみつけてWeb開発 at 2007年01月10日 00:48
プログラマによるサイトデザイン
プログラマでも出来るWebデザイン という素晴らしいブログのｴﾝﾄﾘを拝見して、早速TOPページをちょろちょろっていじってみた。 私の...
Tracked by: 村塾 sonjk.com at 2007年01月10日 23:51
webを作るなら最低限のデザインの知識は必須
２ヵ月後には３つのwebサイトをlaunchするわけで、思考のほとんどがそのことでいっぱいなわけですが。 ロゴも作れてデザイン出来る人急募です。出世払い...
Tracked by: 永遠の反逆児の平凡な日々beta at 2007年03月04日 19:55
ページデザインのカスタマイズ
徹夜でページデザインを変更してみました。 使用したテンプレートはこちらです。 テンプレートをカスタマイズして、 自分好みのデザインに仕上げて...
Tracked by: 遊びing at 2007年09月22日 08:27