読者です 読者をやめる 読者になる 読者になる

【今年の個人的にトレンドだったデザインやWeb制作のあれこれ】デザイン編

【今年の個人的にトレンドだったデザインやWeb制作のあれこれ】デザイン編

今年1年の超個人的なトレンドを振り返るべく、連日透投下しているシリーズ、 【今年の個人的にトレンドだったデザインやWeb制作のあれこれ】です。 全て書き終わったら下の目次のリンクをちゃんとつなげますね。

 

  1. 今年個人的にトレンドだったフリーフォント
  2. 今年個人的にトレンドだったデザイン
  3. 今週のイコール君振り返り
  4. (今年よく実装したコーディング・マークアップ

さて、本日は「今年個人的にトレンドだったデザイン」の回です。 昨日はフォントについて書きましたが、フォントはデザインによって左右されますので、 今回デザインについて思い出してみると、なぜそのフォントをチョイスしたのか、も分かってくると思います。

数年後に、あの頃はこういうデザイン好きだったなーと自分が思い出せるように、書いていきたいと思います。

 

f:id:logequal:20161224205103p:plain
f:id:logequal:20161224205104p:plain

境界線のデザイン
今年は、境界線の太さ、細さを意識したデザインをよくやりました。
太めにすると、ポップなデザインとの相性がよく、締りも出ます。 それに対し、細めのラインは繊細なイメージになり、シンプルなデザインに合います。
私は特に太めのラインをよく使ったイメージがありますが、 全部を太めなボーダーばかりにするのではなく、エリアによって太さは変えます。 当たり前といえば当たり前ですが、強弱をつけてデザインにメリハリをつける感じです。ボタンの枠線や影にブラックを使って強調させるデザインもよくやりました。

 

カードレイアウト

カードレイアウト
カードUiもよくデザインしました。 下記で紹介するマテリアルデザインではよく登場するUiです。
すっかり定番化してきたな、と思っているのですが、使いやすいのでほんとに今年はよく使用しました。 2015年から既に登場はしていましたが、2016年により頻度が加速しました。
レスポンシブサイトとも相性が良いことや、googleが採用しているUiですので、ユーザの操作性も分かりやすく、取り入れやすいUiだと思います。

 

マテリアルデザイン

マテリアルデザイン
上記でも少し触れたマテリアルデザインですが、Googleが提唱するデザインです。
Googlewebサービスやアプリで取り入れられているので、見慣れたデザインといえるかもしれません。 マテリアルデザインは要素の重なりを物理的に捉えたものです。 そのことから影が重要となってきました。その他定義がありますが、その辺りは省略します。

数年前まではフラットデザインが流行っており、私も実務ではよくデザインしました。 フラットデザインとマテリアルデザインは似ているところもありますが、 フラットデザインは影やエフェクトの効果を極限まで削ぎ落とし、 よりシンプルにしたもの、と捉えています。

そしてこれは再三語られてきたことなので、ここでは言及しませんが フラットデザインはあまりに削ぎ落とした要素が多すぎたために、 最終的には多少の影は付けてもよし、みたいな流れになりました。
その時の見た目がマテリアルデザインと似ていますが、なんというか似て非なるもの、 と思っています。

2016年はフラットデザインから少しずつマテリアルデザインに移行した年でした。 2015年の終わり頃までは、上記のような「似て非なるもの」のデザインをしていた気がします。

2016年からは私の所属する部署のweb課内にて、スマホサイトの制作に重きを置くようになりました。 それはスマホサイトの利用者が多いことからそうなったのですが、 スマホサイトの重要性が高まってきた1年でした。

近頃はスマホサイトにもアニメーション要素を入れたりとアプリとの境界線が徐々になくなってきました。 もちろんアプリのような複雑な動きはできませんが、できるだけ説明をなくして、ユーザーに操作方法を分かってもらえるか、という考えから取り入れられたものですが、ユーザビリティを考えることは昔から変わっていませんね。

 

私は将来的にアプリのデザインをする可能性もありますが、今のところはwebサイトでできることを最大限に行っていきたいと思っています。