このalphachannelのテンプレートを作成するために、いろいろと情報を仕入れたりしたわけですが、全てウェブ上の情報だけで作成しました。本当にインターネットには感謝です。調べることが格段に簡単になりました。
ちなみに、このサイトデザインの特長としては、一番わかりやすいのはもちろん色の統一感かと思います。
そして次に感じるのは、ラインの統一ではないでしょうか。曲線は使用してしないので、縦方向や横方向に統一したラインが作成されています。
ここまではわかりやすい部分です。わかりにくい(というよりも気づかない)要素として、ホワイトスペースの統一が存在します。
見やすくするためのスペースであるのはもちろんですが、このホワイトスペースも各要素ばらばらに設定しているのではなく、数種類のスペースだけを、それぞれに意味を持たせて使用しています。
これにより、目線の推移が自然に、かつ認識しやすくなります。(このスペースなのでこれは主要ブロックとの間、や、これは異なる要素との始まり、など)一瞬で見て各要素が認識できるというのは重要です。
よくある例として、例えばタイトルなどが上下の要素のちょうど中間に位置する、という場合があります。これでは、このタイトルがどちらにも属すことができずに、独立した存在になってしまいます。
これが、例えば下に少しでも近ければ、このタイトルは下の要素に属することになります。
よく考えると当たり前のようですが、人間が自然に行っている事柄については注意が疎かになりがちです。ホワイトスペースやラインの整列を注意してデザインすることにより、より見やすく洗練されたデザインになるはずです。
最後に、このブログデザインで参考にさせていただいた各サイトをご紹介します。作成に関するリンク集のような感じになりますので、ブログやウェブのデザインを始めたい、もしくはもっと勉強したい方にも参考になるかもしれません。是非ご覧になってみて下さい。
1.タグ・レイアウト
TAG index
タグ・スタイルシートの総合情報。
CSSによる段組(マルチカラム)レイアウト講座
CSSで段組レイアウトをする際の基本的な作成方法。
hbworks - コンテナボックス内のフロートクリアについて2(IE7対応版)こちらで紹介されているフロートのクリア方法を利用しています。
Subtraction
気づいた方もいるかもしれませんが、ブログデザインを参考にしています。ちょっとソースを見たんですが、float: left;の嵐でわけがわかりませんでした(笑)。
Markup Validation Service
文法のチェック。今の所パスしています。
Another HTML-lint gateway
こちらも文法チェック。少し減点があります。
2.Movable Type + プラグイン
小粋空間
MovableType(だけではないけど)の総合情報。以前テンプレートを利用していました。そのテンプレートをベースにしてalphachannelのブログデザインが始まっています。
その他、CSSハックやモジュール化などの情報も参考にしています。
WEBデザイン BLOG -
TagSupplementalsプラグインを使って関連エントリーリストを生成
使用方法はこちらを参考にしています。
Ogawa::Memoranda - TagSupplementals Plugin 0.05公開
TagSupplementals PluginはOgawa::Memorandaさんで公開されています。
小粋空間 - エントリー・アーカイブで同一カテゴリーのコメントを表示する
エントリー・アーカイブページで使用しています。
pmLabo. - MovableTypeのカテゴリーソートに使える数字置換プラグイン
日本語カテゴリの並べ替えで使用してます。
その他にも参考にしているサイトはありますが、とりあえずこれ位で。貴重な情報をありがとうございます。私もフォトショップ以外でも、何か記していきたいと思います。
Tags : design movebletype site
Trackback URL : http://alphachannel.tk/mt/mt-tb.cgi/469
- MovableTypeのPHP化 ( 22 Mar 2006 )
- サイト作成とMovable Type ( 13 Feb 2006 )
- MovableType用テンプレート"LOVE BEAT" ( 04 Jun 2007 )
- サイトを移転しました ( 18 Apr 2007 )
- 更新履歴 ( 24 May 2006 )
- ボブの絵画教室をPhotoshopで再現 -朝の光1- ( 10 Jul 2007 )
- ニコニコ動画で嫌なコメントを表示させない方法 ( 07 Jul 2007 )
- Joy of Photoshop ボブの絵画教室を再現 ( 06 Jul 2007 )
- Appleのボタンをレイヤースタイルで+31個のスタイル ( 26 Jun 2007 )
- レイヤーの合成モードでノイズを調整する方法 ( 19 Jun 2007 )



