月別: 2016年3月

これからPhotoshopでWebデザインをはじめる人が覚えておくといい便利機能5選

レイヤースタイル

僕はWebデザイナーを始めた5年前からデザインはずっとPhotoshopを使ってきました。

最近ではIllustratorや何かと話題のSketchを使っている人も増えてきていますね。SketchなどWebデザインに特化しているのでどんどん勢力をのばしてるわけですが、僕はそれでもまだPhotoshopの方が好きですね。
自分がPhotoshopでWebデザインを行う理由として、

  • 写真を加工も一緒にできる
  • ピクセル単位でデザインできる
  • レイヤースタイルなどの種類が豊富
  • GIFアニメーション・シネマグラフが作れる

などが主な理由でしょうか。
それからPhotoshop CCに新たに「デザインスペース」というWebとアプリケーションデザインに特化した機能が追加されたりとSketchに負けじ劣らず、どんどん使いやすくなっているのではと思います。

PhotoshopでWebデザインをするデメリットと言いますか、Sketchとかと比べると操作性が直感的ではないので習得には時間がかかるのではないでしょうか。
Photoshopには本当に多くの機能があって、それを使いこなそうと思ったら経験と時間を積み重ねるしか無いのですが、はじめてWebデザインをする上ではいきなり全部を覚えるのは効率が悪い。

ということで、今回は最初に設定しておくと便利な機能を紹介します。
出来るだけ作りたいものや状況に合わせて説明したいと思います。

続きを読む

【Webデザイン】ページ遷移が気持ちいい海外サイト6選

KEKSELIAS

最近、フラットデザインやレスポンシブデザインも当たり前と言ってもいいぐらい増えましたね。少し前はスキューモーフィックデザイン(質感の再現を目指したリアルなデザイン)が主流だったのに、スマホやタブレットが浸透してから一気にフラットデザインがトレンドになったように感じます。

まぁ、そんな感じでみんながみんなフラットデザインを取り入れると、今度は個性やインパクトに欠けるってことになってきます。
CSS3のおかげで、CSSだけの構成のボタンも多彩な表現が出来るようになったんですが、でも何か足りないというか。むしろスキューモーフィックデザインの方が個性もインパクトもあるように感じますが、マルチデバイスとなるとこれもまた大変(汗

そこでフラットデザインで個性、インパクトを補う方法として増えているのが、アニメーションかなと。
GIFアニメーションも然り。それこそこれもCSS3のおかげでアニメーションも以前と比べてめちゃめちゃ簡単に取り入れやすくなりました。

ということで今日はアニメーションの中でもページ遷移に拘ってるなぁと思う海外のサイトを紹介します。

続きを読む