凝ったデザインのブログやサイトを作りたいけど、何もないところから、スタートするのは結構大変ですよね。

そんな時には、テンプレートジェネレータがおすすめです。

今回は、なるべく感覚で使えそうなウェブデザインのテンプレートジェネレータをいくつかまとめてみました。

Wix.com – Make free flash websites

こちらのサイトは、flashのサイトを作るときに使えるジェネレータです。残念ながら、まだClosedBetaバージョンで、ログインすることができなかったのですが、既に、いろいろとテンプレートが公開されていて、なかなか期待できそうなサービスですね。正式オープンが楽しみです。

dotemplate.com – Free online web template generator

こちらは、XHTMLとCSSのテンプレートを生成してくれます。サンプルからテンプレートを選んでカスタマイズできます。

Weebly – Create a free website and a free blog

デザインを選択して、エレメントをドラッグ&ドロップしていくだけで、きれいなサイトが出来上がっていきます。

Movable Type Design Assistant

Movable Typeをお使いの方には、便利なデザインアシスタント。

TypePad Design Assistant

こちらは、TypePad版のデザインアシスタントです。

cssez.com – 無料のホームページ・ブログ用デザインテンプレート作成ツール

感覚で使えても、やっぱり日本語で使える方がうれしいですね。。。日本の主要なブログにも対応しているのも便利ですね。

YAML Builder | A tool for visual layout development of YAML based CSS layouts

ポップアップしているウインドウから、いろいろと設定していくと、テンプレートが完成していきます。

Web2.0 – templatr – Template Generator

編集したい部分をクリックして、個別に細かく設定していくことができます。

PsycHo: Free Template Generator

こちらも、templatr同様にクリックして、個別に設定していくタイプ。

Letterpop

こちらのサイトはウェブデザイン用ではありませんが。。。ニュースレター用のジェネレータです。そのまま、送信までできます。一回の送信で25通まで年間250メールまでの送信は無料です。

本日は、わたくしのお気に入りのWordPressテーマいろいろご紹介します。

どのテーマもとっても綺麗なものばかりですね。

1. The bus full of hippies

2. Papyrus

3. Aspire

4. Techdesigns

5. ZEN 2.0

6. TinyStudio

7. Sign of the nature

8. Freedom

9. Japanese Fleur

10. Illacrimo WordPress Theme

11. Dilectio

12. Modern Magic

13. NT-BigCity

14. Fluidity

15. Flora Scent

16. Grid Focus

17. Stones N’ Leaves

18. Urban Grunge

19. Red passion theme

20. VistaLOG

21. The Morning After

22. GreenTech

23. Yoghourt

24. Lay of the Land

25. WP-Polaroid

26. The Hobbit

27. Foliage

28. Dandelion 1.3

29. Pre Intensions

30. Purple Theme

31. Punkred

32. iTheme

33. WPTP-Chocolate

34. Vertigo

これから、デザインの勉強を始める方、ちょっとデザインに興味がある方、プログラムはできるけどデザインの方はちょっと苦手な方々。。。

『Most common mistakes made by new designers』という記事を見つけました。。

っちゅうわけで、本日は、デザイン初心者の方が気をつけると良いかも？っという、ポイントとお手軽に使えそうなツールをあわせてご紹介。。

色の選択
色味って、人それぞれ好みがあるので、一概にどれが正しいとかって言い切るのは難しいですが・・・あまりにもドギツい配色のサイトは見ていて疲れますよね。。。

最近は、配色関連のツールがいろいろ充実してますね。。

kuler

COLOURlovers

以前、こちらでもご紹介した、『デザインの配色に迷ったときに使えるツールのまとめ』も参考になるかも。。。

フォントの選択
今では無料でかなりクオリティの高いフォントがダウンロードできるので、いろいろなフォントを試して、お気に入りのフォントを見つけてください。。

dafont.com

better fonts

日本語のフォントが使いたい～！って方は、
『無料で使える日本語フォント11選』も合わせてどうぞ～。

フォントのサイズ
あまりにも小さすぎたり、大きすぎるフォントサイズは読み難いですよね。。

こちらで、フォントとサイズを設定すれば、ブラウザ上でどんな感じで見えるのかお試しできます。日本語が使えるともっと良かったんですが…

Typetester

ドロップシャドウ・光彩
Photoshopなどを使えば、簡単にドロップシャドウや光彩などのエフェクトがかけられますが、使いすぎると逆にチープに見えてしまいますよね。。

↓のチュートリアルのように影のつけ方にもひと工夫してみると、また違った感じに見えていいですね。。

グラデーション
グラデーションもやりすぎに注意しましょう。。色決めに自信が無い方は、配色ツールなどであらかじめ色を決めてからの方がいいかも。。

↓こちらのツールは簡単にグラデーションを作ってくれるツール。。

Photoshopをお持ちの方は、『Photoshopのグラデーションファイルを日本の伝統色で作ってみた』こちらから、グラデーションファイルをダウンロードしてお試しください～。

まだまだ、ポイントはいっぱいあると思いますが・・・

みなさん、お店でお買い物したときに、商品を入れてもらえるショッピングバッグって捨てられる人ですか？

わたくし、どうも貧乏性なもので、スーパーマーケットのビニール袋もしっかり保存して、ゴミ袋なんかに使っております。。。

ちょっぴり高級なブランド物を購入したときにもらえる、しっかりした、おしゃれなデザイン紙袋なんかもらった日にゃぁ。

もったいなくて、再利用することもなく、きれいに保存してしまいます。。

っちゅうわけで、本日は面白いデザイン・ショッピングバッグを集めてみました。。

