週刊Webテク通信

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

ネットで見かけた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 とてもシンプルにサイトに検索機能を追加できるサービス

おすすめ記事

記事・ニュース一覧