ArchArchHTML/JavaScriptUI・UXインスピレーションダウンロード素材ツールTIPSディレクションデザインマーケティング雑記・お知らせ2013.4.10Twitter、Facebook(アプリ)のデザインから学ぶ立体感のつけ方TwitterやFacebookのデザインを良くみてみると、立体感のつけ方に一工夫あるのがわかります。(現在のデザインになってからだいぶ経っており、今更な感じですが...)その立体感のつけ方が洗練されていて良いなぁと思ったので、どのように作られているかをまとめてみました。再現PSDデータをダウンロード※アイコンは本物と異なっており、形の近いものを使っております。Twitterヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出してみました。アイコンと文字(現在地表示)アイコンと文字(通常表示)ボタンこれらを再現してみると、以下のようになります。偽Twitterみたいな感じですねwそれぞれにつけた効果の詳細は実際のファイルでご確認ください。Facebook(アプリ)ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出してみました。アイコンと文字(現在地表示)ボタンアイコンこれらを再現してみると、以下のようになります。それぞれにつけた効果の詳細は実際のファイルでご確認ください。立体感を再現してみると、かなり作り込まれていることがわかりました。グラデーションをつけただけ、シャドウをつけただけでは表現できない奥深さや丁寧さのようなものがあるのだなと思いました。何でも作り込めば良いというわけではなく、企業やブランドに合った立体感をつくることが大切ですね。作り込まないことが適している場合もあります。今回のTwitterとFacebookの例では、作り込むことで、細かいところまで行き届いていること、それが信頼につながることを目的にしているのかなと予想しました。(完全な主観で根拠は無いのですが...)作り込むときは、このような例をお手本にしたいですね。2013のボランティアスタッフに参加して良かったこと2013.12.02UI変更が不評な時に役立つ原因の切り分け方2013.11.29About@kanako29WebサービスのUI・UXデザインなどをやっています。