デザイン

960 grid system/横幅を960pxにすると、超割り切れて、デザインしやすい。

960と言う数字が、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480で割り切れることを利用して、サイトの横幅を960pxにして、設計することを、960 グリッド システムというらしい。今回の僕のサイ…

サイドバーの実例を集めた

サイドバーがどうも上手くいかない。そもそも全体のデザインをやったはやったものの、コーディングの最中にいろんな事情で実現できず、いろいろ変わった結果、元から考えていたサイドバーが合わなくなってきた。 考えていること 当初よりも、白っぽいサイト…

cssでロールオーバー、active時に画像を変える方法css sprite

昨日中に終わらせたかったヘッダー部分のコーディング、できないことがたくさんあってやっと今日終わった。 http://www.designwalker.com/2008/02/css-sprite.html css spriteは、アップル、Yahoo!、Googleなどのたくさんのサイトが使ってる技術。例えば、 …

使いやすくてかっこいいフッターについて考える。

ウェブサイトのフッタを魅力的にする10のシンプルなアイデアを読んで、以下を考えた。ぜひやろう。 ニ代テーマはデザインと機能性 大きなフッターが流行っている(?)。情報量を増やせます。 基本だけど、トップに戻るボタンは必要。ホームに戻るボタンもつけ…

トップページのモックアップ

色・ロゴなどの要素は最低限の検討。なければならないリンクなどの構造については漏れなくしないといけない。 フッターに入れるべきもの サイドバーの整理 その他のページをトップページの使い回しで全部作る

jqueryで探す。写真のスライドショー/自動再生/クリックで選択

トップ部分には、各カテゴリーを示す写真を挿入する。11個あるカテゴリーを象徴する写真を、サイト訪問者には自動再生のスライドショーとして見せつつ、カテゴリーを選ぶためにも使えるものにする。 自動再生 メニューをクリックすると、該当カテゴリーの…

配色について考える

サイト内で使う色を予め決めておきたい。 日本 高級感 ベースになる色、座布団に使える色、罫線に使える色 強調色 を取り揃えて考えたい。今のところ、 配色のコツを参考に、色を考える作業を始めます。 白 黒 灰色 赤 薄い赤 金(に変わる茶色っぽい色) ベー…

トップページのワイヤーフレームを作りました!

設計図の元の元。ここから、細部まで設計していく。デザインはその後で。 画面遷移を考える。 pxを書き込んでいく。 div、classを書き込む。 リンク先を書き込んでいく。 サイドバーもちゃんと考える。 フッターも考える。 その他のページもこれをもとに考え…

ECサイトの商品一覧のお手本4つ

amadana トップページでは 写真と商品名のみで超シンプル。白バックの商品写真があればいいけど。写真のクオリティにこだわることが出来ないので、真似出来ないかな。 カテゴリ内での商品一覧 写真、商品名、値段。リンクは商品名にアンダーラインが敷いてあ…

検索軸×ナビゲーション/メニュー

SingSongs.com イギリスの音楽サイト。 Artist、Album、Genre、Yearという異なる検索軸の上にマウスを持っていくと、その下の部分が、アルファベット、ジャンル、年代に変わる。