カテゴリー別アーカイブ: Design

フラットデザインに最適なカラーをアドバイス

最近多くなってきているフラットデザインで、ちょうどいい雰囲気のカラーを見つけるのに苦労していました。
普段は沢山の参考サイトをみて、気になった色をスポットカラーのようなもので色情報を調べ、制作しているサイトに入れてみて….と時間を掛けて調整しています。

今回紹介するのは、サクッとフラットデザインに最適なカラーをアドバイスしてくれるサイトです。あと、このサイトのファビコンがgifアニメーションになっていて「おぉ!色がランダムに動いている」こんなところにデザイナーの心意気を感じます。

使い方は簡単で気になった色を1クリックすると色情報をコピーしています。
それをHTML/CSSの色指定部分にペーストするだけです。

Flat UI Colors
http://flatuicolors.com/
flatui

Font Awesome アイコン

Version4.1になり新たに71アイコンが追加し合計439になりました。
HTMLの設定で簡単に設置できインターフェースユーザビリティにも、デザイン的にも最適です。
1番のメリットはレスポンシブwebデザインの制作方法になりサイズのことなるアイコン画像が必要ないということです。1つの設定でサイズ、色をCSSで調整可能です。

http://fortawesome.github.io/Font-Awesome/icons/

fontawesome fontawesome1

ウェブセーフカラー表

WindowsとMacintoshではカラーが違って見えたりします。またもともと標準としている色数や解像度による色数も違うのでネットではセーフカラー256色というものがあります。

この色を使っていると殆どの環境で同じ色で再現されます。フォトショップやドリームウィーバーなどは簡単に色指定ができますが、実際のブラウザで前後の濃淡など確認することができるサイトがあります。

さらに便利なのが右上のメニューから「216 Web Safe Colors」「Greens / Blues」「Reds / Blues」「Reds / Greens」「Earth Tones」「Pastels」「Greys」とそれぞれ選択してくれます。

http://websafecolors.info/

ウェブサイトのsidebar《サイドバー》は何のためにあるか?

ウェブサイトの制作において、第二レベル以降ではこのようなレイアウトが広く使われていて、コーラルでもわりと使用頻度の多いレイアウト。

ウェブサイト レイアウト

ウェブサイトの代表的なレイアウトのひとつ。

「サイドバー」は何のためにあるのか?

基本的には、そのとき表示されているページだけでなく、他のページも見てもらえるようにするための場所、さらに欲張ると、ウェブサイト全体を見てもらう、最も見てほしいページへ訪問者を誘導するためのコンテンツを配置する場所と言える。

ただし、そのサイトの種類(例:ECサイト、ブログ等)によって、入れるコンテンツは異なる。例えば、特定の商品・サービスを紹介するサイトであれば、以下のような内容が考えられる。

  • サイト内各ページのコンテンツ概要およびリンク
    グローバルナビゲーションのみでは伝わり難い各ページの内容が、ぱっと見で分かるように掲載すると効果的
  • 最も見てほしいページへのリンク
    印象的なバナーを使用するなどしてクリック率を高め、サイト内回遊を促す
  • 運営する他のサイトや利用しているSNSにとぶバナー、スポンサーの広告等