週刊Webテク通信

2020年3月第2週号 1位は,HTMLのリンクとボタンの完全ガイド,気になるネタは,東京都の新型コロナ対策サイト,GitHubでコード公開 修正提案受け付け

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

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

1. A Complete Guide to Links and Buttons | CSS-Trickshttps://css-tricks.com/a-complete-guide-to-links-and-buttons/

HTMLのリンクとボタンの完全ガイドです。

マークアップの記述例と関連する属性,スタイリングのベストプラクティス,避けるべきこと,関連リンクをまとめています。

リンクとボタンに関する,HTML,CSS,JavaScript,デザイン,アクセシビリティの考察事項とともに,避けるべき落とし穴,悪習を知ることで良いUXを実装できるとのことです。

リンクとボタンの使い分けのクイックガイド
  • ほかのページや同じページの別のパートへ行く場合はリンクを使う
  • JavaScriptによるクリックできるアクションを作るときはボタンを使う
  • フォームの送信にはinputタグのsubmitを使う

図1 HTMLのリンクとボタンの完全ガイド

図1 HTMLのリンクとボタンの完全ガイド

2. 5 Reasons to Apply Digital Illustration in Web Design | Fireart Studiohttps://fireart.studio/blog/5-reasons-to-apply-digital-illustration-in-web-design/

ウェブデザインにイラストを使う5つの理由を紹介した記事です。

  1. ウェブ上で競合他社に勝つ
  2. ブランドの個性を示す
  3. 完全に自由にデザインできる
  4. 印象を持続できる
  5. ブランドのストーリーを語る

図2 ウェブデザインにイラストを使う5つの理由

図2 ウェブデザインにイラストを使う5つの理由

3. Cross-Cultural Design – A List Aparthttps://alistapart.com/article/cross-cultural-design/

多言語向けにデザインするときに気をつけることを解説しています。

  • 中国ではGoogle フォントがブロックされていて使えない
  • 言語によって視覚密度が違う
  • CJK ⁠中国語,日本語,韓国語)のフォントサイズは少し大きくする
  • ボタンの中の文字数が変わることを考慮する

など,興味深い内容でした。

図3 多言語向けにデザインするときに気をつけること

図3 多言語向けにデザインするときに気をつけること

4. 11 Types of Gradients for Creating Stunning Backgroundshttps://line25.com/inspiration/11-types-of-gradients-for-creating-stunning-backgrounds

グラデーションをデザインするベストプラクティスと11個の例を紹介した記事です。

  • 無理しないで2色だけ使うのが賢い方法。3色以上は使わない
  • ランダムに色を選ぶのは避ける。Adobe Color CCを使うとスキームをもとに色を選べる

など,グラデーションを作るためのヒントをボリュームたっぷり解説していました。

図4 グラデーションをデザインするベストプラクティスと11個の例

図4 グラデーションをデザインするベストプラクティスと11個の例

5. State of Website Builders 2020 | Site Builder Reporthttps://www.sitebuilderreport.com/state-of-website-builders

ウェブサイトビルダーの現状について調査結果をまとめています。

  • WixとSquarespaceで市場の55%を占める
  • WebflowとCarrdが急成長
  • EコマースではShopifyが地位を強化

など,興味深い内容でした。

図5 ウェブサイトビルダーの現状まとめ

図5 ウェブサイトビルダーの現状まとめ

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

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

Supersimplesearch: Super simple search for your websitehttps://getsupersimplesearch.com/

Super simple searchは,その名の通りとてもシンプルにサイトに検索機能を追加できるサービスです。ウィジェットを生成してページのHTMLコードに貼り付けるだけで使えます。

URLを入力して導入イメージをプレビューできます。右下に虫眼鏡マークが現れ,検索窓と検索結果はポップアップで表示されました。検索エンジンにはMicrosoft Bingを使っているとのことです。

1000検索クエリごとに5ドルという課金方式で,小規模なサイトにも導入のハードルは低そうです。高額になりすぎないように毎月の検索クエリの上限を設定できます。機能強化も予定しており,今後が気になるサービスです。

図6 とてもシンプルにサイトに検索機能を追加できるサービス

図6 とてもシンプルにサイトに検索機能を追加できるサービス

今週の気になるWebネタ

東京都の新型コロナ対策サイト,GitHubでコード公開 修正提案受け付け - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2003/05/news073.html

東京都が新型コロナウイルス対策サイトを開設しました。GitHubでソースコードを公開してIssue(課題)へのコメントや,プルリクエスト(修正に対するレビュー)を受け付けていることが話題です。

サイトで使われている技術も現在のトレンドを押さえたものになっているようで,ITエンジニアも納得の作りのようです。デザイン,UIもシンプルでいい感じです。

台湾のデジタル担当大臣がプルリクエストを出したことで,さらにネットでは盛り上がりを見せているようです。新型コロナ関連の話題では数少ない明るいニュースで,和ませていただきました。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

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

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