アニソン動画まとめサイトanimedleyはじめました。
2011-08-10
■[WEBデザイン]プログラマーがかっこいいWEBサイトを作る5つのコツ
「かっこいいサイト作るぞ！」
と意気込んでみたももの、いざ作ってみると
「あれ･･･なんかダサい･･･」
WEBサイトを作成したことのあるプログラマーの方なら、
経験したことがある方も多いのではないでしょうか？
WEB制作は、基本的に、デザインはデザイナー、システムはプログラマー、という
役割分担の元に作業が行なわれるため、プログラマーが見栄えのするサイトを作ることは、
簡単なようで、なかなか難しいことです。
かくいうプログラマーである私も、いくつかのWEBサイトを個人的に作成してきましたが、
自分で納得のいく見た目のサイトが作れず、夜中の謎のハイテンション時にデザイン
を完成させ、1度寝てから再度確認すると、そこには見るも無残なWEBサイトが･･･
なんていうことを何回も経験してきました。
そこで私、muggles0812が試行錯誤した結果を元に、プログラマーが、シンプルながら
ある程度見栄えのするWEBサイトを作るコツをまとめてみました。
「素人っぽいWEBサイトしか作れない！」と、お嘆きのプログラマーの方々に
少しでも参考になれば幸いです。
デザインを1から自分で考えない
これは絶対やってはいけません。
デザインを1から自分で考えた時点で、ダサいサイトへの道がほぼ決まります。
そこでどうするかというと、まずデザインを参考にする「かっこいいサイト」を探します。
といっても、コミュミニティサイトを作るつもりなのに、
どこかの会社のコーポレートサイトを参考にする、というのではだめです。
なぜなら、コミュニティサイトと、コーポレートサイトでは、ページの基本レイアウト
が全く異なるため、参考にできる部分が非常に少ないのです。
なので、参考にするサイトは、自分が作りたいコンテンツに似たレイアウトを持つWEBサイト
の中から、かっこいいデザインのWEBサイトを探し出すことがポイントです。
(もちろんまったく似てないサイトでも、ちょっとしたパーツデザインを参考にするのは全然アリです)
上記のように、似たレイアウトを持つWEBサイトを探し出すことで、
本来自分で考えなければならない時間を大幅に短縮することができます。
またこの手を使うことで、サイトの構成を考える上でも参考になったりするので
非常にメリットは大きいです。
また、他のサイトを参考にすることで
「パクリって言われるんじゃ？」
と思われる方もいるかもしれません。ですが、この点は大丈夫です。
多くの人がかっこいい！と思うサイトはだいたい手が込んだ装飾が施されています。
この記事では「シンプルかつかっこいい」が目的ですので、
かっこいいサイトの「手が込んだ装飾」部分はすべて省きます。
これだけで、参考にするサイトの素材をそのままパクってしまう、
ということをしない限り、それほどそっくりなサイトにはならないのです。
具体例として、私が最近作った、アニソン動画まとめサイト(→http://arv.jp)
※クリックで拡大
そしてこちらが参考にしたサイト(今はなき、fflickという海外の映画レビューサイト)
※クリックで拡大
トップページの構成を比較すると、配置が非常に似ていると思います。
また、画像ではわかりづらいですが、よく見るとfflickの映画パッケージの1つ1つに
影がつけられていることがわります。
私が作成したサイトでは、この部分も参考にさせてもらいました。
色を使い過ぎない
いろんな色を使えば使うほど、全体の色のバランスをとることが難しくなります。
色のバランスがとれないということは、見栄えのするサイトにはなりません。
そのため、テーマカラーを1つ決め、その色を中心に、似た系統の色で統一する、
もしくは使う色を3色程度に限定する、などの方法が有効です。
また配色を考えるときに、相性のいい色の組み合わせを知りたいときは、
Adobeのサービス、kulerを使えば、色々な組み合わせパターンを提案してくれます。
kuler - http://kuler.adobe.com/
ちょっとしたボタンくらいは描けるようになっておく
少し描けるだけで、ぐっとデザインの幅が広がります。
「描く」といっても、ラインと図形、文字を組み合わせただけの簡単なロゴや、
ボタンが作れれば、それで十分です。
ロゴやボタンなどの参考になるデザインはWEBを探せばたくさんあります。
自分が気に入った素材を見つけ、それを参考に描けばいいのです。
この場合も、1番目の「デザインを1から自分で考えない」と同じように、
自分で考えず「真似る」ことがポイントです。
私の場合、Photoshopは使い方が全くわからず、操作が難しいイメージなのですが、
同じAdobeが販売しているFireworksというグラフィックソフトが、それほど複雑でなく、
使い易いため、もっぱらこちらを使っています。
下記のような、ちょっとしたラインと図形、文字を組み合わせただけの簡単なロゴでも、
あるとないでは大きく印象が違うと思いませんか？
右側のログインボタンはTwitterが用意している素材です。
それを真似て左側のボタンをFireworksで作成しています。
この記事を読んでくれた人の中には
「そんなボタン作れないよ！」
と思う方もいるかもしれません。
でもこのボタン、実はかなり簡単に作成できます。
このボタンの作り方をざっくり解説すると、
長方形・ライン(ボタンを少し立体的に見せるための、上から2px目の1pxの横線)
ボタンの文字を用意し、グラデーションをかけるだけ･･･です。
たいていのグラフィックソフトであれば、これくらいはすぐできますし、
何より、真似るボタンがあるため、デザインについて悩むことはありません。
急に敷居が高くなるのは、描き手の画力とセンスが必要とされる、
独自のキャラクタ・イラスト作成などからではないでしょうか。
クオリティの高い素材サイトを見つけておく
いくらシンプルなサイトといっても、まったくアイコンやグラフィックがないと、
さみしい印象のサイトになってしまいます。
ただ、自分で描くのは難しい･･･、そこで素材サイトを利用します。
素材サイトは無料なものから、有料なものまで様々ですが、
私は海外の素材サイトを利用することが多いです。
例えば、↓のサイトは素敵なアイコンが豊富にあります。
IconsPedia - http://www.iconspedia.com
有料サイトだと、こちらなんかを利用しています。(主に写真素材を探すときに利用)
dreamstime - http://www.dreamstime.com
こういった素材サイトを利用して作ったのがこちら
↓写真を留めているピンは素材サイトから↓
↓左側の手のグラフィックは素材サイトから入手した素材の色を変更し、透過させたもの↓
もし他におすすめなサイトがありましたら、是非muggles0812までお知らせください！
「このデザインいいな！」と思ったらブックマーク
日頃から、気に入ったデザインのサイトや、バナーなどを見つけたらブックマーク、
もしくは、画像を保存しておきます。
こうして引き出しを貯めておくことで、いざ自分でサイトを作ろうと思ったときに
役に立ちます。(サイトを作ろうと思ったときに参考になるサイトを探しはじめても
全く問題ありませんが、日頃から探しておいた方が、あとで楽できます)
以上、私なりの5つのコツをまとめてみましたがいかがでしょうか。
次回か、そのまた次回かは未定ですが、
「公開初日！広告を使わずに私が5086PVを達成した方法」
という内容で記事を書く予定です。
記事を書いたらつぶやきます。→muggles0812
この記事を読んだ人におすすめ
Permalink | トラックバック(0) | 15:36