よもやまチョモランマ

2018年の流行デザインを年末に調べる

◆モバイルファースト
モバイル用のデザインを行い、その後、PC用のデザインを作るという考え方。
Googleはモバイルフレンドリーを重要視。スマートフォンに対応したデザインを行っていないと評価が下がる。

◆タイポグラフィ
文字のデザインのこと。ジャンプ率の大きいウェイトの大きな英文字を使ったデザインも復刻。
中央に印象的に配したもの、ビジュアルに少しかかるようにしたものなど、ビジュアル一枚とタイポグラフィで魅せるのが多め。

◆ヒーローヘッダー
ファーストビューに画面いっぱいのサイズの画像や動画を設置したデザイン手法。
タイポグラフィと合わせやすく、デザイン性やオリジナリティをもたせやすい。

◆フラットデザイン2.0
フラットデザインはクリックできる場所とそうでない場所の区別が付きにくい。
そこでシャドーやグラデーションを取り入れることで、ユーザビリティを向上させることを目的としたデザイン手法。

◆マテリアルデザイン
2014年にGoogleによって発表されたデザイン手法で、現実の物質法則に則ったデザイン。
紙を持ち上げると影ができるように手前に配置されているレイヤーに影をつけたりします。

◆ミニマルデザイン
表示する情報や装飾を削ぎ落とすことで、シンプルなデザインに仕上げるデザイン手法。
本当に伝えたい内容に絞って、ユーザーに対して適切にメッセージや情報を伝えることができます。

◆リッチデザイン
フラットデザインの対局。斜角、反射、傾斜、ドロップシャドウなどが加えられ、立体的。

◆グリッドレイアウト
要素を「グリッド(格子)状」に配置するデザイン手法。
一覧ページに採用されることが多い。UI/UXの観点から見てもユーザーに親切。

◆ブロークングリッドレイアウト
グリッドレイアウトをあえて「ずらす、重ねる」ことによって、デザインにアクセントを加えるというレイアウト手法。
文字が画像からはみ出したりする。

◆ノングリッドレイアウト
ブロークングリッドレイアウトよりさらに「規則性や法則性を持たせず、より自由に要素を配置する」レイアウト手法。

◆スプリットスクリーンレイアウト(特にアシンメトリー)
画面上のレイアウトを2つ以上に大きく分割するデザイン手法。雑誌を広げているような紙面デザインに近い。
明確に分割することでメリハリをつけたり、それぞれに目的(メニューとコンテンツなど)を持たせることができる。

◆リキッドレイアウト
%で指定することで画面幅に合わせてレイアウトを伸縮させる手法。

◆パララックス
スクロール時にページ内の要素にアニメーションやエフェクトを加えるデザイン手法。
動きをつけることによってユーザーの注意をそこに向けたり、飽きさせないページを作ることができます。

◆流体シェイプ
波面や水滴のような丸みを帯びた滑らかな曲線を取り入れたデザイン手法。
直線や正円ではなくちょっと崩れる感じ。優しく動きがあり、グラデーションや乗算とも相性が良い。

◆鮮やかなグラデーション
フラットデザインに立体感や奥行き感を出すことができる。
文字にマスクをかけて使うことも多い。

◆ホバーエフェクト
マウスをもっていったときに画像が大きくなったりする。
CSSだけで実装可能。