1. 引っ張られて痛そう。。

絞りの部分を引っ張ると痛々しくなりますね。。。

2. せくすぃ～

もっと大きめでもいいですよぉ～。

3. ブラ？バッグ？

もう、この際どっちでもいいです。。。

4. おててつないで～

もうすぐ、母の日ですね。。。

5. ダンベル

中身、何も入ってなくっても重そう。。。

6. ピストル

警察に捕まるかも。。。

7. 首吊り

○○団体みたいなところから、抗議が来そうなデザイン。。でも個人的には好き。

8. ネックレス

飾っておくには、とてもキレイ。

9. なわとび

いいアイデアですね。。持ってても、置いててもどちらでもOK

10. 食われる

なんだか、生々しい。。。

世の中には面白いデザインのショッピングバッグがあるものですね。。。

わたくしが、こちらアメリカの学校でグラフィックデザインのクラスをとっていた頃、何かというと、名刺のデザインをしていました。。

グラフィックデザインでは、名刺、便箋、封筒などのステーショナリーデザインは一般的で、デザインの基本になるのですかね。。

また、フリーランスで仕事をしているときも、ロゴの作成依頼から始まって、やはり、名刺、その後にウェブサイトの作成という流れが多くありました。

フリーランス時代には、なるべく名刺をいろいろな人に配ってまわっていましたね。。その当時、わたくしの名刺は、普通の紙に印刷するのではなく、フィルムに印刷して配っていたのですが・・・

それが、最初の掴みとしてはなかなかよくって、２回目に会うときには名前までは覚えられていなかったのですが・・・

フィルムの人って呼ばれていました。。。（なんだか、ハムの人みたいで、その当時は、あまりうれしくなかったのですが・・・）

そんな感じで、第一印象でインパクトが大きければ大きいほど、人は何かあったときに思い出してくれるのかもしれません。。

っちゅうわけで、本日はちょっぴり変わったデザインの名刺を集めてみました。。

1. 角を丸くしてみる

ウェブデザインでは角を丸くしてみるのはよく見られます。。名刺も角を丸くしてみるだけでも印象は変わりますね。。。

2. 形を変えてみる

形を変えてみても面白いですね。。

3. 入れ物をつける

名刺入れもつくってみるのも面白いアイデアですね。。

4. 商品のタグっぽくしてみる

商品のタグっぽいデザインもかっこいい。。アパレル系の名刺にはちょうどいいかも？

5. 大きさをかえてみる

ちっさ～っくする。

逆にでっか～くする？

6. CDやDVDにしてみる

名刺を使って、会社説明なんかをCDやDVDにしてみるのもアリ？

7. 遊べるようにしてみる

もらった人がちょっと遊べる名刺は面白い。。

8. 素材をかえてみる

チョコレートにして、食べてもらって、連絡先が分からなくなるかも。。

メタル素材で他の名刺と差別化。。手切りそう。。

プラスチックで他の名刺と差別化。熱に弱いか？

9. 芽が生えるようにしてみる・・・

渡した２日後に芽が生えてきたら、クライアントも連絡せずにはいられない？？

っとまぁ、世の中のグラフィックデザイナーさんは色々考えられておりますね。。。

こんな感じの名刺は、インパクトは大きいのですが、もらった人が整理しづらい・・・っていうリスクもあるのでやりすぎもよくないのですが・・・

他にも、まだまだ面白いデザインの名刺はいっぱいありますね。。。flickrとかで『Business Card』って検索してみてもかっこいいデザイン名刺がいっぱい見つかると思います。。

デザインblogランキング

先日、SiMPLE*SiMPLEさんで紹介されていた、「Web2.0風デザインのための秀逸チュートリアル68選」

これは、ものすごくいいですね！どれも参考になるチュートリアルばかりですね。。
見てるだけでちょっぴりPhotoshopが上達したような気がしますよね。。。

っと思って実際Photoshopを立ち上げて、チュートリアルを見ながら、手順通りすすめてみても・・・

英語で手順が書かれているので途中で見失う。。
実際のサンプル通りに仕上がらない。。。

という方々も多いのでは？

っちゅうわけで、実際にいくつかのチュートリアルを試してみました。。で、今回試してみたPhotoshopファイルをアップしてみたので、欲しい方はご自由にDLして参考にしてみてくださいな～。。

途中、面倒くさくなって細部をはしょっていたり、チュートリアルに書かれているやり方とは微妙に違う部分もありますが。。。すんません。。。

1. Three Girls
Web 2.0っぽい放射線状のグラデーションに人の影をつけるチュートリアル。色をピンクにしてみました。。。

実際のチュートリアルはこちらじゃ

で、実際にやってみたのが↓これ。

で、実際のPhotoshopファイルが↓これじゃ。。(Photoshop CS2で作成しました。。多分、他のバージョンでも開けるはず。。。)

2. Rainbow
Web 2.0っぽい波状のボーダーを背景に人の影をつけるチュートリアル。

実際のチュートリアルはこちらじゃ

で、実際にやってみたのが↓これ。

で、実際のPhotoshopファイルが↓これじゃ。。(Photoshop CS2で作成しました。。多分、他のバージョンでも開けるはず。。。)

3. Flower
Web 2.0っぽいグラデーションのチュートリアル。花の中心部は今回は、面倒なのでパス。。。

実際のチュートリアルはこちらじゃ

で、実際にやってみたのが↓これ。

で、実際のPhotoshopファイルが↓これじゃ。。(Photoshop CS2で作成しました。。多分、他のバージョンでも開けるはず。。。)

いやぁ、しかしPhotoshopって奥が深いですね。。。

デザインblogランキング