年始早々に大幅リニューアルした当ブログですが、リニューアルのお知らせでも書いた通り、 今回のデザインリニューアルに当たっての作成過程や、使ったツールを書いていきます。
デザインセンスの無い私にとって、今回のリニューアルは良く出来たと自負しているので、 お題はプログラマでも出来るWebデザイン。
前提として、CSSでコーディングが出来て、ある程度HTMLは設計出来る、でもデザインは・・・orz な人を対象にしています。
作成過程は後半に書くとして、今回使用したサイト・ツールです。
デザインセンスの無い私がデザインをするという事は、カラオケで歌えるだけの人間に曲を作れと言っている事と同じで、 今からデザインを学ぶには遅すぎる。
という事でデザインテンプレートの出番。 これを決めればデザインは出来たも同然。
今回使ったのはOpen Web Design - Download Free Web Design Templatesで
配布されていた、Stylized Beauty
固定幅のレイアウトにしたかったのと、デザインが気に入りこれに決定！
以前から使用したいと思っていた、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
調べてみると、背景に色がついてるとギザギザになるらしい。 悪戦苦闘しながら解決出来た方法は、
これで、文字のまわりを僅かに背景色が包んだ状態になり、文字のギザギザはなくなった。
調子に乗って画像を加えてみる事にした。
使用した画像はここから拝借。
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 クリップにもミラーリングしてるので宜しければどうぞ。
と意味不明な言葉を残して本エントリを締めます。
Posted at 37to : commetns(12) : trackbacks(6)
こんにちはー
タイトルのフォントかわいーなーって思ってました。
リニューアルに合わせてFaviconも変わってますよね??
今はホントに便利でパッケージソフトを買わなくてもWebには便利なツールがいっぱいありますよね。
デザインが本業じゃないなら、センスとかスキルよりもそういったツールを探し出す能力の方が大事なのかもしれませんねー
lomoさんこんにちは！
> リニューアルに合わせてFaviconも変わってますよね??
そうなんです。書き忘れてました＾＾；
これもGimpで60×60pxの画像を作成して、ご存知だと思いますが、下記のサイト
Favicon Japan!! -16×16の小宇宙ファビコン-
http://www.favicon.jp/
でfavicon.icoに変換しました。
> 今はホントに便利でパッケージソフトを買わなくても
> Webには便利なツールがいっぱいありますよね。
そうですね、便利なツールを公開して下さる方がたくさんいらっしゃって、それをSBMでシェア出来る。
少々センスがなくても、便利なものを知っていれば何か出来てしまう。
良い世の中になったものですね。
> デザインが本業じゃないなら、センスとかスキルより
> もそういったツールを探し出す能力の方が大事なのか
> もしれませんねー
個人的にはデザインを形にする技術は無くても、センスは磨いていきたいなーと思っています。
センス良くとまではいかなくても、配色とかレイアウトが出来る最低限のセンスは持っておかないと、せっかくのツールがもったいないなーと思いますので＾＾；
センスの良いサイトと、便利なツールを収集する能力。
どちらもSBMでカバー出来るかなと＾＾
まだまだ勉強中です！
こんにちは。はじめまして。
とても勉強になりましたー。
多謝多謝ですわん。
> 進藤さん
初めまして。
コメント頂きありがとうございます！
> こんにちは。はじめまして。
> とても勉強になりましたー。
> 多謝多謝ですわん。
お褒め頂きありがとうございます。
まだまだ修行中の身なので、まだまだ改善したい所がたくさんあるのですが、
今回のリニューアルで私自身勉強になったので、記事に致しました。
参考にして頂けて大変ありがたい限りです。
今後とも宜しくお願い致します。
はじめまして、yupaといいます。
タイトルのフォントのイメージと
サイトのデザインが合ってないような印象を受けました。
それだけでした。
では
> yupaさん
初めまして、コメント頂きありがとうございます！
> タイトルのフォントのイメージと
> サイトのデザインが合ってないような印象を受けました。
ご意見頂きありがとうございます。
フォントについては、色々探した上で一番しっくりしたものを選んだのですが、他にも良いフォントがないか探してみます。
今後の参考になる貴重なご意見ありがとうございました！
なかなか参考になりました。
タイトルのフォントのイメージとサイトのデザインは
合ってるんじゃないですかね？
使い続けるとしっくりくる場合もあるし、最初にピンときた直感を信じたほうが良いと思います。
感じ方は人それぞれですねぇ。
ここで紹介されているサイトを参考に、いろいろ
作ってみようと思います。
ありがとうございました。
> いっちぃさん
はじめまして、コメント頂きありがとうございます！
> タイトルのフォントのイメージとサイトのデザインは
> 合ってるんじゃないですかね？
>
> 使い続けるとしっくりくる場合もあるし、最初にピン
> ときた直感を信じたほうが良いと思います。
>
> 感じ方は人それぞれですねぇ。
確かに使い続けるとしっくりくる場合もありますね。
色々見てみましたが、今の所は現在のフォントのままで行こうと思います。
> ここで紹介されているサイトを参考に、いろいろ
> 作ってみようと思います。
>
> ありがとうございました。
こちらこそ、ご覧頂きありがとうございます。
少しでも参考にして頂けて、書き手冥利に尽きます＾＾
サイトの作成頑張って下さい！
はじめまして！
ちょくちょくこのブログで勉強させてもらっています。
今後もHOTな記事を楽しみにしています。
へぇ〜。大変為になるblogだ＾＾
今後もお邪魔しますねぇ♪
初めまして♪
最近、私のサイトもようやくロゴを作ったところでした。
もっと早くコチラのブログにお会い出来ていれば、簡単に作成できていたのにぃ…っと、ちょっと後悔です（涙）
でも、沢山嬉しい情報が詰まっていたので、今後、活用させて頂きますねっ！
ありがとうございました☆
初めまして、webデザインブログでたどり着きました!!デザインテンプレートは、かなり便利ですよね!!
本エントリへのトラックバックURL
http://blog.37to.net/mt/mt-tb.cgi/78
Blog.37to.net
livedoor Readerの新着フィード - k_37to
del.icio.us - 37to's Bookmark Feeds
