週刊Webテク通信

2020年9月第1週号1位は、ウェブアニメーションの基本ルール、気になるネタは、MS監修、Officeみたいなアプリを搭載したパソコン玩具、タカラトミーが発売 「在宅勤務の親と同じことを

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2020年8月24日~8月31日の間に見つけた記事のベスト5です。

1. Ground Rules for Web Animations | CSS-Trickshttps://css-tricks.com/ground-rules-for-web-animations/

ウェブアニメーションの基本ルールを解説した記事です。

アニメーションを使うのに適した場面
  • UIブロックが切り替わるとき
  • コンテンツを読み込んでいるとき
  • ヒントを与えるとき
  • マイクロインタラクション
アニメーションを避けるべき場面
  • ページ遷移するとき
  • ページのコンテンツを最初に読み込むとき
  • 予想外のとき
  • ちゃんと動くかわからないとき
  • 目的が明確でないとき
図1 ウェブアニメーションの基本ルール
図1 ウェブアニメーションの基本ルール

2. Why and How You Should Create Wireframes With Others - Boagworld Showhttps://boagworld.com/season/lean-ux/episode/create-wireframes/

ワイヤーフレームを他の人と一緒に作ることがなぜ重要なのか、どのように作るべきかを紹介しています。

  • ワイヤーフレームとプロトタイプの違いは?
  • なぜ他の人と一緒にワイヤーフレームを作りたいのか
  • ワイヤーフレームを他の人と作る方法は?
  • ワイヤーフレームをテストするには
  • ワイヤーフレームを作ることで、やり取りが延々繰り返されるのを回避する
図2 ワイヤーフレームをなぜ、どのように他の人と一緒に作るのか
図2 ワイヤーフレームをなぜ、どのように他の人と一緒に作るのか

3. 10 Tips to Design Perfect Website Backgroundshttps://line25.com/articles/10-tips-to-design-perfect-website-backgrounds

完璧な背景をデザインするためのヒントを10項目紹介しています。

  1. 幾何学的要素
  2. 背景色
  3. グラデーション
  4. ラインを使う
  5. アニメーションを使う
  6. 画像を背景として使う
  7. テクスチャ背景を適用する
  8. コンテンツと背景をレイヤーに分ける
  9. コンテンツエリアにグラフィックスを使う
  10. 色の心理学に取り組む
図3 完璧な背景をデザインするためのヒント
図3 完璧な背景をデザインするためのヒント

4. 20 Freshest Web Designs, August 2020 | Webdesigner Depothttps://www.webdesignerdepot.com/2020/08/20-freshest-web-designs-august-2020/

新しさが感じられるウェブデザインのサイトを20個まとめています。どのサイトもアニメーションがうまく使われているとのことです。

スクロールに合わせてアニメーションする効果が入っているサイトが多い印象でした。

図4 新しさが感じられるウェブデザインいろいろ
図4 新しさが感じられるウェブデザインいろいろ

5. Awesome Demos Roundup #17 | Codropshttps://tympanus.net/codrops/2020/08/25/awesome-demos-roundup-17/

Codropsに投稿されたHTML+CSS+JSのテクニックから、とくに素晴らしいものを紹介しています。

Three.jsを使って立体的なルービックキューブを動かせるものがあり、ついつい遊んでしまいました。

図5 Codropsの素晴らしいデモいろいろ
図5 Codropsの素晴らしいデモいろいろ

そのほか、最近の記事の中から、気になるニュース記事を紹介します。

先週の気になるWebサービス

Startup - Free Bootstrap Builder for Templates & Themeshttps://designmodo.com/startup/

Bootstrapをベースにしたランディングページやウェブサイトのビルダーです。以前からある人気のサービスで、最近バージョン4になったようです。

ヘッダー、ナビゲーション、フォーム、価格表、フッターなど項目別にいろいろなコンポーネントが用意されていて、それを積み重ねてレイアウトします。それぞれのコンポーネントは細かくカスタマイズできます。

素早くデザイン性の高いランディングページを作れそうです。Bootstrapのclassを指定してデザインをコントロールできるのも便利だと思います。基本的に有料のサービスで、無料で使えるコンポーネントはあまりありませんでした。

図6 Bootstrapベースのウェブサイトのビルダー
図6 Bootstrapベースのウェブサイトのビルダー

おすすめ記事

記事・ニュース一覧