Home > Web > ブログ・サイトをデザインするときの手順

ブログ・サイトをデザインするときの手順

  • 2008-04-22
  • Web

ブログ (もしくは、サイト) を作る時の手順は人によってかなり違うと思います。
そんなわけで、作る手順を迷っている人に参考程度に書いてみようと思います。

※ ここの書いてる人はデザイナーじゃないので、あまり過信しすぎないようにしてください。

サンプルの写真があるといいのですが、残念ながら今はないので、これからリニューアルをした際に1つ1つ乗せていこうと思います。
そんなわけで、リストにしてご紹介。

  1. 使いたい色を探して、決めてしまう。
  2. たいていはラフスケッチからはじめます。
  3. そうして、具体的にしていきます。
  4. イメージにあわせて CSS と XHTML を書きます。
  5. Photoshop などで一気に作るのではなく、パーツごとに作っていくのがクセです。
  6. パーツができたら、 CSS に一気に流し込んで完成させます。
  7. (ここで、もっと細かいところに気を配れるようになるといいと思うのですが。)

最初に色を探すのは、ラフから始めても色のイメージがないとうまくいかないからです。
「この色はここに使いたいな。」とか、「背景はこの色でしょ。」というように作っていきます。
ラフスケッチは、かなり大まかに書くことが多いです。ひどいときは、2カラムか3カラムかしか書かないこともあります。
そのあとに、具体的にドロップシャドウやボーダーなどを書いていきます。

イメージにあわせてCSSやXHTMLを書くことが多いのですが、この時点で、マージンやパディング、高さや幅は決めてしまいます。
そうしないと、後で画像を作ったときにサイズが合わないという事態が発生するためです。

パーツごとに作ることについてですが、一気に作ることができないのでmemo">(ただのスキル不足)そうやっています。
でも、自分の中では一番やりやすいと思っているので、プロになっても、多少効率が悪いと言われようがやるかもしれません。
そして、1つ1つのパーツが出来次第、一気にCSSに組み込みます。

いつも思うのですが、どうもデザインがいい加減な気がするんです。memo">(性格かもしれません。)
input 周りやほんのちょっとしたデコレーションなどをうまくできるようになると、よりクオリティの高いサイトになると思います。

また、デザインのネタも毎日探しています。
ギャラリーサイトを利用することが多いのですが、おすすめなのがいくつかあるので紹介します。

CSSclip
サムネイルが大きく表示されて、非常に見やすいです。
CSS Mania
かなり多い数で更新されるので、オススメです。
検索窓で検索するといろんなジャンルのサイトを見られるのもポイント。
CSS Wafe gallery
CSS Mania にはないようなサイトも時々あるので、よく見ています。
登録サイトのクオリティが高め。
Webデザインデータベース
日本語で、そのサイトのデザインについて詳しく解説されているのがいいですね。

また、多くのギャラリーサイトを日々探しています。
もしこのほかに、私が見ているサイトを知りたいならば、CALRO ブックマーク - designportalページをご覧ください。
時々アップしていこうと思います。

最後になってしまいましたが、「こんな方法がいいよ!」というのがありましたら、ぜひコメントください。

Comments:1

2008-07-31 (木) 10:08

このコメントは管理者の承認待ちです

コメントの公開は、管理者の承認が必要です。

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://calrodesign.blog32.fc2.com/tb.php/47-529ab3c4
Listed below are links to weblogs that reference
ブログ・サイトをデザインするときの手順 from SKY lark*blog

Home > Web > ブログ・サイトをデザインするときの手順

Tags

design lifehack web renewal memo html css blog fonts MapleStory flash YouTube recent news profile browser 

Recent Comments
Recent Trackback
Search
Meta
Links
Feeds

Page Top