ウェブデザインを無料でなんとかする

プログラム以上にハードルが高いのがデザインです。
誰しもとりあえず描いてみる、配置してみるのはできるものの「デザイン」するのは無理。


なんか勉強してもどうにもならない感がありますよね。
……私がセンスがないだけですが。


そこで今回私がウェブデザインをタダでなんとかするために使わせていただいたウェブサイトをご紹介。

ウェブサイトの全体デザイン


▽Solucija − Free CSS Templates

 http://www.solucija.com/


ここの「Free Templates」は、特に条件なしに利用することができるxhtmlCSSのテンプレートです。
クレジット表記等も義務ではありません。


海外のフリーのテンプレート集というと、何かと凝りすぎてて汎用性の低いデザインだったり、日本語フォントとの相性が悪かったりします。
はてなブックマークのコメントにもありますが、比較的日本語フォントともあわせやすいデザインだと思います。


英語サイトといっても読まないといけない英語も少ないので、おそれることはありません。
とても使いやすいテンプレートサイトです。


何よりゼロからCSS書いたり、仕様に沿ったxhtmlを書くのはハードルが高いので助かりますね。
ソースもコメントは最小限ながら、タブできれいにインデントしてあるのでわかりやすかったです。


ウェブサイトのロゴ


Web2.0 - Logo Creator-
 http://creatr.cc/creatr/


Web2.0というだけで頭が悪そうですが(笑)、使いやすいものは使いやすい。
配色も細かく変えられる他、グラデーションをかけることもできます。


ですから、印象は結構変えることができるかと。
BETAというバッチ表示もはずせますし、鏡面加工もはずせます。


アルファベットの文字だけのロゴだったらここで十分ではないでしょうか?!




FREE Logo Makerも使って作ってみたけど、デザインの段階は無料だけど使用する際にお金がかかるのね。
結構使いやすいし、コストパフォーマンスのいいサービスだけど、それだけに「FREE」と釣らないで欲しいと思います。
時間かけて作った後に気付くとくやしいから。


今回はお金をかけないことが原則なので、回避。
いいもん。結果として、Logo Creatorの方がもっともらしく作れたから!(負け惜しみ


ここはアドレスが頻繁に変わる?みたい(過去に2回あるみたい)なので、つながらくなったらどこに移転したか捜しましょう。


favicon


なくてもいいけど、あるとそれなりにブックマークの中で映えるfavicon
最近Firefoxに乗り換えたので、とみにそれを感じるようになりました。


Firefoxだと、アドレス欄の横やタブにfaviconが表示されるので。


まず百式で決定版と書かれていたfavikon


▽Favikon
 http://www.favikon.com/


ここは、既存の画像があればそのまま切り出してico形式にして出力してくれる。
既存の画像の一部をそのまま切り出せばfaviconに使えるのであればオススメ。



ただ実際はそんな都合のいい画像はそうそうないですよねぇ。
キャラクターの画像とかがあるなら別なんですが。


私は結局、以下のようにしました。

    • 画像処理ソフトなどを起動(私は昔使ってたFireworksを引っ張り出してきました)
    • 正方形のキャンバスを作成
    • そこに適当にLogo Creatorで作ったロゴを配置(デザインとはいえない……)
    • Favicon Japan!!でfavicon.icoに変換



Favicon Japan!!
 http://www.favicon.jp/


Favicon Japan!!は、ブラウザのURL欄に表示される場合のイメージ画像をダウンロード前に表示してくれます。
こうやって表示されるとイメージがつきやすいですね。


faviconのデザインは、正方形の縁取り等で四角っぽく仕上げるデザインが多いです。
しかしデザイン心のない私などは、そのまま配置しただけの方がそれっぽく仕上がるんだな、というのがよくわかりました。


Favicon Japan!!は、faviconに関する情報がまとめられてて便利なのでとてもオススメです。



以上。
あとは、それぞれ自分のページにあうように張り込んだり調整したり〜の作業が待っています。


2009/07/11追記


百式で紹介されていたSupalogoがかなりイイですね。
確かにデフォルトのままでも結構いける。


文字毎に色を変えたりはできないいけど、半角スペースとか入るウェブサイトのロゴだったら2回やって組み合わせちゃえばいいもんね。
もう一つ作る予定のウェブサイトのロゴはこれでいこうと思います。