週刊Webテク通信

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

Webテク, Webデザイン, Web広告, CSS, コンタクトページ, カレンダー, 新料金プラン

この記事を読むのに必要な時間：およそ 2 分

ネットで見かけた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　ポップアップするシンプルなフォームを追加できるサービス

今週の気になるWebネタ

ドコモの「ahamo（アハモ）」，気を付けるべき点は？ - ITmedia Mobilehttps://www.itmedia.co.jp/mobile/articles/2012/03/news148.html

ドコモが新料金プラン「ahamo（アハモ⁠）⁠」を発表して話題になっています。申し込みはオンラインのみで「デジタルネイティブ世代」がメインターゲットとのことです。

キャリアメールのドコモメールが使えないというところが，キャリアメール廃止しちゃってもいい派のわたしとしては良いニュースだと思いました。キャリアメールはなくても困らないと認識されれば，他社も追随するんじゃないでしょうか。

ドコモユーザーでもahamoにプランを変更するにはMNP（番号ポータビリティー）の手続きが必要というのは疑問ではありますが，来年5月からはMNP不要になるようです。新プランというより新ブランドのようだと言われていますが，ともかくインパクトのあるプランが登場しました。

Webテク, Webデザイン, Web広告, CSS, コンタクトページ, カレンダー, 新料金プラン

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote