週刊Webテク通信

2020年10月第3週号1位は、フッターデザインの実例を多数紹介、気になるネタは、ドコモ、「iモード公式サイト」2021年11月末に終了へ

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

1. 13 unique website footer design examples | Webflow Bloghttps://webflow.com/blog/website-footer-design-examples

フッターデザインの実例を多数紹介しています。

フッターデザインが重要な理由のまとめもありました。

  • フッターは良いナビゲーションを意味する
  • フッターは関連情報を伝える
  • フッターは行動を促す最後の場所
  • フッターでSEO対策もできる
図1 フッターデザインの実例を多数紹介
図1 フッターデザインの実例を多数紹介

2. 3 Essential Design Trends, October 2020 | Webdesigner Depothttps://www.webdesignerdepot.com/2020/10/3-essential-design-trends-october-2020/

3つの重要なデザイントレンドをまとめた記事です。

  • (社会問題や環境問題などに対して)⁠スタンスを取る」デザイン
  • 抽象的なデザイン要素
  • 考えさせる画像
図2 3つの重要なデザイントレンド
図2 3つの重要なデザイントレンド

3. 10 Free CSS Snippets for Creating Carousel Slidershttps://speckyboy.com/open-source-carousel-sliders-css/

カルーセルスライダーを作るためのCSSスニペットをまとめています。JavaScriptを使わずCSSだけで実現したものばかりです。

シンプルだけど必要十分な感じのものが多いと感じました。CSSだけだとカスタマイズしやすいメリットもあると思います。

図3 カルーセルスライダーを作るためのCSSスニペットいろいろ
図3 カルーセルスライダーを作るためのCSSスニペットいろいろ

4. Beautiful CSS 3D Transform Perspective Examples in 2020 | Polypane Browser for Developershttps://polypane.app/css-3d-transform-examples/

CSSのtransformやシャドウなどを使った、遠近法で立体感を感じさせる効果を多数用意しています。CSSコードをコピーして利用できます。

すべてHTML上では1つのdivを用意するだけで適用できます。

図4 CSSで立体感を感じさせる効果いろいろ
図4 CSSで立体感を感じさせる効果いろいろ

5. 29 of My Favorite Design Tools & Websites You’ve Never Heard of | by Danny Sapio | Oct, 2020 | UX Collectivehttps://uxdesign.cc/29-of-my-favorite-websites-most-designers-have-never-heard-of-d7d99179cda7

あまり知られていないと思われるウェブデザインに役立つデザインツールとウェブサイトを多数まとめた記事です。

ジェネレーター系のものやアイコン、イラスト素材、デザインのインスピレーションを得られるサイトなどを紹介しています。

図5 ウェブデザインに役立つデザインツールとウェブサイト
図5 ウェブデザインに役立つデザインツールとウェブサイト

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

No code free website bot maker | Joonbothttps://www.joonbot.com/

Joonbotはコーディング不要でチャットボットを作れるサービスです。日本語の表示に問題はなく、無料プランもあります。

質問の答えを選択肢から選んでもらい、条件分岐する仕組みを作れます。自由文入力欄も作れますが、テキストの内容によって処理を変えることはできません。

無料プランではチャットボットを1種類だけ持つことができ、10個のブロック(基本的に1つの質問で1ブロック)まで作れます。有料プランではZapierと連携できたり、将来的にはStripeで決済できたりするようです。

図6 コーディング不要でチャットボットを作れるサービス
図6 コーディング不要でチャットボットを作れるサービス

おすすめ記事

記事・ニュース一覧