Webデザイン

https://webtan.impress.co.jp/e/2022/10/31/43447

知るほどに奥が深く、必要な知識の多さに気づく。それがUXデザインではないだろうか。今回は、UXデザインに初めて取り組む人に向けて参考になる書籍を紹介する。お話を聞いたのは、freeeでプロダクトデザイナーとして活躍する森川裕美さんだ。

Web担当者Forum

続きを読む

【無料】漢字が使える！かわいい日本語フリーフォント

in デザナビ on 2022-04-26

今回は漢字も収録されている『可愛い！キュート！プリティ！』なフリーフォント、またはAdobe Fontsから使えるフォントをご紹介していきます。

続きを読む

https://liginc.co.jp/592064

in LIG on 2022-04-27

続きを読む

2022年 WEBデザイントレンド5選

in Live Commerce on 2022-04-20

2021年のWEBデザインでは、パララックスアニメーションや動画コンテンツ、スクロールコンテンツなどが注目された。 今回は、2022年にトレンドとなるであろうWEBデザインテクニックを紹介する。 また、最後に2022年の流行色もあわせて紹介する。

1. クレイモーフィズム：大きく角をとり、クレイ（粘土）のようなマットな質感マウスポインターにシャドウを加えるテクニック。CSSで作成できるのが大きなメリット。
2. 円形マウスポインター：カーソルを円形マウスポインターで表現するテクニックは以前からあるが、最近ではUIデザイントレンドとして活用。コンテンツにホバーした際に円形の大きさや色を変化させることで、コンテンツに興味を持たせたり、これがメッセージとして重要なんですなど意図して伝えることができる。
3. グラスモーフィズム：WEBデザインでは、背景をすりガラスのようなぼかしを加え、半透明にすることでテキストなどの視認性が高める効果がある。デザインイメージとして涼しげで奥行き感あるスタイリッシュな印象。
4. カラフルなビビットカラー：ビビットカラーは明るく、活気があり、若々しいイメージを与える配色。世の中が少しでも明るく、元気になるようにビビットカラーの利用は増加する。
5. WEBユーザービリティは最重要：質が高いWEBデザインとは、見た目の綺麗さはもちろんだが、ユーザーにとって「使いやすい、わかりやすい、安全性の高さ」という機能性が最も重要視されるべき。

最後に今年のトレンドカラーは？

2022年のトレンドカラーがパントン社から発表された。 パントン社が選んだ色は、ベリーペリ（Very Peri）「最も幸せで暖かなブルー」であった。
「ベリーペリ」は、コロナ禍という時代において、「思い切った創造性や、想像力に富んだ表現を後押しするような、活発で喜びあふれる態度とダイナミックな存在感」を示すカラーである。
ファッション系や化粧品、理容関連の業態にはお勧めのカラー。

2022年に流行するWebデザインの最新トレンド10個まとめ

in Web Design Trends

2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注目されています。

1. 3Dイラスト：特に2Dのフラットなイラストを3Dに変化させたような、2Dと3Dを組み合わせたスタイルは要チェック。リアルで魅力的な楽しいイラストに、柔らかなキャンディーカラーと組み合わせたようなスタイルは、特にアプリのデザインなどでトップトレンドになる。3Dイラストのトレンドの中に3つのサブトレンド：
   1. 3Dのキャラクターのイラストを使ったデザイン：3D回転などを加えるなどすることで、より面白く、親しみやすく、生き生きした存在となる。クレイアニメのような雰囲気を生み出す。
   2. 2Dのイラストを三次元的に配置することによって3Dの世界観を作り出すスタイル：特にパララックスとの組み合わせが効果的で、ユーザーのマウス操作などを通して3Dの世界を感じ、楽しんでもらえる。
   3. 人物を3Dのイラストにしたもの
