週刊Webテク通信

2020年12月第2週号1位は、CSSに関する調査結果、気になるネタは、ドコモの「ahamo(アハモ)」、気を付けるべき点は

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

1. The State of CSS 2020https://2020.stateofcss.com/en-US/

CSSに関する調査結果を発表しています。アメリカ中心ですが全世界の人が回答しています。

わたしが特に気になったのは、TechnologiesにあるCSSフレームワークと、Other Toolsにあるテキストエディタについての結果です。

CSSフレームワークの結果は、シェアではなく「Satisfaction/Interest/Usage/Awareness」の結果で、⁠満足度/関心度/使ったことある率/知名度」といった感じの意味だと思います。図の下に数値の出し方の詳しい説明も載っています。

Tailwind CSSが満足度、関心度で2年連続1位で、知名度でもBootstrapに次いでの2位に浮上していました。

図1 CSSに関する調査結果
図1 CSSに関する調査結果

2. 11 Tips for Creating a Usable Website Contact Page | Design Shackhttps://designshack.net/articles/ux-design/web-contact-page-tips/

連絡先(コンタクト)ページを作るためのヒントをまとめた記事です。

  1. 魅力的なものにする
  2. 人間味のある要素を追加する
  3. すべての種類の連絡先を含める
  4. デザインの一貫性を保つ
  5. ページを複雑にしない
  6. アクションのきっかけとなる要素を含める
  7. 連絡先情報がたくさんある場合もできるだけ簡単にする
  8. リマインダーを含める
  9. 空白を最大限に活用する
  10. 見つけやすくする
  11. 連絡先情報を1ページに制限しない
図2 連絡先(コンタクト)ページを作るためのヒント
図2 連絡先(コンタクト)ページを作るためのヒント

3. 4 Creative Ways to Design a Festive Website | Webdesigner Depothttps://www.webdesignerdepot.com/2020/12/4-creative-ways-to-design-a-festive-website/

クリスマスや正月のセールなど、お祭り用のサイトを作る方法を解説しています。

  1. ページビルダーを使って簡単にお祭り用のコンテンツに差し替える
  2. ホリデーから次のホリデーに簡単に切り替える
  3. ちょっとしたアニメーションでホリデーを生き生きとさせる
  4. 季節感のあるちょっとした要素が大いに役立つ
図3 お祭り用のサイトを作る方法
図3 お祭り用のサイトを作る方法

4. 10 Hot Logo Design Trends for 2021 - Icons8 Bloghttps://icons8.com/articles/hot-logo-design-trends/

ロゴデザインのトレンドを10個紹介しています。

  1. ミニマリストデザイン
  2. カスタムフォント
  3. グラデーション
  4. 欠けたテキスト
  5. 図形の新しい使い方
  6. ネガティブスペース
  7. エレガントな線
  8. 計算されたカオス
  9. バランス
  10. モノグラム
図4 ロゴデザインの10個のトレンド
図4 ロゴデザインの10個のトレンド

5. A Calendar in Three Lines of CSS – Calendar Trickshttps://calendartricks.com/a-calendar-in-three-lines-of-css/

カレンダーを3行のCSSで作る方法を解説しています。

CSSグリッドを使って横7列のグリッドを作り、その月の最初の日を何番目(何曜日)から始めるかを指定するだけで、カレンダーのできあがりです。

さらに余白やテキストの揃えなどのCSSでの指定は必要ですが、CSSグリッドに親しむのに適した例だと思いました。

図5 カレンダーを3行のCSSで作る方法
図5 カレンダーを3行のCSSで作る方法

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

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

Feedlify - Customer Feedback toolhttps://feedlify.com/

Feedlifyはウェブサイトやウェブアプリに、シンプルなリアクションを送れるフォームを追加するサービスです。コードを1行追加するだけでポップアップするフォームを設置できます。

絵文字を使った5段階評価や、簡単なお問い合わせフォーム、メルマガ登録フォームとして使うこともできます。どういうフォームを作れるかの6種類のサンプルを「TRY WIDGET」のリンクから見ることができます。

無料でも使えますが30件までのフィードバックに限定されています。有料プランは月10ドルなんですが、99ドルで一生使えるライセンスを100人限定で用意しているのも面白いです。

図6 ポップアップするシンプルなフォームを追加できるサービス
図6 ポップアップするシンプルなフォームを追加できるサービス

おすすめ記事

記事・ニュース一覧