週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 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デザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/