kozzy’s blog

Ruby, Python, PHP, React.js あたりで学んだこと、記事、読んだ本のまとめなどを垂れ流しする場の予定です

読書録 #04 : Webデザイン、これからどうなるの?キーワードから探るデザイン動向の現在と未来 を読んで

目次

読んだ本

Webデザイン、これからどうなるの? キーワードから探るデザイン動向の現在と未来

Webデザイン、これからどうなるの? キーワードから探るデザイン動向の現在と未来

Why

  • フロントエンドエンジニアに転身する身として、基本的なデザインの流行であったり、考え方であったりを知っておきたい

他の人の書評

maburi.com

特別記事(Web担当者 Froum)

webtan.impress.co.jp

Let's Try

下記がどのようなものかは覚えておきたい。 そして参考にしたいときにこの書籍を引ける状態にしておく。

  • マイクロインタラクション
    • ユーザの行動に合わせて小さなフィードバックを与える技術

webdesign-trends.net

ferret-plus.com

  • フロアナビゲーション
    • ページ遷移を減らし、1ページで主張したいメインコンテンツに被らないようサブコンテンツを配置してスライドさせながら魅せる表現手法

実例

cheesetart.com

  • インビジブルメニュー

    • メニューを格納して表示させない手法
  • パララックスエフェクト

    • 部分ごとに動くスピードや、動く方向に差をつける効果のこと

saruwakakun.com

photoshopvip.net

  • スプリットレイアウト
    • 画面を大きく分割させる表現手法

webdesign-trends.net

  • ブロークングリッド
    • 言葉の通り、グリッドレイアウトを敢えて崩して表現する手法(素人が真似すると、普通に汚くなりそう)

webdesign-trends.net

  • ヒーローイメージ
    • プロダクトなど、最も主張させたいものを大々的に表示させる表現手法

techacademy.jp

  • ヒーロームービー

    • 臨場感や没入感を与えるような画像を大きく魅せる手法。モバイルへの配慮も重要
  • ベクターグラフィック

    • SVGイメージのこと、シンプルな色使いと組み合わせて表現するのが相性良し
  • シネマグラフ

    • 画像の一部分だけを動かす表現手法

helpx.adobe.com

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

    • マウスアクションと連動したアニメーションエフェクトのこと
  • タイポグラフィ

    • 活字を大きく配置して、Webページの体裁を整える技法

saruwakakun.com

  • レタリング

  • デュオトーン

    • 2色をミックスさせるデザイン手法、さらに画像、文字などをオーバーレイ表示させる手法も流行っている

www.genius-web.co.jp

  • ニュートラルカラー

    • 白、ベージュなどを基調とした色のことで、余白を利用したデザインなどに利用される
  • Webブルータリズム

    • 90年代のWebデザイン、原点回帰トレンド

所感

  • プレゼンするときとかにスライドに組み込めるとカッコ良さそう(そういや、マテリアルカラー・デザインは好みなので多用しがち)
  • カードレイアウトとかは最近よく見るし、UIライブラリでもよく見るなあ
  • 図鑑として常備しておくのに良い一冊なのではないか。(自分の場合 Kindle だから逆引きはしにくいけど)
  • やっぱ美しいデザインの Webページを見ると落ち着く

この辺りを知りたい人にオススメ!

1章. UI

  • ユーザに使いやすく、欲しい情報を端的に提示するためのデザインとは?
  • 適切な動的な表現、フィードバックとは?
  • プロトタイピングツールについて
  • 3D、AR、VRなどを用いた表現事例
  • LINE ライクに情報を親近感を持たせながら表現するチャットUIについて
  • これからの UIデザインについて

2章. レイアウト

  • モバイルでもWebでも、どんな画面サイズでも閲覧しやすい表現手法
  • カードレイアウト、ブロークングリッドなどの魅せ方について
  • 高速・軽量表示を実現する AMP について
  • 画面遷移をさらに有効に表現する手法について
  • これからのレイアウトについて

3章. グラフィック

  • 見せたいものの魅せ方について
  • 立体的、動的な魅せ方
  • モバイルデバイスにおける見せ方で考慮すべき点

4章. タイポグラフィ

  • フォントを用いたデザインで重要な視点
  • アニメーション、エフェクトを交えたフォントデザインの手法

5章. 配色

  • 流行の配色方法
  • ビビッドカラーを採用したWebデザイン
  • これからの配色の観点について

その他参考記事

ferret-plus.com