Design
WebDesign

書籍「Webデザイン、これからどうなるの?」概要まとめ

Webデザイン、これからどうなるの?という書籍を読んで、なんとなくの知識を整理できて、これからのWebサイト制作にあたりとても参考になったので、概要をまとめます。

実際に、紹介されているデザイン手法を取り入れたサイトを見ることで、なるほどうまいな、って思います。

きになる方は、ぜひ本書を読んでみてください。

UI

01 ユーザファースト

使いやすく、必要な情報に最短でたどり着くためのIFを作ること
http://www.kddi.com/

02 ミニマリズム

構成する要素を最小限に絞り、シンプルで洗練されたページに仕上げる
https://www.apple.com/jp/
https://www.apple.com/jp/iphone-8/

+ フラットデザイン
+ マテリアルデザイン
+ セミフラットデザイン

03 マイクロインタラクション

的確なフィードバックを提供、機能を説明、直接操作している感覚
http://2016.makemepulse.com/
http://loveforiceland.com/
https://simplychocolate.dk/

04 メガドロップダウンメニュー

クリックやホバーで展開する表示領域が広く取られたパネルメニュー
https://www.jal.com/ja/

05 フロアナビゲーション

意図的にページ遷移を減らすことで1ページあたりのコンテンツ量が増えたサイト
https://cheesetart.com/

06 インビジブルメニュー

限られた画面の中でコンテンツをより見やすくするため、メニューを格納して表示させない
https://www.boffi.com/en-ww

07 プロトタイプングツールを使う

画面遷移やアニメーションの流れや動き、UX、UIを確認することができるツール
https://prottapp.com/ja/
adobe xd、craft

08 3D表現とUI

ユーザへの訴求力を高めWebサイトでの体験を豊かに
https://toyotagazooracing.com/jp/gr/config/#/gr86
https://www.g-star.com/en_nl/elwood

09 スマホ/WebVR

インタラクティブなVRコンテンツをWebで視聴できる環境
https://konterball.com/

10 チャットUI

https://www.intercom.com/
チャットボットを活用したチャットUI

LOHACO -> マナミさん
https://lohaco.jp/support/index.html

レイアウト

11 シングルカラムレイアウト

HTML構造の原則として標準的なレイアウト。モバイル環境への対応が最優先な時。
http://transbooks.center/

スマホからPCのレイアウトを考える時代に。

12 レスポンシブデザインの現在

http://getbootstrap.com/

viewport

320
480
600
960
1280
1600

SP: 320~480/480~812
tablet: 320~981/768~1024/1024~1366
pc: 1024~