2. CGを取り入れたデザイン：CGをデザインに取り入れ、訪れたユーザーをWebサイトの世界に引き込むようなインタラクティブなデザインが特徴。CGのクオリティが高ければ高いほど、ブランドに対するイメージも向上し、プロフェッショナルで信頼、信用できるという印象を与える。短いアニメーションや少し抽象的なイメージを利用することで、膨大な作業を行わなくてもしっかりと完成度の高いデザインを作り上げられる。
3. レトロフューチャースタイル：1980年代を感じさせるレトロフューチャースタイルは、ネオンカラーやグリッドのデザインから簡単に見分けられる。美しい夜の街のようなイメージは、ノスタルジックな雰囲気をもたらしてくれる。
4. パララックス：不必要にパララックスを取り入れてデザインを壊してしまったり、ページを重くしすぎてしまうようなことは避け、慎重に使うように。新しいパララックスの体験は、「Less is More（少ない方が豊かである）」がキーワード。
5. 2Dの漫画風イラスト：
   1. 2Dの漫画風のキャラクターやイラストにシンプルなアニメーションを加えることで、シンプルなWebサイトを魅力的に見せるというアプローチ：ローディング画面やヒーローセクション、あるいはページ内の各セクションのアニメーションにちょっとした2Dの漫画風イラストを加える。
   2. 画面内の要素すべてを漫画風イラスト調にデザインする方法：特定のキャラクターのイラストなどは不要。ボタン、メニューなどページ内の要素1つ1つを漫画風のスタイルでデザインする。
   3. 2Dのイラストを三次元的に配置する方法：3Dイラストのトレンドと重なる部分。
6. リアルなオブジェクト：商品パッケージなどのリアルなオブジェクトをデザインの要素として取り入れ、アニメーションやパララックスと組み合わせて表示。商品パッケージをデザインの中心に位置づけることで、Webサイトの体験の一部として取り入れられる。
7. ブルータリズム：どちらかというと他のトレンドに反抗するような「アンチトレンド」とも呼べる存在。確立された既存のWebデザインの手法を破壊し、思いっきり大胆にしたり、あえて醜いデザインを取り入れたりする。元々ブルータリズムという名称は、生コンクリートを意味するフランス語の「Beton brut」に由来し、第二次世界大戦後のヨーロッパとソ連で見られたブルータリズム建築様式を特徴づけるもの。このブルータリズムをWebデザインに当てはめることは、デザインから様々な要素を剥ぎ取り、最も基本的な姿にすることで、あらゆる既存のトレンドに対するアンチトレンドとしての姿勢をより明確にすることを意味する。
   ブルータリズムのWebデザインは、はっきりとした配色、インタラクション、大きくてウェイトの重いフォント、階層付けの欠如、そしてWebデザインの基本的なベストプラクティスを無視したようなスタイルが使用される。だから、ルールが無く、センスも無く、90年代のWebサイトのような懐かしさを感じられる。
8. ハイテクなSF風デザイン：テック系企業やエンジニアに限らず、ファッションサイトやポートフォリオサイト、広告代理店などにおいても有効に取り入れられる。退屈でよく見かけるようなデザインに、このSF風デザインのトレンドを取り入れ、未来的なデザインと洗練されたインタラクションを組み合わせることで、Webサイトの存在感を際立たせられる。さらに、このトレンドはCGを使ったデザインや3Dのイラスト、レトロフューチャースタイルの光るグリッドやネオンカラーとの相性が抜群で、他のトレンドと組み合わせて作り上げられる。
9. グリッチエフェクト：グリッチやサイケデリックなエフェクトも、2022年のWebデザインの様々な場面で登場することが予想される。（グリッチとは故障のことで、ゲームや動画などのバグが起こった際の画面の乱れのことを指す。）グリッチエフェクトは他の2022年のWebデザインのトレンドとの相性が良く、それらと組み合わせることでより優れた体験を生み出せる。
10. サイケデリックカラー：鮮やかな配色、パターン、アニメーションはWebサイトの体験をサイケデリックな世界に変えられる。要素を歪めたり、溶かしたりすることによってユーザーにより強力な印象を与える。特定のターゲットに対してその魅力を発揮できる。

2022年のWebデザインのトレンドは、それぞれを組み合わせることでその魅力がより強力になるなど、それぞれが密接に関連付けられています。