アーティストぐりーんのブログ-Grelog

今日はぐりーんのもう一個のブログの、男風のデザインをリニューアルしてました。前のデザインはGrelogの使い回しだったので、いつかは変えようと思っていたのですが、出来ていなかったので、ゴールデンウイークを利用してデザイン＆コーディングしちゃいました。結果的にほぼイメージ通りに出来たので、このGrelogに匹敵するくらいにぐりーんは気に入っています。こうなってくると、ぐりーんは完璧主義なので、全部変えたくなってまうねんな・・。

今回のサイトのデザイン変更で特に意識したのは、潔よくシンプルに仕上げる事です。何かのサイトで、Googleのデザインポリシーに「シンプルは最強（アバウトな解釈）」みたいな事か書いてあったので、ミートゥでやってみました。ぐりーんは何かとコテコテしたり、カラフルなのが好きなのですが、今回は会社で現在Webデザイナーとういうことで、いつものようにアート調ではなく、Webデザインとして制作しました。配色やレイアウトをシンプルにすると、WebでもDTPのデザインでもそれっぽく見えるもんですが、それに依存しない明確な意思を持ったデザインを目指しました。具体的に気をつけた事を挙げると以下のようになります。

1.まずは余計な要素を省いて全体的にシンプルにまとめる

ぐりーんが思う最近のWebデザインの傾向としては、各要素のブロックの区切りを無くしたサイトをちょくちょく見かけるようになってきました。その利点としては、横幅を～800px前後で固定したレイアウトでも、狭さをあまり感じなくなるということです。それで今回は各ブロックの境界線を減らしました。ヘッダーは上のラインだけ横幅100%にして、フッタは全体的に100%表示にしました。色見は白をベースに次は黒、アクセントカラーとして黄色やリンク色の青を使用しました。

2.単純に見た目だけのデザインを追及しない。

最近デザインについてちゃんと考えるようになった証拠です。今までは見た目優先で画像テキストを多様したり、Web2.0デザインの影響かなんとなく罫線を使ってしまったり、リンクの下線をほぼ非表示にしたりしていました。今回は意識してテキストを使ったり、罫線封印したり、ユーザーにリンクテキストと分かって欲しい所はちゃんとアンダーラインを付けました。サイトの簡単な紹介文もタイトルロゴの横に付けたりして、ユーザビリティにも考慮しました。

3.うるさくない程度に流行りのスタイルも取り入れる

これは全体的なデザインも指すけど、分かりやすいとこではフッターのナビゲーションのリスト表示とか。まあ、これに関しては今さら感も漂いますが（笑）。1.の内容とかぶってるし。

4.コーディングもブラインドタッチで

最近ぐりーんがやたらとブラインドタッチの練習をしている目的の一つに、コーディングのスピードアップがあります。練習の為にコピペ禁止くらいの勢いです。最近だいぶと慣れてきて、数字とかマニアックな記号以外はほとんどモニターを見たままタイピング出来るようになりました。これもTouch Typer2.0と、タイピングソフトのおかげです。狙い通り仕事も早くなった気がします。

5.Fireworks CS3の試し切り

前回はPhotoshopのCS3でデザインしたので、今回はFireworks CS3でやってみました。こった事をするにはやっぱりPhotoshopやけど、Fireworksはやっぱ早い！1.5倍くらいのスピードや！！Web制作に特化してるだけあって。ぐりーんお得意のIllustratorみたいな感覚で使えるし。おそらくベースはFireworksで作って、凝りたいとこはPhotoshop、イラストは文字通りIllustratorで作ってガチャンコっていう、今のスタイルが定着しそうです。

とまあ、大体こんな感じです。思ったより早く出来た。デザインとコーディング込みで一日で出来たし。WordPressはテンプレートやし、ページも既に出来てるってのもあるけど。それにしてもコーディングでつまづく事が少なくなった。勉強した甲斐があるってもんだ。ソースをもっと綺麗にしたり、Web標準に近付けたりと、まだまだ課題はありますが。今回はこれで良しとしましょう。この経験をお仕事でも活かしていこうと思います。