画像もレスポンシブ(@2x@3x

<img src=“img@1x.jpg” srcset=“img@1x.jpg 1x, img@2x.jpg 2x” />

13 パララックスエフェクト

奥行き表現=パララックス(視差)
http://www.firewatchgame.com/
http://north-east-venture.com/

14 スプリットレイアウト

縦型(SP)を横型(PC)に当てはめた際のスペースを活かす
https://crossbackyard.com/story/atmos/people/

15 フルスクリーンレイアウト

1画面でコンテンツを完結させる、スクロールによるリニアな表示ではなく、ページの概念を持ち込むことでインパクトのある表現に。
http://www.24hours.earth/en/home

16 カードレイアウト

情報を小分けにコンポーネント化する。分散化した情報を整理する。
https://www.pinterest.jp/
https://www.cyberagent.co.jp/
https://www.nintendo.co.jp/switch/aab6a/index.html
https://on-the-trip.com/

17 ブロークングリッド

グリッド感を敢えて壊して、デザインに変化や動き。
http://themarcus.com/
https://www.adamunderwear.com/

PCのマルチウィンドウも一種のブロークングリッド

斜めのラインを活かす
https://cheesetart.com/

18 AMP対応とモバイルファースト

Googleを中心に立ち上がった、モバイルページの高速化を目指したプロジェクトAMP(Accelarated Mobile Pages)
https://www.ampproject.org/

https://ampstart-iframes.firebaseapp.com/templates/e-commerce/landing.amp

FB -> Instant Articles
Apple -> Apple News Format

19 画面遷移とトランザクション

シングルページアプリケーション(SPA)のように、画面描画を動的に制御するWebサイトでは、
画面遷移の際にトランザクション演出を挿入することができるようになった。
見栄えだけでなく、ユーザビリティを考慮して取り入れる必要がある。
https://www.7up.nl/

簡易的に、Adobe XDなどでも画面遷移時のトランザクションを確認することが可能。

近年のレイアウトデザイン

webGl
http://acsl.co.jp/special_modal.php

非同期繊維によりストーリーをつけて繋がりあるユーザ体験
https://www.aristidebenoist.com/

グラフィック

20 ヒーローイメージ

顔となるトップページのグラフィック、ユーザに最も伝えたいブランドやプロダクトのメッセージを訴求する役割がある
http://cogycogy.com/
http://apploud.cz/
http://www.poigneedemainvirile.com/
https://www.carbonbeauty.com/

21 ヒーロームービー

静止画だけでは伝わりきらない被写体の持つ雰囲気や情緒を
https://on-the-trip.com/
https://milanote.com/

22 グラフィックパターン

円や多角形のようなプリミティブな形状を組み合わせ、強いメッセージを持たせる
http://yasutaka-nakata.com/
http://neufuntrois.com/

幾何学パターン
http://doze.studio/fr/

テクスチャパターン
http://minico.handmade.jp/

23 ベクターグラフィック

直線・曲線の組み合わせ、単色・ベタ塗りが得意なベクターグラフィック、SVGを用いてくっきりとした描線を表現
https://waaark.com/

24 インフォグラフィック

情報・データをいかにわかりやすく伝えられるか 数字や文章を視覚的に表現することで、伝達スピードを効率化
インフォグラフィック => Information + Graphic
https://find47.jp/ja/

25 3Dグラフィック

視覚的なインパクトと物語性を持たせる効果
https://throughthedark.withgoogle.com/
https://zerofinancial.com/

26 ループアニメーション

イラスト、グラフィックパターンと相性が良い 視覚的なインパクトを残滓、コンテンツの世界観やブランドイメージを強く訴求
http://www.ranadesign.com/recruit/changethework/

27 シネマグラフ

静止画が動いているような不思議な感覚
http://www.studiomarani.it/en/
http://rebeccamock.com/index.html

28 エフェクト・フィルター

スクロールによる視差効果をだすパララックスエフェクトを代表、ズームインやトランザクション時のエフェクト
http://www.onedayinmyworld.com/
https://www.ifly50.com/en_jp/49

タイポグラフィ

29 Webフォント

Google Fontsなど

カスタムフォント
https://brand.denso.com/ja/

FONTPLUS
Fonts.com
Adobe Typekit
MyFonts

30 バリアブルフォント

Apple Google Microsoft Adobe が共同開発、2016/9に正式発表された新しいフォントの概念
一つのフォントファイルで複数フォント利用可能
https://docs.microsoft.com/en-us/typography/opentype/spec/fvar

31 タイポグラフィとSVG

ベクターデータのSVGは、拡大縮小しても劣化しない。パスデータとして使えるため、アニメーションやエフェクトを加えやすい。
http://gogc.jp/

32 レンダリング

手書きのタイポグラフィは余白の多いシンプルなデザインとも相性が良い
https://www.kikk.be/2017/
https://recruit.livesense.co.jp/
https://draft.co.jp/

33 極端なサイズ

タイポグラフィをメインにしてメッセージを直接的に伝えるWebサイト。タイポグラフィをUIや装飾的要素としてデザイン。
https://badassfilms.tv/

雑誌のようなデザイン
https://www.lapeaudelours.net/fr/

マスク
https://bonnemarque.se/

配色

34 マテリアルカラー

Googleマテリアルデザインの影響で、ビビットで大胆な色使いのサイトが増えた
https://www.awwwards.com/sites/sismo-design
http://onesharedhouse.com/

35 グラデーションカラー

Webセーフカラーしか再現できない時代から、モニターやスクリーンのスペックが向上し、グラデーションを綺麗に再現できるようになった、
また、CSSでもグラデーションができるようになった
https://www.spotify.com/jp/

http://quiver.madebyburo.com/

36 デュオトーンとオーバーレイ

ビビットカラーを採用することへの抵抗がなくなり、加えてグラデーションの流行もって一つのトレンドになっている
https://www.stinkstudios.com/work/spotifyyearinmusic
https://peekabeat.com/#!/capture

37 ニュートラルカラー

海外のWebデザインでは、色の少ないミニマムデザインがトレンドになってきている
https://agence-belle-epoque.fr/
http://otanijun.com/

38 Webブルータリズム

Webデザインの原点回帰
http://brutalistwebsites.com/
https://www.apple.com/jp/imac-pro/