Twitter、Facebook(アプリ)のデザインから学ぶ立体感のつけ方
TwitterやFacebookのデザインを良くみてみると、立体感のつけ方に一工夫あるのがわかります。（現在のデザインになってからだいぶ経っており、今更な感じですが…）その立体感のつけ方が洗練されていて良いなぁと思ったので、どのように作られているかをまとめてみました。 再現PSDデータをダウンロード ※アイコンは本物と異なっており、形の近いものを使っております。ご了承ください。 1. Twitter ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出してみました。 アイコンと文字（現在地表示） アイコンと文字（通常表示） ボタン これらを再現してみると、以下のようになります。 偽Twitterみたいな感じですねｗ それぞれにつけた効果の詳細は実際のファイルでご確認ください。 2. Facebook（アプリ） ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出
レイアウトの基本的な型と、レイアウトからデザインまでの流れ
Webサイトにおいて、レイアウトの基本的な型と、レイアウトからデザインまでの流れを簡単にまとめてみました。 レイアウトからデザインまでの流れを把握しておくと、その間の思考が分断されずデザインがしやすくなると思います。 また、ユニークなレイアウトにするにしても、あらかじめ基本的な型を知っておくと逸脱がしやすくなりますね。 レイアウトに影響を与える要因 レイアウトにはいくつかの型がありますが、まずその型を決定する前に、レイアウトに影響を与える要因を知っておく必要があります。これらの要因によって、レイアウトの型があらかじめ決まったり、レイアウトが大きく変わるからです。 情報階層の深さ →1ページのサイトなのか、第二階層以降ありグローバルナビゲーションが必要になるのか、など サイトの目的・属性 →そのサイトでは何を伝えたいのか。企業・ブランドのメッセージや情報、ユーザーに役立つ知識（Wikiped
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
